예쁜 제목줄 만들기

pardonk님께서 예쁜 제목줄을 붙이는 방법에 대해 물으셨다.
그나저나 궁금한게 글 쓸 때 소제목처럼 처리하는건 어떻게 하는 건가요? 그냥 구분선도 아닌 것이 신기하네요.

사용자 삽입 이미지

이 제목줄 말이다... 예쁘지 않은가?


이 제목줄은 다음에서 처음 사용되었고, 이후 페니웨이 님께서 사용하시는 것을 보고 나도 사용하게 된 것이다.
표(table) 태그를 사용해서 만든 것인데, 간단한 코드지만, 깔끔하고 예쁘다.

파란색 제목줄은 HTML모드에서 아래와 같은 코드를 집어넣으면 사용할 수 있다.

<table style="width: 100%; border-collapse: collapse; height: 31px;" cellpadding="1" cellspacing="1">
<tbody><tr style="border-style: solid; border-color: rgb(48, 88, 210); border-width: 0px 0px 1px;">
<td width="1%" bgcolor="#3058d2">&nbsp;</td>
<td width="99%">&nbsp;&nbsp;<span style="font-size: 10pt; font-family: Gulim; color: rgb(0, 51, 102); font-weight: bold;">파란색 제목줄</span></td>
</tr></tbody></table>

    파란색 제목줄


그리고, 제목줄을 빨간색으로 사용하고 싶으면 아래의 코드를 사용하면 된다.

<table style="width: 100%; border-collapse: collapse; height: 31px;" cellpadding="1" cellspacing="1">
<tbody><tr style="border-style: solid; border-color: rgb(210, 88, 48); border-width: 0px 0px 1px;">
<td width="1%" bgcolor="#d25830">&nbsp;</td>
<td width="99%">&nbsp;&nbsp;<span style="font-size: 10pt; font-family: Gulim; color: rgb(102, 51, 0); font-weight: bold;">빨간색 제목줄</span></td>
</tr></tbody></table>

    빨간색 제목줄

참 쉽죠~잉?

덧. 원래 코드는 이것보다 좀 더 길었다.
아마도 WYSIWYG 도구로 만든 것 같은데, 너무 지저분한 코드들이 많아서 필요한 부분만 남기고 정리했다.

Trackback 0 Comment 21
  1. Favicon of http://pennyway.net BlogIcon 페니웨이™ 2009.05.24 18:33 address edit & delete reply

    저는 이거 서식으로 등록해서 간단하게 쓰고 있는데.. ㅡㅡ;;

    덧, 어제 오늘 심란함을 넘어선 뒤숭숭함으로 일절 일이고 나발이고 손에 안잡히네요 [emo=048]

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.05.24 19:36 address edit & delete

      서식으로 등록을 어케 하는 건가효? [emo=104]

  2. Favicon of http://miru.tistory.com BlogIcon miru 2009.05.24 21:44 address edit & delete reply

    포스트 작성시 글 / 공지 / 키워드 / 서식 이라는 라디오 토글버튼이 있습니다.
    여기서 서식으로 잡아주셔서 포스트를 작성하시면 포스트 작성화면 오른쪽 메뉴에 서식으로 등록됩니다.
    다른 포스트 작성시 서식에서 불러오면 바로 쓸 수 있습니다. [emo=003]

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.05.24 23:59 address edit & delete

      아... 그렇군요.
      고맙습니다.

      당최 공지/키워드 도 사용하지 않는지라... 전혀 몰랐습니다.

  3. Favicon of http://e-forever.co.cc BlogIcon Forevler 2009.05.26 01:31 address edit & delete reply

    후후; 제목도 깔끔 소스도 깔끔합니다~ ^^ [emo=091]

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.05.26 01:47 address edit & delete

      고맙습니다. [emo=107]

  4. Favicon of http://minimonk.tistory.com BlogIcon 구차니 2009.05.26 10:14 address edit & delete reply

    오 서식으로 이런게 되는거군요! 한번 사용해 봐야겠습니다 +_+!


    사족 : 전 그렇게 긴글을 안 적어서 쓸일이 있을려나는 모르겠네요 ㅠ.ㅠ

  5. pardonk 2009.05.26 12:44 address edit & delete reply

    감사합니다. 저를 위한 포스트가 있는지도 몰랐네요. 주말이 하도 정신없이 지나가서 말이죠.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.05.26 17:47 address edit & delete

      고객을 위해서라면 한발짝 더 나가는 블로그입니다. (엥?)

      저도 주말 동안 정신이 없었는데, 그래도 억지로 조금씩 움직였습니다.
      지금 쓰러지는 것은 노짱께서 바라시는 것이 아닐 것 같습니다.

  6. Favicon of http://demun.tistory.com BlogIcon demun 2009.05.26 19:27 address edit & delete reply

    깔끔하고 좋은거 같습니다. 고마워요.블로그에서 꼭 필요한 부분이군요^^

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.06.04 13:27 address edit & delete

      잘 쓰시기 바랍니다.

  7. Favicon of http://unius.tistory.com BlogIcon 필넷 2009.05.27 09:14 address edit & delete reply

    이렇게 사용하는군요.
    잘보고 갑니다. ^^*

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.06.04 13:27 address edit & delete

      잘 쓰시기 바랍니다.

  8. Favicon of http://shinlucky.tistory.com BlogIcon shinlucky 2009.06.04 12:50 address edit & delete reply

    [emo=082]
    이것도 블로그에 잘사용하겠습니다. ^_^

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.06.04 13:27 address edit & delete

      잘 쓰시기 바랍니다.

  9. Favicon of http://jud.pe.kr BlogIcon BWaL 2009.06.07 00:31 address edit & delete reply

    감사히 쓸게요 (__) 오늘 와서 열심히 배워가네용.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.06.07 02:41 address edit & delete

      뭐 이런 걸로요... [emo=071]
      (거만거만)

  10. Favicon of http://miru.tistory.com BlogIcon miru 2009.06.13 08:32 address edit & delete reply

    헉~! 파이어폭스3 로 보니 제목줄이 제대로 보이네요~:(
    IE8로만 접속했더니,,, 이렇게 다르게 보이는 것을 몰랐습니다.

    파이어폭스3+IETap 조합으로 웹서핑을 해보니, 쏠쏠한 재미를 안겨주네요~!

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.06.14 19:22 address edit & delete

      IE8에서 제목줄이 다르게 보인단 말씀이신가요? :(

    • Favicon of http://miru.tistory.com BlogIcon miru 2009.06.14 20:37 address edit & delete

      IE8에서는 세로굵은줄은 표시되지만, 가로밑줄이 나오지 않습니다.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.06.14 21:11 address edit & delete

      Win7+IE8에선 가로밑줄도 표시되는데용... :(