좁은 화면에서 작품 사진의 세부가 너무 작아지면 다른 구도의 이미지를 보여줄 수 있다. ``는 조건에 따라 이미지 후보를 나누는 HTML 요소다. [[작품 이미지의 여러 크기]]가 같은 장면의 해상도를 고르는 문제라면, 여기서는 무엇을 보여줄지 달라진다. - 아래 예제는 좁은 화면에서 정사각형 세부 사진을, 넓은 화면에서 가로형 전체 사진을 보여준다. - ``는 위에서부터 조건을 평가한다. 마지막 ``는 기본 이미지와 대체 텍스트를 제공한다. - 작품을 잘라 보여줄 때는 전체 모습인 것처럼 제시하지 않는다. 캡션에서 조건을 밝히고 전체 이미지로 가는 하이퍼링크를 둔다. - 같은 파일을 다른 [[종횡비]]의 상자에 넣을 수도 있다. `object-fit: contain`은 전체를 보이게 하면서 빈 공간을 남길 수 있고, `cover`는 상자를 채우며 일부를 잘라낼 수 있다. 상자가 빈틈없이 채워졌다는 사실과 작품이 빠짐없이 보인다는 사실은 다르다. ([MDN: object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit)) - ``로 다른 파일을 고르는 일과 `object-fit`으로 같은 파일을 상자 안에 표시하는 일은 구분한다. 세부 사진을 선택했다면 `contain`을 써도 선택하지 않은 전체 사진이 나타나지는 않는다. ## 작은 예제 아래 코드를 UTF-8 형식의 `example-02.html`로 저장해 웹 브라우저에서 연다. 전체 사진 `whole.png`는 1200×800픽셀, 세부 사진 `detail.png`는 600×600픽셀로 준비한다. 이 예제의 장면은 가상의 작품이며 실제 파일과 설명을 함께 바꾼다. ```html 화면에 따라 달라지는 이미지의 구도

화면에 따라 달라지는 이미지의 구도

종이를 여러 겹 붙인 표면에서 드러나는 접힌 자국
좁은 화면에서는 세부를 보여준다. 전체 이미지 보기
``` 창을 넓히고 좁히며 사진과 높이가 함께 바뀌는지 확인한다. 대체 텍스트는 두 구도에서 공통으로 전달할 수 있는 내용으로 쓴다. 구도마다 설명이 크게 달라져야 한다면 별도 이미지와 캡션으로 나누는 편이 낫다. [[캡션이 작품을 바꾸는 순간]]과 [[작품 사진의 잘린 가장자리]]는 이 선택을 이어 살필 주제다. ## 참고 - [MDN: picture 요소](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture) - [MDN: 반응형 이미지의 구도 선택](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) #HTML #이미지 #편집