[CSS] 초기화 코드 - 초 간단

* {
  margin: 0 auto;
  padding: 0;
}
a {
  text-decoration: none;
}

CSS 초기화 코드로 검색하면 이것저것 많이 나오는데요~

제가 생각했을 땐 위의 코드면 충분하다고 생각해요~

오히려 많은 초기화 코드를 작성할시 좀 규모 있는 퍼블리싱 할 때 방해가 되는 경우도 있습니다.

부트스트랩이나 뭐 다른 라이브러리 쓰실 때 자신은 padding 같은것을 준적도 없는데 막 패딩이 있고, 

제가 설정한 스타일이 적용이 안되고, 디버깅 해보면 부트스트랩의 초기화 코드에 덮힌다던지 (물론 이 경우는 CSS 호출 순서나 !implement; 로 해결이 가능하긴 합니다.) 등의 문제..

제 생각엔 그냥 필요성이 느껴질 때 떠오른 것을 하나씩 추가하는게 제일 이상적 인것 같아요.

그래서 제 생각엔 저 정도로만 초기화 해주고, 개발하면서 필요할 것 같은 초기화 코드는 그때 그때 추가로 넣으시는게 좋은 것 같아요~

실제로 제가 퍼블리싱을 개인 프로젝트, 외주 개발로도 많이 해보면서 느낀건데 쓸데 없이 많은 초기화 코드는 오히려 재정의가 더 힘들더구요.

어차피 초기화 코드가 브라우저 별 차이를 똑같이 만들어주는 건데 요즘엔 차이가 나는게 별로 없어요.

특히 이제 IE의 시대가 점점 작아지고 있잖아요? 점유율이 옛날엔 정말 대단했고 한국에선 특히 심해서 뭐 퍼블리싱 하려고하면 

IE7이 특히 말썽이였고 어떤 의뢰자는 IE6얘기도 할때가 많았는데, 

XP의 보안 업데이트 지원이 중지되고 나서 시간이 좀 지나니까 솔직히 2016년에 IE6,7 쓰는 사람은 거의 보기가 힘들어졌죠.

그래서 생각보다 초기화 코드에 연연해하지 않아도 될정도라고 생각합니다.

그래서 그냥 공통적이고 필수적인 것에 대해서만 초기화를 진행합니다.

모든 태그의 여백 값을 0으로 초기화하고 (실제로 최근에 파폭이랑 크롬이랑 여백이 조금 다른걸 발견했습니다.)

a태그는 워낙 자주 쓰이는데 요즘 딱히 데코레이션을 안넣으니까 미리 모든 a 태그에 none을 설정합니다.

이 외에도 어떤 한 태그에 중복 스타일이 계속 반복된다면 위의 a 태그 처럼 전체 적용하시고, 필요한 태그만 클래스를 붙혀서

<a class="special">

로 해서 따로 스타일을 주면 되겠습니다~

class="special great good"

이런 식으로 class를 여러개 줄 수도 있습니다.

한가지 팁으로는 id는 javascript에서 찾는속도가 class보다 빠르답니다. 

그리고 id는 중복되면 안되죠. 그니까 id는 스크립트에 쓸데가 있는 요소에 넣으시면 되고

class는 중복도 가능하니까 클레스는 스타일, UI 코딩에 쓰시는게 더 좋아요!

뭔가 요소의 기능적인 것도 직관적으로 알게되고 여러모로 장점이 많은 방법인 것 같습니다.

그럼 모두 즐 코딩 하세요!!

도움이 되셨다면 아래 하트를 뿅..

▼▼▼▼▼