[HTML5] 3. 인라인 레벨 태그

임창용·2023년 1월 20일

HTML5

목록 보기
3/7

body 태그

브라우저에 표시될 내용을 입력한다.

텍스트와 관련해 사용하는 태그는 무수히 많다.
하지만 각각의 태그마다 가지고 있는 특성이 다르기도 하다.
텍스트를 블록으로 묶어 처리하는 태그인 블록 레벨 태그가 있고, 태그를 적용해도 줄바꿈 없이 텍스트를 표시하는 인라인 레벨 태그가 있다.

이번 포스트에선 인라인 레벨 태그를 다뤄보겠다.
블록 레벨 태그와 인라인 레벨 태그는 나중에 CSS에서 중요하게 다뤄지니 지금 반드시 이 둘의 차이를 알아두자.

<strong>, <b>

텍스트를 굵게 표시할 때 사용하는 태그이다.
경고나 주의 사항처럼 중요한 내용이어서 강조해야 할 때는 <strong> 태그를 사용하고,
문서의 키워드처럼 단순히 굵게 표시할 때는 <b> 태그를 사용한다.
<strong> 태그를 사용하면 그 부분이 강조되었다고 화면 낭독기가 알려준다.

<strong> 텍스트 </strong>
<b> 텍스트 </b>

<em>, <i>

텍스트를 이탤릭체로 표시할 때 사용하는 태그이다.
문장에서 흐름상 특정 부분을 강조하고 싶을 때는 <em> 태그를 사용하고,
마음 속의 생각이나 꿈, 기술적인 용어, 다른 언어의 관용구 등에서는 <i> 태그를 사용한다.

<em> 텍스트 </em>
<i> 텍스트 </i>

<q>

인용 내용을 표시할 때 <q> 태그를 사용한다.
<q> 태그가 <blockquote> 태그와 다른 점은 <blockquote> 태그는 블록 레벨 태그이기 때문에 인용 내용이 줄이 바뀌어 나타나고 다른 내용과 구별되도록 안아로 들여 써지는 반면, <q> 태그는 인라인 레벨 태그이기 때문에 줄바꿈 없이 다른 내용과 함께 한 줄로 표시되고 인용 내용을 구별할 수 있도록 인용 내용에 따옴표를 붙여 표시하는 점이다.

<q> 인용 내용 </q>

<span>

영역을 인라인 라벨 태그로 묶을 때 사용한다.
태그 자체로는 아무런 의미가 없지만 일부 텍스트만 묶어 스타일을 적용하려고 할 때 사용한다.

<span> 내용 </span>
profile
@dlacked

0개의 댓글