회원가입   로그인
IMG-LOGO
공지사항 :

HTML (HyperText Markup Language)

lmkfox - 2025-04-02 07:06:40 2 Views 0 Comment

HTML (HyperText Markup Language) 완벽 가이드

HTML(HyperText Markup Language)은 웹 페이지의 기본 구조를 정의하는 마크업 언어입니다. 모든 웹 페이지는 HTML을 기반으로 작성되며, CSS와 JavaScript와 함께 사용되어 완전한 웹사이트를 구성합니다.

이 글에서는 HTML의 개념, 역사, 기본 문법, 주요 태그, 최신 트렌드 등을 자세히 설명하겠습니다.

1. HTML이란?

HTML은 HyperText Markup Language의 약자로, 웹 문서를 구조화하는 역할을 합니다.

• HyperText: 문서 간의 연결(링크)을 의미

• Markup Language: 태그(tag)를 사용하여 문서의 구조를 정의하는 언어

HTML은 단독으로 실행되는 언어가 아니라 **웹 브라우저(Chrome, Firefox, Edge 등)**를 통해 해석되어 화면에 표시됩니다.

HTML의 주요 특징

✅ 웹 문서의 기본 골격을 제공

✅ 태그 기반으로 구조 정의

✅ 정적(Static) 문서 생성 가능

✅ CSS, JavaScript와 함께 사용하여 동적 웹사이트 구축 가능

2. HTML의 역사

HTML은 1991년 팀 버너스 리(Tim Berners-Lee)에 의해 처음 개발되었습니다. 이후 여러 차례 개정이 이루어졌으며, 현재 HTML5가 가장 최신 버전입니다.

버전

주요 특징

HTML 1.0 (1993)

최초의 HTML 표준

HTML 2.0 (1995)

기본적인 HTML 문법 정립

HTML 3.2 (1997)

스타일, 테이블 추가

HTML 4.01 (1999)

CSS와의 연동 지원

XHTML 1.0 (2000)

XML 기반 문법 도입

HTML5 (2014~현재)

멀티미디어, 반응형 디자인 지원

3. HTML 문서 구조

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

기본 HTML 문서 예제

<!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>안녕하세요, HTML입니다!</h1>
    <p>이것은 HTML의 기본 구조입니다.</p>
</body>
</html>

HTML 문서의 기본 구성 요소

• <!DOCTYPE html> : HTML5 문서임을 선언

• <html> : 전체 HTML 문서를 감싸는 루트 요소

• <head> : 문서의 설정(메타데이터, CSS, JS 연결 등)

• <title> : 웹 브라우저 탭에 표시될 제목

• <body> : 웹 브라우저 화면에 표시될 콘텐츠

4. HTML 주요 태그

① 제목 태그 (<h1>~<h6>)

웹 문서에서 제목을 나타내는 태그입니다.

<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>

<h1>이 가장 크고 중요한 제목이며, <h6>이 가장 작습니다.

② 문단 태그 (<p>) & 줄 바꿈 (<br>)

문단을 작성할 때 사용합니다.

<p>HTML은 웹 문서를 만들기 위한 언어입니다.</p>
<p>이 문장은 <br> 줄 바꿈을 포함합니다.</p>

<br>은 줄 바꿈을 의미하며, 종료 태그가 없습니다.

③ 링크 태그 (<a>)

다른 페이지로 이동하는 하이퍼링크를 생성합니다.

<a href="https://www.google.com">구글로 이동</a>

target="_blank" 속성을 추가하면 새 창에서 링크가 열립니다.

<a href="https://www.google.com" target="_blank">새 창에서 구글 열기</a>

④ 이미지 태그 (<img>)

웹 페이지에 이미지를 삽입합니다.

<img src="image.jpg" alt="이미지 설명" width="300">

 alt 속성은 이미지가 표시되지 않을 때 대체 텍스트를 제공합니다.

⑤ 목록 태그 (<ul>, <ol>, <li>)

✔ 순서 없는 목록 (ul)

<ul>
    <li>사과</li>
    <li>바나나</li>
    <li>체리</li>
</ul>

✔ 순서 있는 목록 (ol)

<ol>
    <li>HTML 배우기</li>
    <li>CSS 배우기</li>
    <li>JavaScript 배우기</li>
</ol>

⑥ 테이블 태그 (<table>)

표를 만들 때 사용됩니다.

<table border="1">
    <tr>
        <th>이름</th>
        <th>나이</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>25</td>
    </tr>
</table>

<th>는 제목 셀, <td>는 일반 데이터 셀을 의미합니다.

⑦ 입력 폼 태그 (<form> & <input>)

사용자 입력을 받는 폼을 생성합니다.

<form action="/submit" method="POST">
    <label for="name">이름:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="전송">
</form>

action 속성은 데이터를 보낼 서버의 URL을 지정합니다.

5. HTML5의 새로운 기능

① 시맨틱 태그

HTML5에서는 문서의 의미를 명확하게 하기 위해 새로운 시맨틱 태그가 도입되었습니다.

태그

역할

<header>

웹 페이지의 머리글

<nav>

네비게이션(메뉴) 영역

<section>

문서의 구역(컨텐츠 섹션)

<article>

독립적인 컨텐츠 블록

<footer>

웹 페이지의 바닥글

예제

<header>
    <h1>내 블로그</h1>
</header>
<nav>
    <a href="#">홈</a>
    <a href="#">소개</a>
</nav>
<section>
    <article>
        <h2>첫 번째 게시글</h2>
        <p>HTML에 대해 알아봅시다.</p>
    </article>
</section>
<footer>
    <p>© 2025 내 웹사이트</p>
</footer>

6. 결론

HTML은 웹의 기본 골격을 구성하는 필수적인 언어입니다.

✅ 기본적인 태그와 문서 구조를 익히고

✅ CSS를 활용하여 스타일을 추가하고

✅ JavaScript를 적용하여 동적인 기능을 구현하면


댓글