HTML (HyperText Markup Language)은 웹 페이지의 구조를 정의하는 마크업 언어입니다. HTML을 사용하면 웹 페이지의 콘텐츠를 표시하고, 다양한 요소를 페이지에 추가할 수 있습니다. HTML은 웹 개발의 기초가 되는 기술로, 웹 페이지의 내용을 구조화하고 표현하는 데 필수적입니다. HTML의 기본 개념을 다음과 같이 설명할 수 있습니다:
1. HTML 문서 구조
HTML 문서는 기본적으로 다음과 같은 구조를 가집니다:
<!DOCTYPE html>
<html>
<head>
<title>페이지 제목</title>
<meta charset="UTF-8">
<style>
/* CSS 스타일을 여기에 작성할 수 있습니다. */
</style>
</head>
<body>
<!-- 페이지 콘텐츠가 여기에 위치합니다. -->
</body>
</html>
- <!DOCTYPE html>: HTML5 문서임을 선언합니다.
- <html>: HTML 문서의 루트 요소입니다.
- <head>: 문서의 메타데이터를 포함하는 부분입니다. 제목, 문자 인코딩, 스타일 시트 등을 정의합니다.
- <title>: 브라우저 탭에 표시되는 페이지 제목을 설정합니다.
- <meta charset="UTF-8">: 문자 인코딩을 UTF-8로 설정합니다.
- <style>: CSS 스타일을 정의할 수 있는 부분입니다.
- <body>: 실제 페이지 콘텐츠를 포함하는 부분입니다.
2. HTML 요소와 태그
HTML 문서는 요소와 태그로 구성됩니다. 태그는 HTML 요소를 정의하는 데 사용되는 특수한 마크업입니다.
- 요소(Element): HTML 문서에서 하나의 의미 단위로 간주되는 부분입니다. 요소는 열리는 태그와 닫히는 태그로 구성됩니다. 예를 들어, <p>문단 내용</p>에서 <p>와 </p>가 요소를 구성합니다.
- 태그(Tag): HTML 요소를 정의하는 마크업입니다. 열리는 태그(<tag>)와 닫히는 태그(</tag>)로 구성됩니다.
3. 주요 HTML 태그
문서 구조와 콘텐츠
- <h1> ~ <h6>: 제목 태그로, <h1>이 가장 중요하고 큰 제목이며 <h6>이 가장 작은 제목입니다.
- <p>: 문단을 정의합니다.
- <a>: 하이퍼링크를 정의합니다. href 속성으로 링크 URL을 설정합니다. 예: 링크 텍스트
- <img>: 이미지를 삽입합니다. src 속성으로 이미지 파일 경로를 설정합니다. 예: <img src="image.jpg" alt="설명 텍스트">
- <ul>: 순서 없는 목록을 정의합니다. 내부에 <li> 태그로 목록 항목을 추가합니다.
- <ol>: 순서 있는 목록을 정의합니다. <li> 태그로 목록 항목을 추가합니다.
- <table>: 표를 정의합니다. <tr>로 행을 정의하고, <td>로 셀을 정의합니다.
- <form>: 사용자 입력을 받는 폼을 정의합니다. <input>, <select>, <textarea> 등의 요소를 포함할 수 있습니다.
4. 속성 (Attributes)
HTML 태그는 속성을 가질 수 있으며, 속성은 태그의 동작이나 스타일을 정의합니다. 속성은 태그 안에 포함되며, 속성명="값" 형태로 지정합니다.
<a href="https://example.com" target="_blank">링크 텍스트</a>
- href: 링크의 URL을 정의합니다.
- target: 링크가 새 창에서 열리도록 지정합니다 (_blank는 새 창을 의미).
5. HTML 주석
주석은 코드에 설명을 추가하거나, 코드의 일부를 일시적으로 비활성화하는 데 사용됩니다.
<!-- 이것은 HTML 주석입니다. -->6. HTML5의 새로운 기능
HTML5는 새로운 요소와 API를 도입하여 웹 개발을 더욱 강력하고 효율적으로 만들었습니다.
- 새로운 요소: <header>, <footer>, <article>, <section>, <nav> 등은 웹 페이지의 의미를 명확히 하고, 구조적인 레이아웃을 제공합니다.
- 미디어 요소: <video>와 <audio> 태그를 사용하여 비디오와 오디오 파일을 웹 페이지에 직접 삽입할 수 있습니다.
- 폼 개선: 새로운 입력 유형과 속성으로 더 나은 폼을 생성할 수 있습니다. 예: <input type="email">, <input type="date">
7. 문서의 의미와 접근성
- 시맨틱 웹: HTML 요소를 사용하여 문서의 의미를 명확히 하여 검색 엔진 최적화(SEO)와 접근성을 향상시킬 수 있습니다.
- 접근성: 다양한 사용자들이 웹 페이지를 접근하고 사용할 수 있도록 ARIA 속성과 같은 기술을 사용할 수 있습니다.
이러한 기본 개념을 이해하고 활용하면, 웹 페이지를 효과적으로 구성하고 스타일링할 수 있으며, 사용자에게 더 나은 웹 경험을 제공할 수 있습니다.
다음 포스팅은 웹 개발의 필수 기술인 CSS에 대한 기본 개념을 자세하게 설명해드리겠습니다.