25.03.04 css와 react의 css

HTML에서 스타일 적용 방식

- html에 스타일을 적용하는 방법은 3가지가 있다.

1. 인라인 스타일 (style="")
2. 내부 스타일 (<style> 태그 사용)
3. 외부 스타일 (CSS 파일 분리)

적용 방식	설명	특징
인라인 스타일	태그 내부 style 속성에 CSS 직접 작성	유지보수가 어려우며 스타일 재사용 불가능하며 css 기능읜 제한이 있음.
내부 스타일	<style> 태그 내부에서 CSS 정의	한 HTML 파일 내에서 여러 요소에 스타일 적용 가능 하지만 스타일이 많아질 경우 html이 복잡해질 수 있음.
외부  스타일	별도의 .css 파일을 만들어 link로 연결	가장 일반적이고 유지보수가 쉬운 방식 이며 스타일을 여러 페이지에서 재사용 가능 하지만 동적인 스타일 적용이 어려움

 

1. 인라인 스타일

<button style="color: white; background-color: blue;">클릭</button>

 

2. 내부 스타일

<style> .button { color: white; background-color: blue; } </style>
<button class="button">클릭</button>

 

3. 외부 스타일

<link rel="stylesheet" href="styles.css">

---

 

React에서 스타일 적용 방식

- React에도 스타일을 적용하는 방법은 3가지가 있다.

1. 인라인 CSS (style={{}})
2. CSS-in-CSS (.css 파일 사용)
3. CSS-in-JS (styled-components, Emotion)

적용 방식	설명	특징
인라인 CSS	JSX에서 style 속성을 객체 형태로 사용	JS 값을 직접 스타일로 사용할 수 있지만 성능 이슈 (렌더링 시 새로운 객체가 생성됨)가 있으며 미디어 쿼리, hover, :before 등의 기능 사용 불가능함
CSS-in-CSS	기존 CSS 방식과 동일, className으로 적용	기존 CSS와 동일한 방식 (import "./styles.css")이며 유지보수 및 성능이 좋으나 props에 따라 동적인 스타일을 적용하기 어려움
CSS-in-JS	JavaScript 내부에서 스타일을 정의하고 관리	컴포넌트 내부에서 스타일을 선언할 수 있어 유지보수 편리하며 props를 활용한 동적 스타일 적용과 hover, @media, :before 등 완벽하게 사용 가능함. JS 번들 크기가 증가할 수 있고, SSR 최적화 필요함

---

 

최종 비교 정리 (HTML vs React 스타일링 방식

 

	HTML 인라인 스타일	HTML 내부 스타일	HTML 외부 스타일	React 인라인 CSS	React CSS-in-CSS	React CSS-in-JS
스타일 적용 위치	태그 내부 style=""	<style> 태그 내 CSS 작성	.css 파일에서 정의	JSX style={{}} 속성 사용	.css 파일에서 정의 후 import	JS 내부에서 스타일 정의
CSS 기능 지원	❌ 제한적 (미디어 쿼리, hover 불가)	✅ CSS 기능 전체 지원	✅ CSS 기능 전체 지원	❌ 제한적 (미디어 쿼리, hover 불가)	✅ CSS 기능 전체 지원	✅ CSS 기능 전체 지원
동적 스타일 적용	❌ 어려움	❌ 어려움	❌ 어려움	🔹 일부 가능 (JS 값 사용 가능)	❌ props 기반 스타일 적용 어려움	✅ props 기반 동적 스타일 가능
CSS 코드 재사용	❌ 불가능	✅ 일부 가능	✅ 완전 가능	❌ 불가능	✅ 완전 가능	✅ 완전 가능
성능	❌ 인라인 스타일이 많아지면 성능 저하	✅ 성능 우수	✅ 성능 우수	❌ 성능 저하 가능 (객체 재생성)	✅ 성능 우수	🔹 최적화 필요 (JS 번들 크기 증가 가능)
추천 사용 사례	간단한 스타일 적용	한 페이지에서 스타일을 정의할 때	유지보수가 필요한 프로젝트	간단한 동적 스타일 적용	일반적인 React 프로젝트	동적 스타일링이 많고 컴포넌트 단위 스타일 관리가 필요할 때