CSS - 3. 폰트, 텍스트

공부일기/부스트코스

CSS - 3. 폰트, 텍스트

Youngbin Kim 2020. 9. 19. 21:13

1. 속성 - typography

폰트를 이해하기 위해서는 타이포그래피의 구조를 이해해야 한다. 모든 폰트는 em박스를 가지고 있고 아래 그림과 같은 구조로 이뤄져 있다.

em: 폰트의 전체 높이
ex (= x-height): 해당 폰트의 영문 소문자 x의 높이를 의미한다.
Baseline: 소문자 x를 기준으로 하단의 라인을 의미한다.
Descender: 소문자에서 baseline 아래로 쳐지는 영역을 의미한다. 서체에 따라 descender의 길이가 다르다.
Ascender: 소문자 x의 상단 라인 위로 넘어가는 영역을 의미한다.

2. 속성 - font-family

/* 맨 마지막 선언은 generic-family */
font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif;

family-name: 사용할 폰트의 이름 ','로 구분해 여러개 선언할 수 있다. 지정순서로 폰트의 우선순위 결정
generic-family: family-name으로 지정한 폰트가 사용자의 컴퓨터에 없을 시 적절한 폰트를 선택할 수 있도록 함
serif: 삐침이 있는 문자
sans-serif: 삐침이 없는 문자

3. 속성 - line-height

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

number: font-size를 기준으로 설정한 숫자만큼 배율로 적용한다. 부모 요소의 숫자 값이 그대로 상속. 자식 요소에서도 또 한 번 자식 요소의 font-size를 기준으로 계산된 값을 가진다.
percent: 설정한 퍼센트만큼 배율로 적용한다. %값이 그대로 상속되는 것이 아니고, %에 의해 이미 계산된 px값이 상속.

4 속성 - font-size

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

기본 값 미지정 시 글꼴의 기본크기는 16px (1em)

absolute size: 기본 값인 medium에 대한 상대적인 크기로, 브라우저마다 사이즈가 다르게 정의되어있음.
realative size:부모 요소의 font-size 크기에 대해 상대적. smaller는 0.8배, larger는 1.2배
viewport units: vw, vh 단위로 뷰포트를 기준으로 유동적인 font-size를 지정할 수 있다. vw는 뷰포트 width의 1%, vh는 height의 1% 값을 가진다.

5. 속성 - font-weight

normal: 기본 값(400)
bold: 굵게 표현(500)

실무에서는 normal과 bold를 많이 사용하고, 부모 요소에 영향이 있는 bolder나 lighter의 사용은 될 수 있으면 지양하는 편이다.

6. 속성 - font-style

normal: 기본 값.
oblique: oblique 스타일
italic: italic 스타일

7. 속성 - font-variant

글꼴의 형태를 변형하는 속성으로 소문자를 작은 대문자로 변환할 수 있다.

small-caps: 소문자를 작은 대문자로 변형한다.

8. 속성 - font

font와 관련된 다양한 값을 축약 속성에 넣을 수 있으나 속성마다 선언 순서를 지켜야 하는 제약이 있다.

9. 속성 - webfont

사용자의 로컬환경에 글꼴을 다운 받아 적용

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

10. 속성 - vertical-align

수직 정렬: block 요소가 아닌 inline 또는 inline-block에서 사용할 수 있다. 인라인 요소나 테이블 셀 상자의 수직정렬을 지정한다. 대부분 부모요소에 상대적으로 정렬된다.

/* keyword values */
vertical-align: baseline; /* 부모 기본 값 */
vertical-align: sub; /* 부모 아래 첨자 기준 선 */
vertical-align: super; /* 부모 위첨자 기준선 */ 
vertical-align: text-top; /* 부모 텍스트의 맨위 (Ascender 제외) */
vertical-align: text-bottom; /* 부모 텍스트의 맨아래 ( Descender 제외) */
vertical-align: middle; /* 부모의 중앙에 위치 */
vertical-align: top; /* 부모의 맨위 위치 */
vertical-align: bottom; /* 부모의 만아래 위치 */

/* <length> values - 음수 값도 사용가능 */
vertical-align: 10em;
vertical-align: 4px;

11. 속성 - text-align

인라인 요소의 수평 정렬에 사용되는 속성.

/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify; /* 자동 줄바꿈 시 양쪽 끝으로 정렬됨, 마지막 라인은 반응 안함 */

text-align은 inline-level에 적용 됨
block-level을 text-align으로 정렬할 수 없음

12. 속성 - text-indent

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

text-indent: length | initial | inherit;

length: px, em 등 고정 수치로 지정. 음수허용
%: 부모 요소의 width를 기준으로 퍼센트로 지정

13. 속성 - text-decoration

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

텍스트의 꾸밈:
- none: 텍스트 꾸밈을 생성하지 않음(기본값)
- underline: 밑줄로 꾸밈을 설정
- overline: 윗줄로 꾸밈을 설정
- line-through: 중간을 지나는 줄로 꾸밈을 설정
밑줄의 종류:
- solid: 한줄 스타일(기본값)
- double: 이중선
- dotted: 점선 스타일
- dashed: 파선 스타일
- wavy: 물결 스타일

14. 속성 - 단어 관련 속성

white-space 속성: 요소 안의 공백을 어떻게 처리할지 지정하는 속성
- normal: 공백과 개행 무시. 필요한 경우 자동 줄바꿈 발생.(기본값)
- nowrap: 공백과 개행 무시. 자동 줄바꿈 일어나지 않음
- pre: 공백과 개행 표현. 자동 줄바꿈 일어나지 않음
- pre-line: 공백 무시, 개행 표현. 필요한 경우 자동 줄바꿈 발생
- pre-wrap: 공백 표현, 개행 무시. 필요한 경우 자동 줄바꿈 발생

letter-spacing 속성: 자간을 지정하는 속성
- normal: 기본값.
- length: 길이만큼 자간을 지정. 음수 허용

word-spacing 속성: 단어 사이의 간격을 지정하는 속성
- normal: 기본값.
- length: 길이만큼 단어 사이의 간격 지정. 음수 허용

word-break 속성: 단어가 라인 끝에 나올 경우 어떻게 처리할지(중단점) 지정하는 속성
- normal: 기본 값. 중단점은 공백이나 하이픈(-)
- break-all: 중단점은 음절. 모든 글자가 요소를 벗어나지 않고 개행
- keep-all: 중단점은 공백이나 하이픈(-)

word-wrap 속성: 요소를 벗어난 단어의 줄바꿈을 지정하는 속성
- normal: 기본값. 중단점에서 개행
- break-word: 모든 글자가 요소를 벗어나지 않고 강제로 개행