jonbeo 님의 블로그

기존 **미디어 쿼리(@media)**는 브라우저 전체 뷰포트 크기를 기준으로 반응형 디자인을 적용합니다.하지만 컴포넌트 기반 UI(React, Vue, Angular)에서는 부모 컨테이너 크기에 따라 반응형 스타일이 필요합니다.이를 해결해주는 최신 기능이 바로 @container입니다.📌 1. 기본 문법 @container (min-width: 600px) { .card { flex-direction: row; }} 👉 부모 컨테이너의 너비가 600px 이상일 때 .card 스타일 적용📌 2. 컨테이너 선언컨테이너 쿼리를 쓰려면 부모 요소에 container-type을 지정해야 합니다. .wrapper { container-type: inline-size; /* width 기준 */}?..

데이터를 직관적으로 보여주려면 시각화 도구가 필요합니다.Chart.js는 가볍고 직관적인 API를 제공하여,막대 그래프, 선 그래프, 원형 차트, 레이더 차트 등 다양한 차트를 쉽게 구현할 수 있습니다.⚙️ 1. 설치 및 기본 세팅설치 npm install chart.jsHTML 예시 JS 예시 import { Chart } from "chart.js";const ctx = document.getElementById("myChart").getContext("2d");new Chart(ctx, { type: "bar", // 차트 타입 data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple"], datasets: [{ label: "..

는 HTML5에서 추가된 태그로, 픽셀 단위의 그래픽 처리를 지원합니다.자바스크립트와 함께 사용해야만 그림을 그릴 수 있습니다. const canvas = document.getElementById("myCanvas");const ctx = canvas.getContext("2d"); // 2D 컨텍스트⬛ 1. 사각형 그리기 // 채워진 사각형ctx.fillStyle = "blue";ctx.fillRect(50, 50, 100, 100);// 테두리 사각형ctx.strokeStyle = "red";ctx.strokeRect(200, 50, 100, 100);// 사각형 지우기ctx.clearRect(80, 80, 40, 40);⚪ 2. 원(원형) 그리기 ctx.beginPath();ctx.arc(150..

웹 접근성을 고려하지 않은 UI는 시각장애인, 키보드 사용자 등에게 큰 불편을 줍니다.이를 해결하기 위해 ARIA 속성과 포커스 제어를 올바르게 적용해야 합니다.이번 포스팅에서는 실무에서 가장 많이 쓰이는 세 가지 UI 패턴을 정리해보겠습니다.🪟 1. 모달(Dialog)문제점모달 열렸을 때 배경 요소까지 포커스가 이동스크린리더가 모달임을 인식하지 못함✅ 접근성 패턴 회원가입 정보를 입력해주세요. X 📌 포인트role="dialog" + aria-modal="true"모달 열릴 때 첫 번째 포커스 이동닫을 때 원래 버튼으로 포커스 복귀배경에는 aria-hidden="true" 적용⬇️ 2. 드롭다운 메뉴문제점div만으로 메뉴 구성 → 스크린리더 인식 불가키보드 화살표로 메뉴 이동 불가능✅ 접근성..

웹사이트의 성능은 곧 **사용자 경험(UX)**과 SEO 순위로 직결됩니다.Lighthouse는 크롬 개발자 도구에 내장되어 있으며, 성능을 수치화하고 구체적인 개선 방법까지 제안해 줍니다.🧩 1. Lighthouse 실행 방법크롬 브라우저 열기 → F12 (개발자 도구)상단 탭에서 Lighthouse 선택Performance / Accessibility / Best Practices / SEO / PWA 항목 선택Analyze page load 클릭 → 리포트 생성📌 또는 PageSpeed Insights에서 온라인으로도 테스트 가능📊 2. Lighthouse 주요 지표지표설명권장 기준FCP (First Contentful Paint)최초 콘텐츠 표시 시간1.8초 이내LCP (Largest Con..

애니메이션은 단순한 시각 효과를 넘어서 사용자 상호작용과 브랜드 아이덴티티를 표현하는 중요한 요소입니다.하지만 구현 방식에 따라 성능, 유지보수, 확장성에서 큰 차이가 발생합니다.🧩 1. CSS 애니메이션✅ 특징transition, @keyframes을 활용브라우저 최적화 지원 → GPU 가속 덕분에 부드럽게 동작간단한 효과에 적합 (페이드 인/아웃, 슬라이드 등)📌 예시: 버튼 호버 애니메이션 button { background: #007bff; transition: background 0.3s ease;}button:hover { background: #0056b3;}📌 예시: 로딩 애니메이션 @keyframes spin { to { transform: rotate(360deg); }}...

반응형 디자인은 하나의 코드로 다양한 화면 크기를 지원하는 방법입니다.사용자가 어떤 기기를 쓰든지, 최적화된 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. 모바일 퍼스트 전략기본 스타일 = 모바일 기준큰 화면(태블릿/..

웹사이트 속도가 느리면 사용자는 이탈하고, 검색엔진 노출 순위도 하락합니다.특히 모바일 환경에서는 1초의 속도 차이도 매우 치명적이죠.이번 포스팅에서는 프론트엔드 실무 기준으로 가장 많이 적용하는 성능 최적화 방법 10가지를 정리했습니다.🧠 1. 이미지 최적화방법설명✅ WebP, AVIF 사용JPEG, PNG보다 30~80% 더 가볍고 품질 유지✅ 이미지 리사이징실제 사용하는 사이즈만 업로드 (원본 X)✅ Lazy Loading아래에 있는 이미지들은 스크롤 시 로딩 (예: loading="lazy")✅ SVG 적극 활용아이콘, 로고는 SVG로! 🔧 2. CSS 최적화방법설명✅ CSS 파일 합치기불필요한 다중 요청 방지✅ Unused CSS 제거사용하지 않는 클래스를 제거 (PurgeCSS, Tailw..

안녕하세요 😊웹사이트에서 흔히 보이는 UI 요소 중 하나가바로 **모달 팝업(Popup)**입니다. 대부분의 팝업은 JavaScript로 구현되지만,HTML5에서는 아예 **전용 태그 **를 지원합니다!오늘은 태그의 기본 사용법과 실제 예제를초보자도 따라할 수 있게 정리해드릴게요 💡📍 1. 태그란?HTML5에서 새로 추가된 대화 상자(dialog) 전용 태그팝업 창처럼 화면 위에 뜨는 박스를 JavaScript 없이 생성 가능사용자에게 메시지를 보여주거나 확인/취소 등의 입력을 받을 때 사용📍 2. 기본 예제 이용약관에 동의하십니까? 닫기약관 보기 📌 주요 메서드show() – 비모달 팝업 (배경 클릭 가능)showModal() – 모달 팝업 (배경 클릭 불가)close() – 팝업 닫기..

Flexbox로 정렬을 잘 해놨는데...아이템이 많아지니까 한 줄에 너무 꽉 차서 깨지거나, 줄바꿈이 안 되던 경험 있으신가요?그럴 때 필요한 속성이 바로 **flex-wrap**입니다!자동 줄바꿈을 허용할지 말지, 이 속성이 정해줘요. ✅ 기본 문법.container { display: flex; flex-wrap: wrap;} 기본적으로 Flexbox는 한 줄에 모든 아이템을 우겨 넣으려고 해요그래서 너비가 넘쳐도 줄바꿈이 안 되고 깨지거나 뒤엉켜버립니다. 🧩 속성값 정리값설명nowrap기본값. 줄바꿈 안 됨. 한 줄에 전부 배치wrap자동 줄바꿈 허용 (다음 줄로 내려감)wrap-reverse줄바꿈은 되지만 아래에서 위로 쌓임 (드물게 사용) 🧪 실습 예시 1 2 3 4 5 이 코..