제시하는 방법은 올블릿 뿐 아니라 모든 경우에 적용할 수 있습니다. HTML의 div 태그 Overflow 속성 Style을 이용해서, 내용물을 그 안에 가두는 방법입니다.
제 다른 블로그(펀펀라이프)에 올블릿 배너를 달다보니 글,메뉴 상자 화면 배치(레이아웃)가 깨지더군요. 올블릿에 있는 본문 상/하단용 중 가장 작은 470 px를 넣어도 약간 튀어나오면서 레이아웃이 깨집니다.
올블릿에 더 작은 크기는 없고, 그렇다고 화면 위,아래 구석에 처박아두기도 뭐해서, div 태그로 가둬두기로 했습니다.
본문 상/하단형을 기준으로 말씀드립니다. 많이들 쓰는 본문 삽입용은 본문 작성 시 직접 소스를 넣는 방법 말고, 스킨 배치(레이아웃)을 뜯어고쳐 일괄 적용할 방법은 도저히 생각나지 않더군요.
특별히 캡처 보여드릴게 없어서. 올블릿 캡처
관리자 스킨 수정으로 들어가서 HTML/CSS 수정을 합니다. 티스토리 본문 상/하단에 넣으려면, 올블릿에서 복사해온 소스를, 본문( ##_article_rep_desc_## )을 감싸고 있는 div 태그 시작 직전에 넣으면 상단, 직후에 넣으면 하단이 됩니다. 본문은 Ctrl + F 키를 눌러 ##_article_rep_desc_## 찾는게 더 확실한 듯 합니다. <div class="article">로 찾으려한다면, 그 태그를 쓰는 다른 부분도 있으므로, 확실히 그 부분이 본문인가 확인후 넣도록 합시다. 보통 주석으로 <!-- 본문 --> 이런 표시를 해놓습니다.
제 스킨의 본문은 이렇습니다. 가장 확실한 ##_article_rep_desc_## 로 찾으면 될 것 같습니다.
여기에 배너 소스를 넣으면 본문 상단형
<div class="article">[ ##_article_rep_desc_## ]</div>
여기에 배너 소스를 넣으면 본문 하단형
그냥 올블릿을 붙이니, 튀어나오면서, 왼쪽 메뉴 사이드바가 아예 구석으로 내려가버렸습니다. 이상 올블릿을 작게 할 수는 없고, 올블릿때문에 스킨을 바꾸자니, 스킨 적용후 이것 저것 수정했던걸 또 해야하나는 생각에 답답해졌습니다. div 태그로 가두기로 했습니다.
<div style="width:100%;height:50px;overflow-x:hidden;overflow-y:visible;">
이 부분에, 올블릿에서 복사해온 소스 코드를 붙여 넣습니다.
</div>
일단 인터넷익스플로러(IE)에서 작동하는 건 확인했고요. 태그 설명을 간단히 드리겠습니다.
-
<div>, </div>는 div(Division) 태그입니다. 그냥 박스 정도로 생각하시면 될 듯
-
style로 width(가로 폭), height(세로 높이)를 정해줄 수 있습니다.
-
overflow 설정은, 내용물이 처음 정한 상자 클 경우 어떻게 할 것이냐를 결정해줍니다. overflow-x 와 overflow-y 로 가로, 세로에 대해서 각각을 따로 설정할 수도 있습니다.
-
overflow 옵션은 visible, hidden, scroll, auto 가 있습니다.
-
overflow:visible - 기본값. 상자 크기를 벗어나면, 상자도 자동으로 커지면서 내용물을 다 보여줍니다.
-
overflow:hidden - 상자 크기를 벗어난 내용은 잘라버리고 보여주지 않습니다.
-
overflow:scroll - 상자에 스크롤바를 달아, 밀고 당기면서 내용을 볼 수 있게 해줍니다.
-
overflow:auto - 평소에는 스크롤바가 없고, 내용이 많으면 자동으로 스크롤바 생성
width를 100%로 설정하면, 제한된 범위에서 최대한 꽉차게 가로폭을 설정합니다. overflow-x:hidden으로 가로폭이 더 이상 늘어나지 않게 제한을 걸었습니다. height는 일부러 작게 잡고(50px) overflow-y 설정을 visible로 해서, 세로로 쭉쭉 늘어날 수 있게 했습니다. 세로 폭으로 길어지는 올블릿도 다 보여줄 수 있습니다.
오늘 처음 올블릿, 블로그링크 같은 것을 달아봤네요. 지금 화면 하단에 올블릿과 블로그링크가 함께 있어 너무 복잡해보이고, 블로그링크가 과연 얼마나 효용성이 있나도 의문입니다. 며칠 달아보다가 내릴 듯 합니다.※ 이전 관련글
원격 블로깅 - Zoundry 사용기
티스토리 글쓰기(위지윅) 너무 느려요~ - Windows Live Writer 체험기