# 웹 개발 소설: 5단계
"이제 우리의 웹페이지에 스타일을 입혀볼 차례예요," 선생님이 즐겁게 말했습니다. "HTML이 성의 벽돌과 기둥이라면, CSS는 그 성을 아름답게 꾸미는 페인트와 장식이라고 할 수 있죠."
선생님은 HTML 코드의 `</head>` 태그 바로 앞에 `<style>` 태그를 추가했습니다:
```html
<head>
<title>나의 첫 웹페이지</title>
<meta charset="UTF-8">
<style>
/* 여기에 CSS 코드가 들어갈 거예요 */
</style>
</head>
```
"CSS에서 `/* */`는 주석이에요. 코드에 설명을 남기는 방법이죠. 이제 진짜 CSS 마법을 써볼게요!"
선생님은 주석 부분을 지우고 다음과 같은 코드를 입력했습니다:
```css
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #50b3a2;
color:# white;
padding: 1rem;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li {
margin: 0 10px;
}
nav a {
color:# white;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
section {
padding: 20px;
margin: 20px;
background-color:# white;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h2 {
color: #50b3a2;
}
img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
form {
display: grid;
gap: 10px;
}
input, textarea {
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
background-color: #50b3a2;
color:# white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #3a8a7e;
}
footer {
text-align: center;
padding: 20px;
background-color: #333;
color:# white;
}
```
"와, 정말 많은 코드를 썼네요! 이 CSS 코드가 어떻게 작동하는지 살펴볼게요," 선생님이 설명을 시작했습니다.
"CSS는 선택자와 선언 블록으로 구성되어 있어요. 선택자는 스타일을 적용할 HTML 요소를 지정하고, 선언 블록은 중괄호 안에 속성과 값으로 이루어져 있답니다."
선생님은 `body` 부분을 가리키며 말했습니다:
"body (문서 본문에) {
font-family: 'Arial', sans-serif; (글꼴을 Arial로, 없으면 sans-serif 계열 글꼴로 설정)
line-height: 1.6; (줄 간격을 1.6배로 설정)
margin: 0; (바깥 여백을 0으로 설정)
padding: 0; (안쪽 여백을 0으로 설정)
background-color: #f4f4f4; (배경색을 연한 회색으로 설정)
color: #333; (글자색을 어두운 회색으로 설정)
}"
"각 CSS 규칙은 이런 방식으로 작동해요. 예를 들어, `header` 선택자는 `<header>` 요소를 찾아 배경색을 청록색(#50b3a2)으로, 글자색을 흰색으로, 패딩(안쪽 여백)을 1rem으로, 그리고 텍스트를 가운데 정렬하도록 지시합니다."
선생님은 `nav a:hover` 부분을 가리키며 말했습니다:
"이 부분은 특별해요. `hover`는 사용자의 마우스가 요소 위에 올라갔을 때의 상태를 나타내요. 즉, 이 규칙은 '사용자가 내비게이션 링크 위에 마우스를 올리면, 밑줄을 표시해줘'라는 의미입니다."
선생님은 다른 부분들도 하나씩 설명했습니다:
"section (내용 구역에) {
padding: 20px; (안쪽 여백 20px)
margin: 20px; (바깥 여백 20px)
background-color:# white; (배경색 흰색)
border-radius: 5px; (모서리를 5px 둥글게)
box-shadow: 0 2px 5px rgba(0,0,0,0.1); (약간의 그림자 효과 추가)
}"
"CSS를 통해 우리는 박스의 크기, 여백, 테두리, 배경, 글자 스타일 등 모든 시각적 요소를 조절할 수 있어요. 버튼에 마우스를 올렸을 때 색상이 변하게 하거나, 이미지가 화면보다 크지 않도록 제한할 수도 있죠."
선생님은 양피지를 펼쳤을 때 나타난 웹페이지를 보며 흐뭇하게 미소지었습니다.
"보세요! 우리의 페이지가 훨씬 더 아름답게 변했어요. 이제 마지막으로 JavaScript 마법을 추가해서 페이지에 생명을 불어넣을 차례예요."
"다음 시간에는 사용자와 상호작용할 수 있는 JavaScript를 추가해볼 거예요. 질문 있으신가요, 초보 마법사님?"
