블로그를 꾸밀때 링크색 변환 구문을 이용하면 마우스를 가져갈때, 링크가 연결되었을때의
색깔이나 배경색등을 다양하게 변경을 할수 있어 조금더
세련되게 블로그를 꾸밀수 있습니다.
지금까지 링크색 변환을 이용해서 블로그 꾸미기에 활용한 내용과 기본적인 링크색 변환을
위해 필요한 구문등을 정리해서 포스팅해봤습니다. 



■ 링크색 변환을 위한 구문

기본적인 구문
a:link 링크가 걸린 글자의 속성
a:visited 한번 클릭한적이 있는 링크색깔
a:hover 마우스 올렸을때 글자 속성
a:active 마우스를 클릭후에 갈때 글자 속성
그밖에 기타 구문
background-color:#색깔코드; 배경색
text-decoration:underline; 밑줄표시
text-decoration:none; 밑줄없음
border: 1px solid #색상코드; 1px의 선이있는 테두리

- 기본구문을 사용할때는 사용 순서를 지켜주셔야 합니다.
- visited는 link와 같은 색깔로 설정하는게 깔끔해 보이기때문에 사용하지 않는게 좋습니다. 


■ 본문링크(article) 색깔변경 의 색과 배경링크 변경하기







HTML/CSS편집메뉴에서 style.css부분에서

- .article(본문)을 찾는다.

- a(링크걸렸을때 색깔 변경)부분을 찾아서 색깔을 수정해주시면 됩니다.  
- 배경색을 넣어주려면 추가로 background-color:#색깔코드;를 넣어주시면 됩니다. 



■ 페이징 색깔변경에 이용하기

본문하단에 페이징부분에 마우스를 가져가보면 변경된 부분을 확인하실수 있습니다.  


skin.html 부분


style.css



#paging(페이징부분) a(링크걸렸을때) num(숫자표시부분)
#paging(페이징부분) hover(마우스 올려놓았을때) num(숫자표시부분)
border(테두리색깔), background-color(배경색변경)



■ 나만의 카테고리 다른글 보기에 이용





skin.html/본문

본문안 원하는곳에 나만의 카테고리.txt의 내용을 넣어주시면됩니다. 



1. 티스토리 글쓰기에서 html모드로 들어갑니다.
2. 원하는곳에 나만의 카테고리.txt내용을 넣어주시면됩니다.
3. 내용은 글쓰기 모드에서 원하는 내용으로 수정해주시면됩니다.


HTML/CSS편집 style.css에서 아래의 내용만 추가해주시면됩니다. 




#TB(style.css나 본문의 넣어주는 <div="TB">라는 곳)의 a(링크가 연결될때 색깔)
#TB( <div="TB">라는 곳)의 a:hover(마우스를 올려놓았을때 색깔)


■ 후기

 
잘못된 구문이 있으면 바로 이야기좀 부탁드리겠습니다. ^^;;


댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. 잘 배우고 가요~ ^^

    2010.08.21 16:32 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. 이것도.. 블로그 새로 꾸며봐야지 해야지 하면서..
    계속 미루다보니.. 요건도 못하고 있네요;..

    2010.08.21 16:42 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. @.@ 홈페이지 개선은 끝이 없군요. @.@ ㅎㅎ
    날씨가 무더운데, 주말 건강하게 보내세요.^^; ㅎ

    2010.08.21 16:52 신고 [ ADDR : EDIT/ DEL : REPLY ]
  5. 멋진정보입니다. css의 고수인 티비님~!!

    2010.08.21 17:34 신고 [ ADDR : EDIT/ DEL : REPLY ]
  6. 유용한 정보군요.
    저는 무서워서 못해요 ^^;

    2010.08.21 17:37 신고 [ ADDR : EDIT/ DEL : REPLY ]
  7. 저번에 수정하다 다 날려서요 ㅋㅋ;;
    이 쪽엔 무지에 가까움..

    2010.08.21 18:23 신고 [ ADDR : EDIT/ DEL : REPLY ]
  8. 아이구 어질어질. 찬찬이 뜯어 봐야겠네요.

    2010.08.21 18:35 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 일곱가지님의 지금 기본스타일도~깔끔하고 멋있으니깐요~
      여유가지고 조금씩 배워두시면 좋으실꺼예요~!

      2010.08.21 19:13 신고 [ ADDR : EDIT/ DEL ]
  9. 아, 그렇게 하면 훨씬 보기 좋겠네요.
    날 좀 선선해지면 머리 써서 따라해야겠어요.^^;;

    2010.08.21 19:54 신고 [ ADDR : EDIT/ DEL : REPLY ]
  10. 오홋 완벽하신데요 ^^
    수정할부분이 안보여요 ^^
    html의 경우 xhtml로 스킨이 꾸며져 있다면 소문자로 하는게 맞답니다 ^^
    그것만 신경쓰시면 될것 같아요~

    2010.08.21 21:05 신고 [ ADDR : EDIT/ DEL : REPLY ]
  11. 언제나 좋은 정보 감사합니다.
    즐거운 주말 보내세요 ^^

    2010.08.21 21:38 신고 [ ADDR : EDIT/ DEL : REPLY ]
  12. 티비님, 안녕하세요^^
    하루종일 놀러 다니느라 방문이 좀 늦었습니다.
    죄송합니다~~^^
    이 포스팅도 기억해 놨다가 나중에 필요할 때 참고해야 할 글이네요~ㅋㅋ
    좋은 글 감사드립니다.
    좋은 밤 되세요~~

    2010.08.21 23:48 신고 [ ADDR : EDIT/ DEL : REPLY ]
  13. 오늘도 좋은 정보네요.
    블로그에 적용해 보야 겠어요^^

    2010.08.22 00:10 [ ADDR : EDIT/ DEL : REPLY ]
  14. 비밀댓글입니다

    2010.08.22 01:35 [ ADDR : EDIT/ DEL : REPLY ]
  15. 비밀댓글입니다

    2010.08.22 01:36 [ ADDR : EDIT/ DEL : REPLY ]
  16. 우와!!!
    또 요긴한 팁을 주시네요. 저도 한번 바꿔 볼 것이 있는지 좀 봐야겠어요.

    2010.08.22 10:49 신고 [ ADDR : EDIT/ DEL : REPLY ]
  17. 똑같이 적용 했습니다~ㅎㅎ 더 비뻐진것 같네요~??
    헌데 오늘은 쉬는날 인가요?

    2010.08.22 13:23 신고 [ ADDR : EDIT/ DEL : REPLY ]
  18. 처음에 열정적으로 하다가 이젠 뭐.. 스킨은 그러려니 해요.. ㅋㅋ;; 저도 사람이라..

    2010.08.22 15:00 신고 [ ADDR : EDIT/ DEL : REPLY ]
  19. 비밀댓글입니다

    2010.08.22 23:59 [ ADDR : EDIT/ DEL : REPLY ]
  20. 오호! 유용해여 ~~ ㅎㅎ
    조만간 적용 한번 해봐야겠어요 ^^

    2010.08.24 18:49 신고 [ ADDR : EDIT/ DEL : REPLY ]
  21. great post

    2012.03.14 17:14 [ ADDR : EDIT/ DEL : REPLY ]