[문서] 처음 만난 리액트: CSS란 무엇인가?

FrontOverflow

Q&A

문서

강의

영상

매거진

채용

처음 만난 리액트

0. 준비하기

0.1

HTML 살펴보기

0.2

CSS란 무엇인가?

0.3

자바스크립트 (JavaScript)

0.4

개발환경 설정하기

0.5

마치며

1. 리액트 소개

1.1

리액트는 무엇인가?

1.2

리액트의 장점

1.3

리액트의 단점

1.4

마치며

2. 리액트 시작하기

2.1

(실습) create-react-app을 사용한 리액트 애플리케이션 생성

2.2

(실습) Vite를 사용한 리액트 애플리케이션 생성

2.3

마치며

3. JSX 소개

3.1

JSX란?

3.2

JSX의 역할

3.3

JSX의 장점

3.4

JSX 사용법

3.5

(실습) JSX 코드 작성해보기

3.6

마치며

4. Rendering Elements

4.1

Element에 대해 알아보기

4.2

Element 렌더링하기

4.3

렌더링된 Element 업데이트 하기

4.4

(실습) 시계 만들기

4.5

마치며

5. Components와 Props

5.1

Component에 대해 알아보기

5.2

Props에 대해 알아보기

5.3

컴포넌트 만들기

5.4

컴포넌트 합성

5.5

컴포넌트 추출

5.6

(실습) 댓글 컴포넌트 만들기

5.7

마치며

6. State와 Lifecycle

6.1

State

6.2

Lifecycle에 대해 알아보기

6.3

(실습) State 사용해보기

6.4

(실습) React Developer Tools 설치하기

6.5

(실습) 생명주기 함수 사용해보기

6.6

마치며

7. Hooks

7.1

Hooks란 무엇인가?

7.2

useState()

7.3

useEffect()

7.4

useMemo()

7.5

useCallback()

7.6

useRef()

7.7

Hooks의 규칙

7.8

나만의 Hooks 만들기

7.9

(실습) Hooks를 사용한 컴포넌트 개발

7.10

마치며

8. Handling Events

8.1

이벤트 처리하기

8.2

Arguments 전달하기

8.3

(실습) 클릭 이벤트 처리하기

8.4

마치며

9. Conditional Rendering

9.1

Conditional Rendering이란?

9.2

Element Variables

9.3

Inline Conditions

9.4

컴포넌트 렌더링 막기

9.5

(실습) 로그인 여부를 나타내는 툴바 만들기

9.6

마치며

10. Lists와 Keys

10.1

리스트와 키란 무엇인가?

10.2

여러 개의 컴포넌트 렌더링하기

10.3

기본적인 리스트 컴포넌트

10.4

리스트의 키에 대해 알아보기

10.5

(실습) 출석부 출력하기

10.6

마치며

11. Forms

11.1

폼이란 무엇인가?

11.2

Controlled Components

11.3

textarea 태그

11.4

select 태그

11.5

File input 태그

11.6

여러 개의 입력 다루기

11.7

Input Null Value

11.8

(실습) 사용자 정보 입력 받기

11.9

마치며

12. Lifting State Up

12.1

Shared State

12.2

하위 컴포넌트에서 State 공유하기

12.3

(실습) 섭씨와 화씨 온도 표시하기

12.4

마치며

13. Composition vs Inheritance

13.1

Composition에 대해 알아보기

13.2

Inheritance에 대해 알아보기

13.3

(실습) Card 컴포넌트 만들기

13.4

마치며

14. Context

14.1

Context란 무엇인가?

14.2

언제 Context를 사용해야 할까?

14.3

Context를 사용하기 전에 고려할 점

14.4

Context API

14.5

여러 개의 Context 사용하기

14.6

useContext()

14.7

(실습) Context를 사용하여 테마 변경기능 만들기

14.8

마치며

15. Styling

15.1

CSS

15.2

styled-components

15.3

(실습) styled-components를 사용하여 스타일링 해보기

15.4

마치며

16. 미니 프로젝트

16.1

미니 블로그 기획하기

16.2

(실습) 프로젝트 생성하기

16.3

(실습) 필요한 패키지 설치하기

16.4

(실습) 주요 컴포넌트 구성하기

16.5

(실습) 폴더 구성하기

16.6

(실습) UI 컴포넌트 구현하기

16.7

(실습) List 컴포넌트 구현하기

16.8

(실습) 가짜 데이터 만들기

16.9

(실습) Page 컴포넌트 구현하기

16.10

(실습) 각 페이지별 경로 구성하기

16.11

main.jsx 파일 설명

16.12

(실습) 애플리케이션 실행하기

16.13

(실습) Production 빌드하기

16.14

마치며

처음 만난 리액트 문서

0.2 CSS란 무엇인가?

CSS는 Cascading Style Sheets의 약자로 웹사이트의 레이아웃과 글꼴, 색상 등의 디자인을 입히는 역할을 하는 언어입니다. HTML로 웹사이트의 구조를 만들었다면, 그 위에 CSS를 사용해서 디자인을 입혀야 아름다운 웹사이트가 완성되는 것입니다. 아래 그림처럼 HTML 소스 코드는 동일한데, CSS만 변경함으로써 전혀 다른 형태와 디자인의 웹사이트가 될 수도 있습니다.

동일한 HTML, 다른 CSS 예시

CSS를 잘 다루면 다양한 디자인으로 나만의 웹사이트를 구축 할 수 있습니다. CSS는 그 속성들이 상당히 많고 복잡해서 일일히 다 외워서 사용하려면 시간이 꽤 오래 걸립니다. CSS에 대해서만 한 권의 책으로 써야 할 정도니까요. 그래서 이 문서에서는 아주 간단한 수준의 CSS만을 사용합니다. 그리고 이 문서에서 사용하거나 실제로 많이 사용되는 주요 CSS 속성들만을 요약해서 15장에서 자세히 다루고 있으니 나중에 참고하기 바랍니다. 15장에 나오는 속성들만 잘 숙지해도 간단한 웹사이트는 구축할 수 있을 것이라고 생각합니다.

개발자를 위한 슬라이드 작성 도구

마지막 업데이트: 2025년 08월 21일 05시 10분

On this page

0.2 CSS란 무엇인가?

.css-jz2m06{color:var(--chakra-colors-blue-400);-webkit-text-decoration:underline;text-decoration:underline;}처음 만난 리액트 문서

0.2 CSS란 무엇인가?

처음 만난 리액트 문서