๋ฐ์ํ
CSS๋ก ๋ฐ์ค ๋ง๋ค๊ธฐ (๊ตฌํ ์ ํด์ฃผ๊ธฐ)
๊ธด ๋ง ํ ๊ฒ ์์ด, ๋ฐ๋ก ์ฝ๋๋ก ํ์ธํด๋ณด์.
CSS๊ฐ ์ด๋ณด๋ผ์ ๊ตฌํ ์ค์ ์ด ์ด๋ ต๋ค๋ฉด,
๋์ฒ๋ผ ์๋์ ์ฌ์ดํธ๋ก ์ฐ์ต์ ํด๋ณด๋ ๊ฒ๋ ์ข์ ๊ฒ ๊ฐ๋ค.
๐ก CSS Diner
์ฝ๋
<HTML>
<!DOCTYPE html>
<html lang="ko">
<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">
<link rel="stylesheet" href="./day3_2.css"/>
<title>๋ฐ์ค ๋ง๋ค๊ธฐ</title>
</head>
<body>
<div class="container">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</body>
</html>
<CSS>
* {
background-color: gray;
}
.box1{
border: 3px solid blue;
width: 200px;
height: 200px;
background-color: white;
padding: 50px 100px 30px;
/*pading top left ๋ฑ์ผ๋ก ํ๋๊ฒ ๋ ํธํจ */
margin-bottom: 30px; /*๊ณต๋ฐฑ*/
}
.box2{
box-sizing: border-box;
border: 3px solid red;
width: 200px;
height: 200px;
background-color: white;
padding-top: 30px; /*๋ด๋ถ์ด๋*/
padding-left: 100px;
}
.box3 {
box-sizing: content-box;
border: 3px solid green;
width: 200px;
height: 200px;
background-color: white;
padding-top: 30px;
padding-left: 100px;
margin-top: 30px;
}
.container {
display: flex; /*์์ผ๋ก ์ ๋ ฌ */
flex-direction: column; /*์์ฑ๋ฐฉํฅ*/
align-items: center; /*์ค์์ ๋ ฌ*/
justify-content: center;
}
๊ฒฐ๊ณผ
See the Pen BOX CSS by Kong Yang (@Kong-Yang) on CodePen.
๋ฐ์ํ
