티스토리 스킨 만들기 (초보) - 6강. 블로그타이틀,메뉴

이번강에서는 지난 강에서 만들어놓은 레이아웃에
아래이미지처럼 블로그타이틀과 메뉴가 출력되도록 해보겠습니다.

먼저 크림슨에디터를 실행하고 skin.html을 엽니다.
'상단레이어' 부분에 아래와 같이 입력합니다.
('샵샵'은 '##'으로 바꿔주세요. 쉽게 바꾸는 방법이 지난 강에 설명되어 있습니다.)

<h1><a href="[샵샵_blog_link_샵샵]" title="[샵샵_title_샵샵]">[샵샵_title_샵샵]</a></h1>

</div>

<ul>

<li class="menu_media"><a href="[샵샵_blog_link_샵샵]media" title="미디어로그">Media</a></li>

<li class="menu_location"><a href="[샵샵_localog_link_샵샵]" title="지역로그">Location</a></li>

<li class="menu_guest"><a href="[샵샵_guestbook_link_샵샵]" title="방명록">Guestbook</a></li>

</ul>

</div>

h(헤드라인)태그와 a(링크)태그, ul과 li(리스트)태그에 대해서는 4강에서 배우셨으니 아실 줄로 알고
여기에 쓰인 치환자를 설명하겠습니다.
[샵샵_blog_link_샵샵]은 블로그 주소입니다.
[샵샵_title_샵샵]은 블로그 제목입니다. 관리자모드의 환경설정에서 입력한 제목이 나오는거예요.
[샵샵_blog_link_샵샵]media는 블로그 주소 뒤에/media가 붙어 미디어로그의 주소가 됩니다.
[샵샵_localog_link_샵샵]은 지역로그의 주소이구요,
[샵샵_taglog_link_샵샵]과 [샵샵_guestbook_link_샵샵]은 각각 태그로그와 방명록의 주소입니다.

'샵샵'을 '##'으로 바꿔주는 것 잊지 않으셨죠? 그럼 브라우저에서 결과를 봅시다.

이제 style.css에서 다듬어 줄 차례이군요.
크림슨에디터에서 style.css를 엽니다.

title레이어부터 수정해봅시다.

title레이어의 여백을 설정해줍니다.

.title {padding:20px 0px 0px 50px}

여백 설정에 관해 아직 헷갈리시면, 아래 사이트의 내용을 참고하세요.
http://ilmol.com/wp/css/css_dictionary/margin-padding/

링크걸린 글씨체의 속성을 입력해줍니다.

css 선택자의 속성은 종속이 된다고 했습니다.
title이라는 부모 레이어 안에 h1이라는 자식태그, 또 h1안에는 a라는 태그가 있네요.
title레이어가 할머니, h1이 엄마, a가 딸이 되는 것입니다. 이럴 때는 아래와 같이 입력해주면 됩니다.

.title h1 a {font:25pt Trebuchet MS; font-weight:bold; color:#FFFFFF}

'font:크기 글꼴' 은 약식표기입니다.
'font:굵기 스타일 크기/줄간격 글꼴' 과 같이 더 세분화된 약식 표기를 할 수 있습니다.
그러나 저는 위의 소스처럼 크기와 글꼴만 묶어서 약식표기하고 나머지는 정식표기 하는 방법을 즐겨 사용한답니다.
용의자님의 블로그에 font 속성에 관해 잘 정리해 두신 포스트가 있습니다. http://yongja.tistory.com/20

블로그 제목을 한글로 사용하신다면 Trebuchet MS 대신에 사용하실 한글폰트명을 입력하시면 되겠습니다.
ex) NanumGothic, Malgun Gothic

블로그 제목에 마우스오버하면 원하는 글씨색으로 변하게끔 해봅시다.

.title h1 a:hover {color:#E1EBF9}

마우스 오버시 밑줄이 생기게 하고 싶으면 'text-decoration:underline' 을 입력하면 됩니다.
'border-bottom:#FFFFFF 2px dashed' 와 같이 밑줄의 색깔과 크기, 스타일을 지정할 수도 있습니다.

title레이어의 완성된 속성을 style.css에 아래처럼 넣어주면 됩니다.

.title {padding:20px 0px 0px 50px}
.title h1 a {font:25pt Trebuchet MS; font-weight:bold; color:#FFFFFF}
.title h1 a:hover {color:#E1EBF9}

브라우저에서 체크해보겠습니다.

마우스 아웃

마우스 오버

이제 topmenu레이어의 style을 다듬으면 스킨의 상단부분은 완성되겠네요. ^^

topmenu레이어의 여백을 설정하고, 오른쪽으로 정렬되게 합니다.

.topmenu {padding:45px 20px 0px 0px; text-align:right}

'text-align:left'는 왼쪽, 'text-align:center'은 가운데 정렬이예요.

Blog, Media, Location, Tag, Guestbook은 각각 하나의 리스트요소입니다.
그러니까 다섯개의 리스트요소들로 이루어진 것이죠. 이 리스트요소들의 속성을 설정해 줄 차례입니다.

각각 요소 앞의 동그라미를 없애고, 가로정렬이 되게 하고, 여백을 줍니다.

.topmenu ul li {list-style:none; display:inline; padding:5px}

'list-style:none'으로 동그라미를 없애고 'display:inline'으로 한 줄에 정렬되게 했으며 5px의 여백을 주었습니다.

링크된 글씨, 마우스오버했을 때의 글씨 속성을 각각 정해줍니다.

.topmenu ul li a {font:8pt Trebuchet MS; color:#FFFFFF}
.topmenu ul li a:hover {color:#E1EBF9; text-decoration:underline}

topmenu레이어의 완성된 속성을 아래처럼 넣어주세요.

.topmenu {padding:45px 20px 0px 0px; text-align:right}
.topmenu ul li {list-style:none; display:inline; padding:5px}
.topmenu ul li a {font:8pt Trebuchet MS; color:#FFFFFF}
.topmenu ul li a:hover {color:#E1EBF9; text-decoration:underline}

브라우저에서 체크해 보겠습니다.

마우스 아웃

마우스 오버

여기서 끝난 게 아니예요. 조금 복잡하지만 재미있는 과정이 남았습니다.
티스토리를 하시면서 Blog 화면에서는 상단 메뉴의 Blog가 선택되어 있고
Taglog 화면에서는 상단 메뉴의 Tag가 선택되어 있는 것을 보신 적이 있을 거예요.
주로 글씨체나 굵기, 밑줄, 배경색, 배경 이미지 등으로 효과를 주는데요,
우리는 마우스오버됐을 때와 똑같은 상태로 깔끔하게 만들어보아요.

스타일시트를 수정하기에 앞서 skin.html를 간단히 수정해야해요.
<body>에 아이디를 지정해주는 거예요.
<body>를 <body id="[샵샵_body_id_샵샵]">로 바꿔주면 됩니다. 쉽죠? '샵샵'은 '##'으로 바꿔주고요.
이 작업을 꼭 하고 넘어가셔야 합니다. ^^

다시 style.css로 돌아가서 아래의 소스를 입력해주세요.

#tt-body-search .topmenu .menu_list a {color:#E1EBF9; text-decoration:underline}
#tt-body-archive .topmenu .menu_list a {color:#E1EBF9; text-decoration:underline}
#tt-body-category .topmenu .menu_list a {color:#E1EBF9; text-decoration:underline}
#tt-body-entry .topmenu .menu_list a {color:#E1EBF9; text-decoration:underline}
#tt-body-notice .topmenu .menu_list a {color:#E1EBF9; text-decoration:underline}
#tt-body-page .topmenu .menu_list a {color:#E1EBF9; text-decoration:underline}
#tt-body-media .topmenu .menu_media a {color:#E1EBF9; text-decoration:underline}
#tt-body-location .topmenu .menu_location a {color:#E1EBF9; text-decoration:underline}
#tt-body-tag .topmenu .menu_tag a {color:#E1EBF9; text-decoration:underline}
#tt-body-guestbook .topmenu .menu_guest a {color:#E1EBF9; text-decoration:underline}

더 간단하게 아래처럼 묶어서 입력할 수도 있답니다.

#tt-body-search .topmenu .menu_list a, #tt-body-archive .topmenu .menu_list a, #tt-body-category .topmenu .menu_list a, #tt-body-entry .topmenu .menu_list a, #tt-body-notice .topmenu .menu_list a, #tt-body-page .topmenu .menu_list a, #tt-body-media .topmenu .menu_media a, #tt-body-location .topmenu .menu_location a, #tt-body-tag .topmenu .menu_tag a, #tt-body-guestbook .topmenu .menu_guest a {color:#E1EBF9; text-decoration:underline}

길다고 당황하지 마세요. 간단한 원리랍니다.
skin.html의 body 안에 아이디를 설정해주었죠?
검색화면, 카테고리화면, 미디어화면, 태그화면 등 각각의 페이지 아이디가 body에 자동으로 지정이 되는 거예요.

맨 첫번째 줄을 예로 들어 설명해 볼게요.
body의 아이디가 'tt-body-search' 일 때
topmenu레이어의 menu_list클래스 안의 링크 글씨 색이 #E1EBF9로 바뀌고 밑줄이 생기는 거예요.
아까 li class="menu_list" 처럼 다섯개의 리스트요소에 각각 class를 지정해 준 이유가 바로 이 때문이랍니다.

아직 모르시겠다구요?
아래 스크린샷을 보세요. ^^