[블로그 뜯기] CSS 파일 뜯기
코덕질/해탈내역들 2008/12/28 13:57
먼저 CSS 파일이란 초 간단히 말해서 홈페이지를 꾸며주는 서식이 들어 있는 파일이라 볼 수 있습니다. 그러므로 블로그의 스킨을 바꾸려면 css파일을 수정해야 하는 것은 지당한 말씀. 하지만 아직 텍스트큐브는 CSS 파일의 수정을 지원하지 않고 있습니다. 이에 따라 필연적으로 우리는 CSS파일을 뜯어야만 스킨변경이 가능한데, CSS파일을 뜯는 방법은 2가지 방법이 있습니다.
1번 같은 경우에는 기본 스킨이 보인 다음에 다시 덮어씌워지게 됩니다.. 문제는 x같은 IE같은 경우에는 css파일이 아예 읽혀지지 않는 문제가 종종 발생합니다.
2번 같은 경우에는 장점이 정식 버전이 나왔을 때는 만든 CSS파일을 그냥 그대로 갖다 붙이면 되기 때문에 이식성도 좋고 근본적으로 더 좋은 방법이라 볼 수 있습니다.
그러므로 여기서는 2번 방법으로 진행하도록 하겠습니다.
그렇게 하려면 css파일의 경로를 알아내야 하는데, 일단 소스코드를 열어보면
이런 식으로 나올텐데, 여기서는 http://fs.textcube.com/service/blog/skin/TC_Textcube/style.css이 베이스(기초)가 되는 css파일입니다.
＊베이스가 되는 CSS파일은 스킨에 따라 틀리므로 꼭 확인하셔야 합니다!!
이 필요한 부분이라는 개념이 광범위합니다 -_-.. 얼핏 봐서는 그냥 엄청난 글자의 행렬이라고 보이기 때문에 어지간히 CSS 파일 수정이라는 것이 곤혹스러운 것이 아닙니다.
일단은 대표적인 것 들 몇개만 소개하도록 하겠습니다.
1) 댓글창에 이미지 넣기 - .tt-input-div속성
여기서 굵게 칠한 부분이 핵심 코드입니다. 여기서는 댓글창의 가로 길이를 480px로 하고 세로 길이는 200px, 그리고 댓글창의 배경 이미지를 '이미지 url'로 한다는 뜻으로 이해해 주시면 되겠습니다.
2) 배경 색상,이미지,폰트 설정하기 - body 속성
여기에서는 꽤 수정 가능한 속성들이 많습니다.
먼저 font-family 속성. 여기에서는 본문의 폰트를 설정할 수 있습니다. 뭐 지정은 자기 나름이고...
2번째로 color 속성. 본문 글자의 색상을 조정합니다.
3번째로 background:url속성. 배경의 이미지를 설정할 수 있을 뿐만 아니라, 이미지의 반복 표시와 위치 지정 그리고 배경색도 지정할 수 있기 때문에 중요한 속성입니다.
3) .c_cnt와 .cnt 속성
이것들은 옆쪽 카테고리에서의 숫자를 표시할 때 색깔을 지정하는 속성입니다. color값을 수정함으로서 색을 변경할 수 있고 직접 해보시기를 권장하는 바입니다..
4) #container, #header, #body, #content, #sidebar 속성
이 속성들은 서로 종속 관계를 가지고 있습니다. 그러니까 #content와 #sidebar은 #body에 포함되어 있고, #body와 #header은 최종적으로 #container에 포함되어 있습니다. 즉 #container가 제일 크고 #content와 #sidebar은 작을 수밖에 없죠 [스킨을 뜯으실 때는 공간 배치도 잘 생각하셔야 합니다!]
이 속성들은 베이스가 되는 css마다 설정방법이 다르고 또 스킨의 외형을 구분해주는 제일 중요한 요소들입니다. 이 속성을 수정하는 데에는 자연히 시행착오가 많을 수밖에 없죠..
하지만 빼놓을 수 없는 요소 몇가지를 설명드리도록 하겠습니다.
5) titleWrap 속성
간단히 말해서 -
이 부분에 해당되는 속성입니다. 배경과 텍스트의 색상 지정이 가능하죠.
6) .article 속성
이것은 본문의 링크나 여러가지에 대한 속성이지만.. 여기서는 링크만 말씀드리도록 하겠습니다. 다른 속성들에 대해서는 직접 탐구해 보시는 것이 나을 듯 하네요 ㅋ
color은 텍스트의 색상 속성이고, border-bottom속성은 밑줄의 종류(직선;solid, 점선;dotted)와 색상을 설정할 수 있습니다.
link는 일반적인 링크에 대한 스타일을 정의합니다.
visited는 방문한 링크에 대한 스타일을 정의하며 보통은 link 스타일과 동일하게 합니다.
hover은 마우스를 올린 링크에 대한 스타일을 정의합니다.
active는 눌렸거나 선택된 링크에 대한 스타일을 정의합니다.
7) .sidebar-1 속성
이 속성은 스킨에 따라 있는 경우도 있고 없는 경우도 있지만 [제일 뜯기 편하다고 들리는] 텍스트큐브 기본 스킨에는 들어가 있는 속성이기 때문에 별도 설명합니다.
여기서 중요한 것은 width(가로)길이인데, #sidebar보다 2px이 작지 않으면 테두리가 정상적으로 표현이 안되더라고요. 그래서 언급해본 속성입니다.
저 나름대로 써 본 글이지만 이해가 되었고 안되었는지는 여러분들에게 달려있습니다 -_-..
부디!! 더 열심히 스킨을 뜯으셔서 텍스트큐브 개발자들의 숨통을 죄여(??) 주자고요 ㅋㅋㅋ [질질]
1. 텍스트큐브 기본 스킨 파일을 로드한 다음 수정한 CSS 파일을 덮어 씌운다
2. 근본적으로 아예 CSS 파일을 다시 만든다
2. 근본적으로 아예 CSS 파일을 다시 만든다
1번 같은 경우에는 기본 스킨이 보인 다음에 다시 덮어씌워지게 됩니다.. 문제는 x같은 IE같은 경우에는 css파일이 아예 읽혀지지 않는 문제가 종종 발생합니다.
2번 같은 경우에는 장점이 정식 버전이 나왔을 때는 만든 CSS파일을 그냥 그대로 갖다 붙이면 되기 때문에 이식성도 좋고 근본적으로 더 좋은 방법이라 볼 수 있습니다.
그러므로 여기서는 2번 방법으로 진행하도록 하겠습니다.
삽질을 시작해 볼까요?
[1] 먼저 베이스가 될 CSS파일을 얻습니다.
그렇게 하려면 css파일의 경로를 알아내야 하는데, 일단 소스코드를 열어보면
이런 식으로 나올텐데, 여기서는 http://fs.textcube.com/service/blog/skin/TC_Textcube/style.css이 베이스(기초)가 되는 css파일입니다.
＊베이스가 되는 CSS파일은 스킨에 따라 틀리므로 꼭 확인하셔야 합니다!!
[2] 얻은 CSS파일에서 필요한 부분을 변경합니다.
이 필요한 부분이라는 개념이 광범위합니다 -_-.. 얼핏 봐서는 그냥 엄청난 글자의 행렬이라고 보이기 때문에 어지간히 CSS 파일 수정이라는 것이 곤혹스러운 것이 아닙니다.
일단은 대표적인 것 들 몇개만 소개하도록 하겠습니다.
1) 댓글창에 이미지 넣기 - .tt-input-div속성
.tt-input-div textarea { width:480px; height:200px; overflow:visible; border:1px solid #ddd; background:url('이미지 url') no-repeat;}
.tt-input-div .btnComment { width:480px; color:#666; padding:5px 3px; border:1px solid #666; background-color:#fff; font-weight:bold; font-family:dotum;}
.tt-input-div .btnComment { width:480px; color:#666; padding:5px 3px; border:1px solid #666; background-color:#fff; font-weight:bold; font-family:dotum;}
여기서 굵게 칠한 부분이 핵심 코드입니다. 여기서는 댓글창의 가로 길이를 480px로 하고 세로 길이는 200px, 그리고 댓글창의 배경 이미지를 '이미지 url'로 한다는 뜻으로 이해해 주시면 되겠습니다.
2) 배경 색상,이미지,폰트 설정하기 - body 속성
body { font-family: dotum, AppleGothic, Arial, Tahoma, Verdana, sans-serif; font-size:0.75em; line-height:1.5; color:#555; background:url('http://fs.textcube.com/blog/0/1892/attach/XVIfDhX8yN.gif') left top repeat-x #eeeeff;}
여기에서는 꽤 수정 가능한 속성들이 많습니다.
먼저 font-family 속성. 여기에서는 본문의 폰트를 설정할 수 있습니다. 뭐 지정은 자기 나름이고...
2번째로 color 속성. 본문 글자의 색상을 조정합니다.
3번째로 background:url속성. 배경의 이미지를 설정할 수 있을 뿐만 아니라, 이미지의 반복 표시와 위치 지정 그리고 배경색도 지정할 수 있기 때문에 중요한 속성입니다.
[위치 속성]
- left : 왼쪽으로 배치합니다
- right : 오른쪽으로 배치합니다.
- top : 위쪽으로 배치합니다.
- bottom : 아래쪽으로 배치합니다.
[반복 속성]
- no-repeat : 배경사진을 반복하지 않습니다
- repeat : 배경사진을 반복합니다.
- repeat-x : 배경사진을 가로방향으로 반복시킵니다.
- repeat-y : 배경사진을 세로방향으로 반복시킵니다.
- left : 왼쪽으로 배치합니다
- right : 오른쪽으로 배치합니다.
- top : 위쪽으로 배치합니다.
- bottom : 아래쪽으로 배치합니다.
[반복 속성]
- no-repeat : 배경사진을 반복하지 않습니다
- repeat : 배경사진을 반복합니다.
- repeat-x : 배경사진을 가로방향으로 반복시킵니다.
- repeat-y : 배경사진을 세로방향으로 반복시킵니다.
3) .c_cnt와 .cnt 속성
이것들은 옆쪽 카테고리에서의 숫자를 표시할 때 색깔을 지정하는 속성입니다. color값을 수정함으로서 색을 변경할 수 있고 직접 해보시기를 권장하는 바입니다..
4) #container, #header, #body, #content, #sidebar 속성
이 속성들은 서로 종속 관계를 가지고 있습니다. 그러니까 #content와 #sidebar은 #body에 포함되어 있고, #body와 #header은 최종적으로 #container에 포함되어 있습니다. 즉 #container가 제일 크고 #content와 #sidebar은 작을 수밖에 없죠 [스킨을 뜯으실 때는 공간 배치도 잘 생각하셔야 합니다!]
이 속성들은 베이스가 되는 css마다 설정방법이 다르고 또 스킨의 외형을 구분해주는 제일 중요한 요소들입니다. 이 속성을 수정하는 데에는 자연히 시행착오가 많을 수밖에 없죠..
하지만 빼놓을 수 없는 요소 몇가지를 설명드리도록 하겠습니다.
1] Width 속성
- 가로의 크기를 조정하는데 보통 텍스트큐브 스킨들은 다들 가로 크기가 600px를 넘질 않습니다.. 적어도 저한테는 답답한 노릇이죠. 그래서 저는 container를 980px, content(본문)를 720px, sidebar을 212px로 설정하였습니다.
2] Margin 속성
- 초 간단히 말해서 [외부 여백]이라고 말하겠습니다. 자세한 것은 직접 찾아보세요.
- 약간 세부적인 속성으로는 margin-left, margin-top 등이 있습니다
3] Padding 속성
- 이것도 간단히 말해서 [내부 여백]입니다.
- 세부적 속성으로는 padding-left, padding-top 등이 있습니다.
- 가로의 크기를 조정하는데 보통 텍스트큐브 스킨들은 다들 가로 크기가 600px를 넘질 않습니다.. 적어도 저한테는 답답한 노릇이죠. 그래서 저는 container를 980px, content(본문)를 720px, sidebar을 212px로 설정하였습니다.
2] Margin 속성
- 초 간단히 말해서 [외부 여백]이라고 말하겠습니다. 자세한 것은 직접 찾아보세요.
- 약간 세부적인 속성으로는 margin-left, margin-top 등이 있습니다
3] Padding 속성
- 이것도 간단히 말해서 [내부 여백]입니다.
- 세부적 속성으로는 padding-left, padding-top 등이 있습니다.
5) titleWrap 속성
간단히 말해서 -
.titleWrap h2 { background:#dddddd; } /* 배경 색상 */
.titleWrap h2 a { color:#224488;} /* 텍스트 색상 */
.titleWrap h2 a { color:#224488;} /* 텍스트 색상 */
6) .article 속성
이것은 본문의 링크나 여러가지에 대한 속성이지만.. 여기서는 링크만 말씀드리도록 하겠습니다. 다른 속성들에 대해서는 직접 탐구해 보시는 것이 나을 듯 하네요 ㅋ
.article a:link { color:#3366cc; border-bottom: #cccccc 1px dotted; text-decoration:none; } /* 링크의 스타일 */
.article a:visited { color:#3366cc; border-bottom: #cccccc 1px dotted; text-decoration:none; } /* 방문한 링크의 스타일 */
.article a:hover { color:#336699; border-bottom: #0000ff 1px solid; text-decoration:none; } /* 마우스 올린 링크 스타일 */
.article a:active { color:#3366cc; font-size: 1.2em; text-decoration:none; }
.article a:visited { color:#3366cc; border-bottom: #cccccc 1px dotted; text-decoration:none; } /* 방문한 링크의 스타일 */
.article a:hover { color:#336699; border-bottom: #0000ff 1px solid; text-decoration:none; } /* 마우스 올린 링크 스타일 */
.article a:active { color:#3366cc; font-size: 1.2em; text-decoration:none; }
color은 텍스트의 색상 속성이고, border-bottom속성은 밑줄의 종류(직선;solid, 점선;dotted)와 색상을 설정할 수 있습니다.
link는 일반적인 링크에 대한 스타일을 정의합니다.
visited는 방문한 링크에 대한 스타일을 정의하며 보통은 link 스타일과 동일하게 합니다.
hover은 마우스를 올린 링크에 대한 스타일을 정의합니다.
active는 눌렸거나 선택된 링크에 대한 스타일을 정의합니다.
7) .sidebar-1 속성
이 속성은 스킨에 따라 있는 경우도 있고 없는 경우도 있지만 [제일 뜯기 편하다고 들리는] 텍스트큐브 기본 스킨에는 들어가 있는 속성이기 때문에 별도 설명합니다.
.sidebar-1 { width:210px; border:1px solid #d9dee1; margin-top:10px; overflow:hidden;}
여기서 중요한 것은 width(가로)길이인데, #sidebar보다 2px이 작지 않으면 테두리가 정상적으로 표현이 안되더라고요. 그래서 언급해본 속성입니다.
저 나름대로 써 본 글이지만 이해가 되었고 안되었는지는 여러분들에게 달려있습니다 -_-..
부디!! 더 열심히 스킨을 뜯으셔서 텍스트큐브 개발자들의 숨통을 죄여(??) 주자고요 ㅋㅋㅋ [질질]
댓글을 달아 주세요
기본틀을 벗어나는 획기적인 스킨을 만들어 보죠.
일단 티스토리 스킨을 염탐하고... - _- 흠흠
이미 텍큐공식블로그 스킨 따라한것만도 대단한데 어디까지 가시려고 -_-;
뭐 기대하겠슴
막상하려니 귀찮네요.
(하지말까...)
구글 텍스트큐브닷컴팀 없이 개발하는 스킨. 그 끝을 보여주죠.
전 김철호님만 믿겠습니다.
숨통 조르기는 전혀 안 될 듯 싶습니다.
펫이 있어야…
... 아니 이분 왜 자꾸 정신줄을 놓으시... [질질질]
잘 참고 하였스빈다.
근데. 진짜 플래시 사용법은 안가르쳐 주실거에욧!
이번에 사용된 주요 액션스크립트 코드에 대해서 설명한 포스트 올렸는데요 (..)
사용법. 그 프로그램 사용법. ㅜㅜ
언젠가 참고해 봐야겠군요...
'언젠가'입니까 ㅋㅋ.
좋은 스킨 만들어 보세요~ *^^
푸하하하
나도 지금 저거 뜯어서 삽질중
삽질은 하라고 있는 법입니다 *-_-*
너무 엄청나서 이젠 무슨 댓글을 달아야할 지도 모르겠습니다..
아니, 이런데에는 그냥 댓글 안달아주셔도 됩니다 (..)
그냥 '닥치고 잘 보았슴'만 해도 충분합니다 (...)
ㅎㅎㅎ, 스타일 검색하다가 님 포스트의 제목보구선... ㅋ
"블로그 뜯기" 라니 ㅎㅏ~!
보니까 네이버 블로그 운영하시네요 ^^; 텍스트큐브/워드프레스 기반의 XHTML/CSS 기반의 블로그를 대상으로 쓴 포스팅이라서 ..