[CSS] 크기속성(min-width, max-width 등)

 

 

min-width 속성

min-width 속성은 해당 HTML 요소가 가질 수 있는 최소 너비(width)를 설정합니다.

이 속성의 기본 설정값은 0이며, 해당 HTML 요소의 너비에 제한을 두지 않겠다는 의미입니다.

 

min-width 속성이 설정된 요소에 width 속성값을 따로 설정하지 않으면 초기 너비(width)는 100%를 가지게 됩니다.

이때 웹 브라우저의 크기가 줄어들면 거기에 맞춰 HTML 요소의 너비도 자동으로 줄어듭니다.

하지만 웹 브라우저가 min-width 속성으로 설정된 너비 이하로 줄어들면, HTML 요소의 너비는 더는 줄어들지 않고 수평 스크롤 바를 생성하게 됩니다.

---

 

max-width 속성

max-width 속성은 해당 HTML 요소가 가질 수 있는 최대 너비(width)를 설정합니다.

이 속성의 기본 설정값은 none이며, 해당 HTML 요소의 너비에 제한을 두지 않겠다는 의미입니다.

 

width 속성으로 너비를 설정하면, 설정된 너비 이하로 브라우저의 크기가 줄어들 때 해당 요소에 스크롤 바를 생성하게 됩니다.

하지만 max-width 속성으로 너비를 설정하면 다음과 같이 좀 더 유연한 결과를 얻을 수 있습니다.

 

---

CSS 크기(dimension) 속성

속성설명

height	해당 HTML 요소의 높이를 설정함.
width	해당 HTML 요소의 너비를 설정함.
max-width	해당 HTML 요소가 가질 수 있는 최대 너비(width)를 설정함.
min-width	해당 HTML 요소가 가질 수 있는 최소 너비(width)를 설정함.
max-height	해당 HTML 요소가 가질 수 있는 최대 높이(height)를 설정함.
min-height	해당 HTML 요소가 가질 수 있는 최소 높이(height)를 설정함.

 

 

 

 

참고>

http://www.tcpschool.com/css/css_boxmodel_dimension

코딩교육 티씨피스쿨