티스토리 오디세이 스킨 '상단 메뉴바' 만들기(2단도)

메뉴, 즉 카테고리 링크모음인 이 기능을 상단에 블로그 타이틀 옆에 나란히 보이게 만들어보겠습니다.  

 

티스토리 오디세이 스킨 '상단 메뉴바' 만들기(2단도)

안녕하세요 사람사물상황입니다.

 

티스토리에서 메뉴로 나오는 이 기능은 블로그뿐만 아니라 거의 모든 사이트에서 쓰는 굉장히 유용하면서 중요한 기능인데요. 블로그에서는 주력인 컨텐츠를 한눈에 띄게 만들 수 있어 더욱더 중요합니다. 알게 모르게 쓰고 있지만 이게 없으면 이용자 입장에서는 카테고리 목록에서 어떤 게 주요 컨텐츠인지 판단할 시간이 따로 필요하게 됩니다. (라고 개인적으로 생각하고 있습니다.)

 

저는 상단 메뉴바 만들기를 3단계 과정에 걸쳐 시도해볼 텐데요. 오늘은 1단계로 메뉴를 표시하는 과정입니다. 원래는 레이아웃의 정렬로 해야 하는데 저는 레이아웃 위치를 지정하여 설정하였습니다. 그래서 상황에 따라 각자 쓰실 땐 메뉴 비율을 맞춰야 될 수도 있습니다. 최대한 기본값이 될 수 있게 맞추긴 했습니다.

 

우선 오디세이에서 이 기능은 사실 사이드바가 1단일 때는 상단에 나오도록 자동으로 되어있습니다. 그런데 모바일 화면에서는 2단으로 분리되어 타이틀 밑에 나오게 됩니다. 그래서 모바일에서도 상단에 나오도록 조정을 할 거구요. 사이드바가 2단일 때는 기본값이 모바일처럼 2단으로 나오게 됩니다. 그래서 2단에서도 모두 다 상단에 보이도록 조치할 것입니다. 이것을 하고 나면 2단을 설정하면서 위치를 고정으로 넣기 때문에, 모바일도 꼭 같이 하셔야 합니다. 그리고 이제는 1단이든 2단이든 둘 중 하나만 쓸 수 있습니다. 바꾸고 싶으면 간단하게 태그 넣고 빼고만 하면 됩니다.  

 

 

스킨 편집에서 다음과 같이 설정하면 메뉴 활성화되면서 기본 설정값이 나오게 됩니다.

 

 

1단일 때 잘 적용되고 있는 모습이구요.

 

모바일 화면에선 2단으로 되고 있는 모습입니다. 이걸 다음과 같이 수정합니다.

 

 

1. 1단 및 2단 모바일 상단 적용하기

1단 및 공통 적용
css 1089 모바일 상단으로 설정

@media screen and (max-width: 1060px) <-이 부분은 위에 있음

.header .topnavmenu > ul {
    padding: 0;


    position: absolute;
    left: 50%;
    transform: translateX(-55%);
    top: -1px;
추가


모바일 스크롤삭제

한글 4자, 메뉴 5칸을 최대로 기준, overflow설정삭제, 
길면 다시 설정. (어차피 pc상 많으면 양옆뚫어 한계있음)
1050

@media screen and (max-width: 1060px) <-얘도 위에 있는 거임

.header .tt_category .category_list, 
.header .topnavmenu > ul {
    overflow-x: auto;
    overflow-y: hidden;

    /* overflow-x: auto;
    overflow-y: hidden; */

주석처리

이름 잘 찾아가시고요. 위치는 원본 기준으로 작성했습니다. 태그는 파일로 담았습니다. 다운받아 쓰세요.

1단 공통.txt

0.00MB

 

 

 

그럼 이렇게 보입니다. 그런데 주의점은 제 메뉴를 보면 저는 타이틀과 겹치는 부분이 생기게 됩니다. 이러면 메뉴를 하나 없애든가 방금 설정했던 transform: translateX(-55%); 의 수치를 조정해서 맞춰야 됩니다. 저는 -45%로 하니 맞네요.

 

이게 제가 기준점을 잡을 때 한글이 4자인 메뉴 5개 정도를 최대 기준으로 놓고 설정해서 그렇습니다. 저는 블로그 타이틀 앞에 로고 이미지가 있기 때문에 공간 조절이 필요했습니다. 이 부분이 각자 적용하시면서 맞춰야 할 것 같습니다. 이런 부분이 위에서 말씀드렸던 정렬로 잡지 못하고 위치로 잡았기 때문에 발생하는 부분입니다. 비율 조절했는데도 넘치는 것 같다면 간격, 폰트 조절하거나 overflow 주석 처리한 걸 풀고 하는 것이 좋습니다. 넘치는 부분은 스크롤 처리가 돼서 볼 수 있게 되긴 합니다.

 

모바일은 이렇게 맞춰놨으니까 이제 2단을 설정할 텐데요. 방금 적용한 내용이 2단에서도 공용 적용이라, 2단도 방금작업을 하고, 다음의 pc화면만 고정으로 넣으면 됩니다.

 

2. 2단 PC 화면 조절하기.

2단은 위에는 똑같고.

css942
.header .topnavmenu > ul {
    margin: 0;

    position: absolute;
    left: 50%;
    transform: translateX(-60%);
    top: -30px;
    
이걸 추가

2단을 안쓰면 주석처리하거나 삭제
    /* position: absolute;
    left: 50%;
    transform: translateX(-60%);
    top: -30px; */

 

2단.txt

0.00MB

 

 

 

 

그럼 2단이었던 게 바뀝니다. 위에 말씀드렸다시피. 이제 2단을 쓰면 2단 태그를 넣고, 1단을 쓰면 그걸 주석 처리하던가 삭제해야 합니다. 

 

 

3. 부가적인 수정.

다음에서 부가적으로 폰트나 간격, 호버를 수정할 수 있습니다. 상황에 따라 필요할까 봐 위치 적어놨구요. 저는 색상만 조금 바꾸고 건들지 않았습니다.

837 폰트조절
.header .tt_category .category_list .link_item, 
.header .topnavmenu > ul > li > a {
    position: relative;
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #333 !important;
    text-decoration: none;
    white-space: nowrap;
    z-index: 2;

    margin-left: 0px; 추가 등으로 메뉴간 간격 설정가능하나 
    모바일에서 망가질수있음. 잘해야함

920 호버 색상조절
@media screen and (min-width: 1061px)
.header .tt_category .category_list > li:hover > a:after, 
.header .topnavmenu > ul > li:hover > a:after {
    content: '';
    position: absolute;
    top: 16px;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 4px;
    background: #ef402f;
    z-index: 1;

 

 

원래 호버 색깔이 빨간색인데 저는 파란색으로 바꿨습니다.

 

 

 

메뉴의 설정은 블로그 관리-꾸미기-메뉴에서 할 수 있습니다.

 

카테고리 지정이 가능하고, 특정 주소, 특정 태그도 가능, 그리고 마치 공지사항마냥 페이지라는 글 쓰는 곳도 있습니다. 그동안 페이지가 어디서 볼 수 있나 했더니 여기서 저도 지금 처음 찾았습니다.

마지막으로 해당 작업이 커버, 슬로건, 타이틀 헤더, 배너, 와 충돌이 있는지 살펴봤는데 딱히 없었습니다. 슬로건이 원래 좀 이상하다는 것과 타이틀 헤더가 로고 넣는 곳이었다는 걸 알고는 충격! 로고와 타이틀이 동시에 안 보이는 것도 충격! 로고 작업을 공부 해두길 잘한 것인가. 

 

아무튼 여기까지 만들기 위해 이것저것 만지작만지작 했었는데요.

1. 처음에 html에서 태그 순서만 바꿔서 가능한가 테스트해보고 안돼서

2. 1단은 상단 나오니까 나오는 지점과 값을 찾아서 2단에도 똑같이 적용해보니까 안돼서

3. 모든 위치를 직접 수치 입력하여 완성했다가. 개개인이 적용할 땐 각자 다 수치를 입력해야 하니까 그렇게 하면 안 될 것 같아서 

4. 자동으로 center 적용을 해보니 왜인지는 모르지만 첫 번째 메뉴는 왼쪽 고정으로 되어있길래. 이거를 position: absolute; 일 때 정렬이 따로 있나 있길래 적용해보니까 잘되고.

5. 그래도 위치를 지정하지만 2단과 1단을 지정이 따로 가능하면 그나마 편하게 2단 1단 왔다 갔다 하니까 그걸 알아보려고 2단만 적용된 지점을 하나하나 값을 줘서 찾았는데, 2단 값을 지정하면 1단도 망가져서. 결국 css에선 1단처럼 2단 값만 지정하는 게 아니구나라고 판단. 태그 자체가 그런 거라고 추측.

6. 다시 html 가서 설정을 이리저리 바꿔보며, 결국 를 버려야 타이틀 바로 밑으로

• 오디세이
• 스킨수정
• 티스토리

가 일렬로 표시되는 거 보고, 블로그 메뉴가 일렬이 기본이고, 탑 네비는 타이틀과 검색과 나란히 쓰이지 않거나 모형이 정해져 있게 블로그 메뉴를 만드는 태그라고 추정

7. 최종적으로, 레이아웃 정렬 방식은 포기하고, 위치를 지정하여 메뉴 정렬만 가능한 걸로 만족.

 

하게 되었습니다. 여기까지 가능했던 게 오디세이 제목을 수정하면서 알게 됐던 position: absolute; 이것 때문인데요. 강제로 위치를 지정하는데. 유용하게 여기서 써먹었네요. 원래 제가 생각했던 건 마진 값을 줘서 위치를 만드는 거였거든요. 

 

상단 메뉴바는 오디세이 스킨을 구조적으로 만드는 것 중 마지막 즈음에 시도를 하게 되었는데요. 처음부터 하고 싶었지만 시간이 가장 오래 걸릴 것이라고 생각되어 미뤘던 컨텐츠입니다. 그 이유는 레이아웃의 정렬로 맞추게 하려면 헤더에 관해서는 스킨을 제작하는 과정이 될 수 있기 때문입니다(네비게이션 바라는걸 만들어야 되는줄알고 자료를 모았었음). 그렇게 이것저것 시도해보고 결국 위치만 맞추는 수준으로 구현해봤습니다. 간편하게 클릭으로 바로 되게, 전문가 분이 만들어주셨으면 하는 바램이 있네요. 이번 상단 메뉴바 만들기도 역시 아~무도 다루지 않는 내용입니다. 혹시 찾는 분이 있었다면 도움이 되었으면 합니다. 

 

티스토리 오디세이 스킨 '상단 메뉴바' 만들기(2단도)

 

끝.