본문 바로가기

styled-component3

[CSS-in-JS] Styled Component의 theme에 관하여 Styled Component의 Theme 이란 ? 스타일링을 시작하기 앞서, 자주 사용하게 될 색상 코드, 사이즈, 폰트, 미디어 쿼리 등의 정보를 변수로 생성해 사용하면 일관적인 스타일 관리가 가능합니다. styled-component에선 전반적으로 프로젝트 전체에서 사용할 목적의 변수 모음 객체를 theme이라고 부릅니다. const margins = { sm: ".5rem", base: "1rem", lg: "2rem", xl: "3rem", }; const paddings = { sm: ".5rem", base: "1rem", lg: "2rem", xl: "3rem", }; const fonts = { family: { base: `'Noto Sans KR', sans-serif`, title:.. 2023. 2. 16.
[CSS-in-JS] Styled Component의 개념 및 사용법 1) CSS in JS 복습 CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법입니다. 기존에 웹사이트를 개발할 때는 HTML과 CSS, JavaScript는 각자 별도의 파일에 두는 것이 best practice로 여겨졌었습니다. 하지만 React나 Vue, Angular와 같은 모던 자바스크립트 라이브러리가 인기를 끌면서 웹개발의 패러다임이 바뀌고 있습니다. 최근에는 웹 애플리케이션을 여러 개의 재활용이 가능한 빌딩 블록으로 분리하여 개발하는 '컴포넌트 기반 개발 방법'이 주류가 되고 있습니다. 따라서, 웹페이지를 HTML, CSS, JavaScript 3개로 분리하는 것이 아니라, 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HT.. 2023. 2. 14.
[CSS] CSS-module / CSS-in-js 에 관하여 저희가 CSS를 작성할 때, 전통적으로는 style.css라는 별도의 파일을 생성하고 HTML의 태그를 사용해서 적용하였습니다. 하지만 웹이 점점 복잡해지고 동적 기능 요구가 증가하면서 HTML과 CSS만으로는 화면의 모든 스타일을 제어할 수 없는 상황에 이르게 됩니다. 이를 해결하기 위한 여러 가지 웹 애플리케이션 스타일 구성 방식이 나타났으며 크게 두 갈래로 나뉘어집니다. CSS-in-JS와 CSS-in-CSS가 그것입니다. 또한 React에서는 컴포넌트(Component) 단위로 아키텍처를 설계하기 때문에 컴포넌트 간의 의존성을 최소화하고, 내부 응집도를 높이는 것이 중요시 되기 때문에 기존의 방법보다 css-module이나 css-in-js로 Javascript를 이용하여 CSS를 만드는 것이 좋.. 2023. 2. 9.

티스토리툴바