[HTML] 당신이 몰랐을 수도 있는 시맨틱 태그들 기본 편
마릴린벅시
2022. 9. 17. 12:59ㆍ프론트엔드
당신이 몰랐을 수도 있는 시맨틱 태그
1. <abbr>
- abbr태그는 약어를 감쌀 때 사용한다.
- abbr태그의 title어트리뷰트를 사용하면 hover했을 때 약어에 대한 설명을 제공할 수 있다.
See the Pen Untitled by seoulsaram (@seoulsaram) on CodePen.
2. <address>
- address 태그는 연락처 정보를 지정할 때 사용한다.
- 이름, 주소, 이메일, 전화번호, 소셜미디어 등이 포함될 수 있다.
See the Pen Untitled by seoulsaram (@seoulsaram) on CodePen.
3. <blockquote>
- blockquote 태그는 긴 인용문을 작성할 때 사용한다.
- 기본적으로 텍스트는 들여쓰기된 텍스트 블록으로 렌더링된다.
- 선택적으로 사용되는 cite 어트리뷰트는 인용문의 URL소스를 설정할 때 사용한다. (겉보기 모양은 달라지지 않는다)
See the Pen Untitled by seoulsaram (@seoulsaram) on CodePen.
4. <time>
- time 태그는 날짜나 시간을 표시할 때 사용한다.
- 시각적 변화는 없지만, 스크린 리더 및 검색 엔진과 같은 자동 페이지 읽기 도구에서 접근할 수 있게 해준다.
See the Pen Untitled by seoulsaram (@seoulsaram) on CodePen.
5. <noscript>
- 이 태그는 react개발자라면 많이 보았을 태그다. noscript 태그는 브라우저에서 자바스크립트를 지원하지 않을 때 noscript태그로 감싼 내용이 표시된다.
- 브라우저가 자바스크립트를 지원하는 경우에는 아무 내용도 표시되지 않는다.
- 이 태그는 <head> 또는 <body> 태그 안에 배치된다.
See the Pen Untitled by seoulsaram (@seoulsaram) on CodePen.
6. <base>
- base 태그는 페이지의 모든 상대적인 링크에 대한 기본 URL을 정의할 때 사용한다.
- base 태그를 사용하는 목적은 링크 경로를 간단하고 짧게 작성하기 위해서이다.
- 페이지에는 하나의 <base>태그만 있어야 하며, 이는 <head>태그 내에 위치해야 한다.
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] 당신이 몰랐을 수도 있는 시맨틱 태그들 텍스트 편 (0) | 2022.09.17 |