본문 바로가기
728x90
반응형

styled-components2

WebComponent에서 styled-components 사용하기 Backgrounds현재 회사에서 개발 중인 제품은 고객사 웹 페이지 위에서 동작하는 다양한 모듈들을 제공하는 형태입니다.이때 고객사 페이지와 독립적인 스타일을 유지하기 위해,별도의 웹 컴포넌트를 생성한 뒤 그 안에서 자체적으로 정의한 스타일이 동작하도록 구현했습니다. https://developer.mozilla.org/en-US/docs/Web/API/Web_components Web Components - Web APIs | MDNWeb Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from th.. 2024. 7. 10.
리액트를 다루는 기술 _ 9장 폭풍 같던 Hooks를 지나.... 오늘도 뚠뚠뚠... 9장. 컴포넌트 스타일링 아무리 디자인에 무심한 편이라 해도... 지금껏 만든 컴포넌트들은 눈 뜨고 봐줄 수준도 못된다! 그나마 좀 괜찮은 디자인을 위해 → 컴포넌트 스타일링 방법을 배워볼 예정. 오늘 해볼 방식은 총 4가지! - 일반 CSS : 컴포넌트 스타일링의 가장 기본적인 방식. - Sass : 확장된 CSS 문법을 사용해 CSS 코드를 더욱 쉽게 작성할 수 있도록 도움. - CSS Module : 스타일을 작성 시 CSS 클래스가 다른 CSS 클래스 이름과 절대 충돌하지 않도록 고유 이름을 자동 생성. - styled-components : 스타일을 JS 파일에 내장 → 스타일 작성과 동시에 해당 스타일이 적용된 컴포넌트를 만듦. 오늘도 c.. 2021. 3. 11.
728x90
반응형