예제 및 동작 원리

약 5분

본문 듣기

예제 및 동작 원리

이제 고급 HTML 개념에 대해 배운 내용을 바탕으로 시맨틱 태그를 사용한 예제와 그 동작 원리를 알아보겠습니다. 시맨틱 태그는 웹 페이지의 구조를 더 명확하게 만들어 브라우저와 사용자에게 내용을 잘 전달하는 데 도움을 줍니다.

1단계: VS Code에서 새로운 HTML 파일 생성하기

먼저 VS Code를 열고, 새로운 HTML 파일을 만들어주세요. 파일 이름은 index.html로 설정합시다.

2단계: 기본 HTML 구조 만들기

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>

3단계: 시맨틱 태그 사용하기

이제 시맨틱 태그를 추가해보겠습니다. 다음 코드를 body 태그 안에 추가해주세요:

코드 html

<header>
    <h1>나의 첫 번째 웹 페이지</h1>
</header>
<main>
    <section>
        <h2>소개</h2>
        <p>안녕하세요! 저는 웹 개발을 배우고 있는 초보입니다.</p>
    </section>
    <section>
        <h2>연락처</h2>
        <p>이메일: example@example.com</p>
    </section>
</main>
<footer>
    <p>&copy; 2023 나의 이름</p>
</footer>

시맨틱 태그의 의미

<header>: 페이지 또는 섹션의 머리글을 정의합니다. 보통 제목이나 주제를 간단히 소개하는 내용이 들어갑니다.
<main>: 문서의 주요 콘텐츠를 감싸는 영역입니다. 다른 섹션이 포함될 수 있습니다.
<section>: 페이지의 별도 섹션을 정의합니다. 일반적으로 각 섹션은 제목을 가집니다.
<footer>: 페이지 또는 섹션의 바닥글을 정의합니다. 저작권 정보나 링크 등이 포함됩니다.

이렇게 시맨틱 태그를 사용하여 HTML을 작성하면, 검색 엔진과 접근성 도구가 페이지의 내용을 더 쉽게 이해할 수 있습니다. 그러므로 웹 개발 시 꼭 활용해야 합니다.

4단계: 웹 페이지 보기

코드를 모두 작성한 후, 웹 브라우저에서 index.html 파일을 열어보세요. 나만의 첫 번째 웹 페이지가 어떻게 보이는지 확인해보세요!

핵심 요약

시맨틱 태그는 웹 페이지 구조를 명확하게 정의합니다.
브라우저와 사용자 모두에게 더 나은 경험을 제공합니다.

실습 문제

자신의 소개와 다른 섹션을 추가해보세요.
나의 웹 페이지가 더 매력적으로 보이도록 CSS를 추가해보세요.

간단한 개인 프로젝트: 자기소개 페이지 만들기

이제 여러분의 자기소개 페이지를 만들어보세요! 위에서 배운 시맨틱 태그를 활용하여 자신에 대한 내용을 담고, 창의력을 발휘해보세요. 페이지가 완성되면 가족이나 친구들에게 보여주고 피드백을 받아보세요!

예제 및 동작 원리