HTML이란?

HTML(HyperText Markup Language)은 웹 페이지를 구성하는 기본적인 마크업 언어입니다. HTML은 문서의 구조를 정의하고, 텍스트, 이미지, 링크, 폼 요소 등을 웹 브라우저에서 표시할 수 있도록 합니다.

HTML의 사용 목적

HTML은 주로 웹 페이지를 만들 때 사용되며, 다음과 같은 역할을 합니다.

문서 구조화: 제목, 문단, 목록 등 웹 페이지의 기본적인 구조를 정의합니다.
콘텐츠 표시: 텍스트, 이미지, 동영상 등의 콘텐츠를 표시합니다.
링크 연결: 하이퍼링크를 통해 여러 페이지를 연결할 수 있습니다.
폼 입력 지원: 사용자 입력을 받기 위한 폼 요소(input, button, textarea 등)를 제공합니다.
SEO 및 접근성 향상: 검색 엔진 최적화(SEO)와 웹 접근성을 향상시키는 데 도움을 줍니다.

HTML의 기본 구조

HTML 문서는 기본적으로 <html>, <head>, <body> 세 가지 주요 부분으로 구성됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 기본 구조</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>이것은 HTML 기본 구조입니다.</p>
</body>
</html>

유용한 HTML 레이아웃

웹 페이지를 만들 때 자주 사용되는 레이아웃 유형을 소개합니다.

1. 단일 페이지 레이아웃

한 페이지에 모든 정보를 담는 형태로, 간단한 랜딩 페이지나 포트폴리오 사이트에 유용합니다.

<div class="container">
    <header>
        <h1>내 웹사이트</h1>
    </header>
    <section>
        <p>이곳에 내용을 추가하세요.</p>
    </section>
    <footer>
        <p>&copy; 2025 모든 권리 보유</p>
    </footer>
</div>

2. 내비게이션 포함 레이아웃

웹사이트의 여러 페이지를 탐색할 수 있도록 내비게이션 메뉴를 포함한 형태입니다.

<nav>
    <ul>
        <li><a href="#">홈</a></li>
        <li><a href="#">소개</a></li>
        <li><a href="#">서비스</a></li>
        <li><a href="#">연락처</a></li>
    </ul>
</nav>

3. 그리드 레이아웃

여러 개의 콘텐츠 블록을 균형 있게 배치하는 그리드 기반의 레이아웃입니다.

<div class="grid-container">
    <div class="grid-item">콘텐츠 1</div>
    <div class="grid-item">콘텐츠 2</div>
    <div class="grid-item">콘텐츠 3</div>
</div>

CSS를 사용하면 더욱 깔끔한 그리드 레이아웃을 만들 수 있습니다.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.grid-item {
    padding: 20px;
    background-color: lightgray;
    text-align: center;
}

결론

HTML은 웹 개발의 기초가 되는 중요한 언어로, 다양한 요소를 조합하여 웹 페이지를 구성할 수 있습니다. CSS와 JavaScript와 함께 사용하면 더욱 강력한 웹 애플리케이션을 만들 수 있습니다. 이번 글에서는 HTML의 기본 개념과 유용한 레이아웃 예시를 살펴보았습니다. 앞으로 HTML을 활용한 다양한 실전 예제도 다뤄보겠습니다!