박스 모델 구조의 margin을 배우다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0px;
/* body태그의 기본 margin값은 8px default 값 */
}
div{
width: 100px;
height: 100px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
}
/*
margin: 경계선(border)를 기준으로 바깥쪽 여백
margin: 10px -> 모든 방향에 적용
margin: 10px 10px -> top, bottom / right, left 적용
margin: 10px 10px 10px -> top / right, left / bottom
4개는 top right bottom left
*/
#box1{
background-color: red;
/* margin: 50px; */
margin-left: 0px;
}
#box2{
background-color: blue;
margin-left: 100px;
}
#box3{
background-color: green;
margin-left: 200px;
}
#box4{
background-color: gray;
margin-left: 300px;
}
</style>
</head>
<body>
<!-- div#*4 -->
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</body>
</html>
radius는 나중에 배우지만 꼭짓점을 둥글게 만들어 준다.
'Front-End > CSS' 카테고리의 다른 글
| [CSS] Ex12_BoxSizing.html (0) | 2023.06.12 |
|---|---|
| [CSS] Ex11_padding.html (0) | 2023.06.12 |
| [CSS] Ex09_none.html (0) | 2023.06.11 |
| [CSS] Ex08_display.html (0) | 2023.06.11 |
| [CSS] Ex07_크기단위.html (0) | 2023.06.11 |
