티스토리 블로그 안에 박스(글상자)를 넣어보자.

2007/05/23 18:35

위와 같이 글상자를 티스토리 블로그에 넣는 방법에 대해 이야기해보려 합니다. 이 css 글상자는 IE와 파이어폭스, 오페라에서 변하지 않고 이 모양 그대로 유지되어 나타납니다.

1. 아래 코드를 드래그하셔서 복사하신 다음 티스토리 스킨의 style.css 화일 맨 하단에 넣습니다. 코드 옆에 설명이 표시되어 있으니 박스너비나 여백 등을 자신의 입맞에 맞게 먼저 수정하시고나서 붙여넣기 하시면 되겠습니다.

.article .box {

    width: 400px;                      /* 박스 너비, 지정하지 않으면 최대치 사용 */
    height: auto;               
    margin: 2em 0 1em 0;           /* 박스 주위 여백 */
    border: 1px solid #999;        /* 박스 테두리 색 */
    padding: 0 8px;                 /* 박스 여백(padding) */
    clear:right;
}
.article .box h4 {
    line-height: 100%;            /* 위쪽 테두리 선과 내용물 사이의 간격 */
    padding-left: 8px;            /* 왼쪽 테두리 선과 라벨 사이의 간격 */
    font-size: 1em;               /* h4 태그의 텍스트 크기 지정 */
    font-weight: normal;        /* h4 태그의 텍스트 두께 지정 */
}
.article .box h4 span {
    background-color: #ffffff;        /* 배경색과 동일해야 함 */
    color: #999;                             /* 라벨 텍스트 색 */
    padding: 0 4px;                       /* 라벨과 좌우 선 사이의 간격 */
    position: relative;
    top: -0.5em;                           /* 라벨의 상하 위치 조절 */
}
.article .box p {
    margin-bottom: 1em;
    margin-top: 0.5em;
    line-height: 170%;
    padding-left: 8px;
}

2. 글을 작성하실 때 edit 를 클릭하셔서 html 편집모드로 들어가셔서 원하시는 위치에 다음의 코드를 넣으시면 됩니다.

<div class="box">
<h4><span>[본디 정보 출처]</span></h4>
<p>
<a class="snap_preview" href="http://blog.wystan.net/2007/04/17/css-groupbox" target="_blank">CSS로 만든 그룹박스</a>
</p>
</div>

위 코드 중 색칠해 놓은 부분만 원하시는 것으로 바꾸시면 됩니다.
class="snap_preview" 는 snap 미리보기를 사용하시지 않거나 링크 전체를 미리보기로 설정해 놓으신 분들은 삭제하셔도 됩니다. snap 에 대한 정보는 여기

지인우인 팁_[Tip] , ,

2007/05/23 18:35 2007/05/23 18:35
Trackback Address:http://leegh.com/trackback/2693712
  1. 2007/05/28 22:11
    블로그 내용에 박스(글상자) 넣기,,, Tracked from 盡人事待天命
  2. 2007/12/03 23:52
    블로그에 글상자를 넣어보자 Tracked from Off TV, On Blog
  3. 2008/06/09 16:56
  4. 2010/08/02 18:46
    Underwear. Tracked from Mens mesh thong underwear.
  5. 2010/08/03 12:45
    Lindsay lohan no underwear. Tracked from Gay mens underwear.
  6. 2010/08/06 20:06
    Boy underwear. Tracked from Teen underwear.
  1. 오옷..유용한 정보네요^^캐치하겠습니다^^

  2. 감사합니다. 유용하게 사용하세요. ^_^

  3. 정말 좋은 팁입니다. 저도 써봐야겠습니다.

  4. 감사합니다. 유용하시다니 뿌듯하내요. ^_^

  5. 다른 방법이 있어서 트랙백 걸고 갑니다,,,^^*,,,

  6. fieldset 을 이용한 방법이군요. 이 방법도 좋은데요? ^_^

  7. 오홋 유용한 정보네요~

    잘보고 갑니다.^^

  8. Blog Icon
    지인우인

    css 코드에 적어진 각주를 보시고 를 입맞에 맞게 수정하시면 보기 좋은 박스를 넣으실 수 있지요. ^_^

  9. 안녕하세요 정말 유용한 자료 감사합니다
    제가 이걸 제 블로그에 적용하려고 하는데
    잘 안되서요 ㅠ.ㅠ

    제 사이트 폰트가 커서 그런지
    http://serp.tistory.com/86 보시면
    하단의 조금 이상한 박스(지성합니다 좋은 정보를 활용 못해서요)가
    나오는데 어떻게 해야 할까요 ^^

[로그인][오픈아이디란?]