본문 바로가기

프로그램 공부/HTML

HTML 텍스트 관련 태그

- <h1></h1> : 제목 표시하기

1~6까지의 숫자가 있으며 숫자가 커질수록 글자크기는 작아진다.

 

- <p></p> : 단락 만들기

앞뒤 줄바꿈이 있는 단락을 만든다.

 

- <br> : 줄바꿈

 

- <hr> : 수평줄 넣기


위와 같은 수평 줄을 넣어준다.

 

- <blockquote></blockquote> : 인용문 넣기

단락이 들여쓰기로 되어진다.

 

- <pre></pre> : 입력하는 그대로 화면에 표시

예를 들어 코드에서 공백이 그대로 브라우저에 표시되게 만들어준다.

[tab]키를 4번 눌렀다면 웹 화면에서도 [tab]키가 4번 눌린 모습으로 나온다.

하지만 웹 문서를 소리나 점자로 읽어주는 기계는 <pre>가 적용된 부분은 그냥 건너뛰기도 하니 고려해야한다.

 

- <strong></strong> : 중요한 내용이어서 강조하기 (중요도를 높이고 싶을때는 여러번 겹쳐쓰기도 한다.)

<b></b> : 그냥 글자 굵게 만들기

 

- <i></i> : 이탤릭체(글자기울기)로 표시

<em></em> : 이탤릭체로 강조해서 표시

 

- <q></q> : 큰따옴표

적용된 텍스트의 처음과 끝에 큰따옴표("")가 넣어진다.

ex. <q>안녕하세요</q> → "안녕하세요"

 

- <mark></mark> : 형광펜 효과 내기

 

- <span></span> : 줄바꿈 없이 영역 묶기

줄바꿈 없이 일부 텍스트의 스타일만 적용하려고 할때 주로 사용한다.

ex. 오늘은 <span style="color:blue;">아침일찍 일어나지 못해</span> 지각을 했다.

→ 오늘은 아침일찍 일어나지 못해 지각을 했다.

 

- <ruby><rt></rt><ruby> : 동아시아 글자 표시하기

일본어의 경우 한자 위에 발음표기가 작게 나있는 부분이 있는데 그것과 같이 주석처럼 표기되도록 해주는 것

<ruby>내용(한자)<rt>주석(발음)</rt></ruby>

 

- <small></small> : 작게 표시하기

부가정보처럼 텍스트를 작게 표시한다.

 

- <sub></sub> : 아래첨자

ex. H2O에서 2가 아래에 작게 표시되는것

 

- <sup></sup> : 위첨자

ex. 2² → 2승 부분과 같이 위에 작게 표시되는것

 

- <s></s> : 취소선

 

- <u></u> : 밑줄

 

- <ul></ul> : 순서가 필요하지 않는 목록을 만들때 사용

- <ol></ol> : 순서가 필요한 목록을 만들때 사용

 

- <li></li> : 앞에 불릿 추가

 

- <ul></ul> +

  •  

 : 목록 앞에 불릿 추가

 

<ol></ol> +

  •  

 : 목록 앞에 숫자 추가

 

start="" : 시작할 순번 (숫자만 넣는다)

type="" : 1, a, A, i(로마 숫자 소문자), I(대문자 i, 로마숫자 대문자)

 

- 설명 목록 만들기

<dl></dl> : 제목과 설명이 한쌍인 설명목록 만들기

<dt></dt> : 설명 제목 만들기

<dd></dd> : 설명 내용 만들기