내 입맛에 맞는 스킨 만들기 - 1. 배경과 머리를 바꾸자.

텍스트 큐브의 스킨은 크게 두가지 파일에서 수정이 가능합니다.

그게 바로 스킨 수정하기에 있는 skin.html과 style.css인데요.

우리가 주로 손을 댈 곳은 바로 style.css 이 부분입니다.

그러니까 원본 css를 미리 메모장 같은 곳에 붙여 저장해 두셨다가(백업) 실수하면 다시 고치는 것으로 실패를 최소화 하면서 해 보도록 하겠습니다.^^;;

 

먼저 배경화면입니다.

제 배경에는 지금 종이 비슷한 질감이 깔려있습니다.

 

요런거죠.

이 부분은 스타일시트의 이 부분에서 고치실수 있습니다.

/* +++++++++++++++++++++++++++++++++++++++++++++++++
  스킨 기본 스타일
    +++++++++++++++++++++++++++++++++++++++++++++++++ */

body   { font-family: nanum; font-size:75%; line-height:1.5; color:#999; background:url(images/back.jpg) #6e604e;  padding-top:40px;}

제가 넣어둔 back라는 이미지가 바로 위에 있는 저 질감입니다.

그러니까 자신의 스타일 시트에서 제일 위에 있는 body의 내용에 back.jpg대신 다른 이미지(자신이 만든것)의 파일명을 넣어주시면 됩니다.

물론 이미지 업로드는 코멘트 창 다룰때 썼으니까 아실테구요..^^;;

 

그러면 전체 배경에 원하는 이미지를 넣을수 있게 됩니다.

여기서 주의사항은 이미지가 저런 패턴이 아니라 한쪽에만 들어가야 하는 것일때의 문제입니다.

보시다시피 제가 써 둔 저 내용은 repeat이 빠져있기 때문에 그런데요, 뭔가 한쪽에만 들어가는 이미지의 경우는 다음과 같이 반복형식을 지정합니다.

 

repeat-x : 가로 반복

repeat-y : 세로 반복

no-repeat : 반복하지 않음.

 

그러니까

이런 이미지(오이카와 미츠히로입니다...^^;;)를 넣고 왼쪽에 붙여버리고 반복시키지 않고 싶다. 라고 한다면.

body   { font-family: nanum; font-size:75%; line-height:1.5; color:#999; background:url(images/back.jpg) #6e604e; background-repeat:no-repeat; background-attachment:fixed; background-position:100 0; padding-top:40px;}

 

이런식으로 써 주면 됩니다.

background-repeat:no-repeat; background-attachment:fixed; background-position:100 0;의 역할이 바로 그런거니까요.

그 중에서 position 100 0은 왼쪽 상단을 기준으로 놓는 것인데 100은 상단 기준 맨 아래 부분, 0은 왼쪽 기준 가장 왼쪽이 됩니다.(뭔가 말이 이상하지만...^^;;)

attachment:pixed로 해 주면 고정되는거구요.

 

자, 이제 배경은 대강 대충 변경 방법을 알게 되었습니다.(찔린다.... 대강 대충....)

그럼 이제 머리를 바꿔볼까요?

 

머리라 하는 건 타이틀이 있는 부분을 말합니다만...

그 부분을 쉬운 편집으로 바꾸는(사실 이게 스킨 만들긴 좀 편합니다. 하지만 저는 거기서 수정, 변경 버튼이 마음에 안들어서 말이에요. 일반 스킨으로 바꾸고 있습니다.)건 그냥 이미지를 가져가 넣어주면 됩니다.

하지만 저처럼 일반 스킨(제 스킨은 원래 스토리노트 스킨입니다.)을 쓰시는 분들께서는 코드를 하나하나 손보셔야 하니까 그 부분만 쓸게요.

 

스타일 시트에서 다음과 같은 내용을 찾습니다.

  #header   { padding:30px 0;}
아마도 저정도로 되어 있지 싶은데요.(하도 손을 많이 봤더니만...)

저 부분에서 이제 이미지와 높이를 설정해볼게요.

이미지는 배경할때랑 비슷합니다.

전 이런 이미지를 넣을거구요.(아직 실제 적용은 하지 않고 있습니다.)

그럼 위의 저 코드는 이런식으로 사용됩니다.

  #header   { padding:0px 0; background: url(images/tc_top.png) 0 0 repeat; height:180px;}

padding=0는 그냥 두셔도 됩니다. 보시다시피 저런 이름으로 지붕 모양을 만들었으니까, 그 파일명이 들어가구요. 높이를 설정해 준 후 반복을 시켜줍니다.(원하는 크기대로 만들었을 경우는 안해도 될테지만요.)

 

그리고 제목의 위치를 잡아줍니다.

그 부분은 아래의 코드에서 잡습니다.

/* ***** Header **************************************** */
#header h1  { overflow:hidden;}
#header h1 a { color:#f60; text-decoration:none; background:url() 10px center no-repeat; padding-left:120px;}

위의 내용 중 a가 링크 관련이니 그 쪽으로 손을 쓰도록 할게요.

/* ***** Header **************************************** */
#header h1  { overflow:hidden; padding-left:120px; padding-top:80px;}
#header h1 a { color:#707070; text-decoration:none; background:url() 10px center no-repeat; padding-left:120px; padding-top:120px;}

 

넣어 준 것은 위에서부터의 padding입니다. 어느정도 간격을 잡고 최상단으로 시작하란거죠.

우리가 흔히 말하는 패딩점퍼의 패딩이 바로 저거랍니다.

color가 달라진건 저 이미지에 맞춰서 바꾸기 때문에 그런거예요. 링크 걸린 색을 바꾸란거예요.

 

 

아아... 일하던 도중에 막 쓴거라 좀 횡설수설에 어설플수도 있습니다.

혹시 더 궁금하신 부분은..... 아시죠? 리플 달아주시는거?