1_ CSS 클래스 적용 실패 (user agent stylesheet) : style 파일 불러오기 실수와 해결 가이드

오늘의 오류는..~🐱
글씨크기를 30px인 클래스로 적용시켰는데
더 큰 크기로! 나온 것이다 😢

//

나의 경우 Heading1이라는 variables.module.css에 저장된 스타일로 '장비 대여 신청'이라는 텍스트를 적으려고 했는데

아무리봐도 이건 폰트크기가 30px이라기에는 너무 커보인다 .. 😑

.
.

개발자 도구를 들어가 확인해보았더니 user agent stylesheet라고 떴다.

user agent stylesheet로 보이는 부분은 브라우저에서 기본적으로 적용하는 스타일이라고 한다. 이걸 알기 전까지는 우선 순위고 뭐고 .. 여러 문제를 의심해봤지만 user agent stylesheet가 떴다는 것은 아무!! 스타일이 적용되지 않았다는 것이다.
(...)

user agent stylesheet에서 내 텍스트는 h1 태그로 되어있어 자동으로 두껍고 큰 크기의 글씨로 적용되었다.
( h1 태그는 보통 Heading 역할을 하기 때문이다. )

.
.

❗즉, heading1이 적용되지 않았다.

.
.
이게 내 파일 구조인데

/pages
├── rentDetail
│ ├── rent.module.css
│ └── rent.tsx <- 여기에 있는 텍스트에 스타일 적용 시킬거임

/styles
├── global.css
├── globalStyle.ts
├── theme.ts
└── variables.module.css
내가 적은 코드는 클래스명을 바로 heading1으로 두어 오류가 발생했다.
variables로 variable.module.css를 불러왔으니 이 안에 있는 클래스 heading1을 적용시키고 싶다면 variables.heading1으로 불러와야 적용된다!

이 경우 이때 className에는 ""(문자열)이 아니라
{}로 감싸 변수 형태로 전달해야한다는 것을 유의해야한다.

유의하지 않고 아래 사진처럼 쓰면 ...
당연히 오류가 발생한다.😊
= 중괄호 {} 안에 다시 문자열로 감싼 형태이기 때문에 변수로 인식되지 않는다.

.
.

그래서 올바르게 변경해주고~

개발자 도구에 들어가 변경사항을 확인해보면~

이제 폰트크기가 30px로 올바르게 설정된 것을 확인할 수 있다.

.
.

✨ 배운 점 👏✨

1. CSS 모듈은 클래스를 변수로 불러와야 하며, 경로를 어떻게 import 해왔는지를 고려하여 불러와야한다.

2. className에서 문자열이 아닌 변수를 사용할 때는 {}로 감싸야한다.

3. 개발자 도구를 활용하여 오류를 찾고, 수정 후 적용 여부를 재검토하는 것의 중요성을 깨닫게 되었다.

4. user agent stylesheet의 의미

//

해결...🥰