[개발일지01/🌉포폴사이트 JS] 메뉴 리스트 <li> 태그 전체에 링크 걸기

🌱 구현 연습도 하고싶고, 내 포트폴리오 사이트도 만들어보고 싶은 마음에 시작한 프로젝트!

 

웹 버전과는 달리 모바일 버전에서는 네비게이션 메뉴가 세로로 정렬되어야 했기에 헤더를 웹 버전에서 모바일 버전으로 변경하는 CSS 작업 중에 있었다. 내 예상대로라면 각 메뉴 항목의 전체 영역 클릭이 가능해야 했다. 그러나 예상과는 달리 메뉴 텍스트를 벗어난 영역은 클릭 영역에 포함되지 않았다. (이미 알고있던 내용이지만 고새 잊어버렸던..)

이는 UX 관점에서 좋지 못한 경험을 제공한다는 생각이 들었다. 그렇기에 li 태그 전체가 클릭 되도록 개선할 필요가 있었다.

내 예상과 달랐던 동작 결과

📑  <li> 태그는 block 요소, <a> 태그는 inline 요소

먼저 알고가야 하는 것은 li 태그와 a 태그의 속성이 다르다는 것이다.

li 태그는 block 요소여서 한 라인을 다 차지하지만, inline 요소인 a 태그는 그렇지 않다.

li 태그가 a 태그를 감싼다고 해도 실제 링크로 동작하는 것은 a 태그이기 때문에, 우리는 a 태그의 텍스트 속성 길이만큼만 선택할 수 있는 것이다.

(왼) <li> 태그의 선택 가능 범위 / (오) <a> 태그의 선택 가능 범위

 

💡  해결 방법

a 태그의 display 속성을 block으로 지정해줄 수 있다. 그렇게되면 li 요소를 선택할 때 a 태그도 같이 선택되는 것처럼 보이게 된다. 

(왼) <a> 태그의 선택 가능 범위 / (오) 실제 동작

 

참고로 본 프로젝트는 tailwind로 작업을 진행하고 있어 a 태그에 block 하나만 간단하게 추가했다🙌!

<ul class="px-10 pt-3 pb-3 text-dark-gray font-LINESeedKR-Bd">
    <li class="hover:text-black">
    <a
      href="#about"
      aria-label="About으로 이동"
      class="block pt-2 pb-3 text-center active:text-green"
      >About</a
    >
</li>
	<!-- /// -->
</ul>

 

---

참고

[mdn] HTML 요소 참고서 (링크)

[블로그] nav, ul, li 태그 HTML과 CSS로 가로형 메뉴 만들기 - Unikys (링크)

 

💬 본 포스팅은 공부 기록용으로 정확하지 않은 정보가 존재할 수 있습니다. 발견하신다면 알려주세요!