css에서 길이 단위가 여러가지가 있는데, 하나씩 살펴보자 !
절대 단위, 상대 단위
절대 단위
항상 고정된 길이를 나타내는 단위이다.
px, cm, mm 등이 있지만 px을 사용한다.
상대 단위
고정되지 않고 어떤 기준에 따라 유동적으로 바뀌는 길이를 나타내는 단위이다.
em, rem, vw, vh 등이 있다.
px
- 절대값을 사용하는 단위
1px은 항상 고정된 물리적 크기에 해당한다.
em, rem
em (element)
- 부모 요소의 font-size 기준
같은 요소 내에 설정된 폰트 크기 값이 있을 때는 해당 요소의 font-size가 기준이 된다.
html {
font-size: 16px;
}
div {
font-size: 20px;
width: 10em; /* 200px */
}
rem (root element)
- root (최상위) 요소 기준
HTML에서 최상위 요소는 html 태그로, html 요소의 font-size 속성값이 기준이 된다.
html {
font-size: 16px;
}
div {
font-size: 20px;
width: 10rem; /* 160px */
}
vw, vh
vw (viewport width)
- 뷰포트 크기의 1 / 100에 해당하는 단위 (가로)
vh (viewport height)
- 뷰포트 크기의 1 / 100에 해당하는 단위 (세로)
html {
font-size: 16px;
}
div {
font-size: 6vw;
}
부모 요소의 font-size 값과 상관없이 뷰포트 크기에 따라 유동적으로 변하기 때문에 반응형 웹 개발에 유용하게 사용된다.
+) vmin, vmax
vmin
vw, vh 중 작은 것
vmax
vw, vh 중 큰 것
%
% (percent)
부모 요소와의 상대적 크기를 지정한다.
부모 요소의 속성 값이 100%의 기준이 된다.
div {
width: 50%;
height: 30%;
}
픽셀을 주로 많이 사용하기는 하나, 반응형 개발을 할 때는 상대 단위를 사용하는 것이 더 적합할 것 같다.
출처 :
https://velog.io/@mangozoo20/CSS-%EB%8B%A8%EC%9C%84-%EC%A0%95%EB%A6%AC
https://velog.io/@codns1223/CSS-px-em-rem-%EC%B0%A8%EC%9D%B4
'FE' 카테고리의 다른 글
[CSS] background 잘림 현상 해결 (0) | 2024.05.20 |
---|---|
[Study] TDD란 무엇일까? (0) | 2023.03.29 |