# 웹 개발 소설: 2단계

"어서 오세요, 웹 세계의 초보 마법사님!" 현명한 선생님이 미소를 지으며 말했습니다.

"오늘은 우리 웹 성의 기본 구조에 대해 좀 더 알아볼 거예요. 이 성은 세 가지 마법의 힘으로 지어진답니다."

선생님은 마법 지팡이를 흔들어 공중에 세 가지 색깔의 빛을 만들었습니다. 파란색, 분홍색, 노란색이었죠.

"이 파란 빛은 HTML이라고 해요. HTML은 우리 성의 벽돌과 기둥을 만드는 마법이죠. 웹페이지의 모든 부분들 - 제목, 단락, 버튼, 이미지 자리를 정하는 역할을 해요."

선생님은 작은 코드 조각을 보여주었습니다:

```html

<h1>안녕하세요!</h1>

<p>웹 개발의 세계에 오신 것을 환영합니다.</p>

```

"여기 보이는 `<h1>`은 '큰 제목을 만들어줘'라는 뜻이고, `<p>`는 '일반 문장을 만들어줘'라는 의미예요. 꺽쇠 괄호로 둘러싸인 이런 것들을 '태그'라고 부른답니다. 태그는 시작할 때와 끝날 때 필요해서, 끝날 때는 `/`를 넣어요."

이제 분홍색 빛을 가리키며 계속했습니다.

"이 분홍색 빛은 CSS라고 해요. CSS는 우리 성을 아름답게 만드는 마법이죠. 색상, 크기, 간격, 글꼴 같은 것들을 정해주어 웹페이지를 예쁘게 꾸며요."

선생님은 또 다른 코드 조각을 보여주었습니다:

```css

h1 {

color: blue;

font-size: 24px;

}

p {

color: gray;

font-size: 16px;

}

```

"이 코드는 '제목은 파란색으로 크게, 문장은 회색으로 작게 만들어줘'라는 의미예요. `h1`과 `p`는 꾸미고 싶은 대상이고, 중괄호 안에 어떻게 꾸밀지 적어요."

마지막으로 노란 빛을 가리켰습니다.

"이 노란 빛은 JavaScript라고 해요. 우리 성에 마법을 불어넣는 주문이죠. 버튼을 누르면 반응하게 하거나, 사용자 이름을 기억하거나, 그림이 움직이게 하는 것 모두 JavaScript의 일이에요."

선생님은 마지막 코드 조각을 보여주었습니다:

```javascript

document.querySelector('h1').addEventListener('click', function() {

alert('안녕하세요! 반가워요!');

});

```

"이 코드는 '누군가 제목을 클릭하면 인사말을 보여줘'라는 주문이에요. 조금 복잡해 보이지만 곧 이해하게 될 거예요."

선생님은 웃으며 말했습니다. "이 세 가지 마법이 함께 작동하면, 멋진 웹 성을 만들 수 있어요. HTML은 구조를, CSS는 스타일을, JavaScript는 동작을 담당하죠. 마치 집을 지을 때 뼈대를 세우고, 페인트로 칠하고, 전기를 연결하는 것과 비슷해요."

"다음 시간에는 이 마법들이 어떻게 함께 작동하는지 더 자세히 알아볼 거예요. 질문 있으신가요, 초보 마법사님?"