CSS3 박스 (height, width, margin, border, padding, content, box-sizing)
2021. 6. 27. 23:47
728x90
크기 height/width
|
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>박스크기</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
div{
border: 5px solid black;
}
.box1{
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<div class="box1">박스1</div>
</body>
</html>
|
cs |
height : 높이
width : 너비
max-width : 최대 너비
min-width : 최소 너비
max-height : 최대 높이
min-heigt : 최소 높이
박스 모델 box-modeling
margin : 테두리 바깥쪽 여백
- margin: 30px; 상하좌우 모두 동일값
- margin: 30px 60px; 상하 & 좌우 동일값
- margin: 10px 20px 30px 40px; 상 우 하 좌 시계방향 지정
border : 테두리
padding : 테두리 안쪽 여백
content : 실제 내용이 표시되는 영역
|
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>박스크기</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
div{
border: 5px solid black;
}
.box1{
width: 400px;
height: 200px;
margin: 30px;
padding: 30px;
}
</style>
</head>
<body>
<div class="box1">박스1</div>
</body>
</html>
|
cs |
|
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>박스크기</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
div{
border: 5px solid black;
}
.box3{
width: 300px;
height: 300px;
margin: 10px 20px 30px 40px;
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="box3">박스3</div>
</body>
</html>
|
cs |
박스 사이즈 box-sizing
|
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>box-sizing</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
div{
width: 300px;
height: 300px;
padding: 50px;
border: 20px solid black;
margin-top: 50px;
}
.box1{
border-color: red;
box-sizing: border-box;
}
.box2{
border-color: blue;
box-sizing: content-box;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
|
cs |
728x90
'CSS > Study' 카테고리의 다른 글
| CSS3 테두리 (border-style, border-radius) (0) | 2021.06.27 |
|---|---|
| CSS3 배경 (background-color, background-image, background-repeat, background-position, background-size, background-origin) (0) | 2021.06.27 |
| [CSS] 목록/리스트 (list-style-type, list-style-image, list-style-position) (1) | 2021.06.27 |
| [CSS] 텍스트 (word-spacing, letter-spacing) (1) | 2021.06.27 |
| [CSS] 텍스트 (text-align, text-decoration) (1) | 2021.06.27 |
