본문 바로가기

HTML

HTML 텍스트, 문단 태그

HTML 텍스트, 문단 태그

<hn>

<h1>,<h2>...<h6>는 각 웹 콘텐츠 영역에서 제목을 표시할 때 사용한다.
<h1>태그는 하나의 콘텐츠에서 하나만 쓰일 것을 권고하고 있다. 
단순히 글씨를 크고 굵게 바꾸려는 목적으로 사용해서는 안 된다.
블록(block)속성이라 자동으로 줄바꿈이 된다.

<p>

입력한 내용 앞 뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다. 

<br>

강제로 줄을 바꾼다. 닫는 태그가 없어 단독으로 사용하면 된다.

<hr>

아래와 같은 수평선이 생긴다. 

분위기를 전환하는 용도로 사용된다.


<pre>

소스에 표시한 공백이 그대로 나타난다.

HTML 문법에서는 공백을 아무리 넣어도 하나만 표시된다.

공백을 표기하기 위해서는 &nbsp; 라는 번거로운 특수기호를 입력해야 된다.

<pre>를 사용하면 이 번거로움을 덜 수 있어 코드 등을 표시할때 애용되는 태그다. 


아래 참조.

<strong>, <b>

텍스트를 굵게 표시하는 태그.

1
2
3
<strong>강조</strong>
<br>
<b>단순한 굵기</b>
cs


결과는 같지만 

<strong> 태그는 중요한 내용이라서 강조해야 할 때, 

<b>태그는 단순히 굵게 표시할 때 사용한다는 차이가 있다.

<em>, <i>

텍스트를 이탤릭체로 표시한다. 

1
2
3
<em>특정 부분 강조</em>
<br>
<i>단순한 이탤릭체</i>
cs

역시 결과는 같지만 

<em>은 흐름상 특정 부분을 강조할 때, 

<i>는 단순히 이탤릭체 표기에 사용한다.

<u>, <ins>

밑줄 긋기. <u>태그는 단순한 밑줄을 <ins>는 새로 추가된 내용을 표기할 때 사용한다.

<s>,<del>

취소선. 

<s>는 텍스트를 가로지르는 선을 긋고 싶을때(나무위키 꺼라), 

<del>은 삭제된 내용임을 표시할때 사용한다.

<mark>

형광펜 효과. 배경색이 노랑으로 표시된다. 

<small>

텍스트가 작게 표시된다.

딱히 쓸 일은 없는 것 같다..

<sup>,<sub>

위첨자와 아래첨자를 표시한다.

화학기호나 뭐 그런거 표시할때 쓴다.

헷갈릴 수 있는데 b랑 p 모양으로 기억하면 쉽다.

<q>, <blockquote>

인용내용 표시. 

<q>는 한 줄의 인용문에 쓰인다. 줄바꿈 없이 다른 내용과 한 줄에 인용 내용이 표시되며 내용 앞 뒤에 따옴표(" ")가 추가된다. 

<blockquote>는 다른 자원에서 인용한 일부를 지정할 때 사용된다. 블럭속성이며 자동 들여쓰기가 된다.

<cite>

작품의 제목을 지정하는 용도로 쓰인다. 이탤릭체가 된다.

1
2
3
4
5
<h3>남대문</h3>
<blockquote cite url="http://terms.naver.com/entry.nhn?docId=695218&cid=41708&categoryId=41711">
<p>국보 제1호. 문화재 관리국은 1996년 11월 28일 광복 50주년 역사 바로 세우기 일환으로 일본식 표현, 부적절한 명칭, 역사왜곡, 우리역사와 무관한 유적, 가치평가의 왜곡 등을 주요 항목으로 설정하고 심의 작업을 벌여왔다. ‘숭례문(국보 제1호)’이 이제서야 원래의 명칭에 담긴 뜻을 되살리게 되었다.</p>
<cite>-[네이버 지식백과] (국어국문학자료사전, 1998, 한국사전연구사)-</cite>
</blockquote>
cs


 

<ruby>, <rt>

글자에 주석을 표시한다. 동아시아 문자들의 발음을 표기하기 위해 쓰인다. 
<ruby>안에 <rt>로 발음을 표시한다.


1
2
3
4
<ruby>
  漢 <rt>Kan</rt>
  字 <rt>ji</rt>
</ruby>
cs