Current Page 표시하기

From. CSS 마스터 전략 - page 129

세로형 내비게이션 바 예제에서는 현재 페이지를 나타내기 위한 클래스를 사용했습니다. 이 페이지에서 사용한 정도로 작은 사이트라면 페이지마다 이렇게 클래스를 추가할 수 있겠지만, 규모가 큰 사이트에서는 내비게이션을 동적으로 만들어내기 때문에 필요할 때 마다 서버에서 클래스를 지정하도록 할 수 있습니다. 하지만 중간 규모의 사이트에서는 메인 네비게이션이 잘 변경되지도 않고 내비게이션을 흔히 외부파일로 저장한 것을 인클루두하는 방식을 많이 사용합니다. 이런 경우 현재 보고 있는 페이지를 표시하기 위해서 동적으로 클래스를 추가하지 않아도 된다면 도움이 되지 않을까요? 네, CSS로는 물론 이런 일을 할 수 있습니다.

이 방식의 동작원리는 다음과 같습니다. 각 페이지의 body 엘리먼트에 ID나 클래스명을 부여하고 현재 사용자가 보고 있는 페이지나 섹션에 사용할 수 있도록 하는 것입니다. 그런 다음 내비게이션 리스트의 각 항목에 그에 맞는 ID나 클래스를 추가합니다. 고유하게 적용되는 바디 ID와 리스트 ID/Class 조합을 통해서 내비게이션 바에서 현재 보고 있는 항목을 표시할 수 있습니다.

							<body id="home">
								<ul id="mainNav">
									<li class="home"><a href="#">홈</a></li>
									<li class="about"><a href="#">회사소개</a></li>
									<li class="news"><a href="#">뉴스</a></li>
									<li class="products"><a href="#">제품소개</a></li>
									<li class="services"><a href="#">서비스</a></li>
									<li></li>
								</ul>
							</body>
						

현재 보고 있는 페이지를 표시하기 위해서 다음과 같은 조합을 사용할 수 있습니다.

							#home #mainNav .home a,
							#about #mainNav .about a,
							#news #mainNav .news a,
							#products #mainNav .products a,
							#services #mainNav .services a {
								background-position:right bottom;
								color:#fff;
								cursor: default;
							}
						

사용자가 홈페이지에 있을 겨우 home 클래스에 해당하는 리스트 항목이 선택된 상태로 표시될 것이다. 또한 뉴스 페이지를 보고 있을 경우 news 클래스에 해당하는 리스트 항목이 선택된 상태로 표시될 것입니다. 또 하나의 효과를 추가했는데, 선택된 상태일 경우 마우스커서를기본형으로 지정했습니다. 따라서 선택된 링크에 마우스를 올릴 경우 커서가 변하지 않기 때문에 사용자는 현재 페이지를 가리키는 해당 링크를 클릭하려고 하지 않을 것입니다.

결과 확인 페이지