HTML, CSS

[HTML] inline 요소 텍스트

hyun0907 2024. 1. 20. 14:50

인라인 요소는 가로, 세로 값을 가질 수 없어서 텍스트를 다룰 때 적합합니다. 인라인 요소로 글자를 꾸며주는 스타일링 태그가 많습니다.

 

1. <b>, <strong>: 글자를 굵게(bold)

글자 모양을 굵게 표시하려고 할 때 <b>나 <strong> 태그를 사용합니다. 결과가 동일하게 나타나지만, 차이점은 있습니다. 경고나 주의사항처럼 중요한 내용일 때는 <b>보다는 <strong>을 사용하고, 글자를 단순하게 굵게 표시하고 싶다면 <b>를 사용하면 됩니다. <strong>을 사용하면 '화면낭독기'에서 알려줍니다.

 

 

이 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다.

<b>와 <strong> 차이 정리

<b>

  • 단순히 굵게 표시하기 위한 용도
  • 중요성을 가지지 않기 때문에 의미가 없음
  • 의미와 관계 없이 굵은 글씨를 사용한다면 css font-weight 속성 사용

<strong>

  • 중요성을 가짐
  • 중요 내용이나 경고 표시할 때 사용

 

2. <i>, <em>: 글자를 기울게(italic)

<i>와 <em> 태그는 글자를 기울게 표시할 때 사용합니다. 이 둘 태그 역시 <b>와 <strong>처럼 결과가 동일하게 나오지만, 차이점이 있습니다. <i>는 단순히 주위와 구분할 때 사용하며 <em>은 주변 텍스트에 비해 강조된 부분을 표시할 때 사용합니다. 

 

<i>

  • 주위와 구분할 때 사용
  • 기술 용어, 외국어, 등장인물의 생각 등

<em>

  • 컨텐츠를 강조할 때 사용
  • 주위 텍스트에 비해 강조된 부분, 저자의 생각 등 

 

 

이 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다.

 

참고로 <strong>, <em> 태그는 같은 태그를 여러번 중첩 가능하며 서로 중첩도 가능합니다.

 

3. <mark>: 형광펜

<mark> 태그는 형광펜으로 칠한 것처럼 하이라이팅을 할 때 사용합니다.

일반적으로 인용문에서 특별한 부분, 검색 결과 등처럼 주의를 끌기 위해 강조할 때 사용합니다.

결과

* 참고

<mark> 태그는 사진처럼 CSS 기본값을 가집니다.

mark {

background-color: yellow;

color: black;

}

배경색이 노란색, 글씨색이 검정색으로 표시됩니다.

 

4. <q>: 짧은 인용문

인용 내용으로 <blockquote> 태그를 사용해도 됩니다.

차이점이 있는데 <blockquote>는 block 형태로 구분 지어 밑으로 표시되는 반면, <q> 태그는 인라인 요소로 그대로 한 줄에 표시 됩니다. 또한 " "(따옴표) 표시로 결과가 나타납니다.

 

결과

 

5. <ruby>: 동아시아 글자 표시

<ruby> 태그는 동아시아 일부 지역의 언어에서 일본어 후리가나처럼 해당 문자나 발음 등 설명을 표기하는 루비 주석(ruby annotation)을 정의할 때 사용합니다. <ruby> 요소는 발음이나 설명이 필요한 한 개 이상의 문자로 구성되며 포함될 수 있는 요소가 있습니다.

 

ruby 태그와 함께 사용하는 요소

  • <rt>: 문자에 대한 발음이나 설명을 정의하는 요소
  • <rp>: ruby 요소를 지원하지 않는 구형 브라우저에서만 표시될 문자를 정의하는 요소

따라서 <rp>는 ruby 요소를 지원하는 브라우저의 경우 무시합니다.

 

rt 요소를 사용할 때

<ruby> 문자 <rt>문자에 대한 발음이나 설명</rt> </ruby>

처럼 사용합니다.

 

rt와 rp 요소 둘 다 포함할 때

 

결과

 

사진처럼 rt 요소 내 텍스트는 상단에 작게 표시됩니다.

 

6. <ins>, <del>: 밑줄과 취소선

<ins> 태그는 텍스트 아래 밑줄을 추가하여 추가된 텍스트를 표현합니다.

<del> 태그는 텍스트 중간에 줄을 추가하여 삭제된 텍스트를 표현합니다.

결과

7. <sub>, <sup>: 첨자

<sub> 태그는 아래첨자를 표시합니다.

<sup> 태그는 위첨자를 표시합니다.

결과

 

8. <cite>: 참고내용

<cite> 태그는 웹 문서나 포스트에서 참고 내용으로 표시하거나, 저작물의 출처, 주석을 작게 표시할 때 사용합니다.

결과

 

9. 그 외 태그들

태그 설명
<abbr title="타이틀">텍스트</abbr> 약자를 표시하며 title 속성을 함께 사용 가능
<code>소스 코드</code> 컴퓨터 인식을 위한 소스 코드
<kbd>사용자 입력 내용</kbd> 키보드 입력, 음성명령 같은 사용자 입력 내용
<small>작게 표시하는 텍스트</small> 부가 정보처럼 작게 표시되는 텍스트
<s>취소선</s> 취소줄 표시, <del>보다 약한 삭제
<u>오류</u> 철자 오류 표시

순서대로 얻을 수 있는 결과

 

<abbr>의 요소의 경우 텍스트 위에 마우스를 올려놓으면 title 속성으로 명시한 단어가 나타납니다.