CSS의 길이 단위 중 상대적으로 크기를 정하는 em과 rem에 대해 정리하고자 한다.em / rem 차이점em해당 요소의 글꼴 크기를 1em으로 사용하지만 만약 해당 요소의 폰트 크기 가 없으면 부모 요소의 글꼴 크기를 1em을 갖는다.remHTML 최상위 요소인 font-size 속성 값이 기준으로 html 글꼴 크기를 1rem으로 사용한다. See the Pen em,rem by pminsun (@pminsun) on CodePen.html { font-size: 62.5%; }px 값을 rem으로 바꾸면 계산이 어렵고 사용자 접근성 옵션(accessibility options)을 고려해 10px로 바꿔주는 html 에 font-size: 62.5% 를 설정하기도 한다. ( 고정 10px 로 적용..

Tailwind는 유틸리티 우선(Utility-First) css 프레임워크이다Next.js 를 사용하면 install 시 Would you like to use Tailwind CSS? No / Yes tailwind 설치 여부를 물으며 Yes를 선택 시 자동으로 설치 된다. 하지만 그 위에도 설치 할 수 도 있기 때문에 장단점 부터설치, 사용법 까지 정리하고자 한다. 장점bundle 사이즈가 작다.css 사용을 위한 네이밍을 하지 않아도 된다.작성해야 하는 코드의 길이가 확연하게 짧아진다.반응형 스타일링을 적용하기 용이하다.단점html 코드가 장황하고 복잡하다고 느껴집니다.익히려면 시간이 오래 걸린다. 패키지 설치 Installation - Tailwind CSSThe simplest and fast..

블로그에 적용해보고자 Lottie에 대해 알아보았다. Lottie는 GIF나 MP4 같은 다른 형식에 비해 품질은 같으면서 훨씬 더 작으며 벡터에 기반하기 때문에 해상도의 영향을 받지 않고 확대하거나 축소할 수 있으며 Android, iOS, 웹 브라우저, React 등과 호환되는 고품질 JSON 인코딩 애니메이션입니다. LottieFiles LottieFiles: Download Free lightweight animations for website & apps.Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Create, edit, test, collabora..