Blog|| 블로그 꾸미기 Ep.4 카테고리 메뉴를 꾸며보자

블로그 꾸미기 Ep.4 카테고리 메뉴를 꾸며보자

안녕하세요 C알못(CSS를 알지 못하는) 밤비입니다.

근래에 티스토리 반응형 스킨을 적용하고 블로그 꾸미기에 몰두하여 정신 없는 나날을 보내고 있습니다.

아직 전체적인 레이아웃에 손을 대기엔 너무 모르는게 많기에 작은 것부터 도전하기로...

그래서! 블로그 상단에 있는 카테고리에 손을 대보기로 했습니다.

현재 제일 큰 문제점은 카테고리의 폭이 좁아 카테고리명이 겹치는 현상!

사진을 보시면, 스페인 글 목록부터 글이 겹치거나 밀려있는 걸 보실 수 있습니다.

일단 카테고리의 전체적인 구성을 이해하기 위해 토마토님의 '종종블로그'에 올라와 있는 튜토리얼을 공부했습니다.

결과적으로 손을 봐야할 곳은 스킨의 CSS 라인 66에서 84, 그리고 317에서 329까지 더군요.

쉽게 설명하기 위해 위와같은 다이아그램을 만들어 보았습니다.

초록색 상단 부분이 "카테고리 버튼" 이구요, 아래 파란색 부분이 "카테고리 목록" 입니다.

CSS Lines 66 - 84

.area_menu .btn_cate{width:160px;height:38px;border:1px solid #3db39e;border-radius:3px;font-weight:bold;font-size:12px;line-height:38px;color:#3db39e;padding:0 1px 0 5px}
.btn_close{display:none}
.area_menu .ico_cate{width:10px;height:6px;margin:-2px 0 0 53px;background-position:0 -50px;vertical-align:middle}
.area_menu .list_cate{display:none;position:absolute;top:37px;left:0;width:158px;padding:18px 0 10px;border:1px solid #3db39e;border-radius:0 0 3px 3px;background-color:#fff}
.area_menu .on .list_cate{display:block}
.area_menu .on .ico_cate { background-position: 0 -658px; }
.area_menu .link_cate{display:block;padding-left:17px;margin-bottom:12px;font-size:12px;color:#333}

.area_navi .list_cate ul li { line-height:18px }
.area_navi .list_cate ul li a { display:block;padding-left:17px;margin-bottom:12px;font-size:12px;color:#333;height:17px }
.area_navi .list_cate ul li.selected > a,
.area_navi .list_cate ul li a:hover { text-decoration:underline;color:#3db39e }
.area_navi .list_cate .c_cnt, .area_navi .list_cate img { display:none }
.area_navi .list_cate ul li ul li a {  }
.area_navi .list_cate ul li ul li ul { padding-bottom:6px; margin-top:-6px }
.area_navi .list_cate ul li ul li ul li { color:#b4b4b4; padding-left:21px }
.area_navi .list_cate ul li ul li ul li a { padding-left:0;margin-bottom:6px;font-size:12px;color:#666 }
.area_navi .list_cate ul li ul li ul li a::before { content:'· ' }
.area_navi .list_cate .menu_profile { display:none }

먼저 첫번째 라인에서 컴퓨터에서 출력되는 카테고리 버튼의 가로폭을 수정해 줍니다.

▶160픽셀에서 200필셀로 변경 || width: 160px -> width:200px

.area_menu .btn_cate{width:200px;height:38px;border:1px solid #3db39e;border-radius:3px;font-weight:bold;font-size:12px;line-height:38px;color:#3db39e;padding:0 1px 0 5px}

다음, 세번째 라인에서 카테고리 목록의 가로폭을 수정해 줍니다. 여기서 주의 하실점은 카테고리 버튼의 가로폭 값보다 2픽셀 적게 수정하셔야 합니다. 그리고 혹시나 카테고리 목록이 너무 길어질 수 있기 때문에 마지막에 스크롤 기능을 넣어줍니다.

▶158픽셀에서 198픽셀로 변경 || width: 158px -> width:198px

▶overflow:auto 추가

.area_menu .list_cate{display:none;position:absolute;top:37px;left:0;width:198px;padding:18px 0 10px;border:1px solid #3db39e;border-radius:0 0 3px 3px;background-color:#fff;overflow:auto}

다음, 여덟번째 라인에서 카테고리명이 겹치지 않도록 문단간격에 적용되어있던 세로값을 삭제해주세요.

▶height:17px 삭제

.area_navi .list_cate ul li a { display:block;padding-left:17px;margin-bottom:12px;font-size:12px;color:#333; }

마지막으로 카테고리 글객수와 새로운 글을 알리는 (new)버튼을 카테고리 목록에 삽입하기 위해 주석처리된 라인을 추가해 주세요.

▶/* .area_navi .list_cate .c_cnt, .area_navi .list_cate img { display:none } */

자 이렇게 해서 아래와 같이 완성되었습니다.

.area_menu .btn_cate{width:200px;height:38px;border:1px solid #3db39e;border-radius:3px;font-weight:bold;font-size:12px;line-height:38px;color:#3db39e;padding:0 1px 0 5px} 
.area_menu .ico_cate{width:10px;height:6px;margin:-2px 0 0 53px;background-position:0 -50px;vertical-align:middle}
.area_menu .list_cate{display:none;position:absolute;top:37px;left:0;width:198px;padding:18px 0 10px;border:1px solid #3db39e;border-radius:0 0 3px 3px;background-color:#fff;overflow:auto} 
.area_menu .on .ico_cate { background-position: 0 -658px; }
.area_menu .link_cate{display:block;padding-left:17px;margin-bottom:12px;font-size:12px;color:#333}
 
.area_navi .list_cate ul li { line-height:18px }
.area_navi .list_cate ul li a { display:block;padding-left:17px;margin-bottom:12px;font-size:12px;color:#333; } 
.area_navi .list_cate ul li.selected > a,
.area_navi .list_cate ul li a:hover { text-decoration:underline;color:#3db39e }
/* .area_navi .list_cate .c_cnt, .area_navi .list_cate img { display:none } */
.area_navi .list_cate ul li ul li a {  }
.area_navi .list_cate ul li ul li ul { padding-bottom:6px; margin-top:-6px }
.area_navi .list_cate ul li ul li ul li { color:#b4b4b4; padding-left:21px }
.area_navi .list_cate ul li ul li ul li a { padding-left:0;margin-bottom:6px;font-size:12px;color:#666 }
.area_navi .list_cate ul li ul li ul li a::before { content:'· ' }
.area_navi .list_cate .menu_profile { display:none }
 

이제는 모바일 에서 출력되는 값을 변경해 줘야 하는데요

CSS Lines 317 - 329

    .area_menu{display:none;right:0;top:0;bottom:0;overflow-y:auto;overflow-x:hidden;width:200px;background-color:#fff}
    .area_menu .area_search{display:none;width:168px;height:30px;margin:15px 0 0 15px;border:1px solid #dcdcdc;border-radius:31px}
    .area_menu .frm_search{width:168px;height:30px}
    .area_menu .lab_search{margin:8px 0 0 16px;background-position:-70px -110px}
    .area_menu .tf_search{width:115px;margin:7px 0 3px 8px;outline:none}

    .dimmed_layer{background-color:#000;opacity:0.7}
    .area_menu .btn_search{display:none}
    .area_menu .area_navi{display:block;position:static;margin:0}
    .area_head .btn_menu{display:block;overflow:hidden;position:absolute;right:15px;top:0;width:40px;height:35px;margin-top:13px;border:0 none}
    .area_head .ico_menu{display:block;width:40px;height:31px;margin:0;background-position:0 -80px;text-indent:0}
    .area_menu .btn_cate{display:none}
    .area_menu .list_cate{position:static;width:200px;padding:13px 0 15px;border:0 none;border-radius:0}

설명이 길어지니 토마토님이 제공해 주신 코드에 달린 주석을 보시고 이해하시면 될 것 같습니다.

  .area_menu{display:none;right:0;top:0;bottom:0;overflow-y:auto;overflow-x:hidden;width:250px;background-color:#fff} /* width:200px -> width:250px 으로 수정, 모바일에서 카테고리 메뉴영역 폭. PC 카테고리 버튼 가로폭보다 + 50 해야함 */
.area_menu .area_search{display:none;width:218px;height:30px;margin:15px 0 0 15px;border:1px solid #dcdcdc;border-radius:31px} /* width:168px -> width:218px 으로 수정. PC 카테고리 버튼 가로폭보다 + 18해야함  */
.area_menu .frm_search{width:218px;height:30px} /* width:168px -> width:218px 으로 수정. PC 카테고리 버튼 가로폭보다 + 18해야함  */
.area_menu .lab_search{margin:8px 0 0 16px;background-position:-70px -110px}
.area_menu .tf_search{width:165px;margin:7px 0 3px 8px;outline:none} /* width:115px -> width:165px 으로 수정, PC 카테고리 버튼 가로폭보다 -35해야함 */
 
.dimmed_layer{background-color:#000;opacity:0.7}
.area_menu .btn_search{display:none}
.area_menu .area_navi{display:block;position:static;margin:0}
.area_head .btn_menu{display:block;overflow:hidden;position:absolute;right:15px;top:0;width:40px;height:35px;margin-top:13px;border:0 none}
.area_head .ico_menu{display:block;width:40px;height:31px;margin:0;background-position:0 -80px;text-indent:0;}
.area_menu .btn_cate{display:none}
.area_menu .list_cate{position:static;width:250px;padding:13px 0 15px;border:0 none;border-radius:0;max-height:inherit} /* width:200px -> width:250px 으로 수정, 모바일에서 카테고리 메뉴영역 폭. PC 카테고리 버튼 가로폭보다 + 50 해야함 */

이렇게 변경하시면

요롷고롬 카테고리가 이쁘게 정리됩니다.

차후에 조금 더 이쁘게 커스터마이징 해서 튜토리얼을 올려보도록 하겠습니다.