둘 다 상당히 까다로움 {" dsafsafa \n hdsfds"} 두개 모두 적용된 css입니다. 이렇게 가로세로가 일치하면서 개행문자 \n을 인식하여 개행을 시켜주고있는것을 확인할 수 있죠? 그냥 정사각형을 만드는 것은 쉽지만 반응형 정사각형을 만드는것은 상당히 까다롭습니다. 왜냐하면 현재 htmlelement의 가로길이가 유동적으로 변화하고있는 상황에서 가로길이를 명확히 캐치해내는것이 까다롭기 때문인데요 vw와 같은 단위를 사용하면 가능하긴하지만 vw를 쓰게되면 뷰포트 단위로 생각을 해야만하는 강제성이 생겨 유지보수하기가 매우 까다로워집니다. 물론 html element의 offSetWidth 등 현재 크기를 알 수 있는 돔 어트리뷰트에 접근하는 방법도 있습니다. 그러나 이방법의 문제점은 1. 무조건..
https://xionwcfm.tistory.com/328 cva, tailwindmerge, clsx를 조합하여 재사용 가능한 UI 만들기 😎세가지를 조합하면 아주 멋진 것을 만들 수 있다. https://xionwcfm.tistory.com/322 https://xionwcfm.tistory.com/323 https://xionwcfm.tistory.com/325 지금까지 진행한 세가지 라이브러리에 대한 포스트입니다. 이 세 xionwcfm.tistory.com 이때 다뤘던 라이브러리인데요 간단히 요약하면 테일윈드에는 css 적용 순서이슈가 있습니다. 이는 빌드타임에 모든 css를 정적으로 생성하고 사용하는 테일윈드의 동작 방식에서 기인하는데요 .green-400 { color:green } .red..
🐶어떻게 해야할까요? 이렇게 여러가지 종류의 스크롤바를 만드는 것이 요구사항입니다. 쉽게 생각해보자구요 스크롤바만드는 css 검색해보면 되죠 ::-webkit-scrollbar 같은 속성들 건드리면 되는거아닐까요? ::-webkit-scrollbar-thumb { background-color: #4568dc border-radius: 10px } ::-webkit-scrollbar-thumb는 스크롤바의 막대 자체의 스타일링을 지정합니다. 그러니 막대 자체를 파랑색으로 지정하고 border-radius를 10px로 줘서 둥글둥글하게 만드는 코드입니다. 그러나 동작하지 않습니다. ::-webkit-scrollbar 에도 background-color를 설정해주면 동작합니다. ::-webkit-scroll..
😖먼저 display none과 hidden의 차이점은? 맨 하단의 레퍼런스 칸에서 mdn이 제공하는 예제를 직접 보는것도 이해에 도움이 됩니다. 우선 둘의 공통점은 다음과 같습니다. 두 속성 모두 특정 엘리먼트를 시야에서 보이지 않도록 처리하는 데에 사용하게 되는 속성입니다. 바닐라 css 에서의 사용례는 다음과 같습니다. .hidden-visible { visibility: hidden } .hidden-display { display: none } 두 속성 모두 내 시야에서 dom 요소를 보이지 않게 처리해줍니다. 둘의 차이점은? display:none 레이아웃에서 요소를 완전히 제거하고 공간을 차지하지 않습니다. 주변 요소에 영향을 주지 않습니다. visibility: hidden 이 경우 요소는..
shadcn/ui https://ui.shadcn.com/docs Introduction Re-usable components built using Radix UI and Tailwind CSS. ui.shadcn.com shadcn/ui는 Radix UI와 tailwindcss를 기반으로 빌드된 컴포넌트 모음집입니다. toast와 같은 ui 기능들은 Radix ui 에서 가져와 사용하고 tailwindcss와 내부적으로는 tailwind-merge , clsx, cva를 이용하여 즉시 사용할 수 있는 아톰컴포넌트들을 제공합니다. tailwindcss 계의 mui 같은 느낌이라고 생각할 수도 있을 것 같네요 다만 nodemodules에서 컴포넌트들이 관리되는 것이 아니라 커스터마이징이 훨씬 간편하다는 장..
app라우터에서 pandacss를 바로? 이전 글에서는 왜 build time css - in -js 가 하입을 받고 있는지를 간단히 다루어보았는데요 이번에는 build type css - in js 프레임워크 중 하나인 panda css의 세팅을 해보도록 하겠습니다. panda css는 next.js , remix , gatby , nuxt , preact , solid.js 등 너무나도 다양한 프레임워크들을 지원해주며 그 방법 또한 공식문서에서 잘 가르쳐주고 있습니다. 심지어는 app router와의 통합 과정도 너무 잘 가르쳐주고 있는데요 공식문서를 잘 따라서 설치해보고 조금 문제가 생길 수 있는 부분들은 간단하게 고쳐보면서 panda css를 잘 세팅해보도록 하겠습니다. npx create-nex..
build time css는 왜 중요해졌는가?프론트엔드의 추세가 csr -> ssr의 흐름으로 가면서 수많은 서버사이드렌더링 프레임워크가 등장했습니다. next.js, nuxt.js sveltekit , remix 등등이 있지요 대표적인 프레임워크 중 하나인 next.js의 경우 'use client'를 사용한 컴포넌트에서만 리액트 훅과 이벤트 리스너를 사용할 수 있습니다. 이는 app router의 서버컴포넌트 동작이 리액트의 서버컴포넌트 기반으로 동작하기 때문인데요 이 서버컴포넌트는 간략하게 설명하면 서버에서 렌더링 과정이 이루어지며(HTML로 생성하는건 아닙니다.) Stream을 생성하여 점진적으로 클라이언트에게 스트림을 쏴줍니다. 이러한 동작방식은 기존 CSR의 패러다임과 비교했을 때 명확한 차이..
⛑주의!!! swiper 메이저버전이 10으로 올라갔습니다. (2023.07.31 기준) 메이저 버전이 10으로 올라감에 따라 아래 제 포스트를 따라했을 때 잘 동작하지 않을 수 있습니다. 본 포스트의 swiper 버전은 ^9.3.2 입니다 😙라이브러리의 도움을 받아 캐러셀 구현하기 캐러셀 같은 경우 처음 코딩을 시작했을 때 구현을 시도했던 기능인데 그당시에는 자바스크립트만 이용해서 이래저래 구글링하면서 해결했던 기억이 납니다. 지금 간단히 기억나는 느낌으로는 overflow되는 것들을 보이지않게 처리하고 일정주기 혹은 클릭이벤트가 발생할때마다 보여지는 이미지의 위치를 전환하는 식으로 구현했던 것 같습니다. 다만 이번 프로젝트에서 필요로하는 캐러셀은 요구되는 기능이 많았습니다. 따라서 이 기능들을 하나하..
