내비게이션 CSS 클래스 설명
여기에서는 HTML 스니펫에서 각 CSS 클래스의 용도를 간편하게 정리해 놓았습니다. 따라서 레이아웃과 동작을 신속하게 조정할 수 있습니다.
중요: 는 내비게이션 테이블의 플레이스홀더(예: 00_Menue)로, 렌더링 시 고유한 클래스로 대체됩니다(예: 가시성, 강조, 메뉴 항목당 아이콘).
클래스 개요
| 클래스 | 사용된 곳 | 목적 / 의미 | 전형적인 상호작용 |
|---|---|---|---|
bx-DesktopHTML1 |
div 네비게이션 바 위 | 주 메뉴 위의 상단 바(예: 알림, 프로모션, 앱 배너). | DB 플레이스홀더로 가시성 조정 가능 (none). |
bx-DesktopHTML2 |
div 네비게이션 바 아래 | 주 메뉴 아래의 하단 바(추가 정보/배지). | none으로 가시성 조정. |
bx-nav-outer |
nav.bx-nav의 래퍼 |
위치 조정을 위한 외부 컨테이너(예: 스티키, 그림자, 너비). | 전체 페이지 너비를 위한 레이아웃 프레임. |
bx-nav |
nav 주요 내비게이션 | 기본 네비게이션 바(그리드/플렉스, 배경, 높이). | 전역 네비게이션 바 스타일 및 반응성. |
bx-navbar-left |
네비게이션 바 왼쪽 열 | 메뉴 아이콘(버거) 및 로고 영역. | .bx-nav-icon 및 .bx-nav-brand 포함. |
bx-navbar-center |
네비게이션 바 중앙 | 메뉴 항목을 위한 컨테이너(UL/LI) 및 하위 메뉴 포함. | JS를 통해 모바일/사이드바를 채움 (출처: #bxNavPoints). |
bx-navbar-right |
내비게이션 바 오른쪽 열 | 아이콘 그룹 (검색, 라이트/다크, 로그인, 언어, 장바구니, 사이드바). | 버튼은 JS 함수를 실행합니다 (예: BlueSearchBar()). |
bx-nav-icon |
버튼 / 아이콘 버튼 | 모든 내비게이션 바 아이콘에 대한 일관된 스타일. | 토글을 위한 클릭 대상 (모바일 바, 사이드 바, 검색 등). |
bx-nav-brand |
img 로고 | 로고 표시 (크기, 여백). | 종종 /index.html에 링크됨. |
bx-nav-item |
li 메인 메뉴 | 메뉴 항목의 리스트 요소. | .has-submenu와 결합될 수 있습니다. |
bx-nav-link |
a 메뉴 항목 | 메뉴 링크 스타일 (서체, 호버, 활성 상태). | DB 자리 표시자를 통해 대상/이름을 받습니다. |
has-submenu |
li 드롭다운 포함 | 하위 메뉴가 있는 메뉴 항목을 표시합니다; 드롭다운 스타일을 활성화합니다. | 연관된 .bx-navbar-dropdown을 열거나 닫습니다. |
submenu-toggle |
링크 옆의 버튼 | 하위 메뉴를 열고 닫는 컨트롤 (체브론 아이콘). | 주로 더 큰 화면에서만 표시됩니다 (유틸리티 클래스 참조). |
d-none, d-lg-inline |
버튼에 대한 유틸리티 클래스 | 가시성 제어 (예: 숨기기 → lg에서 인라인 표시). | 토글의 반응형 동작. |
bx-menu |
드롭다운의 ul | 하위 메뉴 항목 목록. | DB를 통해 탐색하여 채워집니다. |
bx-navbar-dropdown |
ul (드롭다운 컨테이너) | 드롭다운 패널 (위치, 그림자, 애니메이션). | 호버/클릭 또는 .submenu-toggle로 열립니다. |
bx-dropdown-item |
드롭다운의 li | 개별 하위 메뉴 항목. | .bx-dropdown-link을 포함합니다. |
bx-dropdown-link |
드롭다운의 a | 드롭다운 내의 링크 스타일. | 더 나은 사용성을 위한 호버/포커스 상태. |
bx-mobile-bar |
모바일 메뉴 (오프 캔버스 오른쪽) | 모바일 탐색 및 선택적 블록을 위한 컨테이너 상단/하단. | JS를 통해 채워집니다 (출처: #bxNavPoints). |
bx-MobilHTML1, bx-MobilHTML2 |
모바일 바의 블록 | 모바일 메뉴 위/아래의 선택적 HTML 영역 (예: 로고). | |
bx-side-bar |
측면 탐색 (왼쪽 오프 캔버스) | 대체/추가 탐색을 위한 컨테이너. | 메뉴 또는 자체 콘텐츠를 수용할 수 있습니다. |
bx-SideHTML1, bx-SideHTML2 |
사이드 바의 블록 | 측면 메뉴 위/아래의 선택적 HTML 영역 (예: 큰 로고). | |
WKGBAnzDiv |
장바구니 아이콘의 배지 래퍼 | 포괄적인 카운터 영역 (레이아웃/위치). | .WKGBAnzDivInner (수량)을 포함합니다. |
WKGBAnzDivInner |
배지 내부 | 현재 장바구니 수량을 표시합니다. | #WKGBAnz를 통해 JS로 채워집니다. |
DB의 자리 표시자 클래스
| 자리 표시자 | 설명 | 예시 |
|---|---|---|
|
각 메뉴 항목은 하나 이상의 사용자 정의 클래스로 대체됩니다 (예: only-desktop, highlight, icon-contact). | 데스크탑, 모바일 또는 사이드바에서 버튼 별 가시성/스타일을 제어합니다. |
.bx-nav-item을 DB 기반 클래스와 결합하여 #bxNavPoints (데스크탑), .bx-mobile-bar 또는 .bx-side-bar에서 특정 버튼을 숨기거나 표시할 수 있습니다. HTML 코드를 수정할 필요가 없습니다.
FAQ
고객들이 자주 묻는 질문
여기에서 내비게이션 바 HTML의 레이아웃, 행동 및 가시성에 관련된 CSS 클래스를 알 수 있습니다. 이를 통해 내비게이션을 정확하게 조정할 수 있습니다.
자리 표시자는 무엇을 의미하나요?
이 자리 표시자는 내비게이션 테이블(예: 00_Menue)에서 설정한 사용자 정의 CSS 클래스로 자동 대체됩니다. 이를 통해 특정 메뉴 항목의 가시성, 강조 및 아이콘을 제어할 수 있습니다.
내비게이션 바 위나 아래에 콘텐츠를 추가하려면 어떻게 하나요?
bx-DesktopHTML1(위) 및 bx-DesktopHTML2(아래) 클래스를 사용하세요. CMS에서 CMS ⯈ 웹사이트 ⯈ 머리글을 통해 표시하거나 숨길 수 있습니다.
bx-nav-outer 클래스의 역할은 무엇인가요?
내비게이션의 외부 컨테이너입니다. 이를 통해 내비게이션 바의 너비, 그림자 또는 스티키 동작을 제어합니다.
bx-nav는 무엇을 나타내나요?
이 클래스는 기본 내비게이션 자체를 정의합니다 – 즉, 레이아웃(예: Flex/Grid), 배경색 및 내비게이션 바의 높이입니다.
내비게이션 바는 어떻게 열로 나눠져 있나요?
내비게이션 바는 세 가지 영역으로 구성되어 있습니다: bx-navbar-left (로고 및 메뉴 아이콘), bx-navbar-center (메뉴 항목), bx-navbar-right (검색, 로그인, 언어, 장바구니와 같은 아이콘).
bx-nav-icon 클래스는 어떤 역할을 하나요?
모든 내비게이션 바 아이콘의 통일된 스타일링을 제공합니다. 이 버튼은 모바일 바, 사이드 바 또는 검색을 여는 기능을 제어합니다.
메뉴 링크를 어떻게 디자인하나요?
bx-nav-item으로 목록 요소를 정의하고, bx-nav-link로 링크의 글꼴, 호버 및 활성 상태를 위한 스타일 규칙을 정의합니다.
서브 메뉴를 어떻게 제어하나요?
has-submenu 클래스를 가진 메뉴 항목은 드롭다운을 포함합니다. submenu-toggle (화살표 아이콘 버튼)으로 이를 펼치거나 접을 수 있습니다.
d-none 및 d-lg-inline 유틸리티 클래스는 무엇을 의미하나요?
이 클래스는 화면 크기에 따라 개별 요소의 가시성을 제어합니다 – 반응형 내비게이션에 적합합니다.
드롭다운 메뉴는 어떻게 구성되나요?
드롭다운은 bx-navbar-dropdown (컨테이너)으로 구성되며, 그 안에 bx-menu (목록)과 각 서브 항목을 위한 bx-dropdown-item 및 bx-dropdown-link가 있습니다.
모바일 바는 어떻게 작동하나요?
bx-mobile-bar는 모바일 기기에서 오른쪽으로 오프 캔버스 메뉴로 열립니다. #bxNavPoints의 내용으로 JS를 통해 채워집니다. 추가 블록은 bx-MobilHTML1와 bx-MobilHTML2로 추가할 수 있습니다.
사이드 바란 무엇인가요?
bx-side-bar는 측면 오프 캔버스 메뉴입니다 (대개 왼쪽). 여기에서 자체 콘텐츠나 내비게이션 요소를 배치할 수 있으며, bx-SideHTML1 및 bx-SideHTML2로 보완됩니다.
장바구니 카운터는 어떻게 표시되나요?
래퍼 WKGBAnzDiv에는 WKGBAnzDivInner가 포함되어 있으며, JS를 통해 (통해 #WKGBAnz) 현재 항목 수를 표시합니다 – 대개 장바구니 아이콘의 배지로 보여집니다.
특정 영역에서만 개별 버튼을 표시하려면 어떻게 하나요?
.bx-nav-item를 와 함께 조합하세요. 이렇게 하면 HTML 코드를 변경하지 않고도 #bxNavPoints (데스크탑), .bx-mobile-bar 또는 .bx-side-bar에서 버튼을 선택적으로 보여주거나 숨길 수 있습니다.