a태그 범위 넓히는 방법

안녕하세요 엘빈입니다. 메뉴를 표시하는 네비게이션 바를 작업하던 중 글자에만 링크로 이동되어 전체 영역으로 a 태그 링크 범위를 확대하고 싶었는데요. 검색을 활용하여 방법을 찾아 포스팅으로 정리합니다. 정말 간단합니다. css style 하나만 지정해주면 되죠.

이렇게 빨간 부분 전체를 클릭해도 이동하게끔 만들고 싶었는데 글씨 부분을 눌러야 이동이 가능해지는 현상입니다. 이는 기본적인 a 태그의 범위가 작기 때문인데요. 영역을 넓히기 위해서는 css 속성을 설정해야 합니다.

.res-menu-box{

  display: block;

}

이처럼 display:block 속성을 지정하고 a 태그안에 class 속성값으로 집어넣어줬습니다. 이 현상은 대체로 메뉴를 만드는 경우 li 태그 안에 a 태그를 삽입할 때 생겨나는 현상입니다. 포스팅 보고 잘 해결되셨으면 좋겠습니다.