padding을 li에 줄 것인가 a에 줄 것인가 (feat. a는 inline 요소라네)

<ul>
	<li>
		<a href="#">HOME</a>
	</li>
	<li>
		<a href="#">ABOUT</a>
	</li>
	<li>
		<a href="#">FAQ</a>
	</li>
	<li>
		<a href="#">CONTACT</a>
	</li>
</ul>

 

이런 메뉴를 만드는데 (아마) 당연히 위/아래, 좌/우 패딩을 줄 텐데

이때 패딩을 li에 줄 것인가 a에 줄 것인가 고민을 할텐데,

 

 

a에 주는 것이 더 좋다.

(a에 주어야만 한다.는 절대 아니지만..)

 

 

 

왜냐하면

a tag 주변 padding 전체가 target 영역이 되기 때문이다.

그러면 굳이 작고 작은(;) link text에 마우스를 갖다대거나 클릭하지 않고

padding 영역에만 마우스 커서가 들어오거나 클릭이 되면

hover 스타일이나 원하는 페이지로 이동하는 등의 

효과가 일어날 수 있기 때문!

 

 

주변의 공간에 마우스를 갖다 대거나 클릭했을 때도

원하는 효과가 일어나기 때문.

 

 

 

 

 

 

 

 

근데!!!!!!

a 태그는 inline element이다!!!

즉, width, height, padding-top, padding-bottom 등등이 제대로 먹히지 않는다!

 

 

 

따라서 a 태그를

display:block 이나 display:inline-block

으로 바꿔주어야 한다!!!!!!!!!!!!