min-width 와 max-width 에 대해 알아보자.
- min-width
브라우저의 크기가 줄어들어도, min-width 크기의 이하로는 해당 오브젝트가 줄어들지 않게 설정한다.
예제 )
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin:0;
padding:0;
}
#wrap {
width:20px;
height:50px;
max-width:500px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="wrap"></div>
</body>
</html>
위 소스를 실행해보면 아래와 같이 500px 에 맞춰서 red line 이 생성될 것이다.
위 이미지를 보면, 브라우저 크기가 해당 오브젝트 크기보다 크기 때문에 스크롤이 생기지 않는다.
위 이미지처럼 브라우저 크기를 줄이게 되면, 해당 오브젝트 크기보다 작아지는 시점부터 스크롤이 생긴다.
- max-width
해당 오브젝트 안에 들어있는 내용들의 크기가 max-width를 벗어나지 않도록 설정한다.
예제 )
<!DOCTYPE html>
<html>
<head>
<style>
p
{
max-width:100px;
background-color:yellow;
}
</style>
</head>
<body>
<p>The maximum width of this paragraph is set to 100px....</p>
</body>
</html>
위 처럼 max-width를 100px로 설정해 놓으면, 안에 내용이 해당 크기를 넘어가지 않는다.
반응형
'CSS' 카테고리의 다른 글
| CSS3 여러가지 속성들 (0) | 2013.11.22 |
|---|---|
| CSS3 animation 끝에 정지 (0) | 2013.11.21 |
| CSS3 mask 속성 (0) | 2013.06.24 |
| CSS 커서 속성 모음 (0) | 2013.05.31 |
| web font (0) | 2013.05.14 |