css 폰트 나눔고딕 폰트
HTML & Javascript
2015. 2. 9. 06:23
css 폰트 나눔고딕 폰트 ■ 이 글을 검색하신 분들이라면 저처럼 html과 css를 공부하고 계시거나 관심이 있으신 분들이겠죠?ㅎ 저도 공부하면서 정리하고 있는 거라서 많이 부족하지만, 이번 글에서는 html 문서에 나눔고딕 폰트를 적용하는 과정을 정리해볼까 합니다. 지금 이 블로그의 폰트도 여기서 알아볼 방법으로 나눔고딕으로 설정해 놓은 상태거든요. 이 글을 모바일로 보고 계시든, PC로 보고 계시든 무조건 나눔고딕으로 보이고 있을 겁니다. ■ html 문서에 폰트를 적용하는 방법은 많이 있지만 여기서는 구글의 웹폰트 중에서 나눔고딕을 css 폰트 속성을 이용해서 적용하는 과정을 정리해볼게요. 메모장에 예제를 만들어서 진행할 건데요. 간단한 내용이니까 눈으로만 보지 마시고, 직접 해보셔요. ▲ 웹 문..
html font color
HTML & Javascript
2015. 2. 4. 18:45
html font color ■ 어떤 문서든 글의 내용도 중요하지만, 글꼴과 글씨의 색깔과 크기 등도 상당히 중요한데요. 이번 글에서는 html로 작성하는 문서의 font color에 대해서 정리해볼게요. ■ 정리라고 할 건 없고, 예제를 만들어서 여러 가지 속성값을 적용해보고 어떻게 바뀌는지 확인해보는 방법으로 정리해보겠습니다. ■ 간단하게 두 개의 문단을 입력하고 각각 다른 스타일을 적용하기 위해서 아이디를 설정했습니다. ■ 스타일 적용을 아무것도 하지 않았기 때문에 이런 문장이 출력됩니다. 이것들에 하나씩 font color 속성을 적용해볼게요. 먼저 위쪽 문단에 color 속성을 적용해서 font의 색깔을 바꿔보겠습니다. ■ 태그 안에 아이디 'aaa'의 속성에서 color 값을 설정해봤는데요. ..
html css 자간 줄간격
HTML & Javascript
2015. 1. 28. 14:56
html css 자간 줄간격 홈페이지를 만들 때 시각적인 효과를 주기 위해서 여러 가지 스타일 속성을 지정하는데요. 가장 대표적인 게 글꼴 일 겁니다. 물론 글의 내용이 더 중요하겠지만, 눈으로 보기 편하면 더 좋겠죠. 텍스트관련 속성 중에서 이번 글에서는 글자간의 간격과 줄간격 속성에 대해서 알아보겠습니다. 먼저 텍스트 간의 간격을 조절하는 속성은 크게 두 가지가 있는데요. 'letter-spacing'과 'word-spacing'입니다. 단어만 봐도 알 수 있겠지만, 첫 번째는 글자간의 간격이구요. 두 번째는 단어 사이의 간격입니다. 이 속성을 이용해서 예제를 만들어 볼게요. ■ 똑같은 문자열 세 줄을 입력해봤습니다. 첫 번째 단락은 기준으로 그대로 두고, 두 번째는 글자간의 간격을, 세 번째는 단어..
html div 태그
HTML & Javascript
2015. 1. 27. 14:22
■ html div 태그를 사용하는 가장 큰 목적은 여러 개의 콘텐츠를 묶어서 시각적인 효과를 주기 위해서라고 해도 과언이 아닌데요. 즉 어지럽게 흐트러질 수 있는 요소들을 하나로 묶어주는 역할을 하고 그것들의 위치 및 각종 효과를 주기 위해서 사용하는 경우가 많습니다. 이번 글에서는 div 태그 안에 요소(그림, 텍스트)를 넣어서 몇 가지 효과를 주는 과정을 정리해보도록 하겠습니다. ■ 예제를 하나 만들어봤는데요. 단순하게 본문에 그림 하나와 텍스트를 입력해봤습니다. ■ 이렇게 출력이 되겠죠? 이제 이 두 요소를 묶어서 몇 가지 효과를 만들어 보겠습니다. ■ 이미지와 텍스트를 div 태그로 묶었구요. CSS에서 몇 가지 효과를 줘봤습니다. div의 가로 폭을 400px로 고정했구요. 테두리(border..
html5 태그 input type 속성
HTML & Javascript
2015. 1. 21. 12:00
html5 태그 input type 속성 ■ 사용자로 하여금 입력을 받기 위해서 input type 태그를 이용하는데요. input 태그의 속성에 대해서 몇 가지 정리해보려고 합니다. 여기에서 정리할 내용을 예전에는 자바스크립트를 이용해서 처리해야 했지만, html5에서는 간단하게 input 태그의 속성으로 처리할 수 있게 됐습니다. 유용하게 사용할 속성들 몇 가지를 정리해보겠습니다. 속성의 정의를 살펴보고, 간단하게 예제를 만들어 볼게요. 1. readonly 단어의 뜻에서 알 수 있듯이 단순하게 읽기만 가능하게 설정하는 속성입니다. 텍스트 필드에 내용이 있지만, 사용자가 이 내용을 수정할 수 있는 건 아니고 단순하게 읽기만 할 수 있게 하는 겁니다. ■ 속성을 적용하는 방법은 간단합니다. input ..
html 주석 / css 주석 처리
HTML & Javascript
2015. 1. 20. 13:00
html 주석 css 주석 처리 ■ 주석이란 프로그램 소스의 내용들을 나중에 알아보기 쉽게 소스 사이사이에 설명글을 붙여 놓는 거라 생각하면 되는데요. 이런 기능의 주석은 나중에 본인이 소스를 볼 때도 편하고 다른 사람이 html 소스를 열어봤을 때 페이지의 내용을 쉽게 이해할 수 있도록 하는 기능을 하는데요. 어떤 프로그램이건 코딩할 때 주석입력은 필수라고 해도 과언이 아닐 겁니다. ■ 이런 주석은 순전히 사람만을 위한 글이기 컴퓨터의 웹 브라우저는 인식할 필요도 없고, 출력하지도 않습니다. html과 css가 주석을 처리하는 방식은 약간 다른데요. 그 형식을 하나씩 살펴볼게요. 먼저 html의 주석은 의 형식입니다. css의 주석은 /*설명글*/ 입니다. 두 형식을 생각하면서 예제를 만들어 볼게요. ..