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 기준 */}?..

: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; ..

안녕하세요 😊웹에서 텍스트를 강조할 때 흔히 자바스크립트를 이용해 애니메이션을 넣곤 합니다.하지만 요즘은 CSS만으로도 충분히 세련된 애니메이션 효과를 줄 수 있습니다.오늘은 초보자도 따라 할 수 있는 반짝이는 글자 애니메이션을 만들어 보겠습니다.📍 1. 기본 아이디어반짝이는 효과를 주기 위해서는 크게 두 가지 기법을 사용할 수 있습니다.linear-gradient + background-clip:text → 빛이 지나가는 효과text-shadow 애니메이션 → 글자 주위가 번쩍이는 효과이 두 가지를 조합하면 다양한 스타일의 반짝임을 표현할 수 있습니다.📍 2. 빛이 스쳐 지나가는 반짝임 Shiny Text.shine { font-size: 3rem; font-weight: bold; colo..

안녕하세요 😊이번 포스팅에서는 CSS Grid와 Flexbox를 “어떤 상황에서 무엇을 써야 하는지” 관점에서 깊게 풀어보겠습니다.두 기술은 모두 강력한 레이아웃 시스템이지만 목적이 다릅니다. 초보자 분들도 헷갈리지 않도록,개념 → 속성 → 실전 패턴 → 선택 체크리스트 → 자주 하는 실수 순서로 차근차근 정리 해보겠습니다.1) 핵심 요약이 아니라 “핵심 이해”: Grid는 2차원, Flex는 1차원Flexbox는 1차원(행 또는 열 한 방향) 정렬에 특화되어 있습니다. 버튼 그룹, 네비게이션 바, 카드 내부 정렬처럼 한 줄 안에서의 배치·정렬·간격 제어에 특히 강합니다.Grid는 2차원(행 + 열 동시) 레이아웃에 적합합니다. 페이지 전체 레이아웃, 대시보드, 잡지형 배치처럼 행과 열을 동시에 설계해..

안녕하세요 😊자바스크립트 없이도 CSS만으로 로딩 애니메이션을 충분히 만들 수 있습니다.아래 예제 4가지는 실무에서 바로 가져다 쓰기 좋도록 HTML 1줄 + CSS 몇 줄로 구성했습니다. 1) 기본 원형 스피너 (border 회전) .spinner { width: 40px; height: 40px; border: 3px solid #e9ecef; border-top-color: #1abc9c; border-radius: 50%; animation: spin 0.8s linear infinite;}@keyframes spin { to { transform: rotate(360deg); } }2) 점 3개 점멸 스피너.dots { display: inline-flex; gap: 6px; }.d..

안녕하세요 😊CSS에서 색상이나 폰트 크기 같은 값을 여러 군데서 반복해서 쓰다 보면,한 번 변경하려고 해도 모든 곳을 찾아 수정해야 해서 번거롭습니다.이럴 때 **CSS 변수(Custom Properties)**를 사용하면 유지보수가 훨씬 쉬워집니다.📍 1. CSS 변수란?CSS에서 값을 변수처럼 저장하고 재사용할 수 있는 기능--변수명 형식으로 선언, var(--변수명)으로 사용변수의 스코프(범위) 설정 가능📍 2. 기본 문법:root { --main-color: #4CAF50; --font-size-lg: 20px;}h1 { color: var(--main-color); font-size: var(--font-size-lg);}:root는 문서 전체에 변수를 적용하는 전역 범위변수명은 ..