예제 및 동작 원리

약 10분

본문 듣기

예제 및 동작 원리

안녕하세요, 여러분! 오늘은 HTML5의 새로운 요소들을 활용하여 다양한 웹 콘텐츠를 만들어 보는 시간을 가져보겠습니다. 이 강의에서는 HTML이 무엇인지, 그리고 HTML5에서 새롭게 추가된 중요한 요소들에 대해 알아보고, 마지막으로 간단한 프로젝트를 통해 여러분의 창의력을 발휘할 수 있는 기회를 제공할 것입니다. 함께 시작해볼까요?

HTML5의 새로운 요소

HTML5에서는 여러 새로운 요소가 추가되었습니다. 그 중 가장 중요한 몇 가지 요소를 살펴보겠습니다:

<header>: 웹 페이지의 머리말을 정의합니다.
<footer>: 웹 페이지의 바닥글을 정의합니다.
<article>: 독립적으로 구분된 콘텐츠를 정의합니다.
<section>: 관련된 콘텐츠의 집합을 정의합니다.
<aside>: 본문과 관련된 보조적인 정보를 정의합니다.
<nav>: 내비게이션 링크를 정의합니다.

이제 이러한 요소들을 실제로 사용하여 간단한 웹페이지를 만들어 보도록 하겠습니다!

실습: 나만의 웹페이지 만들기

VS Code를 열고 새 HTML 파일을 만드세요.
- 파일 이름은 index.html로 저장합니다.

기본 HTML 구조를 작성하세요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 첫 웹 페이지</title>
</head>
<body>
</body>
</html>

이 코드는 HTML 문서의 기본 구조를 설정합니다.

헤더 추가하기

<header>
    <h1>내 자기소개 페이지</h1>
    <nav>
        <ul>
            <li><a href="#about">About Me</a></li>
            <li><a href="#skills">Skills</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

이 코드는 페이지의 머리말을 만들며, 사이트의 제목과 내비게이션 링크를 포함합니다.

본문 내용 추가하기

<main>
    <section id="about">
        <h2>자기소개</h2>
        <p>안녕하세요! 저는 웹 개발에 관심이 많은 학생입니다.</p>
    </section>
    <section id="skills">
        <h2>기술 스택</h2>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </section>
    <section id="contact">
        <h2>연락처</h2>
        <p>Email: myemail@example.com</p>
    </section>
</main>

본문은 세 가지 주요 섹션으로 나누어져 있으며, 각 섹션에는 제목과 관련 내용을 포함하고 있습니다.

푸터 추가하기
```
<footer>
    <p>&copy; 2023 나의 웹 사이트. 모든 권리 보유.</p>
</footer>
```
- 이 코드는 페이지의 하단에 저작권 정보를 제공합니다.

전체 코드

이제 모든 코드를 종합하여 최종 웹 페이지를 구성해 볼까요?

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 첫 웹 페이지</title>
</head>
<body>
    <header>
        <h1>내 자기소개 페이지</h1>
        <nav>
            <ul>
                <li><a href="#about">About Me</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="about">
            <h2>자기소개</h2>
            <p>안녕하세요! 저는 웹 개발에 관심이 많은 학생입니다.</p>
        </section>
        <section id="skills">
            <h2>기술 스택</h2>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </section>
        <section id="contact">
            <h2>연락처</h2>
            <p>Email: myemail@example.com</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 나의 웹 사이트. 모든 권리 보유.</p>
    </footer>
</body>
</html>

동작 원리 설명

웹 페이지를 구성하는 각 요소가 어떻게 동작하는지 설명 드리겠습니다:

헤더: 페이지 제목과 내비게이션이 포함되어 있어 사용자가 웹 페이지를 쉽게 탐색할 수 있습니다.
메인 콘텐츠: 각 섹션은 ID를 사용하여 링크로 쉽게 연결되며, 정보가 구조적으로 잘 분리됩니다.

핵심 요약

이번 강의를 통해 HTML5의 새로운 요소들과 그 활용법을 배웠습니다. 단순한 웹페이지를 만들며 실제로 코드가 어떻게 작동하는지 이해할 수 있었을 것입니다.

실습 문제

자기소개 페이지의 내용을 자신의 개성에 맞게 수정해 보세요.
CSS를 사용하여 웹페이지의 스타일을 변경해 보세요. 예를 들어, 배경색이나 글자 색을 바꿔보세요.
새로운 섹션을 추가하거나 페이지에 이미지 요소를 포함시켜 보세요.

개인 프로젝트

여러분이 만든 자기소개 페이지를 바탕으로 더 발전시켜 보세요. 사진을 추가하고, 다른 사람과 공유할 수 있도록 페이지를 완성해보세요!

예제 및 동작 원리