HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
background-color: red;
margin: 0px 0px 0px 400px;
}
#box2{
background-color: blue;
margin:0px 0px 0px 600px;
}
#box3{
background-color: green;
margin: 0px 0px 0px 800px;
}
#box4{
background-color: yellow;
margin:0px 0px 0px 1000px;
}
/* box5와 box6는 마진이 겹친다.
*/
#box5{
background-color: gray;
margin-bottom: 50;
}
#box6{
background-color: black;
margin-top: 50px;
}
div{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id = "box1"></div>
<div id = "box2"></div>
<div id = "box3"></div>
<div id = "box4"></div>
<!-- 마진 상쇄현상에대해 봐보자 -->
<div id = "box5"></div>
<div id = "box6"></div>
</body>
</html>
<!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>Document</title>
<style>
#box{
width: 100px;
height: 100px;
border : 3px dotted black;
padding : 50px;
/* 요소의 크기를 지정하는 속성 키울거냐 아니면 유지하면서 padding을 줄거냐 */
/* default값은 contendbox 이건 크기가 키워짐 */
/* border-box는 원래크기로 돌아옴 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="box">
box
</div>
</body>
</html>
HTML
<!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>Document</title>
<style>
#box{
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
/* border-radius: 50px; 요소의 테두리 모서리의 부분을 둥글게 지정하는 속성*/
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
}
#box2{
width: 100px;
height: 100px;
background-color: palevioletred;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
}
.box{
width: 100px;
height: 100px;
background-color: green;
border: 3px solid black;
}
/* #top > .box{
display : inline-block;
}
#bottom .box{
display: inline-block;
} */
#top > .box, #bottom >.box{
display : inline-block;
margin: -4px;
}
.leaf1{
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
background-color: rgb(241, 221, 238);
}
.leaf2{
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
background-color: rgb(226, 240, 150);
}
.leaf3{
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
background-color: lemonchiffon;
}
.leaf4{
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
background-color: rgb(219, 153, 214);
}
</style>
</head>
<body>
</body>
<br>
<div id="box"></div>
<div id="box2"></div>
<div id="top">
<br>
<!-- 한칸띄고 클래스 이름지정하면 두개의 이름을 갖는다. -->
<div class="box leaf1"></div>
<div class="box leaf2"></div>
</div>
<div id=bottom>
<div class="box leaf3"></div>
<div class="box leaf4"></div>
</div>
<br><br>
</html>
