[css] css 속성 강제 적용하기 (우선 적용)

---

 

안녕하세요. 플입니다.

오늘은 css를 강제로 적용해볼게요.

 

코드를 바로 확인하실 분은 3번으로 넘어가 주세요!

 

---

 1.  기존 css 확인

오늘은 예시로 전에 만들었던 홈페이지를 가져와볼게요.

다시 보니 뜯어고치고 싶어 지네요. 좀 덜 바빠지면 대대적으로 리뉴얼을 해야겠습니다.

 

먼저 화살표로 표시한 부분을 봐주세요. 연한 노란색이죠?

오늘은 이 노란색 배경색을 바꿔보는 것으로 해보겠습니다.

 

기존의 코드는 표시된 부분이고요 반씩 나눠져 있기 때문에 linear-gradient로 되어있지만 그냥 

.sto{ background:#fff5bf; }

라고 생각하고 진행할게요. 

 

색을 반 나누는 방법이 궁금하시다면 아래 링크를 확인해주세요~

https://ssimplay.tistory.com/243

[css] linear-gradient 반반무많이 2탄

 

---

 2.  우선 적용 순서

 

코드는 우선 적용 순서가 있어요.

다양한 경우가 있지만 너무 많은 것을 적으면 헷갈리니까 오늘은 하나만 설명할게요.

 

코드는 위에서 아래 방향으로 진행돼요.

그래서 나중에 읽는 아래줄의 코드가 덮어쓰기처럼 우선 적용됩니다.

 

div{ background:blue; }

div{ background:yellow; }

예를 들어 코드가 이런 식으로 되어있으면 배경색은 yellow. 즉, 노란색이 됩니다.

오늘 할 것은 순서를 바꾸지 않고 배경색을 파란색으로 바꿔주는 거예요.

---

 3.  !important

그럼 일단 위쪽에 원래 배경색과 다른 색을 적어줍시다.

 

아래쪽이 적용되니까 배경색이 변하지 않습니다.

 

이번에는 속성 값에서 한 칸을 띄어서 !important를 적어주세요 !(느낌표)를 꼭 적어주셔야 합니다.

important는 '중요한'이라는 뜻으로 이 속성을 더 중요시하라는 명령어라고 생각해주시면 됩니다.

 

div{ background:blue !important; }

div{ background:yellow; }

그러니까 이렇게 적어주시는 거죠.

 

그러면 이렇게 배경이 새 파란색으로 바뀝니다. 오오..

---

 4.  활용 

 

사실 이 코드를 많이 사용해주시는 건 유지보수에도 힘들고 추천하지는 않아요.

 

하지만 꽤 유용한 코드인데,

예를 들어 구매한 템플릿에서 css를 아무리 봐도 못 찾을 때 이 !important를 사용합니다. 약간 꼼수 같은 거죠. 

 

아니면 코드를 여기저기서 복사해서 쓸 때가 있는데 여러 개가 중첩되는 경우가 있어요. 그럴 때도 항상 이 코드를 적용하겠다! 하고 선언해줄 때 사용해요. 

 

---

그럼 이만.

총총.