[티스토리] Portfolio 스킨 사이드바 메뉴 디자인 수정

지난 회의 티스토리 Portfolio (포트폴리오) 스킨의 커버아이템 디자인 수정에 이어서, 본 포스팅에서는 사이드바 메뉴의 디자인 수정에 대한 내용을 정리하였다.

참고로 여기에서 말하는 사이드바 메뉴란, 화면 최상단 우측의 메뉴버튼을 눌렀을 때 나오는 오른쪽 팝업 메뉴를 말한다. 모바일로 접속했을 경우에는 전체 화면을 덮게 된다. 

최상단 우측의 메뉴 버튼을 클릭하면

우측 사이드바가 출현한다.

개인적으로는 과거의 데스크탑 블로그들처럼 오른쪽이나 왼쪽에 사이드바가 고정으로 자리하는 방식을 선호하나, 최신의 티스토리 스킨들은 하나같이 사이드바를 기본적으로 안 보여주므로 아쉽게 되었다. 

예외로 Whatever 스킨의 경우, 스킨 편집에서 레이아웃을 좌측으로 정렬하도록 설정하면 데스크탑 해상도에서만 왼쪽에 사이드바를 보여줄 수 있도록 구성할 수가 있으나, 사이드바에 카테고리 구조 표현이 안 되고 카테고리 URL 링크를 지정하는 형태로만 제공하므로 호불호가 있을 수 있겠다. 

데스크탑용 좌측 사이드바는 제공하나, URL링크 형태의 카테고리 표기만 지원하는 Whatever 스킨

추후 공개한다는 Magazine 같은 스킨은 사이드바+카테고리 구조에 대한 선택권이 있었으면 하는데, 카카오님께 소인의 열망이 전달되었으면 하는 바램이다. 

각설하고, 본 포스팅에서 설명할 주요내용은 아래와 같다. 

기본적인 코드 수정 적용방법이 궁금하다면 과거의 글을 참조하자. (참고링크: BLAYING)

1. 사이드바 로고 포함 전체메뉴 세로위치 조정

2. 사이드바 카테고리 세로간격 및 폰트 조정

3. 사이드바 카테고리와 하단메뉴 사이 라인의 세로위치 및 색상 조정

4. 사이드바 하단메뉴 세로위치 조정

5. 사이드바 하단메뉴 세로간격 및 폰트 조정

사이드바 로고 포함 전체메뉴 세로위치 조정

메뉴버튼을 누른 후 나오는 최상단의 메뉴를 포함한 전체 요소들의 세로위치를 조정하는 방법이다.

데스크탑용 위치를 조정할 경우에는 CSS 코드에서 '.area_sidebar .sidebar_header {'를 검색하여 바로 아래의 'margin:' 수치를 조정하면 된다.

모바일용 위치를 조정할 경우에는 더 아래에 있는 '@media screen and (max-width: 768px) {' 섹션에 포함된 '.area_sidebar .sidebar_header {'를 찾아서 바로 아래의 'margin:' 수치를 조정하면 되겠다.

데스크탑용/모바일용 코드

/* // box_header */

/* area_sidebar */

.area_sidebar {

  (..중간 생략)

  .area_sidebar .sidebar_header {

    margin: 60px -10px 30px 0;    //데스크탑용 세로간격 수정

  (..중간 생략)

/* media query - only mobile */

@media screen and (max-width: 768px) {

  .area_sidebar .inner_sidebar {

    width: 100%;

  (..중간 생략)

  .area_sidebar .sidebar_header {

    margin: 24px -10px 24px 0;    //모바일용 세로간격 수정

    padding-top:1px;}

사이드바 카테고리 세로간격 및 폰트 조정

사이드바의 카테고리 요소간 세로간격 또는 해당 폰트를 조정하는 방법이다.

데스크탑용 해상도에서의 조정을 위해서는 CSS 코드에서 '.area_sidebar .link_item {'를 검색한 뒤 바로 아래의 'margin-top:'과 'padding:'을 조합하여 카테고리 간의 간격을 조정할 수 있고, 'font-size:'나 'color:' 등의 수치를 조정하여 폰트를 조정할 수 있다.

대부분 상세 항목들이 데스크탑과 모바일의 별도 적용이 필요 없으나, 폰트사이즈만 모바일용 코드가 따로 위치한다. 모바일용 카테고리의 폰트사이즈를 조정할 경우, '@media screen and (max-width: 768px) {' 섹션 하단의 '.area_sidebar .link_item{'에서 'font-size:'를 수정하여 조정한다.

데스크탑용/모바일용 코드

/* // box_header */

/* area_sidebar */

.area_sidebar {

(.. 중간 생략)

  .area_sidebar .link_item {

    display: block;

    margin-top: 3px;    //데스크탑, 모바일용 세로간격 수정

    padding: 3px 0 3px 0;    //데스크탑, 모바일용 세로간격 수정

    font-size: 16px;    //데스크탑용 폰트사이즈 수정

    font-weight: 700;

    color: #333;    //데스크탑, 모바일용 폰트색상 수정

    transition: all .2s ease-out; }

 (..중간 생략)

/* media query - only mobile */

@media screen and (max-width: 768px) {

  (..중간 생략)

    .area_sidebar .link_item{

      font-size:16px; }    //모바일용 폰트사이즈 수정

사이드바 카테고리와 하단메뉴 사이 라인의 세로위치 및 색상 조정

사이드바의 카테고리와 하단메뉴 사이에 위치한 가로 라인의 위치 또는 색상을 조정하는 방법이다.

라인의 굵기나 색상은 데스크탑/모바일용 코드를 공유하나, 라인의 세로위치는 데스크탑과 모바일용 소스가 분리되어 있으므로 별도 적용을 해주어야 한다.

데스크탑/모바일 공통의 라인 굵기나 색상 수정을 위해서는 CSS 코드에서 '.area_sidebar .tt_category {'를 검색하여 하단에 있는 'border-bottom:' 수치를 조정하면 된다.

데스크탑용 라인의 세로위치를 조정하기 위해서는  '.area_sidebar .tt_category {'를 검색하여 하단에 있는 'padding:-bottom:' 수치를 조정하면 된다.

모바일용 라인의 세로위치를 조정하기 위해서는 좀 더 하단에 있는 '@media screen and (max-width: 768px) {'; 섹션에 위치한 '.area_sidebar .tt_category {'를 찾아 아래의 'padding-bottom:' 수치를 조정하면 되겠다.

데스크탑용/모바일용 코드

/* // box_header */

/* area_sidebar */

.area_sidebar {

(..중간 생략)

  .area_sidebar .tt_category {

    margin-bottom: 20px;

    padding-bottom: 40px;    //데스크탑용 라인 세로위치 조정

    border-bottom: 1px solid #e5e5e5; }    //데스크탑/모바일용 라인 굵기 및 색상 조정

(..중간 생략)

/* media query - only mobile */

@media screen and (max-width: 768px) {

(..중간 생략)

  .area_sidebar .tt_category {

    padding-bottom: 50px;}    //모바일용 라인 세로위치 조정

사이드바 하단메뉴 세로위치 조정

사이드바 하단메뉴 전체의 세로위치를 조정하는 방법이다. 관리자페이지의 '메뉴'에 있는 항목들이 이곳에 표시되게 된다.

해당 코드는 데스크탑/모바일 해상도 공통으로 설정되고, CSS 코드에서 '.area_sidebar .box_gnb {'를 찾아서 바로 아래의 'margin-bottom:' 수치를 조정하면 된다.

데스크탑용/모바일용 코드

/* // box_header */

/* area_sidebar */

.area_sidebar {

(..중간 생략)

 

.area_sidebar .box_gnb {    

margin-bottom: 60px;    //데스크탑, 모바일용 세로위치 조정

사이드바 하단메뉴 세로간격 및 폰트 조정

사이드바 하단메뉴 내의 요소간 세로간격 및 폰트를 조정하는 방법이다.

데스크탑과 모바일용 코드를 공유하며, CSS 코드에서 '.area_sidebar .t_menu_home a,'를 찾은뒤 아래에 있는 'margin-bottom:' 값을 조정하여 요소간 세로간격을 조정하고, 'font-size:'나 'color:'의 수치를 조정하여 폰트를 수정한다.

데스크탑용/모바일용 코드

/* // box_header */

/* area_sidebar */

.area_sidebar {

(..중간 생략)

  .area_sidebar .t_menu_home a,

  .area_sidebar .t_menu_tag a,

  .area_sidebar .t_menu_guestbook a,

  .area_sidebar .t_menu_medialog a,

  .area_sidebar .t_menu_location a,

  .area_sidebar .t_menu_page a,

  .area_sidebar .t_menu_category a,

  .area_sidebar .t_menu_link_1 a,

  .area_sidebar .t_menu_link_2 a,

  .area_sidebar .t_menu_link_3 a,

  .area_sidebar .t_menu_link_4 a,

  .area_sidebar .t_menu_link_5 a,

  .area_sidebar .t_menu_link_6 a,

  .area_sidebar .t_menu_link_7 a,

  .area_sidebar .t_menu_link_8 a,

  .area_sidebar .t_menu_link_9 a,

  .area_sidebar .t_menu_link_10 a {

    display: block;

    margin-bottom: 28px;    //데스크탑, 모바일용 요소간 세로간격 조정

    font-size: 16px;    //데스크탑, 모바일용 폰트사이즈 수정

    font-weight: 700;

    color: #333;    //데스크탑, 모바일용 폰트색상 수정

    transition: all .2s ease-out; }

이상으로 티스토리 포트폴리오 스킨의 사이드바 메뉴 관련된 디자인팁을 정리해 보았다.

다음 시간에는 검색메뉴 관련 디자인팁을 알아보도록 하자.