1.<img>
<img src="img/a.jpg" alt="이미지 없음"> <img src="img/a.jpg" alt=""> <img src="img/a.jpg" alt="스크린 리더가 읽어야 하는 문구">```
1) scr(source) 설정
이미지 파일 경로를 작성하는 곳
shift+space bar를 누르면 쉽게 경로 찾을 수 있음
2) alt(alternative text) 설정
(역할)
- 이미지가 보이지 않을 때 텍스트 표시
- 스크린리더가 읽는 부분
-SEO(Search Engine Optimization) 활용
❗❗ 로고 등 의미가 없는 이미지라면 alt=""로 설정 지향(alt 남발X, 하지만 alt는 꼭 항상 지정해줘야 함)
3) 반응형 이미지 srcset
여러 이미지를 제시하면, 브라우저가 적절한 이미지를 선택하도록 설정
X서술자
디바이스 화소의 밀도(pixel dentisty)에 따라 다른 이미 로딩하도록 브라우저에 알림
화소 밀도는 개발자 콘솔창에서 window.devicePixelRatio 입력하면 확인 가능
📌 해석: 1px에 2화소인 경우 logo_1.png/ 3화소면 logo_2.png 보여줌
<img width="200px" srcset="img/logo_1.png 2x, img/logo_2.png 3x" src="a.png" alt="test"> ``` <br>
w서술자
원본 이비지 넓이를 각각 300px,500px,700px임을 px > w로 표시해서 브라우저에 알려줌
sizes 설정
뷰포트에 따라 이미지가 UI 안에 차지할 사이즈를 브라우저에 알려줌
📌 해석:디스플레이가 960px 이하면 이미지 250px, 620px이상 960px이하면 이미지 150px로 보여짐
<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">``` <br>
🟣 w서술자와 x서술자는 동시 사용 (X)
🟣src속성은 무조건 설정!! srcset은 EI에 적용이 안되기 때문에 src로 보여줘야 함
🟣 srcset 속성 사용시 꼭 sizes 속성 명시해야 웹표준 준수
🟣 sizes속성의 경우 css의 sizes속성이 우선하기 때문에 협업 과정에서 미리 규칙 논의 필요
🟣 자세한 내용 참조: https://velog.io/@heumheum2/srcset-sizes
2. <picture>
<picture>는 <source>와 <img> 중 각 디스플레이에 맞게 이미지를 골라서 보여줌
srcset는 화면에 따른 이미지 크기 조절/ <picture>는 이미지 자체도 변경할 수 있음
media
❗❗ <picture>은 media 속성에 따라 <source>의 이미지를 <img>태그의 src요소에 넣어주는 형식이기 때문에 꼭 <img src="">를 넣기
<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>```
type
source 포맷을 위에서부터 차례대로 적용해서 브라우저에 맞는 이미지 포맷 선택
img는 최후의 수단으로 선택됨
img태그에는 사용하지 않음
💜점진적 향상 기법💜
(호환되는 이미지 타입으로 선택)
기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고, 최신 기술을 사용할 수 있는 환경에서는 최신 기술을 제공하여 더 나은 사용자 경험을 제공할 수 있는 방법
<picture> <source srcset="babies.webp" type="image/webp"> <source srcset="babies.avif" type="image/avif"> <img src="babies.jpeg" alt="귀여운 아기 팽귄들"> </picture>
💜이미지 포맷💜
3. <iframe>
html안에 또 다른 html을 넣을 때 사용
height, weight로 설정 필요(디폴트 값: height는 150px, width는 300px)
보통 영상, youtube 영상 불러올 때 사용
iframe은 정보 탈취 수단이 될 가능성 높음(백도어 만들 여지를 줌)
frameborder: 테두리(0~1), CSS로 대체
allow: iframe에 허용할 기능들 지정
allowfullscreen: 전체화면 지원
❗ autoplay: 설정 지양(설정 시, mute 설정) ❗
- 사용자에게 갑자기 큰 소리로 불쾌감을 줄 수 있고, 트래픽 과부하 발생 쉬움
-iframe , audio, video에서 주의해야 함
<iframe width="1280" height="720" src="https://www.youtube.com/embed/-iuX3r8PSzU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>
4. <audio>
controls: 음악 파일 제어 컨트롤 표시
autoplay: 자동 재생(크롬 등 브라우저 정책 상 실행 X > js로 대체 사용 중)
loop:음악 반복
<audio>는 <source>를 자식 태그로도 설정 가능
<audio src="폴더/파일명" controls autoplay loop ></audio>
<audio controls>
<source src="flow.ogg" type="audio/ogg">
<source src="flow.mp3" type="audio/mpeg">
</audio> 5.<video>
동영상 재생 태그
[preload 설정]
- none: 미리 로딩 X, 트래픽 최소화
- metadat: 미리 로딩 X, 메타데이터는 미리 가져옴(ex-영상 길이)
- auto: 비디오 미리 로딩
source로 type 설정 가능(브라우저가 지원하는 적절한 포맷 지정)
<video src="batman.mp4" controls autoplay loop width="450" height="300"></video>
<video controls poster="batman.jpeg" preload="auto" width="450" height="300">
<source src="batman.mp4" type="video/mp4">
<source src="batman.ogv" type="video/ogg">
<source src="batman.webm" type="video/webm">
<track kind="subtitles" src="foo.en.vtt" srclang="ko" label="batman">
</video>
❗취업 꿀팁❗
1) 브라우저 테스트! 면접에서도 홈페이지 오류 찾아서 제안한다면 완전 개꿀(크로스 브라우징)
2. 지원할 회사 홈페이지 사용은 당연히 기본
3. 이미지 포맷 종류 암기하기(수업 자료에 나온 것만 OK)
