티스토리스킨 style.css 완전정복 1

티스토리는 이용자측면에서 보면 skin.html과 style.css로 구성되어 있다.

  • skin.html : 블로그의 구조 및 컨텐츠 표시
  • style.css : 블로그에 표시되는 문단 및 글자에 대한 여러가지 속성을 담고 있는 파일로 skin.html에서 호출하여 사용됨

이 2개의 파일중 여기서 설명하려는 내용은 style.css 파일속에 들어있는 내용의 일부이다.

style.css에는 블로그 제목의 크기 및 색깔, 블로그의 링크색, 글자색, 폭, 줄간격, 배경색등의 정보가 담겨져 있고 블로거가 언제든지 임의로 수정이 가능하여 본인만의 스킨을 만들 수도 있다.

내 스타일 어때?

내 스타일 어때?


claire 04 © studio.es by Vincent Boiteau 저작자 표시비영리동일조건 변경허락

 이 style.css 파일속에 들어 있는 내용은 css(cascading style sheet)라고 하며 스타일쉬트라고도 한다. 


티스토리의 style.css 내용과 의미

이제 본격적으로 style.css의 내용 하나하나에 대해서 알아보자. 티스토리 관리자 페이지에서 보는 style.css는 아래 그림과 같다. 각각의 선택자와 속성의 의미를 알게 되면 스킨을 원하는 모양으로 바꿀 수 있을것이다.

style.css 화면

시작하기 전 알아야 할 사항

  • 블로그는 html 언어로 되어 있음
  • 웹(web) 페이지도 html 언어로 되어 있음
  • 고로 블로그는 웹페이지, html 문서로 표현할 수 있음

 

@charset "utf-8"; 

style.css의 제일 위에 있는 내용으로 문자셋을 UTF-8로 지정하는 기능이다. UTF-8은 표현할 수 있는 문자수가 많고 호환성이 좋아서 글로벌 캐릭터 셋으로 사용된다.

참고. css의 약식표기

 

 body {   ....   }

html 문서(블로그) 전체에 적용할 내용을 지정한다. html의 시작태그가 <body> 태그이기(최상위태그) 때문에 body 에 대한 속성을 지정하면 블로그 전체에 영향을 미친다.

body 에서 지정한 스타일에 대해서 알아보자

 body{
  font:12px/1.5 Dotum, Verdana, AppleGothic, Sans-serif;
  color:#666;
  /*@background-image=background-image:url(images/bg.gif);*/ background-image: none; /*@*/
  /*@background-image-position=background-position:;*/ background-position: left top; /*@*/
  /*@background-image-repeat=background-repeat:repeat;*/ background-repeat: no-repeat; /*@*/
  /*@background-color=background-color:;*/ background-color: #FFFFFF; /*@*/
  padding:0; margin:0;
}

케이(Kay~)의 블로그에는 body 스타일이 위와 같이 지정이 되어 있는데 내용중  /* 와 */ 사이의 내용은 주석이므로 무시해도 된다. 그럼 각각의 속성별로 어떤 의미가 있는지 간단하게 알아보도록 하자

body{
  font:12px/1.5 Dotum, Verdana, AppleGothic, Sans-serif;
  글자의 크기를 12px/1.5 크기로 지정하고 기본글꼴을 돋움(dotum)으로 하되 돋움글꼴이 없는경우
  대체글꼴로  Verdana, AppleGothic, Sans-serif 을 지정했다. ( 글꼴크기에 대한 궁금증은 여기 )

  color:#666; 
  블로그의 글자색 지정 (색상코드는 
RGB 색상코드표 참조)

  background-image: none;         => 블로그의 전체 배경이미지 지정, none은 없다는 의미
  background-position: left top;   => 배경이미지가 있는경우 왼쪽 상단에서부터 표시
  background-repeat: no-repeat; =>이미지 한번만 표시하기
  background-color: #FFFFFF;     => 배경색을 흰색(ffffff)으로 지정, 배경이미지가 있는경우 무시됨
  padding:0; margin:0;                => html 문서의 패딩과 마진을 없앰
}

배경이미지를 지정할때는 "background:url(이미지url)" 과 같은 형식으로 지정하면 된다.
또는 background-image:url(이미지 url) 과 같이지정해도 된다.

예) <div style="background:url(./image/bg.gif)"> 상대경로 </div>
     <div style="background:url(http://ccoma.tisotry.com/logo.jpg)">이미지 절대경로</div>

background의 약식표현

   "background:url(images/ico_prev_no.gif) left top no-repeat" 와 같이도 표현

추가 pm 10:40

링크 선택자 (a:link 등)

링크가 걸린 텍스트에 대한 서식지정 부분이다. 링크가 걸린 글자위에 마우스를 올리거나  클릭시 글자색이나 크기등을 지정할 수가 있다.

a:link          { color:#333;     text-decoration:none;}     =>클릭 안한 링크색 지정
a:visited       { color:#333;     text-decoration:none;}    =>한번이라도 클릭한 링크 색 지정
a:hover         { color:#666;  text-decoration:underline;} =>링크된 글자에 마우스를 올렸을때의 글자색과 밑줄문자를 지정
a:active        { color:#666;     text-decoration:none;}    =>마우스를 클릭했을때

 * text-decoration은 none, underline, overline, line-through 등을 지정할 수 있다.

티스토리의 경우 위의 선택자를 이용하여 본문중의 링크색, 사이드바의 링크색이나 글자속성등을 변경할 수 있으나 현재 티스토리는 본문(포스트 본문)과 사이드바의 링크를 따로 설정하고 있기 때문에 여기서 아무리 바꿔도 변경되지 않는다.

관련글. - 티스토리 포스트내의 링크색 바꾸기

댓글을 달아 주세요

댓글창에 배경그림 넣는방법

  1. BlogIcon 트레이너"강" 2009.10.20 19:25 신고  댓글주소  수정/삭제  댓글쓰기

    저에게는 너무 어려운..html ㅜㅜ 즐거운 저녁되세요^^

  2. BlogIcon 글벌레 2009.10.20 19:53  댓글주소  수정/삭제  댓글쓰기

    햐 , 어제부터 스킨중 style.css 가지고 조금 씨름중이었는데 마침 Kay~님께서 이런 좋은 글을 올려주시네요 . 이게 사실 잘모르면 어렵더라고요 . 방명록 답글 넓이는 #guestList li ul li < 요기서 정하고 그런다는거 오래 안들여다 보면 딱 안보이죠 _ _ 앞으로 좋은 설명 부탁드릴게요 ^ ^* 잘읽고 갑니다 . 추천은 이따 밤에 다음 로그인 후에 누를게요 ^ ^

    • BlogIcon Kay~ 2009.10.20 23:35 신고  댓글주소  수정/삭제

      ㅋㅋ 글벌레님.. 그거 안 만지는 것이 좋아요! ㅎㅎ
      한번 만지면 기본 1시간은 뚝딱 먹어치우는 것이 그놈이지요! ㅋㅋ
      방명록답글 넓이 알려주셔서 찾는데 시간 절약이 될것 같습니다. 감사감사..^^

  3. BlogIcon 빅드레곤 2009.10.20 23:23 신고  댓글주소  수정/삭제  댓글쓰기

    비앤아이님 흐흐흐흐 전 저위에 사진만 자꾸 들어 오는군요.....좋은 정보 감사합니다.

  4. BlogIcon 좋은사람들 2009.10.21 01:08 신고  댓글주소  수정/삭제  댓글쓰기

    저는 처음에.. 스킨위자드 태그가 너무 거슬려서 몽땅 지우고 공부했어요.. 그런데 지금은 그 기능들을 다시 채워넣는게 일이네요~ -_-!

  5. 2009.10.21 08:17  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon Kay~ 2009.10.22 13:10 신고  댓글주소  수정/삭제

      제가 확인해봤는데 일단 큰 이상은 없는것 같아요
      스킨에서 특별히 글자를 줄이는 부분이 있지 않다면
      익스플로러의 글자크기가 작게 설정이 되어 있지 않은지 모르겠습니다.
      또는 em 이나 %로 글자크기를 지정한경우 그런 현상이 나타날 수도 있겠네요!

  6. BlogIcon 보시니 2009.10.21 09:23 신고  댓글주소  수정/삭제  댓글쓰기

    저도 블로그 나름 꾸밀 때 카이님의 강좌를 많이 참고 했습니다.~
    늘 감사하게 생각하고 있습니다.^^

  7. BlogIcon 스마일맨 민석 2009.10.21 11:50 신고  댓글주소  수정/삭제  댓글쓰기

    언제 함 제 스킨 확~ 뜯어 고쳐야 하는데...
    귀찮고 시간이 없다는 핑계로... ㅎㅎㅎ

    • BlogIcon Kay~ 2009.10.22 13:34 신고  댓글주소  수정/삭제

      저도 css 내용을 정리하여 올리지만...
      제 스킨은 손을 못 대고 있답니다.
      가장 중요한 헤드 구성을 못해서이죠.. ㅎ
      그림이나 꾸미는데는 소질이 없어서.. ㅋㅋ

  8. BlogIcon 루비™ 2009.10.21 12:55 신고  댓글주소  수정/삭제  댓글쓰기

    언제 봐도 눈이 뱅글뱅글....
    스킨 한번 바꾸려면 머리가 지끈지끈한답니다..ㅎ

  9. BlogIcon HEPI 2009.10.21 13:26  댓글주소  수정/삭제  댓글쓰기

    이렇게 분석하기가 상당히 귀찮은 작업인데...
    Kay~님의 끈기에 박수를 보냅니다.

    • BlogIcon Kay~ 2009.10.22 13:35 신고  댓글주소  수정/삭제

      정말 은근 시간이 많이 걸리는것 같아요!
      하지만 제가 몰랐던 부분도 간간히 알 수가 있어서 그냥 저냥 할만하네요!

  10. BlogIcon mindnote 2009.10.21 16:13 신고  댓글주소  수정/삭제  댓글쓰기

    <br>하나와 필요할때 마다 대충, 어떻게 버틴 블로거 생활1년...공부해야되는데 늘 바쁘다는 핑계만, 대고 암튼 시간나면 올려주신거 공부좀 해야겠습니다!

  11. BlogIcon sieunsation 2009.12.31 12:44 신고  댓글주소  수정/삭제  댓글쓰기

    저 질문이요! 블로그이름 색은 어떻게 바꾸나요? 계속 찾아봤는데 못 찾겠어요. ㅜ_ㅜ

    • BlogIcon Kay~ 2010.01.02 17:20 신고  댓글주소  수정/삭제

      블로그 이름은 스킨 위자드에서 바꿀 수 있습니다.
      style.css에서는 스킨에 따라 다르겠지만..
      제 블로그스킨의 경우는
      #header h1 a {}에서 바꿀 수 있으므로 참고하세요!

  12. BlogIcon prada glasses 2011.09.14 20:18  댓글주소  수정/삭제  댓글쓰기

    와 ㅋㅋ 저도 이거 알고싶어서 방명록 남겨본적 있었는데!! 정말 원하던 포스팅 입니다. 지금은 아파서 잠을 자야겠고 나중에 차근차근 해봐야겠네요^^ 감사합니다 케이님! 건강하세요.

  13. BlogIcon Replica Watches 2012.08.07 13:42  댓글주소  수정/삭제  댓글쓰기

    Wow really glad i found your blog, i’ll be sure to visit back now i’ve bookmarked it.

  14. BlogIcon Robmhb76 2013.07.26 01:23  댓글주소  수정/삭제  댓글쓰기

    [p]OriginsThis relaxed form of footwear is actually the oldest form of shoe known to man, with evidence on cave paintings that prehistoric man wore their own version of them! [url=http://www.fitflopshoessale.co.uk/fitflop-2013.html]Fitflop 2013 shoes[/url] More recently they have had resurgence but from very humble beginnings . The incredibly soft microfiber interior lining on the upper helps prevent abrasion for all-day [url=http://www.fitflopshoessale.co.uk/fitflop-dass.html]Fitflop Dass[/url] wear . Too many manufacturers these days seem to bypass men and fail to tap into what could be an extremely lucrative market for [url=http://www.fitflopshoessale.co.uk/fitflop-ciela.html]Fitflop Ciela[/url] them . 隆掳Less is more隆卤 Gorgeous, [url=http://www.cheapfitflop.co.uk]cheap fitflop shoes[/url] simple, simple sandals . FitFlop Walkstar Slide Leisure Women [url=http://www.cheapfitflop.co.uk]cheap fitflops online[/url] Black is generally elegant . The Fitflop Online Sale Walkstar 3 Patent Blue has advanced almost [url=http://www.cheapfitflop.co.uk]cheap fitflops sale[/url] all in the past . Now fitflop [url=http://www.cheapfitflop.co.uk]cheap fitflop[/url] shoes come! It can change your life and make the difference . Delight in thong or possibly slide sandals japonica resorts within a number of models that may bring about these individuals fantastic sundresses plus entertaining swimming wear.[/p]