[css] CSS 적용 우선순위

개요

react-bootstrap에 스타일을 적용하는 과정에서 커스텀 스타일이 적용되지 않고 bootstrap 기본 스타일이 적용되는 현상이 발생했다. 이 문제를 해결하는 과정에서 css 적용 우선순위의 문제가 원인이었음을 알게되어 CSS 적용 우선순위에 대해 정리하게 됐다.

컴포넌트에 스타일 적용하기

컴포넌트에 스타일을 적용하는 방법은 다양하다.
className 사용, id 사용, style 속성 설정 등 다양한 경로로 스타일링할 수 있다. 이러한 CSS 특성상 하나의 태그에 여러 경로로 스타일이 지정되는 경우가 발생할 수 있다. 이 경우 CSS 우선순위 규칙에 따라 스타일이 적용된다.

CSS 적용 우선순위

우선순위는 다음과 같다.

1. !important

p {
  background-color: red !important;
}

위와 같이 속성 뒤에 !important를 붙여주면 모든 순서를 무시하고 이 속성이 우선적용 된다.
하지만 강제 지정은 지양하는 것이 좋다. 유지보수 측면에서 좋지 않다.

2. style 속성 지정

<div style="color:red">태그 스타일 지정</div>

3. #id 로 지정

4. class,className 으로 지정

5. tag이름으로 지정

p{
	color:'blue'
}

문제 해결

react-bootstrap 컴포넌트에 커스텀 스타일이 먹히지 않았던 건 className을 사용한 것이 문제였다. id속성으로 설정해줬더니 높은 우선순위가 적용돼서 스타일을 자유롭게 지정해줄 수 있었다.

느낀점

HTML,CSS 공부하면서 분명 배웠던 개념이었는데 다 까먹고 있었다.. ㅠ 다시는 까먹지 말아야지..