CSS 속성(1) - 너비 & 단위

너비

width는 요소의 가로 너비를 지정해줍니다.

height는 요소의 세로 너비를 지정해줍니다.

둘 다 auto란 기본값(요소에 이미 들어있는 속성의 값)이 들어 있으며,

이건 브라우저가 너비를 계산해서 주는 겁니다.

너비 지정시, px, em, vw등 단위로 지정할 수 있습니다.

 

인라인(글자) 요소는 width가 최대한 줄어들려고 하고,

블록(박스) 요소는 width가 최대한 늘어날려고 합니다.

 

max-width는 요소가 커질 수 있는 최대 가로 너비를 지정해줍니다.

max-height는 요소가 커질 수 있는 최대 세로 너비를 지정해줍니다.

둘 다 none란 기본값(최대 너비 제한 없음)이 들어 있으며,

너비 지정시, px, em, vw등 단위로 지정할 수 있습니다.

 

min-width는 요소가 작아질 수 있는 최소 가로 너비를 지정해줍니다.

min-height는 요소가 작아질 수 있는 최소 세로 너비를 지정해줍니다.

둘 다 0란 기본값(최소 너비 제한 없음)이 들어 있으며,

너비 지정시, px, em, vw등 단위로 지정할 수 있습니다.

 

단위

px	픽셀
%	상대적 백분율
em	요소의 글꼴 크기
rem	루트 요소(html)의 글꼴 크기
vw	뷰포트 가로 너비의 백분율
vh	뷰포트 세로 너비의 백분율