[HTML] 당신이 몰랐을 수도 있는 시맨틱 태그들 텍스트 편
마릴린벅시
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.
반응형
'프론트엔드' 카테고리의 다른 글
[React] 클라이언트에서 pagination 구현하기 1. (심플버전) (0) | 2022.09.27 |
---|---|
[Error] useQuery 사용 시 에러가 발생할 때 : A component suspended while responding to syncronous input. This will cuase... (1) | 2022.09.22 |
[HTML] WAI-ARIA : 웹 접근성에 대한 표준 기술 규격을 제공하는 웹앱 (0) | 2022.09.17 |
[HTML] 웹페이지 접근성 향상시키기 (1) | 2022.09.17 |
[HTML] 당신이 몰랐을 수도 있는 시맨틱 태그들 기본 편 (1) | 2022.09.17 |