23. [CSS] CSS 오버라이딩 (덮어 쓰기)

이번 포스팅에서는 CSS 덮어쓰기에 대해서 알아보겠습니다.

스스로 짠 코드가 아닌 기존에 존재하는 코드들을 덮어쓰기 하려면 CSS에 적용되는 우선순위에 대해서 알아야 합니다. 

우리가 이전에 [CSS selector]를 학습했던 내용들을 리마인드 하겠습니다. 

 

---

CSS Selector

 

1. tag에 대해서 적용 (tag명{})

p{

}

2. class에 대해서 적용 (.class명{})

.class{

}

3. id에 대해서 적용(#id명{})

#id명{

}

 

CSS Selector 우선순위 (동일한 태그에 적용되었을때, 상충되는 값들을 어떻게 처리하는지?)

1. style(10000점) >>>>>>>> 2. id(100점) >>>>> 3. class(10점) >> 4. tag(1점) 

중요! 스타일링을 위해서는 CSS Selector 중 class를 사용하는 것을 권장! 

 

---

우선 CSS의 가장 중요한 사안이 있습니다. 

CSS는 아래에서 부터 읽어서 적용시킵니다.

이제 덮어쓰기 방법에 대해 알아보겠습니다. 

 

 

1. 기존에 있던 클래스 정의보다 하단에 작성

.box { /*기존의 선임이 작성한 코드*/
  background-color : yellow;
}

.box { /*내가 작성한 코드*/
  background-color : blue;
}

.box 는 blue 로 색상이 결정됩니다. CSS는 아래에서 부터 읽어들이기 때문입니다. 

 

 

 

2. CSS Selector 중 적용되어 있는 것 보다 우선순위가 높은 것으로 작성

.box { /*기존의 선임이 작성한 코드 */
  background : red;
}

#my-box { /*내가 작성한 코드 */
  background : blue;
}

CSS Selector 우선순위 (동일한 태그에 적용되었을때, 상충되는 값들을 어떻게 처리하는지?)

1. style(10000점) >>>>>>>> 2. id(100점) >>>>> 3. class(10점) >> 4. tag(1점) 

 

여기서 box에 class(.)를 적용하여 색상을 결정하였지만 더 우선순위가 높은 id(#)를 사용하여 box의 색상을 blue로 덮어씌웠습니다. 

 

하지만 id(#)는 JS에서 기능개발을 위해서 사용 할 경우가 많으므로 안쓰시는 것을 추천드립니다. 

 

 

 

3.  Specificity 높여서 작성하기 

div.container .wrap-box .box {
  background-color : coral;
}

.box {
  background-color : gold;
}

box class에 어떤 CSS가 적용되었을까요? box의 색은 coral 색으로 적용됩니다. 

왜냐하면 위의 CSS처럼 다단계로 작성되어진 Selector 는 Specifity 점수가 높게 산정되어 우선순위를 가지게 됩니다. 

 

위의 코드에 덮어씌우려면 

div.container .wrap-box .box {
  background-color : coral;
}

div.container .wrap-box .box {
  background-color : gold;
}

Specitity 를 동일하게 해주면 됩니다. box class의 색은 gold가 됩니다. 

 

 

4. 최후의 수단. !important

div.container .wrap-box .box {
  background-color : coral;
}

.box {
  background-color : gold !important; 
}

3번에서 살펴보았던 이 코드를 Specifity 를 동일하게 하여 덮어씌우기 귀찮으면 !important를 사용하면 됩니다. 

다른 여러 요소들을 모두 무시하고 해당 코드를 적용시켜 줍니다. 

 

하지만, !important 는 나중에 유지보수가 힘들기 때문에 정말 최소한으로 사용하는 것을 추천드립니다.