폰트 관련 속성

셀라문·2022년 2월 18일

CSS

목록 보기

11/23

font-size, font-style, font-weight

font-size 기본 값 : 16px
font-style 기본 값 : normal
font-weight 기본 값 : normal(400)

font-style은 보통 italic(기울임)을 사용하기 위해 쓴다.

font-weight 값

bold
굵은 폰트 가중치. 700 과 같음.

lighter
(가능한 폰트 가중치 중) 부모 요소(element) 보다 얇은 폰트 가중치.

bolder
(가능한 폰트 가중치 중) 부모 요소 보다 굵은 폰트 가중치.
100, 200, 300, 400, 500, 600, 700, 800, 900
normal 과 bold 이외를 제공하는 폰트를 위한 숫자형 폰트 가중치.

font-family

글꼴 설정.

기본 값 : 맑은 글꼴

line-height

보통 1.0 1.2로 되어 있다.
폰트에 따라 line-height가 다르므로 line-height를 고정하고 싶을 때 지정하면 된다.

font와 단축속성(shorthand)

font를 단축 속성으로 사용하려면,

다음 속성의 값을 무조건 포함해야 합니다.

<font-size>
<font-family>

다음 속성의 값을 포함할 수 있습니다.

<font-style> (en-US)
<font-variant> (en-US)
<font-weight>
<line-height> (en-US)

style, weight는 size, family 보다 앞쪽에 적으면 됩니다.
height는 size/height로 작성하면 됩니다.

class default와 text가 동일하게 보이는걸 알 수 있다.

letter-spacing, word-spacing

letter-spacing : 한글자 글자 간의 간격
word-spacing : 단어마다의 간격

nomal 값에 추가한 값이며, - 값도 사용 가능하다.

큰 절댓값의 spacing을 적용한 문장은 거의 읽기 힘들어집니다.
큰 양의 값을 적용하면 단어의 사이가 너무나도 멀어져서 문장처럼 보이지 않습니다.
반면 지나친 음의 값을 적용하면 단어끼리 서로 겹쳐서 어느 단어의 시작과 끝을 알아차리지 못하게 됩니다.

text-align

text를 정렬하는 속성.

블록 요소에만 적용 가능하다.
블록요소인 부모에 적용할 경우 인라인 요소도 적용이 된다.

정렬
text-align: center
text-align: right
text-align: left

text-indent

블록 요소에만 적용 가능하다.
들여쓰기. 상속 가능
기본 값 0px

text-decoration

shorthand 속성, 순서는 상관 없음. multiple로 사용할 경우는 이어서 써야함.

text-decoration-line (en-US) -필수
underline또는 line-through 등과 같은 사용된 장식의 종류를 설정합니다.
여러개 중복 가능. 중복사용 할땐 붙어 사용 해야함.

none
Produces no text decoration.

underline
Each line of text has a decorative line beneath it.

overline
Each line of text has a decorative line above it.

line-through
Each line of text has a decorative line going through its middle.

text-decoration-color (en-US)
장식의 색을 정합니다.

text-decoration-style (en-US)
solid, wavy 또는 dashed와 같은 장식에 사용된 선의 스타일을 설정합니다.

solid
Draws a single line.

double
Draws a double line.

dotted
Draws a dotted line.

dashed
Draws a dashed line.

wavy
Draws a wavy line.