임베디드 요소
- 외부에 소스를 불러와서 웹페이지에 삽입하는 요소
image
- src(source) 속성을 필수로 사용해야함, 외부의 url이나 파일이 위치한 경로
- 절대 경로 : 어떤 위치에서 파일을 부르던 간에 동일한 이미지를 보여줌
- 상대 경로 : 현재 위치 중심, 내가 있는 위치에서 이미지가 있는 위치를 가리킬 때
- arl(arlternative 대체) 속성을 이용해 이미지에 대한 설명을 남겨 스크린 리더가 이미지를 설명할 수 있음 또는 이미지 주소가 잘못 작성되어 있을 경우 등 이미지가 깨질 때 원래 어떤 이미지가 있었는지 설명
<body>
<!-- 절대경로 -->
<img src="https://">
<!-- 상대경로 -->
<img
src="image/polarbar.jpg"
alt="북극곰"
width="200"
/>
</body>
웹에서 사용하는 이미지 유형
| abbreviation | type | file extension | summary |
| JPEG | image/jpeg | .jpg .jpeg .jfif .pjpeg . pjp | 정지 이미지의 손실 압축에 적합하다(가장 많이 사용) |
| PNG | image/png | .png | 로고 등 투명도가 필요할 경우 |
| GIF | image/gif | .gif | 여러 장의 이미지로 애니메이션 표현 가능 지원하는 색이 적어 화질이 깨져보임 |
| WEBP | image/webp | .webp | 구글이 만든 이미지 포맷, 품질, 압축률 등 우수하지만 지원 브라우저가 제한적임 |
| SVG | image/svg+xml | .svg | 아이콘 등 다양한 크기로 정확하게 그려야 할 경우 점과 점을 잇는 방식으로 이미지가 깨지지 않음 |
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
srcset
- 반응형 이미지(스크린 크기에 따라 맞는 이미지)를 제공해 속도를 빠르게 하기 위함
- w : 너비 서술자, x 밀도 서술자
src
이미지의 URL. 필수 사항입니다. srcset을 지원하는 브라우저의 srcset에 픽셀 밀도 1x와 w 서술자가 없는 경우, src는 픽셀 밀도 1x의 이미지 후보로 취급합니다.
srcset
사용자 에이전트가 사용할 수 있는 이미지 소스의 후보. 쉼표로 구분하는 한 개 이상의 문자열 목록입니다. 각각의 문자열은 다음 구성요소로 이루어집니다.이미지의 URL.선택적으로, 공백과 함께 그 뒤를 잇는...너비 서술자(양의 정수와 바로 뒤의 'w' 문자). 너비 서술자의 값을 sizes 특성으로 지정한 소스 크기로 나눠서 픽셀 밀도를 구합니다.픽셀 밀도 서술자(양의 실수와 바로 뒤의 'x' 문자).
출처 : mozilla
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="요정 옷을 입은 엘바">
sizes
- 화면 크기마다 이미지의 값을 지정함
기기 너비를 확인한다.sizes 목록에서 가장 먼저 참이 되는 미디어 조건문을 확인한다.해당 미디어 쿼리가 제공하는 슬롯 크기를 확인한다.해당 슬롯 크기에 가장 근접하게 맞는 srcset에 연결된 이미지를 불러온다.
- mid-width : 화면 너비가 넓은 사람들 / max-width : 화면 너비가 좁은 사람들
<body>
<img
src="image/large.png"
sizes= "(min-width: 600px 600px,
(min-width: 450px) 450px,
300px"
alt="responxive images"
/>
</body>
video
- autoplay : 자동으로 동영상을 재생시킨다. 다만 다시 페이지에 방문하면 재생이 되지 않기 때문에 mute 속성을 이용하면 소리없이 다시 재생된다. (소리가 갑자기 나오면 유저 경험이 좋지 않기 때문에)
- controls : 소리를 조절하거나 타임 라인이 보이거나 일시 정지 등을 할 수 있음
- src 또는 video 내의 source : 동영상 주소 명시
- 동영상을 브라우저가 지원하지 않을 때 안내 메시지가 나타남
- poster : 동영상 재생 전에 보이는 프레임 ex) 썸네일
- loof : 자동 반복 재생
<video src="videofile.ogg" autoplay poster="posterimage.jpg" controls>
Sorry, your browser doesn't support embedded videos,
but don't worry, you can <a href="videofile.ogg">download it</a>
and watch it with your favorite video player!
</video>
audio
- video의 속성과 거의 동일
- 비디오나 오디오는 figure로 묶어서 사용함
iframe
- 주로 지도 등을 띄울 때 사용함
- inline frame을 허용한 url만 띄울 수 있음
- 구글에서 검색 복사 해서 사용
<div style="width: 100%">
<iframe
width="100%" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="https://maps.google.com/maps?width=100%25&height=600&hl=en&q=1%20Grafton%20Street,%20Dublin,%20Ireland+(My%20Business%20Name)&t=&z=14&ie=UTF8&iwloc=B&output=embed">
<a href="https://www.gps.ie/farm-gps/">farm gps</a>
</iframe>
</div>
'html,css 기초' 카테고리의 다른 글
| html 8 : 메타데이터 title, meta, link, MIME, style, script (0) | 2022.07.10 |
|---|---|
| html 7 : 폼 form, action, method, label, fieldset, legend, input 속성 (0) | 2022.07.10 |
| html 5 : 목록과 표 ol, ul, li, dl, dt, dd, div, table, tr, th, td (0) | 2022.07.05 |
| html 4 : 구조 div, span, semantic web, nav, aside (0) | 2022.07.05 |
| html 3 : 텍스트 b, strong, i, em, sup, sub, del, ins, cite, mark (0) | 2022.07.04 |
댓글