반응형 웹은 단순히 화면 크기에 맞춰 줄이는 것만으로 완성되지 않습니다. 진짜 반응형 웹을 만들기 위해서는 화면 크기에 따라 레이아웃이 자연스럽게 재배치되고, 불필요한 요소를 숨기거나 보여주는 대응 전략이 필요합니다. 이번 글에서는 미디어쿼리를 활용하여 실제로 레이아웃을 어떻게 변화시키는지, 자주 쓰이는 실전 패턴들을 정리해보겠습니다.  반응형 웹이 뭔지 아직 헷갈린다면? 👉 아래의 글을 먼저 보고 오는 걸 추천합니다  [🎨CSS] 반응형 웹 시작하기 — viewport, 미디어쿼리, flex-wrap까지요즘 웹사이트는 PC, 태블릿, 모바일처럼 다양한 화면 크기에서 모두 자연스럽게 보이도록 설계해야 합니다. 이때 꼭 필요한 개념이 바로 반응형 웹(Responsive Web) 입니다. 반응형 웹을 제..

요즘 웹사이트는 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️⃣ 주..

이번 글에서는 Rc-Tree 라이브러리를 사용하여 메신저 내 직원 조직도를 트리 구조로 시각화하는 방법을 단계별로 알아보겠습니다. https://www.npmjs.com/package/rc-tree rc-treetree ui component for react. Latest version: 5.10.1, last published: 7 days ago. Start using rc-tree in your project by running `npm i rc-tree`. There are 654 other projects in the npm registry using rc-tree.www.npmjs.com 1️⃣ Rc-Tree 개념과 사용 방법`Rc-Tree`는 부모와 자식, 즉 폴더와 문서 같은 부모-자식 ..