블로그를 운영하고 계시다면 여러 문제들이 발생하는데요. 그 중 사용자들이 다양한 기기들을 이용해 콘텐츠를 보게 되면서 이미지의 크기가 변하게 됩니다. 이 글을 읽어보시고 적용하신다면, 화면 크기에 맞도록 이미지를 자동 조절해 줄 수 있습니다.
1. 문제점
화면의 다양성으로 인해 콘텐츠의 크기가 변화되는 문제가 발생합니다. 이미지가 너무 커지거나 작아지고, 작성한 글의 내용이 서로 섞이는 등 사용자에게 불편함을 주게 됩니다.
이제 문제의 해결 방법에 대해 설명하겠습니다.
2. 해결방법
이미지의 크기는 고정되어 있지만 화면의 크기보다 크면 스크롤바가 생기게 되며, 글을 읽거나 할 때 불편함이 발생할 수 있습니다.
이 문제를 처리하기 위해서는, 모든 이미지의 너비를 원본 이미지의 크기 이상으로 넘어가지 않도록 고정시켜 주시면 됩니다.
· 티스토리 HTML편집으로 들어갑니다.
· 아래 "반응형 이미지 코드.txt"를 다운로드합니다.
/* img */ 이미지 색인을 나타냅니다. (본인이 확인할 수 있는 이름 사용)
img { img 속성을 설정합니다.
max-width: 100%; 최대 너비(가로길이)를 이미지의 원래 크기를 넘어설 수 없게 고정합니다.
}
· "CSS" 편집창으로 들어가서, 아래와 같이 본인이 확인할 수 있는 단어로 색인을 만들어 줍니다.
· [Ctrl + End] 키를 눌러 "CSS" 편집 창의 제일 하단 위치로 이동합니다.
· 위에서 다운로드한 코드를 복사&붙여넣기 하거나, 코드를 직접 작성하신 후 적용을 클릭해 줍니다.
· 여기까지가 반응형 이미지로 만드는 작업이었습니다. 다시 사이트에 접속하시면, 아래 사진과 같이 결과를 확인할 수 있습니다.
좋은 하루 되십시오.
댓글