최종 마무리 단계이므로 아이콘을 삽입하고 폰트 사이즈를 변경하였습니다. 이곳 을 클릭하면 진행되고 있는 테스트 블로그로 갑니다. 메뉴의 애니메이션 되는 배경이미지의 사이즈가 커서 헤더 영역에 배치하기는 부담이 될 것 같아 좌측 상단에 배치하였습니다. 이번 글에서는 상단에 배경이미지 삽입하고 메뉴를 이동 배치하는 방법과 폰트 사이즈 변경을 알아봅니다. 특히 중요한 것은 티스토리의 CSS는 스킨 자체에 포함된 CSS로 통제되기도 하지만 일부 CSS는 티스토리(다음)센터에서 통제를 하기 때문에 수정이 안되는 것도 있습니다. 하지만 CSS는 금지되지 않는 이상 !important라는 값을 이용하여 센터에서 통제되는 CSS도 스킨에서 통제할 수가 있습니다. 센터에서 통제하는 대표적인 CSS가 다음뷰 애드박스인데 항상 일정한 위치를 점유하고 있어서 우측에 치우친 것을 패딩을 주려고 해도 적용이 안되죠 이럴때는 패딩값 다음에 !important 를 삽입하면 가능합니다. 물론 애드박스의 선택자인 .ad250_outter 에 대해서 CSS에서 설정을 해줘야하죠.
.ad250_outter { padding-right:20px !important; } 라고 정의하면 위처럼 우측에서 20픽셀 떨어져서 위치하게 됩니다. 스킨을 수정하면서 이 기능이 필요한데 사이드바의 카테고리 영역이 하나의 치환자를 사용하여 센터에서 통제가 됩니다. 테이블형식으로 카테고리를 관리하고 있으며 배경색상으로 #F8F8F8의 옅은 회색이 추가 되어있습니다. 카테고리에 메뉴가 적으면 괜찮지만 많아지면 보기가 흉합니다. 그래서 배경을 흰색으로 정해줘야합니다.
1처럼 글자의 배경색으로 옅은 회색이 있는데 흰색으로 바꿀려면 3의 색상코드 다음에 !important를 삽입해주면 됩니다. 이것은 중요하니 반드시 적용하라는 특별명령이라고 생각하면 됩니다. 그러니 우선해서 적용됩니다. CSS는 적용순위가 있죠 3가지 적용방식이 있는데 가장 많이 쓰이는 외부 스타일시트 방식, html의 헤드태그에 삽입하는 임베디드방식, html 태그에 직접삽입하는 인라인 방식입니다. 인라인 방식이 최우선 순위로 적용되지만 !important 가 있으면 이부분이 최우선 순위가 됩니다. 2처럼 배경이 흰색으로 바뀌었습니다.
images8.zip압축파일을 풀면 이번글에서 사용할 이미지가 있습니다.
스킨위자드에서 배경-직접올리기를 선택하고 3의 파일선택 버튼을 클릭하여 압축해제한 폴더에서 top-bg.png파일을 선택합니다. 4에서 좌우반복을 선택하고 정열을 5로 선택하면 상단에 좌우로 반복됩니다. 적용버튼을 클릭하고 나옵니다.
html 편집창에서 <div id="blogMenu2">부터 헤더 마감태그 전까지 블럭설정하고 Ctrl+X키를 눌러 잘라냅니다. <s_t3> 치환자 뒤에 클릭 엔터치고 Ctrl+V로 붙여넣습니다.
블로그 화면에서 보면 좌측상단에 배치됩니다. 그런데 서브메뉴가 있는 메뉴에 마우스 오버하면 메뉴가 나타나지 않습니다. 위로 드랍업되도록 설정했죠. 아래로 내려오게 해야하고 2의 border-bottom도 다른색으로 바꿔야하고 글자크기도 작게하려고 합니다. 우측 상단의 티스토리 메뉴는 색상이 배경과 비슷해서 잘 안보이니 이것도 수정합니다. 메뉴바가 제거되면서 헤더부분에 서치박스가 어긋나는 것도 수정합니다.
스킨파일에서 menu.css파일을 열고 6번째줄에서 1부분을 444로 수정합니다. 75번째줄에서 NaunumGothicWeb, 을 추가합니다(콤마를 반드시 추가). 웹폰트를 사용할 것이니 미리 추가합니다. 76번째줄에서 폰트사이즈를 14로 수정합니다. 203번째줄은 제거하면 서브메뉴가 아래로 내려옵니다. 저장하고 블로그에 업로드합니다.
화면설정-화면출력을 선택하고 메뉴바 스킨에서 3의 직접꾸미기를 선택합니다. 글자색을 클릭하여 어두운색을 선택하고 배경색은 투명도만 100%로 설정하고 저장버튼을 클릭합니다.
이곳 을 참고하여 위처럼 웹폰트 링크를 삽입하고 각 폰트명을 바꿔줍니다. 폰트의 크기도 각 글자별로 요소검사하여 자신의 글에 맞는 크기로 변경해줍니다. 첨부한 스킨 파일을 참고해도 됩니다. footer 부분만 수정해봅니다.
우선 body 태그에 폰트 크기를 설정합니다. 슬래시 다음에 오는 단위가 생략된 숫자는 배율로 line-height(글의 줄 높이)입니다. 15픽셀의 1.6배라는 의미가 됩니다. 폰트 사이즈는 본문(article) 글자 크기를 기준으로 합니다. 즉 body 태그에서 폰트 크기를 설정하면 별다른 설정을 하지 않는 이상 모든 태그에 상속됩니다. 그러므로 본문의 글자는 15픽셀이 됩니다. 스킨위자드에서 게시글탭을 선택하면 제목과 게시글의 글자가 기본값으로 되어있습니다. 하지만 제목은 실제로는 본문보다 크게 설정해야하므로 이 기본글자 크기를 상속받은 후에 1.2em으로 설정합니다. 이것은 기본인 15픽셀에 1.2배라는 의미입니다. 그러니 18픽셀이 되겠죠. 이처럼 기본글자 크기를 정하고 본문은 그대로 상속받으며 크기를 다르게 하고자 할때는 em을 사용하면 됩니다. 아니면 픽셀을 사용해도 됩니다. em이 편리한 것은 여러곳에 설정해 놓았을때 전체를 크게 하고 싶을 경우 body의 크기만 변경하면 비율적으로 전체적으로 변경된다는 것입니다. 폰트크기를 픽셀로 했을 경우에는 각 픽셀의 수치를 다 변경해줘야합니다.
footer부분의 폰트를 0.9em으로 설정합니다. 15픽셀에서 10% 작은 크기가 됩니다. 웹폰트 이름을 입력하고 색상은 짙은 회색입니다. 카피라이트 부분은 약간 작게 해줍니다. 사이드바도 같은 방법으로 요소검사해서 폰트 크기를 설정해줍니다.
서치박스는 1처럼 수정합니다. float:right;를 적용하면 우측으로 배치되고 상단마진을 -30픽셀 적용하여 위로 올라가게 됩니다. 헤더에 2처럼 하단 테두리만 적용하면 밑줄이 만들어집니다.
프로필부분의 사진 박스가 좌측으로 치우쳐있는데 이것의 폭이 175픽셀정도 되므로 width를 설정하고 margin:0 auto;를 설정하면 중앙으로 배치가 됩니다. html 태그중 중앙정렬하는 <center></center>태그가 있는데 현재 사용은 가능하지만 w3c의 권고에 의하면 반대되는(Deprecated) 태그로 앞으로 언제 제거(Obsolete)될지 모르는 태그입니다. 되도록 사용하지 않는 것이 좋습니다.
마무리하려고 글 작성하다보면 자꾸 길어지네요. 다음글은 반드시 마무리 하겠습니다.
현재까지 진행한 스킨입니다.
더보기
'CMS/티스토리 가이드' 카테고리 관련글
