CSS
웹 성능 최적화를 위한 Critical CSS with 예제
웹 페이지의 로딩 속도는 사용자 경험과 검색 엔진 순위에 매우 중요한 영향을 미친다. 특히 모바일 기기에서의 웹 사용이 늘어나면서 빠른 페이지 로딩이 더욱 중요해졌다. 만약 당신이 CSS 파일을 불러오면, 이때 렌더링은 멈추게 된다.따라서, 초기에 중요한 CSS와 중요하지 않은 CSS를 구분하여 중요한 CSS를 먼제 제공하고 비동기적으로 중요하지 않은 CSS를 제공하면 더 빠른 웹페이지 로딩이 가능하다. 👻 CSS는 렌더링 차단 리소스: 브라우저는 페이지를 표시하기 전에 CSS 파일을 다운로드하고 파싱해야 한다. 👻 때문에 CSS 파일이 크거나 네트워크 상태가 좋지 않은 경우 CSS 파일을 요청하면 웹페이지를 렌더링하는 데 걸리는 시간이 크게 늘어날 수 있다. 즉, Critical CSS는 웹 페이지..
Web animations API 사용하기 (animate)
웹 애니메이션을 별도의 라이브러리 설치 없이 사용할 수 있다. 내장된 Web api를 사용하여 간단한 애니메이션을 구현할 수 있다. HTML title lorem ippsum CSS .phrase { background: #ff99ff; text-align: center; padding: 10px; } Javascript const tag = document.querySelector('.phrase'); tag.addEventListener('click', () => { tag.animate( [ {transform: 'translateY(0px)'}, {transform: 'translateY(15px)'}, {transform: 'translateY(0px)'}, ], { duration: 1500,..
Headless UI란?
Headless UI는 UI 구성 요소들을 시각적인 디자인 없이 제공하는 방식을 말한다. 즉, 구성 요소가 제공되지만 UI 디자인이 제공되지는 않기에 직접 스타일을 작성해야 한다. ☁️ 이는 기존의 Material-UI나 Chakra UI같은 UI 컴포넌트 라이브러리와의 차이점으로 UI 컴포넌트 라이브러리는 완전한 스타일과 디자인이 구축된 UI가 제공된다. 일반적인 UI 라이브러리나 프레임워크는 시각적인 스타일과 디자인이 내장되어 있으며, 이를 커스터마이징하거나 디자인을 변경하는 데에는 일부 제한이 있을 수 있지만, Headless UI는 이러한 디자인적인 제약을 없애고, 개발자가 커스텀 디자인을 자유롭게 적용할 수 있다. 이러한 디자인 없는 구성 요소들은 개발자가 UI의 동작을 정의하고 접근성과 상호작..
CSS 전역변수 선언 및 사용하기 (CSS custom properties)
CSS에서도 변수를 선언하고 이를 사용할 수 있다. 변수를 선언하여 값을 사용하면, 추후 스타일의 변화가 있을 때 손쉽게 변경할 수 있다. 반복적으로 사용되는 색상이나 값을 저장하여 재사용함으로써, CSS를 더 효율적으로 사용해보자. 일단 CSS에서 변수를 선언하는 방법은 다음과 같다. .test { --primary-color: red; } p { color: var(--primary-color); } 위와 같이 --를 붙인 속성의 이름은 var()을 통해서 다른 곳에서도 사용될 수 있다. 다만, 선언된 사용자 지정 속성은 해당 태그와 그 하위의 요소에서만 유효하다. hello Good testing have a nice day 위의 HTML에서 test라는 클래스 이름을 지니는 div 하위에 존재하는..
canvas 태그 사용하기
canvas 태그는 HTML5에서 도입된 요소이다. 자바스크립트를 사용하여 동적으로 그래픽을 컨트롤할 수 있게 해준다. canvas 태그를 사용하면, 자바스크립트로 선, 도형, 이미지, 텍스트를 그리고 스타일을 지정할 수 있다. 프레임 기반 애니메이션 및 인터랙티브 기능(마우스 클릭, 키보드 입력 등)을 제공한다. 기본적인 사용법은 다음과 같다. 위와 같은 HTML 파일을 아래의 자바스크립트 코드로 조작한다. const canvas = document.getElementById("test-canvas"); const ctx = canvas.getContext("2d"); ctx.fillStyle = "#ccc"; // top left width height ctx.fillRect(10, 10, 50, 1..
CSS Modules 사용하기
CSS Module은 클래스 이름의 중복을 방지하고, CSS 파일을 여러 개로 관리할 때 유용한 방법이다. 이를 사용하기 위해서는 프로젝트의 build 시스템이 CSS Modules를 지원해야 한다. 대부분의 bundler(예: webpack)는 CSS Modules를 기본적으로 지원한다. 따라서 먼저 프로젝트에 bundler를 설정하고 구성하자. 사용법은 간단한데, css 파일 이름을 생성할 때 이름.module.css 과 같이 네이밍을 하면 된다. React 환경에서 사용 예제 About.tsx import styles from "./about.module.css"; export default function About() { return ( Phrase ); } about.module.css .Co..
Tailwindcss와 Css-in-js 함께 사용하기 (twin.macro)
tailwindcss는 분명 장점이 있는 CSS 작성법이다. 다만, 어떤 경우에는 tailwindcss만 사용하는 것이 생산성을 떨어트릴 수도 있다. 🍋 예를 들면, 스타일이 많이 적용될 경우 인라인으로 클래스명이 너무나도 길어질 수 있다. (코드 가독성 저하) 이런 경우, 기존에 사용했던 styled-component나 emotion과 같은 css-in-js 라이브러리가 그리워지는데 이 둘을 모두 함께 사용할 수 있게 도와주는 오픈소스 라이브러리가 있다. 🍵 twin.macro (with. emotion) twin.macro의 깃허브 리드미를 살펴보면, 친절하게 각 환경에서 세팅하는 방법을 알려주고 있다. 그중에서 난 CRA 환경에서 emotion을 사용하여 개발 환경을 구축해보았다. styled-co..
tailwindcss 중복 클래스 줄이기 (@layer, @apply)
tailwindcss의 가장 큰 문제점은 스타일이 많이 들어가면, 태그에 클래스 이름이 너무나도 길어진다는 점이다. 이를 해소하기 위해서 여러 방법을 사용할 수 있겠지만, 여기서는 @layer와 @apply를 사용하여 중복 클래스를 글로벌하게 사용하는 법에 대해서 다룬다. tailwindcss를 설정하고 나서 기본적인 globals.css의 내용은 다음과 같을 것이다. @tailwind base; @tailwind components; @tailwind utilities; /* reset css https://meyerweb.com/eric/tools/css/reset/ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p..