CSS에는 %, px, em, rem, vw, vh등의 많은 단위들이 있다.
오늘은 이 단위들의 차이점을 알아보자
사용할 HTML
<body>
<div class="a">
<div class="b"></div>
</div>
</body>class가 a인 div 태그가 b인 div 태그를 감싼 모습이다.
px
px(픽셀)은 CSS의 가장 기본적인 크기 단위이다.
많은 사람들이 px을 사용하고 있지만
px은 상대적이지 않고 절대적인 단위이기 때문에 반응형 웹을 만들때
불편한 점이 있을 수 있다.
.a{
display: flex;
justify-content: center;
width: 300px;
height: 300px;
background-color: gray;
}
.b{
width: 100px;
height: 100px;
background-color: beige;
}css를 이렇게 작성한다고 하면 웹페이지의 크기를 늘리거나 줄이거나
어떤 짓을 하더라도 px는 절대적인 크기이기때문에
상자의 크기는 변하지 않는다.
%
%는 부모의 영역 안에서 비율로 크기가 변한다.
100%일 경우 부모의 영역을 100%로 차지한다.
.a{
width: 300px;
height: 300px;
background-color: gray;
}
.b{
width: 50%;
height: 50%;
background-color: beige;
}
클래스명이 a인 div 태그는 px로 고정되어 있고
b인 div 태그는 가로, 세로가 50%이다.
이렇게 된다면 b는 현재 a 태그 크기의
가로 50% 세로 50%를 차지한다.
만약 여기서 a의 높이를 줄이게 된다면
b의 높이도 줄어든 a의 높이의 50%로 자동으로 줄어들 것이다.
(a의 높이를 100px로 줄였을 경우)
(a의 높이를 100px로 줄이고 b의 높이를 100%한다면?)
부모인 a의 높이를 100%로 b가 완전히 차지하는 상황을 볼 수 있다.
만약 여기서 가로도 100%를 준다면 회색은 베이지색에 완전히 덮혀 보이지 않을 것이다.
em
em은 대부분 폰트의 크기를 결정할 때 많이 쓰인다.
em은 부모의 폰트 크기의 영향을 받아 배수로 커지거나 감소한다.
font-size: 2em; 이라면 부모 폰트 사이즈의 2배 크기를 주는 것이다.
.a{
font-size: 20px;
}
.b{
font-size: 2em;
}현재 a의 폰트 사이즈는 20px이다.
자식인 b의 폰트 사이즈는 2em이다.그렇다면 b의 폰트 사이즈는 20*2의 의미이기 때문에 40px이 된다.
(만약 여기서 a도 em을 준다면 어떻게 될까?)
a의 부모는 body 태그이다. body 태그의 기본 폰트 사이즈는 16px이기 때문에
16*2 = 32px이 되고 b는 a가 32px이 되었기 때문에 32*2 = 64px이 되었다.
개발자 도구로 폰트 사이즈를 정확히 볼 수 있다.
rem
em과 함께 많이 쓰이는 폰트 사이즈 단위로
rem은 부모의 영향이 아닌 root의 영향을 받는다.
여기서 root는 <html>이 되겠다.
.a{
font-size: 2rem;
}
.b{
font-size: 2rem;
}em에서 사용한 코드에서 em부분을 rem으로만 바꿨다.
결과는 어떻게 되었을까?
a, b 모두 32px이 나온 것을 알 수 있다.
그 이유는 html 태그도 기본 값이 16px이기 때문에
16*2 = 32px이 나온 것이다.
(만약 html 태그의 폰트 사이즈를 변경한다면?)
html{
font-size: 32px;
}
.a{
font-size: 2rem;
}
.b{
font-size: 2rem;
}html 태그의 폰트 사이즈를 32px로 증가시키면
a, b 모두 32*2 = 64px로 사이즈가 변경된다.
개발자 도구로 확인해 보면 쉽게 알 수 있다.
vw
viewport width의 약자로 현재 보이는 웹 페이지의 화면 크기에 따라 자동으로 변경된다.
1vw는 웹 페이지 화면의 1%라고 생각하면 된다.
100vw는 웹 페이지 전체를 나타낸다.
body{
margin: 0;
}
.a{
width: 50vw;
height: 300px;
background-color: gray;
}현재 a의 width가 50vw이다.
가로 영역에 대해서 웹 페이지의 50%부분을 차지한다라고 생각하면 된다.
화면의 크기를 줄이면 자동으로 줄어든 크기의 50%씩 크기를 차지한다.
vh
vw와 개념은 같다. 가로와 세로가 바뀐 것일 뿐이다.
viewport height의 약자로 현재 보이는 웹 페이지의 화면 크기에 따라 자동으로 변경된다.
1vh는 웹 페이지 화면의 1%라고 생각하면 된다.
100vh는 웹 페이지 전체를 나타낸다.
body{
margin: 0;
}
.a{
width: 50vw;
height: 50vh;
background-color: gray;
}높이도 50vh로 변경하면 웹 페이지의 크기에 따라 그 크기의 50%를 차지한다.
화면의 크기를 줄이면 자동으로 줄어든 크기의 50%씩 크기를 차지한다.
(만약 vw와 vh을 모두 100으로 설정하면 어떻게 될까?)
화면을 줄이든 키우든 화면 전체가 그레이 색으로 도배 될 것이다.
'WEB' 카테고리의 다른 글
| [WEB] HTML/CSS/JS로 게임 만들기 1 (0) | 2022.09.13 |
|---|---|
| [WEB] 반응형 nav바 만들기(HTML, CSS, JS) (0) | 2022.08.23 |
| [HTML/CSS] HTML과 CSS로 tap 메뉴 만들어 보기(JS x) (0) | 2022.07.22 |
| [HTML/CSS] 그리드를 이용하여 웹 페이지 틀 짜보기 (0) | 2022.07.21 |
| [HTML/CSS] id와 class의 차이점 (0) | 2022.07.19 |
