jonbeo 님의 블로그

반응형 디자인은 하나의 코드로 다양한 화면 크기를 지원하는 방법입니다.사용자가 어떤 기기를 쓰든지, 최적화된 UI/UX를 제공할 수 있도록 만드는 것이 목표입니다.🧩 1. 미디어쿼리(Media Query)📌 기본 문법 @media (조건) { /* 적용할 CSS */}예제 – 화면 크기에 따른 스타일 변경 .container { width: 100%;}@media (min-width: 768px) { .container { width: 750px; }}@media (min-width: 1200px) { .container { width: 1140px; }} 👉 화면 크기에 따라 유동적으로 레이아웃 변경 가능📱 2. 모바일 퍼스트 전략기본 스타일 = 모바일 기준큰 화면(태블릿/..

웹 접근성은 단순히 alt 속성 넣고, 시맨틱 태그를 쓰는 수준에서 끝나지 않습니다.실제 프로젝트에서는 모달, 드롭다운, 탭, 다크모드 등 동적 UI 컴포넌트에서 접근성 문제가 자주 발생합니다.이번 포스팅에서는 실무에서 특히 중요한 심화 접근성 주제 3가지를 다뤄봅니다.🧠 1. ARIA 속성 활용하기✅ ARIA란?Accessible Rich Internet Applications의 약자HTML 태그만으로 의미를 전달하기 어려운 경우, **보조 기술(스크린리더 등)**에 추가 정보를 제공📌 자주 쓰는 ARIA 속성속성설명aria-label스크린리더용 레이블 제공aria-hidden="true"보조 기술에서 숨김 처리aria-expanded="true/false"드롭다운, 아코디언의 열림 상태 표시ari..

안녕하세요 😊React에서 검색 기능이나 필터링 기능을 만들다 보면, 입력할 때마다 화면이 순간적으로 버벅거리는 경험을 하신 적 있으실 겁니다.특히 데이터가 많거나 무거운 연산을 수행할 경우, 사용자가 타이핑하는 속도를 UI가 따라가지 못해 불편해질 수 있습니다. 이때 React가 제공하는 useDeferredValue Hook을 사용하면 문제를 쉽게 해결할 수 있습니다.📍 1. useDeferredValue란?useDeferredValue는 값 업데이트를 지연 처리하여, 사용자 인터랙션(입력)은 바로 반영되지만 무거운 연산은 조금 늦게 처리되도록 도와주는 Hook입니다.즉, UI 우선 / 연산 지연이라는 전략을 통해 UX를 개선합니다.📍 2. 기본 사용법 import { useState, useD..