figure 태그 (요소에 대한 설명이 필요할 경우에 사용)
• 도표, 차트, 이미지, 표 등을 감쌀 때 사용하는 요소
** figure 태그 내에 <figcaption> 태그 : 요소에 대한 설명
** html의 문서내에 img를 포함시키는 것이 아닌 연결시키는 구조
entity 코드
• 키보드에 없는 특수 문자들을 HTML 문서에 사용할 때 사용
entitycode.com
→ 등
ul, ol, li 태그 (순차, 비순차 목록)
• ul, ol 태그 안에는 li 태그만 사용 가능
• ul 안에 ul을 또 사용하려면 ul > li > ul
dl, dt, dd 태그 (설명 목록)
• description lists : 설명 목록 / dt 와 dd를 감싸서 목록을 생성
• definition term : 용어 제목 / dl 안에 위치해야 하며 보통 dd 가 뒤따르지만 여러 개의 dt 배치 후 dd 배치 가능
• definition description : 용어 설명 / dl 에서 dt 에 대한 설명, 정의, 또는 값을 제공
a 태그 / anchor
• img 태그에 alt 속성을 주지 못할 때 --> a 태그에 title 이나 aria-label 달기
• a 태그 target = "_blank" <- 항상 새 창으로 링크 열기
** rel = "noopener noreferer" 같이 작성하기 (보안상 취약점 문제 해결)
• a 태그 target = "blan" <- 새 창에 blan 이라는 이름을 주고 같은 타겟을 가진 링크를 클릭하면 동일한 탭에 교체해서 열기
q 태그 / quote
• 인용한 링크 등 참조영역 (결과물에 출력되지 않음)
• cite : 저작물 출처 표기
strong 태그, b 태그
• 폰트를 굵게 함
• strong 태그 : 중요성 강조 요소 / b 태그 : 중요성, 관련성 없이 다른 글자와 구분을 목적으로 사용 되는 요소
em 태그, i 태그
• 폰트를 기울임
• em 태그 : 강조 요소 / i 태그 : 다른 글자와 구분되는 기술적 용어, 관용구, 생각 등에 사용
• i 태그는 아이콘에 자주쓰여서 기울임으로는 em을 쓰는게 좋으나 css에서 기울여도 됨
• awsome font 사용 시 i 태그 대신에 span 태그로 사용해도 됨
'FE > HTML_CSS_JavaScript' 카테고리의 다른 글
Sass vs Tailwind CSS (0) | 2023.11.30 |
---|---|
HTML 2 (1) | 2023.10.30 |
마크업 언어 (0) | 2023.10.27 |
Git Command (0) | 2023.10.27 |
CLI (Command Line Interface) (0) | 2023.10.25 |