📖review

✅Text-level semantics

<br> : 줄바꿈
<wbr> : style { white-space : nowrap; }일때 문장 끝에 쓰면 줄바꿈
style { word-break: keep-all; } -> 단어 단위로 떨어짐 (KCJ 언어는 한 글자씩 떨어짐)

<a> : 하이퍼 텍스트(HT) 링크를 만들 때 사용한다.
href(참조할) 속성을 통해 경로를 지정한다.
❕ sections grouping content 요소를 자식으로 허용한다.
❕ <a> <button> 태그를 자식으로 두지 않는다.
target="_blank" : 새로운 탭으로 열린다.

해쉬링크 (아이디 필요)
-> 페이지 내의 이동 ex)목차

a href="#three"

<abbr title=" "> : 준말, 약자를 나타낼때 사용, 툴팁으로 나타난다.

✅Embedded content

✔<img> : 이미지 삽입 (인라인 요소)

<src> : 파일의 위치 및 파일명
/ -> 절대경로 (본래 경로)
./ -> 상대경로 (폴더 안 현재 위치)

<alt>

• 대체 텍스트
• 스크린리더, 브라우저에 정보 전달 SEO(Search Engine Optimization)에 도움을 줌
• alt값이 없으면 file명 읽음 -> 장식 이미지는 alt=" "로 지정

<srcset> : 반응형 브라우저, 다양한 크기의 동일 이미지 2개 이상 사용할 때, IE에서 X

• x서술자 : 화소의 밀도 (1pixel 안에 화소의 개수)
  ex) 2x, 3x
• w서술자 : 원본 이미지의 넓이
  ex) 300w, 600w, 700w
• sizes : 뷰포트의 조건에 따라 이미지가 차지할 사이즈
  ex) (min-width: 960px) 250px, (min-width:620px) 150px, 300px
  sizes속성보다 CSS가 우선

✔<picture> : 이미지 포맷 자체를 변경하여 이미지를 보여준다.

• media : <source>요소 안의 속성
  조건에 알맞는 이미지를 찾아서 <img>태그의 src에 넣어 화면에 보여준다.
  (<img>태그가 없으면 화면에 나타나지 않는다. )

<picture>
  <source srcset="images/rabbit_500.png" media="(min-width:960px)">
  <source srcset="images/rabbit_300.png" media="(min-width:640px)">
  <img src="images/rabbit_150.png" alt="귀여운 토끼">
</picture>

• type : 이미지의 포맷 타입을 알려준다.
  위에서부터 브라우저가 지원하는 포맷인지 탐색하며 <source>요소의 사용이 불가능하면 최후에 <img>요소 이미지 랜더링

<picture>
  <source srcset="rabbit.webp" type="image/webp">
  <source srcset="rabbit.avif" type="image/avif">
  <img src="rabbit.jpeg" alt="귀여운 토끼">
</picture>

⭐이미지 포맷 종류
GIF, JPG/JPEG, PNG, SVG(회사로고), WebP(만능), AVIF

⭐점진적 향상 기법
-기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고, 최신 기술을 제공하는 기법
-더 나은 사용자 경험 제공
-애자일 방법론, 트레이닝에서 중요한 요소

<cite> : 인용, 출처

웹표준에 맞는지 알아보는 사이트
https://validator.w3.org/#validate_by_input

2022/03/30