좌충우돌 개발자의 길

[CSS] 폰트, 텍스트 본문

STUDYING/HTML & CSS

[CSS] 폰트, 텍스트

sustronaut 2022. 5. 7. 20:20

1. 타이포그래피의 구조

•em 폰트의 전체 높이
•ex ( = x-height ) 해당 폰트의 영문 소문자 x의 높이
•Baseline 소문자 x를 기준으로 하단의 라인
•Descender 소문자에서 baseline 아래로 쳐지는 영역을 의미. 서체에 따라 descender의 길이가 다릅니다. ( g, j, p, q, y )
•Ascender 소문자 x의 상단 라인 위로 넘어가는 영역을 의미합니다. ( b, d, h, l )

 

2. generic-family

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

 

3. line-height

  • line-height는 텍스트 라인의 높이를 의미하는 것으로 주로 행간을 제어할 때 사용
  • line-height로 제어되는 부분을 line-box라고도 하며 이는 타이포그래피 구조에서 배웠던 [em 박스] + [상하단의 여백]까지를 의미

- 속성값 차이

  • number 부모 요소의 숫자 값이 그대로 상속됩니다. 즉, 자식 요소에서도 또 한 번 자식 요소의 font-size를 기준으로 계산된 값을 가짐
  • % 부모 요소에서 %값이 그대로 상속되는 것이 아니고, %에 의해 이미 계산된 px값이 상속.
body { font-size: 20px; line-height: 2; }       /* line-height = 40px; */
body { font-size: 20px; line-height: 200%; }    /* line-height = 40px; */
/*두 경우 모두 <body>에 똑같이 line-height: 40px이 적용됩니다.*/

/*하지만 자식 요소로 <p>가 있다고 생각을 하면 얘기가 달라집니다.*/

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; */

=>  계산된 값이 아닌 숫자 값을 상속한다는 사실 때문에, 숫자 값을 사용하면 부모 엘리먼트에서 계산된 값 대신 비율을 그대로 상속받을 수 있으므로, 가능하면 단위가 없는 값을 사용하는 것이 좋음.

 

4. font-size

  • 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% 값을 가짐.

 

5. font-weight

  • 실무에서는 normal과  bold를 많이 사용, 부모 요소에 영향이 있는 bolder와 lighter는 사용을 될 수 있으면 지양.
  • 기본적으로 400은 normal과 같고, 700은 bold와 같음

 

6. font-style

  • oblique 텍스트의 기울기에 대한 각도를 추가로 지정할 수 있습니다. -> font-weight oblique <각도>;

 

7. font-variant

  • small-caps : 이 속성을 이용해 모든 소문자를 대문자로 변환할 수 있음
    • 변환된 대문자는 실제 대문자 사이즈 보다 더 작은 사이즈로 나타나며 대소문자 변환이기 때문에 한글에는 적용되지 않습니다.

8. font

  • font 관련 속성들을 축약해 지정할 수 있음 (실무에서 잘 사용하지 않지만 해석할 줄 알아야함)
  • 선언 순서를 지켜야하며, 필수적으로 들어가야할 속성들이 있음 -> (font-size와 font-family)
font: font-style font-variant font-weight font-size/line-height font-family | initial | inherit;

 

9. 다양한 font

  • 시스템 폰트 : font-family로 선언한 글꼴이 사용자 시스템에 기본으로 설치가 되어 있어 사용할 수 있는 경우
  • 이미지 폰트 : 특정 글꼴을 사용하는 것이 아니고, 글자를 표현함에 있어 시각적인 요소를 많이 넣고 싶을 때 글꼴 대신 이미지를 이용해서 표현하는 경우를 의미. 정확히 얘기하면 이미지 폰트는 폰트가 아니고 이미지임.
  • 웹 폰트 : 서버에 저장해 제공하거나, 웹 경로를 통해 사용하는 폰트 (@font-face)

 

10. vertical-align

block 요소가 아닌 inline 또는 inline-block에서만 사용 가능, 따라서 display이 속성이 변하지 않은 div, p와 같은 블록레벨 요소에는 적용 불가

 

- 속성 keyword 

  • sub : 부모 아래 첨자 기준으로 정렬
  • super : 부모 위 첨자 기준으로 정렬
  • text-top : 부모 텍스트의 맨 위(Ascender 제외) 
  • text-bottom : 부모의 텍스트의 맨 아래(Descender 제외)
  • middle : 부모의 중앙에 위치
  • top : 부모의 맨 위 위치
  • bottom : 부모의 맨 아래 위치

 

11. text-align

인라인 요소의 수평 정렬에 사용. 이 속성 또한 div와 같은 블록 레벨 요소에는 적용 불가.

  • 그렇다면 block 요소를 가운데 정렬 하고자 한다면 어떻게 해야 할까?
    • 박스모델 챕터에서 다룬 margin의 auto 값을 이용
    • 가운데 정렬 인라인 요소 : text-align (center) 블럭 요소 :  margin (auto) 

 

12. text-indent 속성

텍스트의 들여쓰기를 지정하는 속성

  • length 문단의 첫 줄에 대한 들여쓰기를 수행. 음수 값을 사용할 수 있으며, 음수 값 사용 시 왼쪽으로 이동.
  • percent ( % ) 텍스트를 포함하는 컨테이너 블록의 width(부모의 width)를 기준으로 변환된 백분율 값으로 들여쓰기

 

13. text-decoration 속성

  /*기본 값 :  none   currentColor   solid*/

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

 

14. 단어 관련 속성

- white-space 속성

요소 안에 공백을 어떻게 처리할지 지정하는 속성입니다.

- letter-spacing 속성

자간을 지정하는 속성입니다.

- word-spacing 속성

단어 사이의 간격을 지정하는 속성입니다.

- word-break 속성

단어가 라인 끝에 나올 경우 어떻게 처리할지(중단점) 지정하는 속성입니다.

- word-wrap 속성

요소를 벗어난 단어의 줄바꿈을 지정하는 속성입니다.

white-space: normal | nowrap | pre | pre-line | pre-wrap | initial | inherit;
letter-spacing: normal | length | initial | inherit;
word-spacing: normal|length|initial|inherit;
word-break: normal | break-all | keep-all | initial | inherit;
word-wrap: normal|break-word|initial|inherit;

 

'STUDYING > HTML & CSS' 카테고리의 다른 글

[CSS] 미디어쿼리  (0) 2022.05.09
[CSS] 레이아웃  (0) 2022.05.08
[CSS] 단위, 배경, 박스모델  (0) 2022.05.05
[CSS] 헷갈리는 부분 타파하기!  (0) 2022.05.03
[HTML] 헷갈리는 부분 타파하기!  (0) 2022.05.03
'STUDYING/HTML & CSS' Related Articles more