Typography
글자와 문단의 속성을 제어하며 다음과 같은 스타일을 사용한다.
(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요소에 글꼴 지정
(3) font-size
-
글자 크기를 지정하며 상대단위, 절대단위를 사용할 수 있음
-
글자크기도 상속되는 속성이며 시스템 대표 글자크기는 body속성에 지정
-
제목요소, 폼요소는 글자크기에 상속되지 않음
-
절대단위
＊ px → 해상도 기준 ＊ % → 백분율 단위 ＊ em → 척도단위(기준이 되는 값을 1로 보고 그에 대한 배율을 적용)
(4) line-height
-
인라인 요소의 높이를 표현한다.
-
글자가 요소 높이의 중간에 위치하도록 하기 위해서 사용.
-
line height 계산법
(line-height) - (font-size) / 2 = 반행간(행간의 절반) 반행간을 글자의 상단과 글자의 하단에 배치 반행간+글자크기+반행간 = line-height (20-12)/2 = 4px 4px + 12px + 4px = 20px
(5) font-weight
-
글자의 무게를 표현하며 normal, 100~900, bold 등을 사용한다.
-
제목 요소는 bold가 적용된 요소다.
(6) font-style
- 글자 스타일을 표현하며 italic, oblique를 표현한다.
(7) font-variant
-
소문자크기의 글자를 대문자로 표현할 때, 영문에만 적용.
-
사용하는 값은 normal, small-caps을 적용한다.
(8) text-align
-
인라인 요소의 가로정렬을 표시
-
인라인 요소는 텍스트, 이미지, 폼요소
-
스타일은 인라인 요소를 감싸는 "블록" 요소에 작성
-
사용하는 값은 left, center, right, justify를 사용한다.
(9) text-decoration
-
글자장식을 표현한다.
-
사용하는 값은 underline(밑줄), over-line(윗줄), line-throught(취소선)을 사용한다.
(10) text-transform
-
소문자, 대문자 변환을 표현하며 영문에 적용
-
사용하는 값은 uppercase(대문자), lowercase(소문자) capitalize(첫글자만 대문자) 등이 있다.
(11) text-indent
-
들여쓰기 및 내어쓰기를 표현하며 양수값은 들여쓰기, 음수값은 내어쓰기를 한다.
-
text-indent를 이용하는 경우는 주로 음수값 -9999px을 이용하여 스크린에서 텍스트를 감출 때 많이 사용한다.
(12) letter-spacing(자간), word-spacing
- 글자 및 단어 사이의 간격을 제어
- 음수 양수값을 입력하여 간격제어
(13) vertical-align
-
인라인 요소끼리의 수직위치 정렬 표현
-
사용하는 값은 baseline, top, middle, bottom 등이 있음
-
스타일은 블록요소 안의 인라인 요소에 적용
(14) List-style-type
-
목록기호 타입을 바꿀 수 있으며 다양한 기호설정이 가능하다.
-
기본값을 사용하는 경우는 거의 없으며 주로 배경이미지를 이용하여 목록기호를 표시하므로 리스트에서 제공하는 목록기호는 none으로 설정하여 보이지 않게 한다.
-
리스트 설정은 부모요소인 ul, ol 자식요소인 li 둘 중의 어느 곳에 작성하여도 상관없음. 그러나 일반적으로 li에 선언.
