텍스트 관련 요소들 - 인라인 레벨 요소들

본 포스트는 HTML 스터디에 사용할 자료 목적으로 작성하였습니다.

em & strong

<em> 요소는 중요성을 강조하기 위한 용도로 특정 텍스트를 마크업합니다.
어떤 문장을 읽을 때 힘을 주어 읽었으면 하는 내용에 사용합니다.

<p>지금 <em>당장</em> 시작해!</p>
<p>이 연사 <em>힘차게</em> 외칩니다!</p>
<p><em>으얼마나</em> 맛있게요~</p>

<strong> 요소는 어떤 긴급하거나 중요한 문장이나 단어들을 마크업하기 위해 사용합니다.

<p><strong>개에게 먹이를 주지 마시오!</strong></p>
<p><strong>안전벨트를 <em>반드시</em> 착용하세요!</strong></p>
<p><strong>경고</strong> : 위험할 수 있습니다.</strong></p>

i & b

<i> 요소는 어떤 이유로 주변의 텍스트와 구분하고자 하는 텍스트의 범위를 지정합니다.

<strong> 이나 <em> 혹은 <cite>와 같은 보다 의미론적인 요소를 먼저 사용하되, 적절한 용도의 HTML 요소를 찾지 못 하였을 때 사용합니다.

<p><i data-lang="japanese">ウナギ</i> 는 일본어로 장어를 뜻합니다.</p>

<b> 요소는 의미론적인 것을 배제하고, 그냥 글자를 보기에 굵게 표시하고 싶거나 스타일링을 위해 어떤 영역을 구분하고 싶을 때 사용합니다.

<p><b>김치냉장고</b>는 <b>김치</b>를 보관하기 위한 용도로 사용합니다.</p>

mark

<mark> 요소를 사용할 때는 형광펜을 연상하면 됩니다.
다양한 용도로 활용이 가능하지만 대표적인 용도를 알아보자면..

<blockquote>
  눈사태 효과 란 입력값의
  <mark>아주 작은 변화로도 결과값이 전혀 다르게 도출되는</mark> 효과를 의미한다.
  입력값에 점 하나만 추가되어도 전혀 다른 출력값이 출력된다.
</blockquote>

이렇게 마치 책에 형광펜을 칠하듯이 인용문의 특정한 부분을 하이라이트하기 위한 용도로 사용할 수도 있습니다.

q

<blockquote> 가 블록 단위의 인용문을 나타내기 위해 사용되었다면,
<q> 요소는 한 줄 짜리 인용문을 나타내기 위해 사용합니다.

<p>
  에디슨의 명언중에 이런 내용이 있습니다.
  <q cite="http://blog.naver.com/.../...">
    작업실에 시계가 없었기 때문에 나는 성공할 수 있었다!
  </q>
</p>

span

<span> 요소는 딱히 어떤 특별한 용도없이 단지 인라인 레벨의 여러 요소들을 스타일링 목적으로 그룹화하기 위해 사용합니다.
블록레벨 요소를 그룹화할 때는 <div> 를 인라인레벨 요소에 대해서는 <span> 을 사용합니다.

ruby

일본어 등에서 한자의 발음을 주석으로 표현할 때 사용합니다.

日本語[にほんご]

<ruby> 日本語<rp>[</rp><rt>にほんご</rt><rp>]</rp> </ruby>

abbr

HTML, JS, CSS와 같은 축약형(abbreviation)을 정의할 때 사용한다.

<abbr title="HyperText Markup Language">HTML</abbr>

acronym

두문자어 표현을 정의할 때 사용.

일반적인 축약형(abbreviation)과 두문자어(acronym)의 차이

HTML같은 일반적인 축약형은 '에이치티엠엘'처럼 각 스펠링을 따로따로 구분해 읽지만, AIDS 같이 두문자어는 '에이즈'라고 연결해서 한 단어처럼 읽는다.

<acronym title="Acquired Immune Deficiency Syndrome">AIDS</acronym>

small, sub, sup, s, u

타이포그래피를 위해 사용하는 요소들입니다.

요소이름	설명	예시
small	순서가 있는 리스트	이 페이지는 인쇄 전용입니다
sup	위 첨자	264
sub	아래 첨자	H2O
s	취소선	모태솔로 유부남
u	밑줄	가나다라바마사

• <u> 요소는 가급적 사용을 피하는 것이 좋습니다.
  • 아무런 의미없이 밑줄만 필요하다면, <span> 요소로 감싸고 CSS로 스타일링을 하는 것이 좋습니다.