제가 처음 부트스트랩을 사용하면서 골머리를 썩었고, 그 이후
무려 이 글을 포스팅 하는 오늘까지도 대충 야매로 넘겼던
부트 스트랩 css 수정에 대해 정리를 해보려고 합니댜.
단지 잘 가져온 bootstrap 컴포넌트의 스타일을 일부분 수정하는 것 말입니다.
class를 주고 css파일에서 수정하는거 말이에요 !!!!
'css커스텀' , 'css덮어쓰기' , 'css오버라이드' , 'css수정' , 'css스타일변경' , 'css classname' 등등
수많은 키워드가 나올 수 있는
이 행동
어쩌면 저와 같은 목적으로 해매는 사람이 충분히 있을것 같아요..
부디 천천히 읽어보시고 광명 찾으세요. 진지합니다.
출발
1. 내 목적은 일부분만 수정하는거야!!!!
저는 react-bootstrap를 사용했었습니다..
그리고 당연하게도 너무 부트스트랩틱한? 부트스트랩 쓴 티가나는?
그런 디자인에 대해서 일부분 디자인적인 수정을 하고싶었어요.
css를 건드려 보고 싶었다는 말입니다~~~
react 에서는 class대신 className이라고 바꿔서 써라~~ 하길래
이런식으로 컴포넌트에 내가 원하는 클래스네임을 작명해서~
뭐 이런식으로 css파일 하나를 만들어 속성 부여 하면 되겠다~~~ 했죠
근데 안됩니다.
예?
안돼요 그냥 아니 뭔수를 써도 안돼요.
근데 ? 또 어쩔땐 됩니다.
아니 이게 왜이러나~~ 싶었단 말이죠
그때부터 구글링을 시작했습니다.
검색어만 해도 20개는 될거에요
자~~ 여기여기~
https://react-bootstrap.github.io/getting-started/theming/
react bootstrap 공식문서 에서는
이렇게 이렇게하면 커스터마이징이 된다~~~
bsprefix 이런 속성 쓰면 너가 처음부터 커스텀 할 수 있다~~
따라했더니 기존 속성을 다버리고 ~ 내가 직접 0부터 다시 만드는것 입디다....
제가 원하는 건 이게 아닙니다.
자~~ 그럼 여기여기~~
https://getbootstrap.com/docs/5.1/customize/sass/
bootstrap 공식문서 에서는
sass 파일을 찾아서 커스텀이 가능하다~
따라했더니 이건 내가 앞으로 쓸 해당 컴포넌트의 css 자체를 커스텀하는 것 입디다...
제가 원하는건 이게 아닙니다.
자~~ 그럼 여기여기~~
stack overflow 같은 해외사이트에서 많이 나온 답변인
! important 속성을 써봐~
이건 따라하기 싫습니다. 이건 가능한 안쓰는게 좋다고 배웠거든요. 이런저런 혼란을 초래할 수 있기때문이쥬...
결국 이게 아닙니다.
그저 잘 만들어진 컴포넌트를 가져와서~ 원래 스타일은 유지한채로~~
크기변경이라던지, 색상변경이라던지, hover 속성을 준다던지 그저 평범한 css를 적용시키고 싶은 것입니다.
지극히 평범한 수정이요.
헤매고 헤매던중 키워드를 하나 발견합니다.
바로 [ 우선순위 ]
2. css적용의 우선순위
여기서부터 모든게 풀리기 시작합니다.
1. css파일이 여러개 적용 되어있는 상태라면 가장 뒤에 있는 파일의 css속성이 우선 적용됩니다!!
import를 할 때 위의 순서처럼 해야지만
제 맘대로 수정한 css 속성들이 bootstrap css 속성들을 덮어쓰게 되는거죠.
2. css는 우선순위가 있습니댜!!
css는 기본적으로 가장 나중에 쓴 속성이 우선적용되고,
!important > inline style > id > class , 수도클래스 > tag , 수도엘리먼트 순으로 우선순위를 가집니다.
3. css는 우선도 점수가 있습니다!!
인라인 스타일 = 1000점
id = 100점
클래스 , 수도클래스 = 10점
태그선택자 , 수도엘리먼트 = 1점
사실 저는 1번 2번은 알고 있었습니다.
그래서 import 순서도 맞게 썼었고, !important 속성과 inline 스타일로 테스트도 해봤었죠.
하지만 3번은 몰랐습니다!!
저는 이 글을 포스팅 하는 오늘까지도
className으로 수정되지 않는 스타일들을 바꾸기 위해....
모든 컴포넌트에 id 값을 부여해서 사용하고 있었습니다.
반성합니다.
id가 class보다 쌔니깐 그런거겠지~~~ 라며 쉬쉬하고
그저 해보니 되길래... 모든 Component에 id 값을 부여해서 css를 작성했었습니다.
이후 생각을 해봤습니다.
className을 부여해서 스타일 변경을 하고자 할 때
왜 어쩔땐 변경되고 어쩔땐 먹통이였는지 말이에유
바로 이 우선도 점수 때문이 아닐까 싶었습니다유
bootstrap은 default css값이 정해져 있고 그에 맞는 우선도 점수가 정해져 있을겁니다.
해당 Component의 css를 수정하는 과정에서
기본 점수값보다 높은 점수값을 가지는 방법으로 수정했을 때에는 css 변경이 된것이고
기본 점수값보다 낮은 점수값을 가지는 방법으로 수정했을 때에는 css 변경이 무시된 것이다.
고로 id 값을 사용 했을때 css 수정이 가능했다 = 100점이면 충분하다.
라는 결론을 내리고 이렇게 바꿨습니다.
최상위 부모에게만 id값을 주고
나머지 모든 친구들은 className으로 바꿔줬어유
그 후 css로 가서
id선택자 하위로 class선택자를 써줬습니다.
scss 에서 이렇게 중첩을 하면
#top-navbar--wrap .top-navbar 로 컴파일 되니까
우선도 점수는 110점 이겠네유!
결론은 수정된 css 파일로 잘 덮어쓰기 되는것을 확인했습니댜..
3. 반성합니다.
기본이 중요하다 했던가...
처음 이 현상을 겪었을 때 해결방법을 찾기위해 거의 5일이었나.. 구글링했슴다.. 안 나오고 ... 안 나오고..
그러다 지쳐버렸고 그냥 무지성 id값을 난사해버렸죠..
그렇게 잊혀지다가 어느날 id 값을 아무렇지 않게 주고있는 제 자신을 보고선.. 다시 구글링을 시작했습죠...
우선도.. 2000년도 자료도 나오는걸 보면 기본중에 기본 덕목이라는 것인데...
이것을 알았다면 5일동안 구글링하는 일 따위는 없었겠쥬..
기본이 중요하다!
끝
'알아두면 좋은 꿀팁들' 카테고리의 다른 글
| 단일 책임 원칙 - Single Responsibility Principle (0) | 2021.08.24 |
|---|---|
| Ajax / axios (0) | 2021.06.16 |