Sliding Doors of CSS - Douglas Bowman

참고: http://www.alistapart.com/articles/slidingdoors

Web Standard에 기반한 CSS를 사용한 Tab 구현시

Tab 모서리를 라운드 처리하는 방법

겹치는 2개의 background image를 사용한다.

이 때 2개의 background 를 사용하기 위해

element 2개가 필요한데

tab을 표현하는 경우 <li> 와 <a> 를 활용한다.

(적절히 활용할 것이 무엇인지 경우에 따라 다를 수 있다.)

선행하는 <li>에 아래로 깔리는 이미지를

뒤따르는 <a>에 위에 덮히는 이미지를

background 로 잡아준다.

아래로 깔리는 이미지는 크기를 넉넉히 잡고

위로 덮히는 이미지는 크기를 최소화 한다.

자세한 구현 방법은 위 출처 참고

예) www.mozilla.org