오늘의 키워드📌

---

• Embedded content
  • img
  • src
  • alt
  • srcset
  • picture
    
    
• 점진적 향상기법

HTML CSS 는 '모를 때마다 찾아보면서 하면 되지~' 라고 생각했던 지난 날들.. 반성하자.

1. Embedded content

---

Embedded content

다른 소스를 가져오거나 삽입시키는 컨텐츠와 관련된 요소.

img

<img> 태그는 html 페이지에 이미지를 삽입할 때 사용하는 태그다.

src(source)

<img> 태그는 src 라는 필수 속성을 가진다. src 속성은 브라우저에게 이미지 파일의 위치 및 파일명을 알려준다. 이때 이미지 파일 위치인 경로는 절대경로, 상대경로 2가지로 나뉜다.

alt(alternative text)

alt 속성은 이미지가 보이지 않을 때 alt 속성에 적힌 텍스트를 이미지 대신 보여준다.
스크린리더와 같은 접근성을 위한 프로그램에 정보를 제공하기 위한 용도로 사용되며, 브라우저에 이미지에 대한 정보를 전달함으로써 SEO(Search Engine Optimization)에 도움을 주기도 한다.

💭
alt 속성을 통해 브라우저에 이미지에 대한 정보를 전달하는 것은 알고 있었으나, 스크린리더를 통한 접근성이나 SEO에 도움을 주는 것은 몰랐다!

srcset

srcset 속성은 이미지 소스의 세트라는 의미를 지니며 브라우저에게 이미지 선택권을 위임하는 속성이다.
srcset 속성을 사용하면 여러 해상도에 대응하여 브라우저가 최상의 이미지를 로딩하는데 도움을 줄 수 있다. srcset 속성은 다양한 크기를 가지는 동일 이미지를 최소 2개 이상 사용할 때 사용한다.

picture

<picture> 요소는 <source> 요소와 <img> 요소를 통해 각기 다른 디스플레이나 디바이스에 따라 조건에 맞는 이미지를 보여주는 요소다. <img> 요소의 srcset 이 화면에 따른 이미지의 크기를 조절한다면 <picture> 요소는 이미지 포맷 자체를 변경 할 수 있다.

2. 점진적 향상 기법

---

크로스 브라우징 기법을 점진적 향상 기법이라고 한다.

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

몰랐지만 알게된 점

---

공부하면 할 수록 몰랐던 다양한 정보들과 새로운 사실들을 접하게 되는 거 같다.
정말 아는만큼 보이는 분야인 것 같다. 그리고 디테일들이 너무나도 중요한 거 같다. 무지함의 탈출은 노력순!

이미지 포맷의 종류

• GIF : 애니메이션 처리 가능
• JPG/JPEG : 화소가 높고, 용량도 적지만 투명 처리 불가능
• PNG : 웬만한 컬러 표현 가능하고 투명 처리 가능하지만 용량이 큼

위 3가지는 알고 있었으나 아래 3가지는 몰랐다.

• SVG : SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링 가능
• WebP : JPEG 이미지에 비해 용량이 70% 수준으로 낮지만 더 뛰어난 색상을 지원하고 투명 처리와 애니메이션 표현도 가능
• AVIF : WebP 처럼 뛰어난 색상 표현, 애니메이션과 투명 처리 지원하며 JPEG 이미지의 50% 수준인 용량을 자랑하는 차세대 이미지 포맷. 차세대 이미지 포맷인 만큼 지원하지 않는 브라우저가 많다.

점진적 향상기법

보다 더 나은 사용자 경험을 제공하기 위해 이렇게나 다양한 방법들이 있다니!

alt 속성의 중요성

접근성과 정보 전달의 힘을 알게 되었다. 다시는 alt 를 무시하지 말자.

참고

---

• heropy님의 블로그 - HTML IMG의 srcset과 sizes 속성
• 구글의 페이지 랭크 알고리즘