CSS 에서 쓰이는 단위와 값들을 정리해보았다.
알아보기 전에 👍🏻
길이나 크기와 같은 속성 값으로 키워드를 사용하는 것들이 있는 반면,
숫자와 함께 단위를 붙여 사용하는 것들이 있습니다.
단위는 개발자 마음대로 갖다붙여 사용하는 것이 아니며,
절댓값과 상댓값으로 반영되는 것들이 각각 존재합니다.
🦊 MDN Link : 길이에 관한 MDN <length> 문서
🦊 MDN Link : %에 관한 MDN <percentage> 문서
🌱 상대길이 단위
글꼴에 관한 상대길이 : em, rem, ...
뷰포트 백분율의 상대길이 : vw, vh, ...
1. em
em: 요소font-size의 계산값이다.
- 1em = 부모의
font-size
-
요소의
font-size속성에 사용한다면 상속받는font-size값을 나타낸다. -
부모의 속성을 상대적으로 계산하여 적용한다.
--> 최상위 부모는 브라우저의 속성을 계산한다.
2. rem
rem: 루트 요소(보통<html>)의 font-size를 나타낸다.
- 1rem = 루트의
font-size
- 루트 요소의
font-size에 사용할 경우
최초값(보통 브라우저 기본값은 16px이나 사용자 설정으로 변할 수 있음) 을 나타낸다.
3. vw
vw: 뷰포트의 초기 컨테이닝 블록 너비 1%와 같다.
-
추후 반응형 웹사이트를 만들 때 유용하게 쓰일 수 있다.
-
ex)
width: 50vw;일 경우
--> 화면을 아무리 늘리고 줄여도 브라우저 전체 너비의 절반만 차지한다.
4. vh
vh: 뷰포트의 초기 컨테이닝 블록 높이 1%와 같다.
- ex)
height: 70vh;일 경우
--> 화면을 아무리 늘리고 줄여도 브라우저 전체 높이의 70%만 차지한다.
뷰포트(viewport) 란?
✅ 우리가 브라우저 화면을 볼 때 웹 사이트 영역의 크기를 뜻한다.
즉, 실제 보이는 화면의 크기이다.
- 브라우저의 크기가 변경될 때마다 계산하여 값을 돌려준다.
5. vmin
vmin:vw와vh중 작은 것과 같다.
6. vmax
vmax:vw와vh중 큰 것과 같다.
✅
vmin과vmax는vw,vh와 연계된다.
- 모바일 환경에서 가로모드, 세로모드에 상관없이 오로지 크고 작음만 판단하여 결정된다.
- 따라서, 모바일 반응형 웹 등에 유연하게 대응할 수 있다.
Example
.container {
width: 100vmin;
height: 100vmin;
}--> 가로길이를 세로길이보다 길게 늘리더라도 화면이 세로길이에 꽉 찬 상태로 유지된다.
🌱 절대길이 단위
- 절대길이는 99.9%의 확률로
px(픽셀) 만 사용한다.
1. px
px: 1 픽셀. 화면에서는 전통적으로 하나의 장치 픽셀(점)을 의미했지만,
프린터나 고해상도 화면에서는 1/96 in을 맞출 수 있도록 여러 개의 장치 픽셀을 의미한다.
-
웹 개발의 스타일로써 가장 기본적인 단위이다.
-
브라우저 설정에서 사용자가 설정한 글자 크기를 무시하고 절댓값을 따른다.
❗️ 접근성 문제를 유발할 수 있음에 유의하자!
다른 절대길이 단위가 잘 쓰이지 않는 이유
-
사용자가 보는 viewport 화면의 크기가 확대/축소로 인해 다양해졌다.
-->cm,mm같은 단위를 사용하면 헷갈릴 수 있다! -
pt(포인트) 는 크기가 정해져있는 페이지(A4, A5, B4)에서의 길이를 나타낸다.
--> 화면의 크기가 다양한 웹에서 사용하기에는 적합하지 않다!
Q) 개발할 때는 거의 px 만 쓰나요? 🤔
A) 결론부터 말씀드리자면 네, 그렇습니다!
실제 개발을 하고 코드를 짜다보면 다른 절대길이 단위는 사용할 일이 많이 없어요..
화면상의 픽셀에 절대적으로 맞춰진 길이가 제일 정확하다고 생각하시면 됩니다! 😉
🌱 %(percentage) 단위
%: 백분율 값을 나타낸다. 보통 부모 객체와의 상대적 크기를 지정할 때 사용한다.
-
부모 요소의 속성 값이 100% 의 기준이다.
-
최상위 부모 요소의 부모는 브라우저이다.
Example
div {
width: 50%;
height: 30%;
}--> <body> 에 <div> 하나만 있다면 브라우저 전체 크기의 30% x 50% 크기를 가진다.
🌱 함수 표기법
위에서 살펴본 단위들에 대한 계산식에 대해 알아보자.
1. calc()
calc(): CSS 속성의 값으로 계산식을 지정할 수 있다.
-
매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 된다.
-
표현식은 단순 계산식은 무엇이든 가능하며, 표준 연산자 우선순위를 따른다.
-
피연산자로는
<length>구문의 아무 값이나 사용할 수 있고,
서로 다른 단위끼리도 계산할 수 있다.
❗️ 연산자 좌우에는 공백을 넣어주어야 한다!
Example
.container {
width: calc(100% - 50px);
}🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/calc()
2. min()
min():,(콤마) 로 구분된 두 값 중 작은 것을 선택한다.
🦊 MDN Link : https://developer.mozilla.org/en-US/docs/Web/CSS/min()
3. max()
max():,(콤마) 로 구분된 두 값 중 큰 것을 선택한다.
🦊 MDN Link : https://developer.mozilla.org/en-US/docs/Web/CSS/max()
Example
.container {
width: min(100%, 1000px);
height: max(50%, 300px);
}
min()과max()는 IE에서 지원하지 않는다.
지원되지 않는 브라우저 버전이 여럿 있으므로 확인 후 사용하자!
- 🙏🏻 caniuse Link : https://caniuse.com/css-math-functions
