[본디 정보 출처]
위와 같이 글상자를 티스토리 블로그에 넣는 방법에 대해 이야기해보려 합니다. 이 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 에 대한 정보는 여기
[글쓴이]
Posted by 지인우인
다음 글 보기 ===> S 클릭
이전 글 보기 ===> A 클릭 (한/영 키 주의하세요.)
페이지 내리기 Space 클릭
페이지 올리기 Shife + Space 클릭 (안되신 분들 마우스 클릭 한번 해주세요.)
구독자분들 사랑합니다.~~
다음 글 보기 ===> S 클릭
이전 글 보기 ===> A 클릭 (한/영 키 주의하세요.)
페이지 내리기 Space 클릭
페이지 올리기 Shife + Space 클릭 (안되신 분들 마우스 클릭 한번 해주세요.)
구독자분들 사랑합니다.~~
댓글을 달아 주세요
2007/05/24 00:17 댓글주소 수정/삭제 댓글쓰기
오옷..유용한 정보네요^^캐치하겠습니다^^
2007/05/25 19:45 댓글주소 수정/삭제
감사합니다. 유용하게 사용하세요. ^_^
2007/05/24 22:14 댓글주소 수정/삭제 댓글쓰기
정말 좋은 팁입니다. 저도 써봐야겠습니다.
2007/05/25 19:46 댓글주소 수정/삭제
감사합니다. 유용하시다니 뿌듯하내요. ^_^
2007/05/28 22:13 댓글주소 수정/삭제 댓글쓰기
다른 방법이 있어서 트랙백 걸고 갑니다,,,^^*,,,
2007/05/29 13:44 댓글주소 수정/삭제
fieldset 을 이용한 방법이군요. 이 방법도 좋은데요? ^_^
2007/08/17 12:21 댓글주소 수정/삭제 댓글쓰기
오홋 유용한 정보네요~
잘보고 갑니다.^^
2007/08/17 12:46 댓글주소 수정/삭제
css 코드에 적어진 각주를 보시고 를 입맞에 맞게 수정하시면 보기 좋은 박스를 넣으실 수 있지요. ^_^