더보기
- width : 가로, 폭, height :세로, 길이
- min-width/min-height : (예: minimum 700px)
- 가로/세로의 최소 길이를 설정
- 브라우저가 작으면 700px, 크면 100%
- max-width/mas-height : (예: maximum 700px)
- 가로/세로의 최대 길이를 설정
- 브라우저의 가로/세로의 길이가 max-width/max-height보다 작으면 브라우저의
가로/세로의 길이에 맞춰 설정됨
=> 브라우저가 작으면 100%, 크면 700px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>길이 예제</title>
<style>
.box1{width: 700px; height: 50px; background-color: red;}
.box2{min-width: 700px; height: 50px; background-color: orange;}
.box3{max-width: 700px; height: 50px; background-color: yellow;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>'괴발개발 > Html+CSS' 카테고리의 다른 글
| CSS_크기조절 resize (0) | 2021.06.13 |
|---|---|
| CSS_다단(column-span모름) (0) | 2021.06.13 |
| CSS_아이콘 예제 (0) | 2021.06.13 |
| CSS_상단, 좌측 메뉴바 만들기 (0) | 2021.06.13 |
| CSS_애니메이션 효과 (0) | 2021.06.13 |