HTML DIV tag: 영역내 글자(폰트) 종류, 크기, 색상, 굵기, 줄간격 등을 설정하는 방법
DIV 영역내 글자(폰트)의 글꼴, 크기, 기울임, 색상, 굵기, 줄간격 주기
색 상 color: 색상이름 또는 색상코드 ;
굵 기 font-weight: bold ;
기울임 font-style: italic;
크 기 font-size: 숫자px, 숫자% 또는 숫자em ;
글 꼴 font-family: 굴림, 돋움, 궁서, Arial, 등등 ;
줄높이 line-height: 숫자px, 숫자% 또는 숫자em ;
굵 기 font-weight: bold ;
기울임 font-style: italic;
크 기 font-size: 숫자px, 숫자% 또는 숫자em ;
글 꼴 font-family: 굴림, 돋움, 궁서, Arial, 등등 ;
줄높이 line-height: 숫자px, 숫자% 또는 숫자em ;
1. [색상 지정 : color: 색상 이름 또는 코드]
파랑(blue), 빨강(red) 등과 같이 HTML에서 지정할 수 있는 이름은 기본색상 17개를 포함하여 모두 140가지가 있다.
어떤 브라우저에서든 문제없이 정확하게 표현할 수 있는 웹안전색상(Web safe colors) 또는 웹표준색상(Web standard color)은 216가지가 있다.
※참고: 색상이름 및 Hex코드표
예) 윗쪽은 색상이름인 'green'으로 지정하고, 아래쪽은 green의 Hex코드인 #008000 으로 지정함
어떤 브라우저에서든 문제없이 정확하게 표현할 수 있는 웹안전색상(Web safe colors) 또는 웹표준색상(Web standard color)은 216가지가 있다.
※참고: 색상이름 및 Hex코드표
예) 윗쪽은 색상이름인 'green'으로 지정하고, 아래쪽은 green의 Hex코드인 #008000 으로 지정함
<div style="color: green;">
이곳은 DIV 영역이며, 글자색을 녹색으로 지정함
</div>
이곳은 DIV 영역이며, 글자색을 녹색으로 지정함
</div>
<div style="color: #008000;">
이곳은 DIV영역이며, 글자색을 Hex코드로 지정함
</div>
이곳은 DIV영역이며, 글자색을 Hex코드로 지정함
</div>
2. [폰트(font) 지정]
폰트는 굵기, 기울임, 크기, 글꼴을 한꺼번에 지정할 수도 있고, 각각 지정할 수도 있다.
한꺼번에 지정하려면
font: 굵기 기울임 크기/줄높이 글꼴;
와 같은 순서로 지정하고 속성과 속성사이에는 공백(스페이스 바)을 준다.
각각 지정하려면
font-size: 폰트 크기;
등과 같이 개별적으로 굵기 기울임 크기 줄높이 글꼴을 지정한다.
2-1. [한꺼번에 지정한 태그 모양]
<div style="font: bold italic 2.0em/1.0em 돋움체;">
여기는 DIV영역이며, 폰트(font)에 굵기, 기울임, 크기/줄높이, 글꼴을 한꺼번에 지정하였다
</div>
여기는 DIV영역이며, 폰트(font)에 굵기, 기울임, 크기/줄높이, 글꼴을 한꺼번에 지정하였다
</div>
[실제 적용된 모습]
여기는 DIV영역이며, 폰트(font)에 굵기, 기울임, 크기/줄높이, 글꼴을 한꺼번에 지정하였다
2-2. [폰트 속성을 각각 지정한 태그 모양]
<div style="
font-weight: bold;
font-style: italic;
font-size: 2.0em;
line-height: 1.0em;
font-family: 돋움체;
">
여기는 DIV영역이며, 폰트(font) 속성을 각각 지정하였다.
</div>
font-weight: bold;
font-style: italic;
font-size: 2.0em;
line-height: 1.0em;
font-family: 돋움체;
">
여기는 DIV영역이며, 폰트(font) 속성을 각각 지정하였다.
</div>
[실제 적용된 모습]
여기는 DIV영역이며, 폰트(font)속성을 각각 지정하였다.
※ 위 2-1과 지정하는 방식은 다르지만, 속성값이 똑 같기 때문에 보여지는 결과는 같은 모습이 된다.3. 글자 굵기(font-weight: )
글자의 굵기는 100~900 까지의 숫자로 지정할 수 있다. 기본설정인 400 은 normal에 해당하고, 700 은 bold에 해당한다.
| 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
| normal | bold |
4. 글꼴(font-family: )글꼴은 여러개를 지정할 수 있으며, 가능한 것 부터 앞에서 부터 적용이 된다. 즉,
font-family: 궁서체, 돋움체, 굴림체;
로 지정을 하면, 궁서체 글꼴이 있으면 궁서체로 표시하고, 궁서체가 없으면 다음 글자체인 돋움체로 표시하고, 도움체 글꼴이 없으면 그 다음에 있는 굴림체로 표시한다. 표시할 수 있는 글꼴이 없으면, 기본글꼴로 표시된다.
이 글꼴은 기본 글꼴이다 (= 아무것도 지정하지 않음)
이 글꼴은 궁서체이다 This font is 궁서체
이 글꼴은 돋움체이다 This font is 돋움체
이 글꼴은 굴림체이다 This font is 굴림체
이 글꼴은 Arial 이다 This font is Arial
이글꼴은 Courier 이다 This font is Courier
이 글꼴은 Georgia 이다 This font is Georgia
이 글꼴은 Impact 이다 This font is Impact
이 글꼴은 Verdana 이다 This font is Verdana
이 글꼴은 궁서체이다 This font is 궁서체
이 글꼴은 돋움체이다 This font is 돋움체
이 글꼴은 굴림체이다 This font is 굴림체
이 글꼴은 Arial 이다 This font is Arial
이글꼴은 Courier 이다 This font is Courier
이 글꼴은 Georgia 이다 This font is Georgia
이 글꼴은 Impact 이다 This font is Impact
이 글꼴은 Verdana 이다 This font is Verdana
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...