HTML(HyperText Markup Language)은 웹 페이지를 구성하는 기본 언어입니다. 웹 페이지의 구조와 내용을 정의하는 HTML 태그를 통해 웹 개발의 기초를 다질 수 있습니다. 이번 블로그 포스트에서는 HTML의 기본 태그들을 소개하겠습니다.
1. HTML 문서 구조 태그
HTML 문서는 다음과 같은 기본 구조를 갖습니다.
<!DOCTYPE html>
<html>
<head>
<title>문서 제목</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 HTML 문서의 예시입니다.</p>
</body>
</html>
위의 코드는 간단한 HTML 문서의 예입니다. 각 부분을 살펴보겠습니다.
- <! DOCTYPE html>: HTML5 문서임을 선언합니다.
- <html>: HTML 문서의 루트 요소입니다.
- <head>: 문서의 메타데이터(문서 제목, 문자 인코딩 등)를 포함합니다.
- <title>: 브라우저의 제목 표시줄이나 탭에 표시될 제목을 정의합니다.
- <body>: 실제로 화면에 표시되는 콘텐츠를 포함합니다.
2. 제목 태그 (Heading Tags)
제목 태그는 웹 페이지의 제목을 표시하는 데 사용됩니다. <h1>에서 <h6>까지 있으며, 숫자가 작을수록 더 큰 제목을 의미합니다.
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>
3. 단락 태그 (Paragraph Tag)
단락 태그 <p>는 텍스트 단락을 나타냅니다.
<p>이것은 단락입니다.</p>
4. 링크 태그 (Anchor Tag)
링크 태그 <a>는 다른 페이지나 리소스로의 하이퍼링크를 만듭니다.
<a href="https://www.example.com">Example 사이트로 이동</a>
5. 이미지 태그 (Image Tag)
이미지 태그 <img>는 웹 페이지에 이미지를 삽입합니다.
<img src="image.jpg" alt="설명 텍스트">
6. 목록 태그 (List Tags)
HTML에는 순서가 있는 목록과 순서가 없는 목록을 만들 수 있는 태그가 있습니다.
- 순서가 없는 목록: <ul> (unordered list)와 <li> (list item)
<ul>
<li>아이템 1</li>
<li>아이템 2</li>
<li>아이템 3</li>
</ul>
- 순서가 있는 목록: <ol> (ordered list)와 <li> (list item)
<ol>
<li>첫 번째 아이템</li>
<li>두 번째 아이템</li>
<li>세 번째 아이템</li>
</ol>
7. 테이블 태그 (Table Tags)
테이블 태그는 표를 만들 때 사용됩니다.
<table>
<tr>
<th>헤더 1</th>
<th>헤더 2</th>
</tr>
<tr>
<td>데이터 1</td>
<td>데이터 2</td>
</tr>
</table>
- <table>: 표를 정의합니다.
- <tr>: 표의 행을 정의합니다.
- <th>: 표의 헤더 셀을 정의합니다.
- <td>: 표의 데이터를 정의합니다.
8. 폼 태그 (Form Tags)
폼 태그는 사용자 입력을 받기 위한 폼을 만듭니다.
<form action="/submit" method="post">
<label for="name">이름:</label>
<input type="text" id="name" name="name">
<input type="submit" value="제출">
</form>
- <form>: 폼을 정의합니다.
- <label>: 입력 요소에 대한 설명을 정의합니다.
- <input>: 다양한 종류의 사용자 입력 필드를 정의합니다.
- <button>: 버튼을 정의합니다.
결론
HTML의 기본 태그들은 웹 페이지를 구성하는 기초적인 요소들입니다. 이러한 태그들을 잘 이해하고 활용하면, 보다 효율적이고 구조적인 웹 페이지를 만들 수 있습니다. 웹 개발의 첫걸음으로 HTML 기본 태그를 익혀보세요! 웹의 세계가 훨씬 더 흥미로워질 것입니다.