감귤밭 호지차 농장

node:internal/process/promises:288 triggerUncaughtException(err, true /* fromPromise */); ^ [Failed to load PostCSS config: Failed to load PostCSS config (searchPath: /Users/emma/Desktop/temp/invitation): [Error] Loading PostCSS Plugin failed: Cannot find module 'tailwindcss' Require stack: - /Users/emma/Desktop/temp/invitation/postcss.config.js (@/Users/emma/Desktop/temp/invitation/postcss.conf..

보통 [ :focus / :active ] 설정을 했는데도 적용이 안되거나 다른 작업을 하면(스크롤을 내리거나 다른 빈 페이지를 누르면) 효과가 사라지는 경우를 경험해 보신 분이 있을 거다. ... 저 처럼... ㅎ 일단 원인은 크게 두 가지 1. HTML 폼 요소가 , , 가 아니다. 2. 그냥 기본 웹 브라우저의 동작으로 다른 작업을 수행했을 때 사라지는 것이 정상이다. 1번의 경우는 강제로 상태가 적용 될 수 있도록 [ tabindex = 0 ] 할당하면 처리가 된다. 하지만 2번의 경우 그냥 정상적으로 웹 브라우저가 동작하는 거라 어떻게 처리해야할지 고민이라면.. onClick 이벤트를 이용해서 class를 활성화/비활성화 하는 방법이 있다. > onClick 이벤트를 이용해서 클래스 할당하기 기..

styled-components( CSS - in - JS )에서는 클래스 네이밍을 자동으로 생성해주어 겹칠 가능성이 없지만 CSS로만 구현하면 모든 스타일을 global에 선언하기 때문에 중복되는 경우가 발생할 수 있다. 이러한 불편함을 해결하기 위해 "BEM" 이 자주 사용된다. 1. BEM CSS 제작 방법으로 일종의 네이밍 컨벤션 이다. 기본적으로 class 만 사용하며, " 목적 " 에 따라 네이밍 하는 것이 특징이다. { Block }__{ Element }--{ Modifier } ex. Header__navigation--navi-text { /.../ } > 참고 : CSS-네이밍 컨벤션- BEM 2. Utility-First ( Tailwind, Bootstrap ) Utility-Fi..

Tawilwind 엄청나게 많은 유틸리티 클래스로 이루어진 CSS 프레임워크입니다. 제공되는 유틸리티 클래스들을 다양하게 조합하여 CSS 코드 작성 없이 class 속성에서 스타일링을 할 수 있습니다. ^현재 버전 : V3.3.2 ^공부 환경 : React + TS + Vite Install 방법 1. vite 로 리액트 프로젝트 생성 npm create vite@latest {생성 예정 폴더 이름} 이렇게 하면 Vite 설정할 수 있는 선택지들이 나오는데 원하는대로 엔터> 엔터 > 엔터 > 하믄 됩니다! 2. Tailwind CSS 설치 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p - tailwind.config.js파..

CDD Component Driven Development 의 약자로 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방법을 의미합니다. 재사용할 수 있는 UI 컴포넌트를 여러 팀들이 공유를 하면 불필요한 업무 충돌 및 작업이 줄어들 수 있겠죠. 페이지 단위로 UI 개발이 이루어지는 것의 반대라고 할 수 있습니다. 디자인 체계화 & 디자이너와 효율적인 협업 ( Storybook을 통한 체계적인 관리 및 소통 ) 평행화 개발 (Parallelize development) : 다른 프로젝트에서도 쉽게 쓰고 공유 가능 Decoupling : CSS, JS , I18n, UI 단위 테스트 등 Aribnb의 UI Storybook 참고 블로그 : [Methodology] CDD(Component Driven De..

🔖부모 요소 적용 Flexbox 속성들 ※ 대표적 속성 display : flex ; // 정렬 축 정하기 [ display : flex ] 의 경우, 자식 요소들의 컨텐츠 width 만큼만 차지하고, height은 부모 요소 높이만큼 늘어납니다. 배치는 가로 방향으로 배치됩니다. ( inline 요소들처럼) 그래서 height가 내용물에 따라 자동으로 늘어나는 특징은 컬럼같은 경우 많이 적용한다고 합니다. flex-direction : 정렬 축 정하기 flex-wrap : 줄 바꿈 설정하기 justify-content : 축 수평 방향 정렬 // row (col)일때, 가로(세로)방향에서 자식 요소들을 어떻게 배치할 건지 align-items : 축 수직 방향 정렬 // row (col)일때, 세로(가..

🔹inline element 와 block element inline element : 하나의 태그가 브라우저에서 작성된 부분만 영역을 차지해서 다른 태그들이 양 옆에 나란히 위치할 수 있는 요소 ( 텍스트 레벨 요소라고도 함 ) block element : 하나의 태그가 브라우저에서 한 줄을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소 🔹inline 요소와 block 요소의 종류 💡주의점! block 요소는 내부에 block 요소와 inline 요소를 포함 할 수 있으나, inline 요소는 내부에 block 요소를 포함할 수 없습니다. * , 와 같은 특정 block 요소들은 inline 요소만 포함할 수 있으니 참고하라구 * inline 요소를 CSS로 블럭화해서 내부에 블럭 요소를 포함할 수..

HTML5는 웹페이즈를 기술하기 위한 마크업 언어로써 웹 페이즈의 내용과 구조를 담당합니다. HTML에서 많이 쓰이는 tag들에 대해서 정리 요약 해보았습니다. 참고로 tag들은 " 컨탠트 " 처럼 시작 tag와 종료 tag는 소문자로 시작하는 것이 국룰 # 주석 # 에는 metadata, title , style, link, script에 대한 데이터로 화면에 표시되지 않음. * metatag : description, keywrods, authopr. 기타 메타데이터 정의에 사용된다. 메타데이터는 브라우저, 검색엔진(keywords) 등에 의해 사용된다. : SEO(검색 엔진 최적화)를 위해 검색엔진이 사용할 keywords를 정의 : 웹 페이지의 설명을 정의 : 웹 페이지의 저자를 명기 : 웹 페이..