🤯 오늘 수업 들을 때 내 모습..
그래도 복습하니까 이해 되어 다행이다.
복습의 중요성을 완전 완전 완전 느낌!!!!!

---

📖 Embedded content

📌 <img>

• 닫는 태그 없음 !
• 인라인 요소
  
  

src(source)

• <img> 태그의 필수 속성값
• 브라우저에게 이미지 파일의 위치 및 파일명을 알려줌

  절대경로 /
  상대경로 ./ 현재 폴더와 같은 폴더 내
  상대경로 ../ 현재 폴더 밖

alt(alternative text)

• 이미지가 보이지 않을 때 alt 속성에 적힌 텍스트를 이미지 대신 보여 줌
• 스크린 리더기에서 읽어주는 캡션
  - figcaption은 웹상에서 보이게 넣어주는 캡션
• 검색엔진최적화(SEO)에 도움을 줌

🔎

• 스크린 리더기가 읽을 필요 없는 이미지는 alt=""으로 지정하면 읽지 않음!
• alt값 넣지 않으면 파일명을 읽으니 빈값이라도 필수로 넣어주자!

반응형 이미지를 위한 srcset

• 여러 해상도에 대응하여 브라우저가 최상의 이미지 로딩할 수 있음
• 인터넷 익스플로러에선 사용 불가

1 ) x 서술자

• 화소의 밀도(pixel density)를 나타냄
• 동일한 면적에 들어가는 화소의 수를 의미
• 갯수 많을수록 더 높은 해상도

<img
width="200px"
srcset="img/logo_1.png 2x,
        img/logo_2.png 3x"
src="a.png"
alt="test">

2 ) W서술자

<img
width="200px"
srcset="img/logo_1.png 300w,
        img/logo_2.png 600w,
        img/logo_3.png 700w"
src="a.jpg"
alt="test">

원본사이즈를 알려주는 거지 웹페이지에 렌더링하는 건 200px이야 ~
웹 최적화- 얼마나 빨리 웹 브라우저에 로딩되는지 '이미지'사이즈가 중요

• x서술자, w서술자는 같이 사용하지 않음.

3 ) sizes 속성

• 반응형 웹에서 사용 가능
• 뷰포트 조건에 따라 이미지가 차지하게 될 사이즈를 브라우저에게 알려줌

<img
srcset="img/logo_3.png 700w,
        img/logo_2.png 600w,
		img/logo_1.png 300w"
sizes="(min-width: 960px) 250px,
	   (min-width: 620px) 150px,
		300px"
src="a.png"
alt="test">
<!--뷰포트의 최소 넓이가 960px 이상이면 이미지를 250px로 만들어주세요 
뷰포트의 최소 넓이가 620px 이상이면 이미지를 150px로 만들어주세요 -->

• srcset 속성은 sizes 속성 없어도 잘 동작하지만,
  웹 표준 준수 위해 srcset 속성 사용하면 그에 맞는 sizes 속성도 명시해야 함.
• css스타일이 sizes 속성에 우선함.

---

📌 <picture>

• <source> 요소와 <img> 요소 통해 조건에 맞는 이미지를 보여주는 요소.
• <img> 요소의 srcset 이 화면에 따른 이미지의 크기를 조절한다면
  <picture> 요소는 이미지 포맷 자체를 변경

media 속성

<picture>
    <source srcset="babies_large.jpeg" media="(min-width:960px)">
    <source srcset="babies.jpeg" media="(min-width:620px)">
    <img src="babies_small.jpeg" alt="귀여운 아기 팽귄들">
</picture>

• <source> 요소 안의 media 속성 확인 가능
• <picture> 요소는 media 속성의 값을 통해 조건에 알맞는 이미지를 찾음.
• 조건에 맞는 <source> 요소 안의 srcset 속성 값을 찾아
  <img> 태그의 src 에 넣어 화면에 보여줌.
• 때문에<img> 요소가 없다면 이미지가 화면에 나타나지 않음.
  - <picture> 와 <source> 요소 자체는 이미지를 표현하지 않음
  

type 속성

• 이미지 포맷 타입을 브라우저에게 알려줌
• 모든 <source> 요소 이미지 사용이 불가능하면 <img> 요소 이미지 랜더링
• 때문에 WebP나 AVIF 와 같은 최신 포맷의 이미지를 지원하고 싶다면 크로스브라우징을 위해 <picture> 요소와 함께 사용 하는것이 좋음.

  🔎 점진적 향상 기법 ?
  기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고,
  최신 기술을 사용할 수 있는 환경에서는 최신 기술을 제공하여
  더 나은 사용자 경험을 제공할 수 있는 방법

---

유명한 사이트가 div 남발인 이유..
브라우저 호환성 때문에 html5 이상 태그를 마음대로 쓸 수 없음
예전 브라우저 사용자도 무리없이 사용할 수 있도록 코딩한 것