홍커피님께서 주신 책으로 이래저래 공부하고 있습니다.
그런데 실상 메모장에 점을 찍어보니 책하고는 달리 제대로 작동안되는게 있어서,
의문차 공부차 포스팅을 한 번 올려봅니다~
혹시 고수님들께서 달아주시는 가르침의 리플도 감사히 받겠습니다~

ul과 li를 이용한 리스트를 만들어보겠습니다.

test.html

<ul>
 <li>소개하고픈 링크</li>
 <li>즐겨읽는 책</li>
 <li>좋아하는 영화</li>
 <li>함께듣는 음악</li>
</ul>

이렇게 html 문서를 만들고 브라우저에서 보겠습니다.
당연히 아주 똑같이 자~알 나옵니다.
그런데 CSS 왕초보 송군 다음소스에서 의아해집니다..

test.html

<ul>
 <li>소개하고픈 링크</li>
 <li>즐겨읽는 책</li>
 <li>좋아하는 영화</li>
 <li>함께듣는 음악</li>
</ul>

style.css

ul { list-style: none;
      padding-left:0 ;
    }

test.html 파일에서 사용될 ul 태그앞에 붙는 불릿을 빼고, 앞쪽 여백을 0으로 지정해줬을 때, 두 브라우저간에 차이가 생겨버리는 현상이 생겼습니다.

파이어폭스에서는 padding 값이 잘먹는 반면, 익스플로러에서는 블릿만 없어지고,
padding 값을 먹지않는 현상이 발생했습니다~!!!

이 글을 참고하시기 바랍니다~ IE에서 padding값 인식 에러와 대처요령

저의 경우에는 책에 나온 예제대로만 출력하는데 의의를 두고, margin 값을 추가하니 익스에서도 제대로 출력이 됐습니다~ 짠!

style.css

ul { list-style: none;
      padding-left:0 ;
      margin-left: 0;
    }

오늘은 이사 관계로... 요기까지만 하구요..
다음편에는 리스트에 블릿도 넣고, 저도 처음에 좀 신기했던, 이미지와 자바스크립트 없이
마우스 over 버튼 흉내내는 것도 해봐용!!!^^