[Config] "Unknown at rule @apply"
"Unknown at rule @apply"Tailwind 환경에서 마주친 경고메세지이다.이 에러 메세지는 에디터가 이해하지 문법이라고 경고하는 것이기에tailwind를 사용한다면 tailwind Css intellisense를 통해서 에디터가 이해하도록 확장 시켜주어야 한다.tailwind는 postCSS를 이용하여 @apply나 @Layer같은 문법을
관련 게시물
[CSS] 이미지 비율 유지
[CSS] 이미지 비율 유지<img /> 태그로 작업할 때 알아둬야 할 특징이 하나 있다. HTML이나 React 환경 모두에서 <img /> 태그는 기본적으로이미지 원본의 크기를 따라간다.예를 들어보면, 100px x 100px 크기의 이미지가 있다고 가정하자부모 div의 크기를 지정하지 않아도 이미지는 자기가 가진 100px를 유지하고, 부모 div도
[CSS] 자식의 fouce로 부모의 style을 변경하기
자식의 fouce로 부모의 style을 변경하기기존에 아래와 같은 HTML이 있다고 가정했을 경우,input에 Fouce 된다면 :fouce 선택자를 사용하여 스타일을 변경 할 수 있었다.<div class="parent"> <div class="children"> <input type="text" /> </div> </div> 하
[Css] Grid
난 보통 레이아웃을 구성할때가장 큰 레이아웃을 하나의 div로 래핑하여 "margin 0 auto"; 하거나 body에 display flex를 애용하는 편이다.정말 이전에는 div에 대한 요소를 반영하기 위해 float을 많이 사용했는데.. 요즘은 정말 거의 쓰질 않는다.이유는 대세인 "flex"와 "gird"가 있기 때문이다.사실 grid도 난 잘 쓰지 않았다. 이유는 분명하게 flex만으로도 충분한 ui가 구성이 되기 때문이었다.근데 요즘 추세가 grid를 굉장히 많이 쓴다고 하니.. 이 또한 파악 하기 위해서 "grid"를 재 복습한다.1️⃣ "Flex와 Grid의 차이"내가 생각하는 grid의 장점은 2차원 적 레이아웃도 div를 생성하지 않고도 만들 수 있게 한다는 것이다.flex의 경우는 1차원 적인 레이아웃을 컨트롤 하기에 우측이나 좌측으로 하나의 기준을 정해두고 정렬을 하는데grid의 경우는 우측 좌측만이 아닌 하나의 섹션내에서도 동일 div에서 컨트롤 이 가능하다.