스킬 홈
More
Frontend Framework
CSS-in-JS Library
Emotion
Emotion
이모션
6개 레벨
Emotion은 CSS-in-JS 라이브러리로, 스타일을 컴포넌트에 직접 추가할 수 있게 해줘요. 동적 스타일링과 테마 기능이 뛰어나서 다양한 디자인 요구에 적합해요. 성능도 우수해 사용자 경험을 향상시켜줘요.
내 스킬에 등록하기
이모션 스킬 여정을 시작하세요
6개의 레벨을 통해 체계적으로 학습하고, 커리어 성장의 기반을 다지세요.
6
레벨 로드맵
단계별 역량 인증
로그인하고 시작하기
학습 로드맵
6개 레벨
전체 6
Lv 1. Emotion 라이브러리를 설치하고 기본 스타일링을 적용할 수 있어요
1. CSS-in-JS 개념
2. Emotion 라이브러리 소개
3. 프로젝트에 Emotion 설치하기
연습 문제
1.
css 함수를 이용해 텍스트 컴포넌트에 인라인 스타일링을 적용해요.
2.
Emotion을 설치한 React 프로젝트에서 styled.div 컴포넌트로 박스 UI를 만들어요.
Lv 2. Emotion의 styled와 css API를 활용해 동적 스타일링을 구현할 수 있어요
Lv 3. Emotion 테마를 정의하고 반응형 스타일을 구성할 수 있어요
Lv 4. SSR 환경에서 Emotion을 설정하고 빌드 최적화를 할 수 있어요
로그인하고 더 많은 레벨을 확인하세요
로그인하기
Lv 5. Emotion 스타일을 테스트하고 Storybook으로 컴포넌트를 관리할 수 있어요
Lv 6. Emotion 프로젝트를 Docker와 CI/CD로 배포할 수 있어요
펼치기
이 스킬로 지원할 수 있는 채용공고
로그인
이 스킬이 필요한 커리어
웹 개발자
연관 커리어
이 스킬이 필요한 직무
웹 개발자
채용 기회
현재 채용 중인 포지션
채용 중
채용공고 보러가기
학습 팁
1
각 레벨의 요구사항을 꼼꼼히 확인하세요
2
실습을 통해 배운 내용을 적용해보세요
3
레벨업으로 실력을 인증받고 커리어를 성장시키세요
Frontend 개발자
마이리얼트립
•
웹 개발자
강남
Software Engineer, Frontend - 검색
당근마켓
•
웹 개발자
서초
[인턴십 채용] 웹 엔지니어 (Web Engineer)
뱅크샐러드
•
웹 개발자
강남