많은 분들이 css를 사용하시고

어떤 분은 잘 사용하시겠지만

어떤 그누보드 템플릿을 보면 css의 구조가

그야말로 엉망진창입니다 ㅎㅎㅎㅎ

왜 그렇게 생각할까요?

왜 그런일이 발생할까요?

css의 문법의 아닙니다.

.box {color:#ff}

간단한 문법만 익혀도 css는 가능하죠

그런데 이건 뭘까요

.box {color:#ff !important}

이거 뭔지 아시는분?

이거 왜 쓰면 안되는지 아시는분?

----------------------------------------------------------------------

css는 철저하게 상속체계를 따라가는 언어입니다.

상속 체계를 따라 끊임없이 내려가기때문에 별명이 폭포수라고도 합니다.

<div class="box"></div>

가 있습니다. 하나의 디브죠

마진을 위로 주고 싶습니다.

어떤 코드에 이렇게 되어있죠

<div class="box mgt_10"></div>

.box { }

.mgt_10 {margin-top:10px}

이 코드의 문제가 뭘까요?

마진을 10을 줄지 1을 줄지 100을 줄지 모르는 상황에서 

모든 경우의 수를 css로 적어야 합니다.

.mgt_1 ~ mgt_100 까지 100개

.mgl_1 ~ mgl_100 까지 100개

.

.

.

패딩까지 합치면 클래스가 800개가 생깁니다.

그리고 코딩을 하다가 문제가 생기면

html마크업의 클래스를 변경해야합니다.

홈페이지 페이지 수 기준 50페이지 내외 정도면 그래도 뒤적거려가면서 찾아내서 모든 마진간격에 대한 클래스 명을 고쳐야 합니다.

근데 만약에.. html 페이지가 100개면? 1000개면?

감당가능하시겠어요?

홈페이지 개발에서 html은 개발자와 퍼블리셔가 공유합니다.

퍼블리셔가 손을 많이 대면 개발에도 영향을 미치죠

그래서 가급적 모든 수정사항을 css로만 처리를 해두게 만드는 개념이 맞습니다.

그걸 예전부터 웹에서는 방탄웹이라고 불렀죠

.box {}에 어떤 속성을 적었는데 

.section과 .box 와의 간격을 조정하기 위해서는

css를 통해 처리하는 방법

.section + .box { }를 통해 그리드를 조정하는게 맞죠 ^^

만약 .box를 만들었는데 먼가 다른게 있다면

.box2를 만드는게 아니고

.box.ty1 { }

이렇게 더블클래스를 써서 필요한 속성만 콘트롤 해야 합니다.

좀더 자세하게 알고 싶거나 궁금한 사항이 있으시면 댓글로 달아주세요 ^^