CSS로 내비게이션 바에 링크 구분선 추가하기
내비게이션 바에서 각 메뉴 항목 사이에 시각적인 구분선을 추가하면 사용자가 메뉴를 더 쉽게 구별할 수 있습니다. CSS의 border-right 속성을 <li> 요소에 적용하면 간단하게 링크 구분선을 만들 수 있습니다.
핵심 원리
리스트 항목(<li>)에 오른쪽 테두리(border-right)를 지정하면 각 메뉴 사이에 세로 구분선이 나타납니다. 이때 마지막 항목에는 불필요한 구분선이 생기지 않도록 :last-child 선택자를 사용해 테두리를 제거하는 것이 좋습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
border-right: 1px solid white;
}
li a {
display: block;
padding: 8px;
background-color: orange;
}
li:last-child {
border-right: none;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>코드 설명
1. 리스트 기본 스타일 제거list-style-type: none;으로 불릿 포인트를 없애고, margin과 padding을 0으로 설정해 기본 여백을 초기화합니다.
2. 가로 배치와 구분선 적용float: left;로 메뉴 항목을 가로로 나열하고, border-right: 1px solid white;로 흰색 1px 두께의 오른쪽 구분선을 추가합니다.
3. 링크 영역 스타일링display: block;과 padding: 8px;을 적용해 클릭 가능한 영역을 넓히고, 주황색 배경으로 메뉴를 강조합니다.
4. 마지막 항목 처리li:last-child { border-right: none; }를 통해 마지막 메뉴 항목의 오른쪽에는 구분선이 나타나지 않도록 합니다.
이처럼 border-right 속성과 :last-child 선택자만 활용하면 별도의 이미지 없이 깔끔한 링크 구분선을 손쉽게 구현할 수 있습니다.