반응형
네모박스를 넣는 태그 div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
width: 800px;
}
.header{
width: 100%;
height: 100px;
background-color: aquamarine;
}
.leftbox{
width: 30%;
height: 400px;
background-color: cornflowerblue;
display: inline-block;
}
.rightbox{
width: 70%;
height: 400px;
background-color: coral;
display: inline-block;
}
.footer{
width: 100%;
height: 100px;
background-color: grey;
}
</style>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="leftbox"></div><div class="rightbox"></div>
<div class="footer"></div>
</div>
</body>
</html>
div 박스 디자인 스타일
- margin : 박스와 브라우저 창 사이의 여백
- padding : 박스 안쪽 여백 설정
- border : 태두리
- 두께, 종류, 색
- border-radius : 태두리 둥글게
- 중앙 정렬
- margin-left : auto; margin-right : auto;
- div 태그는 display = block; 속성을 가지고 있음
반응형
'Other > CSS' 카테고리의 다른 글
| CSS selector .셀렉터 문법 (0) | 2023.01.28 |
|---|---|
| 레이아웃- HTML 좌우배치: float 과 inline-block (1) | 2023.01.28 |
| CSS 글자 스타일 (0) | 2023.01.28 |
| CSS 기본 사용법 과 셀렉터 우선순위 (0) | 2023.01.28 |
| CSS 이미지 가운데 정렬하는 법 (0) | 2023.01.28 |
