리액트 공부하기 - 인라인 스타일

 

인라인 스타일?

- css파일 없이 JSX 안에서 바로 style 속성에 객체로 스타일을 적용하는 방법

- 간단해서 바로 테스트해보기나, 간단한 프로젝트에서 사용할 수 있다.

 

function MyComponent() {
  return (
    <div style={{ color: 'blue', fontSize: '20px' }}>
      인라인 스타일 예시
    </div>
  );
}

 

 

 문법 

<div style={{ 키: '값', 키: '값' }}>내용</div>

• 속성 이름은 카멜케이스(camelCase) 로 써야 함
  • 예: backgroundColor, fontSize, marginTop
• 값은 무조건 문자열이나 숫자
  • 단위가 px일 경우, 숫자만 써도 자동으로 처리됨

<div style={{
  backgroundColor: 'yellow',
  padding: 20, // → 자동으로 '20px'
  border: '1px solid black'
}} />

 

 

 

 예시: 버튼에 인라인 스타일 주기

function MyButton() {
  const buttonStyle = {
    backgroundColor: 'black',
    color: 'white',
    padding: '10px 20px',
    borderRadius: '8px',
    border: 'none'
  };

  return <button style={buttonStyle}>Click me</button>;
}

 

 

 예시: 조건부 스타일링

function Box({ isActive }) {
  const style = {
    backgroundColor: isActive ? 'green' : 'gray',
    padding: '10px',
    color: 'white'
  };

  return <div style={style}>상태 박스</div>;
}

이렇게 isActive 값에 따라 JS 조건문처럼 스타일 변경도 가능하다.

 

다른 스타일 방법과 비교

인라인 스타일	JSX에 JS 객체로 작성
SCSS / CSS	전통적인 CSS 방식
Tailwind CSS	클래스 이름으로 빠르게 스타일 적용