html 왕기초
Posted: Thu May 30, 2024 11:28 am
HTML의 구조와 문법에 대한 상세 가이드
HTML(HyperText Markup Language)은 웹 페이지를 구성하는 기본 언어입니다. 이 글에서는 HTML의 구조와 문법에 대해 상세히 설명하겠습니다. PHP, Servlet 등 백엔드 언어를 배우기 전에 HTML의 기초를 확실히 다져보세요.
1. HTML 문서의 기본 구조
HTML 문서는 보통 다음과 같은 기본 구조를 갖습니다.
각 부분을 상세히 설명하겠습니다.
HTML 문서는 여러 HTML 요소로 구성됩니다. 각 요소는 시작 태그, 내용, 종료 태그로 이루어집니다.
예를 들어, 다음은 단락(paragraph) 요소입니다.
HTML 요소는 중첩될 수 있습니다. 예를 들어:
3. HTML의 주요 태그들
HTML에는 다양한 태그들이 있습니다. 몇 가지 중요한 태그들을 소개합니다.
HTML 요소는 다양한 속성을 가질 수 있습니다. 속성은 요소의 동작이나 외형을 정의합니다.
HTML 주석은 코드에 대한 설명을 추가할 때 사용합니다. 주석은 브라우저에 표시되지 않습니다.
6. HTML 폼(Forms)
HTML 폼은 사용자 입력을 받는 방법입니다. 폼은 다양한 입력 요소를 포함할 수 있습니다.
이 글에서는 HTML의 구조와 문법에 대해 상세히 설명했습니다. HTML은 웹 개발의 기본이 되는 언어로, 백엔드 언어를 배우기 전에 반드시 숙지해야 합니다. 다양한 태그와 속성을 익히고 실습하면서 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>: 문서의 본문을 포함합니다. 웹 페이지에 실제로 표시되는 내용이 여기에 들어갑니다.
HTML 문서는 여러 HTML 요소로 구성됩니다. 각 요소는 시작 태그, 내용, 종료 태그로 이루어집니다.
Code: Select all
<tagname>내용</tagname>
Code: Select all
<p>이것은 단락입니다.</p>
Code: Select all
<p>이것은 <strong>강조된</strong> 텍스트를 포함하는 단락입니다.</p>
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>
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>
HTML 주석은 코드에 대한 설명을 추가할 때 사용합니다. 주석은 브라우저에 표시되지 않습니다.
Code: Select all
<!-- 이것은 주석입니다 -->
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의 기초를 탄탄히 다지세요. 웹 개발의 첫 걸음을 내딛는데 도움이 되기를 바랍니다.