1장 리스트

[책] Web Standards Solutions 웹 표준 첫걸음
에 나오는 내용중 중요한 부분만 정리하였다. 저작권이 문제가 될지도 모르겠다.

1 ul li
 - li 태그의 경우 앞 부분에 블릿 이미지(●) 이미지가 앞에 자동으로 붙는다.
   기본 블릿 이미지 보다 더 이쁜 블릿 이미지를 사용하고 싶은 경우
 1) list-style-image 속성을 사용해 기본 블릿 이미지에 다른 이미지를 지정
  ul {
       list-style-image : url(fancybullet.gif);
      }
   - 이 경우 브라우저마다 이미지들의 수직 위치가 조금씩 다라짐
  2) <li> 엘리먼트의 배경 이미지로 블릿 이미지를 지정하는 방법
   ul {
        list-style:none;
       }
   li {
       background:url(fancybullet.gif) no-repeat 0 50%;
       padding-left : 17px
      }
    - no-repeat 이미지를 한번만 표시 
    - 0 50% 라고 지정한것은 배경이미지를 왼쪽에서 0 픽셀 위치에 그리고 위에서 50% 위치에 표시
    - 리스트 항목의 왼쪽 패팅값을 17픽셀로 지정, 가로 12px, 세로 12px 이미지가 텍스트와 겹치지
      않고 약간의 여백과 함께 표시