html 왕기초

Post by **nextagora** » Thu May 30, 2024 11:28 am

HTML의 구조와 문법에 대한 상세 가이드

HTML(HyperText Markup Language)은 웹 페이지를 구성하는 기본 언어입니다. 이 글에서는 HTML의 구조와 문법에 대해 상세히 설명하겠습니다. PHP, Servlet 등 백엔드 언어를 배우기 전에 HTML의 기초를 확실히 다져보세요.

1. HTML 문서의 기본 구조

HTML 문서는 보통 다음과 같은 기본 구조를 갖습니다.

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>문서 제목</title>
</head>
<body>
    <h1>HTML 문서의 기본 구조</h1>
    <p>이 문서는 HTML의 기본 구조를 설명합니다.</p>
</body>
</html>

각 부분을 상세히 설명하겠습니다.

<!DOCTYPE html>: 문서 형식을 HTML5로 선언합니다. HTML5는 최신 HTML 표준입니다.
<html>...</html>: HTML 문서의 루트 요소로, 문서의 모든 내용을 포함합니다.
<head>...</head>: 문서의 메타데이터(문서 제목, 문자 인코딩 등)를 포함합니다.
<meta charset="UTF-8">: 문서의 문자 인코딩을 설정합니다. UTF-8은 대부분의 언어를 지원하는 표준 인코딩입니다.
<title>...</title>: 문서의 제목을 설정합니다. 제목은 브라우저의 제목 표시줄이나 탭에 표시됩니다.
<body>...</body>: 문서의 본문을 포함합니다. 웹 페이지에 실제로 표시되는 내용이 여기에 들어갑니다.

2. HTML 요소와 태그

HTML 문서는 여러 HTML 요소로 구성됩니다. 각 요소는 시작 태그, 내용, 종료 태그로 이루어집니다.

Code: Select all

<tagname>내용</tagname>

예를 들어, 다음은 단락(paragraph) 요소입니다.

Code: Select all

<p>이것은 단락입니다.</p>

HTML 요소는 중첩될 수 있습니다. 예를 들어:

Code: Select all

<p>이것은 <strong>강조된</strong> 텍스트를 포함하는 단락입니다.</p>

3. HTML의 주요 태그들

HTML에는 다양한 태그들이 있습니다. 몇 가지 중요한 태그들을 소개합니다.

<h1>...</h1> ~ <h6>...</h6>: 제목(heading) 태그. <h1>이 가장 큰 제목이고, <h6>이 가장 작은 제목입니다.
Code: Select all
```
<h1>제목 1</h1>
<h2>제목 2</h2>
...
<h6>제목 6</h6>
```
<p>...</p>: 단락(paragraph) 태그. 문단을 나타냅니다.
Code: Select all
```
<p>이것은 단락입니다.</p>
```
<a>...</a>: 앵커(anchor) 태그. 하이퍼링크를 생성합니다.
Code: Select all
```
<a href="https://www.example.com">예제 사이트</a>
```
<img>: 이미지(image) 태그. 이미지를 삽입합니다.
Code: Select all
```
<img src="이미지_경로" alt="이미지 설명">
```

<ul>...</ul> 및 <ol>...</ol>: 순서가 없는 목록(unordered list)과 순서가 있는 목록(ordered list) 태그.

Code: Select all

<ul>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
</ul>

<ol>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
</ol>

<div>...</div> 및 <span>...</span>: 블록(block) 요소와 인라인(inline) 요소를 각각 정의합니다. 레이아웃을 잡거나 스타일을 적용할 때 사용합니다.
Code: Select all
```
<div>이것은 블록 요소입니다.</div>
<span>이것은 인라인 요소입니다.</span>
```

<table>...</table>: 표(table)를 생성합니다. <tr>은 행(row), <td>는 셀(cell), <th>는 헤더 셀(header cell)을 정의합니다.

Code: Select all

<table>
    <tr>
        <th>헤더 1</th>
        <th>헤더 2</th>
    </tr>
    <tr>
        <td>셀 1</td>
        <td>셀 2</td>
    </tr>
</table>

4. HTML 속성(Attributes)

HTML 요소는 다양한 속성을 가질 수 있습니다. 속성은 요소의 동작이나 외형을 정의합니다.

href: 앵커(<a>) 태그의 링크 목적지를 지정합니다.
Code: Select all
```
<a href="https://www.example.com">링크 텍스트</a>
```
src: 이미지(<img>) 태그의 이미지 파일 경로를 지정합니다.
Code: Select all
```
<img src="image.jpg" alt="이미지 설명">
```
alt: 이미지(<img>) 태그의 대체 텍스트를 지정합니다.
Code: Select all
```
<img src="image.jpg" alt="이미지 설명">
```
title: 요소에 마우스를 올렸을 때 표시되는 툴팁 텍스트를 지정합니다.
Code: Select all
```
<p title="툴팁 텍스트">이것은 단락입니다.</p>
```
style: 요소에 직접 CSS 스타일을 적용합니다.
Code: Select all
```
<p style="color: red;">이것은 빨간색 텍스트입니다.</p>
```

5. HTML 주석(Comments)

HTML 주석은 코드에 대한 설명을 추가할 때 사용합니다. 주석은 브라우저에 표시되지 않습니다.

Code: Select all

<!-- 이것은 주석입니다 -->

6. HTML 폼(Forms)

HTML 폼은 사용자 입력을 받는 방법입니다. 폼은 다양한 입력 요소를 포함할 수 있습니다.

Code: Select all

<form action="submit.php" method="post">
    <label for="username">사용자 이름:</label>
    <input type="text" id="username" name="username">
    <input type="submit" value="제출">
</form>

<form>...</form>: 폼을 정의합니다. action 속성은 폼 데이터를 제출할 URL을 지정하고, method 속성은 데이터를 전송하는 방법을 지정합니다(GET 또는 POST).
<label>...</label>: 입력 요소의 레이블을 정의합니다.
<input>: 다양한 유형의 입력 요소를 정의합니다. type 속성은 입력 유형을 지정합니다 (예: text, password, submit).
<textarea>...</textarea>: 여러 줄 텍스트 입력을 위한 요소를 정의합니다.

<select>...</select> 및 <option>...</option>: 드롭다운 목록을 정의합니다.

Code: Select all

<select name="options">
    <option value="option1">옵션 1</option>
    <option value="option2">옵션 2</option>
</select>

결론

이 글에서는 HTML의 구조와 문법에 대해 상세히 설명했습니다. HTML은 웹 개발의 기본이 되는 언어로, 백엔드 언어를 배우기 전에 반드시 숙지해야 합니다. 다양한 태그와 속성을 익히고 실습하면서 HTML의 기초를 탄탄히 다지세요. 웹 개발의 첫 걸음을 내딛는데 도움이 되기를 바랍니다.