LEEGH.COM

위와 같이 글상자를 티스토리 블로그에 넣는 방법에 대해 이야기해보려 합니다. 이 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] CSS, 그룹박스, 글상자