본문 바로가기
coding/html + css

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

by 씸플레이 2020. 9. 17.
728x90
반응형

 

안녕하세요. 플입니다.

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

 

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

 

 1.  기존 css 확인

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

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

 

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

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

 

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

.sto{ background:#fff5bf; }

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

 

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

https://ssimplay.tistory.com/243

 

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

안녕하세요. 플입니다. liner-gradient를 사용할 때 주의할 점이 있어서 2탄으로 돌아왔습니다.  1. liner-gradient https://ssimplay.tistory.com/239 [css] 배경색 반반 무많이 안녕하세요. 플입니다. 오늘은..

ssimplay.tistory.com

 

 2.  우선 적용 순서

 

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

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

 

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

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

 

div{ background:blue; }

div{ background:yellow; }

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

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

 3.  !important

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

 

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

 

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

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

 

div{ background:blue !important; }

div{ background:yellow; }

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

 

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

 4.  활용 

 

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

 

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

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

 

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

 

그럼 이만.

총총.

300x250
반응형
저작자표시비영리변경금지

'coding > html + css' 카테고리의 다른 글

[css] 테이블 테두리 한 줄로 만들어 보자  (22) 2020.11.24
[css] 도형을 회전시키는 애니메이션을 만들어보자  (10) 2020.11.22
[html] <!DOCTYPE html> 대충 이해해보기  (27) 2020.10.03
[html] html을 대충 이해해보자  (40) 2020.09.29
[css] css 속성 강제 적용하기 (우선 적용)  (58) 2020.09.17
[css] 긴 문장의 단을 나눠보자  (36) 2020.09.04
[css] 텍스트 줄바꾼 단어단위로 하기  (2) 2020.06.12
[css] transform을 이용해 뒤집는 애니메이션 만들기  (0) 2020.05.26
[css] 마우스 올리면 나타나는 버튼 만들기  (0) 2020.05.25

태그

, , , , , , , , ,

관련글

댓글58

티스토리툴바