[React] Style 적용 (css)

React - Style 적용 (css)

• css 파일로 스타일 적용
  • css 파일 생성 후 .변수 { … } 의 형태로 스타일 설정한다.
    • 예시

    • .blue {
        color: blue;
        background: yellow;
      }
      
      .green {
        color: green;
      }
      
      .value {
        margin: 0px 20px;
        font-size: 30px;
      }

  • 사용은 태그 안에 className=”변수”를 주어 적용한다.
    • 예시
      • <h1 className="blue">Hello React!</h1>
  • button 같은 태그는 button{ … } 형태로 .을 찍지 않고 설정한다. 따로 태그 안에 className을 주지 않아도 css 파일만 import 되었다면 자동으로 적용된다.
    • 예시

      • button {
          background: cyan;
          color: gray;
          font-size: 20px;
          border-radius: 5px;
        }

 

• css 파일 없이 바로 스타일 적용
  • 태그 안에 style={{ … }} 형태로 스타일을 설정한다.
    • 예시
      • <div style={{ color: "red", fontSize: 10 }}></div>

 

• 변수에 스타일 요소를 넣은 후 적용
  • 변수 선언 후 스타일 요소들을 집어 넣어 style={변수} 의 형태로 스타일을 적용한다.
    • 예시

      • const ExStyle = () => {
          const style = {
            color: "cyan",
            fontSize: 20,
          };
        
          return (
            <div style={style}>
              <h1>두번째 컴포넌트입니다.</h1>
            </div>
          );
        };