15. CSS 적용
1. React에서 CSS란?
React에서도 CSS를 사용하는 목적은 HTML과 같습니다.
레이아웃 구성
색상 지정
글꼴 설정
애니메이션
반응형 디자인
차이점은 컴포넌트 단위로 CSS를 관리한다는 점입니다.
2. CSS 적용 방법
React에서 가장 많이 사용하는 방법은 다음과 같습니다.
일반 CSS
컴포넌트별 CSS
CSS Module
Inline Style
실무에서는 일반 CSS와 CSS Module을 가장 많이 사용합니다.
3. 일반 CSS
프로젝트 구조
src
index.css
App.jsx
index.css
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Arial;
}
main.jsx
import "./index.css";
프로젝트 전체에 적용됩니다.
4. 컴포넌트별 CSS
폴더 구조
components
Header.jsx
Header.css
Header.css
.header{
background:#0b4f2f;
color:white;
}
Header.jsx
import "./Header.css";
function Header(){
return(
<header className="header">
동부산CC
</header>
)
}
Header 컴포넌트에서만 사용하는 스타일을 분리할 수 있습니다.
5. CSS Module
React에서 충돌을 방지하기 위한 방법입니다.
파일명
Header.module.css
CSS
.header{
background:#0b4f2f;
}
사용
import styles
from
"./Header.module.css";
<header
className={styles.header}
>
다른 컴포넌트의 .header와 이름이 같아도 충돌하지 않습니다.
6. Inline Style
React에서는 style을 객체(Object)로 작성합니다.
<div
style={{
background:"#0b4f2f",
color:"white",
padding:"20px"
}}
>
동부산CC
</div>
HTML과 차이점
HTML
style="background:red"
React
style={{
background:"red"
}}
7. Camel Case
React에서는 CSS 속성을 Camel Case로 작성합니다.
예)
backgroundColor
fontSize
marginTop
paddingLeft
textAlign
HTML처럼
background-color
를 사용할 수 없습니다.
8. className
HTML
<div class="hero">
React
<div className="hero">
React에서는
class
↓
className
을 사용합니다.
9. 동부산CC Hero
Hero.css
.hero{
height:600px;
display:flex;
justify-content:center;
align-items:center;
background:#0b4f2f;
color:white;
}
Hero.jsx
import "./Hero.css";
function Hero(){
return(
<section
className="hero"
>
<h1>
동부산CC
</h1>
</section>
)
}
10. 버튼 스타일
.btn{
padding:12px 24px;
background:#0b4f2f;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
}
사용
<button
className="btn"
>
예약하기
</button>
11. 조건에 따라 CSS 변경
React에서는
State와 함께 사용합니다.
<button
className={
liked
?
"active"
:
""
}
>
♥
</button>
CSS
.active{
color:red;
}
좋아요를 누르면
빨간색으로 변경됩니다.
12. 반응형
React도
일반 CSS와 동일합니다.
@media
(max-width:768px){
.hero{
height:400px;
}
}
13. 동부산CC 폴더 구조
components
Header.jsx
Header.css
Hero.jsx
Hero.css
CourseCard.jsx
CourseCard.css
Reservation.jsx
Reservation.css
컴포넌트마다 CSS를 분리하면 관리하기 쉽습니다.
14. CSS 적용 순서
CSS 작성
↓
import
↓
className 연결
↓
React 렌더링
↓
브라우저 출력
15. React에서 자주 사용하는 CSS
✔ Flex
✔ Grid
✔ Position
✔ Hover
✔ Transition
✔ Transform
✔ Animation
✔ Media Query
HTML/CSS에서 배운 내용을 그대로 사용할 수 있습니다.
16. CSS 관리 방법
작은 프로젝트
index.css
+
컴포넌트 CSS
큰 프로젝트
CSS Module
+
공통 CSS
+
변수 관리
정리
React에서도 CSS 문법은 HTML과 동일하지만, 컴포넌트 단위로 스타일을 분리하여 관리하는 것이 일반적입니다.
스타일을 적용하는 대표적인 방법은 다음과 같습니다.
일반 CSS
컴포넌트별 CSS
CSS Module
Inline Style
또한 React에서는 class 대신 className을 사용하며, Inline Style은 객체 형태와 Camel Case 문법으로 작성합니다.
동부산CC 프로젝트에서는 Header, Hero, CourseCard, Reservation 등 각 컴포넌트마다 CSS 파일을 분리하면 유지보수와 재사용성이 크게 향상됩니다.
1. React에서 CSS란?
React에서도 CSS를 사용하는 목적은 HTML과 같습니다.
레이아웃 구성
색상 지정
글꼴 설정
애니메이션
반응형 디자인
차이점은 컴포넌트 단위로 CSS를 관리한다는 점입니다.
2. CSS 적용 방법
React에서 가장 많이 사용하는 방법은 다음과 같습니다.
일반 CSS
컴포넌트별 CSS
CSS Module
Inline Style
실무에서는 일반 CSS와 CSS Module을 가장 많이 사용합니다.
3. 일반 CSS
프로젝트 구조
src
index.css
App.jsx
index.css
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Arial;
}
main.jsx
import "./index.css";
프로젝트 전체에 적용됩니다.
4. 컴포넌트별 CSS
폴더 구조
components
Header.jsx
Header.css
Header.css
.header{
background:#0b4f2f;
color:white;
}
Header.jsx
import "./Header.css";
function Header(){
return(
<header className="header">
동부산CC
</header>
)
}
Header 컴포넌트에서만 사용하는 스타일을 분리할 수 있습니다.
5. CSS Module
React에서 충돌을 방지하기 위한 방법입니다.
파일명
Header.module.css
CSS
.header{
background:#0b4f2f;
}
사용
import styles
from
"./Header.module.css";
<header
className={styles.header}
>
다른 컴포넌트의 .header와 이름이 같아도 충돌하지 않습니다.
6. Inline Style
React에서는 style을 객체(Object)로 작성합니다.
<div
style={{
background:"#0b4f2f",
color:"white",
padding:"20px"
}}
>
동부산CC
</div>
HTML과 차이점
HTML
style="background:red"
React
style={{
background:"red"
}}
7. Camel Case
React에서는 CSS 속성을 Camel Case로 작성합니다.
예)
backgroundColor
fontSize
marginTop
paddingLeft
textAlign
HTML처럼
background-color
를 사용할 수 없습니다.
8. className
HTML
<div class="hero">
React
<div className="hero">
React에서는
class
↓
className
을 사용합니다.
9. 동부산CC Hero
Hero.css
.hero{
height:600px;
display:flex;
justify-content:center;
align-items:center;
background:#0b4f2f;
color:white;
}
Hero.jsx
import "./Hero.css";
function Hero(){
return(
<section
className="hero"
>
<h1>
동부산CC
</h1>
</section>
)
}
10. 버튼 스타일
.btn{
padding:12px 24px;
background:#0b4f2f;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
}
사용
<button
className="btn"
>
예약하기
</button>
11. 조건에 따라 CSS 변경
React에서는
State와 함께 사용합니다.
<button
className={
liked
?
"active"
:
""
}
>
♥
</button>
CSS
.active{
color:red;
}
좋아요를 누르면
빨간색으로 변경됩니다.
12. 반응형
React도
일반 CSS와 동일합니다.
@media
(max-width:768px){
.hero{
height:400px;
}
}
13. 동부산CC 폴더 구조
components
Header.jsx
Header.css
Hero.jsx
Hero.css
CourseCard.jsx
CourseCard.css
Reservation.jsx
Reservation.css
컴포넌트마다 CSS를 분리하면 관리하기 쉽습니다.
14. CSS 적용 순서
CSS 작성
↓
import
↓
className 연결
↓
React 렌더링
↓
브라우저 출력
15. React에서 자주 사용하는 CSS
✔ Flex
✔ Grid
✔ Position
✔ Hover
✔ Transition
✔ Transform
✔ Animation
✔ Media Query
HTML/CSS에서 배운 내용을 그대로 사용할 수 있습니다.
16. CSS 관리 방법
작은 프로젝트
index.css
+
컴포넌트 CSS
큰 프로젝트
CSS Module
+
공통 CSS
+
변수 관리
정리
React에서도 CSS 문법은 HTML과 동일하지만, 컴포넌트 단위로 스타일을 분리하여 관리하는 것이 일반적입니다.
스타일을 적용하는 대표적인 방법은 다음과 같습니다.
일반 CSS
컴포넌트별 CSS
CSS Module
Inline Style
또한 React에서는 class 대신 className을 사용하며, Inline Style은 객체 형태와 Camel Case 문법으로 작성합니다.
동부산CC 프로젝트에서는 Header, Hero, CourseCard, Reservation 등 각 컴포넌트마다 CSS 파일을 분리하면 유지보수와 재사용성이 크게 향상됩니다.
#15. CSS 적용