소소한 일상과 순간들을 기록하며, 지금 이 순간을 남겨두고 언젠가 다시 돌아볼 개인 저장 블로그.
-
recentPost
-
archive
-
recentComment
-
personalProject
-
Pages
전체 글
소소한 일상과 순간들을 기록하며, 지금 이 순간을 남겨두고 언젠가 다시 돌아볼 개인 저장 블로그.
32
-
배움지식
CSS 박스 모델 8 : flex/grid에서는 gap과 margin 중 무엇을 써야 할까?
flex나 grid를 쓰기 시작하면 margin보다 더 자주 보게 되는 속성이 있습니다.바로 gap입니다.그런데 여기서 이런 생각이 들 수 있습니다.👉 "간격 주는 거면 margin 쓰면 되는 거 아닌가?"실제로 gap과 margin은 둘 다 간격을 만드는 데 쓰이지만, 역할과 쓰는 위치가 다릅니다.이번 글에서는 flex/grid 실무 기준으로 gap과 margin을 어떻게 구분해서 쓰는지 쉽게 정리해보겠습니다.1. 가장 큰 차이 한 줄 정리👉 gap = 부모가 자식들 사이 간격을 관리👉 margin = 각 요소가 자기 바깥 간격을 가짐이 한 줄이 핵심입니다.2. 이미지로 먼저 이해하기gap은 부모 컨테이너가 자식 요소들 사이 간격을 한 번에 정리해줍니다.반면 margin은 각 요소마다 따로 간격을..
2026. 4. 14. -
배움지식
CSS 박스 모델 7 : margin vs padding 언제 써야 할까?
CSS를 공부하다 보면 margin과 padding이 계속 헷갈립니다.둘 다 “여백”처럼 보이지만, 실제로는 완전히 다른 역할을 합니다.👉 "그래서 언제 margin을 쓰고, 언제 padding을 써야 할까?"이번 글에서는 실무 기준으로 구분하는 방법을 정리해보겠습니다.1. 가장 큰 차이 한 줄 정리👉 margin = 바깥 간격👉 padding = 안쪽 공간이 한 줄이 핵심입니다.2. 이미지로 먼저 이해하기padding은 박스 안쪽 공간을 만들고, margin은 박스 바깥 간격을 만듭니다.3. 직접 비교해보기 View Source margin 사용padding 사용 margin paddingmargin은 요소와 요소 사이 간격을 만들고,padding은 요소 내부 공간을 만듭니다.4. 언제 ma..
2026. 4. 14. -
배움지식
CSS 박스 모델 6 : 왜 box-sizing: border-box를 써야 할까?
지금까지 CSS 박스 모델과 margin collapse를 차근차근 살펴봤습니다.그런데 실제로 레이아웃을 만들다 보면 또 하나 자주 만나게 되는 것이 있습니다.👉 "분명 width를 200px로 줬는데, 왜 실제 박스는 더 커질까?"이때 꼭 알아야 하는 것이 바로 box-sizing입니다.이번 글에서는 content-box와 border-box의 차이, 그리고 왜 실무에서는 border-box를 많이 쓰는지를 쉽게 정리해보겠습니다.1. width를 줬는데 왜 박스가 더 커질까?많은 분들이 이렇게 생각합니다.👉 width: 200px을 주면 박스 전체 너비가 200px이겠지그런데 기본 설정에서는 꼭 그렇지 않습니다.CSS의 기본 box-sizing은 content-box이기 때문입니다.2. conten..
2026. 4. 14. -
배움지식
CSS 박스 모델 5 : flex / grid에서는 왜 margin collapse가 안 생길까?
이전 글에서는 margin collapse가 왜 존재하는지 알아봤습니다.그런데 실제로 CSS를 쓰다 보면 이상한 점이 하나 있습니다.👉 "flex에서는 왜 margin collapse가 안 생기지?"분명 같은 margin인데, 어떤 경우에는 겹치고 어떤 경우에는 겹치지 않습니다.이번 글에서는 이 차이를 쉽게 이해해보겠습니다.1. 같은 margin인데 왜 다르게 동작할까?먼저 비교부터 해보겠습니다.왼쪽은 일반 block 레이아웃이고, 오른쪽은 flex 레이아웃입니다.👉 block에서는 margin collapse 발생👉 flex에서는 margin collapse 발생 안 함2. 이유는 '레이아웃 방식' 때문이다핵심은 이것입니다.👉 flex는 완전히 다른 레이아웃 시스템이다우리가 지금까지 본 marg..
2026. 4. 14. -
배움지식
CSS 박스 모델 4 : margin collapse는 왜 존재할까?
이전 글에서 margin collapse가 언제 생기고 안 생기는지 정리했습니다.그런데 여기서 한 가지 의문이 남습니다.👉 "이런 이상한 규칙을 왜 만들었을까?"margin이 더해지지 않고 겹치는 동작은 처음 보면 비직관적입니다.이번 글에서는 margin collapse가 왜 존재하는지를 쉽게 이해해보겠습니다. 1. 이거 불편한 기능 아닌가?처음 margin collapse를 보면 이런 생각이 듭니다.👉 그냥 더하면 되는 거 아닌가?👉 왜 굳이 겹치게 만들었지?실제로 초보자 입장에서는 불편하게 느껴지는 것이 맞습니다.하지만 이 기능은 CSS가 만들어질 때 특정 목적을 가지고 설계된 규칙입니다.2. margin의 원래 목적margin은 단순히 "공간"이 아닙니다.👉 요소와 요소 사이의 간격을 만드는..
2026. 4. 14. -
배움지식
CSS 박스 모델 3 : margin collapse는 언제 생기고 언제 안 생길까?
이전 글에서 부모-자식 margin collapse를 보면 꽤 헷갈립니다.분명 margin을 줬는데, 자식이 아니라 부모가 움직이는 것처럼 보이기 때문입니다.그래서 이런 생각이 듭니다.👉 "그럼 margin collapse는 언제 생기는 걸까?"이번 글에서는 margin collapse가 생기는 경우 / 안 생기는 경우를 한 번에 정리해보겠습니다. 1. margin collapse가 생기는 경우핵심은 간단합니다.👉 세로 margin이 서로 붙어 있으면 발생합니다.① 형제 요소 사이위 요소의 margin-bottom과 아래 요소의 margin-top이 만나면, 두 값은 더해지지 않고 하나로 합쳐집니다. View Source 첫 번째 박스 (margin-bottom: 20px)두 번째 박스 (margi..
2026. 4. 14. -
배움지식
CSS 박스 모델 2 : 부모-자식 margin은 왜 같이 움직일까?
CSS를 공부하다 보면 margin이 생각대로 동작하지 않는 순간이 있습니다.특히 자식 요소에 margin을 줬는데, 자식이 내려가는 것이 아니라 부모 전체가 움직이는 것처럼 보이는 경우가 있습니다.이건 CSS 초보자가 가장 많이 헷갈리는 부분 중 하나입니다.이거 이상하지 않나요?자식 요소에 margin-top: 40px을 주면, 보통 이렇게 생각합니다.👉 자식이 부모 안에서 아래로 40px 내려가겠지그런데 실제로는 이렇게 보이는 경우가 있습니다.👉 자식이 아니라 부모 전체가 위에서 떨어진 것처럼 보임처음 보면 “왜 이렇게 되지?”라는 생각이 듭니다.이미지로 먼저 이해하기아래 이미지를 보면 차이를 한 번에 이해할 수 있습니다.왼쪽은 padding을 사용한 경우이고, 오른쪽은 margin을 사용한 경우..
2026. 4. 14. -
배움지식
CSS 박스 모델 1 : 쉽게 이해하기 (margin collapse + box-sizing까지)
CSS를 공부하다 보면 margin, padding, border는 많이 보게 됩니다. 그런데 실제로 박스 사이 간격이 어떻게 계산되는지는 처음에 꽤 헷갈립니다. 특히 margin-bottom: 20px과 margin-top: 30px이 만나면 왜 50px이 아니라 30px이 되는지 궁금해하는 분들이 많습니다. 이번 글에서는 CSS 박스 모델을 쉽게 정리하고, margin collapse와 box-sizing까지 한 번에 이해해보겠습니다. CSS 박스 모델이란?HTML 요소는 하나의 박스라고 생각하면 쉽습니다. 이 박스는 안쪽부터 바깥쪽으로 이렇게 구성됩니다.content → padding → border → margin- content: 글자나 이미지가 들어가는 실제 내용- padding: 내용과 테두..
2026. 4. 14.