글 상자 태그 FIELDSET를 이용하여 티스토리 블로그에서 글상자를 만들었는데 IE에서는 이상없이 나오나, 파이어폭스(FF)에서 망가져 나오는 분들을 위한 포스트입니다.
(필드셋 태그란? : fieldset 태그 참조: [HTML] 공간지정태그 DIV, SPAN, FIELDSET )

1...
[본디 정보 출처]CSS로 만든 그룹 박스 @ wystan's tales

( 이 글상자는 실은 아래에서 설명하는 style.css(html/css편집)를 사용하지 않고, '2...'번에서 설명하는 FIELDSET을 사용하였으니 FF에서는 박스 안에 내용이 균형있게 나오지 않을 수 있습니다. 그러나 이 블로그 밑에 추천,구독 박스 글은 style.css를 이용하였으니 참고 바랍니다. )

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

1. 아래 코드(태그?)를 드래그하셔서 복사하신 다음, 티스토리 스킨(html/css편집)의 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 에 대한 정보는 여기
 )
............... 퍼옴 : http://leegh.com/ -  티스토리 블로그 안에 박스(글상자)를 넣어보자.

** 여기에서 주의점.. : 위 설명의 2.번은 일반적인 그냥 게시판에 [글쓰기]할 때의 설명입니다.
블로그 어디서도 각 게시글 밑에 똑같이 보여주는 글상자(구독버튼, 추천버튼 등)를 만들 때에는, 티스토리의 스킨(html/css편집) --> skin.html의 아래 위치에서 작업합니다.
</div>
     
      <!-- 본문 -->
      <div class="article"> (##_article_rep_desc_##)
<div class="box">
<h4><span> ] 작 업 위 치 [ </span></h4>
<p>
<a class="snap
_preview" href="http://nihao.tistory.com/30" target="_blank">블로그에서 글상자 안에 글 넣기</a>
</p>
</div>

        </div>
* 실제로는 (##_article_rep_desc_##)는 ( )가 아니라 [ ]임. 자동적으로 숨겨져서 대체함.
 
** 위에 제시한 태그 위치에서 작업하지 않고, 별도 위치에서 작업한다면 <div class="article"> <div class="box"><h4><~~~ ~~~></div> </div>처럼 해야 합니다. 저는 다른 위치에서 작업하다가 <div class="article"> 를 간과하여 퍽 많은 시간을 내쐈습니다.  <p>태그는 별 중요한 영향을 안끼치니 빼버려고 좋지만(오히려 공간을 차지합니다.), <div>나 <table> <tr> <td> 등은 순서를 바꾸거나 빼놓고 작업한다면 ie(인터넷 익스플로어)에서 그냥 넘어가 주는 일도 불여우(FF:파이어폭스)는 그냥 넘어가지 않고 고생을 주고 가더군요.. ** 멋진그대 Blog **

2...
[ 오오츠카 아이 ] 金魚花火-PV


css코드 상관없이 위와 같이 일반 게시판에서 박스안에 글이 들어간 글상자를 넣는걸 말한다

글을 작성할때 위에 edit를 눌러 html 상태로 바꾼후 아래 태그를 바로 넣으면 된다

<FIELDSET style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px; LINE-HEIGHT: 20pt; width: 400px; PADDING-TOP: 0px; TEXT-ALIGN: left" border="0">
<LEGEND style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px"> [ 오오츠카 아이 ] </LEGEND>
<P>
<A href="http://skyaid.name/23" target=_blank>金魚花火-PV</A>
</P>
</FIELDSET>

위에 초록색으로 색칠한 부분만 본인이 원하는 내용을 쓰면 된다

좀더 쉽게 쓰는 방법은 위에 하늘색으로 칠한 <P> 와 </P> 사이의 내용을 모두 비우고 나머지 부분만 html 에서 코드를 넣은후 edit 상태로 돌아오면 박스만 만들어져 있는데, 박스안에 직접 글을 입력하면 된다.   글을 입력 후 하이퍼링크도 걸 수 있고 글자 색, 크기 다 지정이 가능하다   당근 [오오츠카 아이] 이내용도 바꿀수 있다
그리고 내용이 두줄, 세줄 늘어나도 박스 크기는 자동으로 커진다
(IE 에서는 박스를 두번 클릭해야 박스안으로 커서가 이동이 되며, FF 에서는 박스안에 바로 커서를 옮길수 있다)

크기는 위에 핑크색이 칠해진 width 수치를 조절하면 가로폭의 조절이 가능하다   핑크색 칠한 부분을 지우면 자동으로 가로폭이 꽉 차게 맞춰준다   세로 크기는 자동으로 되어 있다  내용이 늘어날 수록 크기가 자동으로 커질려면 세로는 자동으로 두는게 좋다.
............................. 퍼옴 : http://paperinz.com/ - 박스안에 글 넣기(글상자)

여기서도, 블로그 어느 게시판에서도 각 글 밑에 똑같이 보여주는 글상자를 만들 때에는
<div class="article"> <FIELDSET style="~~~~~~</FIELDSET> </div>처럼 작업해야 합니다.(티스토리의 스킨(html/css편집)에서 작업)


사용자 삽입 이미지
티스토리 블로그에서 <p>태그를 써서 글상자를 만든다면  오른쪽처럼 보여 모양이 예쁘지 않다. 그래서 <p>와 </p>를 빼고서 했더니 아래와 같이 보기 좋고 균형있게 나온다.

사용자 삽입 이미지
그러나 <P>태그 없이 글상자를 만들어도 아무 상관없습니다.
그리고   FF에서 망가지는 글상자의 내가 사용한 태그를 줄기만 적어본다면

more..

.
제가 위 태그에서 적지 않았지만 곰곰히  망가지는 원인을 살펴보니 </tr>이라고 써야 되는데 <tr>라고 써서, <tr><tr>이라고 써졌던 게 망가지는 원인이었 것 같습니다. ff에서 달리 ie에서는 이런 것 쯤이야 그냥 넘어 줍니다. 결국   1...과  2...를 모두 되는데, 원래 저는 fieldset 태그만 이용할 줄 알았는데, 태그 한번 잠깐 실수하야 style.css를 사용하려 했다가 뭣도 모르고 class를 무시하여 고생 진창했씁니다. 태그를 체계적으로 배운게 아니라 필요할 적 마다 맨 땅에 헤딩하는 식으로 자습하니, 자칫 고생해도 별 수 없습니다...

[ 파이어폭스에게 망가져 나온 추천버튼과 북마크 버튼 ]

more..

이제 아래를 쳐다보면 제대로 나오는 게 보일 겁니다..ㅎㅎ** 멋진그대 Blog **

관련 글: RSS구독기 버튼 추가하기 (한RSS, 다음알리미, 구글, 이메일RSS 등)
* 동시 게재 / 스크랩 안내 ☞ : http://blog.daum.net/nihao/13084795

그대..客從何處來?

블로그코리아에 블UP하기
* 구독해보실래요.. *
트랙백 0 : 댓글 25                                                                                            맨위로 바로가기

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

    이전 댓글 더보기
  1. 2009.03.12 10:48 신고
    많은 도움이 되었습니다.~
  2. 2012.08.09 00:40
    I saw this actually excellent post these days!한화그룹, 한화데이즈, 휴게소 맛집
  3. 2012.08.28 04:35
    I thought that was extremeley exciting. Many thanks for your unusual details. I'll maintain using this.한화그룹, 한화데이즈, 휴게소 맛집
  4. 2012.09.01 02:19
    That is some inspirational stuff. Never knew that thoughts might be this varied. Many thanks for all of the enthusiasm to offer such beneficial data right here.한화그룹, 한화데이즈, 휴게소 맛집
  5. 2012.09.04 04:49
    Ok. I believe you are appropriate!한화그룹, 한화데이즈, 휴게소 맛집
  6. 2012.10.13 19:50
    I wants to thank you with the endeavors you have produced in publishing this article. I am trusting the same greatest work from you within the future as well. In fact your fanciful writing abilities has inspired me to start my own weblog now. Truly the blogging is spreading its wings rapidly. Your generate up is a fine example of it.Thanks yet again for discussing this cost-free on the web!한화그룹, 한화데이즈, 휴게소 맛집
  7. 2012.10.16 08:06
    One more new write-up with powerful points, I've been a lurker below for any brief time but wish to become a great deal much more engaged inside long term.한화그룹, 한화데이즈, 휴게소 맛집
  8. 2012.10.25 05:23
    I thought that was extremeley exciting. Many thanks for your unusual details. I'll maintain using this.한화그룹, 한화데이즈, 휴게소 맛집
  9. 2012.10.26 18:06
    This blog site is great. How did you come up witht he idea?한화그룹, 한화데이즈, 휴게소 맛집
  10. 2012.11.06 21:07
    Yes, thank for the details a million! Have to discover anybody organizing Tea Party. I wants to participate in organizing.한화그룹, 한화데이즈, 휴게소 맛집
  11. 2012.11.08 11:45
    This blog site is great. How did you come up witht he idea?한화그룹, 한화데이즈, 휴게소 맛집
  12. 2012.11.10 05:48
    Intimately, the submit is definitely the very best on this precious topic. I concur with your conclusions and will eagerly look forward in your coming updates!한화그룹, 한화데이즈, 휴게소 맛집
  13. 2012.11.11 20:30
    Many thanks for your good publish. I'll take the notes you've written.한화그룹, 한화데이즈, 휴게소 맛집
  14. 2012.11.13 04:06
    Excellent weblog, many thanks a lot for your awesome posts!한화그룹, 한화데이즈, 휴게소 맛집
  15. 2012.11.19 05:38
    What a excellent resource!한화그룹, 한화데이즈, 휴게소 맛집
  16. 2012.11.20 20:50
    That is definately one of the best blogs I've sen in ages online. Maintain up the excellent posts.한화그룹, 한화데이즈, 휴게소 맛집
  17. 2012.11.27 09:45
    This can be a great website write-up and I defer to you what you've said below. I've previously subscribed for a RSS feed in Firefox and are going to be your regular reader. Many thanks for the time in writing the submit.한화그룹, 한화데이즈, 휴게소 맛집
  18. 2012.12.01 22:27
    You guys have a wonderful website intending the following, KIU!한화그룹, 한화데이즈, 휴게소 맛집
  19. 2012.12.02 11:14
    Very first factor , A large thank you for you to open my eyes.한화그룹, 한화데이즈, 휴게소 맛집
  20. 2012.12.03 01:42
    How's it going? I enjoyed reading through this publish. My husband and I have been researching for this kind of article with the longest time and We know that your details about the issue at hand is spot on. I'll be certain to introduce this posting to my neice. Can you tell me how to acquire your new RSS feed? Continue to keep on blogging!한화그룹, 한화데이즈, 휴게소 맛집

맨위로 바로가기                        

타사 휴대폰 주소록 이동 (KTF, SKT 인터넷 주소록 옮기기)

타사 휴대폰 주소록 이동 (KTF, SKT 인터넷 주소록 옮기기) 핸드폰주소록 때문에 한번쯤은 고민 안 해 보셨나요? 타사로 번호이동하여 보조금혜택을 받아 휴대폰을 새로 마련하.....

긴 화면 캡쳐하는 방법 (오픈캡쳐 OpenCapture Program)

출처,참조: http://openproject.nazzim.net/ & 최신판 다운로드(오픈캡쳐) Opencapture ☞ 다운로드 1. 긴 화면 캡쳐 (오픈 캡쳐 Openca.....

★ 제 블로그를 구독하시려면 RSS단추를 클릭해주셔요~! 본질적으로 블로그는 남들에게 보여줘도 되는, 남에게 보여주기 위해 쓴다고 보면, 구독하는 분에게 자기 집으로 배달되는.....

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

글 상자 태그 FIELDSET를 이용하여 티스토리 블로그에서 글상자를 만들었는데 IE에서는 이상없이 나오나, 파이어폭스(FF)에서 망가져 나오는 분들을 위한 포스트입니다. (필.....

논어(論語)로 보는 이명박정부의 쇠고기 협정 논란

미국산 쇠고기 수입 반대는 쇠고기를 먹지 않을 수 밖에 없는 상황인데도 불구하고 그동안 가져왔던 국민적 합의 무시하고 통상논리로만 접근하여 서둘러 합의된 한미 쇠고기 협정 때문.....

한국은행이 독도를 넣겠다고 한 10만원권 지폐의 대동여지도, 적극 반대합니다.

한은 "10만원권에 우리땅 독도 표기"라는 기사(연합뉴스.2008.07.22)를 보고 어이없어 한마디 하렵니다.. 한국은행이 독도를 넣겠다고 하는 고액권 화폐의 대동여지도, 간.....

                                                                                                                  맨위로 바로가기
◀ PREV | 1 | ··· | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | ··· | 91 | NEXT ▶

카테고리

전체보기 (91)
나의 세상 보기 (65)
컴、인터넷 활용법 (6)
블로그 꾸미기 (14)
생활 (5)
기타 etc (1)

달력

«   2019/05   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31