TIL - Embedded content (1)
🤯 오늘 수업 들을 때 내 모습..
그래도 복습하니까 이해 되어 다행이다.
복습의 중요성을 완전 완전 완전 느낌!!!!!
📖 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>
요소와 함께 사용 하는것이 좋음.
🔎 점진적 향상 기법 ?
기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고,
최신 기술을 사용할 수 있는 환경에서는 최신 기술을 제공하여
더 나은 사용자 경험을 제공할 수 있는 방법
<img>
<img>
태그의 필수 속성값 절대경로 /
상대경로 ./ 현재 폴더와 같은 폴더 내
상대경로 ../ 현재 폴더 밖
alt
속성에 적힌 텍스트를 이미지 대신 보여 줌-
figcaption
은 웹상에서 보이게 넣어주는 캡션 🔎
- 스크린 리더기가 읽을 필요 없는 이미지는
alt=""
으로 지정하면 읽지 않음! alt
값 넣지 않으면 파일명을 읽으니 빈값이라도 필수로 넣어주자!
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>
요소는 이미지 포맷 자체를 변경 <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>
요소 자체는 이미지를 표현하지 않음<source>
요소 이미지 사용이 불가능하면 <img>
요소 이미지 랜더링<picture>
요소와 함께 사용 하는것이 좋음.🔎 점진적 향상 기법 ?
기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고,
최신 기술을 사용할 수 있는 환경에서는 최신 기술을 제공하여
더 나은 사용자 경험을 제공할 수 있는 방법
유명한 사이트가 div 남발인 이유..
브라우저 호환성 때문에 html5 이상 태그를 마음대로 쓸 수 없음
예전 브라우저 사용자도 무리없이 사용할 수 있도록 코딩한 것
Author And Source
이 문제에 관하여(TIL - Embedded content (1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@miniso/dd저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)