목록스타일적용 (1)
Hell路 World 삐약-
728x90

· Module.css 클래스 이름의 중첩을 방지하기 위해 사용 기존 프로젝트의 css 클래스와 이름이 중복되어도 스타일이 꼬이지 않게 하기 위해서 css파일의 확장자를 .module.css로 만든다. 다른 파일이 같은 클래스명을 사용해도 중첩되지 않는다. 개발자모드로 소스를 보면 클래스명이 '파일명_클래스명__아무말'형식으로 나온다. 모듈 스타일과 일반 css의 차이점을 보기 위해 아래처럼 파일을 생성했다. ModuleStyle.js는 간단하게 스타일이 어떻게 적용되는지만 확인할 수 있는 요소만 몇개 만들어서 클래스명으로 구분했다. 모듈 스타일을 import할때는 위에 3째줄 처럼 참조변수명을 지정해서 import해준다. 11, 14번째 줄 등 클래스명에 적용할때 이 변수를 사용해 적용할 수 있다. i..
Reactjs
2021. 9. 21.
728x90