CSS : 웹표준 코딩 세팅하기

????? 표준화 코딩을 하다보면 왼쪽이나 상단에 여백에 생기거나 <li>사용시?●모양의 블릿이 생기고 이미지에 보더를 먹은 모습을 볼 수 있습니다.
왜 그럴까요?? 쉽게 해결 할 방법은 없을 까요?

 

????? 해결 방법 있습니다~!! 그것도 아주 쉽게~!!
style에 공통적으로 제어해를 해주면 됩니다.

.

????? 그래서 제가 자주 쓰는 방법을 포스팅해 보려합니다.
정말 유용해요 ^___^

1. html, body, div, ul, li, dl, dt, dd, p, h1, h2, h3, h4, h5, h6, form {?margin:0; padding:0;?}

2. ul, ol, dl {?list-style:none;?}

3. img { border:0; vertical-align:top; }

????? 자~ 공통제어에 필요하다고 그냥 막상 넣으면 다음에도 까먹기 쉽상이죠?
게다가.. 원인과 적용 효과가 무엇인지 모른다면 아무 소용도 없을거에요~
그래서!! 설명들어갑니다~~~

	1. html, body, div, ul, li, dl, dt, dd, p, h1, h2, h3, h4, h5, h6, form {?margin:0; padding:0;?}   대부분 사용되고 있는 모든 테그에 기본적으로 여백이 있더군요. 왼쪽 정렬은 되었는데 왼쪽에 여백이 있고, 상단에 여백이 있고… 이를 위한 해결책 입니다. 여기서 보듯이 html, body, div 등등 모든 것에 margin:0과 padding:0을 주었습니다. 이로 모든 테그들이 순수의 상태로 돌아가게 된거죠 ㅋㅋㅋ margin도 없고 padding도없는 그 순수 자체로 ㅋㅋㅋ ? 2. ul, ol, dl {?list-style:none;?}   ul과?li를 쓰시다보면 앞에?●으로 블릿이 생기는데요. 이를 위한 해결책입니다. 기본적으로 li엔 스타일이 포함되어 있습니다. 이를 해제해주는 테그입니다.     ?적용 전 ?적용 후?   3. img { border:0; vertical-align:top; }   img 테그 사용시 보더값이 생기는 경우가 있는데요 대부분 이를 <img srs=”_____” border=”0″>으로 쓰시더군요. 물론 잘못된 표현은 아닙니다만 단한번 선언해주면 불필요한 border=”0″를 반복적으로 사용할 일이 없어집니다.   vertical-align:top;는 img 테그 써보시는 분은 필요성 절실히 느끼실 겁니다. 눈으로 보기엔 정말 왼쪽, 위로 착~ 붙는 img인지 알았지만 실상 보면 동동 떠있나봅니다. 저놈을 써주면 그 것도 해결 숑숑~ 마법처럼 착 붙어요.?새로고침 시 그 쾌감이란 ㅋㅋㅋ

????? 기본적으로 이 3가지 항목만 깔아주고 코딩시작하시면 정말 딱이에요~
그밖에?a, a:hover에 대한 정의도 해주시고 시작하면 더 좋아요 ^___^

 

????? 그럼 다음에 또 포스팅 해보겠습니다.
읽어주셔서 감사합니다 ^___^ 의견 주시면 서로 더 도움이 될 것 같네요~~!!