7장. 폰트와 텍스트

[ 목차 ]

1. font-size 프로퍼티

2. font-family 프로퍼티

3. font-style / font-weight 프로퍼티

4. line-heigter 프로퍼티

5. letter-spacing 프로퍼티

6. text-align 프로퍼티

7. text-decoration 프로퍼티

8. white-space 프로퍼티

9. text-overflow 프로퍼티

10. world-wrap 프로퍼티

11. word-break 프로퍼티

 

1. font-size 프로퍼티

1) 텍스트의 크기를 정의'

 

2. font-family 프로퍼티

1) 폰트를 지정하는 것으로, 해당 폰트가 저장되어 있지 않으면 적용 불가

2) 여러 개를 동시에 지정 가능

3) 첫번째로 지정한 폰트가 없을 경우 다음 지정된 폰트를 적용하며, 마지막은 대부분 os에 기본 설치된 폰트를  사용

 

3. font-style / font-weight 프로퍼티

1) style은 이탤릭체의 지정, weight는 폰트 굵기 지정에 사용

 

4. line-heigter 프로퍼티

1) 텍스트의 높이를 지정

2) 텍스트 수직 정렬에도 응용되어 사용(line-height 값과 a요소를 감싸는 div 요소의 height 값을 일치)

 

5. letter-spacing 프로퍼티

1) 글자 사이의 간격을 지정

 

6. text-align 프로퍼티

1) 텍스트의 수평 정렬을 정의

 

7. text-decoration 프로퍼티

1) none 값을 주어 링크 underline을 제거할 수 있으며 underline, overline, line-through를 추가할 수 있음

 

8. white-space 프로퍼티

1) 공백, 들여쓰기, 줄바꿈을 의미

2) html은 기본적으로 연속된 공백, 들여쓰기는 한번만 실행되며 줄바꿈은 무시

3) 텍스트는 부모의 가로 영역을 벗어나지 않고 자동 줄바꿈

 

9. text-overflow 프로퍼티

1) 부모 영역을 벗어난 wrapping(자동줄바꿈)이 되지 않은 텍스트이 처리 방법을 정의

2) width 프로퍼티가 지정되어야 있어야 함

3) white-space 프로퍼티를 nowrap으로 설정해야 함

4) overflow 프로퍼티가 반드시 visible 이외의 값이 지정되어 있어야 함

 

10. world-wrap 프로퍼티

1) 한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트의 처리 방법을 정의

2) 단어를 어느 정도 고려하여 개행

 

11. word-break 프로퍼티

1) 한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트의 처리 방법을 정의

2) 단어를 고려하지 않고 부모 영역에 맞추어 강제 개행