티스토리 블로그 스킨 만들기 5 - 헤더와 사이드바 수정 1

이전 글에서 큰 레이아웃 박스의 배경이미지를 완성했으니 이제 너저분해진 헤더를 정리하고 사이드바의 위젯박스를 정리해야겠죠. 

 
현재까지 작업한 화면입니다. 헤더부분의 배경이미지가 가로로 repeat되고 있어서 지저분합니다. 워드프레스 테마스킨에는 이곳에 아무것도 없으니 이미지를 제거합니다. 이부분은 스킨위자드를 사용하고 있기 때문에 스킨위자드 설정창에서 제거합니다. 사이드바의 모듈박스는 제목과 상단부분이 많이 떨어져 있어서 세로 폭을 줄여야하고 박스와 박스 사이의 간격이 좁아서 늘려줘야합니다.

구글광고는 컨텐트영역 상단에 728X90 사이즈의 리더보드를 달것이고 사이드바 상단에 250X250 사이즈의 정사각형 광고를 달 것입니다. 사이드바 박스가 264픽셀이라고 좀 작은 느낌이 드는데 포토샵으로 수정한 이미지를 추가해서 늘리는 것도 좋겠습니다.

1. 헤더부분의 정리

헤더의 배경이미지는 스킨위자드에서 추가한 것이므로 스킨위자드 설정화면으로 들어갑니다. 1의 타이틀탭을 선택하고 2의 이미지 사용에 체크해제하면 바로 사라집니다. 그다음으로 3의 블로그 타이틀이 사이즈가 작습니다. 4의 텍스트를 클릭하면 우측하단에 글자의 크기를 조절할 수 있는 곳이 있는데 크기가 32픽셀이 최대입니다. 이를 두배로 늘리겠습니다. 우선 적용버튼을 클릭하고 나와서 CSS 편집창으로 갑니다.

 
블로그 타이틀 글자를 요소검사하면 하단의 CSS창에 #header h1 a 가 나옵니다. 이를 클릭드래그해서 CSS펀집창으로 옵니다. 이를 검색어로 넣고 검색하면 1부분이 나옵니다. 우측에서 2부분을 수정합니다. size 다음에 :32 를 넣고 저장한 다음 스킨위자드화면으로 가서 타이틀탭을 선택하고 텍스트를 32로 설정하고 적용버튼을 클릭하고 나옵니다. 이미 같은 숫자가 입력이 되어있더라도 스킨위자드에 들어가서 적용버튼을 클릭해야 위 CSS에서 입력한 값이 적용됩니다. 다시 CSS 편집화면에서 위 부분을 찾아보면 font-size:/*@title-font-size:32=*/64px/*@*/; 로 수정되어있습니다. 이제부터는 스킨위자드 창에서 8픽셀을 선택하면 40픽셀의 크기로 폰트가 나오게 됩니다. 

글자의 크기가 커졌습니다. 그런데 아래로 내여와있죠. 위로 올려줘야합니다. 요소검사를 해보면 html창에서 2에 마우스를 올리면 1처럼 글자부분에만 하이라이트됩니다. 이것은 하단의 3에 마우스를 올려도 마찬가지 입니다. 그러면 4의 <h1> 태그에 올리면 아래처럼 다른부분이 하이라이트 됩니다. 이것은 html 창에서 트리구조로 상위로 갈수록 부모요소가 선택되는 것입니다. 하단의 화살표방향으로 갈수록 부모요소가 선택되는 것도 마찬가지입니다. 

<h1>태그에 마우스를 올리니 2처럼 하이라이트됩니다. 색상이 바뀌었는데 이것의 의미는 무엇일까요. 파란색은 h1 글자가 블럭요소라서 좌우로 차지하는 영역이고 연두색은 패딩입니다. 즉 상, 좌로 패딩이 있다는 의미죠. 그래서 h1 태그를 클릭했더니 우측의 CSS창에 패딩 속성과 값이 나옵니다. 상단 패딩은 스킨위자드를 사용하고 있군요. 레이아웃에서는 게시글의 넓이를 기준으로 모든 영역이 같이 변동되지만 헤더부분은 타이틀 높이를 기준으로 변동됩니다. 그러니 title-height는 헤더의 높이를 말합니다. 이번에는 4의 블로그 타이틀을 클릭하여 5처럼 나옵니다. 여기서도 title-height를 사용하고 있군요. 이 스킨에서 title-height를 사용하고 있는 것은 이 두곳밖에 없습니다. 그러면 이 높이는 그대로 두고 CSS에서 3의 -65부분만 수정해주면 됩니다.

CSS 편집창에서 @title-height로 검색을 하니 두곳이 나옵니다. 2는 스킨위자드에서 설정된 타이틀 높이입니다. 3부분을 수정해줘야합니다. 수정할때는 항상 이퀄싸인을 제거해줘야합니다. 워드프레스의 패딩이 15필셀이므로 15로 만들려면 2의 수치인 109에서 94를 빼줘야합니다. 그래서 3을 아래의 빨간색 숫자로 수정해준다음, 4의 좌측 패딩은 0으로 수정합니다. 저장하고 스킨위자드로 갑니다. CSS에서 스킨위자드 부분을 수정하면 항상 스킨위자드에 들어가서 적용버튼을 클릭하고 나와야합니다.

스킨위자드에 들어오니 좌측패딩 수정한 것은 적용이 됐는데 상단패딩은 그대로 입니다. 타이틀탭을 선택하고 텍스트를 클릭하면 우측에 높이가 있습니다. 109죠. 그대로 놔두고 그 옆의 적용버튼을 클릭하고 아래에서 적용을 클릭하고 나간다음 다시 들어오면 정상적으로 나옵니다. 블로그 화면에서 새로고침해도 됩니다. 위 화면에서 글자의 크기가 좀 크니까 크기를 8픽셀로 선택하고 색상은 787878을 입력하고 입력버튼을 클릭해줍니다.

사실 타이틀을 폰트로 사용하는 경우는 드물지만 워드프레스와 똑같이 만드는데 의미가 있는 것이고 이런 과정을 거치고 난 다음에는 하나의 티스토리 스킨이 완성되는 것입니다. 

2. 메뉴부분의 정리

메뉴의 배경색을 요소검사하니 배경이미지를 사용하고 있습니다. 3과 4도 배경이미지를 사용하죠 필요없으니 모두 제거합니다. 3을 보면 하위 요소로 <ul> 태그가 있고 트리를 펼치면 하위요소로 메뉴 항목이 있습니다. 이곳은 배경이미지만 지울 것입니다. 선택자인  #header .blogMenu .topWrapBlogMenu 를 클릭드래그하여 복사하고 CSS편집창으로 가서 검색어로 입력합니다.

1과 2는 배경이미지만 담당하는 곳이므로 블럭설정해서 제거합니다. 3은 background속성 부분만 전부 지워줍니다. 대신에 메뉴아래에 점선을 삽입할 것이므로 border-bottom: 1px dotted #000; 을 삽입합니다.

아래 댓글의 자석씌님 질문에 대한 답변입니다. <!--블럭 설정이란 글자가 있는 부분을 클릭드래그하여 배경색이 파란색으로 나오게 하는 것을 말합니다. 블럭설정을 하는 이유는 한번에 여러개의 글자들을 선택하기 위해서이고 제거하거나 다른 곳으로 이동하기 위해 복사를 하게 됩니다. 여기서는 제거를 위해서 블럭 설정합니다. 속성이란 중괄호 안 { } 의 내용중 콜론( : ) 앞의 것을 말하고 콜론 다음은 값이라고 합니다. 그러니 background부터~~~top;까지 블럭 설정해서 Delete키를 눌러 제거하면 됩니다. 그자리에   border-bottom: 1px dotted #000; 라고 입력하면 됩니다.-->

html 편집창에서 스크롤바를 조금 내리면 1의 blogMenu가 보입니다. 빨간 네모친 두곳을 제거합니다. 저장하고 블로그화면에서 새로고침하면 글자의 색상이 흰색이라서 희미하게 보입니다.

글자부분을 우클릭하여 요소검사를하면 white로 나옵니다. 선택자인  #header .blogMenu li a 를 복사하고 CSS편집창으로 갑니다.

검색어로 입력하면 위처럼 나옵니다. 1의 색상 fff(흰색)를 000(검정)으로 바꿔줍니다. 저장하면 제대로 나오게 됩니다. 메뉴부분은 나중에 제이쿼리를 이용하여 예쁘게 꾸밀 것입니다.

3. 사이드바 수정

사이드바의 모듈박스 하나를 선택해서 요소검사를 하면 padding-top이 30픽셀입니다. 이것은 제거합니다. 그리고 4의 bottom-box div 태그를 클릭하면 마진이 없어서 모듈간의 간격이 좁습니다. 우선 선택자인 #sidebar h3를 복사해서 CSS창으로 갑니다.

#sidebar h3 로 검색해서 padding-top부분을 제거합니다. 5를 보면 모듈제목의 아래에 2픽셀의 실선으로 테두리가 있습니다. 이것을 1픽셀의 점선으로 바꿉니다. border-bottom: 1px dotted #d3d3d3; 로 수정합니다. .bottom-box로 검색해서 margin-bottom을 10픽셀 추가해주면 모든 모듈의 배경이미지 박스에 하단 마진이 만들어지므로 모듈간의 간격이 넓어집니다.

현재까지 수정한 것은 위처럼 나옵니다.

CustomSkin(2012-02-04).zip

사이드바의 추가 수정은 다음글로 이어집니다. 이미지가 많아지다보니 글이 자꾸 길어지네요. 글이 길면 지루하죠.