[html] 웹 페이지 구조

26 Dec 2023

html

이번 포스트에서는 웹 페이지의 구조에 대해 알아보겠습니다. 웹 페이지는 HTML(Hypertext Markup Language)을 사용하여 구조화됩니다. HTML은 요소(Element)들의 집합으로 이루어져 있으며, 이러한 요소들은 페이지의 구조를 결정합니다.

HTML 기본 구조

HTML 문서의 기본 구조는 다음과 같습니다:

<!DOCTYPE html>
<html>
<head>
    <title>페이지 제목</title>
</head>
<body>
    <h1>제목</h1>
    <p>본문 내용</p>
</body>
</html>

<!DOCTYPE html>: 문서 유형 선언
<html>: HTML 문서 시작을 나타냄
<head>: 메타데이터 및 리소스 참조
<title>: 페이지 제목 표시
<body>: 실제 내용이 들어가는 부분
<h1>, <p>: 제목과 단락을 구분하는 요소들

시맨틱 요소

HTML5부터 새롭게 도입된 시맨틱 요소는 웹 페이지의 구조를 더 명확하게 표현하는 데 도움을 줍니다.

<header>
    <nav>
        <ul>
            <li><a href="#">메뉴 1</a></li>
            <li><a href="#">메뉴 2</a></li>
        </ul>
    </nav>
</header>
<section>
    <article>
        <h2>글 제목</h2>
        <p>글 내용</p>
    </article>
</section>
<footer>
    <p>저작권 정보</p>
</footer>

<header>: 페이지 상단의 제목이나 네비게이션을 담는 컨테이너
<nav>: 네비게이션 메뉴
<section>: 문서의 구획을 표시
<article>: 본문의 컨테이너
<footer>: 페이지 하단의 꼬릿말 정보

결론

HTML을 이용하여 웹 페이지의 구조를 정의할 수 있습니다. 시맨틱 요소를 적절히 활용하면 더 의미있고 구조화된 웹 페이지를 만들 수 있습니다.

더 많은 정보를 원하시면 MDN 웹 문서(https://developer.mozilla.org/ko/docs/Web/HTML)를 참고하시기 바랍니다.