• 검색

이번 챕터에서는, 메뉴 컨트롤을 조금 더 예쁘고 보기 좋게 Style을 꾸며 보겠습니다.

기본적으로 포건시에서는 다양한 "메뉴 컨트롤"을 위한 "사전 정의 스타일"을 제공합니다. 원하시는 스타일을 선택하여, 빠르게 "메뉴 컨트롤"에 대한 스타일을 설정할 수 있습니다.

하지만, 다양하고 유연한 디자인을 위해, "사용자 정의 스타일"을 적용하는 방법에 대해서 알려드리고자 합니다.

오늘도 코딩 없이 Excel 느낌 그대로 시작해보겠습니다~~!!

​4강 내비게이션 메뉴 만들어보기에 이어서 시작하겠습니다. 

메뉴 컨트롤 크기 고정하기

우선, 메뉴 컨트롤이 화면 비율에 따라서 크기가 심하게 변형되지 않도록 크기를 고정해보겠습니다.

1. 먼저, 앞서 만들었던 상단 내비게이션 메뉴를 선택합니다.
2. 우측, "셀 유형" 탭에 "메뉴 스타일 편집…"을 선택합니다.

3. "메뉴 스타일 설정" 창에서 너비를 "100"으로 설정합니다. (100 픽셀로 메뉴 크기가 고정되며, 그 이상으로 커지거나 작아지지 않습니다.)

메뉴의 Normal 상태 스타일 설정

Normal 상태는 사용자에게 보여지는 메뉴의 초기 상태입니다.

1. 먼저, 앞서 만들었던 상단 내비게이션 "메뉴"를 선택합니다.
2. "상단 메뉴 바" > "셀 스타일" > "신규 스타일 만들기…"를 선택하여, "셀 스타일 속성" 창을 엽니다.

3. "Normal" > "색상" 탭 > "배경색" > "다른 색"을 선택합니다.

4. 사용자 정의 색상에서 상단 배너 색상과 같은 16진수 코드에 "#0047AB"(코발트블루)를 입력하고, "확인" 버튼을 눌러 창을 닫습니다.

5. Normal 탭의 "글자색"은 "흰색"으로 설정합니다.

메뉴의 Hover 상태 스타일 설정

"메뉴 컨트롤"의 "Hover 상태"는 사용자가 메뉴에 마우스를 올렸을 때 동작하는 스타일을 정의합니다.

1. "셀 스타일 속성" 창 > "Hover" 섹션 > "색상" 탭으로 이동합니다.

2. 아래와 같이 "일반 상태에서 상속"의 체크박스를 해제합니다.

* "일반 상태에서 상속"의 체크박스가 선택되어 있다면, Normal 상태의 스타일이 그대로 적용됩니다.

3. 배경색은 "흰색", 글자색은 "다른 색>사용자 정의> 16진수 코드"에 "#0047AB"(코발트블루)를 설정합니다.

메뉴의 선택 상태 스타일 설정

"메뉴 컨트롤"의 "선택 상태"는 사용자가 메뉴를 실제 클릭한 상태 일 때 동작하는 스타일을 정의합니다.

1. "셀 스타일 속성" 창 > "선택" 섹션 > "색상" 탭으로 이동합니다.

2. 아래와 같이 "일반 상태에서 상속"의 체크박스를 해제합니다.

* "일반 상태에서 상속"의 체크박스가 선택되어 있다면, Normal 상태의 스타일이 그대로 적용됩니다.

3. 배경색은 "흰색", 글자색은 "다른 색>사용자 정의> 16진수 코드"에 "#0047AB"(코발트블루)를 설정합니다.

마지막으로, "확인 버튼" 누르고 메뉴 컨트롤에 대한 설정을 마무리합니다.

이제 "실행 버튼" 또는 "F5" 키를 눌러 실제로 메뉴가 어떻게 변했는지 확인해 보겠습니다.

아래와 같이 메뉴가 사용자 동작에 따라서 변경되는 것을 볼 수 있습니다.

▶ 5강 프로젝트 파일 다운로드

Forguncy 사용 중 기술 문의 또는 구매에 대한 상담이 필요하실 경우, 언제든지 연락 부탁드립니다.

• 기술 문의 : Forguncy - Q&A | 토론
• 구매 문의 : sales-kor@grapecity.com
• 전화번호 : 1670-0583