전체 탐색 모음 목록 항목을 링크로 클릭할 수 있도록 설정

요청에 따라 수평 탐색 모음은 순서가 지정되지 않은 목록을 사용하여 구성되었습니다. 각 목록 항목에는 충분한 패딩이 있습니다. 그러나 원하는 효과는 목록 항목 영역 전체가 텍스트만이 아닌 활성 링크로 기능한다는 것입니다. 이를 달성하는 방법은 다음과 같습니다.

각 목록 항목의 전체 영역을 클릭할 수 있게 하려면 CSS 코드를 다음과 같이 변경하세요.

#nav a {
  display: inline-block;
  padding: 25px 10px;
}

앵커 태그(#nav a)에 인라인 블록을 적용하면 블록 요소처럼 동작하여 수직으로 정렬하면서 목록 항목의 너비를 차지합니다. 즉, 이전에 목록 항목에 적용했던 패딩(#nav li)을 이제 앵커 태그에 적용할 수 있습니다.

이 조정을 통해 패딩을 포함한 각 목록 항목의 전체 영역이 클릭 가능한 링크로 인식됩니다. 아래 코드 조각은 필요한 변경 사항을 보여줍니다.

#nav a {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
  display: inline-block;
  padding: 25px 10px;
}

목록 항목에서 패딩을 분리하면 시각적 모양을 유지하면서 전체 목록 항목을 클릭하여 관련 링크를 활성화할 수 있으므로 사용자 친화적이고 시각적으로 매력적인 탐색 환경을 제공할 수 있습니다.