HTML 코드 위젯으로 스킨의 CSS를 내 입맛대로 바꿔봅시다.

텍스트큐브닷컴을 포함한 TNC가 통째로 구글코리아에 인수되면서 수많은(사실 세어보면 얼마 많지는 않음) 사용자들이 앞으로 텍큐닷컴이 어떤 모습으로 바뀔지 알 수 없어 공황장애 및 다른 서비스로 이탈 내지는 이거 뭐야... 무서워... 라는 반응을 보이는 가운데 지금 이런 내용을 알려봤자 앞으로 텍큐닷컴이 어떻게 바뀔지 알 수 없으므로 며칠 지나지 않아 아무 소용 없는 게 되버릴지도 모르는 정보를 하나 소개하려고 합니다.


지금껏 텍큐닷컴이 폐쇄시범단계(이게 뭐야... 그냥 CBT)를 거치면서 받은 제일 큰 불평불만은 "스킨은 도대체 언제 편집할 수 있나요?"일텐데, 일단 텍큐닷컴의 포지셔닝이 "일반인들도 부담없이 쓸 수 있는 강력한 블로그"인 만큼(여기서 '일반인'이란 스스로를 고급 사용자라고 여기지 않는 모든 사람을 지칭하는 것처럼 보이는데, 어떻게 보면 연예인/일반인 류의 어처구니 없는 흑백논리에 휩싸일 여지가 있다), CBT에서는 아직 스킨을 떡반죽 주무르듯 내 마음대로 바꿀 수 있는 단계는 아닙니다.

구조와 디자인의 (철저한) 분리를 추구하는 트렌드(웹표준과 연관이 있나? 아님 말고- 응?)에 따라 티스토리나 설치형 텍스트큐브는 html과 css가 칼로 두부 썰듯 나뉘어져 있습니다. 텍큐닷컴 역시 블로그의 뼈대를 이루는 skin.html은 아직 사용자가 톱질을 못 하지만, 블로그에 옷을 입히는 css 파일은 html 코드 위젯으로 대체가 가능하기 때문에, 어느 정도까지는 (이 블로그처럼/저는 css에 능수능란한 개발자 레벨이 아니지만) 내 입맛대로 블로그의 디자인을 바꿀 수 있어요.

이 방법은 (제가 보기로는) 여담님이 처음 뚫은 루트입니다.


각 위젯은 div으로 싸여있기 때문에, 먼저 이 div를 닫아줍니다.
그리고 이 뒤로 적용할 css 내용을 집어 넣으면 끝!나는, 사실 팁이랄 것도 없이 굉장히 단순한 방법이죠.

이 얍삽(?)한 코드가 먹히는 이유는 간단합니다. 각 스킨은 link rel을 통해 css 파일을 읽어서 디자인을 뿌리는데, css의 내용을 이렇게 위젯으로 변장한 상태로 들여보내면 이 내용이 html 본문에 들어가서 따로 css 파일로 읽어들인 내용은 적용 순서에서 뒤로 밀리기 때문입니다. 그렇기 때문에 일단 위젯에 집어넣은 css를 적용하고 나면, 나머지는 해당 스킨이 지정한 css 파일의 내용으로 블로그 디자인이 꾸며집니다.
하지만 문제는 어떻게 css를 만들어 넣느냐- 겠죠?

여기서 몇가지 부류로 나눌 수 있습니다.

1. 뭐야... 무슨 소린지 도무지 모르겠어... 난 그냥 기본 스킨만 써도 돼.
   -> 그냥 '뒤로'를 누르세요.
2. 뭐야... 무슨 소린지 도무지 모르겠어... 바꾸고 싶긴 한데 뭘 알아야 바꾸지...
   -> css를 굴리는 법을 배우지 않으시려면 역시 '뒤로'를 누르세요.
3. 누군가 때가 되면 멋진 스킨을 올려 주겠지. 난 그냥 기다릴래.
   -> 티스토리로 이주하시거나 '뒤로'를 누르세요.
   
4. 그런데 그 각 스킨의 css를 어떻게 바꿔?
   -> 지금 알려드린대로 해 보세요.
5. 아, 그렇군. 이제 네 도움따윈 필요 없다. 내가 알아서 해 보지.
   -> 네, 그러세요. (댓글로 자랑질 하셔도 괜찮습니다 ㄲ)

일단 내 블로그의 스킨이 불러오는 css 파일을 잡아야 합니다. 소스 보기를 통해 css 파일의 경로를 훔쳐오세요.
불러오는 css 파일은 4개입니다. 우리가 바꿀 것은 위에서 6번째 줄에 있습니다. 제 경우에는 http://fs.textcube.com/service/blog/skin/TC_SimpleGray/style.css 입니다. 스킨별로 진하게 된 부분의 이름이 다르겠죠? 이 파일을 저장(그냥 브라우저에서 보셔도 뭐라고 하는 사람은 없어요)합니다.
뭐라고 뭐라고 스타일이 좌라락 나열되어 있습니다. 각각 스타일이 어디에 어떤 이름으로 지정되어 있는지 알기 위해서 스킨의 html 파일을 따로 저장해서 대조하거나, 다시 블로그의 소스보기를 이용해 찾을 수 있습니다. html 파일의 주소는 물론 style.css 대신에 skin.html을 넣으면 됩니다.

AcroEdit 같은 편집기를 이용해(위젯의 설정 대화창은 너무 작은데다가 글씨도 보일락 말락 하는 어정쩡한 회색이잖아요. (텍큐닷컴은 html을 직접 수정하는 것을 싫어하는 모양입니다. 에디터도 제가 건의하기 전까지는 글자가 죄다 어정쩡한 회색으로 나와서 도무지 뭐가 어디에 있는지 분간할 수 없었어요) 메모장을 이용해도 상관은 없지만, 계속 내용을 바꾸고 만일을 위해 저장해 가며 수정에 수정을 거듭할테니 이왕이면 편하게 가죠-) css 파일의 내용을 바꾸고 싶은 대로 새로 만들어서 복사한 다음 html 위젯의 콩알만한 대화창에 붙여 넣고 저장하면 css 바꿔치기 완료! 중간에 뭔가 잘못되어 블로그가 뒤틀렸다면 위젯을 제거만 하면 원상복귀!(조금 무책임함)

네, 단순 노동입니다. 그래서 스킨을 만드시는 분들은 굉장한 시간과 정성을 투자해 스킨 하나를 토해내는 겁니다. 우리는 그 노력의 결과물을 낼름 따먹기만 하죠. 저는 이미 설치형 텍스트큐브에서 쓰고 있는 디자인과 컬러셋을 비슷하게 적용했기 때문에 따로 시간이 들지는 않았습니다. 하지만 html의 구조와 스타일을 지정하는 이름이 다른 만큼 css와 html을 번갈아가며 내가 적용하고 싶은 스타일이 어느 이름으로 되어 있는지 찾는 데 시간이 좀 걸렸어요.

여기까지 읽으셨다면 지금껏 스타일을 바꾸고 싶어 손이 근질근질 하셨던 분일테니 css 강좌는 따로 안 하겠습니다. (사실 그럴 처지도 안 됨 ㅋ_ㅋ) 검색해 보시면 강좌는 많아요.
그래도 혹시나 이러저러한 걸 바꾸고 싶은데 그게 어디 있는지 잘 모르겠으니 알려줄테냐? 같은 댓글이 달린다면(설레발 치기는... 이런 글에 무플 안습!) 제가 아는 한도 안에서 성의껏(?) 답댓글 달게요.