CSS3 패키지 개발 시 CSS 번들링 적용 방법: vite와 exports field를 곁들인 들어가면서 React 기반 컴포넌트를 개발하고, Vite를 이용한 번들링하는 환경에서 별도의 패키지를 만들었다. 이 글에서는 TodoList 컴포넌트 패키지를 예시로 들어 설명한다. 하나의 패키지에서 개발된 컴포넌트처럼 해당 패키지가 다음과 같이 사용할 수 있도록 구성하는 것이 목표였다.import { Todolist } from "@test/todolist" 그러나 기대했던 바와 달리, 해당 컴포넌트를 import한 부분에서 CSS가 제대로 적용되지 않았다. dist 폴더를 확인해보았을 때, index.css가 정상적으로 빌드되어 있었고패키지를 별도로 실행했을 때, 네트워크 탭에서 index.css가 로드되고 제대로 CSS가 적용되는 것도 확인할 수 있었다. 이를 해결하기 위한 실험해 본 여러가지 .. 2025. 3. 11. [tailwind CSS] backgroundImage 설정 방법 - (config/style/custom) tailwind CSS - backgroundImage 설정 방법 - (config/style/custom)tailwind css로 backgroundImage를 설정하는 방법은 기록하고자 한다. tailwind 왕왕초보의 무작정 적용기! 목차0. 이미지 파일 부터 넣기 - assets 폴더를 pulbic에 넣을 것인가? src에 넣을 것인가?1. backgroundImage를 tailwind.config.js 파일에서 설정해보기2. style 속성에 backgroundImage를 설정해보기3. 일회성 속성일 경우, 임의 값을 설정하여 backgroundImage를 설정해보기 0. 이미지 파일 부터 넣기 - assets 폴더를 pulbic에 넣을 것인가? src에 넣을 것인가?public 폴더public.. 2024. 6. 2. [Web] CSS 레이아웃 - Grid, Flex 차이 및 기본 개념 CSS 레이아웃 - Grid, Flex 차이 및 기본 개념 레이아웃으로 Flex, Grid가 가장 많이 사용된다고 한다. Flex와 Grid가 대충 어떤 느낌인지 알기 위해 작성한 글이다. Flex : 한 방향 레이아웃 시스템 (1차원) Flex는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있고, Grid : 두 방향(가로-세로) 레이아웃 시스템 (2차원) Grid는 2차원으로 수평, 수직을 동시에 레이아웃을 나눌 수 있다. Flex : 한 방향 레이아웃 시스템 (1차원) 부모 요소인 div.container를 Flex Container(플렉스 컨테이너) 자식 요소인 div.item들을 Flex Item(플렉스 아이템) Flex 컨테이너 안(태그 안)에 있는 item들의 방향들.. 2022. 8. 18. 이전 1 다음
