Opacity, Navigation Bar

◎ Opacity

- opacity/transparency of an element

- 0.0~1.0: 값이 낮을수록 투명함

- IE8 and earlier: filter:alpha(opacity=x) / x: 0~100

- div { background: rgba(r,g,b,alpha); }

- transbox using opacity

◎ Navigation Bar

- list of links: using <ul> and <li>

- vertical navigation bar인 경우

- li a { display: block; width: 60px; } 

- inline 요소인 <a>를 block 요소로 바꿔주어, 클릭할 때 block 전체를 사용할 수 있도록 해줌 (not just the text)

- 또는 <ul>에서 width: 60px; 을 사용하여도 같은 결과가 나타남

- ul { padding: 0; margin: 0; }

- li a { display: block; }

- li:last-child a { border-bottom: none; }

- li a.hover:not(.active) { background-color: #555; }

- horizontal navigation bar인 경우

- li { display: inline; } (원래 <li>는 block 요소)

- li { float: left; } 

- li a { display: block; }

- fixed navigation bar인 경우

- responsive navigation bar인 경우

- float를 li a에 해주는 이유는 display: block; 으로 하여 li a 전체를 누를 수 있게 해놓았기 때문

- width: 701px~

- width: 401px~700px

- width: ~400px