| # | 도전 과제 | 통과 |
|---|---|---|
| 1 | 블럭 vs 인라인 | |
| 2 | CSS 포지션 | |
| 3 | 구글 페이지 개선하기 |
04 CSS 박스 모델
# CSS 박스 모델
## 미션
---
구글 페이지를 따라 만드시오.
## 개념
---
#### ⭐️ CSS 박스모델
HTML 요소를 화면에 보이기 위한 핵심 개념. 이를 CSS 박스모델이라 한다. 박스모델은 4가지 요소로 구성된다.
- content: 내용물
- padding: 내용을 두툼히 감싼 포장
- border: 경계선
- margin: 여백
## 코드
---
1) HTML 작성
```
<!DOCTYPE html>
<html>
<head>
<!-- 외부 CSS를 연결 -->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- logo -->
<h1>
<span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
</h1>
<!-- input -->
<input type="text" />
<!-- button -->
<div class="bottom">
<button>Google 검색</button>
<button>I'm Feeling Lucky</button>
</div>
</body>
</html>
```
2) CSS 적용
```
h1 {
font-size: 80px;
margin-left: 180px;
margin-top: 200px;
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: #34a852;
}
h1 span:nth-child(6) {
color: #ea4235;
}
input {
margin-left: 135px;
padding: 5px;
border: 1px solid lightgray;
border-radius: 8px;
width: 320px;
}
.bottom {
margin-top: 15px;
}
.bottom button {
padding: 5px;
border: 1px solid lightgray;
border-radius: 5px;
}
.bottom button:nth-child(1) {
margin-left: 220px;
}
```
## 결과
---
## 질문
---
- 박스모델의 4가지 요소와 역할은?
Challenge
개념 실습! 학습 내용을 진짜 내 것으로 만들기!