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

[글쓴이]

author image
Posted by 지인우인

다음 글 보기 ===> S 클릭
이전 글 보기 ===> A 클릭 (한/영 키 주의하세요.)

페이지 내리기 Space 클릭
페이지 올리기 Shife + Space 클릭 (안되신 분들 마우스 클릭 한번 해주세요.)

구독자분들 사랑합니다.~~

[이 글을 평가하기]

별표 갯수로 평가해 주세요

[구독하기 & 즐겨찾기에 추가하기]

          트랙백 3, 댓글 8개가 달렸습니다  ::  누적조회 1129 : 오늘조회 2 : 어제조회 3

트랙백 주소 :: http://leegh.com/trackback/2693712

트랙백과 댓글 RSS :: http://leegh.com/rss/response/2693712

  1. Subject: 블로그 내용에 박스(글상자) 넣기,,,

    Tracked from 盡人事待天命 2007/05/28 22:11  삭제

    [ 오오츠카 아이 ] 金魚花火-PV 위와 같이 박스안에 글이 들어간 글상자를 넣는걸 말한다,,, 글을 작성할때 위에 edit를 눌러 html 상태로 바꾼후 아래 코드를 바로 넣으면 된다,,, <FIELDSET style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px; LINE-HEIGHT: 20pt; width: 400px; PADDING-TOP: 0px; TE..

  2. Subject: 블로그에 글상자를 넣어보자

    Tracked from Off TV, On Blog 2007/12/03 23:52  삭제

    그림 출처 : http://leegh.com/2694160 위 그림처럼 글상자를 만들어 정리하면 깔끔하게 더 많은 내용을 한 포스트에 달 수 있는것 같습니다. 하지만 어떻게 해야 되는지 모르고 있었는데 우연히 paperinz.com 를 방문하였다가 박스 안에 글넣기(글상자) 의 글을 통해서 알게 되었습니다. [ 글상자만들기 따라하기 ] paperinz.com <FIELDSET style="PADDING-RIGHT: 10px; PADDING-LEFT:..

  3. Subject: 블로그에서 박스(글상자) 안에 글 넣기 - FIELDSET ( IE, 파이어폭스, 오페라)

    Tracked from 그대..客從何處來? 2008/06/09 16:56  삭제

    글 상자 태그 FIELDSET를 이용하여 티스토리 블로그에서 글상자를 만들었는데 IE에서는 이상없이 나오나, 파이어폭스(FF)에서 망가져 나오는 분들을 위한 포스트입니다. 1... [본디 정보 출처] CSS로 만든 그룹 박스 @ wystan's tales ( 이 글상자는 실은 아래에서 설며하는 style.css를 사용하지 않고, '2...'번에서 설명하는 FIELDSET을 사용하였으니 FF에서는 박스 안에 내용이 균형있게 나오지 않을 수 있습니다...

댓글을 달아 주세요

  1. 강자이너
    2007/05/24 00:17  댓글주소  수정/삭제  댓글쓰기

    오옷..유용한 정보네요^^캐치하겠습니다^^

  2. 달룡..
    2007/05/24 22:14  댓글주소  수정/삭제  댓글쓰기

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

  3. aid,,,
    2007/05/28 22:13  댓글주소  수정/삭제  댓글쓰기

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

  4. dudtn
    2007/08/17 12:21  댓글주소  수정/삭제  댓글쓰기

    오홋 유용한 정보네요~

    잘보고 갑니다.^^

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