04. HTML 의미론
header와 footer
<header>
도입부, 헤딩, 헤딩 그룹, 목차, 검색, 로고, GNB 영역(Global Navigation Bar)<footer>
저자, 저작권, 연락처, 관련 문서
=> 한 문서에 한번만 써야 하는 것이 아님
section과 article
- ```````
제목이 있는 주제별 콘텐츠 그룹 또는 응용 프로그램 영역<article>
섹션 요소 중 독립적으로 배포 가능한 완결형 콘텐츠
뉴스, 기사, 블로그, 신문, 사용자의 댓글 등
=> h 태그를 사용하는 것을 권장
=> header와 footer를 사용하는 것은 선택사항
nav
- ```````
현재 사이트 또는 현재 페이지 일부를 링크하고 있는 주요 탐색 섹션
사이트 또는 페이지의 주요 탐색 경로에 해당하지 않는 빵부스러기 링크, 풋터의 약관, 저작권 고지 같은 링크는 nav 요소로 적절하지 않음
=> h 태그를 사용하는 것을 권장
aside
<aside>
페이지의 주된 내용과 관련이 약해서 구분할 필요가 있는 섹션
부수적인 콘텐츠, 관련 기사, 광고 등의 내용 포함
=> h 태그를 사용하는 것을 권장
main
<main>
문서의 핵심 주제 또는 애플리케이션의 핵심 기능과 직접 관련 있는 콘텐츠 영역을 의미
페이지마다 반복되지 않는 내용을 포함해야 함
섹셔닝 콘텐츠가 아니므로 h 태그, header, footer 요소의 범위와 관련 없음
하나의 페이지 안에서 하나의 main 요소만 표시 가능
섹셔닝 관련 요소의 자식이 될 수 없음
body, div 요소를 제외한 다른 요소의 자손이 될 수 없음
dialog
<dialog>
사용자와 상호 작용하는 응용프로그램(대화상자) 의미
open 속성을 추가하면 대화상자가 활성화되고 사용자가 대화 상자를 통해 상호작용 가능
보통 입력 양식과 콘트롤을 포함, 닫기 기능 제공
키보드 초점이 dialog 요소 내부에서 순환하도록 처리해야 함
figure과 figcaption
<figure>,<figcaption>
문서의 주된 흐름을 위해 참조하는(부록으로 옮겨도 괜찮은) 독립적인 완결형 요소로서 이미지, 도표, 코드 등의 내용물과 설명(figcaption)을 포함
선택적으로 처음 또는 마지막에 figcaption 요소를 자식 요소로 포함 가능(단, 한번만 포함 가능)
mark
<mark>
독자의 주의를 끌기 위한 하이라이트
현재 독자의 행위나 관심에 따라 강조한 것
검색 결과 목록에서 사용자가 입력한 키워드
Etc
<address>
가까운 조상 article 또는 body 요소를 범위로 하는 관련 연락처 정보, 우편 정보를 의미하는 것이 아님에 유의
흔히 footer 요소에 나타남
p의 자손이 될 수 없음<ins>와<del>
ins는 추가한 내용을 의미
del은 삭제한 내용을 의미
콘텐츠 모델이 투명해서 어떤 요소라도 포함 가능
단, 여러 단락을 한꺼번에 포함하는 것은 부적절<progress>
계산 또는 사용자 과업의 진척도를 의미
원격 호스트의 응답을 기다려야 하는 경우도 있을 수 있기 때문에 진척도는 정확하지 않을 수 있음
낡은 브라우저를 위해 value값과 별도로 콘텐츠를 제공하는 것이 좋음
05. 상호작용 콘텐츠의 올바른 용법
Interactive content
사용자와 상호 작용할 수 있는 콘텐츠
입력 장치(키보드, 마우스)로 조작 가능
a와 button
<a>와<button>
같은 외형을 지닌 경우라도 a, button 요소를 구별해서 사용
실행 결과를 가리킬 수 있는 url이 있으면 a
(대화상자를 참조하는 경우에도 a)
참조할 url이 없으면 button
커서 모양이 다름
=> 버튼 태그에 손 모양 커서 사용은 적절하지 않음
(손 모양 커서는 링크를 의미)
<a target>
target="_blank"를 사용해서 a 태그를 클릭했을 때 새 링크로 열게 두었을 때,
자식 페이지가 부모 페이지에 권한을 얻게 되어 탭 가로채기(tabnabbing) 공격에 노출 됨
- 해결방법
rel="noopener noreferrer" 속성 추가
이는 자식 페이지가 부모 페이지를 제어하는 것을 불가능하게 만듬
(noreferrer은 noopener을 지원하지 않는 낡은 브라우저를 위해 표기)
최신 브라우저에서는 blank를 적용하면 암시적으로 noopener을 암시적으로 적용
위의 해결 방법은 낡은 브라우저를 위함
<details>와 <summary>
부모 자식 관계
열림 상태일 때 정보를 표시하는 위젯
details 요소에 open 속성을 넣으면 열린 상태로 표시
summary 요소는 drtails 요소의 나머지 부분에 대한 요약, 캡션, 범례를 의미
숨겨진 폼을 드러내기도
input 속성
<input type>
다양한 쓰임의 type을 아는 것이 input 활용의 모든 것
search: 검색창
tel: 전화번호 입력창
url: url 입력을 편하게 함
email: email 입력을 편하게 함
date: 날짜 입력을 편하게 함(datatime-local)
month, week, time, number,,
range, color,,
required: 사용자가 인풋을 작성하지 않으면 경고를 줌
placeholder: 입력창에 있는 초기값
```````
다른 콘트롤을 위해 미리 정의된 옵션 세트를 의미
숨겨진 상태로 표시
06. 이미지 마크업 최적화
이미지 포맷 비교
=> tif < avif < webp < jpg
picture, source, img
- 지원하는 이미지 포맷에 따라 알맞은 이미지를 내려줌
<picture> <source srcset="x.avif" type="image/avif> <source srcset="x.webp" type="image/webp> <img src="x.jpg" alt> </picture>
<picture>요소 [media] 분기<picture> <source srcset="small.webp" media="(max-width:960px)"> <img src="large.webp" alt> </picture>
<picture>,<img>요소 resolution 분기=> 레티나 디스플레이 해상도 환경에 맞는 코드<picture> <source srcset="2x.webp 2x, 1x.webp" type="image/webp"> <img srcset="2x.webp 2x" src="1x.jpg" alt> </picture>
<img>요소의 성능<img loading="lazy" // 로딩 지연 decoding="async" // 디코딩 지연
