Opkle(옵클) - 창작자를 위한 앱과 시스템

EDITOR

CLASS

BLOG

표현한다는 것의무한한 가능성,

새로운 형태로
담아내다.

새로운 형태의 콘텐츠

Opkle은 코드 없이 웹을 마음껏 만들고, 누구나 자기 화면을 그릴 수 있도록 에디터를 만들고, 그 결과물을 어디서나 즐길 수 있게 돕는 팀입니다.

텍스트와 화면과의 조화를 통해, 웹을 짓는다는 것이 그저 단순한 코딩이 아닌, 상상을 펼치고 감각을 깨우는 과정이 될 수 있도록 좋은 도구를 만들어 냅니다.

body 태그: 독자와 만나는 웹문서의 본문

html

CSS는 왜 HTML과 나뉘어 있을까

css

CSS 선택자: 꾸밀 대상을 찾아 부르는 법

css

CSS 문법은 어떻게 HTML과 만날까

css

CSS 박스 모델: 태그가 화면의 자리가 되는 법

css

4 CSS 박스 모델: 태그가 화면의 자리가 되는 법

HTML에 제목 하나와 문단 하나를 적었다고 해서, 그 글자가 저절로 화면의 정확한 자리를 얻는 것은 아닙니다. 브라우저는 HTML 태그가 이루는 문서 구조를 읽은 뒤, 각 요소를 화면 위에 놓을 수 있는 상자로 바꾸어 생각합니다. 제목은 넓은 한 줄의 자리를 차지하고, 문단은 그 아래에서 글을 여러 줄로 흐르게 하며, 링크는 문장 안에서 작은 자리를 차지합니다. CSS의 박스 모델은 HTML 태그가 실제 화면의 크기·여백·경계를 갖는 요소로 펼쳐지는 기본 원리입니다.

‘박스’라는 말은 네모난 테두리만 떠올리게 해 처음에는 오해를 부릅니다. CSS에서 박스는 꼭 눈에 보이는 상자가 아닙니다. 글자 한 줄도, 사진도, 버튼도, 문단도 화면 안에서는 자기만의 영역을 차지합니다. CSS는 그 영역 안에 내용이 얼마나 들어가고, 내용과 테두리 사이에는 얼마나 여백을 둘지, 다른 요소와는 얼마나 떨어질지를 정합니다. 우리가 웹페이지에서 보는 정렬과 숨 쉴 틈은 대부분 이 보이지 않는 상자들의 관계에서 나옵니다.

이 글에서는 태그가 어떻게 화면의 박스로 바뀌는지, 박스 안팎의 네 겹이 각각 무엇인지, 그리고 문단과 링크처럼 서로 다른 태그가 왜 다른 방식으로 흐르는지를 살펴봅니다. 박스 모델을 이해하면 ‘여백을 줬는데 왜 더 커졌지?’, ‘문단은 왜 다음 줄로 내려가지?’ 같은 CSS의 첫 번째 수수께끼가 훨씬 덜 낯설어집니다.

1.브라우저가 HTML 태그를 화면의 박스로 읽는 흐름을 알아봅니다.

2.content, padding, border, margin이 박스 안팎에서 하는 일을 살펴봅니다.

3.width와 여백이 실제 화면 크기에 어떻게 더해지는지 이해합니다.

4.블록처럼 흐르는 태그와 문장 안에 머무는 태그의 차이를 정리합니다.

브라우저는 HTML의 나무를 화면의 박스로 펼칩니다

HTML 문서는 태그들이 서로 안에 들어가는 구조를 가집니다. body 안에 main이 있고, main 안에 article이 있으며, 그 안에 제목과 문단이 놓이는 식입니다. 브라우저는 이 구조를 읽은 뒤, 화면에 어떻게 배치할지 계산합니다. CSS 표준은 이 과정을 요소의 나무 구조를 상자들의 구조로 바꾸는 일로 설명합니다. HTML의 역할이 화면 위에서 차지할 자리로 번역되는 셈입니다.

예를 들어 p 태그는 문단이라는 의미를 갖고, 브라우저는 기본적으로 이 문단을 앞뒤 문단과 구분되는 넓은 영역으로 펼칩니다. a 태그는 링크라는 의미를 갖고, 보통 문장 안에서 글자만큼의 자리를 차지합니다. img 태그는 이미지의 크기만큼의 영역을 만듭니다. CSS는 이 상자들의 크기와 위치, 줄바꿈과 정렬을 조절합니다.

모든 태그가 똑같은 모양의 상자가 되는 것은 아닙니다. 어떤 요소는 한 줄 전체를 쓰고, 어떤 요소는 문장 안에 머물며, 어떤 요소는 화면에 보이지 않도록 만들 수도 있습니다. 하지만 초심자에게 가장 도움이 되는 첫 그림은 이것입니다. HTML의 요소 하나하나는 화면 위에서 내용과 주변 공간을 가진 상자로 생각할 수 있다. 이 생각이 있으면 CSS의 크기·여백·정렬 규칙을 한 덩어리로 이해할 수 있습니다.

HTML에서 화면까지의 흐름

HTML은 제목, 문단, 링크처럼 내용의 역할과 관계를 기록합니다.

브라우저는 이 역할들을 읽고 화면에 놓을 상자들의 구조를 만듭니다.

CSS는 각 상자의 크기, 위치, 여백, 테두리, 배치를 정합니다.

독자는 상자를 직접 보지 않아도, 그 결과인 읽기 흐름과 화면의 질서를 경험합니다.

박스는 내용에서 바깥 여백까지 네 겹으로 이루어집니다

CSS의 기본 박스는 안쪽에서 바깥쪽으로 content, padding, border, margin이라는 네 겹을 생각하면 됩니다. 가장 안의 content는 글자, 이미지, 자식 요소처럼 실제 내용이 놓이는 자리입니다. 그 주변의 padding은 내용과 테두리 사이에 두는 안쪽 여백입니다. border는 상자의 경계를 보이게 하는 선이고, margin은 다른 상자와 거리를 두기 위한 바깥 여백입니다.

선물 상자를 떠올리면 이해하기 쉽습니다. 선물 자체가 content이고, 선물을 감싸는 완충재가 padding입니다. 상자의 단단한 벽이 border이며, 선물 상자를 다른 상자와 떨어뜨려 놓는 책상 위의 빈자리가 margin입니다. 완충재를 두껍게 하면 선물과 상자 벽 사이가 넉넉해지고, 책상 위의 빈자리를 넓히면 다른 상자와 멀어집니다. 둘 다 여백처럼 보이지만, 하나는 상자 안이고 다른 하나는 상자 밖입니다.

배경색은 보통 content와 padding, border의 뒤쪽에 보이지만 margin은 투명한 바깥 공간입니다. 그래서 색이 있는 안내 상자를 만들 때 내용이 가장자리에 너무 붙어 보이면 padding을 늘리고, 안내 상자와 다음 문단이 너무 가깝다면 margin을 조절합니다. 안쪽의 답답함과 바깥의 답답함은 다른 문제이므로, padding과 margin을 구분하는 감각이 중요합니다.

박스의 안쪽에서 바깥쪽으로

content: 글자, 이미지처럼 실제 내용이 들어가는 중심 자리입니다.

padding: 내용과 테두리 사이의 안쪽 여백입니다.

border: 상자의 경계를 드러내는 선입니다.

margin: 다른 상자와 거리를 두는 바깥 여백입니다.

width는 언제나 화면에서 보이는 전체 너비와 같지 않습니다

CSS를 처음 쓸 때 가장 자주 만나는 놀라움은 width입니다. 어떤 상자에 `width: 300px`를 적었는데, padding과 border를 더하니 화면에서 차지하는 너비가 300픽셀보다 커 보일 수 있습니다. 기본적인 계산에서는 width가 내용 영역의 너비를 뜻하기 때문입니다. 내용 양쪽에 20픽셀의 padding과 1픽셀의 border가 있다면, 보이는 상자는 300에 20+20, 1+1이 더해진 만큼 넓어집니다.

이 계산이 잘못된 것은 아닙니다. CSS는 내용이 쓸 수 있는 공간과 그 바깥의 완충 공간, 경계를 따로 생각합니다. 하지만 페이지의 폭 안에 상자를 정확히 맞추고 싶을 때에는 예상과 달라 보일 수 있습니다. 이때 `box-sizing: border-box`라는 약속을 쓰면, width에 padding과 border까지 포함해 계산할 수 있습니다. 300픽셀이라는 숫자가 내용만의 폭이 아니라 테두리까지 포함한 상자의 폭이 되는 것입니다.

처음부터 모든 요소의 크기를 숫자로 고정할 필요는 없습니다. 넓이가 달라지는 화면에서는 상자가 부모 영역에 맞춰 자연스럽게 늘어나고 줄어드는 편이 더 편안할 때가 많습니다. 박스 모델은 정확한 숫자를 맞추는 공식이라기보다, 한 요소가 실제로 얼마나 자리를 차지하는지 이해하게 하는 지도입니다. width, padding, border, margin이 서로 더해질 수 있다는 사실을 알면 레이아웃의 많은 장면이 설명됩니다.

margin과 padding은 같은 ‘여백’이 아닙니다

문단이 서로 너무 붙어 있을 때와 버튼 안의 글자가 가장자리에 너무 붙어 있을 때는 같은 여백을 고치면 안 됩니다. 문단과 문단 사이를 떨어뜨리는 것은 margin의 일입니다. 버튼 안의 글자와 버튼 테두리 사이를 넓히는 것은 padding의 일입니다. 하나는 요소끼리의 관계를, 다른 하나는 요소 안의 내용과 경계의 관계를 다룹니다.

예를 들어 색이 있는 카드 상자를 만든다고 생각해 봅니다. 카드 안의 제목과 본문이 편안히 놓이게 하려면 padding이 필요합니다. 카드 바깥에서 다른 카드와 충분히 떨어지게 하려면 margin이 필요합니다. padding만 크게 하면 카드 자체가 커져 다른 카드와의 사이가 답답할 수 있고, margin만 크게 하면 카드 안의 글은 여전히 가장자리에 바짝 붙어 있을 수 있습니다.

CSS는 위·오른쪽·아래·왼쪽의 여백을 각각 다르게 정할 수도 있습니다. 하나의 숫자를 쓰면 네 방향에 같은 값을 주고, 여러 숫자를 쓰면 방향에 따라 다르게 줄 수 있습니다. 그러나 처음에는 네 방향의 순서를 외우는 것보다, ‘이 공간이 상자 안인가 바깥인가’를 먼저 물어보는 편이 좋습니다. 그 답이 padding과 margin 가운데 어느 것을 골라야 할지 알려 줍니다.

여백을 고를 때의 질문

내용이 테두리나 배경의 가장자리에 너무 붙었나요? padding을 생각합니다.

두 문단, 카드, 버튼이 서로 너무 가깝나요? margin을 생각합니다.

색이 칠해진 상자 안의 숨 쉴 틈은 padding으로 만듭니다.

상자와 다른 상자 사이의 빈자리는 margin으로 만듭니다.

태그는 블록처럼 흐르기도, 문장 안에 머물기도 합니다

박스를 이해할 때 또 하나 중요한 것은 상자가 화면에서 흐르는 방식입니다. p, h1, div, section처럼 문서의 큰 덩어리를 만드는 태그는 기본적으로 앞뒤에 줄을 나누며 넓은 영역을 쓰는 경우가 많습니다. 이런 요소를 블록처럼 흐르는 요소라고 생각할 수 있습니다. 제목 아래에 문단이 오고, 문단 아래에 다음 문단이 놓이는 읽기 흐름이 여기에서 생깁니다.

반대로 a, strong, em, span처럼 문장 속의 일부를 다루는 태그는 보통 글자와 함께 한 줄 안에 머뭅니다. 링크를 넣는다고 문장이 갑자기 다음 줄로 내려가면 읽는 흐름이 깨질 것입니다. 이들은 문장 안에서 필요한 만큼만 자리를 차지하고, 남는 자리에 다음 글자가 이어집니다. 이미지는 상황에 따라 문장 안에 놓일 수도 있고, 별도의 큰 영역을 차지하도록 만들 수도 있습니다.

CSS의 `display` 속성은 요소가 이런 흐름에서 어떤 방식으로 상자를 만들지 정하는 중요한 도구입니다. HTML 태그는 원래 역할을 갖지만, CSS로 화면에서의 배치 방식은 조절할 수 있습니다. 다만 단지 보기 편하다는 이유로 문서의 의미를 잊어서는 안 됩니다. p를 문단으로, button을 행동을 시작하는 요소로 고른 이유는 HTML에 남아 있고, CSS는 그 요소가 주변과 어떻게 어울릴지 정하는 쪽을 맡는 것이 좋습니다.

박스들은 기본 흐름 안에서 서로 자리를 양보합니다

특별한 배치 규칙을 주지 않았을 때, 블록처럼 흐르는 요소들은 보통 위에서 아래로 차례차례 놓입니다. 제목이 먼저 자리를 잡고, 그 아래 문단이 이어지며, 다음 문단이 다시 아래에 놓입니다. 이를 기본 흐름이라고 생각하면 됩니다. 긴 글을 스크롤하며 읽을 수 있는 까닭도, 브라우저가 이 기본 흐름 안에서 상자들을 자연스럽게 이어 주기 때문입니다.

이 흐름 위에서 margin은 상자끼리 거리를 만들고, padding은 각 상자 안의 내용을 보호하며, border는 경계를 드러냅니다. CSS는 이 기본 흐름을 바탕으로 나란히 배치하거나 격자로 정리하는 다른 방법도 제공합니다. 하지만 처음에는 모든 것을 복잡한 배치 도구로 해결하려 하지 않아도 됩니다. 제목과 문단, 카드가 자연스럽게 위에서 아래로 읽히는지 확인하고, 박스 안팎의 여백을 조절하는 일만으로도 단단한 화면을 만들 수 있습니다.

박스 모델은 예쁜 테두리를 만드는 기술이 아니라, 독자의 시선이 어디에 머물고 다음으로 어떻게 움직일지를 정하는 바탕입니다. 상자가 너무 빽빽하면 글은 숨이 막히고, 너무 멀리 떨어지면 한 페이지의 관계가 느슨해집니다. 내용·안쪽 여백·경계·바깥 여백의 역할을 구분할수록, 화면은 더 조용하지만 명확한 질서를 갖게 됩니다.

박스 모델은 HTML을 읽기 좋은 화면으로 번역합니다

HTML 태그는 문서의 구조와 뜻을 기록합니다. CSS 박스 모델은 그 구조를 화면 안에서 크기와 위치, 여백을 가진 요소들로 번역합니다. 이때 한 태그가 만든 상자는 내용만으로 끝나지 않습니다. 안쪽 여백인 padding, 경계인 border, 다른 요소와의 거리인 margin이 함께 모여 독자가 실제로 경험할 한 조각의 화면이 됩니다.

그래서 레이아웃이 뜻대로 되지 않을 때에는 ‘이 태그가 어떤 박스를 만들고 있는가’, ‘문제가 상자 안의 공간인가 바깥의 공간인가’, ‘이 요소는 문장 안에 머물어야 하는가 다음 줄을 시작해야 하는가’를 물어보면 좋습니다. 박스 모델은 외워야 할 네 단어가 아니라, HTML의 뜻을 화면 위의 읽기 경험으로 바꾸는 가장 기본적인 사고방식입니다.

이 글의 핵심

브라우저는 HTML 요소의 구조를 읽고, CSS에 따라 화면의 상자들로 펼칩니다.

한 박스는 content, padding, border, margin이라는 안쪽에서 바깥쪽까지의 네 겹을 가집니다.

padding은 상자 안의 여백이고 margin은 상자와 다른 상자 사이의 바깥 여백입니다.

width는 기본적으로 내용 영역을 뜻할 수 있으므로 padding과 border가 실제 크기에 더해질 수 있습니다.

블록처럼 흐르는 태그와 문장 안에 머무는 태그의 차이가 웹문서의 기본 읽기 흐름을 만듭니다.

목록으로

저작권 고시

본 웹사이트의 모든 디자인 결과물 및 영상에 대한 저작권은 Abstract Cloud에 있으며, 저작권법 및 관련 법령에 의해 보호받습니다. 웹, 영상, 본문, 표지, 내지 디자인을 포함한 모든 콘텐츠는 저작권자의 자산으로, 사전 동의 없이 무단 복제, 배포, 2차 저작물 제작, 온라인 공유 등을 금지합니다. 이를 위반할 시, 저작권법에 따라 민형사상 책임을 질 수 있습니다. 정당한 구매와 저작권 보호는 창작자의 권리를 지키며, 더 나은 작품으로 보답할 힘이 됩니다.

HOME

FAQ

이용 약관

개인정보 이용방침

help@opkle.app
010-2747-3403

상호 :추상적 형상 디자인(Abstract cloud) | 대표자 :배창규

사업자등록번호 :249-74-00533

통신판매업 신고번호 :2025-의정부송산-0634

주소 :경기도 의정부시 부용로 49, 108동 402호