요즘 웹사이트는 PC, 태블릿, 모바일처럼 다양한 화면 크기에서 모두 자연스럽게 보이도록 설계해야 합니다. 이때 꼭 필요한 개념이 바로 반응형 웹(Responsive Web) 입니다. 반응형 웹을 제대로 만들기 위해서는 단순히 화면 크기에 맞춰 크기만 조정하는 게 아니라 레이아웃이 유연하게 변하고 요소들이 자연스럽게 재배치되도록 설계해야 합니다. 이 글에서는 반응형 웹을 구성하는 핵심 요소인 viewport 설정, 미디어쿼리(media query), flex-wrap 같은 기본 기술들을 차근차근 정리해보겠습니다.  1️⃣ 반응형 웹(Responsive Web)이란?반응형 웹이란 하나의 HTML 코드로 다양한 화면 크기(PC, 태블릿, 모바일)에 자동으로 대응하는 웹 디자인 형식을 말합니다. 핵심은 한 번..

레이아웃을 구성하다 보면 콘텐츠가 부모 요소의 크기를 넘어버리는 상황을 자주 만나게 됩니다. 이때 요소가 넘치는 걸 어떻게 처리할지를 결정하는 속성이 overflow입니다. 이 글에서는 overflow 기본 개념부터 visible, hidden, scroll, auto까지 하나씩 정리해보겠습니다.  1️⃣ overflow란?`overflow`는 요소 안에 콘텐츠가 요소 크기를 초과했을 때 그 초과된 부분을 어떻게 처리할지를 결정하는 CSS 속성입니다. 기본적으로 모든 요소는 콘텐츠를 다 담아야 하지만 부모 요소 크기보다 내용이 커질 경우 `overflow` 설정에 따라 1)초과된 내용을 그냥 보여줄지 2)잘라버릴지 3)스크롤을 만들어줄지 4)상황에 따라 자동 처리할지를 결정할 수 있습니다. 속성 이름  ..

CSS에서 요소를 겹칠 때 어떤 요소가 위로 올라올지를 결정하는 것이 z-index입니다. 하지만 실제 레이아웃에서는 단순히 z-index 숫자만 비교하는 게 아니라 stacking context라는 보이지 않는 독립 그룹 구조까지 함께 이해해야 정확한 결과를 만들 수 있습니다.이 글에서는 z-index 기본 개념과, 실전에서 반드시 알아야 할 stacking context까지 한 번에 정리해보겠습니다. 📌 position이 아직 헷갈린다면 z-index와 stacking context을 배우기 전에 이 글부터 보고 오는 걸 추천할게요! 😊 [🎨CSS] CSS position 속성 총정리display 속성으로 레이아웃을 구성하는 방법을 익힌 뒤는 요소를 세밀하게 배치하고 조정할 수 있는 positi..

display 속성으로 레이아웃을 구성하는 방법을 익힌 뒤는 요소를 세밀하게 배치하고 조정할 수 있는 position 속성을 제대로 이해해야 합니다. 이 글에서는 position 속성의 기본 개념부터 static, relative, absolute, fixed, sticky 각각의 차이와 특징을 살펴보겠습니다.  📌 display가 아직 헷갈린다면 position을 배우기 전에 이 글부터 보고 오는 걸 추천할게요! 😊  [🎨CSS] CSS display 속성 총정리CSS는 기본 개념을 제대로 정리하지 않으면 나중에 flex나 grid 같은 레이아웃을 다룰 때 계속 헷갈리게 됩니다. 다르게 말하면 한 번만 제대로 정리하면 그 이후로는 어떤 레이아웃도 훨씬 쉽게 이sim-plism.tistory.com..

CSS는 기본 개념을 제대로 정리하지 않으면 flex나 grid 같은 레이아웃을 다룰 때 계속 헷갈리게 됩니다. 다르게 말하면 한 번만 제대로 정리하면 그 이후로는 어떤 레이아웃도 훨씬 쉽게 이해하고 다룰 수 있습니다. 이 글에서는 display 속성의 기본부터 flex와 grid 같은 레이아웃 방식까지 한 번에 깔끔하게 정리해보겠습니다.  1️⃣ display란 무엇인가?`display` 속성은 HTML 요소가 페이지에서 어떻게 보일지를 결정하는 CSS 속성입니다. 즉 이 요소를 박스처럼 보이게 할지, 줄 안에 끼워 넣을지 등을 설정하는 것이죠. HTML 태그마다 기본적으로 지정된 display 값이 있지만 우리는 CSS display 속성을 이용하여 기본 동작을 마음대로 바꿀 수 있습니다. 2️⃣ 주..