230118 React CSS제어

React에 CSS 적용하기

리액트 스타일링

1. 태그에 직접 지정하기
2. 일반 css파일로 적용하기
3. css모듈로 적용하기
이외에도 다양한 문법이나 신규문법이 있다.

※css파일 이름 규칙
-컴포넌트의 이름을 반드시 포함해서 만듭니다.

---

1. 태그에 직접 지정하기
{}로 표현하고 키:값, 키:값 형태로 넣는다.
키는 css문법의 하이픈표기가 카멜표기법으로 바꾸어 넣음.

---

2. 일반 css파일로 적용하기
일반 css문법으로 디자인하고 import로 가져오면 된다.

단, 리액트에서 태그에 class는 className으로 준다.

---

3. css모듈로 적용하기
파일은 컴포넌트명.module.css형식으로 만든다.
css파일은 import구문으로 가져온다.  이때 이름을 주고, import 이름 from으로 가져온다.

모듈은 import할 때 특정 이름으로 가져온다. style={특정이름.선택자}로 적용한다.

모듈형식으로 만들면, 각각의 선택자에 고유한 해시값을 부여함으로써 다른파일과 디자인의 중복을 막아줌.
다른파일에 같은 이름(클래스 or id 등)의 css가 있어도 중복을 피할 수 있다.

:global키워드를 이용해서 전역 선택자(이름) 선언이 가능하다.

:global 키워드는 이름으로 바로 사용할 수 있다.

 

차이는, 기본적으로 className={import때 준 이름.클래스명}로 적용하는 반면

:global을 주면 className="클래스명"으로 적용이 가능하다는 것.

 

---

App.js

import { Fragment } from "react"
//css파일 경로 링크
import './css/App.css';

//css모듈 파일 링크
import styled from './css/App.module.css';


const App = () => {

    //p.261 -css스타일링
    //직접스타일링하기: -은 카멜표기법으로 변경됩니다.
    const myStyle={color:"aqua", textAlign:"center"}


    return (
        <Fragment>
            <header style={{backgroundColor:"teal"}} className="app_header">
                <p style={myStyle}>헤더입니다(직접스타일링)</p>
            </header>
            <article className="app_article"></article>
            <section className={styled.app_wrap}>
                <div className={styled.app_item}>
                    <p>CSS디자인</p>
                    <input type="text" className="input_control"/>
                    <input  type="password" className="input_control"/>
                </div>
            </section>
        </Fragment>
    )
}

export default App;

---

App.css

/* css문법을 적용 */
*{
    padding: 0;
    margin: 0;
}

.app_header{
    height: 50px;
    line-height: 50px;
}


.app_article{
    height: 100px;
    background-color: rgb(236, 243, 177);
}

---

App.module.css

.app_wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: aquamarine;
    height: 100vh;
}

.app_wrap .app_item{
    flex-basis: 20%;
    padding: 20px;
}

/* 전역선택자-바로 적용이 가능 */
:global .input_control{
    display: block;
    width: 100%;
    box-sizing: border-box;
    color: red;
}