Astin's Storage

[2023.03.02] 5. CSS 단위 정리

2023. 3. 2. 18:49ㆍDev./CSS

🔍CSS에서 사용하는 단위에 대해 정리해보자.

단위

단위에는 절대 길이 단위와 상대 길이 단위가 있다.
절대 길이 단위: px (mm, cm, in, pc, pt, ...)
상대 길이 단위: %, vw, vh, vmin, vmax, em, rem

px

Pixel (Picture + Element)
화면에서 이미지를 표현하는 가장 작은 단위.
고정된 값이므로 직관적인 사용 가능.

시대가 흐르고, 디바이스가 다양해짐에 따라 픽셀 밀도도 다양해졌다.그로 인해 절대 단위인 px를 사용하면 디바이스에 따라 크기나 위치가 달라지는 문제가 발생하게 됐다.

그러므로 우리는 상대 단위의 개념을 이해하고 잘 사용할 수 있어야 한다.

%

부모 요소를 기준으로 하는 백분율 단위.

vw, vh

화면의 넓이, 높이를 기준으로 하는 백분율 단위.
1 vw = 화면의 1% 넓이.
10 vh = 화면의 10% 높이.

vmin, vmax

화면의 넓이와 높이 중 작은 값(min), 큰 값(max)을 기준으로 하는 백분율

em

부모요소로부터 상속받은 요소의 글자 크기를 기준으로 하는 배수 단위.

rem

root em
최상위 요소 (<html)의 글자 크기를 기준으로 하는 배수 단위.
<html>의 기본 폰트 사이즈는 16px이다.
폰트 사이즈를 수정하는 등의 유지보수에 용이하다.

참고 사이트

CSS 값 과 단위 - Web 개발 학습하기 | MDN

CSS 에 사용된 모든 속성에는 해당 속성에 허용되는 값 이 있으며, MDN 의 속성 페이지를 보면 특성 속성에 유효한 값을 이해하는 데 도움이 됩니다. 이 레슨에서는 가장 일반적인 값 과 사용 단위

developer.mozilla.org

'Dev. > CSS' 카테고리의 다른 글

[2023.03.03] 7. CSS 선택자(가상 클래스 / 가상 요소) (0)	2023.03.03
[2023.03.03] 6. CSS 텍스트 속성 (0)	2023.03.03
[2023.03.02] 4. CSS 상속 (0)	2023.03.02
[2023.03.02] 3. CSS 선택자(기본) (0)	2023.03.02
[2023.03.02] 2. CSS 적용하기 (0)	2023.03.02

관련글

댓글 0

티스토리툴바