mirabo01 님의 블로그

한 번쯤 이런 상황 겪어봤을 거다 👇“z-index: 9999를 줬는데도 왜 안 올라오지?”이게 바로 단순한 숫자 문제가 아니라‘쌓임 맥락(Stacking Context)’ 때문이다.이번 글에서는 z-index의 동작 원리부터브라우저가 요소를 어떤 순서로 겹치는지 완벽히 이해하도록 정리했다.💡 1. z-index란 무엇인가?“요소가 화면의 앞/뒤 중 어디에 위치할지를 결정하는 속성”HTML 요소들은 화면 위에 층(layer) 처럼 쌓인다.이때 어떤 요소가 위로, 어떤 요소가 아래로 갈지를 정하는 것이 z-index..box1 { position: relative; z-index: 1; } .box2 { position: relative; z-index: 2; } ✅ .box2가 .box..

Flex, Grid까지 배웠다면 이제 요소의 “정확한 위치”를 컨트롤하는 기술이 필요하다.바로 그 역할을 하는 게 position 이다.버튼을 오른쪽 아래에 고정시키고 싶다거나,배지 뱃지를 아이콘 오른쪽 위에 살짝 띄우고 싶거나,스크롤해도 계속 붙어 있는 헤더를 만들고 싶다면position: relative / absolute / fixed / sticky 를 이해해야 한다.이번 글에서 이 네 가지를 한 번에 정리해보자.💡 1. position이 하는 일 한 줄 정리“position은 요소를 어디를 기준으로 어떻게 배치할지 결정하는 속성이다.”기본값은 static이고, 나머지가 우리가 흔히 쓰는 네 가지다.position: static; /* 기본값 */ position: relative; posi..

최근 UI 트렌드에서 빠질 수 없는 키워드가 바로 Glassmorphism(글래스모피즘) 이다.마치 유리판 위에 요소가 떠 있는 듯한 반투명 + 블러 효과로,현대적이고 고급스러운 웹 디자인을 완성할 수 있다.이번 글에서는 CSS만으로 구현 가능한 글래스모피즘의 핵심 개념부터실전 예제와 반응형 적용법까지 모두 정리했다.💡 1. 글래스모피즘(Glassmorphism)이란?“반투명한 유리 질감과 부드러운 블러 효과를 결합한 디자인 스타일”글래스모피즘은 Apple, Windows, macOS, iOS 등대부분의 최신 UI에서 사용되는 시각적 트렌드다.✅ 핵심 특징반투명 배경 (rgba or hsla)뒷배경 흐림 효과 (backdrop-filter: blur)부드러운 그림자 (box-shadow)은은한 경계선 ..

이전까지의 CSS는 “하드코딩된 색상과 크기”로 구성되어 있었다.하지만 지금의 CSS는 변수(Variable) 를 통해테마 변경, 유지보수, 다크모드 지원까지 손쉽게 구현할 수 있다. 이번 글에서는 CSS 변수의 문법, 실무 활용법,그리고 다크모드(Dark Mode) 구현까지 단계별로 정리했다. 💡 1. CSS 변수(Variable)란? “반복되는 값을 변수로 선언해 어디서든 재사용할 수 있는 기능” 예전에는 색상이나 폰트 크기를 매번 하드코딩했지만 👇 button { background: #007bff; } 이제는 변수로 선언하고 사용할 수 있다 👇 :root { --primary-color: #007bff; } button { background: var(--primary-c..

웹사이트가 단순히 ‘보여주는 공간’이 아니라‘사용자와 상호작용하는 공간’으로 바뀌는 핵심 기술이 바로 CSS 애니메이션이다. 이번 글에서는 트랜지션(transition) 과 애니메이션(animation) 의 차이부터버튼 호버 효과, 로딩 스피너, 페이드인 효과 등실무에서 자주 쓰이는 예제 중심으로 완벽 정리했다. 💡 1. 트랜지션(transition) vs 애니메이션(animation) 구분 트랜지션 애니메이션 정의 상태 변화에 따른 자연스러운 전환 시간에 따라 반복적으로 변하는 동작 트리거 이벤트 발생 시 (hover, focus 등) 자동 또는 반복 실행 가능 선언 방식 transition: 속성 시간; @keyframes 정의 후 animation으로 적용 예시 버튼에 마우스를 ..

스마트폰, 태블릿, 데스크톱…모든 디바이스에서 자연스럽게 보이는 웹을 만드는 기술,그게 바로 반응형 웹 디자인(Responsive Web Design) 이다. 이번 글에서는 CSS 미디어쿼리(Media Query) 의 핵심 개념부터그리드(Grid)와 플렉스(Flex)를 활용한 실전 반응형 설계법까지단계별로 완전히 정리했다. 💡 1. 반응형 웹 디자인이란? “하나의 웹페이지가 다양한 화면 크기에 맞춰 자동으로 레이아웃을 바꾸는 기술” 예전에는 모바일용, PC용 페이지를 따로 만들었다.하지만 지금은 하나의 HTML로 다양한 기기를 대응하는 시대다. ✅ 반응형의 핵심 요소 유연한 레이아웃 (Flexible Layout) 유동적인 이미지 (Fluid Images) 미디어쿼리 (Media Query) ..

Flexbox로 가로·세로 정렬이 쉬워졌지만,Grid Layout은 그 이상의 세계를 열었다.이번 글에서는 CSS Grid의 핵심 문법과 실전 활용법을한눈에 이해할 수 있도록 정리했다.Grid를 마스터하면, 디자인 툴처럼 정교한 웹 레이아웃을 코드로 구현할 수 있다.💡 1. CSS Grid란?“Grid는 행(Row)과 열(Column) 기반으로 요소를 배치하는 2차원 레이아웃 시스템이다.”Flexbox는 한 줄(row 또는 column) 정렬에 탁월하지만,Grid는 행과 열을 동시에 제어할 수 있다.✅ 즉,웹 전체 구조 설계대시보드, 포털, 미디어 페이지 등정교한 배치에 적합하다.🧱 2. 기본 구조 1 2 3 4 .grid-container { display: grid; gri..

예전엔 박스를 가로 정렬하려면 float, inline-block, position 등을 조합해야 했다.하지만 이제는 단 한 줄로 가능하다 👇display: flex; 이번 글에서는 Flexbox(플렉스박스) 의 핵심 개념부터정렬, 배치, 간격, 비율 조절까지 실무 중심 예제로 완벽 정리한다.💡 1. Flexbox란?“Flexbox는 요소를 가로·세로로 유연하게 정렬하기 위한 CSS 레이아웃 시스템이다.”기존 레이아웃 문제들:가운데 정렬이 복잡함요소 크기가 제각각일 때 간격이 어긋남반응형 레이아웃 구성 어려움💬 Flexbox는 이런 문제를 한 번에 해결한다.🧱 2. 기본 구조Flexbox는 부모(container) 와 자식(item) 구조로 동작한다. 1 2 3 .container {..

CSS의 본질은 박스를 다루는 기술이다.텍스트, 이미지, 버튼, 섹션 — 전부 하나의 ‘박스’로 구성되어 있다.이번 글에서는 박스 모델(Box Model) 의 개념부터margin, padding, border의 관계, 그리고 실무에서의 레이아웃 활용법까지한눈에 이해할 수 있도록 정리했다.💡 1. 박스 모델(Box Model)이란?“모든 HTML 요소는 눈에 보이지 않아도 하나의 상자(Box)다.”브라우저는 HTML 요소를 박스 형태의 레이어로 렌더링한다.이 박스는 네 부분으로 구성된다 👇┌─────────────────────────────┐ ← margin (바깥 여백) │ ┌─────────────────────────┐ │ │ │ border (테두리) │ │ │ │ ┌──────..

HTML은 웹의 구조,CSS는 그 구조를 꾸미는 언어,그리고 “선택자(selector)”는 그 둘을 잇는 다리다.이번 글에서는 가장 기초적인 태그 선택자부터,실무에서 자주 쓰이는 고급 선택자와 가상 클래스까지CSS 선택자 시스템의 모든 것을 단계별로 정리한다.💡 1. CSS 선택자가 중요한 이유“CSS의 80%는 ‘무엇을 선택하느냐’로 결정된다.”CSS 선택자는 스타일을 적용할 대상(HTML 요소) 을 지정한다.즉, 선택자를 잘 이해하면 HTML 구조가 커져도 효율적으로 스타일링할 수 있다.🧱 2. 기본 선택자 3종 — CSS의 출발점선택자 문법 예시 설명태그 선택자tagp { color: blue; }특정 HTML 태그 전체에 적용클래스 선택자.classname.title { font-weight:..