3가지 방식으로 css 작성이 가능하다.
보통 3번 방식(모듈화)를 가장 많이 사용한다.
1. 인라인 방식
특별한 경우가 아니라면 인라인 방식으로는 잘 하지 않는다
// App.js
2. index.css
기본 파일로 주어진 index.css를 이용
index.css : 전체 파일에 적용
App.css : 전체 파일에 적용
→ App.js 컴포넌트에만 적용되는 것이 아님
→ 해당 css 코드들은 모두 <head> 내의 <style>에 들어가서 전체 파일에 공통적으로 영향을 미침
3. module.css(모듈화)
-
특정 컴포넌트 파일에 적용시키 위해선 CSS 파일명 뒤에
module.css를 붙여야한다.
ex) App.js 컴포넌트에만 적용시키려면App.module.css로 파일을 생성해야함 -
CSS 파일이 커질 경우 생기는 네이밍과 상속 문제가 모듈화를 통해 해결될 수 있다
-
글로벌 단위가 아닌, 컴포넌트 단위로 관리할 수 있다는 것도 장점
// App.js
import styles from "./App.module.css"; // 필요
// App.module.css
적용되는 파일이 분리되어있기 때문에, 동일한 네이밍이여도 겹치지 않는다
App과 Hello 둘 다 동일한 .box라는 네이밍이 되어있어도,
class이름이 Hello_box와 App_box로 자동으로 구분되어 적용된다(그 뒤 붙은 값은 해쉬값이다)
신입개발자. 이젠 서버를 곁들인 velog 꾸미기 : https://velog.io/@ybkim3603/Velog벨로그-사용법-튜토리얼 Git컨벤션: https://velog.io/@shin6403/Git-git-커밋-컨벤션-설정하기 커리어 방향 설정 모음글:https://velog.io/@eon7500/커리어-방향성-설정에-도움되는-글