열정 실천

[CSS 008] CSS 단위 - px, %, rem/em, vw/vh 본문

개발 공부/CSS

[CSS 008] CSS 단위 - px, %, rem/em, vw/vh

구운오니 2023. 3. 23. 21:48

 

스크린 환경에서 크기를 나타내는 적합한 CSS의 단위로 px, %, rem/em, vw/vh 등이 있다. 

이들은 크기가 절대 변하지 않는 절대적 단위와 상황에 따라 크기가 변하는 상대적 단위로 나뉜다. 

 

 

상대적 길이 단위 요소는 상대적인 길이를 지정함으로써 다양한 기기에 적용할 수 있다.

따라서 웹 앱 이나 반응형 웹을 구현하기 위해서는 상대적 단위를 잘 알고 있어야 한다. 

 

 

절대적 단위

 

px

스크린을 구성하는 하나의 작은 점

만약 화면의 크기가 1920*1080이면 가로 1920개, 세로 1080개의 px가 있는 것이다.

 

▶사용 예시 

    width : 100px

    height : 100px

 

 

상대적 단위

 

 

%

부모 요소를 기준으로 비례하여 크기를 설정

 

▶사용예시 

    width : 50% (부모의 width가 100px이라면 => 50%=50px)

 

em/rem 

폰트 크기에 비례하여 크기를 설정

em : 부모 요소의 폰트 크기

rem : 루트 요소의 폰트 크기 (최상위 요소인 <html>의 폰트 크기) ➡ 통일된 기준을 잡기 위해 주로 사용

 

▶사용예시 

    width : 2em (폰트 크기가 10px 이라면 => 2em = 2*10px)

 

vw / vh

각 디바이스별 화면(Viewport)의 너비/높이를 기준으로 배율 설정

브라우저 영역을 꽉 채우는 요소

스크롤을 통해서 하단의 콘텐츠로 이동 가능

 

▶사용예시 

    width : 2vw (viewport 영역의 2%만큼)

    height : 50vh (viewport 영역의 50%만큼)

'개발 공부 > CSS' 카테고리의 다른 글

[CSS 009] FLEX 사용법 (여러가지 속성과 속성 값 모음)  (0) 2023.04.06
[CSS 007] Box-sizing - 박스에 적용된 사이즈의 기준 정하기  (0) 2023.03.23
[CSS 006] Box Model (margin, border, padding)  (0) 2023.03.23
[CSS 005] 글자를 표현하는 다양한 스타일  (0) 2023.03.23
[CSS 004] 색상 속성  (0) 2023.03.18
'개발 공부/CSS' Related Articles more