css의 상속에 관한 팁입니다. > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

css의 상속에 관한 팁입니다. 정보

CSS css의 상속에 관한 팁입니다.

본문

많은 분들이 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 { }

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

 

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

 

 

 

 

 

추천
2
  • 복사

댓글 3개

CSS 상속을 사용하기 위해서는 다음과 같은 방법을 따르면 됩니다.

상속 가능한 스타일 속성 선택
CSS에서는 일부 스타일 속성만이 상속이 가능합니다. 이러한 속성들은 일반적으로 텍스트 스타일과 관련된 속성입니다. 대표적으로 font-size, color, line-height 등이 있습니다.

스타일 속성 상속 설정
스타일 속성이 상속 가능하다면, 자식 요소에서 해당 스타일 속성을 상속 받을 수 있도록 부모 요소에서 상속 설정을 해주어야 합니다. 이를 위해 CSS에서는 inherit 값을 사용합니다.

예를 들어, 부모 요소에서 font-size를 정의하고 이를 자식 요소에서 상속 받도록 하려면 다음과 같이 코드를 작성할 수 있습니다.

.parent {
  font-size: 16px;
}

.child {
  font-size: inherit;
}
이제 child 클래스를 가진 자식 요소에서는 부모 요소에서 정의한 16px의 font-size 속성을 상속받아 사용할 수 있습니다.

CSS 선택자 활용
CSS 상속을 사용하면 선택자를 보다 간결하게 작성할 수 있습니다. 예를 들어, 같은 스타일을 적용해야 하는 여러 개의 요소가 있다면, 부모 요소에 공통 스타일을 적용하고, 자식 요소에서는 해당 스타일을 상속받아 사용하는 방법을 활용할 수 있습니다.

.parent {
  color: blue;
  font-size: 16px;
  line-height: 1.5;
}

.child-1, .child-2, .child-3 {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

위 코드에서는 parent 클래스에 공통 스타일을 정의하고, child-1, child-2, child-3 클래스에서는 해당 스타일을 상속받아 사용합니다. 이렇게 하면 스타일 코드를 보다 간결하게 작성할 수 있습니다.
© SIRSOFT
현재 페이지 제일 처음으로