02 - 1. 텍스트 관련 태그들(상)

텍스트와 관련된 태그에 대해 알아보자.

 

<태그> 내용 <태그> (어원)

설명

 

의 방식으로 진행된다.

 

 

<hn> 제목 </hn> (heading)

n이 작을수록 글자 크기가 커진다. <h1>이 가장 큰 제목이다.

 

<p> 텍스트 <p> (paragraph)

줄 바꿈 없이 텍스트를 표시한다.

단락의 길이가 브라우저 창의 너비보다 길어지면, 줄이 자동으로 바뀐다.

 

* <br>을 두번 쓰면 단락 같아 보이긴 하지만,

웹 브라우저는 단락이라 생각하지 않는다.

 

<br> (break)

줄 바꿈 ( \n랑 같음)

 

<hr> (horizontal)

가로선이 생김. CSS를 이용해 선을 없앨 수 있다.

 

<blockquote> 인용 내용 </blockquote>

인용된 문장은 들여써진다.

 

<pre> 텍스트 </pre> (preformat)

HTML에는 공백이 많아도 브라우저에는 한개의 공백이 표시된다.

<pre>를 사용하면, 소스에 표시한 공백이 브라우저에 그대로 표시된다.

 

* 소리로 읽거나 점자로 변환시 <pre>는 뛰어넘는다.

 

<strong> 굵게 강조할 텍스트 </strong>

<b> 굵게 표시할 텍스트 </b>

 

두 가지 모두 굵게 표시가 되나, 화면 낭독기에서는 <strong>을 사용한 경우에만 '강조' 되었다고 알려준다.

<strong> 이 <b> 보다 의미 중심이라는 것을 알 수 있다.

 

<em> 이텔릭체로 강조할 텍스트 </em> (emphasis)

<i> 이텔릭체로 표시할 텍스트 </i> (italic)

 

<q> 인용내용 </q> (quote)

*<blockquote> 와 다른점

<q>는 줄바꿈 없이 다른 내용과 함께 한줄로 표시된다.

+ 인용 내용을 구분할 수 있도록 내용에 따옴표가 붙는다.

 

<mark> 텍스트 </mark>

노란색 형광펜 효과 CSS의 background-color 속성을 사용해 <mark>의 배경색을 바꿀 수 있다.

 

<span> 내용 </span>

줄 바꿈 없이 일부 텍스트만 묶어 스타일 적용시 주로 사용한다.

* 텍스트 영역을 블록 단위로 할거면 <div>를 사용하자.

 

<ruby> 내용 <rt> 주석 </rt> </ruby>

일본어의 후리가나와 같이 내용 위에 주석이 올라간다.

한자 위에 적힌 것이 후리가나다.( 사진 출처 : https://ko.wikipedia.org/wiki/%ED%9B%84%EB%A6%AC%EA%B0%80%EB%82%98)

 

기타 텍스트 관련 태그들

 

<abbr> ~ </abbr> (abbreviation)

약자 표시 title 속성을 함께 사용할 수 있다.

사용 예시

<abbr title = "국토방위"> 국방 </abbr> 이라고 할때,

브라우저에는 국방 만 나오게 된다.

이 국방 위에 마우스를 올리게 되면 국토방위라는 문구가 뜨게 된다.

 

<cite> ~ </cite>

웹 문서나 포스트에서 참고 내용

 

<code> ~ </code>

컴퓨터 인식을 위한 소스코드

 

<kbd> ~ </kbd>

키보드 입력이나 음성명령 같은 사용자 입력 내용