23-01-18) 7.React에 css적용하기

리액트 스타일링

1. 태그에 직접 지정하기

2. 일반 css파일로 적용하기

3. css모듈로 적용하기

 

1. 태그에 직접 지정하기.

태그에 직접 디자인을 적용 할 때는 {}로 묶어줍니다 

•  css속성중 - (타이푼)은 카멜표기법으로 대체됩니다.  ★

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

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

*변수에 style을 적용할 객체를 선언해놓고 변수를 가져와서 style 값 자리에 대입해도 됩니다.

    //직접스타일링하기: -은 카멜표기법으로 변경됩니다
    const myStyle = {
        color : "red",
        textAlign : "center"
    }
    
    <p style={myStyle}>헤더입니다(직접스타일링)</p>

 

2. 일반 CSS 파일로 적용하기

*일반CSS문법으로 디자인을 해주면 되고 import로 가져오면 됩니다.

*css파일 이름 규칙

★ 컴포넌트의 이름을반드시 포함해서 만듭니다

EX) App.js - App.css

 

App.css

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

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

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

 

App.js

import 구문은 파일에 있는 모든것을 가져와서 쓸 것이기 때문에 따로

 지정할 이름 from  , 이 부분을 빼서 씁니다.

import './css/App.css'; //일반css파일로 디자인 // css폴더에 App.css 파일을 가져온다는 의미.

 

3. CSS모듈사용하기

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

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;
}

 

App.js 파일

1. css파일은 특정 이름으로 import합니다.
2. style={특정이름.선택자 로} 적용합니다. 
3. :global 키워드는 이름으로 바로 사용하면 됩니다.

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


           <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>

 

*추가 메모

- '리액트를 다루는 기술' 책의 p.261 CSS 스타일링 부분 참고

-CSS 좀더 깊게 공부해보고 싶으면 리액트의 사스 문법 쪽도 봐보기.