JSX 스타일 적용

[주인장]

스타일 적용
1. 인라인 스타일 방식
- 인라인 스타일은 HTML 엘리먼트의 style 속성을 사용하여 스타일을 직접 정의하는 방식입니다. 이 방식은 해당 엘리먼트에만 적용되는 스타일을 정의할 수 있어 유연하게 사용할 수 있습니다. 스타일은 JavaScript 객체의 형태로 작성되며, 객체의 속성으로 스타일 속성을 지정합니다.

- 문법
style={  { 스타일속성1 : '값', 스타일속성2 : '값'  }  } 

- style 속성 내에 중괄호 { }  를 사용하여 JavaScript 객체를 생성하고, 객체의 속성으로 스타일을 지정합니다.
- 객체  { } 로 지정한 스타일을 표현식으로 { } 출력합니다.
- CSS 에서는 스타일 속성명을 ‘-’ 케밥 케이스(kebab-case)작성하지만, JSX 에서는 스타일 속성명을 카멜 케이스(CamelCase)로 작성해야 합니다.

const element = (
  <div style={{ color: 'blue', fontSize: '16px', backgroundColor: 'lightgray' }}>
    This is a text with inline styles.
  </div>
);

2. 클래스 지정 방식
- 클래스 지정 방식은 CSS 클래스를 미리 정의하고, 해당 클래스를 HTML 엘리먼트에 적용하는 방식입니다. 이 방식은 여러 엘리먼트에 동일한 스타일을 적용하거나, 전역 스타일 시트를 활용할 때 효과적입니다.

.customClass {
  color: red;
  font-size: 18px;
  background-color: lightyellow;
}

- 스타일 시트 파일의 이름에 대한 관습은 주관적이며, 프로젝트나 팀의 규칙에 따라 다를 수 있습니다. 그러나 일반적으로 React 프로젝트에서는 styles.css와 같이 복수형으로 명명하는 것이 일반적입니다.

// React 컴포넌트에서 클래스 적용
import React from 'react';
import './styles.css';

const element = (
  <div className="customClass">
    This is a text with styles applied using a CSS class.
  </div>
);

- JSX에서는 HTML의 class 속성을 className으로 사용합니다. 이는 JavaScript에서 class는 예약어이기 때문입니다.