티스토리 본문 이미지 가로폭을 넘어갈 때 추가 해결 방법

티스토리 본문 이지미가 가로폭을 넘어가는 문제가 다시 발생했다.

예전에 문제가 있어서 블로거님들의 도움을 받아서 아래 방법으로 해결했는데, 최근에 다시 문제가 나왔다. 옛날의 내가 아니지...이제 다른 사람에게 알려줄만큼 CSS를 잘알지요~훗.

우선, 예전 해결 방법은 다음과 같다.
style.css 스타일 시트에 아래 두 줄을 추가해주어서 해결했는데, 지금은 안됨.

img {max-width: 100%; height: auto;}
span.imageblock {max-width: 100%; height: auto;}

참조: http://www.cmsfactory.net/node/10198

새로운 해결방법은 다음과 같다.

.article img {max-width: 100% !important; height: auto;}
.article .imageblock {max-width: 100% !important; height: auto;}

!important 부분이 핵심!
예전엔 그냥 따라했는데...이젠 의미를 알지요~ㅎ

해결 방법 설명

간단한건데, 모르는 누군가를 위해서 정리해둠.

최초 추가된 2줄은,

img {max-width: 100%; height: auto;}

-> img 태그의 element 최대폭을 100%로 설정. 높이는 자동.

span.imageblock {max-width: 100%; height: auto;}

-> span 태그 중에 "imageblock" 클래스를 가진 element의 최대폭을 100%로 설정.

100%의 기준은 어디? 바로 상위 element 부모개체라고도 하기도 하지요.

근데, 잘동작하다가 왜 갑자기 안되지? 내가 확인을 해보니, 아래 캡쳐 내용처럼 "imageblock" 클래스의 span에 사이즈가 in-line 으로 적용이 되어있다. in-line이 클래스 정의보다 우선순위가 높기때문에 기존 코드가 동작하지 않았다. (해당 태그는 티스토리에서 추가되는거라서 어디서 어떻게 추가되는지 모르겠다)

.article img {max-width: 100% !important; height: auto;}
.article .imageblock {max-width: 100% !important; height: auto;}

그래서 !important 로 우선순위를 높여줬을 뿐이다~ 그리고 본문에만 적용될 수 있도록 "article" 클래스를 앞에 추가해 줬다.

CSS 우선순위에 대한 내용을 아래 글을 참고하면 될것 같다.
css 우선순위에 대한 정리

보다 자세한 내용이 잘 정리된 사이트도 같이 추천!
http://www.w3schools.com/