[TIP] 이미지를 화면 크기에 맞게 & 이미지 크기에 맞게!!!

‪#‎전자책‬ ‪#‎CSS‬ ‪#‎sigil‬

‪#‎전자책_편집을_위한_HTML_CSS‬ 해시태그로 간단한 HTML CSS 강의를 시작합니다. 전자책 편집을 하는 분들에게 자주 받은 질문을 정리하려고 해요. 아주 쉬운 내용인데 모르면 헤매는 내용이라 초보 편집자들에게 유용하리라 생각합니다. 

전자책 편집을 하다 막히는게 있거나 궁금한 점이 있으면 댓글을 남겨주세요. 단, 질문은 '제대로' 해주셔야해요. 본인만 이해할 수 있는 질문 말고, 답변할 사람이 이해할 수 있는 질문으로요^^

편집기는 Sigil을 사용합니다. 하지만 모든 편집기에서 동일하게 적용할 수 있습니다.

책에는 이미지가 많이 들어갑니다. 자기계발서나 여행서, 실용서 등 소설 외에는 이미지 없는 책이 드물지요. 종이책에 이미지 넣기는 쉽습니다. 물론, 종이책 편집이 얼마나 어려운지 알아요. 하지만 전자책에 비하면...

종이책은 고정된 크기의 종이에 원하는 위치에 이미지를 놓을 수 있어요. 한번 넣은 이미지는 언제나 그 자리에 그 크기로 있습니다. 그런데 전자책은?

스마트폰 화면 크기를 보세요. 수천가지입니다. 같은 5인치라고요? 4:3, 16:9, 1080p, 720p... 같은 5인치여도 해상도가 전부 다릅니다. 같은 해상도여도 화면 크기가 전부 다를 수 있어요. 그러다 보니 이미지를 넣을 때 이 모든 화면을 고려해야합니다. 그렇지 않으면 이런 문제가 생기지요.

이렇게 가로로 넓은 이미지를 세로 화면에서 보면

이미지가 화면 밖으로 나가거나,

손톱만해야 하는 이미지가 화면을 가득 채우거나.

그렇다고 이미지 하나 하나 가로 픽셀을 확인해서 스타일을 적용하자니 너무 번거롭지요.

이럴 때 아주 간단히 문제를 해결할 방법이 있습니다. 물론 만능은 아니기 때문에 상황에 맞게 잘 활용해야 하지만요.

img { max-width : 100% }

CSS에 이거 한 줄만 넣어보세요.

이미지가 화면보다 크면 화면에 딱 맞춰주고, 화면보다 작으면 원래 크기로 보여줍니다.

스마트폰 화면 크기와 해상도 조합이 우주에 떠있는 별보다 많다고 해도 이미지가 절대로 화면 밖으로 나가지 않습니다. 큰 이미지는 화면에 맞게 줄여주고, 작은 이미지는 최대 해상도로 고정이 됩니다.

아주 간단한 스타일이지만 전자책 만들며 이미지 삽입할 때 아주 유용합니다 ^^