[CSS] 박스 모델

Haeun Noh·2023년 2월 7일

CSS 박스모델

HTML/CSS_개념

목록 보기

4/5

0207

`CSS` 박스 모델이란?

: 문서의 영역을 나타내는 개념으로 총 네 가지의

`content`

: 내용물을 담음

`padding`

: content를 두툼히 포장함

`border`

: padding의 경계

`margin`

: border 밖의 여백

`CSS` 박스 모델을 이용해 구글 웹페이지 만들기

<!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>
    <link rel="stylesheet" href="style3.css"/>
</head>
<body>
    <h1>
        <span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
    </h1>

    <input type="text"/>
</body>
    <div class="bottom">
       <button>Google 검색</button>
       <button>I'm Feeling Lucky</button>
    </div>
</html>

h1 {
    font-size: 50px;
    margin-left: 100px;
    margin-top: 90px;
    margin-bottom: 20px;
}

h1 span:nth-child(1) {
    color: #4184f4;
}

h1 span:nth-child(2) {
    color: #ea4235;
}

h1 span:nth-child(3) {
    color: #fabc08;
}

h1 span:nth-child(4) {
    color: #4184f4;
}

h1 span:nth-child(5) {
    color: #34aB52;
}

h1 span:nth-child(6) {
    color: #ea4235;
}

input {
    margin-left: 10px;
    padding: 4px;
    border: 1px solid lightgray;
    border-radius: 15px;
    width: 320px;
}

.bottom {
    margin-top: 15px;
}

.bottom button {
    font-size: 10px;
    padding: 5px;
    border: 1px solid lightgray;
    border-radius: 5px;/*둥글둥글*/
}

/* 첫 번째 버튼 */
.bottom button:nth-child(1) {
    margin-left: 100px;
}