2. HTML 텍스트 요소(1)

제목(Heading)

HTML은 제목을 표현할 수 있는 다양한 크기의 <h> 태그를 제공한다. 

가장 큰 <h1>태그부터 가장 작은 <h6>태그까지 다양한 크기로 제목을 표현할 수 있다. 

 

이런 <h>태그는 제목의 표현이라는 기능 외에도 또 다른 중요한 역할을 하고 있다. 

여러 검색엔진은 각 웹 사이트의 내용을 <h>태그를 이용하여 키워드를 수집하고, 그 내용을 파악한다. 

따라서 HTML 문서에 포함되는 제목은 <h>태그로 작성해야만 제대로 검색될 확률을 높일 수 있다. 

 

종료 태그를 빼 먹지 말 것!

 

 

단락(Paragraph)

단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미하며, 문단이라고도 한다.

HTML에서는 <p>태그를 이용하여 이러한 단락을 표현한다.

 

HTML 코드에서 띄어쓰기나 줄 나누기를 여러 번 하더라도 웹 브라우저를 통해 나타나는 화면에는 전혀 영향을 주지 못합니다.

웹 브라우저는 여러 번의 띄어쓰기나 줄 나누기를 오직 하나의 띄어쓰기나 줄로만 인식하기 때문입니다.

<p>
Hello<br>
World!!<br>
<br>
I am ghkim
</p>

<br>태그 (break line)을 사용하면 새로운 단락을 만들지 않고도 줄을 나눌 수 있다. 

 

텍스트(text) 서식 미리 정의하기

HTML 코드에서 작성한 텍스트 서식을 그대로 표현하려면 <pre>태그를 사용해야 합니다.

<pre>태그(preformatted text) 내에 작성된 텍스트의 모든 띄어쓰기와 줄 나누기는 웹 브라우저에 그대로 표현됩니다.

 

<pre>태그 내에 작성된 텍스트의 글꼴(font)은 고정폭 글꼴(fixed-width font)로 자동변환됩니다.

 

 

서식(Formatting)

HTML은 텍스트(text)에 다양한 효과를 주는 여러 태그(tag)를 제공합니다.

 

-강조 효과-

HTML 문서에서 텍스트를 굵게 표현하고 싶을 때에는 <b>태그(bold text)나 <strong>태그를 사용하면 됩니다.

 

<b>태그는 단순히 화면의 텍스트를 굵게 표현해 준다. 

하지만, <strong>태그는 텍스트를 굵게 표현해줄 뿐만 아니라 그 내용이 중요하다는 의미도 함께 포함해 준다.

 

 

HTML 문서에서 이탤릭체를 표현하고 싶을 때에는 <i>태그(italic text)나 <em>태그(emphasized text)를 사용합니다.

 

<i>태그는 단순히 화면의 텍스트를 이탤릭체로 표현해 줍니다.

하지만, <em>태그는 텍스트를 이탤릭체로 변환해줄 뿐만 아니라 그 내용이 중요하다는 의미도 함께 포함해 줍니다.

 

 

 

-하이라이팅 효과-

<mark>태그는 텍스트에 하이라이팅(highlighting) 효과를 적용시켜 줍니다.

 

 

 

-삭제 효과-

<del>태그(delete)는 텍스트 중앙에 가로줄을 만들어 마치 텍스트를 지운 것과 같은 효과를 내줍니다.

 

 

 

-삽입 효과-

<ins>태그(insert)는 텍스트 밑에 가로줄을 만들어 마치 빈칸에 텍스트를 삽입한 것과 같은 효과를 내줍니다.

 

 

 

-위첨자와 아래첨자 효과-

위첨자는 <sup>태그(superscript)를 사용하여

아래첨자는 <sub>태그(subscript)를 사용하여 각각 표현할 수 있습니다.

 

 

 

인용구(Quotation)

1. 짧은 인용구

2. 블록 인용구

 

 

짧은 인용구

짧은 인용구는 <q>태그(quotation)을 사용하여 표현할 수 있으며, 자동으로 앞뒤에 큰따옴표가 붙는다. 

<p>HTML 정의는
<q>웹을 만들기 위한 hypertext markup language</q>
입니다.</p>

 

 

블록 인용구

길이가 긴 인용문은 <blockquote>태그를 사용하여 표현할 수 있다. 

<blockquote>태그는 이러한 인용 부분을 별도의 단락으로 구분하여 나타낸다. 

<p>HTML의 정의</p>
<blockquote>
인터넷 서비스의 하나인 World Wide Web을 통해 볼 수 있는 문서를 만들 대 사용하는 프로그래밍 언어의 한 종류이다. 
</blockquote>

 

 

축약형 표현

HTML에서 용어의 축약형을 표현하기 위해서는 <abbr>태그(abbreviation)를 사용합니다.

<abbr>태그 위에 마우스를 위치시키면 title 속성에 명시한 용어의 원형이 나타납니다.

 

 

주소 표현

<address>태그를 사용하면 HTML에서 주소를 표현할 수 있습니다.

이러한 주소는 이탤릭체로 표현되며, 위아래로 약간의 공백이 자동으로 삽입됩니다.

 

<address>
	서울특별시<br>
    강남구 테헤란로
</address>