티스토리스킨 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 문서로 표현할 수 있음
style.css의 제일 위에 있는 내용으로 문자셋을 UTF-8로 지정하는 기능이다. UTF-8은 표현할 수 있는 문자수가 많고 호환성이 좋아서 글로벌 캐릭터 셋으로 사용된다.
참고. css의 약식표기
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{ background-image: none; => 블로그의 전체 배경이미지 지정, none은 없다는 의미 배경이미지를 지정할때는 "background:url(이미지url)" 과 같은 형식으로 지정하면 된다. 예) <div style="background:url(./image/bg.gif)"> 상대경로 </div> background의 약식표현 "background:url(images/ico_prev_no.gif) left top no-repeat" 와 같이도 표현 |
추가 pm 10:40
링크가 걸린 텍스트에 대한 서식지정 부분이다. 링크가 걸린 글자위에 마우스를 올리거나 클릭시 글자색이나 크기등을 지정할 수가 있다.
| 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 등을 지정할 수 있다.
티스토리의 경우 위의 선택자를 이용하여 본문중의 링크색, 사이드바의 링크색이나 글자속성등을 변경할 수 있으나 현재 티스토리는 본문(포스트 본문)과 사이드바의 링크를 따로 설정하고 있기 때문에 여기서 아무리 바꿔도 변경되지 않는다.
관련글. - 티스토리 포스트내의 링크색 바꾸기
'CSS for 티스토리' 카테고리의 다른 글
| [css]스타일쉬트 여백 지정시 꼭 알아야 할 padding, margin, width 정리 (24) | 2009.10.23 |
|---|---|
| 티스토리 스킨 style.css 완전정복 2 (32) | 2009.10.21 |
| (css) border로 꾸미는 나만의 이미지 스타일 (29) | 2009.09.24 |
| 티스토리 치환자 정리 (31) | 2009.09.08 |
| 티스토리 뽀개기 - div 와 span (14) | 2009.09.07 |