<hx>태그에 관심을 가진 이유는 노지님 블로그에서 소제목으로 사용한 <hx>태그가 간편하고 괜찮아 보여서 였습니다. 최근 <이미지를 소제목을 <hx> 태그로 변환하는법>이라는 글을 발행하긴 했지만 활용하려면 별도의 이미지가 필요해서 쉽게 활용하기는 힘들어 보였습니다. 

 오늘은 조금더 다양하게 <hx>태그를 소제목을 텍스트로만 활용할수 있는 방법에 대해 포스팅해봤습니다. 평소 글을 쓰다가 블로그 제목, 소제목때문에 고민이셨다면 오늘 자신의 블로그에 잘 맞는 <hx>태그를 설정해 보시기 바랍니다. ^^;


<hx>태그 소제목으로 200% 활용하기 

 <hx>태그 티스토리에 설정하는 방법 

 티스토리 관리자모드 > HTML/CSS편집으로 이동한뒤 하단의 hx태그활용.txt파일의 내용을 CSS 제일 하단에 복사해주면 됩니다. ( 하단의 파일은 노지블로그 <hx>태그내용 원본입니다. )

 
<hx>적용 하는 법

HTML 편집 모드에서 소제목을 자신이원하는 <hx>~</hx>태그로 감싸주시면 됩니다.

1. 글쓰기 우측 상단에 HTML을 체크합니다.



2. 소제목사이를 자신이 설정해둔 <
hx>태그로 감싸주시면 됩니다.



자신만의 <hx> 태그 스타일 꾸며보기 

제목(h1~h6요소)는 h1부터 h6까지 6단계가 있습니다. h1은 큰제목, h2는 중간, h3는 작은 제목으로 사용하며 h4~h6은 필요에 따라서 h3 이하의 제목을 사용할때 사용하면 됩니다. 아래 내용을 참고하셔서 CSS부분 설정을 자신의 스타일에 맞게 꾸미면 됩니다. 

기본적인 글씨크기, 색상, 글씨체 

font-size : 20px; / 글씨크기
color : #000000; / 글자색
font-family: 바탕체; / 글씨체


<hx>태그 하단 밑줄 종류

<hx> 태그에서는 border-bottom을 설정해주시면 하단에 밑줄이 생기게 됩니다. 그리고 선의 종류도 solid(실선), 점선(dotted), 파선(dashed)등 자신이 원하는 스타일로 설정이 가능합니다. 개인적으로는 실선이 가장 무난한것 같습니다. ( 추가로 double 이중선도 있습니다. )



<hx>태그 박스선 

위의 하단 밑줄처럼 <hx>태그에 밑줄처럼 보이게 하기위해서는 하단 border만 설정해주는것을 응용해서 왼쪽만 보이게 하거나 네모 박스등을 만들수 있습니다.


<hx>태그 박스선 응용

 <hx>태그 박스선을 실선(solid)로 왼쪽만 나오게 하고 선의 두께를 조금 두껍게 (20px), 선의 색상을 녹색(#84c55e)으로 조절하면 아래와 같은 소제목이 완성됩니다. 글자가 너무 왼쪽에 붙어있는것 같아서 아쉽다는 생각이 들면 <hx> 태그에 여백을 주면 됩니다.  


<hx>태그 여백주기 

녹색 포인트와 소제목의 간격을 두려면 왼쪽 내부여백인(padding 0 0 0 40px;) 값을 주면 되고 추가로 메뉴전체를 우측으로 이동시키고 싶다면 왼쪽 외부여백값(margin 0 0 0 40px;)을 추가하면 됩니다. ( 여백값은 12시기준으로 위쪽부터 시계방향이라고 생각하시면됩니다. )

 

 

내부 여백 : padding : 0 0 0 40px ; ( 상 우 하 좌 ) 
외부 여백 : margin : 0 0 0 40px ; ( 상 우 하 좌 )

그밖에 

 <hx>태그에 이미지를 활용하려면 아래의 글을 참고하면 됩니다.


 이미지 소제목을 <hx>태그로 변환하는 법 : http://nextgoal.tistory.com/1038



후기

<hx>태그는 계층구조가 있기때문에 h1, h2를 순서대로 나열하는 것이 좋습니다. 예를들어 본문이 시작되고 처음 사용하는 제목에는 article. h1, 그 다음에 나오는 소제목에는 article. h2 이렇게 <hx>태그를 순서에 맞게 설정하고 글을 쓸때도 순서대로 작성 해주셔야 합니다.    

 <hx>태그의 계층구조에서 막혀서 이웃분에게 질문하고 답변을 받는 과정에서 글발행 시간이 많이 늦어졌습니다. (__) 꾸벅~! 
 


신고

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. 요롷게 꾸미면 한결 돋보이겠군요.ㅎㅎ
    잘보고갑니다. 좋은하루되세요^^

    2011.03.30 12:17 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. 소스 안들여다본지 너무 오래 되었더니...크크크...
    다 잊어먹어버렸네요...^^;;

    망각의 동물이라고 누가 그랬던가....ㅠ.ㅠ

    2011.03.30 12:34 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. 깔끔하고 좋네요~^^
    소제목으로 잘 활용할 수 있을 것 같습니다.+_+
    봄날씨네요~^^

    2011.03.30 12:41 신고 [ ADDR : EDIT/ DEL : REPLY ]
  5. 다른 블친님들처럼 찌니도 봐도 잘 이해가. ㅠㅠ
    전 티스토리 안하길 정말 잘한 것 같아요.
    아마 했다면 블로그 문 닫았을 듯
    ㅠㅠ

    2011.03.30 12:42 신고 [ ADDR : EDIT/ DEL : REPLY ]
  6. 이해가 잘됩니다.
    쉽게 잘 설명하신것 같습니다^^

    2011.03.30 13:37 신고 [ ADDR : EDIT/ DEL : REPLY ]
  7. 그렇게 멍충이는 아니었던 것 같은데
    블로깅하면서 오히려 바보가 된 것 같아요.
    골치 아픈 건 도대체 만지기도 싫으니...

    2011.03.30 13:53 신고 [ ADDR : EDIT/ DEL : REPLY ]
  8. hx 태크 한번 더 배우고 가네요 ㅎㅎ
    세상구경님 좋은정보 감사합니다 ^0^
    행복한 하루 보내세요~~

    2011.03.30 14:16 신고 [ ADDR : EDIT/ DEL : REPLY ]
  9. 아공...저두 지금 사용하고 있는 소제목 디자인은 좀 변경해 봐야 겠습니다....
    검은색에 그냥 흰색 글씨로 하니까 뭔가 좀 밋밋한듯하네요...

    2011.03.30 14:39 신고 [ ADDR : EDIT/ DEL : REPLY ]
  10. 저도 어렵네요 ^^;;
    밤에 시간될때 하나하나 차근차근 해봐야 겠네요 ^^
    행복한 하루 되세요 ~

    2011.03.30 14:51 신고 [ ADDR : EDIT/ DEL : REPLY ]
  11. 역시...html를 손대는건 어렵네요 ㅎㅎ

    2011.03.30 16:09 신고 [ ADDR : EDIT/ DEL : REPLY ]
  12. 잘 배웠습니다
    티비님 덕분에 눈이 트여서 알아 볼 수 있게 되었답니다 ^^

    2011.03.30 16:54 신고 [ ADDR : EDIT/ DEL : REPLY ]
  13. 저는 일부러 사용하지 않습니다.ㅎㅎ
    필요하신 분들이 많을 듯 보입니다.^^

    2011.03.30 17:02 신고 [ ADDR : EDIT/ DEL : REPLY ]
  14. 앞으로 블로깅하는데 도움이 될만한 정보네요^^
    필요할때 요긴하게 잘 활용할께요..감사합니다. ㅎㅎ

    2011.03.30 17:32 신고 [ ADDR : EDIT/ DEL : REPLY ]
  15. hx태그란 것도 있었군요...왜 일케 모르는게 많은지요..ㅠㅠ

    2011.03.30 18:36 신고 [ ADDR : EDIT/ DEL : REPLY ]
  16. 아...머리 아프네요..ㅜㅜ 블로그란게 상당히 신경쓸게 많군요..ㅋ
    티비님 블로그를 참조해서 조금씩이라도 나아질 수 있도록 해야겠습니다..^^;

    2011.03.30 20:58 신고 [ ADDR : EDIT/ DEL : REPLY ]
  17. 이 글을 보니 대충 써넘기고 말았던 제 블로그 포스팅에도 좀 변화를 줄 필요가 있구나 하는 생각이 물씬 드네요 ㅠㅠ
    항상 좋은 글 잘 보고 갑니당~!

    2011.03.30 21:58 신고 [ ADDR : EDIT/ DEL : REPLY ]
  18. ㅈ는 이런 어려운건 울 서익이에게 부탁을..^^*
    티비님 좋은 일 하시는겁니다..^^

    2011.03.30 22:18 신고 [ ADDR : EDIT/ DEL : REPLY ]
  19. 만학도로서, 배우는게 한두개가 아니네요~~
    티비님의 열과성을 다한 내용을 넘, 고맙게 보고 있습니다.. T.U.티비님~~

    2014.07.18 17:07 신고 [ ADDR : EDIT/ DEL : REPLY ]
  20. 그런데 모바일에서도 적용되나요? 저는 데스크탑에서는 잘되는데 모바일에서는 css 적용이 안되네요..;

    2015.02.12 13:41 신고 [ ADDR : EDIT/ DEL : REPLY ]
  21. 앗! 정말 친절한 설명 감사드립니다. 제가 완전 초보라서 비약이 있는 설명에서 많이 헤맸거든요. 감사드립니다.

    2017.02.05 19:04 신고 [ ADDR : EDIT/ DEL : REPLY ]

티스토리 툴바