[HTML] 당신이 몰랐을 수도 있는 시맨틱 태그들 텍스트 편

profile
마릴린벅시
2022. 9. 17. 13:16프론트엔드

1. <ins>, <del>

  • ins 태그는 문서에 추가된 텍스트의 범위를 나타낸다.
  • <del>태그와 함께 사용하면 삭제된 텍스트의 범위를 함께 나타낼 수 있다.
  • <ins> 태그는 기본적으로 밑줄로 렌더링 된다.
  • del 태그는 문서에서 삭제된 텍스트를 나타낸다.
  • <del> 태그는 기본적으로 취소선 텍스트로 렌더링 된다.
  • 두 태그는 문서의 변경 사항을 추적하기 위해 설계되었다.

See the Pen Untitled by seoulsaram (@seoulsaram) on CodePen.

 

2. <em>

  • em 태그는 텍스트에 강조의 의미를 추가한다.
  • 기본적으로 이탤릭체로 렌더링 된다.
  • <em> 요소는 다른 <em> 요소 내에 중첩될 수 있고, 중첩이 깊을 수록 강조 수준이 높아진다.

See the Pen Untitled by seoulsaram (@seoulsaram) on CodePen.

 

3. <q>

  • q 태그는 짧은 인라인 인용문을 나타낸다.
  • 인용문은 양쪽에 큰따옴표로 둘러진다.

See the Pen Untitled by seoulsaram (@seoulsaram) on CodePen.

 

4. <small>

  • small 태그는 텍스트를 더 작은 글꼴로 렌더링한다.
  • 텍스트 크기는 기본 텍스트 크기보다 한 포인트 작게 표시된다.

See the Pen Untitled by seoulsaram (@seoulsaram) on CodePen.

 

5. <samp>

  • samp 태그는 컴퓨터 코드의 샘플 예시를 나타낼 때 쓴다.
  • 기본적으로 브라우저의 기본 고정폭 글씨체를 사용해 렌더링 된다.

See the Pen Untitled by seoulsaram (@seoulsaram) on CodePen.

 

6. <mark>

  • mark 태그는 텍스트를 강조하거나 하이라이트하는 데 사용된다.
  • 이 요소는 em과 마찬가지로 텍스트에 중요성을 부여한다.

See the Pen Untitled by seoulsaram (@seoulsaram) on CodePen.

 

7. <sub>, <sup>

  • sub 태그는 텍스트를 아래 첨자로 표시할 때 사용한다.
  • sup 태그는 위 첨자 텍스트를 표시할 때 사용한다.

See the Pen Untitled by seoulsaram (@seoulsaram) on CodePen.

 

 

8. <ruby>, <rp>, <rt>

  • ruby 태그는 텍스트의 발음이나 의미를 나타내는 주석을 나타낼 때 사용되며, rt태그와 함께 사용된다.
  • 주석은 텍스트 위에 아주 작은 글꼴로 렌더링 된다.
  • rp 태그는 브라우저가 <ruby> 태그를 지원하지 않을 경우에 보여줄 대체 텍스트를 감쌀 때 사용하며, rt태그와 함께 사용된다.
  • rt 태그는 ruby 주석에서 번역이나 발음을 제공하기 위해 사용된다.

See the Pen Untitled by seoulsaram (@seoulsaram) on CodePen.

 

 

 

 

반응형