아스트라 테마는 워드프레스에서 인기 있는 가벼운 테마 중 하나로 사용자 맞춤형 메뉴 설정이 가능합니다. 하위 메뉴 여백은 메뉴 항목과 항목 사이의 간격으로 사용자 경험과 디자인 미관에 큰 영향을 미칩니다. 적절한 여백 조정은 웹사이트의 가독성 및 인터렉션 품질을 높여 줍니다.
—> 목 차 <—
▩ 하위 메뉴 여백 조정 방법
▬ 사용자 정의를 통한 조정 방법
- 워드프레스 관리자 페이지에서 외모 > 사용자 정의에 접속합니다.
- 헤더 > 주 메뉴 또는 글로벌 메뉴 메뉴 설정으로 이동합니다.
- 메뉴 설정 내 하위 메뉴 여백 또는 패딩, 마진 관련 옵션을 찾아 조절합니다.
- 변경 사항을 적용하고 사이트를 새로 고침하여 반영 상태를 확인합니다.
▬ CSS를 활용한 직접 조정 방법
기본 사용자 정의 옵션만으로는 원하는 수준의 여백 조정이 어려울 경우, CSS를 추가하여 여백을 세밀하게 다듬을 수 있습니다.
css.main-header-menu .sub-menu {
padding: 10px 20px; /* 상하와 좌우 여백 조절 */
}
.main-header-menu .sub-menu li {
margin-bottom: 8px; /* 하위 메뉴 아이템 간 간격 설정 */
}위 CSS는 워드프레스 외모 > 사용자 정의 > 추가 CSS에 추가하면 적용되며, 필요에 따라 숫자를 조정하세요.
▬ CSS 적용 시 유의 사항
- Astra 테마 구조에 따라 클래스명이 다를 수 있으므로, 개발자 도구(F12)를 활용해 실제 클래스명을 반드시 확인해야 합니다.
- 너무 큰 여백은 메뉴 디자인을 어색하게 할 수 있으니 적절한 값을 찾는 것이 중요합니다.
▩ FAQ: 자주 묻는 질문
Q1. Astra 테마에서 하위 메뉴 여백 기본값을 초기화하는 방법은?
A1. 사용자 정의 메뉴 설정에서 여백 관련 값을 0 또는 기본 상태로 되돌리면 됩니다. 별도의 캐시가 있다면 함께 삭제해야 정상 반영됩니다.
Q2. CSS 추가가 적용되지 않을 때 어떻게 해야 하나요?
A2. CSS 우선순위가 낮은 경우가 많으므로 !important를 사용하거나 구체적인 셀렉터로 수정해 보세요.
Q3. 모바일 메뉴의 하위 메뉴 여백도 따로 설정할 수 있나요?
A3. 네, 미디어 쿼리를 활용해 모바일 화면에 맞춘 별도의 CSS를 작성하는 것을 권장합니다.
▩ 아스트라 하위 메뉴 여백 조정 체크리스트
- 워드프레스 사용자 정의 메뉴 설정 확인
- 하위 메뉴 관련 패딩 및 마진 옵션 조절
- 필요 시 추가 CSS 코드 작성 및 적용
- 브라우저 개발자 도구를 이용한 클래스 확인
- 변경 사항 모바일 버전까지 테스트
- 캐시 및 CDN이 있다면 캐시 삭제 후 반영 확인
아스트라 테마 하위 메뉴 여백 조정은 사용자 정의와 CSS 두 가지 방법으로 가능합니다.
상황에 따라 적절한 방법을 선택해 웹사이트 메뉴를 더욱 깔끔하고 사용하기 쉽게 꾸며 보시기 바랍니다.