- 속성 - typography
폰트의 기본이 되는 타이포그래피의 구조에 대해 알아보도록 하겠습니다.
- em 폰트의 전체 높이를 의미합니다.
- ex ( = x-height ) 해당 폰트의 영문 소문자 x의 높이를 의미합니다.
- Baseline 소문자 x를 기준으로 하단의 라인을 의미합니다.
- Descender 소문자에서 baseline 아래로 쳐지는 영역을 의미합니다. 서체에 따라 descender의 길이가 다릅니다. ( g, j, p, q, y )
- Ascender 소문자 x의 상단 라인 위로 넘어가는 영역을 의미합니다. ( b, d, h, l )
- 속성 - font-family
font-family는 상속되기 때문에 기본적으로 대표 폰트를 선언하고, 특정 폰트가 필요한 부분에서 재정의해서 사용합니다.
div {
font-family:family-name | generic-family(|initial|inherit);
font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif;
}
- 속성 - height
line-height 속성을 이용해 이 행간을 조정할 수 있습니다.
number 부모 요소의 숫자 값이 그대로 상속됩니다. 즉, 자식 요소에서도 또 한 번 자식 요소의 font-size를 기준으로 계산된 값을 가집니다.
% 부모 요소에서 %값이 그대로 상속되는 것이 아니고, %에 의해 이미 계산된 px값이 상속됩니다.
body { font-size: 20px; line-height: 2; } /* line-height = 40px; */
p { font-size: 10px; } /* line-height = 20px; */
body { font-size: 20px; line-height: 200%; } /* line-height = 40px; */
p { font-size: 10px; } /* line-height = 40px; */- 속성 - size
텍스트를 많이 사용하는 html 문서에서 font-size 속성은 가독성이나 명확한 구문을 표현하기 위해서 반드시 필요한 속성입니다.
- 속성 - font-weight
font-weight는 글꼴의 굵기를 지정하는 속성입니다.
normal : 400, bold : 700
- 속성 - font-style
font-style은 글꼴의 스타일을 지정하는 속성입니다.
- 속성 - font-variant
font-variant는 글꼴의 형태를 변형하는 속성으로 소문자를 작은 대문자로 변환할 수 있습니다.
변환된 대문자는 실제 대문자 사이즈 보다 더 작은 사이즈로 나타나며 대소문자 변환이기 때문에 한글에는 적용되지 않습니다.
- 속성 - font
font: font-style font-variant font-weight font-size/line-height font-family | initial | inherit;
축약형을 선언할 때는 아래 사항들을 유의해야 합니다.
- font-size와 font-family는 반드시 선언해야 하는 필수 속성입니다.
- 빠진 속성이 있다면 기본 값으로 지정됩니다.
- 각 속성의 선언 순서를 지켜야 합니다.
- 속성 - webfont
webfont는 서버에 저장해 제공하거나, 웹 경로를 통해 사용하는 폰트를 말합니다.
@font-face {
font-family: webNanumGothic; /* 사용자 지정 웹 폰트명 */
src: url(NanumGothic.eot); /* 적용 될 웹 폰트의 경로 */
font-weight: bold; /* 필요에 따라 지정 */
font-style: italic; /* 필요에 따라 지정 */
}- 속성 - vertical-align
css를 통해서 텍스트를 수직, 수평 정렬 할 수 있습니다.
그 중 vertical-align 속성을 이용하여 inline 또는 inline-block에서만 사용하여 수직 정렬을 할 수 있습니다.
- 속성 - text-align
앞서 배운 vertical-align이 인라인 요소의 수직 정렬이었다면, text-align은 인라인 요소의 수평 정렬에 사용됩니다.
block level 요소 정렬은 margin으로 한다.
- 속성 - text-indent
문서나 코드를 살펴보면 새로운 문단의 시작에서 들여쓰기를 많이 사용합니다.
text-indent를 이용해서 문장의 첫 줄을 들여쓰기할 수 있습니다.
div {
text-indent:1em;
text-indent:40px;
text-indent:15%
}- 속성 - decoration
텍스트의 장식을 지정하는 속성입니다.
div {
text-decoration:overline;
text-decoration:line-through;
text-decoration:underline;
}- 속성 - 단어 관련 속성
CSS에는 앞에서 배운 font와 관련된 텍스트에 대한 속성뿐만아니라, 단어에 대해서
어떻게 표현되게 할지 지정할 수 있습니다.
