jonbeo 님의 블로그

position – static, relative, absolute, fixed, sticky 차이 쉽게 이해하기

CSS에서 레이아웃을 잡을 때 가장 많이 쓰는 속성이 바로 position입니다.하지만 static, relative, absolute, fixed, sticky는처음에는 헷갈릴 수밖에 없는 개념입니다.이번 포스팅에서는 각 position의 의미, 차이점, 예제를 통해초보자도 확실히 이해할 수 있도록 정리해드리겠습니다.✅ position이란?HTML 요소의 위치를 어떻게 배치할지를 지정하는 속성입니다.다른 요소들과의 관계, 부모 요소 기준, 스크롤 여부 등에서레이아웃에 큰 영향을 미칩니다.🔹 1. static – 기본 위치 (기본값) div { position: static;}아무 position도 지정하지 않으면 기본이 statictop, left, right, bottom 속성이 무시됨문서 흐름에..

다크모드는 이제 선택이 아니라 기본 옵션이 되었습니다.스마트폰, OS, 웹브라우저까지 모두 다크모드를 지원하죠. ✅ 이번 포스팅에서는CSS 변수(:root)미디어 쿼리(prefers-color-scheme)JS 토글 버튼을 조합해 실무형 다크모드 시스템을 완성해보겠습니다 ⚙️🧱 1. CSS 변수 기반 색상 시스템 만들기 :root { --bg-color: #ffffff; --text-color: #222222; --accent-color: #007bff;}body { background-color: var(--bg-color); color: var(--text-color);}a { color: var(--accent-color);} 📌 장점색상 교체가 단 1줄로 가능다크모드뿐 아니라 다른 ..

사용자는 마우스뿐 아니라 키보드(Tab, Enter, Space),심지어 스크린리더로도 웹사이트를 탐색합니다. 하지만 HTML 구조가 잘못되어 있거나,포커스가 사라지는 UX를 제공한다면 접근성 점수는 0점 😭 이번 포스팅에서는 실무에서 자주 쓰이는키보드 네비게이션 UX 설계 원칙과 실무 예제를 정리합니다.⌨️ 1. Tab 키 순서 제어모든 인터랙티브 요소는 기본적으로 Tab 키로 접근 가능합니다. 로그인회원가입 📌 Tab 순서는 HTML 구조 순서에 따릅니다.따라서 DOM 순서 = 시각적 순서로 유지하는 것이 중요합니다.⚙️ tabindex 속성 포커스 가능프로그램만 포커스 가능 값 설명 0Tab 순서에 포함됨-1Tab으로는 접근 불가 (스크립트로만 접근)📌 tabindex="0"은 커스텀 UI ..

CSS Flexbox는 일차원(1D) 정렬,CSS Grid는 이차원(2D) 배치를 담당합니다. ✅ Grid → 페이지 전체 레이아웃✅ Flex → 내부 구성 & 정렬 이 두 가지를 적절히 섞으면“반응형 + 정렬 + 가독성 + 유지보수성”을 모두 잡을 수 있습니다 💪📐 1. Grid로 전체 구조, Flex로 내부 정렬 Logo Menu Main Content Footer .layout { display: grid; grid-template-rows: auto 1fr auto; height: 100vh;}.header-inner { display: flex; justify-content: space-between; align-items: center..

요즘 웹사이트는 모바일 사용률이 70% 이상입니다.그래서 이제는 “데스크탑 기준으로 줄여가는 방식”이 아니라👉 모바일 기준으로 확장해가는 설계 (Mobile First) 가 표준입니다.🌱 1. 모바일 퍼스트란?모바일 퍼스트(Mobile First) 는 디자인과 개발을 “가장 작은 화면”에서 시작하여,점점 화면이 커질 때마다 스타일을 확장하는 접근 방식입니다. 📌 핵심 개념:❌ “큰 화면을 줄이는 것” → ✅ “작은 화면을 확장하는 것”📏 2. 기본 단위 설계 – 뷰포트 기준 html { font-size: 16px; /* 기준 단위 */}.container { width: 100%; max-width: 1200px; margin: 0 auto;} 📌 모바일에서는 항상 100% 기반 레이아..

CSS Grid는 2차원(행 + 열) 레이아웃을 완벽하게 제어할 수 있는 강력한 도구입니다.이 포스팅에서는 단순한 정렬을 넘어서, 실무에서 자주 쓰는 패턴 예시를 소개해봅니다.🧱 1. 기본 레이아웃 패턴 (Header / Main / Aside / Footer) Header Sidebar Main Footer​ .grid-layout { display: grid; grid-template-areas: "header header" "aside main" "footer footer"; grid-template-columns: 200px 1fr; grid-template-rows: 80px 1fr 60px; gap: 10px;}header { grid-area: header;..

기존 **미디어 쿼리(@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 기준 */}?..

:has()는 흔히 **“부모 선택자”**로 불리며, CSS에서 드디어 상위 요소를 조건부로 스타일링할 수 있게 해줍니다.기존에는 순수 CSS만으로 불가능했던 패턴을 해결해주는 강력한 기능입니다.📌 1. 기본 문법 A:has(B) { ... } 👉 A 요소가 B를 포함하고 있다면 스타일 적용📌 2. 폼 검증 스타일링 /* input이 비어있으면 빨간 테두리 */form:has(input:invalid) { border: 2px solid red;} 📌 기존에는 JS로 처리해야 했던 폼 상태 스타일링이 가능📌 3. 드롭다운 메뉴 제어 .dropdown:has(:hover) .menu { display: block;} 📌 부모에 :hover가 있으면 자식 메뉴 표시📌 4. 카드 UI – 버튼..

데이터를 직관적으로 보여주려면 시각화 도구가 필요합니다.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..