HTML 기본 구조
HTML 문서는 이러한 기본 구조를 가집니다
- <!DOCTYPE html> : 문서가 HTML5로 작성되었음을 브라우저에 알립니다.
- <html> : HTML 문서의 루트 요소입니다.
- <head> : 문서의 메타데이터를 포함합니다(제목 , 스크립트 , 스타일 등).
- <title> : 브라우저 탭에 표시될 페이지 제목을 정의합니다.
- <body> : 웹 페이지에 표시될 실제 내용을 포함합니다.
1. 블록 요소와 인라인 요소
HTML 요소는 블록 레벨 요소와 인라인 요소로 나뉩니다
- 블록 요소 : 새로운 줄에서 시작하며 가능한 전체 너비를 차지합니다.
예 : <div> , <p> , <h1> ~ <h6> , <ul> , <ol> , <li> - 인라인 요소 : 줄 바꿈 없이 내용의 흐름을 유지합니다.
예 : <span> , <a> , <strong> , <em> , <img>
2. 텍스트 관련 태그
a) 제목 태그 :
<h1> ~ <h6> 태그는 웹 페이지의 제목을 나타냅니다. <h1>이 가장 중요한 제목이며 <h6>으로 갈수록 중요도가 낮아집니다.
b) 단락 태그 :
<p> 태그는 텍스트 단락을 정의합니다. 자동으로 위아래에 여백이 생깁니다.
c) 강조 태그 :
<strong>은 중요한 텍스트를, <em>은 강조하고 싶은 텍스트를 나타냅니다.
d) 인용 태그 :
<blockquote>는 긴 인용문을, <q>는 짧은 인용문을 나타냅니다.
3. 목록 태그
a) 순서 없는 목록 :
<ul> 태그는 순서가 없는 목록을 만듭니다. 각 항목은 <li> 태그로 표시됩니다.
b) 순서 있는 목록 :
<ol> 태그는 순서가 있는 목록을 만듭니다. 각 항목에 자동으로 번호가 매겨집니다.
c) 정의 목록 :
<dl>은 정의 목록을, <dt>는 용어를, <dd>는 용어에 대한 설명을 나타냅니다.
5. 링크와 이미지 태그
a) 링크 :
<a> 태그는 하이퍼링크를 만듭니다. href 속성에 링크 주소를 지정합니다.
b) 이미지 :
<img> 태그는 이미지를 삽입합니다. src 속성에 이미지 파일 경로를, alt 속성에 이미지 설명을 넣습니다.
6. 테이블 태그
- <table> : 테이블의 시작과 끝을 정의합니다.
- <thead> : 테이블의 헤더 부분을 그룹화합니다.
- <tbody> : 테이블의 본문 부분을 그룹화합니다.
- <tr> : 테이블의 행을 정의합니다.
- <th> : 테이블의 헤더 셀을 정의합니다.
- <td> : 테이블의 데이터 셀을 정의합니다.
7. 멀티미디어 태그
a) 오디오:
<audio> 태그는 음악이나 오디오 스트림을 삽입합니다. controls 속성은 재생, 일시정지, 볼륨 조절 등의 컨트롤을 표시합니다.
b) 비디오 :
<video> 태그는 비디오를 삽입합니다. width와 height 속성으로 크기를 지정할 수 있습니다.
'Front-end > HTML' 카테고리의 다른 글
| HTML 태그2 (0) | 2024.08.07 |
|---|---|
| HTML 소개 (0) | 2024.08.06 |
| HTML5 vscode 개꿀 확장프로그램 (0) | 2024.08.05 |