min-width 속성, min-height 속성 사용법

min-width 속성, min-height 속성 사용법

며칠 전 max-width 속성과 max-height 속성을 알아 보았습니다.

[html/css]max-width 속성, max-height 속성 알아보기

max-width, max-height가 요소의 최대 너비와 높이를 지정한다면

min-width, min-height 속성은 요소의 최소 너비와 높이를 지정합니다

이 속성 역시 주요 브라우저에서 모두 지원하며, ie6 이전은 지원하지 않습니다.

(ie7은 doctype을 선언해야 함)

min-width 속성

요소의 최소 너비를 지정합니다.

요소의 width 값이, min-width 값보다 작아지는 것을 방지합니다.

min-width는 width 속성값을 무효화시킵니다.

예를 들어,이미지에 min-width: 100px으로 설정하면 이미지 너비가 100px 이하로 작아지지 않습니다.

→min-width 속성값

min-width: length|%|initial|inherit;

길이값 - px, cm, em 등(기본값은 0)
% - 요소를 담고 있는 박스에 비례한 백분율

initial - 초기화

inherit - 상속

min-height 속성

요소의 최소 높이를 지정합니다.

min-height 속성도 height 속성값을 무효화시킵니다.

→ min-height 속성값

min-height: length|%|initial|inherit;

길이값 - px, cm, em 등(기본값은 0)
% - 요소를 담고 있는 박스에 비례한 백분율

initial - 초기화

inherit - 상속

▶사용 예:

div{min-width: 100px;}

table{min-width: 50%; min-height: 50%;}

▶ 사용 예 2:

min-width.html

<!DOCTYPE html>
<html>
<head>
<style>
body{background-color:pink; min-width: 50px; max-width: 800px;}
</style>
</head>

<body>
<h4> Down the Rabbit Hole</h4>
ALICE was beginning to get very tired of sitting by her sister on the bank
and of having nothing to do: once or twice she had peeped into the book
her sister was reading, but it had no pictures or conversations in it,
"and what is the use of a book," thought Alice, "without pictures or conversations?'

</body>
</html>

*body {min-width: 50px}

이렇게 하면 최소 너비가 50px 이하로 축소되지 않습니다.

▶실행화면

이렇게 하면, 미디어가 인쇄매체이고, 최소 너비가 8.5인치 이상일 때 , print.css 파일을 내려 받습니다.

[html/css]외부 문서를 연결하는 link 태그 사용법

'css' 카테고리의 다른 글

:first-child, :last-child 선택자 (0)	2014.08.20
css 선택자, 선택자 종류와 사용법 (0)	2014.08.18
[html/css]max-width 속성, max-height 속성 알아보기 (1)	2014.07.30
[css] outline 속성, 용도는? (0)	2014.07.24
[html/css] list-style 속성 배우기 (0)	2014.07.14