CSS의 nav-left 속성은 키패드나 리모컨의 왼쪽 화살표 버튼을 눌렀을 때 포커스가 이동할 대상 요소를 지정하는 속성입니다. 마우스 없이 방향키만으로 화면을 조작하는 스마트 TV, 셋톱박스와 같은 환경에서 특히 유용하게 활용됩니다.
nav-left 속성 예제
아래 예제는 네 개의 버튼을 배치하고, 각 버튼에 nav-left를 비롯한 탐색 관련 속성들을 설정하여 방향키만으로 포커스를 자유롭게 이동할 수 있도록 구성한 코드입니다. 코드를 실행한 뒤 왼쪽 화살표 버튼을 눌러 동작을 직접 확인해 보세요.
<!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>
함께 알아두면 좋은 내용
- nav-right, nav-up, nav-down: 각각 오른쪽, 위, 아래 방향키를 눌렀을 때 포커스가 이동할 대상을 지정합니다. 네 가지 속성을 함께 사용하면 상하좌우 모든 방향의 탐색 흐름을 완벽하게 제어할 수 있습니다.
- nav-index: 방향키 탐색 시 기본 순서를 정수 값으로 지정하는 속성입니다. 위 예제에서도 각 버튼의 탐색 우선순위를 정의하는 데 사용되었습니다.
- 브라우저 호환성: nav-left 속성은 일반 데스크톱 웹 브라우저에서는 지원이 제한적이며, 주로 TV 전용 브라우저나 임베디드 기기 환경에서 사용됩니다. 실제 프로젝트에 적용하기 전에 대상 환경의 지원 여부를 반드시 확인하세요.