2021. 10. 28. 11:35ㆍ나만의 웹사이트 만들기/CSS 정복하기
[03-3] CSS 기본기 익히기: 단위 속성 한 방에 정리! (px, %, vh, vw, vmin, vmax)
건물에 있는 창문의 갯수와 그 사이의 간격, 창문의 크기는 조화롭게 이뤄져 멋있는 야경을 만들어냅니다. 웹페이지도 이와 비슷합니다. 화면의 레이아웃이 어떻게 구성되고 여백, 간격이 적절하게 지정되어 있는지에 따라 웹페이지의 첫인상이 달라보이죠. 눈에 보이는 화면에서 요소들을 적절히 배치하는 것이 가장 기본 중의 기본이라고 생각합니다. 이번 포스팅에서는 영역을 지정하는 속성값과 바깥쪽, 안쪽 여백을 지정하는 법을 알아보겠습니다.
단위 (속성값)
| 속성값 | 설명 |
| px | 픽셀 단위로 지정합니다. |
| % | 부모태그를 기준으로 %단위로 지정합니다. |
| vw | 웹 브라우저의 너비를 기준으로 값을 백분율로 지정합니다. |
| vh | 웹 브라우저의 높이를 기준으로 값을 백분율로 지정합니다. |
| vmin | 웹 브라우저의 높이와 너비 중에 더 작은 것을 기준으로 값을 백분율로 지정합니다. |
| vmax | 웹 브라우저의 높이와 너비 중에 더 큰 것을 기준으로 값을 백분율로 지정합니다. |
반응형 웹을 만들기 위해서는 px뿐만 아니라 여러 단위를 알아야 합니다. 하나씩 그 차이점에 대해 정리해봤습니다.
01. 픽셀 (px)
px 단위로 지정하면 너빗값과 높잇값이 고정되기 때문에 웹 브라우저의 크기를 늘리거나 줄여도 변하지 않습니다.
02. 퍼센트 (%)
%는 상대적 단위로 부모태그인 <body>태그를 기준으로 너빗값이 변합니다. 하지만 <body>태그는 높잇값이 기본적으로 없기 때문에 %로 높잇값을 설정해도 동작이 안됩니다. 아래 그림처럼 text를 입력하면 text의 높이에 맞춰서 나오는 것을 확인할 수 있습니다. 만약 높잇값을 %로 설정하고 싶다면 <body>태그에 높잇값을 설정해주면 됩니다.
03. vw (viewport width)
부모태그를 기준으로 정해지는 % 단위의 문제를 개선하기 위해 vw와 vh가 나왔습니다. vw와 vh는 부모 태그가 아니라 웹 브라우저의 크기를 기준으로 합니다. 웹 브라우저의 너비를 백분율로 환산해 크기를 결정합니다.
이렇게 웹 브라우저를 줄이면 vw는 줄어든 너빗값에 맞춰 높이와 너비가 같이 줄어듭니다. 30vw는 웹 브라우저의 너비값이 1000px일때 300px이지만, 웹 브라우저의 너비가 500px로 줄어들면 가로, 세로 영역이 150px로 줄어듭니다. vw는 웹 브라우저의 너비만을 기준으로 크기가 결정되기 때문에 웹 브라우저의 높이를 줄이거나 늘려도 크기의 변화는 없습니다.
04. vh (viewport height)
vh는 웹 브라우저의 높잇값을 기준으로 영역의 크기가 정해집니다.
마찬가지로 웹 브라우저의 높잇값이 줄어들면 영역의 가로 세로 길이도 그에 맞춰서 줄어듭니다. vh는 높이를 기준으로 하기 때문에 웹 브라우저의 너비를 줄여도 크기의 변화가 없습니다.
05. vmin (viewport minimum)
웹 브라우저의 너비와 높이중 더 작은 값을 기준으로 크기가 결정됩니다. vw와 같이 웹 브라우저의 크기에 맞춰 상대적으로 줄어들었다 늘어났다합니다. 다른 점은 vw는 언제나 웹 브라우저의 너비값을 기준으로 하지만 vmin은 웹 브라우저의 너비와 높이 중 작은 값을 기준으로 크기가 정해진다는 것입니다.
첫번째 이미지처럼 처음엔 높잇값이 너빗값보다 작기 때문에 높잇값에 맞춰 크기가 정해지지만, 두번째 이미지처럼 웹 브라우저의 너비를 높잇값보다 작게 줄이게 되면 이 때는 너빗값을 기준으로 크기가 결정됩니다.
06. vmax (viewport maximum)
마찬가지로 vmax는 웹 브라우저의 너비, 높이 중 더 큰 값을 기준으로 영역의 크기가 결정됩니다.
이렇게 기본적인 단위 속성에 대해서 알아봤습니다. 휴대폰과 데스크탑, 패드 등 다양한 규격의 화면에서 작동하려면 반응형 단위에 대한 이해가 필요하겠죠. 사실 눈으로 보는 것보다 실제로 코드를 적고 확인해보는 것이 효과적인 것 같습니다. 그럼 다음 포스팅에서는 대망의 padding과 margin값에 대하여 알아보도록 하겠습니다.
'나만의 웹사이트 만들기 > CSS 정복하기' 카테고리의 다른 글
| [03-5] CSS 기본기 익히기: 블록 요소와 인라인 요소 태그 개념 정리! (0) | 2021.11.10 |
|---|---|
| [03-4] CSS 기본기 익히기: padding, margin (0) | 2021.11.04 |
| [03-2] CSS 기본기 익히기: 중요한 폰트 태그 정리 (0) | 2021.10.24 |
| [03-1] HTML에서 CSS연결하기, 선택자 종류 (0) | 2021.10.20 |