내가 레퍼런스가 되자 내가 레퍼런스가 되자

최근에 작업을 진행하면서 CSS의 backdrop-filter를 사용할 일이 있었습니다. backdrop-filter를 사용하면서 이슈도 있었고 이번 기회에 CSS의 filter와 backdrop-filter 내용을 정리하게 되었습니다. filter? backdrop-filter?filter와 backdrop-filter는 CSS 속성으로 요소에 그래픽 효과를 적용합니다. filter와 backdrop-filter는 같은 구문을 가지며 많이 사용하는 필터 함수를 살펴보겠습니다./* 흐림 처리 */filter: blur(5px);/* 밝기 조절 */filter: brightness(0.4);/* 색상 대비 조절 */filter: contrast(200%);/* shadow 처리 */filter: drop-..

최근 팀 내에서 Tailwind CSS Class를 사용할 때 좀 더 효율성 있게 작성하는 방식에 대해 논의하게 되었습니다. 기존 작업 중인 프로젝트에서는 Styled Component와 Tailwind CSS를 같이 쓰는 방식을 채택하여 사용 중인데 새롭게 들어가는 프로젝트에선 clsx, class-variance-authority, tailwind-merge를 조합하여 사용하는 방식을 사용해 보려고 합니다. 필요 라이브러리 ※ React에서 Tailwind CSS 설정이 되어 있는 환경을 가정합니다. clsx는 조건부 className 처리를 위해 사용되며 라이브러리 크기가 매우 작은 장점을 가지고 있습니다. import { clsx } from 'clsx'; clsx('w-full', true &&..

height가 전체를 차지하는 화면을 개발할 때 100vh를 사용합니다. 하지만 모바일에서 해당 화면을 보면 주소창 때문에 잘려 보여 곤란한 상황이 생깁니다. vh 단위는 주소창이 없는 화면을 기준으로 설정되어 있어 이와 같은 이슈가 발생하게 됩니다. 스크립트로 해결할 수도 있지만 css 단위로 깔끔하게 처리하는 방법을 알아보겠습니다. vh? css 단위 중 vh는 viewport height로 스크린의 가시 height를 백분율로 나타냅니다. 현재 스크린의 height가 800px일 경우 1vh는 8px이 되며 10vh는 80px이 됩니다. 이처럼 vh는 백분율로 나타내어 사용합니다. 또한 vh 단위는 width에서도 사용이 가능합니다. 그러면 100%와 100vh의 차이가 무엇인지 궁금증을 가질 수 ..

기존에 CSS in JS 라이브러리로 Styled Components를 사용 중에 이전에 사용해 경험이 좋았던 Tailwind CSS를 도입하여 같이 사용해 보기로 했습니다. Tailwind CSS의 클래스들을 CSS Objects로 변환하여 Styled Components나 emotion 같은 CSS in Js 라이브러리에서 해당 클래스를 사용할 수 있도록 twin.macro를 이용한 기본적인 셋업과 사용 방식에 대해 알아보겠습니다. 필요 라이브러리 Styled Components를 사용하기 위해 필요한 라이브러리를 설치합니다. npm install styled-components npm install @types/styled-components # or yarn add styled-components..