[파이썬] HTML 기초와 웹 페이지 구조 이해

01 Sep 2023

python

HTML은 HyperText Markup Language의 약자로, 웹 페이지를 구조적으로 설계하는 언어입니다. 웹 페이지를 제작하고자 한다면, HTML의 기초 개념을 이해하고 웹 페이지의 구조를 파악하는 것이 중요합니다.

HTML이란?

HTML은 웹 페이지의 내용을 마크업하는 언어로, 웹 브라우저가 이해할 수 있는 텍스트 형식입니다. HTML은 요소(element)를 사용하여 구성되며, 요소는 태그(tag)와 콘텐츠(content)로 이루어져 있습니다.

예를 들어, 다음과 같은 HTML 코드는 “Hello, World!”라는 간단한 문구를 웹 페이지에 나타냅니다.

<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

위 코드에서 <html>, <head>, <title>, <body>, <h1>은 모두 HTML 요소입니다. 각각의 요소는 열리는 태그와 닫히는 태그로 구성되며, 콘텐츠는 태그 사이에 위치합니다.

웹 페이지 구조

웹 페이지는 일반적으로 헤더(header), 내용(content), 푸터(footer)로 구성됩니다.

헤더: 웹 페이지의 상단에 위치하며, 웹 사이트의 로고, 제목, 네비게이션 등을 포함합니다.
내용: 웹 페이지의 본문에 해당하며, 실제 콘텐츠가 위치합니다.

다음은 웹 페이지의 기본적인 구조를 보여주는 HTML 코드입니다.

<html>
<head>
    <title>웹 페이지 제목</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <h1>웹 페이지 내용</h1>
        <p>웹 페이지의 내용이 여기에 위치합니다.</p>
    </main>
    
    <footer>
        <p>© 2022 My Website. All rights reserved.</p>
        <p>Contact: hello@example.com</p>
    </footer>
</body>
</html>

위 코드에서 <header>, <nav>, <ul>, <main>, <footer>는 구조적 요소로서, 각각 헤더, 네비게이션, 목록, 본문, 푸터를 나타냅니다. 이러한 요소들을 조합하여 웹 페이지의 구조를 설계할 수 있습니다.

HTML을 사용하여 웹 페이지를 구조화하고, 적절한 태그와 요소를 선택하여 웹 페이지의 내용을 표현하는 것은 웹 개발의 기초입니다. 이해를 돕기 위해 예시 코드를 작성하였으며, 실제 웹 페이지 제작 시에는 필요에 따라 더 다양한 요소와 스타일을 사용할 수 있습니다.