css

위 사진처럼 이미지에 자막을 넣을 수는 없을까 고민하던 중 한 블로그에서 해법을 찾았습니다. 역시 세상에는 고마운 사람들이 참 많네요.^^ /* Image cap1 */ .cap1 { margin:-10px 0 17px 0; padding-top:5px; font-size:14px; color: #999; text-align: center; border-bottom:1px solid #fafafa; border-radius:17px; -webkit-box-shadow:0 10px 7px -7px #f7f7f7; -moz-box-shadow:0 10px 7px -7px #f7f7f7; box-shadow:0 10px 7px -7px #f7f7f7; background-color:#fff; backgroun..

단어 단위로 줄바꿈을 하게 되면 PC에서는 그럭저럭 볼만하지만 모바일에서는 보기가 그다지 좋지 않습니다. 이러한 문제를 겪고 CSS 수정을 통해 문제해결을 하려 시도해봤지만, CSS에 대한 이해도가 부족한 탓인지 쉽지가 않았네요. 결국 한 블로그에서 해결방안을 찾아 여러분과 공유해보려고 합니다. 위의 사진은 결국 성공한 스샷입니다. 위처럼 수정을 해주면 됩니다. break-all이 글자단위로 줄바꿈을 하는 것을 말한다고 하니 핵심 구절이 되겠네요. 참고로 word-break가 아닌 word-wrap은 CJK(Chinese, Japan, Korea)와 같은 아시아계 언어는 해당되지 않는다고 합니다. 또, break-all는 normal과 같은 기능을 한다고 하고, break-word는 단어 단위로 끊어준다..