[Html] 텍스트 요소 - 줄바꾸기, 밑줄, 중앙줄, 첨자, 인용

제목(Heading)

• 검색엔진은 <h>를 이용하여 키워드를 수집하고 그 내용을 파악하므로, 문서 제목은 <big><bold> 대신 <h> 태그를 사용한다.
  <h> 태그의 위아래로는 약간의 여백이 자동으로 삽입되며, h1이 제일 크다.

<h1>제목1의 크기입니다!</h1>
<h2>제목2의 크기입니다!</h2>
<h3>제목3의 크기입니다!</h3>
<h4>제목4의 크기입니다!</h4>
<h5>제목5의 크기입니다!</h5>
<h6>제목6의 크기입니다!</h6>

 

굵은 글씨(Bold, Strong)

• 검색엔진은 <strong> 이나 <em> 를 사용하여 강조된 텍스트를 더 중요하게 인식하며, <b> 는 의미론적 중요성은 없다.

<b>이 부분</b>은 단순히 글씨가 <strong>굵은</strong> 부분이에요

 

기울인 글씨(Italic, Emphasized)

• <i> 는 단순히 화면의 텍스트를 이탤릭체로 표현해주지만, <em> 는 텍스트를 이탤릭체로 변환해줄 뿐만 아니라 그 내용이 중요하다는 의미도 함께 포함해준다.

<i>이 부분</i>은 단순히 글씨가 <em>이탤릭체인 부분</em>이에요!

• cite 는 인용(Citation) 효과로, 기울인 글씨체를 표현한다.

<cite>The Matrix</cite>

 

작은 글씨(Small) 효과

• <small> 은 작은 글씨로 텍스트를 표현한다.

<h2>HTML <small>Small</small> Formatting</h2>

 

형광펜 효과(Highlighting)

• <mark> 는 형광펜으로 하이라이팅한 듯 한 효과를 준다. 

<mark>이 부분</mark>만 하이라이팅하고 싶어요.

 

삽입 효과(Insert)

• <ins> 는 텍스트에 밑줄을 만들어준다.

<ins>밑줄 친 부분</ins>에 들어갈 알맞은 말을 고르세요.

 

삭제 효과(Delete)

• <del> 는 텍스트에 중앙선을 만들어준다.

<del>이 부분</del>을 지운 것처럼 하고 싶어요.

 

위첨자(superscript)와 아래첨자(subscript) 효과

• 위첨자는 <sup> 를 사용하며 아래첨자는 <sub> 를 사용한다.

<p>X<sup>2</sup> + Y<sup>3</sup> = Z</p>
<p>물을 나타내는 화학식은 H<sub>2</sub>O 입니다.</p>

 

짧은 인용구(Quotation)

• <q> 를 사용하여 표현할 수 있으며 자동으로 앞뒤에 큰따옴표가 붙는다.

<p>HTML의 정의는
<q>웹 페이지를 만들기 위한 하이퍼텍스트 마크업 언어</q>
입니다.</p>

 

블록 인용구(Block quatation)

• 길이가 긴 인용문은 <blockquote> 를 사용하여 표현하는데, 인용 부분을 별도의 단락으로 구분하여 나타낸다.

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

 

축약형 표현(Abbreviation)

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

<strong>
<abbr title="HyperText Markup Language 5">HTML5</abbr>
</strong>란 웹 문서를 제작하는 데 쓰이는 프로그래밍 언어인 HTML의 최신규격입니다.

 

주소 표현(Address)

• <address>태그로 주소를 표현할 수 있는데, 이 주소는 이탤릭체로 표현되며 위아래로 약간의 공백이 자동으로 삽입된다.

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

 

코드(Code) 효과

<code> python </code>

 

수평 가로 구분선(Horizontal rule)

<p>저는 하나의 단락입니다.</p>
<hr>
<p>저는 하나의 단락입니다.</p>
<hr>
<p>저는 하나의 단락입니다.</p>

 

단락(Paragraph)

• <p> 태그는 단락을 지정하며, 위아래로 약간의 여백이 자동으로 삽입된다.

<p>여기서부터 단락입니다.</p>

 

띄어쓰기와 줄 바꾸기(Break line)

• HTML은 1개 이상의 연속된 공백과 줄바꿈을 1개의 공백으로 표시한다.
• 연속적 공백은 &nbsp; 으로 표현하고, 줄바꿈은 <br> 를 사용한다.

<p>
줄을 나누고 싶어서<br>
이렇게 줄을 나눠봤습니다.<br>
<br>
과연     그대로&nbsp; &nbsp;출력이     될까요?
</p>

 

텍스트 서식 그대로 표현하기(Preformatted text)

• <pre>는 코드에서 작성한 텍스트 서식을 정의된 그대로 표현한다.

// 모든 띄어쓰기와 줄 나누기를 그대로 표현
<pre>
줄을 나누고 싶어서
이렇게 줄을 나눠봤습니다.
 
과연     그대로     출력이     될까요?
</pre>

 

엔티티(Entity)

• 미리 예약된 문자를 예약어라고 하는데,  HTML 예약어를 기존 의미대로 사용하기 위해 &엔티티이름; 또는 &#엔티티숫자; 처럼 만든 문자셋을 엔티티라고 한다. 
• 엔티티 이름은 대소문자를 구분한다.

<p>&lt;p&gt;태그는 단락을 나타내는 태그입니다.</p>

 

발음 구별 부호(Diacritical marks)

• 보통 문자에 발음을 나타내는 부호를 붙인 글자를 나타낼 때 사용하는 부호다.

j에 악센트가 있다는 발음 기호는 [j́]입니다.

 

심볼 특수 문자(Symbol)

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/