CSS Module 나는 가운데 정렬을 하지 않았는데?

오늘 내가 겪은 문제상황을 소개해본다.

들어가기 전에 먼저 CSS Module에 관해 간단히 설명하려고 한다.

CSS Module은 CSS in CSS 로써 css파일을 따로 관리하고

태그에 class를 지정해서 CSS를 적용하는 방식을 사용한다.

예를들어 header 태그에 bgc = red를 적용하고 싶다면

header태그에 myheader라는 클래스를 지정해 준 후 CSS파일에서 해당 스타일을 적용해주면 된다.

<header className={styles.myheader}>
	I AM HEADER
</header>

.myheader {
	background-color: red;
}

이러한 CSS Module의 장점은 각 파일마다 로컬로 클래스를 지정해줘서 관리가 편하다는 장점이 있다.

그래서 다른 파일에 myheader라는 클래스명을 다시 써도 영향을 주지 않는다.

여기서 나의 문제가 발생했다.

나는 클래스가 아니라 단순히 태그를 스타일 지정해도 로컬로 관리를 해줘서 다른 파일에 영향이 가지 않겠지? 라고 생각하여 header라는 태그로 가운데 정렬이라는 스타일을 지정해줬다.

header {
	text-align: center;
}

이러한 형식으로 말이다.

하지만 다른 파일에서 header 태그를 사용했고 가운데 정렬 스타일을 지정하지 않았는데도 가운데 정렬로 화면에 그려주는 현상이 발생했다.

문제의 원인이 뭘까 디버깅하는 것이 쉽지 않았지만 결국 문제는 header태그가 전역적으로 적용된다는 것을 알게 되었다.

CSS Module에서 단순 태그 스타일 지정은 전역으로 관리가 된다는 사실을 알게되었다.

그래서 결론은 아래처럼 클래스를 지정해서 사용해줘야 한다는 것을 알게 되었다.

.myheader {
	text-align: center;
}

하루하루