<img>src (source)alt (alternative text)반응형 이미지를 위한 srcsetx서술자, w서술자, sizes 속성<picture>media 속성type 속성<iframe><audio><video>소스코드
<img>
<img> 태그는 html 페이지에 이미지를 삽입할 때 사용하는 태그입니다. src (source)
<img> 태그는 src라는 필수 속성이 있어야 합니다. src 속성은 브라우저에게 이미지 파일의 위치 및 파일명을 알려줍니다. 큰따옴표 안에 들어가는 경로는 절대경로이거나 상대경로이어야 합니다. alt (alternative text)
alt 속성은 이미지가 보이지 않을 때 alt 속성에 적힌 텍스트를 이미지 대신 보여줍니다. 또한 스크린리더와 같은 접근성을 위한 프로그램에 정보를 제공하기 위한 용도로 사용되며, 브라우저에 이미지에 대한 정보를 전달함으로써 SEO(Search Engine Optimization)에 도움을 주기도 합니다.<img src="img/a.jpg" alt="스크린 리더가 읽어야 하는 문구">
alt 값이 필요하지 않는 경우, 예를 들어
<figure> 요소 안에서 사용되었을 경우 <figcaption> 요소에서 이미지에 대해 설명을 할때는 alt 속성의 값을 비워 둡니다. 이를 통해 스크린 리더가 설명이 필요 없는 이미지임을 인식하고 다음 요소로 넘어가게 합니다.반응형 이미지를 위한 srcset
srcset 속성을 사용하면 여러 해상도에 대응하여 브라우저가 최상의 이미지를 로딩하는데 도움을 줄 수 있습니다. srcset 속성은 다양한 크기를 가지는 동일 이미지를 최소 2개 이상 사용할 때 사용하며, 브라우저에게 이미지의 선택권을 위임하는 속성입니다. x서술자, w서술자, sizes 속성
- x서술자는 화소의 밀도(Pixel density)를 나타냅니다. 디바이스의 화소 밀도에 따른 이미지를 로딩하도록 브라우저에 알려줍니다.
<img width="200px" srcset="img/logo_1.png 2x, img/logo_2.png 3x src="a.jpg" alt="test">
Pixel density : 동일한 면적에 들어가는 화소의 수를 의미합니다. 화소의 갯수가 많을수록 더 높은 해상도의 기기임을 알 수 있습니다.
여러분이 보고있는 화면의 화소 밀도를 알고 싶으시다면 브라우저 api를 이용해서 보실 수 있습니다. 개발자 화면의 콘솔창에서
window.devicePixelRatio 명령어를 입력해보세요.- w서술자는 원본 이미지의 넓이가 차례대로 300px, 600px, 900px 임을 브라우저에게 알려줍니다. px이 아닌 w로 표기하는것에 주의하세요.
<img width="200px" srcset="img/logo_1.png 300w, img/logo_2.png 600w, img/logo_3.png 900w" src="a.jpg" alt="test">
w서술자와 x서술자는 동시에 사용할 수 없습니다. 또한
src 속성을 유지하는 것은 필수입니다. srcset 을 사용할 수 없는 브라우저(Internet Explorer)를 대비해 사용하는 이미지입니다. sizes속성은 뷰포트의 조건에 따라 이미지가 UI안에서 차지하게 될 사이즈를 브라우저에 알려줍니다.
<img width="200px" srcset="img/logo_1.png 300w, img/logo_2.png 600w, img/logo_3.png 700w" sizes="(min-width: 960px) 250px, (min-width: 620px) 150px, 300px" src="a.jpg" alt="test">
브라우저는 우리가 제공한 이미지의 원본 사이즈와 뷰포트에 따른 이미지의 사이즈 정보를 통합해 가장 적절한 이미지를 로딩하게됩니다.
물론
srcset 속성은 sizes 속성이 없다고 해도 잘 동작하겠지만, 웹표준을 준수하기 위해서는 srcset 속성을 사용하면 그에 맞는 sizes 속성도 반드시 명시되어야 합니다.sizes 속성을 사용할 때 주의할 점은 CSS를 통한 이미지의 사이즈를 컨트롤 하는 방법과 충돌 할 수 있다는 점 입니다. (CSS 스타일이 sizes 속성에 우선합니다.) 협업할 때는 사전에 반드시 동료들에게 어떠한 방법으로 반응형 이미지를 처리했는지 공유합시다.<picture>
<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>
media 속성
위의 코드에서
<source> 요소 안의 media 속성을 볼 수 있습니다. <picture> 요소는 media 속성의 값을 통해 조건에 알맞는 이미지를 찾게 됩니다. 조건에 맞는 <source> 요소 안의 srcset 속성 값을 찾아 <img> 태그의 src 에 넣어 화면에 보여주게됩니다. 이러한 구조로 작동하기 때문에 <img> 요소가 없다면 이미지가 화면에 나타나지 않는다는 점에 주의하세요. <picture> 와 <source> 요소 자체는 이미지를 표현하지 않습니다.type 속성
이미지의 포맷 타입을 브라우저에게 알려줍니다.
<picture> <source srcset="babies.webp" type="image/webp"> <source srcset="babies.avif" type="image/avif"> <img src="babies.png" alt="귀여운 아기 팽귄들" type="image/png"> </picture>
위에서부터 차례대로 브라우저가 지원하는 포맷인지 탐색하며 만약 지원하지 않는 포맷이라고 판단되면 다음
<source> 요소로 넘어갑니다. 만약 모든
<source> 요소의 이미지 사용이 불가능하면 최후에 <img> 요소의 이미지를 랜더링 합니다. 때문에 WebP나 AVIF 와 같은 최신 포맷의 이미지를 지원하고 싶다면 크로스브라우징을 위해
<picture> 요소와 함께 사용 하는것이 좋습니다. 이러한 방식의 크로스브라우징 기법을 ‘점진적 향상기법’이라고 합니다.
점진적 향상기법
기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고, 최신 기술을 사용할 수 있는 환경에서는 최신 기술을 제공하여 더 나은 사용자 경험을 제공할 수 있는 방법입니다.
이미지 포맷의 종류
GIF(Graphics Interchange Format) :
256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 듭니다. 투명은 표현 가능하지만 그 정도를 조절하는건 불가능하며, 때문에 그림자 표현도 불가능합니다. 애니메이션 처리가 가능합니다.
JPG/JPEG (Joint Photographic Expert Group image):
매우 화소가 높고, 용량도 적지만 투명처리가 불가능합니다.
PNG (Portable Network Graphics) :
왠만한 컬러는 모두 표현 가능하여 투명 영역을 처리 가능하지만 용량이 큽니다.
SVG (Scalable Vector Graphics) :
SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능합니다. 단점은 이미지가 복잡해질 수록 용량이 늘어납니다. 때문에 주로 단순한 디자인의 로고나 이모지 표현에 많이 사용됩니다.
WebP (Web Picture Format) :
압축률이 좋다고 소문난 JPEG 이미지에 비해 무려 용량은 70% 수준으로 낮지만 더 뛰어난 색상을 지원하는 포맷입니다. 그럼에도 불구하고 PNG 처럼 투명도 표현 가능하며, GIF 처럼 애니메이션 표현도 가능한 만능 포맷입니다.
AVIF (AV1 Image File Format) : WebP 처럼 뛰어난 색상표현, 애니메이션 지원, 투명도 표현 모두 가능하며 JPEG 이미지의 50% 수준인 용량을 자랑하는 차세대 이미지 포맷입니다. 아직 지원하지 않는 브라우저가 많음에 주의해야합니다.
<iframe>
iframe은 현재 HTML 페이지에서 또 다른 HTML 페이지를 보여주고 싶을 때 사용합니다. iframe은 width 혹은 height 속성으로 크기를 조절합니다. 따로 값을 설정하지 않는다면 height는 150px, width는 300px을 기본값으로 합니다.
<iframe src="링크"></iframe>
src 속성으로 불러올 HTML링크를 설정할 수 있으며 보통 youtube 영상을 불러올 때 많이 사용합니다.
youtube 영상을 불러오게 되면 보통 아래와 같은 속성값들을 가지게 됩니다.
<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>
- frameborder : 테두리를 그려줄지 결정합니다. 0 혹은 1의 값을 가집니다. 이제 더는 사용하지 않는 값이며 CSS의 border 속성을 대체되었습니다.
- allow : iframe 에서 허용할 기능들을 지정합니다.
- allowfullscreen : 전체화면을 지원합니다.
autoplay 속성은 브라우저 정책 상 일부 모바일 브라우저에 작동하지 않을 수 있으며, 항상 mute 속성과 함께 사용되어야 합니다.
이는 모바일 환경에서 autoplay 기능으로 인한 의도하지 않은 트래픽 유발을 방지하고 접근성 측면에서 좋지 않기 때문입니다.
이러한 특징은
<iframe>, <audio>, <video> 요소 모두 동일하게 적용됩니다.
* 참고 : https://developer.mozilla.org/ko/docs/Web/Media/Autoplay_guide<audio>
<audio> 는 음악 컨텐츠를 재생하기 위한 태그입니다. src 속성은 브라우저에게 오디오 파일의 위치 및 파일명을 알려줍니다. <audio src="폴더/파일명" controls autoplay loop ></audio>
- controls : 음악 파일을 제어할 수 있는 컨트롤러를 불러옵니다.
- autoplay : 로딩이 완료된 파일을 자동으로 재생합니다.
- loop : 음악을 반복합니다.
<audio controls> <source src="flow.ogg" type="audio/ogg"> <source src="flow.mp3" type="audio/mpeg"> </audio>
<audio> 요소 역시 <source> 요소를 자식으로 사용할 수 있습니다. 다른 요소와 마찬가지로 크로스 브라우징을 위해 여러 포맷의 파일을 지원할 수 있습니다.<video>
<video> 는 비디오 파일을 재생하기 위한 태그입니다.
- 요즘은 youtube로 iframe으로 많이 사용합니다. (트래픽에서 크게 유리)
- src 속성은 브라우저에게 비디오 파일의 위치 및 파일명을 알려줍니다. <src="폴더/파일명">
- controls 속성은 비디오컨트롤러를 불러옵니다.
- autoplay 속성은 자동으로 비디오를 재생시킵니다.
- loop 속성은 비디오을 반복합니다.
- poster 속성은 비디오가 로딩 중 일 때 화면에 보이게 표시하는 이미지를 지정합니다.
사용자가 영상의 가로(width)와 세로(height)길이로 비디오의 크기를 지정할 수 있습니다.
<video src="폴더/파일명" controls autoplay loop width="450" height="300" />
- 브라우저마다 지원하는 코덱이 다릅니다. 특히 ogg같은 경우에는 잘 확인해보고 사용해야 합니다.
- 압축을 하지 않은 일반 비디오 스트리밍은 용량을 어마어마하게 잡아먹습니다.
좀 더 시멘틱하게 아래와 같은 형식으로 코딩하는 경우도 있습니다.
<video src="" poster="" preload="" controls playsinline> <source src="" type=""> <track kind="" src="" srclang="" label=""> </video>
소스코드
<!DOCTYPE html> <html> <head> <title>media</title> </head> <body> <!-- 이미지 alt--> <img src="img/a.jpg" alt="이미지 없음"> <img src="img/a.jpg" alt=""> <img src="img/a.jpg" alt="스크린 리더가 읽어야 하는 문구"> <!-- srcset 속성을 사용하면 여러 해상도 대응 가능 --> <img src="a.jpg" srcset="a.jpg, a.jpg 2x" alt="대체문구"> <!-- picture나 source와 함께 사용하는 것을 권장 --> <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> <!-- audio : 음악 플레이 video : 영상 플레이 --> </body> </html>
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> body { margin: 0; padding: 0; } h1 { background: #4267b2; color: white; padding: 10px; margin: 0; } article { width: 500px; border: 1px solid blue; margin-top: 30px; margin-left: 50%; transform: translateX(-50%); } </style> </head> <body> <header> <h1>Facebook</h1> </header> <section> <article> <img width="100%" src="src/a.jpg" alt="" /> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, debitis nulla minima quas temporibus soluta iste harum adipisci. Repellendus eius libero autem deserunt numquam ducimus dolorem ab corporis atque debitis?Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo aliquam voluptatum esse laborum nihil perferendis hic voluptates corrupti commodi? Accusantium distinctio dolores beatae nostrum! Similique cupiditate doloribus itaque fuga laboriosam. </p> </article> <article> <img width="100%" src="src/a.jpg" alt="" /> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, debitis nulla minima quas temporibus soluta iste harum adipisci. Repellendus eius libero autem deserunt numquam ducimus dolorem ab corporis atque debitis?Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo aliquam voluptatum esse laborum nihil perferendis hic voluptates corrupti commodi? Accusantium distinctio dolores beatae nostrum! Similique cupiditate doloribus itaque fuga laboriosam. </p> </article> <article> <img width="100%" src="src/a.jpg" alt="" /> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, debitis nulla minima quas temporibus soluta iste harum adipisci. Repellendus eius libero autem deserunt numquam ducimus dolorem ab corporis atque debitis?Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo aliquam voluptatum esse laborum nihil perferendis hic voluptates corrupti commodi? Accusantium distinctio dolores beatae nostrum! Similique cupiditate doloribus itaque fuga laboriosam. </p> </article> </section> </body> </html>