배경 이미지나 CSS 테두리 스타일을 이용해 목차를 생성하는 간단한 튜토리얼입니다. <li> 속성을 아래의 테두리에 적용한 후 절대위치(absolute position) 속성을 사용한 요소와 테두리를 중첩하는 방법입니다. 이 점은 매우 유용합니다. – 배경 이미지와 테두리를 이용해 레이아웃을 쉽게 변경할 수 있습니다. 브라우저의 폰트가 축소되어도 작동됩니다(증가 또는 감소).
- HTML 코드
HTML코드와 다이어그램을 보세요. 앞으로의 작업을 이해하는데 도움을 줄겁니다.
- CSS 코드
중요 포인트입니다:
- <li> 요소에 position:relative 명시하고 아래 테두리를 주세요.
- bottom 속성에 불필요한 position:absolute 를 사용하여 <strong> 과 <em> 요소를 테두리 아래에 위치합니다.
- 기억하세요: relative 속성 (em)을 이용해 패딩 스페이스를 조절하세요.
- 테두리 스타일 변경하기
<li> 요소의 CSS border 와 padding를 쉽게 편집해 스타일을 수정할 수 있습니다.
- 테두리로 이미지 사용하기 (마지막 데모 보기)
배경 이미지 또한 이용할 수 있습니다.
- IE6 버젼 (IE6 데모 보기)
만약 버그 투성이인 오래된 IE6 브라우져를 여전히 사용중이라면, 제대로 레이아웃이 렌더링되지 않을 수 있습니다. 이런 방안을 해결하기 위해 간단하게 <li> 요소에 clearfix 를 추가합니다.
http://www.webdesignerwall.com/tutorials/css-menu-list-design/
안녕하세요?
너무 좋은 튜토리얼이라,,, 저희 카페에 좀 모셔가도 될까요?
출처는 당연히 명시하겠습니다.!
혹시,, 안된다면 말씀해주세요..
http://cafe.naver.com/pusanwd
그럼요. 출처만 명시하고 상업용만 아니면 마음껏 가져가세요. ^^