텍스트를 덩어리로 묶는 태그
<h1>부터 <h6> 태그 :
- 일반 텍스트 보다 크고 진함... 즉, 제목을 표시함.
- <h1>이 가장 크며 주로 사용됨. 뒤로 갈수록 작아짐.
<p>태그
- 단락 만들어주는 태그. 텍스트를 사용할때 가장 많이 사용하는 태그.
- 단락이란 앞뒤에 줄바꿈이 있는 텍스트 덩어리.
- </p>가 나올때까지 텍스트를 한 줄로 표시하며, 한 줄이 넘어갈경우 자동으로 개행됨.
<br>태그
- 줄 바꾸는 태그
- 편집기에서 줄 바꿈을 해도 브라우저 창에서는 무시하고 한 줄로 표시됨.
- 웹 브라우저 창에서도 줄 바꿈 표시를 하고싶다면 <br>태그를 사용.
<hr>태그
- 수평 줄 넣기.
- 텍스트의 주제 등이 변할 때 구분하기 위해 사용.
- 닫는 태그는 없음
<blockquote>
- 글을 인용할 때 사용하는 태그
- 다른 텍스트보다 안에 들여쓰기되므로 구별하기 쉬움.
- 웹 브라우저마다 표시하는 방식이 각기 다름.
<pre>
- 편집기 작성한 소스에 공백이 브라우저에 그대로 표시됨.
- Preformatted Text의 약자.
- 접근성을 고려해봐야 함.
텍스트를 한 줄로 표시하는 태그
<strong> 태그, <b> 태그
- 굵게 강조하여 표시하는 태그
- 두 태그의 차이 : strong : 주의 사항처럼 중요한 내용 강조, b : 키워드처럼 단순히 굵게 표시.
<em> 태그, <i> 태그
- 이탤릭체로 표시하는 태그
- 두 태그의 차이 : em : 어떠한 기술적인 용어... i : 언어의 관용구 등
<q>
- 인용 내용 표시하기
- <blockquote>과 다른 점 : <blockquote>는 블록 레벨 태그여서 인용 내용이 줄이 바뀌어 표시되며 다른 내용과 구별되도록 들여쓰기가 적용됨
<q>는 인라인 레벨 태그여서 줄바꿈없이 다른 내용과 함께 한 줄로 표시되며 구별할 수 있도록 따옴표로 표시됨.
<mark>
- 노란색 형광펜으로 그어 놓은 듯한 효과를 냄.
- 예제 : <mark>형광펜 표시형광펜 표시</mark>
<span>
- 태그 자체로는 아무 의미가 없으나 텍스트 단락 안에서 줄바꿈없이 일부의 특정 부분의 텍스트만을 묶어 스타일을 적용하려고 할 때 주로 사용함.
- <mark>형광펜 표시?형광펜 표시<span style="color:red;">형광펜 표시</span>?</mark>
<ruby> 태그
- 동아시아 글자를 표시하기 위한 태그
- 주석으로 표시할 내용을 <rt>태그로 사용함.
- 처음 봄. 거의 안 사용함.
목록을 생성하는 태그
<ul> 태그
- Unorder list의 약자. 순서가 필요하지 않은 목록을 생성 시 사용.
- <li> 태그를 사용하여 각 항목을 표시함.
- 순서가 정해지지 않았기 때문에 작은 원 또는 작은 사각형같은 불릿이 붙는다.
- 이 불릿은 CSS에서 list-style-type 속성을 이용해서 수정할 수 있다.
<ol> 태그
- Order list의 약자. 순서가 필요한 목록을 생성 시 사용.
- 역시 <li> 태그를 사용하여 각 항목을 표시함.
- 숫자를 다양한 형태로 표기 방법을 변경할 수 있다.
- 순서와 관련된 속성이 몇 가지 존재함.
1. type 속성 : 1(숫자=기본값) 이지만, a 또는 A i, I 등 여러 형태로 변경이 가능함.
2. start : 시작 숫자를 입력하면 1이 아닌 다른 번호로 시작할 수 있다.
3. reserved : 번호를 역순으로 표기.
<li>를 여러 항목을 사용할때는 닫는 태그 </li>를 생략해도 있는것처럼 인식함.
<li> 항목 밑에 다시 ul이나 ol 태그를 사용하여 중첩할 수도 있다.
<dl>, <dt>, <dd> 태그
- 설명 목록 만들기
<dl> 태그 : 사전 구성과 같이 제목과 설명이 한 쌍으로 이루어진 설명 목록(Description list)를 만듦.
- 예를 들어 단어/정의 목록, 질문/답 목록 등에서 사용이 가능
<dl>아래에 <dt>와 <dd>를 표시함. dt는 제목을, dd는 설명을 표시함.
- 하나의 dl 안에 dt와 dd가 여러개 있을 수 있음.
테이블(표)을 생성하는 태그
- 자료를 정리할 때 자주 사용.
- 행Row와 열Column으로 이루어저 있으며 행과 열이 만나 이루는 영역을 셀Cell이라 부름.
<table> <tr> <th> <td> 태그
- 기본적인 표를 만들기 위한 태그
1. table 태그 생성
2. 몇 행을 생성할 것인지 계산해서 tr태그로 생성
3. 그 안에 몇 개의 열이 들어갈 것인지 td로 생성
행 또는 열 합치기
- 셀을 합치는 것이므로 td 또는 th 태그에서 이루어진다.
행row을 합치려 한다면? rowspan
열column을 합치려 한다면? colspan
<caption> 태그, <figcaption> 태그
- 표에 제목을 붙일 때 새용하는 태그.
- <caption>는 <table>태그 바로 다음에 사용. 표의 가장 위쪽 중앙에 표시되며 다른 태그를 삽입하여 여러 줄로 작성하거나 텍스트를 꾸미는 등 스타일링 가능
- <figcaption>는 <figure>와 <caption>의 합성어로 <figure>태그로 감싼 뒤 <figcaption>태그를 이용하여 제목이나 설명글을 입력한다.
- 중앙에 정력되지 않으며, 또한 table 시작 태그<table> 위 또는 닫기 태그</table> 아래에 위치 가능.
<thead> tbody tfoot
- HTML5에서 시각 장애인들을 위한 접근성과 관련이 있다.
- 제목이 있고, 본문이 있고, 마지막에 합계나 요약 내용을 표시하는데 주로 사용됨.
