5. 스킨 옵션 - 기본 메뉴

이미지를 활용해 다양한 기능을 제공하는 반응형 스킨

탕비수다 이마고 스킨에서 제공하는 메뉴는 크게 (기본) 메뉴와 고정 메뉴 그리고 서브 메뉴로 구성되어 있습니다. 이번에 설명할 기능은 바로 (기본) 메뉴입니다. 즉 페이지 접속후 늘 볼 수 있는 영역입니다. 상단 메뉴는 왼쪽으로 홈링크가 있고 그 옆에 카테고리가 출력됩니다. 마지막으로 오른쪽에는 작은 기능이 모여 있는 작은 메뉴가 존재합니다. 기본적으로 메뉴는 폰트와 배경 색상을 설정할 수 있으며 홈링크 방식을 텍스트로 설정할 경우 홈링크에 표시할 텍스트를 지정할 수 있습니다.

설정하기

기본 메뉴와 관련된 모든 기능은 '블로그관리 > 꾸미기 > 스킨 편집'의 스킨 옵션을 통해 쉽게 설정 가능합니다. 기본 메뉴는 폰트 색상, 배경 색상 그리고 관련 기능은 홈링크 방식 및 참조값을 제공합니다.

폰트 색상

색상표에서 원하는 색상을 선택하거나 혹은 직접 HTML 색상코드를 입력하면 설정한 색상으로 메뉴 폰트 색상이 변경됩니다. 제목에 배경이미지를 사용하지 않는다면 원색 계통의 색상을 추천합니다. 만약 배경이미지와 함께 확장을 선택했다면 그림자 효과를 설정하면 효과를 볼 수 있습니다.

배경 색상

색상표에서 원하는 색상을 선택하거나 혹은 직접 HTML 색상코드를 입력하면 설정한 색상으로 메뉴 배경 색상이 변경됩니다. 나중에 설명할 제목 배경이미지를 적용할 때 이 기능은 중요한 역활을 합니다. 즉 배경이미지를 설정하고 더불어 확장까지 선택하면 해당 영역을 투명으로 선택해야 정상 출력됩니다.

홈링크 방식

기본적으로 홈을 상징하는 아이콘이 표시됩니다. 추가적으로 홈링크 방식을 '텍스트'로 선택하면 아래 홈링크 참조값이 출력됩니다. 블로그 명을 사용하면 모바일 화면에서 중복되어 보일 수 있으니 홈이나 기타 홈을 대표하는 단어를 사용할 것을 권합니다.

홈링크 참조값

홈링크 방식을 '텍스트'로 선택했을 때 홈링크 참조값에 입력한 값이 해당 영역에 출력됩니다.

기본 메뉴가 정의된 곳

61
62
63
64
65
66
67
/* 메뉴 색상 */
#header.thumb ul.category_list .link_item.link { color: [##_var_header-menu-font-color_##] }
#header .svg-icon path{ fill: [##_var_header-menu-font-color_##]}
#header .home a { color: [##_var_header-menu-font-color_##] }
#toggle-menu span { background-color: [##_var_header-menu-font-color_##] }
.header-wrapper { background-color: [##_var_header-menu-background-color_##] }
.header-wrapper .blogtitle a { color: [##_var_header-menu-font-color_##] }
cs

탕비수다 이마고 스킨에서 제공하는 스킨 옵션을 이용하면 다양한 효과를 연출할 수 있습니다. CSS는 기본 메뉴와 관련된 내용입니다. '블로그관리 > 꾸미기 > 스킨 편집'의 [html 편집]에서 'HTML'에서 확인할 수 있습니다.

[알림] 탕비수다 이마고 스킨의 본문은 한 페이지로 작동합니다. 현재 보여지는 두 페이지 모드는 사용자 지정을 통해 일시적으로 변경한 상태입니다. 실제 스킨을 설치하면 한 페이지 모드로 기본 설정됩니다.

이미지 맵

롤랑존

이미지를 활용해 다양한 기능을 제공하는 티스토리 반응형 스킨

    '설명서' 카테고리의 다른 글

    글에 남긴 여러분의 의견은 2개 입니다.

    *

    *