# emotion

창의성과 효율성을 중시하는 새로운 JavaScript 스타일 작성 방식을 경험해 보세요.

[Website](https://emotion.sh/docs/introduction) [GitHub](https://github.com/emotion-js/emotion#main)

Emotion은 JavaScript로 CSS 스타일을 효과적으로 작성하도록 설계된 라이브러리로, 뛰어난 개발자 경험을 제공하는 강력한 스타일 조합 기능을 갖추고 있습니다.

문자열 스타일과 객체 스타일을 모두 지원하며, 직접 사용하거나 React와 같은 프레임워크에 통합할 수 있도록 다양한 메서드를 제공합니다. 핵심 패키지 중 하나인 `@emotion/css`는 프레임워크에 종속되지 않아 추가 설정이나 구성 변경 없이 다양한 환경에서 사용할 수 있습니다. 주요 기능으로는 자동 벤더 접두사 추가, 중첩 선택자, 미디어 쿼리가 있어 스타일링 과정을 간소화합니다.

전역 스타일과 반응형 디자인을 지원하는 것 외에도 Emotion은 서버 사이드 렌더링을 강력하게 지원해 최신 웹 애플리케이션에 적합한 다용도 옵션입니다. `css` 함수와 `cx` 유틸리티를 사용하면 클래스 이름을 간편하게 만들고 조합할 수 있어 컴포넌트 전반의 스타일을 효율적으로 관리할 수 있습니다.

## 기능

- 프레임워크에 종속되지 않음
- 자동 벤더 접두사 추가 지원
- 중첩 선택자 지원
- 미디어 쿼리 지원
- 서버 사이드 렌더링 지원
- 전역 스타일 삽입
- 테마를 사용한 동적 스타일링
- 간편한 클래스 이름 조합

여기에 광고를 게재하시겠어요?

[이메일 보내기](mailto:hi@dennn.is?subject=KickstartUI%20%EA%B4%91%EA%B3%A0%20%EB%AC%B8%EC%9D%98)

[광고 WordPress을 위한 에이전트 지원 플러그인 모음입니다.](https://sleekwp.com/?ref=kickstartui)

## 관련 항목

### [Master CSS](https://kickstartui.com/ko/details/master-css/)

이 혁신적인 제품은 단순함과 성능을 결합해 CSS 작성 및 적용 방식을 바꾸고, 효율적인 웹 디자인과 개발을 지원합니다.

**GitHub 스타**

1.8K

**업데이트일**

Dec 5, 2024

**라이선스**

MIT License

### [styled-components](https://kickstartui.com/ko/details/styled-components/)

컴포넌트 스타일을 매끄럽게 지정할 수 있도록 JavaScript에서 CSS를 활용하게 해 주는 강력한 라이브러리입니다.

**GitHub 스타**

40.6K

**업데이트일**

Dec 6, 2024

**라이선스**

MIT License

### [StyleX](https://kickstartui.com/ko/details/stylex/)

이 라이브러리는 웹 애플리케이션의 스타일을 간소화하며, 효율성과 유지 관리성을 높이기 위해 아토믹 스타일을 사용합니다.

**GitHub 스타**

8.4K

**업데이트일**

Dec 6, 2024

**라이선스**

MIT License

### [ChakraUI](https://kickstartui.com/ko/details/chakra-ui/)

사용하기 쉽고 사용자 지정이 자유로운 필수 컴포넌트 모음으로 접근성 높은 웹 애플리케이션을 빠르고 효율적으로 만드세요.

**GitHub 스타**

38.1K

**업데이트일**

Dec 6, 2024

**라이선스**

MIT License

### [UnoCSS](https://kickstartui.com/ko/details/unocss/)

기존 CSS 프레임워크의 일반적인 제약 없이 개발자가 빠르게 디자인을 구축할 수 있도록 돕는 강력하고 사용자 지정 가능한 엔진입니다.

**GitHub 스타**

16.8K

**업데이트일**

Dec 6, 2024

**라이선스**

MIT License

### [Tailwind CSS](https://kickstartui.com/ko/details/tailwindcss/)

마크업에 다양한 클래스를 적용해 어떤 디자인이든 구축할 수 있는 유틸리티 우선 CSS 프레임워크입니다. HTML을 깔끔하고 유지 관리하기 쉽게 유지하면서 현대적인 웹사이트를 빠르게 만들 수 있습니다.

**GitHub 스타**

83.7K

**업데이트일**

Dec 6, 2024

**라이선스**

MIT License

### [Tamagui](https://kickstartui.com/ko/details/tamagui/)

React와 React Native에서 효율성과 유연성을 결합해 UI를 구축할 수 있는 강력한 라이브러리입니다.

**GitHub 스타**

11.7K

**업데이트일**

Dec 6, 2024

**라이선스**

MIT License

### [Skeleton](https://kickstartui.com/ko/details/skeleton/)

최신 웹 애플리케이션 개발을 돕는 적응형 접근성 툴킷입니다.

**GitHub 스타**

228

**업데이트일**

Dec 26, 2023

**라이선스**

MIT License