CSS 크기(크기)

CSS 크기 속성은 요소의 높이와 너비를 제어합니다.

CSS 크기 속성

CSS는 width, height, max와 같은 여러 속성을 제공합니다.-width와 max-height와 같은 속성은 요소의 박스(상자)의 크기를 설정할 수 있습니다. 다음 장에서는 이러한 속성을 사용하여 더 나은 웹 레이아웃을 생성하는 방법을 설명합니다.

너비(Width)와 높이(Height) 속성

width와 height 속성은 요소의 내용 영역의 너비와 높이를 정의합니다. 이 너비와 높이는 패딩, 경계선 또는 마argins를 포함하지 않습니다. 참조하십시오CSS 상자 모델, 　 효과적인 너비와 높이를 계산하는 방법을 이해하려면.

width와 height 속성은 길이 값을(예: px, pt, em 등) 취할 수 있습니다. 하나백분율또는 키워드 auto. 음수 길이 값을 허용하지 않습니다.

div　{
　　　　width:　300px;
　　　　00px라면 요소의 실제 높이는　200px;
}

이 스타일 룰은300 픽셀의 고정 너비와200 픽셀의 높이가 할당됩니다<div>요소.

max-height 최대 높이 속성

max-height 속성은 상자의 최대 내용 높이를 지정할 수 있도록 합니다. 이 최대 높이는 패딩, 경계선 또는 마argins를 포함하지 않습니다.

max-height height 속성을 더 큰 값으로 설정하더라도 적용된 요소는 지정된 값보다 높이지 않습니다. 예를 들어, height를200px를 max로 설정하면-00px이며 최소 높이를 설정하면100px라면 요소의 실제 높이는100px.

div　{
　　　　00px라면 요소의 실제 높이는　200px;
　　　　max-00px라면 요소의 실제 높이는　100px;
}

이 max-height 속성은 일반적으로 이 min-height 속성을 결합하여 요소의 높이 범위에 대한 정보를 생성합니다.

min-height 최소 높이 속성

min-height 속성은 블록의 최소 내용 높이를 지정할 수 있도록 합니다. 이 최소 높이는 패딩, 경계선 또는 마argins를 포함하지 않습니다.

min-height 적용된 요소는 결코 지정된 최소 높이보다 작지 않도록 됩니다.2height를 적용된 요소의 넓이는 지정된 최소 높이보다 작지 않도록 됩니다. 예를 들어, height를 설정하면-00px이며 최소 높이를 설정하면3height가 설정되면300px。

div　{
　　　　00px라면 요소의 실제 높이는　200px;
　　　　min-00px라면 요소의 실제 높이는　300px;
}

이 min-height:-height 속성은 일반적으로 이 max와 함께 사용됩니다.

max-height 속성은 요소가 내용이 없더라도 최소 높이를 보장하는 데 일반적으로 사용됩니다. 그러나 내용이 설정된 최소 높이를 초과하면 요소는 정상적으로 확장될 수 있습니다.

이 max-width 최대 넓이 속성

max-width 속성은 블록의 최대 내용 넓이를 지정할 수 있습니다. 이 최대 넓이는 패딩, 박스 사이즈 또는 마argins를 포함하지 않습니다.300px를 설정하면-width가 설정되면200px라면 요소의 실제 넓이는200px。

div　{
　　　　width:　300px;
　　　　max-width:　200px;
}

이 max-width 속성은 일반적으로 이 min과 함께 사용됩니다.-width 속성을 함께 사용하여 요소의 넓이 범위에 대한 정보를 생성합니다.

min-width 최소 넓이 속성

이 min-width 속성은 블록의 최소 내용 넓이를 지정할 수 있습니다. 이 최소 넓이는 패딩, 박스 사이즈 또는 마argins를 포함하지 않습니다.

min-width를 설정하면 적용된 요소의 넓이는 지정된 최소 넓이보다 얇지 않도록 됩니다. 예를 들어, width를 설정하면300px를 설정하면-width가 설정되면400px라면 요소의 실제 넓이는400px。

div　{
　　　　width:　300px;
　　　　min-width:　400px;
}

이 min-width 속성은 일반적으로 이 max와 함께 사용됩니다.-width 속성을 함께 사용하여 요소의 넓이 범위에 대한 정보를 생성합니다.