CSS 스타일 설정 방법

📌 인라인 스타일

/* 일반 속성 */
<span style=({color: 'red'})></span>

/* 하이픈(-)으로 연결된 속성 */
<span style=({backgroundColor: 'red', paddingTop: '20px'})></span>

/* 조건에 따른 스타일 적용 */
const [isValid, setIsValid] = useState(false);
<span style=({color: !isValid ? 'red' : 'blue'})></span>

 

 

 

📌 클래스

const [isValid, setIsValid] = useState(false);

<!-- 🌀조건에 따른 클래스 추가 -->
<!-- 1. 삼항연산자 사용 -->
<div className={isValid ? 'show' : 'hidden'}></div>

<!-- AND연산자(&&) 사용 -->
<div className={isValid && 'show'}></div>

<!-- 🌀클래스 동적 추가 -->
<div className={`input-wrap ${class명}`}>

<!-- 1. 템플릿 리터럴 사용 -->
<div className={`input-wrap ${isValid ? 'show' : 'hidden'}`}>
<div className={`input-wrap ${isValid && 'show'}`}>

 

 

 

📌 CSS 모듈 방식 사용

• CSS를 사용할 때 로컬 스코프에 해당하는 독립적인 모듈로 만들어 사용하는 방식
• 스타일을 컴포넌트와 분리하여 관리할 때 주로 사용한다.
• 각 컴포넌트에 대해 별도의 CSS 모듈 파일을 만들고, 해당 모듈 파일 내에서 정의된 클래스 이름은 해당 컴포넌트에만 적용된다.
• 각 컴포넌트는 독립적인 스타일을 가지며, 클래스 이름 충돌을 방지하면서도 컴포넌트 스코프 내에서 스타일을 안전하게 유지할 수 있다.

 

[사용 방법]

🌀기본 사용법

1. Header.module.css 파일에 Header 컴포넌트에 대한 스타일을 정의한다.
2. HeaderComponent.js 컴포넌트 파일에서 styles 객체를 통해 클래스 파일을 가져와서 사용한다.

/* Header.module.css */
.header {
	background-color: #333;
	color: white;
 	padding: 1em;
	text-align: center;
}
.title {
	font-size: 2em;
	margin-bottom: 0.5em;
}
.subtitle {
	font-size: 1.2em;
	color: #aaa;
}

// HeaderComponent.js
import React from 'react';
import styles from './Header.module.css';

const HeaderComponent = () => {
	return (
		<header className={styles.header}>
			<h1 className={styles.title}>CSS Modules Example</h1>
			<p className={styles.subtitle}>Using CSS Modules in React</p>
		</header>
	);
};

export default HeaderComponent;

 

 

 

🌀동적 추가

/* styles.module.css */
.text {
	color: black;
}
.active {
	color: red;
}
.inactive {
	color: yellow;
}

// MyComponent.js
import React from 'react';
import styles from './styles.module.css';

const MyComponent = ({ isDynamic }) => {
	const [isValid, setIsValid] = useState(false);
	return (
		<div>
			{/* 삼항연산자 사용 */}
			<p className={`${styles.text} ${isValid ? styles.active : styles.inactive}`}></p>

			{/* AND연산자 사용 */}
			<p className={`${styles.text} ${isValid && styles.active}`}></p>
		</div>
	);
};

export default MyComponent;

 

 

 

🌀전역 사용법

• :global을 사용한다.
• :global과 함께 추가된 클래스는 클래스명 그대로 어디에서든 사용할 수 있다.

/* styles.module.css */
/* 로컬 스코프 */
.link {
	color: blue;
}
/* 전역 스코프 */
:global(.global-link) {
	color: red;
}

// MyComponent.js
import React from 'react';
import styles from './styles.module.css';

const MyComponent = () => {
	return (
		<div>
			{/* 로컬 스코프의 클래스 */}
			<a className={styles.link} href="#">Local Link</a>

			{/* 전역 스코프의 클래스 */}
			<a className="global-link" href="#">Global Link</a>
        </div>
	);
};

export default MyComponent;

 

 

 

📌 Styled Components 패키지 사용

• CSS를 자바스크립트 파일 안에서 정의하여 React 컴포넌트에 동적으로 적용할 수 있다.
• React 컴포넌트처럼 독립적으로 존재하며, 재사용성이 뛰어나다.
• 각 컴포넌트의 스타일이 격리되어 클래스 이름 충돌이 거의 발생하지 않는다.

[설치]

npm install styled-components
yarn add styled-components

 

 

[사용 방법]

🌀기본 사용법

// styles.js
import styled from 'styled-components';

export const StyledButton = styled.button`
	background-color: #4caf50;
	color: white;
	padding: 10px 20px;
	font-size: 16px;
	border-radius: 5px;
	cursor: pointer;

	&:hover {
		background-color: #45a049;
	}
`;

export const StyledInput = styled.input`
	padding: 10px;
	font-size: 16px;
	border: 1px solid #ccc;
	border-radius: 5px;
`;

// MyComponent.js
import React from 'react';
import { StyledButton, StyledInput } from './styles';

const MyComponent = () => {
	return (
		<div>
			<StyledInput type="text" placeholder="Enter text" />
			<StyledButton>Click me</StyledButton>
		</div>
	);
};

export default MyComponent;

 

 

 

🌀동적 추가

// styles.js
import styled from 'styled-components';

const StyledButton = styled.button`
	background-color: ${props => props.primary ? 'blue' : 'green'};
	color: white;
	padding: 10px 20px;
	font-size: 16px;
	border-radius: 5px;
	cursor: pointer;
`;

// MyComponent.js
import React from 'react';
import { StyledButton } from './styles';

const MyComponent = () => {
	return (
		<div>
			<StyledButton primary>Primary Button</StyledButton>
			<StyledButton>Secondary Button</StyledButton>
		</div>
	);
};

 

 

 

🌀전역 사용법

// GlobalStyles.js
import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
	body {
		font-family: 'Arial', sans-serif;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	/* 다른 전역 스타일 정의 */
`;

export default GlobalStyles;

// App.js
import React from 'react';
import GlobalStyles from './GlobalStyles';
import MyComponent from './MyComponent';

const App = () => {
	return (
		<>
			<GlobalStyles />
			<MyComponent />
			{/* 다른 컴포넌트 추가 */}
			</>
	);
};

export default App;