5. 타이포그래피(Typhography)
- 글자와 문단의 속성을 제어하며 다음과 같은 스타일을 사용한다
(1) 스타일 종류
1) 글자
가. font-family
나. font-size
다. line-height
라. font-weight
마. font-style
바. font-variant
2) 문단
가. text-align(인라인 요소의 가로정렬 셋팅)
나. text-indent(들여쓰기)
다. text-decoration(글자장식 밑줄)
라. text-transform(대문자 소문자)
마. vertical-align(인라인 요소의 수직위치 정렬)
바. letter-spacing(자간)
사. word-spacing(단어와 단어사이)
아. white-space(공백문자처리)
자. word-break(줄바꿈처리)
(참고)상속이란
- 부모요소의 스타일을 하위요소에 전달하는 것을 의미
- 일반적으로 상속되는 속성은 폰트속성이 주를 이루며 나머지 속성은 스타일 값을 이용하여 강제 상속할 수 있으며 상속받고 싶지 않을 때는 해당요소에 직접 스타일을 지정할 수 있음
※ 상속은 스타일에서 전반적으로 다루고 있는 개념인데, 살짝만 알아두는걸로 할께요^^
(2) font-family
- 웹페이지의 글꼴지정
- 상속되는 스타일
- 웹페이지의 대표폰트는 body요소에 글꼴 지정
■ 폰트의 사용
1. 시스템 폰트
- font-family → 글꼴지정
- 운영체제 폰트 이외에는 사용이 힘듬
2. 이미지 폰트
이미지 프로그램에서 폰트를 이미지로 제작
→ img나 배경 이미지로 대체
3. 웹폰트
→ 서버에 폰트를 올려놓고 사용자가 다운받아서 웹페이지의 폰트를 적용하는 방식 (css3에서 지원)
font-family:글꼴이름;
font-family:글꼴1, 대체글꼴, 대표폰트;
font-family:'돋움', dotum, sans-serif;
※ 한글, 영문띄어쓰기 폰트 이름은 인용부호로 감싸서 작성하기
※ 대표폰트
＊ serif → 바탕체, 궁서체, times new roman
＊ sans-serif → 굴림, 돋움체, arial, verdana, helvetica
＊ 돋움 12px, 11px
■ 예시
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>글꼴</title> <style type="text/css"> body{font-family:'돋움', dotum, sans-serif;}/*대표글꼴, 대체글꼴, 대표폰트*/ </style> </head> <body> <h2>font-family</h2> <p>글꼴을 '돋움'으로 지정</p> </body> </html> |
(3) font-size
- 글자 크기를 지정하며 상대단위, 절대단위를 사용할 수 있음
- 글자크기도 상속되는 속성이며 시스템 대표 글자크기는 body속성에 지정
- 제목요소, 폼요소는 글자크기에 상속되지 않음
- 작성형식
＊ font-size:값;
- 절대단위
＊ px → 해상도 기준
＊ % → 백분율 단위
＊ em → 척도단위(기준이 되는 값을 1로 보고 그에 대한 배율을 적용)
예시) 브라우저에서 사용자가 스타일을 적용하지 않았을때 화면에 나오는 글자크기를 100%라고 표현(제목요소 제외)
(참고) 단위변환 사이트 http://pxtoem.com/
100% = 16px = 1em
75% = 12px = 0.75em = 9pt
■ 예시1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>글자크기</title> <style type="text/css"> body{font-family:돋움; font-size:12px;}/*기본크기는 16px*/ h1{font-size:50px;} div{font-size:120%;} /*상속받는 글자 크기를 기준으로 배율계산*/ /*부모의 글자크기를 상속받음*/ li{font-size:1.5em;} </style> </head> <body> <h1>font-size</h1> <div>자식 <div>손자 <div>증손자</div> </div> </div> <ul> <li>글자크기 <ul> <li>글자크기 <ul> <li>글자크기</li> </ul> </li> <li>글자크기</li> </ul> </li> <li>글자크기 </ul> </body> </html> |
■ 실행결과1
(4) line-height
- 인라인 요소의 높이를 표현한다.
- 글자가 요소 높이의 중간에 위치하도록 하기 위해서 사용.
- line height 계산법
(line-height) - (font-size) / 2 = 반행간(행간의 절반)
반행간을 글자의 상단과 글자의 하단에 배치
반행간+글자크기+반행간 = line-height
(20-12)/2 = 4px
4px + 12px + 4px = 20px
■ 예시2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>인라인 요소의 높이</title> <style type="text/css"> *{margin: 0; padding: 0;} .aa{background-color: #ccc;} .bb{font-size:12px; line-height: 21px; background-color: #f0f;} .cc{font-size:20px; line-height: 30px; background-color: #0ff;} .dd{font-size:12px; line-height: 30px; height: 30px; background-color: #0f0;} /* 계산 : 30-12=18/2=9px */ </style> </head> <body> <h2>line-height</h2> <p class="aa">기본테스트(폰트 16px 전체높이 21px)</p> <p class="bb">기본테스트(폰트 12px 줄높이 20px)</p> <p class="cc">기본테스트 <br />(폰트 20px 줄높이 30px)</p> <p class="dd">기본테스트 (폰트 12px 줄높이 30px 높이 30px)</p> </body> </html> |
■ 실행결과2
(5) font-weight
- 글자의 무게를 표현하며 normal, 100~900, bold 등을 사용한다.
- 제목 요소는 bold가 적용된 요소다.
(6) font-style
- 글자 스타일을 표현하며 italic, oblique를 표현한다.
(7) font-variant
- 소문자크기의 글자를 대문자로 표현할 때, 영문에만 적용.
- 사용하는 값은 normal, small-caps을 적용한다.
■ 예시3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>폰트 기타</title> <style type="text/css"> *{margin:0; padding:0;} .w1{font-family: 돋움; font-weight:600;} .w2{font-family: 돋움; font-weight:bold;} .w3{font-family: 돋움; font-weight:normal;} .s1{font-style:italic;} .s2{font-style:normal;} .v1{font-variant: normal;} .v2{font-variant: small-caps;} </style> </head> <body> <h2>font-weight</h2> <p class="w1">100</p><!-- 글자두께를 세밀하게 조절가능 --> <p class="w2">bold</p> <p class="w3">normal</p> <h2>font-style</h2> <p class="s1">Italic</p> <address>주소를 입력합니다.</address><!-- 기본이 이탤릭체 --> <address class="s2">주소를 입력합니다.</address> <h2>font-variant</h2> <p class="v1">HYPER TEXT MARKUP hyper text markup</p> <p class="v2">HYPER TEXT MARKUP hyper text markup</p> </body> </html> |
■ 실행결과3
