[React] css적용

react의 css

리액트 스타일링

1. 태그에 직접 지정하기
2. 일반 css파일로 적용하기
3. css모듈로 적용하기

css 적용순서

1. 파일 만들기

• 컴포넌트 파일명과 똑같이 만들어줘야 함
  EX) App.js - App.css

style={ {css속성: 값, css속성: 값} }

<p style={{color: 'white', textAlign: 'center'}}>안녕하세요!!</p>

2. 일반 CSS 문법으로 디자인 후 import로 가져오기

App.css

.app_header {
    height: 50px;
    line-height: 50px;
    background-color: #000;
    margin: 0;
    padding: 0;
}

App.js

import './css/App.css'; //일반css파일로 디자인
......생략

3. CSS모듈 사용

• 파일은 컴포넌트명.module.css 형식으로 만듦
• css파일은 import구문으로 가져옴
• 이 방식은 선택자에 고유한 해시값을 부여함으로 다른파일과 디자인의 중복을 막아줌
• :global 키워드를 이용해서 전역 선택자(이름) 선언이 가능

App.module.css 파일

.app_wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #fff;
    height: 100vh;
    margin: 0;
    padding: 0;
}

/* 전역선택자로 이름정하기 */
:global .title {
    color: pink;
    font-weight: 900;
}

App.js 파일

1. css파일은 특정 이름으로 import함
2. style={특정이름.선택자 로} 적용
3. :global 키워드는 이름으로 바로 사용 가능

import styled from './css/App.module.css'; //css모듈로 디자인

const App = () => {
    return (
        <Fragment>
            <section className={styled.app_wrap}> {/* css모듈 app_wrap적용 */}
                 <p className="title">CSS모듈로디자인!</p> {/* css모듈의 전역선택자 적용 */}
            </section>
        </Fragment>
    )
}

export default App;

 

실습

App.js - 태그에 직접

import { Fragment } from "react";

//css파일 경로 링크
import './css/App.css';

//css모듈 파일 링크
//module export로 객체로 나가는게 아니라 {} 중괄호 뺌
import styled from './css/App.module.css';

const App = () => {

    //p.261 - css 스타일링

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

    return (
        <Fragment>
            <header style={{backgroundColor: "blue"}} className="app_header">
                <p style={myStyle}>헤더입니다(직접 스타일링)</p>
            </header>

            <article className="app_article">
                css파일로 디자인하기
            </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;

 

• const myStyle = { color: "#fff", textAlign: "center" } 직접 지정하고
• 태그에 style = { myStyle } 이런식으로 걸어서 사용함

 

App.css - 일반 css 파일

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

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

.app_article {
    height: 100px;
    background-color: yellow;
}

• css파일 경로를 import:  import './css/App.css';
• className = " "으로 클래스이름 걸어서 css문법 사용

 

App.module.css - css 모듈 파일

.app_wrap { /* 박스를 정중앙 가운데로 보내기 */
    display: flex;
    justify-content: center;
    align-content: center;
    background-color: rgb(100, 100, 100);
    height: 100vh;
}

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

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

• css모듈 파일 경로를 import:  import styled from './css/App.module.css';
  module export로 객체로 나가는게 아니라 {} 중괄호 뺌
  
• className = {styled.클래스이름}으로 걸어서 사용
• 전역 선택자는 css 파일(className=" ")처럼 사용가능