0045 CSS 반응형 길이(responsive length) 단위
오늘날에는 컴퓨터가 데스크탑, 노트북, 모바일 기기, 냉장고, 자동차 등 다양한 기기에 다양한 목적으로 설치되어 인터넷에 연결되어 있다. 이 때, 디스플레이 규격이 모두 천차만별이라 다양한 상황에 대응할 수 있는 반응형(resposive) 길이(length)를 사용할 필요가 있다.
반응형(resposive) 길이(length)라는 것은 브라우저 창(viewport) 크기에 따라 길이가 변하는 상대 길이(relative length)를 말한다.
다음과 같은 종류가 있다.
vw : 화면(viewport) 너비(width)의 1%를 1vw로 하는 단위
vh : 화면(viewport) 높이(height)의 1%를 1vh로 하는 단위
vmin : 1vw와 1vh 중 작은 쪽을 1vmin으로 하는 단위
vmax : 1vw와 1vh 중 큰 쪽을 1vmax로 하는 단위
개념을 알았으니 다음과 같이 
0045.html 파일을 작성하고 이를 실행해보자.
<!DOCTYPE html>
<html>
<head>
<title>반응형 길이</title>
</head>
<body>
<p style="font-size: 5vw;">
5vw의 텍스트 크기
</p>
<p style="font-size: 5vh;">
5vh의 텍스트 크기
</p>
<p style="font-size: 5vmin;">
5vmin의 텍스트 크기
</p>
<p style="font-size: 5vmax;">
5vmax의 텍스트 크기
</p>
</body>
</html>
실행한 브라우저 창인 뷰포트(viewport)에서 너비(width)를 키워 높이(height)보다 크게 만드니 (vw > vh) 다음과 같은 관계가 성립하는 것을 볼 수 있다.
5vw=5vmax
5vh=5vmin
실행한 뷰포트(viewport)에서 높이(height)를 키워 너비(width)가 보다 크게 만드니 (vw < vh) 이번에는 다음과 같은 관계가 성립하는 것을 볼 수 있다.
5vw=5vmin
5vh=5vmax
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 
0045 CSS 반응형 길이(responsive length) 단위.apkg
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0047 CSS의 Font Weight, Style, Variant (0) | 2019.01.08 |
|---|---|
| 0046 font-size 설정하기 (0) | 2019.01.07 |
| 0044 CSS의 길이(length) 중 상대 길이(relative length) (0) | 2019.01.03 |
| 0043 CSS의 길이(length) 중 절대 길이(absolute length) (0) | 2018.12.26 |
| 0042 텍스트의 크기 font-size 개요 (0) | 2018.12.23 |