글상자 겹침 해결하기

티스토리 글쓰기에서 글상자 사용하시나요?

저도 가끔 사용하긴 하는데 글상자의 배경이 항상 본문의 가로너비를 가득 채우더라구요.

그게 조금 신경쓰이긴 했지만, 저야 뭐 본문 중간중간 사용해서 그러려니 했어요.

 

그런데, 이번에 글상자를 이용해 본문 포스팅의 상단에 소제목(타이틀)처럼 쓰고자 하시는 분께서

본문 우측상단의 애드센스 광고와 겹치는 부분을 해결하고 싶다고 문의를 주셨어요.

 

바로 이 부분이요.

 

좀 거슬리긴 하죠? 클릭유도까진 아닐 것 같지만

콘텐츠와의 간격을 유지해야하는 애드센스 규정도 괜시리 생각나고...

 

 

 

#1. 반응형 웹의 표만들기 오류

 

처음에는 그냥 표를 이용해서 소제목을 만드는 편이 낫지 않을까 했어요.

표로 하면 한 80%정도 만족스럽다할만큼 해결이 되긴 하거든요.

대신 번거로워요.

표 작성시 포스팅할 때마다 포스팅의 html 버전으로 바꾸어 일일이 width 요소를 삭제해야합니다.

 

그 이유는 바로 대부분의 티스토리 반응형 스킨에 표만들기 오류가 있기 때문입니다.

오류라 함은 창너비가 줄어들 때, 표가 반응형으로 조절되지 않고 잘려버리는건데요.

물론 표만들기 오류가 없는 반응형스킨도 있다고 들었습니다. #2도 오류가 없다고 들었고..(확인은 안 해봤어요.)

어쨌든 fastboot 스킨도 표만들기 오류가 발생합니다.

그래서 일일이 포스팅 할때마다 html 버전에서 수정해야하죠.

 

 

 

#2. 글상자 겹침 해결

 

그래서 아무래도 표는 안 될 것 같고.. 분명 어딘가 실마리는 있을 것 같고..

그렇게 이것 저것 건드려보다가

..

헤헤.. 찾았어요!!

 

바로, html 버전으로 확인했을 때

글상자가 div로 정의되며, class가 txc-textbox 라는 걸 이용하는 겁니다.

 

 

 

바로 적용해보도록 하죠.

 

관리 < 꾸미기 < HTML/CSS편집 < CSS 맨 마지막에

아래 코드를 추가로 붙여넣으세요.

 

글상자 겹침 해결.txt

.txc-textbox {overflow:hidden;}

 

overflow라는 건 간단히 말하자면

부모의 영역을 벗어날 경우 숨기거나 스크롤 하도록 정의하는 건데요...

사실 저도 이 속성을 완벽하게 이해한 건 아니에요ㅠㅠ

얼추 이 상황에 적절할 것 같아 사용했는데 되네요..^^;;;;

html과 css에서 영역 관련한 것들이 제일 어려워요.....ㅠㅠ 논리의 꼬리를 물고 논리 속으로 빠져드는..

 

아무튼, 아래 그림과 같이 코드를 삽입하세요.

저장!

 

 

확인해볼까요?

 

 

짜잔!! 이렇게 됩니다. 히히히...히히히히히히

 

 

본문 우측상단의 광고와 여백도 유지하고, 창의 너비에 따라 반응하여 자동으로 조절됩니다.

후후.. 뭐 특별히 한 것도 없는데 뿌듯하네요.

궁금해하셨던 분들 잘 적용하셨기를 바라며,

 

혹시 저와 같이 적용했는데 안 되는 분이 계시다면 댓글 남겨주시구요,

글상자 overflow:hidden 속성 정의 후, 어쩌면 다른 문제가 야기될 수도 있어요.

문제 발견할 경우 댓글 남겨주시면 감사하겠습니다.

 

 

P.S 참고로 저는 정말... 언어 초보입니다.

블로그하면서 필요한 부분만 벼락치기 마냥 공부하는....

대신 눈치가 빠르다면 좀 빠른 편이라 이리저리 가설을 세워서 응용하고 찾아보다가 얻어걸리는 거죠.

최근 스킨 및 언어 관련하여 여럿 분들께 이런저런 질문을 받으면서 함께 공부하느라 눈이 핑글핑글..ㅋㅋ

물론 함께 고민하고 새로이 배우는 것들이 있어서 질문은 언제나 환영입니다.

하지만 만족스러운 답변을 못 얻으실 수도 있으니 이해해주세요.