css완전 기초질문인데 스타일 기본값 어떻게 바꿔...?

게시된 카테고리 개발/코딩

 

 

vue에서 프론트엔드 만들고 있는데 스타일들이 적용이 안되길래 브라우저 inspect(검사) 들어가서 보니까 내가 작성 안한 클래스 스타일들도 있더라고...! 

사진에 .q-card {} 얘는 내가 작성 안했는데도 먼저 적용되어 있어서 기본값인가 싶은데 이거 어떻게 없애는걸까...? 이거 땜에 내가 추가한 .newCard 내부에 있는 스타일들이 적용이 안된다🥲

[익인1]

선택자 우선순위 검색해봐봥

[글쓴이]

!important 이거 붙여서 일단 내가 원하는 스타일로 적용은 해놨는데 혹시 아예 저 기본값을 없앨수는 없나해서ㅠㅠㅠ

[삭제한 댓글]

(본인이 직접 삭제한 댓글입니다)

[글쓴이]

아아...! 프레임워크상에 경로 보는거 생각못했다 완전 고마워!!🙏🏻🙏🏻

[익인3]

important 쓰는 게 그렇게 좋은 습관은 아니야. 꼭 필요할 때 고심해서 쓰는 애고 원인 파악 안 된다고 막 갈기면 안 돼 나중에 꼬여.
웬만하면 쟤가 어디서 나온 건지 찾아서 다른 방식으로 수정해주는 게 좋아. 아마 별 생각 없이 상속받은 클래스에 적용되어 있는 애일 거야

[익인4]

https://quasar.dev/vue-components/card
이거 쓴 것 같은데, 여기 예제들 보니까 class가 q-card 다음에 my-card가 들어오도록 되어 있어. (순서가 중요해. 뒤에 것이 앞의 것을 덮어쓰거든.) 한 번 class 속성에서 클래스 순서가 어떻게 되어 있는지(class="q-card newCard" 하는 식으로 되어 있는지) 확인해봐.
그리고 만약에 Quasar Framework든 다른 거든 Framework의 스타일시트 뒤에 쓰니가 정의한 스타일시트가 로드가 되는지도 확인해봐. (이것도 순서가 중요해.)
근데 애초에 스타일 출처가 <style>이면 그냥 소스코드 자체가 열린 것일 수도 있지 않을까 싶네. 보통은 컴파일을 한 뒤에 결과물을 열어봐야 하니까. 내가 Vue를 안 써서 Chrome 개발자 도구에서 Vue 소스코드 자체를 지원하는지 잘 모르겠어.