글 목차
워드프레스 메뉴에 세로 구분선 추가하는 방법 (CSS 가이드)
워드프레스 웹사이트의 가독성을 높이고 메뉴 항목 간의 경계를 명확히 하기 위해 세로 구분선을 추가하는 것은 매우 효과적인 디자인 기법입니다. 별도의 플러그인 없이 간단한 CSS 코드만으로 이를 구현할 수 있습니다.
[이미지: CSS 적용 전/후 차이 비교 참고]
1. 기본적인 CSS 구분선 추가하기
가장 보편적인 방법은 border-right 속성을 사용하는 것입니다. 마지막 메뉴 항목에는 구분선이 생기지 않도록 :last-child 선택자를 활용합니다.
/* 메뉴 항목 사이에 세로선 추가 */
.main-navigation ul li {
border-right: 1px solid #ccc; /* 선의 두께, 스타일, 색상 */
padding-left: 15px;
padding-right: 15px;
}
/* 마지막 메뉴 항목에서는 선 제거 */
.main-navigation ul li:last-child {
border-right: none;
}
2. 가상 요소(::after)를 이용한 세련된 구분선
높이 조절이 자유로운 구분선을 원한다면 ::after 가상 요소를 사용하는 것이 좋습니다. 이 방법을 사용하면 메뉴 텍스트보다 짧은 선을 만들 수 있어 더욱 깔끔합니다.
.main-navigation ul li {
position: relative;
display: inline-block;
padding: 0 20px;
}
.main-navigation ul li::after {
content: "";
position: absolute;
right: 0;
top: 20%; /* 위에서 20% 지점 */
height: 60%; /* 전체 높이의 60%만 차지 */
width: 1px;
background-color: #ddd;
}
.main-navigation ul li:last-child::after {
display: none;
}
3. 주의사항 및 팁
- 클래스명 확인: 테마마다 메뉴를 감싸는 클래스명(예:
.primary-menu,.nav-menu등)이 다를 수 있습니다. 크롬 개발자 도구(F12)로 정확한 클래스를 확인하세요. - 모바일 최적화: 모바일 메뉴에서는 세로선이 오히려 가독성을 해칠 수 있습니다. 미디어 쿼리를 사용하여 데스크톱에서만 적용되도록 설정하는 것이 좋습니다.
