화면은 박스들의 조립이다

모든 화면은 네모 상자 안에 네모 상자를 넣은 거야

한 줄로 말하면

웹이든 앱이든 화면에 보이는 건 전부 네모 상자야. 상자 안에 상자를 넣고, 가로나 세로로 줄 세워서 화면을 만들어.

이 눈만 생기면 어떤 화면을 봐도 "아, 저건 상자 세 개가 가로로 있고 그 안에 또 상자가 있구나" 하고 쪼개 볼 수 있어. 화면 수정을 AI한테 정확히 시키는 첫걸음이야.

상자 안에 상자

쇼핑몰 상품 목록 화면을 상자로 쪼개 보면 이래. 바깥 상자가 부모, 그 안에 든 상자가 자식이야. 이렇게 부모-자식이 이어진 구조를 나무에 비유해서 트리라고 불러.

• 페이지 (제일 큰 상자)
• 　└ 머리글: 로고 상자 + 검색창 상자 + 장바구니 버튼 상자
• 　└ 본문: 상품 카드 상자 여러 개
• 　　　└ 상품 카드: 사진 상자 + 이름 상자 + 가격 상자 + 담기 버튼 상자
• 　└ 바닥글: 회사 정보 상자

상자 하나를 뜯어보면: 박스 모델

1. content (내용): 글자나 사진 그 자체
2. padding (안쪽 여백): 내용과 테두리 사이 공간. 상자 배경색이 칠해지는 영역
3. border (테두리): 상자의 선
4. margin (바깥 여백): 옆 상자와 떨어지는 거리. 배경색이 안 칠해져

이 네 겹 구조를 박스 모델이라고 해. "버튼 안 글자가 답답해 보여"는 padding 문제고, "카드끼리 너무 붙어 있어"는 margin(또는 간격) 문제야.

상자를 줄 세우는 법

상자를 만들었으면 어떻게 배치할지 정해야 해. 기본은 위에서 아래로 쌓이는 거고, 가로로 나란히 두고 싶으면 부모 상자한테 "자식들 가로로 줄 세워"라고 말해. 이걸 해주는 CSS 기능이 Flexbox야. 격자(바둑판)로 배치하고 싶을 땐 Grid라는 기능도 있어.

1. 부모 상자 — "가로로 줄 세워, 간격은 12씩"
2. 자식 상자들 — 부모 말대로 나란히 배치됨
3. 정렬 — "가운데 맞춰" / "양 끝으로 벌려"

확인 퀴즈

무료 · 카카오로 바로 시작 · 레슨 243개