LogoSEO Jing
  • All Posts
  • SEO Jing
  • KD Team
  • CLab CoreTeam
  • Study

Contact Me

© 2026 SEOJing. All rights reserved.

프론트엔드스터디CSS박스모델PositionFlexbox

프론트엔드 스터디 대면 4주차: 박스 모델 실전, Position과 Flexbox

2026년 4월 10일·15분 읽기

1. 저번 주 복습

지난주에는 CSS의 본격적인 스타일링에 들어갔습니다. 글꼴과 색상을 제어하고, 인라인과 블록 요소의 차이, 그리고 프론트엔드 초심자가 가장 먼저 부딪히는 벽인 박스 모델을 배웠습니다. 핵심만 빠르게 짚어보겠습니다.

폰트와 색상

  • font-family: 쉼표로 여러 폰트를 나열하면 앞에서부터 순서대로 사용 가능한 폰트를 적용합니다. 마지막에 sans-serif 같은 일반 패밀리를 넣는 것이 관례입니다.
  • 색상 표기법: 키워드(red), Hex(#FF5733), RGB(rgb(255, 87, 51)), HSL(hsl(11, 100%, 60%)) 등 다양한 방식으로 표현합니다.

인라인 vs 블록 vs 인라인 블록

  • 인라인(Inline): 콘텐츠 크기만큼만 차지, width/height 무시, 상하 margin 무시
  • 블록(Block): 한 줄 전체를 차지, width/height/margin 모두 적용
  • 인라인 블록(Inline-block): 나란히 배치되면서 width/height/margin 모두 적용

박스 모델

  • 안쪽부터: Content → Padding → Border → Margin
  • box-sizing: content-box(기본값): width는 콘텐츠 영역만 의미, padding과 border가 추가로 더해짐
  • box-sizing: border-box: width 안에 padding과 border까지 포함, 현대 CSS의 필수 설정
css
/* content-box: width(200) + padding×2(40) + border×2(10) = 실제 250px */
.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

/* border-box: 실제 너비 200px 고정, 콘텐츠 영역 = 200 - 40 - 10 = 150px */
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

학습 자료에서 다룬 추가 개념

3주차 학습 자료에서 강의 외 개념들을 꽤 많이 다뤘습니다. 중요한 것들을 다시 짚어보겠습니다.

  • px, em, rem 단위: px은 고정값, em은 부모 font-size 기준, rem은 루트(<html>) font-size 기준입니다. 실무에서는 rem을 기본으로 사용하고, px은 1~2px 같은 미세한 값에만 씁니다. em은 중첩이 깊어지면 계산이 복잡해지므로 주의해야 합니다.
  • 마진 겹침(Margin Collapsing): 수직으로 인접한 마진이 합산되지 않고 큰 값만 적용되는 현상입니다. 인접 형제 요소, 부모-자식(padding/border 없을 때), 빈 블록 요소에서 발생합니다. 부모에 padding, border, 또는 overflow: hidden을 적용하면 방지할 수 있습니다.
  • CSS 리셋과 Normalize: 브라우저마다 기본 스타일이 다릅니다. Reset은 전부 제거하고 백지에서 시작, Normalize는 차이만 통일합니다. *, *::before, *::after { box-sizing: border-box; }는 거의 모든 프로젝트의 첫 줄입니다.
  • 가상 요소 (::before, ::after): HTML 없이 장식용 콘텐츠를 삽입합니다. content 속성이 필수이며, 빈 장식이라도 content: ""를 반드시 넣어야 합니다. 중요한 콘텐츠는 HTML에, 장식은 가상 요소에 작성합니다.
  • BFC (Block Formatting Context): "독립된 레이아웃 영역"입니다. 마진 겹침은 같은 BFC 안에서만 발생하므로, display: flow-root나 overflow: hidden으로 새 BFC를 만들면 겹침이 차단됩니다.
  • CSS 상속: 텍스트 관련 속성(color, 등)은 부모에서 자식으로 자동 상속되지만, 레이아웃 관련 속성(, , 등)은 상속되지 않습니다. , , 키워드로 상속 동작을 제어할 수 있습니다.

2. 저번 주 과제 정답 및 풀이

인증 미션 과제

Q1. box-sizing: content-box(기본값) 상태에서 width: 300px, padding: 20px, border: 10px solid black을 준 요소의 실제 화면 너비는 몇 px인가요? 직접 계산 과정을 쓰세요.

정답: 360px

content-box에서는 width가 콘텐츠 영역만을 의미합니다. padding과 border가 바깥쪽으로 추가됩니다.

  • 콘텐츠 영역: 300px
  • 좌우 패딩: 20px × 2 = 40px
  • 좌우 보더: 10px × 2 = 20px
  • 실제 화면 너비: 300 + 40 + 20 = 360px

흔한 오답 패턴

padding이나 border 중 하나만 더하거나, 한쪽 방향만 계산해 320px, 340px로 답하는 경우가 많습니다. 좌우 양쪽을 모두 더해야 한다는 점을 기억하세요.

Q2. 같은 요소에 box-sizing: border-box를 적용하면 실제 화면 너비와 콘텐츠 영역 너비는 각각 몇 px가 되나요? 직접 계산하세요.

정답: 실제 화면 너비 300px, 콘텐츠 영역 240px

border-box에서는 width: 300px 안에 padding과 border가 포함됩니다.

  • 실제 화면 너비: 300px (그대로)
  • 좌우 패딩: 20px × 2 = 40px
  • 좌우 보더: 10px × 2 = 20px
  • 콘텐츠 영역: 300 - 40 - 20 = 240px

이것이 border-box가 편리한 이유입니다. "내가 300px이라고 썼으니 화면에서도 300px"이라는 직관적인 결과를 얻을 수 있습니다. content-box에서는 padding이나 border를 변경할 때마다 전체 크기가 바뀌어 레이아웃이 깨지기 쉽습니다.

Q3. margin-bottom: 30px인 요소와 margin-top: 20px인 요소가 수직으로 붙어있을 때, 두 요소 사이의 실제 간격은 몇 px인가요? 이 현상의 이름과 방지 방법을 설명하세요.

정답: 30px — 마진 겹침(Margin Collapsing)

수직으로 인접한 블록 요소의 마진은 합산(50px)되지 않고, 더 큰 값(30px)만 남습니다. 이를 마진 겹침(Margin Collapsing)이라 합니다.

방지 방법

  • 부모 요소에 overflow: hidden 적용
  • 부모 요소에 padding 또는 border 추가
  • display: flex 또는 display: grid 컨테이너 사용: Flexbox·Grid 안에서는 마진 겹침이 발생하지 않습니다.

흔한 오답 패턴

"30 + 20 = 50px"라고 합산하는 경우가 가장 많습니다. 수직 마진은 더 큰 쪽이 이긴다는 규칙을 기억하세요. 수평 마진은 겹치지 않으니 혼동하지 마세요.

3. 면접 질문

이번 주 범위와 관련된 실제 면접 질문들을 함께 생각해봅시다. 정답을 외우기보다는 자신만의 말로 설명하는 연습을 해보세요.

Q1. 마진 겹침(Margin Collapsing) 현상을 설명해주세요.

수직 방향으로 인접한 두 요소의 마진이 만나면, 합산되지 않고 둘 중 큰 값만 적용되는 CSS의 의도적인 동작입니다.

  • 인접 형제: 위 요소의 margin-bottom과 아래 요소의 margin-top이 겹침
  • 부모와 자식: 부모에 padding이나 border가 없으면, 자식의 margin이 부모 밖으로 새어 나감
  • 해결법: 부모에 padding, border, 또는 overflow: hidden을 적용하면 겹침을 방지할 수 있습니다.

면접 팁: "왜 이런 동작이 존재하느냐"는 질문이 이어질 수 있습니다. 문단(p) 태그의 상하 마진이 겹침 없이 합산되면 간격이 두 배로 벌어지기 때문에, 자연스러운 여백을 유지하기 위한 설계라고 답하면 됩니다.

Q2. position: absolute와 position: fixed의 차이를 설명해주세요.

둘 다 문서의 정상 흐름에서 빠진다는 공통점이 있지만, 기준점이 다릅니다.

  • absolute: 가장 가까운 position이 static이 아닌 조상 요소를 기준으로 배치됩니다. 그런 조상이 없으면 뷰포트가 기준이 됩니다. 스크롤하면 함께 움직입니다.
  • fixed: 항상 뷰포트(브라우저 화면)를 기준으로 배치됩니다. 스크롤해도 화면의 같은 위치에 고정됩니다. 고정 헤더, 플로팅 버튼 등에 사용합니다.

absolute를 쓸 때 가장 흔한 실수는 부모에 position: relative를 빼먹는 것입니다. 기준이 될 조상 요소에 position: relative를 줘야 합니다.

Q3. Flexbox의 justify-content와 align-items의 차이를 설명해주세요.

둘 다 Flex 컨테이너 안에서 자식 요소들을 정렬하는 속성이지만, 정렬하는 축이 다릅니다.

  • justify-content: 주축(Main Axis) 방향으로 정렬합니다. flex-direction: row일 때는 가로 정렬, column일 때는 세로 정렬이 됩니다.
  • align-items: 교차축(Cross Axis) 방향으로 정렬합니다. flex-direction: row일 때는 세로 정렬, column일 때는 가로 정렬이 됩니다.

"주축은 justify, 교차축은 align"이라는 규칙만 외우면, flex-direction이 바뀌어도 헷갈리지 않습니다.

4. 관련 포스팅

  • 프론트엔드 스터디 3주차 학습 자료: 프론트엔드의 첫 번째 벽, 박스 모델과 스타일링

  • 프론트엔드 스터디 4주차 학습 자료: 자유자재 레이아웃 (포지션과 플렉스박스)

5. 다음 주 안내

다음 주에는 4주차 학습 자료에서 다룬 반응형 웹 디자인, 미디어 쿼리, CSS Grid를 복습하고, CSS 파트를 마무리합니다. HTML/CSS 전체를 아우르는 면접 질문도 함께 준비합니다.

다음 주 영상 예습

다음 주는 강의 영상의 마지막 구간(05:28:02 이후)을 다루며 CSS 파트를 마무리합니다. 동시에 4주차 학습 자료의 후반부(미디어 쿼리, Grid, 반응형 단위)도 함께 복습하니, 학습 자료를 꼭 읽어오세요.

  • 미디어 쿼리 (@media): 강의에서 화면 크기에 따라 다른 스타일을 적용하는 법을 배웁니다. @media (min-width: 768px) { ... } 형태로 작성하며, 데스크톱/태블릿/모바일에 따라 레이아웃을 바꿀 수 있습니다.
  • CSS Grid: 강의 마지막에 Grid가 등장할 수 있습니다. Flexbox가 가로 또는 세로 한 방향이라면, Grid는 행과 열을 동시에 다루는 2차원 레이아웃입니다.
  • 반응형 단위 (vw, vh): 뷰포트(화면) 크기를 기준으로 하는 단위입니다. 100vw는 화면 전체 너비, 100vh는 화면 전체 높이입니다.

사전 과제

아래 영상의 4주차 진도 구간(04:28:10 ~ 05:28:02)을 시청해주세요. 배경 이미지 제어부터 Flexbox 레이아웃까지의 내용입니다.

  • 영상: 제대로 파는 HTML & CSS
  • 구간: 04:28:10 ~ 05:28:02 (약 1시간)
  • 링크:

    제대로 파는 HTML & CSS - 4주차 진도 시청하기

포스트 목록

/study/clab-26-1/in-person
파일 12개, 폴더 0개
프론트엔드 스터디 대면 1주차: 프론트엔드 개발자란? 그리고 우리가 배울 것들프론트엔드 스터디 대면 2주차: HTML 마크업과 폼, 그리고 CSS의 시작프론트엔드 스터디 대면 3주차: 폼(Form), CSS 선택자, 그리고 박스 모델프론트엔드 스터디 대면 4주차: 박스 모델 실전, Position과 Flexbox프론트엔드 스터디 대면 5주차: 반응형 웹, CSS Grid, 그리고 CSS 마무리프론트엔드 스터디 대면 6주차: JavaScript 시작 — 타입, 변수, 호이스팅프론트엔드 스터디 대면 7주차: 객체, 함수, 스코프프론트엔드 스터디 대면 8주차: 불변성, 프로토타입, 타입 체크프론트엔드 스터디 대면 9주차: 클로저, Promise, async/await프론트엔드 스터디 대면 10주차: React 입문 전 브릿지 — ES6+ 문법과 에러 처리프론트엔드 스터디 대면 11주차: React 첫 번째 — 컴포넌트, JSX, props프론트엔드 스터디 대면 12주차: React 심화 — useState와 useEffect
font-family
margin
padding
border
inherit
initial
unset
  • overflow와 텍스트 말줄임: 요소 안의 콘텐츠가 넘칠 때 overflow: hidden(잘라냄), auto(스크롤), visible(그대로)로 제어합니다. white-space: nowrap + overflow: hidden + text-overflow: ellipsis 세 속성을 조합하면 긴 텍스트를 ...으로 말줄임할 수 있습니다. Tailwind에서는 truncate 한 클래스로 적용됩니다.
  • 요소 숨기기 세 가지: display: none(공간 제거, 클릭 불가), visibility: hidden(공간 유지, 클릭 불가), opacity: 0(공간 유지, 클릭 가능)은 각각 다른 결과를 만듭니다. 페이드 애니메이션에는 opacity, 완전 제거에는 display: none을 사용합니다.
  • cursor와 pointer-events: cursor: pointer로 클릭 가능함을, cursor: not-allowed로 비활성 상태를 시각적으로 알립니다. pointer-events: none은 클릭 이벤트 자체를 차단합니다. Tailwind에서는 cursor-pointer, pointer-events-none 등으로 적용합니다.