땅꼬마의 React에 CSS를 적용해보기!

React에 스타일을 적용하는 방법이 생각보다 여러개였다.

무작정 .css 만들어서 import로 넣어주면 끝인줄 알았는대....

그래서 적용할 수 있는 방법을 정리해보았다.

 

1. .css파일 사용

App.css

div 태그와 span 태그에 간단한 스타일을 적용했다.

div.main{position: relative; display: block; text-align: center; font-size: 18px;}
span{color: blue;}

 

App.js

css 파일을 import하여 css 설정한 class, 태그를 사용

import './App.css';
import React from 'react';

function App() { //메인페지이
  return (
    <div className='main'> 
      <span>글씨입니다</span>
    </div>
  );
}

export default App;

 

<출력된 이미지>

 

 

2. . inline 적용

App.js

import React from 'react';

function App() { //메인페지이
  return (
    <div style={{
      position: "relative",
       display: "block",
       textAlign: "center",
       fontSize: "18px"
    }}> 
      <span style={{
        color: "red"
      }}>글씨입니다</span>
    </div>
  );
}

export default App;

인라인으로 할 경우 태그에 직접 적용하기 때문에 스타일의 재사용이 어렵다.

 

<출력된 이미지>

 

3. . styled-component 활용

먼저 styled-component 라이브러리를 다운받는다.

 

npm install styled-components

 

App.js

import React from 'react';
import styled from 'styled-components';

const MainDiv = styled.div`
  position: relative;
  display: block;
  text-align: center;
  font-size: 18px;
`;

const MainSpan = styled.div`
  color: green;
`;

function App() { //메인페지이
  return (
    <MainDiv> 
      <MainSpan>글씨입니다</MainSpan>
    </MainDiv>
  );
}

export default App;

스타일이 적용된 사용자 정의 태그를 만들어서 그 태그를 사용하는 방식이다.

 

<출력된 이미지>