Menu
Menu (메뉴 컬렉션)
Menu는 내비게이션 링크, 탭, 버튼 그룹을 정리하는 가로/세로 메뉴 요소예요. 헤더, 드롭다운, 검색 입력, 서브메뉴 같은 다양한 콘텐츠를 담을 수 있어요.
출처: 문서
본문
Types (유형)
Menu (메뉴)
메뉴예요.
Editorials (사설)
Reviews (리뷰)
Upcoming Events (다가오는 이벤트)
Business (비즈니스)
Browse Courses (강좌 둘러보기)
More (더 보기)
Applications (지원)
International Students (국제 학생)
Scholarships (장학금)
Design & Urban Ecologies (디자인 및 도시 생태)
Fashion Design (패션 디자인)
Fine Art (순수 미술)
Strategic Design (전략 디자인)
Anthropology (인류학)
Economics (경제학)
Media Studies (미디어 연구)
Philosophy (철학)
Food Studies (식품 연구)
Journalism (저널리즘)
Non Profit Management (비영리 경영)
New (새로 만들기)
Document (문서)
Image (이미지)
Open... (열기...)
Save... (저장...)
Edit Permissions (편집 권한)
Export (내보내기)
Share... (공유...)
Secondary Menu (보조 메뉴)
메뉴는 내용의 중요도를 낮추기 위해 모양을 조정할 수 있어요.
Home (홈)
Messages (메시지)
Friends (친구)
Logout (로그아웃)
Pointing (포인팅)
메뉴는 가까운 콘텐츠와의 관계를 보여주기 위해 화살표를 가리킬 수 있어요.
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Logout (로그아웃)
Tabular (탭)
메뉴는 정보의 탭을 보여주도록 포맷할 수 있어요.
Bio (소개)
Photos (사진)
Bio (소개)
Photos (사진)
Active Project (활성 프로젝트)
Project #2 (프로젝트 #2)
Project #3 (프로젝트 #3)
New Tab (새 탭)
Bio (소개)
Pics (사진)
Companies (회사)
Links (링크)
This is an stretched grid column. This segment will always match the tab height (이것은 늘어진 그리드 컬럼이에요. 이 세그먼트는 항상 탭 높이와 일치해요.)
This is an stretched grid column. This segment will always match the tab height (이것은 늘어진 그리드 컬럼이에요. 이 세그먼트는 항상 탭 높이와 일치해요.)
Bio (소개)
Pics (사진)
Companies (회사)
Links (링크)
Text (텍스트)
메뉴는 텍스트 콘텐츠용으로 포맷할 수 있어요.
Sort By (정렬)
Closest (가장 가까운)
Most Comments (댓글 많은)
Most Popular (가장 인기)
Vertical Menu (세로 메뉴)
세로 메뉴는 요소를 세로로 표시해요.
A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with ui grid.
세로 메뉴의 너비는 기본적으로 임의의 크기예요. 콘텐츠에 더 정확히 맞추려면 ui grid와 함께 fluid 변형을 사용하세요.
Inbox (받은 편지함)
1
Spam (스팸)
51
Updates (업데이트)
1
Account (계정)
Settings (설정)
Display Options (표시 옵션)
Text Size (텍스트 크기)
Small (작게)
Medium (중간)
Large (크게)
Sort By (정렬)
Closest (가장 가까운)
Most Comments (댓글 많은)
Most Popular (가장 인기)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Pagination (페이지네이션)
페이지네이션 메뉴는 콘텐츠 페이지로의 링크를 제시하도록 특별히 포맷돼요.
1
...
10
11
12
Content (콘텐츠)
Header (헤더)
메뉴 항목은 헤더를 포함하거나 그 자체가 헤더일 수 있어요.
Our Company (우리 회사)
About Us (회사 소개)
Jobs (채용)
Locations (위치)
Products (제품)
Enterprise (기업)
Consumer (소비자)
CMS Solutions (CMS 솔루션)
Rails
Python
PHP
Hosting (호스팅)
Shared (공유)
Dedicated (전용)
Support (지원)
E-mail Support (이메일 지원)
FAQs
Text (텍스트)
세로 메뉴 항목은 어떤 유형의 텍스트 콘텐츠든 포함할 수 있어요.
Input (입력)
메뉴 항목은 내부에 입력 요소를 포함할 수 있어요.
Go (이동)
Button (버튼)
메뉴 항목은 내부에 버튼을 포함할 수 있어요.
Sign up (가입)
Log-in (로그인)
Link Item (링크 항목)
메뉴는 링크 항목이나 링크인 것처럼 포맷된 항목을 포함할 수 있어요.
Visit Google (Google 방문)
Javascript Link (자바스크립트 링크)
Dropdown Item (드롭다운 항목)
항목은 드롭다운 안에 중첩된 메뉴를 포함할 수 있어요.
Categories (카테고리)
Electronics (전자제품)
Automotive (자동차)
Home (홈)
Popup Menu (팝업 메뉴)
메뉴 항목은 팝업을 사용해 큰 메뉴나 추가 콘텐츠를 보여줄 수 있어요.
Browse (둘러보기)
Cashmere (캐시미어)
Linen (린넨)
Cotton (면)
Viscose (비스코스)
Small (작게)
Medium (중간)
Large (크게)
Plus Sizes (플러스 사이즈)
Neutrals (뉴트럴)
Brights (브라이트)
Pastels (파스텔)
Knitwear (니트웨어)
Outerwear (아우터)
Pants (바지)
Shoes (신발)
Search (검색)
메뉴는 검색 입력을 포함할 수 있어요.
Menu (메뉴)
메뉴는 메뉴 항목과 같은 수준에서 다른 메뉴 그룹을 포함할 수 있어요.
Browse (둘러보기)
Submit (제출)
Sign Up (가입)
Help (도움말)
Sub Menu (서브메뉴)
메뉴 항목은 그룹화된 서브메뉴 역할을 하는 다른 메뉴를 내부에 중첩해서 포함할 수 있어요.
Home (홈)
Search (검색)
Add (추가)
Remove (제거)
Browse (둘러보기)
Messages (메시지)
More (더 보기)
Edit Profile (프로필 편집)
Choose Language (언어 선택)
Account Settings (계정 설정)
States (상태)
Hover (호버)
메뉴 항목은 호버될 수 있어요.
Menu items are only hoverable if they are a links, or given the class name link
메뉴 항목은 링크이거나 link 클래스 이름이 주어졌을 때만 호버할 수 있어요.
A link (링크)
div Link (div 링크)
Active (활성)
메뉴 항목은 활성 상태가 될 수 있어요.
Link (링크)
Disabled (비활성)
메뉴 항목은 비활성화될 수 있어요.
Link (링크)
Variations (변형)
Fixed (고정)
메뉴는 자신의 컨텍스트의 한쪽에 고정될 수 있어요.
Features (기능)
Testimonials (사용 후기)
Sign-in (로그인)
Features (기능)
Testimonials (사용 후기)
Sign-in (로그인)
Features (기능)
Testimonials (사용 후기)
Sign-in (로그인)
Features (기능)
Testimonials (사용 후기)
Sign-in (로그인)
Stackable (스택 가능)
메뉴는 모바일 해상도에서 스택될 수 있어요.
Features (기능)
Testimonials (사용 후기)
Sign-in (로그인)
Inverted (반전)
메뉴는 더 큰 대비를 보여주기 위해 색상이 반전될 수 있어요.
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Colored (색상)
추가 색상을 지정할 수 있어요.
Red (빨강)
Orange (주황)
Yellow (노랑)
Olive (올리브)
Green (초록)
Teal (청록)
Blue (파랑)
Violet (보라)
Purple (자주)
Pink (분홍)
Brown (갈색)
Grey (회색)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
이 색상들은 반전(inverted)될 수도 있어요.
Red (빨강)
Orange (주황)
Yellow (노랑)
Olive (올리브)
Green (초록)
Teal (청록)
Blue (파랑)
Violet (보라)
Purple (자주)
Pink (분홍)
Brown (갈색)
Grey (회색)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Home (홈)
Messages (메시지)
Friends (친구)
Icons (아이콘)
메뉴는 아이콘만 가질 수 있어요.
Labeled Icon (라벨 있는 아이콘)
메뉴는 라벨이 있는 아이콘을 가질 수 있어요.
Games (게임)
Channels (채널)
Videos (비디오)
Games (게임)
Channels (채널)
Videos (비디오)
Fluid (플루이드)
세로 메뉴는 컨테이너의 크기를 차지할 수 있어요. (가로 메뉴는 기본적으로 그렇게 해요.)
Run (달리기)
Walk (걷기)
Bike (자전거)
Compact (컴팩트)
메뉴는 콘텐츠를 맞추는 데 필요한 공간만 차지할 수 있어요.
Games (게임)
Channels (채널)
Videos (비디오)
Games (게임)
Channels (채널)
Videos (비디오)
Evenly Divided (균등 분할)
메뉴는 equal width를 사용해 항목을 균등하게 나눌 수 있어요...
Buy (구매)
Sell (판매)
Rent (임대)
... 또는 three item menu처럼 고정된 항목 수를 선언해 나눌 수 있어요.
Buy (구매)
Sell (판매)
Rent (임대)
세로 메뉴는 소유권을 보여주기 위해 인접한 콘텐츠를 가리킬 수 있어요.
Site Title (사이트 제목)
Grouped Section (그룹화된 섹션)
Subsection 1 (하위 섹션 1)
Subsection 1 (하위 섹션 1)
Subsection 1 (하위 섹션 1)
Dropdown (드롭다운)
Choice 1 (선택 1)
Choice 2 (선택 2)
Choice 3 (선택 3)
Attached (부착)
메뉴는 다른 콘텐츠 세그먼트에 부착될 수 있어요.
Tab 1 (탭 1)
Tab 2 (탭 2)
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomized words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
Section 1 (섹션 1)
Section 2 (섹션 2)
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomized words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
Section 1 (섹션 1)
Section 2 (섹션 2)
Size (크기)
메뉴는 크기를 다양하게 바꿀 수 있어요.
Home (홈)
Messages (메시지)
Language (언어)
English
Russian
Spanish
Sign Up (가입)
Home (홈)
Messages (메시지)
Language (언어)
English
Russian
Spanish
Sign Up (가입)
Home (홈)
Messages (메시지)
Language (언어)
English
Russian
Spanish
Sign Up (가입)
Home (홈)
Messages (메시지)
Language (언어)
English
Russian
Spanish
Sign Up (가입)
Home (홈)
Messages (메시지)
Language (언어)
English
Russian
Spanish
Sign Up (가입)
Home (홈)
Messages (메시지)
Language (언어)
English
Russian
Spanish
Sign Up (가입)
세로 메뉴도 크기를 다양하게 바꿀 수 있어요.
1
Inbox (받은 편지함)
51
Spam (스팸)
1
Updates (업데이트)
1
Inbox (받은 편지함)
51
Spam (스팸)
1
Updates (업데이트)
1
Inbox (받은 편지함)
51
Spam (스팸)
1
Updates (업데이트)
1
Inbox (받은 편지함)
51
Spam (스팸)
1
Updates (업데이트)
Items (항목)
Fitted (핏)
메뉴 항목이나 메뉴는 요소 패딩을 세로나 가로로 제거할 수 있어요.
No padding whatsoever (패딩 전혀 없음)
No horizontal padding (가로 패딩 없음)
No vertical padding (세로 패딩 없음)
Borderless (보더 없음)
메뉴 항목이나 메뉴는 테두리가 없을 수 있어요.
1
2
3
4
5
6
Centered (가운데 정렬)
메뉴는 가운데 정렬되어 보여질 수 있어요.
1
...
10
11
12
Centered Fluid (가운데 정렬 플루이드)
메뉴는 가운데 정렬과 플루이드를 동시에 보여줄 수 있어요.
Wrapping (줄바꿈)
메뉴 항목은 반응형 레이아웃에서 자동으로 줄바꿈할 수 있어요.
One (1)
Two (2)
Three (3)
Four (4)
Five (5)
Six (6)
Seven (7)
Eight (8)
Nine (9)
Ten (10)
Eleven (11)
Twelve (12)
Thirteen (13)
Fourteen (14)
Fifteen (15)
Sixteen (16)
Seventeen (17)
Eighteen (18)
Nineteen (19)
Twenty (20)
Centered Fluid Wrapping (가운데 정렬 플루이드 줄바꿈)
centered, fluid, wrapping을 조합하면 줄바꿈 버튼 그룹과 비슷한 메뉴를 만들 수 있어요.
One (1)
Two (2)
Three (3)
Four (4)
Five (5)
Six (6)
Seven (7)
Eight (8)
Nine (9)
Ten (10)
Eleven (11)
Twelve (12)
Thirteen (13)
Fourteen (14)
Fifteen (15)
Sixteen (16)
Seventeen (17)
Eighteen (18)
Nineteen (19)
Twenty (20)
더 알아보기 (Learn more)
Menu는 사이트 상단 내비게이션이나 탭, 페이지네이션까지 매우 폭넓게 쓰이는 요소예요. 드롭다운·서브메뉴·검색 입력과 결합하면 복잡한 내비게이션 구조를 시맨틱하게 만들 수 있어요.