2 2단계: 정적인 메뉴 버튼 수정하기

 

앞에서 제작한 메뉴 버튼에 마우스 포인터를 올리면 글자 영역에서는 손가락으로 바뀌지만 노란색 영역에서는 화살표가 나타납니다.

 

그림 11-7 마우스 포인터가 글자 영역에서는 손가락(좌), 노란색 영역에서는 화살표로 나타남(우)

 

현재 메뉴 버튼의 동작 범위가 글자에만 적용되어 있기 때문입니다. 동작 범위를 노란색 영역까지 넓히고 싶다면 <a> 태그의 범위를 확장시켜야 합니다. 먼저 <li> 태그 안에 적용한 text-align과 line-height 속성을 주석으로 처리하고 position: relative;을 적용합니다.

<a> 태그는 position: absolute;을 적용하고 width와 height 속성에 각각 100%를 입력합니다. absolute는 어디로 튈지 모르는 4차원 성격을 지닌 속성값입니다. 자식에 absolute 속성값을 적용할 때는 부모에 relative 속성값을 적용하여 안전장치를 만드는 것이 좋습니다(부모에 relative 속성값 적용 유무에 따라 좌표 기준점이 달라지는 것을 Day 08에서 확인했습니다).