<head> 태그가 포함하는 자식 요소
1. <title>
- 문서의 제목을 정의
<title>내 웹사이트</title>
2. <meta>
- 문서의 메타데이터 제공(문자 인코딩, 뷰포트 설정, SEO 정보 등)
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="웹사이트 설명">
3. <link>
- 외부 리소스(CSS, 아이콘 등) 연결
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
4. <style>
- 내부 CSS 정의
<style>
body { background-color: lightgray; }
</style>5. <base>
- 문서의 기본 URL 설정 (상대 경로를 기준으로 삼을 기본 주소 지정)
<base href="https://example.com/">
6. <script>
- JavaScript 코드 포함 (보통 head 또는 body 하단에 위치)
<script src="script.js"></script>7. <noscript>
- 사용자의 브라우저에서 JavaScript가 비활성화된 경우 실행할 내용을 정의
<noscript>
JavaSciprt가 필요합니다.
</noscript>
<body> 태그가 포함하는 자식 요소
1. 문서 구조 관련 태그
웹페이지의 구조를 나누는 태그
- <header> : 문서의 헤더 영역 (로고, 내비게이션 바 등)
- <nav> : 내비게이션 메뉴 (메뉴, 링크 모음)
- <section> : 문서의 개별 섹션
- <article> : 독립적인 콘텐츠 (블로그 글, 뉴스 기사 등)
- <aside> : 보조 콘텐츠 (사이드바, 광고 등)
- <footer> : 문서의 푸터 영역 (저작권 정보, 연락처 등)
- <main> : 문서의 핵심 콘텐츠 영역
2. 텍스트 및 콘텐츠 표시 태그
웹페이지의 텍스트를 표시하는 태그
- <h1> ~ <h6> : 제목 태그 (제목 크기 순서대로)
- <p> : 문단 태그
- <span> : 인라인 텍스트 그룹화 (스타일 적용 등)
- <div> : 블록 요소 그룹화 (레이아웃 조정)
- <blockquote> : 인용문
- <pre> : 공백과 줄바꿈을 유지한 채 텍스트 표시
- <hr> : 수평 줄 (구분선)
- <br> : 줄바꿈
3. 목록 관련 태그
항목을 나열할 때 사용하는 태그
- <ul> : 순서 없는 목록 (●, ○ 같은 리스트)
- <ol> : 순서 있는 목록 (1, 2, 3 같은 리스트)
- <li> : 목록 항목
- <dl> : 설명 리스트
- <dt> : 설명 리스트 제목
- <dd> : 설명 리스트 내용
4. 링크 및 미디어 태그
링크, 이미지, 비디오 등 멀티미디어 요소를 포함하는 태그
- <a> : 하이퍼링크
- <img> : 이미지 삽입
- <audio> : 오디오 삽입
- <video> : 비디오 삽입
- <source> : 미디어 소스 지정 (<audio>, <video> 내부에서 사용)
- <iframe> : 다른 웹페이지를 포함하는 태그
- <figure> : 이미지 및 미디어 그룹화
- <figcaption> : <figure> 태그에 대한 설명
5. 테이블 관련 태그
표(table)를 구성할 때 사용하는 태그
- <table> : 표의 전체 구조
- <tr> : 표의 행 (row)
- <td> : 표의 셀 (데이터)
- <th> : 표의 헤더 셀 (굵게 표시됨)
- <thead> : 표의 헤더 그룹
- <tbody> : 표의 본문 그룹
- <tfoot> : 표의 푸터 그룹
- <caption> : 표의 제목
6. 폼 관련 태그
사용자 입력을 받을 때 사용하는 태그
- <form> : 입력 폼
- <input> : 다양한 종류의 입력 필드 (텍스트, 체크박스 등)
- <textarea> : 여러 줄 입력
- <select> : 드롭다운 목록
- <option> : <select> 태그 내부 옵션
- <button> : 버튼
- <label> : 입력 필드와 연결된 레이블
- <fieldset> : 관련 폼 요소 그룹화
- <legend> : <fieldset> 태그에 대한 제목
7. 스크립트 및 기타 태그
웹페이지에서 동적인 기능을 추가할 때 사용
- <script> : JavaScript 코드 포함
- <noscript> : JavaScript가 비활성화된 경우 표시할 내용
- <canvas> : 그래픽을 그릴 수 있는 HTML 요소
- <progress> : 진행 상태 표시 바
- <meter> : 특정 범위 내 값을 표시
'🌠Development > html, css' 카테고리의 다른 글
| [html] List Tag (1) | 2025.01.31 |
|---|---|
| [html] Font Tag (글꼴 태그, <i> vs <em>, <b> vs <strong> 차이) (0) | 2025.01.31 |
| [html] Emmet (0) | 2025.01.31 |
| [html] 기본 구조 (0) | 2025.01.29 |