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

이 글은 티스토리의 style.css의 내용에 대한 이해를 통하여 css도 배우고 티스토리 스킨을 변경하는데 도움이 되기를 바라는 마음에서 포스팅을 하며 "티스토리스킨 style.css 완전정복 1"에서 이어지는 글입니다. 편의상 평어체를 생략합니다.

사설없이 바로 들어가겠습니다. ^^

글자크기 태그 h1, h2, h3 ...

h는 글자크기를 지정하는 태그입니다. h1이 가장 큰글자이고 h2, h3, h4...h6 까지 숫자가 클수록 글자는 작아진다.

<h1>style.css 완전정복 </h1>의 결과물은 아래와 같습니다.

style.css 완전정복

h1의 원래크기는 위와 같지만 스타일쉬트를 아래와 같이 지정하면

h1 {font-size: 0.8em;color:#003366} 
  ; h1 태그를 사용하는 경우 글자크기를 0.8em, 글자색이 바뀌도록 설정

결과는 아래와 같습니다.

style.css 완전정복


 

 font 속성

; font 속성은 글자크기, 색상, 폰트종류, 두께등을 지정할때 사용한다.

※ font에서 지정가능한 값

  •   font-family               => 폰트종류
  •   font-style                => 폰트형태 지정 ( italic,oblique,normal(기본값) 을 지정가능) 
  •   font-variant             => 대문자로 표시 (지정값은 small-caps)
  •   font-weight             => 폰트두께 지정 (값은 bold, bolder, 100,200,..,900 까지의 숫자)
  •   font-size                => 폰트크기 지정 
  •   color                      => 폰트색을 지정 RGB 색상코드표

※ font size 에서 사용되는 단위

  • px, pt는 절대크기 (일반크기는 12px)
  • em, %는 상대적 크기 (예. 0.75em, 75%)
  • 웹 브라우저의 기본크기는 1em, 100%로 특별히 크기를 지정하지 않으면 이 크기로 표시됨.
  • 필자의 블로그는 12px 로 지정되어 있으며, 0.75em, 75%와 같은 크기이다.

예제) 카테고리 옆에 표시되는 숫자에 대한 스타일

   .c_cnt       { font:0.75em Tahoma, Helvetica, Arial, Gulim, sans-serif;  color:#f30;}

   위 스타일은 카테고리 옆에 표시되는 글의 갯수에 대한 스타일이며 약식표기이다. 글자 크기를 0.75em으로 지정하고 기본글꼴은 tahoma, 대체글꼴은 Helvetica, Arial, Gulim, sans-serif 순으로 대체되고 글자색은 #f30으로 지정한 예이다.

#f30 은 #ff3300을 줄여서 표현한것이다.

관련글. RGB 색상코드표
           색상 테이블 (컬러 테이블)

 

letter-spacing 

;자간(글자와 글자사이)을 조절

 예제)

<p>letter-spacing 비앤아이 블로그 - default</p>
<p style="letter-spacing:1px">letter-spacing 비앤아이 블로그 - 1px</p>
<p style="letter-spacing:0.1em">letter-spacing 비앤아이 블로그 - 0.1em</p>
<p style="letter-spacing:0.5em">letter-spacing 비앤아이 블로그 - 0.5em</p>

 

word-spacing 

; 단어와 단어사이의 간격을 조절한다.

예제)

<p>word-spacing - 기본 </p>
<p style="word-spacing:0.1em">word-spacing - 0.1em </p>
<p style="word-spacing:0.5em">word-spacing - 0.1em </p>

 

text-transform 

; 영문의 대소문자를 변경하는 속성.

※ 값의 종류

  • capitalize   : 첫 글자만 대문자로 바꿔서 표시
  • uppercase : 모든 영문자를 대문자로 변경
  • lowercase : 모든 영문자를 소문자로 변경


기타 속성들 (width,height,text-align)


width 

;폭을 지정한다. div나 span의 영역폭, 이미지의 폭등을 지정할때 사용

height

;높이를 지정할 때 사용. div나 span의 영역 높이, 이미지의 높이(세로크기)등을 지정할때 사용

text-align

. 글자나 그림의 가로 정렬에 사용
. 정렬방식: left, center, right, justify (양쪽정렬)

생각보다 꽤 시간이 걸리는군요.
오늘은 여기까지입니다.


CSS 관련글 목록.
- 스타일시트(CSS) 이해하기 for 티스토리
- 스타일시트(CSS)의 선언방법 1
- 스타일시트의 선언방법 및 사용 예제 2
- 크리스마스 트리장식으로 알아보는 CSS
- 서식활용으로 포스팅 시간을 줄여보자.
- 서식으로 배우는 스타일시트(CSS)
- 티스토리 뽀개기 - 스킨 구조(skin.html) 이해하기
- 티스토리 뽀개기 - div 와 span
- (css) border로 꾸미는 나만의 이미지 스타일

댓글을 달아 주세요

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

  1. BlogIcon 글벌레 2009.10.22 00:57  댓글주소  수정/삭제  댓글쓰기

    꼼꼼히 정리하시네요 ^ ^* 추천드리고 갑니다 . 햐 , 근데 추천하였더니 로그인하고 추천하면 열린 편집자가 될 수 있다고 뜨네요 _ _ 나중에 로그인 후 또 추천해서 더블 추천드려야겠습니다 ^ ^* 많은 사람들에게 도움이 될 글이네요 ^ ^*

    • BlogIcon Kay~ 2009.10.23 09:21 신고  댓글주소  수정/삭제

      ㅋㅋ 저도 열린편집자 욕심이 생길까봐 로그인을 안하고 추천을 하는경우가 많은데..
      랭킹에는 로그인 한다음에 추천하는 것이 더 가산점이 있는것 같더라고요!
      추천 감사드리고요.. 더블추천은 안될껄요? ㅎㅎㅎ

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

    정리를 너무 잘하셨네요....비앤아이님...추천하고 갑니다...화이팅!!!

    • BlogIcon Kay~ 2009.10.23 09:22 신고  댓글주소  수정/삭제

      감사합니다. 이런 글들 투자하는 시간, 노력에 비해 선호도는 떨어지는것 같아요!
      그래도 필요로 하는 분들께 도움이 되었으면 좋겠네요!

  3. BlogIcon 라이너스™ 2009.10.22 10:03 신고  댓글주소  수정/삭제  댓글쓰기

    여기올때마다 도임이 되는 팁들을 하나씩 쏙쏙.^^
    필요할때마다 오기도 하죠.ㅎㅎ;

  4. BlogIcon 보시니 2009.10.22 11:20 신고  댓글주소  수정/삭제  댓글쓰기

    이거 모아서 책 한권 내셔도 될 듯 한데요?ㅎㅎ

    • BlogIcon Kay~ 2009.10.23 09:24 신고  댓글주소  수정/삭제

      ㅎㅎ 스타일쉬트로만 책을 내려면 아직도 시작단계라 할 수가 있지 않을까요?
      전 가장 기본적인것만 다루고 있거든요! ㅎㅎ

  5. BlogIcon wonside 2009.10.22 11:24  댓글주소  수정/삭제  댓글쓰기

    도움많이 되는 포스팅이네요~
    카이님 블로그 구독해야겠습니다~^^

    즐거운 하루 되세요~

  6. BlogIcon 머니야 머니야 2009.10.22 12:01 신고  댓글주소  수정/삭제  댓글쓰기

    아어...css가 매우 중요하고 도움이 크게되긴 하지만..
    우리 케이님이 이걸 강의하실려면..ㅠ.ㅠ
    엄청 쉽지 않으실것 같단 생각이 마구 드네요....홧팅하세요~!

    • BlogIcon Kay~ 2009.10.23 09:27 신고  댓글주소  수정/삭제

      ㅋㅋ 머니야 머니야님의 걱정 감사합니다.
      css를 아시는 분만 그런 생각을 하시죠.
      그래도 시작을 했으니 기초과정만큼이라도 끝을 보려고 합니다.
      전 대.출이 더 어렵더라고요..ㅋㅋㅋ

  7. BlogIcon 소인배닷컴 2009.10.22 14:16 신고  댓글주소  수정/삭제  댓글쓰기

    과연. . . 이렇게 어려운 내용을. . . ㅎㅎㅎ
    필요할 때마다 이거 보면서 해야겠군요.

    • BlogIcon Kay~ 2009.10.23 09:28 신고  댓글주소  수정/삭제

      간헐적인 포스팅이라 연결이 안되는것 같아서..
      나중에서 실제 소스를 가지고 설명을 하려고 합니다. ㅎㅎ
      필요할때 종종 오셔서 가져가세요! ^^

  8. BlogIcon HEPI 2009.10.22 16:00 신고  댓글주소  수정/삭제  댓글쓰기

    많은 분들을 위해 고생하시는 Kay~님 홧팅!!

  9. BlogIcon White Saint 2009.10.22 22:23 신고  댓글주소  수정/삭제  댓글쓰기

    와... 없는게 없네요? 종종 놀러 올께요~

  10. BlogIcon ageratum 2009.10.23 08:39 신고  댓글주소  수정/삭제  댓글쓰기

    티스토리를 어려워 하시는 분들께 꼭 필요한 정보네요..^^
    즐거운 주말 보내세요~

    • BlogIcon Kay~ 2009.10.23 09:30 신고  댓글주소  수정/삭제

      원래 돈이 되려면 초보를 위한 내용이 좋은데 말입니다. ㅋㅋ
      이건 별.. 돈이 안되는 일 같아요,,, ㅋㅋㅋ
      물론 돈이 전부는 아니겠죠?

  11. BlogIcon 분홍별장미 2009.10.23 09:06 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보입니다 ^^;; 제 블로그는 글씨크기가 계속 9로 되어 있어서 쓸때마다 11로 바꾸고는 했는데...
    정말 감사드려요 ㅎㅎ

    • BlogIcon Kay~ 2009.10.23 09:31 신고  댓글주소  수정/삭제

      아 그러셨군요! ^^
      style.css에서 한번만 수정하면 될껄 여지껏 그냥사용하고 계셨군요.. ^^
      바꾸시면 속이 시원섭섭하시겠어요.. ㅋㅋㅋ

  12. BlogIcon 샷타이거 2009.10.24 13:39 신고  댓글주소  수정/삭제  댓글쓰기

    h1, h2, h3 ....등은 인라인엘리먼트로 본뜻은 글자크기를 지정하는 태그가아닙니다. 물론h1이 가장 큰글자이고 h2, h3, h4... 까지 숫자가 클수록 글자는 작아지지만. 본 목적은 중요도를의미하지요.
    h1은 한페이지내에서 가장중요한것 한번 사용하도록권고되어있고 그리고 다음순서로 h2,h3..순차적으로 되었습니다. 참고바랍니다.

    • BlogIcon Kay~ 2009.10.25 14:36 신고  댓글주소  수정/삭제

      저는 중요도에 따라서 번호대로 사용된다는 것과
      그래서 검색엔진 최적화에 이용된다는 점,
      그리고 블록엘리먼트로 알고 있었는데..
      인라인 엘리먼트인가요?

  13. BlogIcon 둥이 아빠 2009.10.28 20:52 신고  댓글주소  수정/삭제  댓글쓰기

    이건 추천이 딱이네요..

    저도 예전에 뭐가 꼬였는지.. 이번에 확 바꾸었답니다.

    그래서 다시 맞추느라 고생좀 했답니다.ㅎㅎㅎ

  14. BlogIcon MainGT 2009.12.07 21:39 신고  댓글주소  수정/삭제  댓글쓰기

    asp.net 배우는학생입니다~ 덕분에 많이 알고가네요 ^^
    조금은 틀리지만 익숙해지겠죠 ^^

  15. BlogIcon 낮은언덕 2012.10.12 16:33 신고  댓글주소  수정/삭제  댓글쓰기

    카이님 안녕하세요.전에 블로그 강의를 들었던 생각에 찾아와보았습니다.
    이번글을 보면서 저도 블로그 이리저리 만져보고 있는데...
    서식을 사용해서 글을 하나 작성했습니다.
    <h1> ~ <h3>까지요. 그런데 글을 작성할때에는 글씨가 잘 나오는것 같은데 포스팅을 하고난 뒤에 페이지를 보면 글씨가 조그만하게 나오는데 이유가 뭘까요?
    http://wordchurch.tistory.com/5

    그리고 혹시 카이님께서 쓰시는 글자폰트와 줄간격등도 CSS에서 수정하는 것인가요?
    카이님처럼 저의 블로도 내용을 꾸미고 싶은데 방법좀 가르쳐 주세요...부탁드리겠습니다.