CSS 폰트, 텍스트

타이포그래피의 구조

• 모든 폰트는 em박스를 가지고 있고 위 그림과 같은 구조로 이루어짐

•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를 재선언하면 부모에 generic-family가 선언되어있어도 다시 선언해주어야 합니다.

font-family: family-name | generic-family ( | initial | inherit );

family-name: 사용할 폰트의 이름을 나타내며 ' , ' 로 구분하여 여러 개 선언 할 수 있음. 먼저 선언된 순서대로 우선순위가 결정. 이름 중간에 공백이 있거나, 한글일 경우 홑따옴표로 묶어서 선언.

generic-family: family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해줌. font-family 속성의 맨 마지막에 선언해야 하며, 키워드이기 때문에 따옴표 등의 인용부호로 묶지 않는 것이 원칙.
Generic-Family에는 대표적인 서체로 serif, sans-serif가 있음 

line-height

• 텍스트 라인의 높이를 의미하는 것으로 주로 행간을 제어할 때 사용(기본 값 : normal)
• 텍스트의 줄 간격을 제어하는데 사용되며, 줄 바꿈이 될 때 윗줄의 텍스트 하단과 아랫줄의 텍스트 상단까지의 간격을 조절.
• 이때, line-height로 제어되는 부분을 "line-box"라고도 하며, 타이포그래피 구조에서 [em 박스]와 [상하단의 여백]을 포함한 전체 구조를 나타냅니다.

line-height: normal | number | length | initial | inherit ;

• -height의 값으로 number를 선언할 때와 %로 선언할 때의 차이가 있음
• 두 값 모두 font-size를 기준으로 동작하기 때문에 1이나 100%를 같은 것이라고 오해할 수 있음
• 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; */

• 숫자 값을 사용하면 부모 엘리먼트에서 계산된 값 대신 비율을 그대로 상속받을 수 있으므로, 가능하면 단위가 없는 값을 사용하는 것이 좋음

font-size

• 글꼴의 크기를 지정하는 속성(기본 값 : medium)

font-size: keyword | length | initial | inherit ;

absolute size (keyword) 
기본 값인 medium에 대한 상대적인 크기로, 브라우저마다 사이즈가 다르게 정의

relative size (keyword)
부모 요소의 font-size 크기에 대해 상대적입니다. smaller는 0.8배, larger는 1.2배

length 
px, em, rem 등의 단위를 이용하여 고정된 크기를 지정할 수 있음 
- em : 부모 요소의 font-size에 em 값을 곱한 크기 
- rem : 루트의 font-size에 rem 값을 곱한 크기

percent (%) 
부모 요소의 font-size를 기준으로 백분율 계산된 값을 지정할 수 있음

viewport units 
vw, vh 단위로 뷰포트를 기준으로 하여, 유동적인 font-size를 지정할 수 있음 
vw는 뷰포트 width의 1%, vh는 뷰포트 height의 1% 값을 가짐

font-weight

• 글꼴의 굵기를 지정하는 속성(기본 값 : normal)

font-weight: normal | bold | bolder | lighter | number | initial | inherit ;

• 실무에서는 normal과 bold를 많이 사용하고, 부모 요소에 영향이 있는 bolder와 lighter는 사용을 될 수 있으면 지양

• font-weight는 normal, bold와 같은 키워드 외에 숫자로도 그 굵기를 표현할 수 있음

• 100~900까지 100단위로 값을 지정하여 사용할 수 있고 숫자가 커질수록 더욱 굵게 표현

• 기본적으로 400은 normal과 같고, 700은 bold와 같음

• 그러나 수치를 이용한 font-weight는 폰트 자체에서 지원을 해야 표현할 수 있음

• 폰트에 따라 font-weight를 적용해도 굵기에 변화가 없을 수도 있으며, normal과 bold만 지원하는 폰트일 경우에는 100~500까지는 normal로, 600~900까지는 bold로 표현됨

• 폰트가 점차 다양해지면서 굵기 자체를 폰트 family-name으로 가지고 있는 경우도 있음 또한, 디바이스별로 조금 다르게 표현될 수도 있음

font-style

• 글꼴의 스타일을 지정하는 속성(기본 값 : normal)

font-style: normal | italic | oblique | initial | inherit;

• oblique 텍스트의 기울기에 대한 각도를 추가로 지정할 수 있음
• font-weight oblique <각도>;
• 유효한 값은 -90 ~ 90도이며, 따로 각도를 지정하지 않으면 14도가 사용
• 양수 값은 글의 끝 부분 쪽으로 기울어지며, 음수값은 시작 부분 쪽으로 기울어짐
• 그러나 아직 초안 단계로 CSS Fonts Module Level 4를 지원하는 브라우저에서만 사용 가능

font-variant

• 글꼴의 형태를 변형하는 속성으로 소문자를 작은 대문자로 변환할 수 있음(기본 값 : normal)

font-variant: normal | small-caps | initial | inherit ;

font

• font-style, font-variant, font-weight, font-size/line-height, font-family 속성들을 한 번에 선언할 수 있는 축약형 속성

font: font-style font-variant font-weight font-size/line-height font-family | initial | inherit;

축약형을 선언할 때는 아래 사항들을 유의
- font-size와 font-family는 반드시 선언해야 하는 필수 속성입니다.
- 빠진 속성이 있다면 기본 값으로 지정됩니다.
- 각 속성의 선언 순서를 지켜야 합니다.

webfont

@font-face

• 웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)으로 다운로드하여 적용하는 속성(기본 값 : 없음)

@font-face { 
    font-properties 
}

@font-face {
    font-family: webNanumGothic; /* 사용자 지정 웹 폰트명 */ 필수
    src: url(NanumGothic.eot); /* 적용 될 웹 폰트의 경로 */ 필수
    font-weight: bold; /* 필요에 따라 지정 */
    font-style: italic; /* 필요에 따라 지정 */
}

vertical-align

• 인라인 요소의 수직 정렬
• 요소의 수직 정렬을 지정하는 속성(기본 값 : baseline)

vertical-align: keyword | length | percent | initial | inherit ;

• baseline은 소문자 x를 기준으로 하단 라인을 의미

text-align

• 인라인 요소의 수평 정렬
• 텍스트의 정렬을 지정하는 속성 (기본 값: left)
• 문서의 방향이 LTR(Left To Right) 왼쪽에서 오른쪽 방향인 언어일 경우 left가 기본값이고, RTL(Right To Left) 로 오른쪽에서 왼쪽으로 읽힐 경우 right가 기본값이 됨

text-align: left | right | center | justify | initial | inherit ;

text-align과 display의 관계

 -  text-align은 inline-level에 적용

 -  text-align은 block-level에 적용할 수 없음 
그렇다면 block 요소를 가운데 정렬 하고자 한다면 어떻게 해야 할까?
박스모델 챕터에서 다룬 margin의 auto 값을 이용 

가운데 정렬 
인라인 요소 : text-align (center) 
블럭 요소 :  margin (auto) 

요소의 레벨에 따라 정렬하는 방식의 차이를 바로 알고 있으시기 바람

text-indent

• 텍스트의 들여쓰기를 지정하는 속성(기본 값 : 0)

text-indent: length | initial | inherit;


length 
문단의 첫 줄에 대한 들여쓰기를 수행합니다. 음수 값을 사용할 수 있으며, 음수 값 사용 시 왼쪽으로 이동

percent ( % ) 
텍스트를 포함하는 컨테이너 블록의 width(부모의 width)를 기준으로 변환된 백분율 값으로 들여쓰기 함

text-decoration

• 텍스트의 장식을 지정하는 속성(기본 값 : none currentColor solid)

text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit;

단어 관련 속성

white-space

• 요소 안에 공백을 어떻게 처리할지 지정하는 속성(기본 값 : normal)

white-space: normal | nowrap | pre | pre-line | pre-wrap | initial | inherit;

letter-spacing

• 자간을 지정하는 속성(기본 값 : normal)

letter-spacing: normal | length | initial | inherit;

word-spacing

• 단어 사이의 간격을 지정하는 속성(기본 값 : normal)

word-spacing: normal|length|initial|inherit;

word-break

• 단어가 라인 끝에 나올 경우 어떻게 처리할지(중단점) 지정하는 속성(기본 값 : normal)

word-break: normal | break-all | keep-all | initial | inherit;

word-wrap

• 요소를 벗어난 단어의 줄바꿈을 지정하는 속성(기본 값 : normal)

word-wrap: normal|break-word|initial|inherit;