가변 font
1. 가변 font
- 폰트의 크기를 가변적으로 설정이 가능함
- 가변 폰트는 가변 그리드 공식과 같음
→ 가변 폰트값 = (가변 폰트를 적용할 글자 크깃값 ÷ 적용할 요소를 감싸고 있는 요소의 글자 크깃값)
- 예시) 글자 크기 96px으로 적용된 박스가 있고 그 박스안에 글자 크기 64px의 박스를 적용
See the Pen Tistory_Front-End Study_반응형 웹_가변 font_가변 font_1. 가변 폰트 by NewBean0312 (@newbean6775) on CodePen.
2. rem 단위
- 앞에서 사용한 em 단위는 자신의 부모 박스에 글자 크기가 지정되어 있을 경우, 자식 박스에게 글자 크기가 상속됨
- rem 단위는 웹 문서의 최상위인 <html> 태그를 기준으로 하기 때문에, 상속 문제가 발생하지 않음
- 예시) 부모 박스에 5em, 자식 박스에 5rem으로 적용
→ rem 단위로 설정한 자식 박스에는 상속 문제가 발생하지 않음
See the Pen Tistory_Front-End Study_반응형 웹_가변 font_가변 font_2. rem 단위 by NewBean0312 (@newbean6775) on CodePen.
3. vw, vh, vmin, vmax 단위
- 이 단위들은 브라우저의 비율에 따라 글자 크기가 가변적으로 변함
- vw 단위 (viewport width)
- 웹 브라우저의 너비를 100을 기준으로 하여 크기를 결정하는 단위
- 크깃값 = (vw 단위를 적용할 글자 크깃값 x 브라우저의 너비값) ÷ 100
- 예시) 글자 크기를 5vw로 설정
→ 브라우저의 너비에 따라 글자 크기가 달라짐
See the Pen Tistory_Front-End Study_반응형 웹_가변 font_가변 font_1. 가변 폰트 by NewBean0312 (@newbean6775) on CodePen.
- vh 단위 (viewport height)
- 웹 브라우저의 높이를 100을 기준으로 하여 크기를 결정하는 단위
- 크깃값 = (vh 단위를 적용할 글자 크깃값 x 브라우저의 높잇값) ÷ 100
- 예시) 글자 크기를 5vh로 설정
→ 브라우저의 높이에 따라 글자 크기가 달라짐
See the Pen Tistory_Front-End Study_반응형 웹_가변 font_가변 font_3. vw단위 by NewBean0312 (@newbean6775) on CodePen.
- vmin 단위 (viewport minimum)
- 웹 브라우저의 너비와 높이 중 짧은 쪽을 기준으로 하여 크기를 결정하는 단위
- 예시) 글자 크기를 5vmin으로 설정
→ 글자 크기는 웹 브라우저의 너비와 높이 중 작은 쪽을 100을 기준으로 하여 결정함
See the Pen Tistory_Front-End Study_반응형 웹_가변 font_가변 font_3. vh단위 by NewBean0312 (@newbean6775) on CodePen.
- vmax 단위 (viewport maximum)
- 웹 브라우저의 너비와 높이 중 큰 쪽을 기준으로 하여 크기를 결정하는 단위
- 예시) 글자 크기를 5vmax으로 설정
→ 글자 크기는 웹 브라우저의 너비와 높이 중 큰 쪽을 100을 기준으로 하여 결정함
See the Pen Tistory_Front-End Study_반응형 웹_가변 font_가변 font_3. vmax단위 by NewBean0312 (@newbean6775) on CodePen.
'Front-End Study > 반응형 웹' 카테고리의 다른 글
| 미디어 쿼리 (0) | 2023.05.01 |
|---|---|
| 가변 이미지 (0) | 2023.02.05 |
| 가변 margin, 가변 padding (0) | 2023.02.03 |
| 가변 그리드 (Fluid Grid) (0) | 2023.01.14 |
| 반응형 웹 (0) | 2023.01.14 |