🤔 CSS에서는 어떤 단위를 사용할까?
CSS에서는 물리적인 거리를 표현하며, 이때 특정 단위가 실제 물리적인 거리를 기준으로 삼아지기 때문에 나머지 단위들은 이를 기준으로 상대적으로 계산되어 설정된다.
그러나 문제는 이 기준 단위가 환경에 따라 달라질 수 있다는 점이다.
(예를 들어, 화면과 같은 저해상도의 장치와 프린터와 같은 고해상도의 장치에서 기준 단위는 서로 다를 수 있다.)
이러한 문제를 해결하기 위해서 px 단위는 1인치의 1/96로 정의되어 사용되게 되었고, 이렇게 함으로써 저해상도 장치와 고해상도 장치에서의 단위 차이를 최소화할 수 있게 되었다.
✦ 단위
절대단위 px
웹에서는 절대 길이로
px만을 주로 사용한다.
𝗤. 왜 px만 사용하는가?
𝐀. cm, in 등 다른 절대 길이 단위는 웹 환경에서 정확하지 않기 때문입니다. 게다가 px 단위는 웹의 해상도를 기반으로 하므로, 절대 길이를 사용해야 할 경우에는 px이 적합합니다.
𝗤. 주의해야 할 점은 있나요?
𝐀. 절대 길이는 사용자 설정을 무시하므로 접근성 문제를 일으킬 수 있다는 점을 주의해야 합니다.
상대단위
em
현재 요소의 글꼴 크기에 대한 상대적인 단위이다.
1em은 부모의font-size을 의미한다.em은 브라우저에 의해서px로 계산이 된다.- 단점으로는 위의 부모의
px을 찾으러 가기 때문에 밑의rem을 사용하는게 더 편리하다.
p {
font-size: 16px;
padding: 1em; /* 16px */
margin: 2em; /* 32px */
}➡️ p 태그의 패딩은 글꼴 크기인 16px에 해당하며, 마진은 글꼴 크기의 2배인 32px에 해당한다.
rem
root요소의 글꼴 크기에 상대적인 단위이다. (= 브라우저의 폰트 사이즈를 의미)
1rem은 root의 font-size를 의미한다.- 브라우저의 글씨 크기에 따라 바뀌기 때문에 사용자 접근성이 더 좋아진다.
html {
font-size: 16px;
}
p {
font-size: 1.5rem; /* 24px */
}➡️ p 태그의 글꼴 크기는 루트 요소의 글꼴 크기인 16px의 1.5배인 24px에 해당한다.
vw
viewport를 기준으로 너비를 측정하기 떄문에 보여지는 화면 크기의 너비를 의미한다.
- 최대값은
100vw이다.- 주로 반응형을 디자인하기 위해 사용한다.
vh
viewport를 기준으로 높이를 측정하기 떄문에 보여지는 화면 크기의 높이를 의미한다.
- 최대값은
100vh이다.- 주로 반응형을 디자인하기 위해 사용한다.
div {
width: 50vw; /* 뷰포트 너비의 50% */
height: 50vh; /* 뷰포트 높이의 50% */
}➡️ div 태그의 너비는 뷰포트 너비의 절반, 높이는 뷰포트 높이의 절반에 해당한다.
vmin, vmax
vw혹은vh에 상대적인 단위이다.
vw와vh중에서 더 작은 값을 가지고 있는게vmin, 더 높은 값을 가지고 있는게vmax이다.- 주로 가로모드, 세로모드를 구분하기 좋다.
퍼센트
부모 요소의 크기에 비례하는 단위이다.
- 부모 요소가
500px의 너비를 가질 때, 자식 요소의 너비를50%로 설정하면250px이라는 값을 얻게 된다.
div {
width: 500px;
}
p {
width: 50%; /* 250px */
}➡️ p 태그의 너비는 부모 요소인 div의 너비의 절반인 250px에 해당한다.
✦ 여러 단위 계산하기
여러 개의 단위를 계산하기 위해서는 일반적인 수학 연산 혹은 함수 표기법을 사용하면 된다.
일반적인 수학 연산
+와-단위만 사용하여 계산하는 방법이다.
⭐️ 단, 고정된 크기를 갖는 절대 단위끼리의 계산에서만 사용할 수 있다.
𝗤. 왜 상대 단위에서는 사용할 수 없나요?
𝐀. 상대 단위를 +로 계산하면,1em + 1em은 16px + 16px 혹은 20px + 20px등 다양한 결과를 가질 수 있기 때문에 직접적으로 사용해서는 안 된다.
상대 단위를 계산하기 위해서는 상대 단위는 다른 요소나 환경에 대한 상대적인 크기를 가지므로, 이를 계산하기 위해서는 아래의 함수 표기법을 사용해야 한다.
함수 표기법
모든 단위에서 사용 가능하며, 위의 일반적인 수학 연산과 추가적인 함수를 사용하여 계산할 수 있는 방법이다.
1. calc()
수학적 계산을 수행한다.
- 괄호 안에 계산식이 들어간다.
- 사칙 연산을 지원한다.
- 나눗셈과 곱셈의 경우 숫자만 계산이 가능하다는 점을 유의해야 한다.
div {
width: calc(100% - 50px);
}➡️ div 태그의 너비는 뷰포트 너비의 100%에서 50px을 뺀 값이 된다.
2. min()
주어진 값들 중에서 가장 작은 값을 반환한다.
- 콤마를 사용하여 값을 나열한다.
- viewport에 따라서 선택되는 값이 달라지기 때문에, 주로 반응형에서 유용하게 사용된다.
div {
width: min(100%, 600px);
}➡️ div 태그의 너비는 뷰포트 너비의 100%와 600px 중 더 작은 값이 된다.
3. max()
min()과 동일하게 사용된다.div { width: max(50%, 300px); }
➡️ div 태그의 너비는 뷰포트 너비의 50%와 300px 중 더 큰 값이 된다.
그 외에도 다양한 함수(var(), url() 등)가 존재한다.
