현재 문서가 HTML5 언어로 작성된 웹 문서.
태그는 아니다.
웹 문서의 시작과 끝을 나타내는 태그.
웹 브라우저가 <html> 태그를 만나면 </html> 까지의 소스를 읽어 HTML 문법에 맞추어 브라우저에 표시.
웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분.
문서 제목(<title> ~ </title>)만 브라우저 창에 표시되고 나머지는 표시되지 않는다.
스타일 및 스크립트 등이 포함.
실제로 웹 브라우저 화면에 나타날 내용.
제목을 표시할 때 사용.
n에는 1 ~ 6까지 지정할 수 있으며, 숫자가 커질수록 크기가 작아진다.
텍스트를 표시할 때 가장 많이 사용하는 태그.
paragraph의 줄임말로, 단락을 표시할 때 사용.
태그가 닫힐 때까지 줄바꿈 없이 텍스트를 한 줄로 표시한다.
줄바꿈을 할 때 사용.
닫는 태그가 없다.
수평선을 삽입할 때 사용.
(가로 선 삽입)
닫는 태그가 없다.
인용글을 사용할 때 사용.
들여쓰기가 적용되기 때문에 다른 텍스트와 구별이 된다.
한 개의 공백이 아닌 여러 공백을 표시할 때 사용.
소스 코드와 같이 공백이 많은 텍스트를 표현할 때 유용.
웹 문서를 소리로 읽어주는 기계나 점자로 표시해 주는 기계는 <pre> 태그가 적용된 부분을 만나면 건너뛰기 때문에 대체 텍스트를 추가해주도록 한다.
텍스트를 굵게 표시하려는 경우 사용.
<strong> 태그는 중요한 내용을 강조하는 경우 사용.
<b> 태그는 중요하지 않고 단순히 굵게 표시하는 경우 사용.
텍스트를 비스듬히 이탤릭체로 표시할 때 사용.
<em> 태그는 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용.
<i> 태그는 마음 속의 생각이나 꿈, 기술적인 용어 등에서 사용.
인용한 내용을 표기하기 위한 태그.
<blockquote> 태그는 블록 레벨 태그여서 인용 내용이 줄이 바뀌어 나타나고 다른 내용과 구별되도록 안으로 들여써지지만
<q> 태그는 인라인 레벨 태그이기 때문에 줄바꿈 없이 다른 내용과 함께 한 줄로 표시되고 인용 내용을 구별할 수 있도록 인용 내용에 따옴표를 표시한다.
선택한 부분의 배경색이 노란색이 되며 형광펜으로 그은 듯한 효과를 준다.
텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용할 때 사용.
순서가 필요하지 않은 목록(unordered list)을 만들 때 사용.
각 항목 앞에는 불릿(bullet)이 붙으며, CSS의 list-style-type 속성을 이용해 불릿을 수정한다.
순서가 필요한 목록(ordered list)을 만들 때 사용.
type 속성 : 순서 목록을 나타낼 때 type 속성을 이용해 숫자, 영문자, 로마자로 표현할 수 있다.
- 1 : 숫자(기본값)
- a : 영문 소문자
- A : 영문 대문자
- i : 로마숫자 소문자
- I : 로마숫자 대문자
start 속성 : 순서 목록은 기본적으로 1로 시작하며, start 속성으로 다른 번호부터 시작할 수 있다.
reversed 속성 : 항목을 역순으로 표시
사전 구성처럼 '제목'과 '설명'이 한 쌍인 설명 목록(decription list)을 만듦.
목록을 만들며, <dt>와 <dd> 태그가 함께 쓰인다.
제목을 표시.
설명을 표시.
표를 만들 때 사용하는 태그.
<th>, <tr>, <td> 태그들을 이용해 제목, 행, 내용을 만든다.
표에 행을 추가한다.
내용은 <th>, <td> 태그를 이용해 채운다.
표에 제목 셀을 만든다.
글자가 굵고 셀의 중앙에 배치된다.
표에 내용을 추가할 때 사용.
colspan 속성을 이용해 셀을 가로로 합칠 수 있다.
rowspan 속성을 이용해 셀을 세로로 합칠 수 있다.
표에 제목을 붙일 때 사용.
<table> 태그 바로 다음에 사용.
표 제목은 표의 위쪽 중앙에 표시된다.
해당 태그 안에는 다른 태그를 사용해 제목을 여러 줄로 표시하거나 텍스트를 꾸밀 수도 있다.
표에 제목을 붙일 때 사용.
figure와 caption의 합성어로 설명 글을 붙이고 싶은 대상을 <figure> 태그로 감싼 후 <figcaption> 태그를 이용해 제목이나 설명 글을 입력한다.
이 경우 <caption>태그는 사용하지 않으며 중앙에 정렬되지 않는다.
화면 낭독기에서 표를 읽어줄 대 도움이 되도록 표 설명을 별도의 문장으로 작성한 후 <table> 태그 안에 aria-describedby 속성을 추가해 연결하면 표를 이해하는데 도움이 된다.
테이블을 제목 <thead>, 본문 <tbody>, 요약 <tfoot>으로 구조를 나눈다.
한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 때 사용
닫는 태그가 없다.
이 태그를 사용해 둘 이상의 열을 묶어 같은 스타일을 지정하려면 span 속성을 이용해 몇 개를 함께 묶어줄지 지정할 수 있다.
이 태그의 개수와 표의 열의 개수가 같아야 한다.
<caption> 태그 뒤와 <tr>, <td> 태그 전에 사용해야 한다.
<col> 태그와 같이 여러 열을 묶어 스타일을 적용할 수 있다.
이 태그 안에 묶는 열의 개수만큼 <col> 태그를 넣으면 된다.
이 태그 안에 있는 <col> 태그의 개수와 표의 열의 개수가 같아야 한다.
<caption> 태그 뒤와 <tr>, <td> 태그 전에 사용해야 한다.