티스토리 스킨 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 for 티스토리' 카테고리의 다른 글

[티스토리] - 티스토리스킨[Tistory skin] style.css 완전정복 1  (0) 2011.12.03

티스토리스킨 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의 약식표기

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 등을 지정할 수 있다.

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

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

이글은 ESM 인증 블러그 조남관 강사님의 글에서 발췌한 것입니다

저작자표시

'css for 티스토리' 카테고리의 다른 글

티스토리 스킨 style.css 완전정복 2  (0) 2011.12.19

+ Recent posts

티스토리툴바