1. CSS를 스스로 고칠 줄 알아야 하는 이유
지피티는 똑똑한데... 생각보다 바보 같다는 점을 알아야 한다
그냥 눈에 보이는걸 만들어주는 것은 가능한데 component가 많아지고 퍼블리싱을 하면서 import를 계속하게 되면 경로가 복잡해져서 지피티가 더이상 고쳐줄 수 없다
때문에!!
CSS는 스스로 계층을 파악하고, 우선순위를 볼 줄 알아야한다
검사를 통해서 파악하는 것도 한계가 있으니, 스스로 알고 있는게 중요하다
2. CSS 문제 발생
1. 문제 이해하기
sidebar.tsx가 미디어쿼리를 적용할 때, sidebar의 border 색상이 적용이 되지 않는 문제가 발생했다
sidebar의 미디어쿼리니까 sidebar에서 이리저리 만지면서 고치던 나
결국은 문제를 해결하지 못했다
sidebar를 이루는 component에서도 문제 해결을 하지 못했다
1. css의 우선순위가 밀려서 적용되지 않음
2. 구조상 우선순위가 밀림
1번 방식으로 !important 까지 써가면서 최선을 다했지만 css의 우선순위가 밀려서 적용되지 않는 것은 아닌 것 같아 2번 구조상 우선순위를 열심히 찾아봤다
2. 문제의 해결
문제는 생각보다 단순하게 해결된 것을 볼 수 있다
고민한 시간이 무색해지도록 간단한...
파일 구조를 좀 살펴보면
stories > components > intranet > community > sidebar.tsx 를 import 해서
pages > community > community.tsx 파일이 사용하고 있다는 걸 볼 수 있다
community.tsx에서 border의 색상을 따로 지정하지 않고 background-color 만 미디어쿼리 @(max width 540) 이런 식으로 설정해서 background-color의 차이를 준 형태로 지정해두었다
community.tsx의 기본적인 background-color가 sidebar.tsx 에게까지 영향을 준 것으로 판단했다
이랬던 코드를 아래와 같이 바꾸니까
내가 원하는 대로 제대로 돌아간다!
이렇게 해서 코드를 고칠 수 있었다
3. 교훈
CSS 뿐만 아니라 모든 코드가 그러하지만,
CSS의 경우에는 더욱 더 직접 코드의 계층을 이해해서 직접 고치는게 훨~ 빠르다
앞으로 이렇게 component가 복잡하게 import 된 경우에는 상위계층에서 문제가 발생했는지를 먼저 찾아보는 것도 좋은 방법이라고 생각한다
