HTML5+CSS3 - 텍스트 관련 태그

<p> 태그 - 단락 만들기

<p>내용</p>

단락을 만들기 때문에 앞뒤로 줄바꿈이 일어난다.

<br> 태그도 줄 바꿈에 사용하지만 브라우저는 단락으로 인식하지 않는다.

<blockquote> 태그 - 인용문 넣기

<blockquote [속성="속성값"]>인용내용</blockquote>

다른 사이트에서 인용할 경우 사용한다.

이 태그를 사용하면 들여쓰기가 된 것처럼 다른 내용보다 안쪽에 보이게 된다.

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

<pre>내용</pre>

HTML에서는 공백을 많이 넣어도 하나로 표시된다. 이 때 <pre> 태그를 사용하면 소스에 입력한 그대로 표시된다.

<mark> 태그 - 형광펜 효과 내기

<mark>내용</mark>

태그로 감싼 부분의 배경의 색깔이 표현된다.

기본값으로는 노란색인데, CSS에서 backgroud-color 속성을 사용해 변경이 가능하다.

<time> 태그 - 날짜 또는 시간 정보 표시하기

<time [datetime="값"]>내용</time>

일반 텍스트처럼 보이지만, 브라우저에게 날짜나 시간에 대한 정보를 가진 부분이라고 알려주기 위해 사용.

검색사이트에서 날짜, 시간으로 검색했을 때도 검색되게 해준다.

datetime 속성 형식 : YYYY-MM-DDThh:mm:ssZ

T는 시간과 함께 표현할때 사용하고, Z는 시간대이다.

날짜만 지정하거나, 시간만 지정하거나, 날짜와 시간을 함께 사용할 수 있다.

<strong>, <em> 태그 - 중요한 내용 강조하기

<strong>내용</strong>

<em>내용</em>

내용 중 강조하고 싶은 부분에 사용하며, <strong> 태그는 굵게 표시되고, <em> 태그는 이탤릭체로 표시된다.

글자를 굵게와 이탤릭체로 표현하는 것은 <b>, <i> 태그로도 가능하지만 강조의 의미를 주냐 안주냐에 따라 다르게 사용한다.

<b> 태그 - 굵게 표시하기

<b>내용</b>

단순히 글자를 진하게 표시한다.

<i> 태그 - 이탤릭체로 표시하기

<i>내용</i>

단순히 글자를 기울게 표시한다.

<q> 태그 - 인용한 내용 표시하기

<q>내용</q>

자동으로 따옴표가 붙는다.

<blockquote> 태그도 인용할 때 사용하지만, 블록레벨이므로 줄바꿈이 이루어지지만 <q>태그는 인라인 태그이므로 줄바꿈 없이 다른 내용과 한줄에 표시된다.

<ruby> 태그 - 주석과 함께 표기하는 텍스트

<ruby>

내용<rt>주석</rt>

</ruby>

<span> 태그 - 줄바꿈 없이 영역 묶기

<span>내용</span>

단락 안에서 줄바꿈 없이 일부 텍스트만 묶어서 스타일을 적용할 때 주로 사용.

<kbd> : 키보드 앱력이나 음성 명령과 같이 사용자 입력 내용을 표시할 때 사용

<code> : 파일 이름이나 컴퓨터 프로그램 등 컴퓨터가 인식할 수 있는 소스를 표시

<samp> : 프로그램 처리 결과를 표시

<sup> : 수학 식을 표현할 때 텍스트에 위 첨자를 표현하는 태그

<sub> : 수학 식을 표현할 때 텍스트에 아래 첨자를 표현하는 태그

<s> : 문서에서 특정 텍스트를 제거한다는 의미로 취소선을 그리는 태그