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줄로 가능다크모드뿐 아니라 다른 ..

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 – 버튼..

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

CSS로 레이아웃을 구성할 때 가장 많이 사용하는 두 가지 방법이 바로 Flexbox와 Grid입니다.처음에는 비슷해 보여도, 사용하는 목적과 상황에 따라 완전히 다른 결과를 만들어냅니다.이번 포스팅에서는 ✅차이점 ✅사용 시기 ✅실무 예제 ✅추천 사용처까지 한 번에 정리해 보겠습니다.🔍 1. 기본 개념 비교 구분 Flexbox Grid 🎯 목적1차원 레이아웃 (row 또는 column)2차원 레이아웃 (row + column)📐 구성주축(main axis) 기준 정렬행과 열 기준 배치🧲 정렬요소 간 공간 배분, 정렬정확한 위치 지정 및 정렬 가능🧩 유연성요소 크기 자동 조정격자 기반 정확한 레이아웃 💡 2. 언제 Flexbox를 사용할까?Flex는 다음과 같은 상황에서 강력한 효과를 발휘합..

안녕하세요 😊웹 개발에서 요소에 움직임을 줄 때 가장 많이 쓰는 기능이 바로 **트랜지션(transition)**과 **애니메이션(animation)**입니다.두 기능 모두 CSS만으로 멋진 효과를 낼 수 있지만, 헷갈리기 쉽습니다.오늘은 트랜지션과 애니메이션의 차이를 초보자도 쉽게 이해할 수 있도록 정리하고,실무에서 어떻게 활용하면 좋은지 예제와 함께 소개하겠습니다.📍 1. CSS 트랜지션(transition)상태 변화가 있을 때만 실행마우스를 올리거나, 클래스를 추가·제거할 때 동작짧고 단순한 효과에 적합예시: 버튼에 hover 시 색상 변경 button { background-color: #2196f3; color: #fff; padding: 10px 20px; border: none; ..