CSS의 nav-right 속성은 키보드의 오른쪽 방향키(→)를 눌렀을 때 포커스가 이동할 대상 요소를 지정하는 탐색(navigation) 속성입니다. 이 속성을 활용하면 마우스 없이 키보드만으로 화면 안의 버튼이나 링크를 원하는 순서대로 이동하도록 제어할 수 있습니다. 특히 TV 리모컨이나 게임패드처럼 방향키 중심으로 조작하는 환경에서 매우 유용하게 사용됩니다.
nav-right 속성의 문법과 값
nav-right 속성의 기본 문법은 다음과 같습니다.
nav-right: auto | <id> [ current | root | <target-name> ]? | inherit;
- auto – 브라우저가 자동으로 다음 탐색 대상을 결정합니다.
- <id> – 지정한 ID를 가진 요소로 포커스가 이동합니다. 예:
#btn2 - current – 현재 포커스가 있는 요소를 그대로 유지합니다.
- root – 문서의 최상위(root) 요소로 포커스를 이동합니다.
- inherit – 부모 요소의 속성값을 상속받습니다.
nav-right와 함께 사용되는 관련 속성으로는 왼쪽 방향키를 담당하는 nav-left, 위쪽 방향키를 담당하는 nav-up, 아래쪽 방향키를 담당하는 nav-down이 있으며, 각 방향별로 이동할 대상을 개별적으로 지정할 수 있습니다.
예제 코드
다음 예제는 네 개의 버튼에 nav-right, nav-left, nav-up, nav-down 속성을 모두 설정하여, 방향키만으로 버튼 사이를 자유롭게 이동할 수 있도록 구현한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
button {
position: absolute;
}
button#btn1 {
top: 10%;
left: 15%;
nav-index: 1;
nav-right: #btn2;
nav-left: #btn4;
nav-down: #btn2;
nav-up: #btn4;
}
button#btn2 {
top: 30%;
left: 30%;
nav-index: 2;
nav-right: #btn3;
nav-left: #btn1;
nav-down: #btn3;
nav-up: #btn1;
}
button#btn3 {
top: 50%;
left: 15%;
nav-index: 3;
nav-right: #btn4;
nav-left: #btn2;
nav-down: #btn4;
nav-up: #btn2;
}
button#btn4 {
top: 30%;
left: 0%;
nav-index: 4;
nav-right: #btn1;
nav-left: #btn3;
nav-down: #btn1;
nav-up: #btn3;
}
</style>
</head>
<body>
<button id = "btn1">Result1</button>
<button id = "btn2">Result2</button>
<button id = "btn3">Result3</button>
<button id = "btn4">Result4</button>
</body>
</html>코드 설명
각 버튼은 position: absolute로 화면에 배치되며, nav-index 속성으로 탐색 우선순위를 지정합니다. 예를 들어 btn1에는 nav-right: #btn2;가 적용되어 있으므로, btn1에 포커스가 있는 상태에서 오른쪽 방향키를 누르면 포커스가 btn2로 이동합니다. 같은 방식으로 네 개의 버튼이 서로를 참조하여 사방으로 순환하는 탐색 구조를 만들 수 있습니다.
브라우저 호환성 주의사항
nav-right 속성은 CSS3 초안에서 제안된 기능으로, 현재 대부분의 주요 브라우저에서는 공식적으로 지원되지 않습니다. 과거 오페라(Opera) 브라우저의 일부 버전에서 실험적으로 동작한 바 있으며, 실무 프로젝트에서는 JavaScript 이벤트 처리나 tabindex 속성 등의 대안을 함께 고려하는 것이 좋습니다.