[CSS] li 전체에 링크 걸기

 

보통은 아래와 같이 링크를 걸 것이다.

<!-- HTML -->
<li>
  <a href="link">링크</a>
</li>

<!-- Vue.js -->
<li>
  <router-link :to="link">링크</router-link>
</li>

 

 

 

이렇게되면 글자부분에만 링크가 걸리게 되는데 만약 li 전체에 링크를 걸고싶다면 CSS 속성을 아래와 같이 설정하면 된다.

<a>와 <router-link> 모두에 적용된다.

li a {
  display: block;
}

 

 

출처

[CSS] li에 영역 전체에 링크 걸기 > 기술자료 | 해피정닷컴