[모각코+] 웹 리액트(React) 1월달과정 3일차

https://codemate.kr/@Qcell/Module-CSS%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0

Module CSS를 사용해보기 by Qcell | 코드메이트

이번 시간에서는 Module CSS를 사용해 보았습니다.

Module CSS란 컴포넌트 마다 고유한 클래스 이름을 가지게 하여 CSS 클래스 네이밍 규칙을 따라야 하는 문제를 해결하기 위해 사용하는 기술입니다 !

 

Module CSS를 사용해보기

Module CSS를 사용하기 전에, 새로운 개발환경 틀을 만들었습니다.

src 폴더 내에 styles 폴더를 만들어 CSS/fonts를 직접 내려받아 로컬 환경에서 불러오도록 준비했습니다.

 

Content.module.css

@font-face {
    font-family: "Fredoka One";
    src: url("../fonts/FredokaOne-Regular.ttf") format("truetype");
}


@font-face {
    font-family: "Single Day";
    src: url("../fonts/SingleDay-Regular.ttf") format("truetype");
}


@font-face {
    font-family: "Nanum Gothic";
    src: url("../fonts/NanumGothic-Regular.ttf") format("truetype");
  }


.index {
    font-family: "Nanum Gothic";
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

 

Header.module.css

@font-face {
  font-family: "Fredoka One";
  src: url("../fonts/FredokaOne-Regular.ttf") format("truetype");
}


@font-face {
  font-family: "Single Day";
  src: url("../fonts/SingleDay-Regular.ttf") format("truetype");
}


@font-face {
  font-family: "Nanum Gothic";
  src: url("../fonts/NanumGothic-Regular.ttf") format("truetype");
}


.title {
    text-align: center;
    font-family: "Fredoka One";
    color: rgb(145, 187, 241);
  }

 

Header.js

import styles from './styles/css/Header.module.css';


function Header(){
    return (
    <h1 className={styles.title}>큐셀의 MBTI 검사</h1>
    );
}


export default Header;

 

Content.js

import styles from './styles/css/Content.module.css';


function Content(){
    return (
        <div className={styles.index}>큐셀의 MBTI 검사 사이트입니다.<br>
        </br> 16가지 항목의 질문지가 있으며, 해당하는 항목에 체크해주시면 결과가 나타납니다.
        </div>
    );
}


export default Content;

 

클래스 컴포넌트의 클래스 이름