CSS 전체 선택자에 color: white를 추가하고 구체적인 선택자에 다른 color로 바꿨을 때

"컴퓨터는 바보가 아니다. 에러를 해결했을 때 바보는 나였다는 것을 깨닳을 수 있을 것이다." - 지친케찹

 

CSS를 다루다보면 답답한 상황이 많이 일어난다.

 

이전 프로젝트를 진행하면서 전체 선택자 때문에 문제가 생겼다.

 

일단 전체 선택자는 항상 전체 페이지의 쓸모없는 여백을 비울때 사용하므로 밑의 코드를 거의 default로 적용한다.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 

저번에 했던 실수가 전체 셀렉터에 color: white를 추가해주었다. 

 

나는 더 작은 범위의 선택자에 갈 수록 똑같이 color설정을 바꾸면 더 구체적인 속성으로 바뀔줄 알고 코딩했는데 바뀌지 않아서 고생을 했다.

예를 들자면 body태그 안에 h1의 폰트 색깔만 yellow으로 바꾸고 싶어서 아래와 같이 작성했는데

h1{
  color: yellow;
}

 

이렇게 작성하더니 h1의 색깔이 yellow로 바뀌지 않았다. 이유는 전체 선택자에 color: white를 지정해서 그렇다. color: white를 삭제하고 body에 할당했더니 해당 문제가 사라졌다.

 

지금 생각해보니 다른 부가적인 이유도 있을 것 같다라는 생각이 든다. 암튼 해당 문제는 위의 방식대로 해결했다.