03-1. HTML 개요 및 기본 태그
문서 구조 태그
- <html>: HTML 문서의 루트 요소.
- <head>: 문서의 메타데이터를 포함 (제목, 문자 인코딩, 외부 스타일 시트 링크 등).
- <title>: 문서의 제목을 정의 (브라우저 탭에 표시됨).
- <body>: 문서의 본문을 정의 (사용자에게 표시될 내용).
텍스트 서식 태그
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: 제목을 정의 (1부터 6까지의 레벨).
- <p>: 단락을 정의.
- <br>: 줄 바꿈을 삽입.
- <hr>: 수평선을 삽입.
- <strong>: 중요성을 나타내는 강조 (기본적으로 굵게 표시).
- <em>: 강조 (기본적으로 이탤릭체로 표시).
- <u>: 밑줄을 표시.
목록 태그
- <ul>: 순서 없는 목록을 정의.
- <ol>: 순서 있는 목록을 정의.
- <li>: 목록 항목을 정의.
링크와 미디어 태그
- <a>: 하이퍼링크를 정의.
- <img>: 이미지를 삽입.
- <audio>: 오디오 파일을 삽입.
- <video>: 비디오 파일을 삽입.
테이블 태그
- <table>: 테이블을 정의.
- <tr>: 테이블 행을 정의.
- <td>: 테이블 데이터 셀을 정의.
- <th>: 테이블 헤더 셀을 정의.
- <thead>: 테이블의 헤더 그룹을 정의.
- <tbody>: 테이블의 본문 그룹을 정의.
- <tfoot>: 테이블의 바닥글 그룹을 정의.
폼 태그
- <form>: 사용자 입력을 받을 폼을 정의.
- <input>: 사용자 입력 필드를 정의 (종류에 따라 다양한 타입 사용 가능).
- <textarea>: 여러 줄의 텍스트 입력 필드를 정의.
- <button>: 버튼을 정의.
- <select>: 드롭다운 목록을 정의.
- <option>: 드롭다운 목록의 항목을 정의.
- <label>: 입력 요소에 레이블을 붙임.
기타 태그
- <div>: 블록 레벨 컨테이너 요소로, 레이아웃을 그룹화하는 데 사용.
- <span>: 인라인 컨테이너 요소로, 텍스트나 다른 요소를 그룹화하는 데 사용.
- <meta>: 메타데이터를 정의 (문서의 문자 인코딩, 뷰포트 설정 등).
- <script>: JavaScript 코드를 삽입.
- <style>: CSS 스타일을 삽입.
03-2. HTML5 문서 구조 및 기본 태그
구조 태그
- <header>: 문서나 섹션의 머리말을 정의. 일반적으로 사이트의 제목, 로고, 내비게이션 링크 등이 포함됨.
- <nav>: 내비게이션 링크를 그룹화. 사이트의 내비게이션 메뉴를 정의하는 데 사용.
- <section>: 문서의 독립적인 섹션을 정의. 제목을 가지며 논리적으로 구분된 콘텐츠 블록을 나타냄.
- <article>: 독립적인 콘텐츠를 정의. 블로그 게시물, 뉴스 기사 등과 같이 독립적으로 배포되거나 재사용될 수 있는 콘텐츠.
- <aside>: 페이지의 부가적인 콘텐츠를 정의. 사이드바나 추가 정보 등 주 콘텐츠와는 별도로 표시되는 정보.
- <footer>: 문서나 섹션의 바닥글을 정의. 저작권 정보, 연락처, 추가 내비게이션 링크 등이 포함됨.
멀티미디어 태그
- <audio>: 오디오 파일을 삽입. <source> 태그를 사용하여 여러 형식의 오디오 파일을 제공할 수 있음.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>- <video>: 비디오 파일을 삽입. <source> 태그를 사용하여 여러 형식의 비디오 파일을 제공할 수 있음.
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>- <figure>: 독립적인 콘텐츠와 그에 대한 설명을 그룹화. <figcaption> 태그와 함께 사용됨.
<figure>
<img src="image.jpg" alt="Sample Image">
<figcaption>This is an image caption.</figcaption>
</figure>
폼 태그
- <form>: 사용자 입력을 받을 폼을 정의. 다양한 입력 요소와 버튼을 포함.
- <input>: 사용자 입력 필드를 정의. 다양한 타입(text, password, email, date, 등)을 제공.
- <datalist>: <input> 요소와 함께 사용하여 미리 정의된 옵션 목록을 제공.
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>- <progress>: 진행 상태를 나타내는 프로그레스 바를 정의.
<progress value="70" max="100"></progress>- <meter>: 범위 내에서 값을 측정하는 데 사용.
<meter value="0.6" min="0" max="1">60%</meter>
시멘틱 태그
- <main>: 문서의 주요 콘텐츠를 정의. 페이지의 핵심 콘텐츠를 포함.
- <mark>: 텍스트의 중요한 부분을 강조(밝게 표시).
- <time>: 날짜와 시간을 표현. datetime 속성을 사용하여 표준화된 날짜 및 시간 정보를 제공.
2024.08.06
'WEB > 쉽게 배우는 HTML5 & CSS3 그리고 JavaScript 요약 정리' 카테고리의 다른 글
| [HTML 요약정리] 05-2. 제어문 (0) | 2024.09.02 |
|---|---|
| [HTML 요약정리] 05-1. 자바스크립트의 개요 (0) | 2024.08.28 |
| [HTML 요약정리] 04. 태그를 표현하는 CSS와 Advanced CSS(CSS3) (0) | 2024.08.26 |
| [HTML 요약정리] 02. 코드를 작성하고 실행하는 개발 환경 설정 (0) | 2024.08.06 |
| [HTML 요약정리] 01. HTML5, CSS3, 자바스크립트의 개요 (0) | 2024.08.06 |
