li 태그와 a태그 사용시 링크 클릭 영역을 전체로 넓히는 방법


<li> 태그로 감싼 <a> 태그의 클릭영역을 늘리는 방법은 display 모드를 block 요소로 변경하는 것입니다.

a 태그에 display:block 요소 삽입

<li> 태그 사이에 있는 <a> 태그의 글씨 클릭 가능 영역을 <li> 태그 전체 넓이로 늘리는 방법은 CSS에서 문제의 <a> 태그에 선택자를 지정한 후 display : block; 값을 삽입하면 됩니다.

a {
  display: block;
}

<li> 태그에 <a> 태그 범위가 작은 이유

<a> 태그는 inline 요소이므로 화면에서 차지하는 영역이 작습니다. 반면 <li> 태그는 화면의 끝까지 사용합니다.

CSS-li-a-area-spread-1


따라서 <li> 태그의 전체 넓이를 <a> 태그로 클릭하고 싶다면, <a> 태그의 종류를 inline에서 block 으로 변경하면 됩니다.

변경이 되면 <li> 태그 영역에 마우스를 클릭해도 자동으로 전체 범위가 <a> 앵커 텍스트처럼 클릭 가능 범위가 됩니다.

<a>를 block 요소 처리하지 않으면, 아무리 <li> 태그에 cursor 등을 삽입해서 모양이 변해도 링크는 되지 않습니다.