CSS 쉽게 배우기 | 사이즈 단위

CSS에서 사용할 수 있는 사이즈 단위인 px, %, rem, em, vh, vw 차이점과 사용법 알아보기

안녕하세요
이번편에서는 CSS 하면 빼놓을 수 없는 사이즈 단위들을 알아볼게요
CSS에서 요소의 크기를 조절할때 사용할 수 있는 단위들로 px, %, rem, em, vh, 그리고 vw 가 있습니다

그럼 하나하나 살펴볼게요

CSS px

px는 픽셀을 뜻합니다
픽셀은 화면에 사람의 눈으로 편하게 볼수있는 제일 작은 점인데요
1픽셀은 96DPI에서 보이는 1개의 점의 크기입니다

CSS에서 픽셀은 다른 단위들의 기준점이 되기도 합니다

픽셀로 맞춰진 요소의 크기는 어떤 화면의 크기에서도 그 크기가 변하지 않습니다
그래서 반응형 디자인에는 적합하지 않은 단위입니다
반응형 디자인은 페이지의 레이아웃이 화면의 크기에 따라서 변하는 디자인입니다.

CSS에서 픽셀을 사용하려면 숫자뒤에 px를 붙여주면 됩니다

width:40px;

 

 

CSS %

CSS에서 퍼센트는 부모 요소의 사이즈를 기준으로 계산됩니다
예를 들어 부모 요소의 넓이가 500px이고 자녀 요소의 넓이가 50%이면 자녀 요소의 넓이는 250px이 됩니다

 

 

 

이렇게 %가 직접적으로 사용되는 게 아니라 픽셀 값으로 계산된 값을 사용합니다

이 계산된값은 개발자 도구에서 확인할 수 있습니다

개발자도구에서 컴퓨트창 열기

컴퓨트된 값들 보기

만약에 부모 요소가 없는 경우 부모 요소가 body 이기 때문에 브라우저 크기에 맞춰 계산됩니다

퍼센트를 높이에 사용하려면 먼저 html과 body에 height: 100%를 적용시켜야 합니다
html과 body의 특성상 이 요소들의 높이는 내용물, 즉 콘텐츠의 양에 따라서 늘어납니다

 

 

 

CSS rem

CSS에서 rem은 루트(root)요소의 글 크기입니다

여기서 루트요소는 html입니다

 

브라우저는 rem을 직접적으로 사용할 수 없습니다

rem을 사용하면 브라우저에서는 이 값을 계산해서 요소에 적용합니다

이 계산에 사용되는 값이 루트요소의 글 크기입니다

계산 방법
px x rem

2rem = 16px x 2 rem = 32px

 

만약에 루트요소의 글 크기를 변경하고 싶으면

html {
font-size: 10px;
}

이렇게 변경할수 있습니다

 

 

 

 

CSS em

CSS에서 em은 부모 요소로부터 상속된 글 크기의 값을 사용합니다

rem처럼 브라우저에서 em은 픽셀로 변환됩니다

em 계산 방법
px x em

16px x 2em = 32px

 

 

 

 

CSS vw, vh

CSS에서 vw는 뷰 넓이, vh는 뷰 높이를 말합니다

여기서 뷰는 브라우저입니다

 

1vw/vh는 브라우저의 현재 크기의 1%를 뜻합니다

예를 들어 현재 브라우저의 넓이가 1040px이면 10vw는 1040의 10%인 104px이 됩니다

 

% 와 다른 점은 rem과 em의 다른 점과 같습니다

% 는 부모 요소로부터 상속받은 값을 사용하고 vw/vh는 브라우저 자체의 크기를 사용합니다

 

 

 

 

 

 

 

이렇게 CSS에서 많이 사용되고 꼭 알아야 할 단위들을 알아봤습니다

처음엔 좀 헷갈릴수도 있어요, 저도 가끔 헷갈릴 때가 있거든요

많이 연습하고 사용해보면 금방 익숙해지실거에요

 

이제 CSS의 기본기는 어느 정도 커버한 거 같네요

다음 편부터는 본격적으로 다양한 스타일링을 해볼게요

 

수고하셨습니다

 

 

 

끝!