Embedded Contents? 🧐

Embedded Contents는 뭘까? Embedded는 내장하다라는 뜻이 있는 것으로 아는데 '콘텐츠를 내장하는 요소'라고 생각하면 될 것 같다. 가면 갈수록 모르는 명칭이 생겨 혼란스럽지만 자연스럽게 알게 되겠지라는 여유아닌 여유로 정리를 해보도록 하겠다!

웹 접근성 ♿️

"웹 접근성"이란 말그대로 "웹에 접근할 수 있는 것"을 말하는데 이는 비장애인은 웹에 접근하는데 문제가 없지만 "시각장애인"이나 "몸이 불편한 장애"인 같은 경우는 웹에 접근하는데 어려움을 겪을 수 있다. 그래서 "웹 접근성을 지킨다."라는 말은 간단하게 "비장애인/장애인 누구나 웹을 이용하는데 불편함이 없게 고려하여 구성하는 것"이라고 이해하면 될 것 같다!

세상은 참 아름다운 것 같다 ☀️

<img> 🌃

<img>
: HTML 페이지에 이미지를 삽입할 때 사용하는 태그이다. 특이하게 닫는 태그가 없어 이미지가 아닌 다른 콘텐츠(텍스트)를 추가할 수가 없다.

<img>태그는 반드시 src(source의 약자)와 alt라는 속성을 반드시 입력을 해야한다.
src의 속성값으로는 이미지 파일이 있는 곳으로 경로를 입력해야하는데 '절대 경로'와 '상대 경로' 중 편한 것으로 입력을 하면 된다.

alt(alternative의 약자)는 오류나 경로의 변경으로 인해 이미지가 출력되지 않는 경우 이미지 대신 화면에 표시되는 '대체 텍스트'를 생성한다. 또한 꼭 alt 속성을 이용해야하는 이유 중 가장 중요한 것은 "웹 접근성"과 이미지의 정보 전달에도 영향을 미치기 때문에 SEO에도 긍정적인 영향을 준다.

언젠가 "웹 접근성"과 "SEO"에 대해 자세하게 배울 날이 오겠지..?

  <!-- 이미지가 정상 출력 -->
    <img src="/images/peng.png" alt="귀여운 펭귄 두마리">
  <!-- 이미지가 출력되지 않을 때 -->
    <img src="images/peng1.png" alt="귀여운 펭귄 두마리">

alt를 사용하지 않아야 할 때가 있다? ⭐️⭐️

Q. 모든 이미지에 alt의 값이 필요할까?

A. 아니다. 모든 이미지에 alt의 값이 들어있다면 스크린리더를 이용하는 장애인들은 혼란스러울 수 있다.
고로 디자인적 요소로 쓰이는 이미지나 아이콘 등은 alt의 값을 넣지 않아도 된다.
디자인적 이미지에 alt의 속성은 넣되 값을 비워두면 불필요한 설명을 스크린리더가 읽지않아서 스크린리더를 이용하는 장애인들에게 내용을 이해하는데 좋다.

성능 최적화를 위한 <img>의 srcset속성

srcset 속성은 브라우저 내에서 자동으로 최적의 이미지를 선택해서 출력해준다. 다양한 크기를 가지는 동일 이미지를 최소 2개 이상 사용할 때 사용한다.

srcset 속성의 값으로 "x서술자"와 "w서술자"가 있다.
일단 반드시 알아야 하는 것은 이 두 서술자는 함께 사용할 수 없으며
srcset은 반드시 src 속성과 같이 사용해야한다. srcset이 동작이 안되면 src를 내보내는 백업 개념으로!

• "x서술자"의 경우 화소의 밀도를 의미한다. 디바이스의 화소 밀도(1px안의 화소의 밀집도)에 따라 이미지를 로딩하도록 브라우저에 알려준다.

<img width="200px" srcset="images/peng.png 2x, images/peng.png 3x"src="images/peng.png" alt="귀여운 펭귄 두마리">

위의 x서술자를 해석하면 images/peng.png 2x는 "1px 안에 2개의 화소"라는 의미이며, images/peng.png 3x는 "1px 안에 3개의 화소"라는 의미이다.

• "w서술자"의 경우 원본 이미지의 넓이가 어느정도의 수치에 있으면 브라우저가 최적의 이미지를 로딩하도록 한다. 특이하게 px이 아닌 w단위를 쓴다.

<img width="200px" srcset="images/peng.png 300w, images/peng.png 600w, images/peng.png 900w"src="images/peng.png" alt="귀여운 펭귄 두마리">

그리고 다른 속성인 sizes는 뷰포트의 넓이에 따라 이미지의 넓이를 조절하는데 sizes는 css와 충돌할 우려가 있으니 주의깊게 고려해야한다. 왜냐하면 sizes가 우선 적용이 되기 때문이다.

  <img width="200px" srcset="images/peng.png 300w, images/peng.png 600w, images/peng.png 900w" sizes="(min-width: 960px) 250px, (min-width: 620px) 150px, 300px" src="images/peng.png" alt="귀여운 펭귄 두마리">

위의 sizes 속성을 해석하면 뷰포트의 최소 넓이가 960일때 이미지 넓이를 250px로 맞추고, 620px일 때 이미지 넓이를 150px를 맞추고, 기본은 300px로 맞춘다라는 의미이다.

그리고 반드시 알아둬야 하는 개념은

x서술자, w서술자, sizes는 동일한 이미지이지만 사이즈가 바뀌는 개념이다!

<picture> 🎆

<picture>
: <source>와 <img>를 통해 각기 다른 디스플레이 혹은 디바이스에 따라 조건에 맞는 이미지를 보여주는 태그이다.

<picture>
    <source srcset="images/peng.png" media="(min-width:960px)">
    <source srcset="images/rabbit_300.png" media="(min-width:620px)">
    <img src="images/peng.png" alt="귀여운 아기 팽귄들">
</picture>

<picture>에서 사용하는 방식은 "점진적 향상 기법"이라고 한다.

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

여기서 예전 기술 환경에서 동작할 수 있는 기능이란 <picture> 태그 안의 <img>태그를 의미하고,
최신 기술은 <source>태그를 통해 브라우저가 적합한 이미지를 결정하게 하는 것이라고 생각하면 된다.

<picture>와 같이 사용되는 <source>

<source> 태그는 <picture> 태그에서 최적의 이미지를 찾을 때 보는 후보라고 생각하면 되지 않을까 싶다. 왜냐하면 브라우저가 조건에 맞는 최고의 적합한 이미지를 선택해서 이미지를 보여주기 때문이다.

<source> 태그도 속성을 가지는데 media라는 속성이다.

media는 속성값의 조건에 맞춰서 이미지 중 하나를 선택해서 내부 img의 src에 삽입하여 출력한다.

결과는 <source>가 아닌 <img>가 이미지를 출력한다고 알아두자.
또한 <source>에서 media의 조건이 부합하면 이미지를 <img>의 태그를 이용하여 출력하는데 이는 "이미지의 크기"를 조절하는 것이 아닌 아예 새로운 사이즈의 이미지로 "교체"한다고 생각해야한다.

<source> 태그는 다른 속성도 가지는데 type라는 속성이다.
이는 브라우저가 지원하는 포맷에 따라 이미지를 출력한다.

<picture>
    <source srcset="babies.webp" type="image/webp">
    <source srcset="babies.avif" type="image/avif">
    <img src="babies.jpeg" alt="귀여운 아기 팽귄들">
  </picture>

type의 속성값인 이미지 포맷 "webp"가 지원하지 않고 "avif" 포맷이 지원이 된다면 그 줄의 이미지 출력하고, 만약 Source의 포맷을 모두 지원하지않으면 내부 img의 이미지를 출력한다.

마지막으로 <img>와 <picture> 중 어떤 것을 사용해야하는지 생각했을 것이다.
왜냐하면 <div>와 <section>처럼 역할이 동일하기 때문에 혼란스러울 수 있다.
그래서 고민해야하는 부분은 이것이다.

img태그와 picture태그 중 어떤게 효율적인지 생각하고 태그 선택해야한다.
picture를 사용할떄는 포멧을 바꾸고 싶을때 사용하고 나머지는 img만 사용해도 무방하다.

오늘의 TIL을 마치며..

이 게시물을 작성하면서도 "정말 내가 안써본 태그가 많구나..?"라는 생각만 들었다. 그리고 아직 <img> 태그의 "x서술자", "w서술자", "sizes"는 제대로 이해하지 못한 것 같아 공부를 조금 더 해야할 것 같다.
오늘도 불태우는 새벽이다..🔥

아! 오늘 면접문제로 나올 법한 것을 가르쳐주셨는데

1. 점진적 향상 기법
2. 이미지 포맷에 대한 설명

이 두가지를 알아두는 것이 면접 문제를 대답하는데 좋다고 하니 찾아보고 정리를 해봐야겠다!