제목 - Heading
<h0> 제목 </h0>형태를 가짐
<h1>부터<h6>까지 제목을 표현한다.
사용하는 이유
제목을 통해 구조를 파악할 수 있다.
마크다운에서 # 를 통해 크기를 조절하며 벨로그에서 이 heading 사이즈를 통해 목차가 구분되듯 구조 파악에 영향을 주게 된다.
➡ <b> 태그와 <big> 태그와 혼용하지 않을 것
예시
문단 - Paragraph
<p> text </p>형태를 가짐
문단 형태로 내용상 흐름을 끊고 여백이 포함됨
특징
- 단락의 띄어쓰기는 한칸만 인식
- 단락의 줄바꿈은 인식하지 않고 한줄로 표시
➡<br>태그를 통해 줄바꿈이 가능함
➡<pre>태그는<p>와 다르게 모든 줄바꿈과 공백을 인식해준다.
<br> - 줄바꿈
줄바꿈은 <br> 태그로 줄바꿈을 할 수 있다.
<br> 태그는 빈태그로 종료 태그가 없다.
<hr> - 구분선
을 html에서는 <hr> 태그로 사용할 수 있다.
<hr> 태그 역시 빈태그로 종료 태그가 없다.
<pre> - 텍스트 서식 유지
preformatted text
모든 띄어쓰기 줄바꿈 등이 웹 페이지 에 그대로 표현된다. 고정너비글꼴이 포인트.
고정 너비
각 글자가 동일한 공간을 차지하는 글꼴
일반 적인 글꼴은 가변폭을 가지며 가독성이 높다.
출처 - 위키백과 [고정폭 글꼴]
상단은 가변폭 글꼴 하단은 고정형 글꼴이다.
글자 크기(너비)에 따라 폭이 다른것이 보통의 글꼴 형태
예시 - <p>와 <pre> 비교
서식 - Formatting
텍스트 영역에서 추가적인 효과를 주는 태그
강조 효과
<b>, <strong>
<b> | <strong> |
|---|---|
| 일반적으로 글꼴을 굵게 처리하는 폰트 | 글꼴을 굵게 처리하며 중요함을 표시해준다. |
<i>, <em>
<i> | <em> |
|---|---|
| 일반적으로 글꼴을 기울임 표시 | 글꼴을 이텔릭 처리하며 중요함을 표시해준다. |
<mark>
강조표시 텍스트 정의
크기조절
<big>, <small>
일반 텍스트 대비 더 큰/작은 텍스트를 정의
밑줄
<del>, <s>
<del> | <s> |
|---|---|
| 문서에서 사용하지 않아 제거된 텍스트 정의 | 관련없는 내용을 강조하는 태그 |
<ins>, <u>
<ins> | <u> |
|---|---|
| 이후 삽입된 내용을 강조하는 태그 | 단순 밑줄 태그 |
첨자
<sup> | <sub> |
|---|---|
| 위첨자 | 아래첨자 |
예시
인용구 - Quotation
짧은 인용 - <q>
앞뒤로 "큰 따옴표" 가 붙는다.
긴 인용 - <blockquote>
단락이 나뉘며 탭으로 구분한듯한 여백이 발생한다.
예시
기타 텍스트 정보
약어 - <abbr>
약어 표시시 번역, 검색시 정보제공이 가능하며 마우스를 올려놓으면 약어에 대한 설명을 표시한다.
<abbr title="이렇게 사용가능">마우스를 올려보세요</abbr>마우스를 올려보세요
주소 - <address>
기본값은 기울임꼴로 앞뒤에 줄바꿈이 들어간다.
<address>서울특별시 중구 세종대로 110 </address>정보표시 - <cite>
기본값은 기울임꼴로 표시. 창작물 제목을 정의한다.
The Scream by Edvard Munch. Painted in 1893.
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>➡ 제목에만 작성하는 것이라 한다.
