HTML, CSS

글자 및 글꼴 관련 스타일

삑삑도요 2022. 10. 18. 17:41

1) color
- 16진수(#fff, #ffffff)
- rgb(255, 255, 255)
- rgba(255, 255, 255, 1) 투명도 조절 가능

- hsl : 색조 채도 밝기
- hsl(360, 100%, 100%)
- hsla(360, 100%, 100%, 1) 투명도 조절 가능

2) text-decoration : 텍스트에 줄을 긋는 속성
- underline : 밑줄
- line-through : 취소선/삭제선
- overline : 윗줄
- none : 삭제

3) text-align : 내부에 작성된 글 또는 inline 요소를 정렬
* text-align은 display가 inline인 경우 적용되지 않는다.
- left
- right
- justify : 양쪽 정렬(마지막 줄을 제외하고, 줄 상자의 왼쪽과 오른쪽 끝에 텍스트를 맞추기 위해 사이 공간을 띄)
- center

4) line-height : 줄 간격(장평)을 지정하는 속성

5) letter-spacing : 글자 사이의 간격(자간) 지정 속성
* 값으로 음수를 넣으면 글자 사이 간격이 줄어듦

See the Pen Untitled by cmp (@cmpset) on CodePen.

B. 글꼴 관련 스타일
1) font-size : 글꼴 크기 변경
- 고정 크기 단위 : px(픽셀, 화면해상도), pt(포인트 0.35mm)
- 가변 크기 단위 : %(상위 요소 크기 대비 백분율), em(상위 요소 글꼴 크기 대비 비율), rem(기준 요소 글꼴 크기 대비 비율)

2) font-weight : 글꼴 두께/굵기 지정(100 ~ 900)
- bold(700)
- normal(400)
- bolder 부모 요소보다 두껍게
- lighter 부모 요소보다 얇게
- number(숫자를 직접 입력 시) 
* 가중치에 따른 폰트가 준비되어 있지 않을 경우, 100~500은 normal로, 600~900은 bold로 변환

3) font-family : 글꼴 지정
여러개를 입력한 경우 앞 쪽에 작성한 폰트를 우선 적용