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

EDITOR

CLASS

BLOG

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

새로운 형태로
담아내다.

새로운 형태의 콘텐츠

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

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

CSS의 박스 모델 레이아웃

epub

CSS의 유연한 레이아웃

epub

전자책이 EPUB으로 만들어져야 하는 이유

epub

좋은 글은 무엇을 지키는가

writing

글쓰기의 기준은 어떻게 만들어졌나

writing

...

6 CSS의 박스 모델 레이아웃

HTML이 문서를 읽을 때 제목과 본문, 목록의 역할을 알려 준다면, CSS는 그 문서가 화면 위에서 어떤 모습으로 놓일지 정합니다. CSS는 글자를 하나씩 그림처럼 그리지 않습니다. 제목 하나, 문단 하나, 이미지 하나를 저마다의 사각형 영역으로 보고, 그 상자들의 크기와 간격, 테두리와 위치를 조절합니다. 이 생각을 알면 전자책의 여백과 문단, 이미지가 왜 그렇게 움직이는지 훨씬 쉽게 이해할 수 있습니다.

CSS에는 또 하나의 중요한 특징이 있습니다. 문단을 백 개 꾸밀 때 백 번 같은 선택을 반복하지 않는다는 점입니다. ‘이 책의 모든 본문 문단’, ‘이 장의 소제목’, ‘중요한 안내 상자’처럼 같은 역할을 가진 요소를 골라 한 번에 규칙을 적용할 수 있습니다. CSS는 문서를 상자로 쌓고, 필요한 상자를 집어 같은 방식으로 꾸미는 언어입니다.

이 글에서는 CSS가 문서를 상자로 보는 이유, 상자가 화면에서 위에서 아래로 쌓이는 기본 방식, 상자 하나를 이루는 네 겹, 그리고 선택자를 이용해 많은 요소를 한꺼번에 꾸미는 방법을 전자책의 예와 함께 살펴봅니다.

1.CSS가 제목, 문단, 이미지 같은 요소를 사각형 상자로 다루는 방식을 알아봅니다.

2.상자들이 화면의 위에서 아래로 차례로 쌓이는 기본 흐름을 살펴봅니다.

3.내용, 안쪽 여백, 테두리, 바깥 여백으로 이루어진 상자의 네 겹을 이해합니다.

4.CSS가 같은 역할의 요소를 골라 한꺼번에 꾸미고, 규칙을 겹쳐 적용하는 방식을 정리합니다.

CSS는 제목과 문단을 사각형 상자로 봅니다

화면에서 보이는 문서는 글자들의 모임처럼 보입니다. 하지만 CSS는 제목 한 줄, 문단 하나, 사진 한 장, 목록 한 묶음을 각각 자리를 차지하는 상자로 생각합니다. 상자는 꼭 눈에 보이는 테두리를 가진 상자일 필요는 없습니다. 대부분의 문단에는 테두리가 없지만, CSS에게 문단은 너비와 높이를 가지고 다른 문단과 거리를 두는 하나의 영역입니다.

이 방식은 문서를 정리하기에 아주 편리합니다. 제목은 제목만의 상자가 되고, 그 안에는 제목 글자가 들어갑니다. 본문 문단은 본문만의 상자가 되며, 문장이 길어지면 상자의 높이가 자연스럽게 늘어납니다. 이미지는 이미지 크기만큼의 상자가 되어 문장 사이에 놓입니다. CSS는 각 상자가 얼마나 넓고 높을지, 어디에 여백을 둘지 정하면서 문서 전체를 하나의 레이아웃으로 만듭니다.

상자로 생각하면 글과 이미지가 서로 밀고 당기는 이유도 이해하기 쉽습니다. 문단의 내용이 길어지면 문단 상자가 아래로 길어지고, 그다음에 오는 제목이나 이미지는 그만큼 더 아래로 내려갑니다. 이미지의 크기를 크게 바꾸면 이미지 상자가 넓어지고 높아지며, 다음 문단도 자연스럽게 자리를 옮깁니다. 각각의 요소가 자기 자리만 차지하는 것이 아니라, 앞에 놓인 상자의 크기에 따라 다음 요소의 위치가 달라지는 것입니다.

전자책에서 이 생각은 특히 중요합니다. 독자가 글자 크기를 키우면 문단의 상자가 높아지고, 책의 다른 요소들은 그 변화를 받아 아래로 이동합니다. 화면이 작아지면 한 줄에 들어가는 글자가 줄어들어 문단 상자가 더 길어질 수 있습니다. CSS는 이런 변화가 생겨도 제목, 본문, 이미지가 서로 겹치지 않고 순서대로 다시 자리를 찾게 합니다.

CSS가 보는 문서

CSS는 제목, 문단, 목록, 이미지처럼 문서를 이루는 요소를 각자의 사각형 영역으로 다룹니다.

눈에 테두리가 보이지 않는 문단도 너비와 높이, 주변 간격을 가진 하나의 상자입니다.

앞에 있는 상자의 크기가 바뀌면 뒤에 있는 상자는 그만큼 자리를 옮깁니다.

전자책에서는 글자 크기와 화면 폭이 달라져도 상자들이 순서를 지키며 다시 배치됩니다.

상자는 화면의 맨 위에서 아래로 차례로 쌓입니다

우리가 실제 상자를 쌓을 때는 바닥에 첫 상자를 놓고 그 위에 다음 상자를 올립니다. 화면 속 CSS의 기본 흐름은 조금 다르게 느껴집니다. 문서는 화면의 맨 위에서 시작하고, 먼저 나온 제목 상자 아래에 첫 문단 상자가 놓이며, 그 아래에 다음 문단과 이미지가 이어집니다. 위에 있는 상자가 자리를 차지하면, 뒤에 오는 상자는 그 아래에서 자기 자리를 찾습니다. 화면에서는 상자가 위에서 아래로 계속 쌓여 내려가는 셈입니다.

이 기본 흐름은 책을 읽는 순서와 닮아 있습니다. 제목을 보고, 첫 문단을 읽고, 다음 문단으로 내려가며, 필요한 곳에서 이미지를 만납니다. CSS는 특별히 다른 배치를 지시하지 않는 한, 원고에 적힌 순서를 따라 상자를 위에서 아래로 놓습니다. 그래서 전자책의 본문은 대개 긴 한 줄의 기둥처럼 이어지고, 화면 끝에 닿으면 다음 화면이나 다음 페이지로 자연스럽게 넘어갑니다.

문단 사이에 여백을 더하면 상자와 상자 사이의 거리가 넓어집니다. 제목 위에 큰 여백을 두면 새로운 장이 시작되는 느낌이 생깁니다. 이미지 아래에 여백을 두면 독자는 그림을 잠시 본 뒤 다시 문장으로 돌아갈 숨을 얻습니다. CSS에서 여백은 빈 공간을 낭비하는 일이 아니라, 위에서 아래로 흐르는 상자들의 속도와 리듬을 조절하는 일입니다.

물론 모든 요소가 언제나 한 줄로 아래에만 놓여야 하는 것은 아닙니다. 두 개의 이미지가 나란히 보이게 하거나, 넓은 화면에서는 설명과 사진을 좌우로 나눌 수도 있습니다. 하지만 이런 특별한 배치도 기본적인 흐름 위에서 선택하는 변화입니다. 전자책의 긴 본문이 안정적으로 읽히는 이유는 먼저 위에서 아래로 이어지는 기본 질서가 있고, 필요한 부분에서만 다른 배치를 더하기 때문입니다.

위에서 아래로 쌓이는 기본 흐름

CSS의 기본 문서 흐름에서는 요소들이 원고에 적힌 순서대로 화면의 위에서 아래로 놓입니다.

앞 상자의 높이가 커지면 뒤에 오는 상자는 그만큼 아래로 밀려납니다.

제목과 문단, 이미지 사이의 여백은 이 세로 흐름의 속도와 읽는 호흡을 만듭니다.

나란히 놓는 특별한 배치도 안정적인 기본 흐름 위에 더하는 선택입니다.

하나의 상자는 네 겹의 공간으로 이루어집니다

CSS에서 상자 하나를 이해할 때는 선물 상자를 떠올리면 좋습니다. 가장 안쪽에는 실제 내용이 있습니다. 문단이라면 글자들이고, 이미지라면 그림 자체입니다. 그 내용 바로 주변에는 내용이 답답하지 않게 숨 쉴 자리를 만드는 안쪽 여백이 있습니다. 액자처럼 내용 가까이에 공간을 두면 글과 테두리, 그림과 배경이 너무 붙어 보이지 않습니다.

안쪽 여백의 바깥에는 필요할 때 테두리를 둘 수 있습니다. 테두리는 꼭 검은 선일 필요가 없습니다. 연한 선, 색이 있는 면, 그림자처럼 보이는 효과도 상자의 경계를 알려 주는 방식이 될 수 있습니다. 안내문이나 인용문, 사진 묶음처럼 본문과 다른 성격의 내용을 보여 줄 때 테두리나 배경은 ‘여기부터는 조금 다른 내용입니다’라고 독자에게 알려 줍니다.

가장 바깥에는 다른 상자와 거리를 두는 바깥 여백이 있습니다. 문단과 문단 사이가 떨어져 보이고, 제목이 본문과 너무 붙지 않으며, 이미지가 다음 내용과 충돌하지 않는 것은 이 바깥 공간 덕분입니다. 안쪽 여백은 상자 안의 내용과 가장자리 사이의 숨이고, 바깥 여백은 상자와 다른 상자 사이의 숨이라고 생각하면 됩니다.

이 네 겹은 책의 가독성을 세밀하게 다루게 합니다. 본문 글자를 바꾸지 않아도 문단 주변의 공간을 조절해 읽기 편하게 만들 수 있고, 이미지 자체를 자르지 않아도 이미지 주위의 여백을 바꿔 더 돋보이게 할 수 있습니다. CSS는 내용만 꾸미는 언어가 아니라, 내용 주변의 빈 공간까지 디자인하는 언어입니다. 좋은 전자책에서 여백이 중요한 이유도 바로 여기에 있습니다.

상자를 이루는 네 겹

가장 안쪽에는 글자나 이미지처럼 실제로 보여 주는 내용이 들어갑니다.

안쪽 여백은 내용과 상자의 가장자리 사이에 숨을 만들어 답답함을 줄입니다.

테두리와 배경은 필요할 때 상자의 범위와 성격을 보여 줍니다.

바깥 여백은 다른 제목, 문단, 이미지와 거리를 두어 문서의 리듬을 만듭니다.

CSS는 같은 역할의 요소를 골라 한꺼번에 꾸밉니다

책에 소제목이 스무 개 있다고 생각해 봅시다. 소제목마다 글자를 조금 크게 하고 굵게 만들며, 위에는 넉넉한 여백을 두고 아래에는 짧은 여백을 두고 싶을 수 있습니다. 이때 소제목을 하나씩 찾아 같은 일을 스무 번 반복한다면, 책이 길어질수록 디자인은 쉽게 흐트러집니다. 어떤 제목은 여백이 조금 다르고, 어떤 제목은 글꼴이 다르게 남을 수도 있습니다.

CSS는 같은 역할을 가진 요소를 ‘집어서’ 한꺼번에 꾸밉니다. 모든 소제목을 고르거나, 모든 본문 문단을 고르거나, ‘중요한 안내’라는 이름을 붙인 상자만 골라 같은 규칙을 적용할 수 있습니다. 이렇게 무엇을 고를지 알려 주는 방식을 선택자라고 합니다. 선택자는 CSS가 문서 속에서 ‘어느 상자에게 이 규칙을 줄 것인가’를 찾는 방법입니다.

선택자는 꼭 한 종류의 요소만 고르는 데서 멈추지 않습니다. 책 전체의 모든 제목을 고를 수도 있고, 특정 장 안에 있는 제목만 다르게 고를 수도 있으며, 여러 문단 가운데 강조할 문단에만 같은 모습을 줄 수도 있습니다. 그래서 같은 HTML 구조를 유지하면서도, 장마다 조금 다른 분위기를 만들거나 중요한 정보만 따로 돋보이게 할 수 있습니다. 문서의 의미는 HTML이 지키고, CSS는 필요한 상자를 골라 읽는 모습을 바꿉니다.

이 방식의 가장 큰 장점은 한 번의 수정이 책 전체에 이어진다는 점입니다. 본문 글꼴을 바꾸고 싶다면 모든 본문 문단을 하나씩 고칠 필요가 없습니다. 본문을 고르는 규칙 하나를 바꾸면, 그 규칙을 받는 문단들이 함께 달라집니다. CSS는 많은 페이지를 가진 전자책에서 디자인을 통일하고, 나중에 바꿀 때도 한결 수월하게 만드는 방식입니다.

선택해서 한꺼번에 꾸미기

CSS는 같은 역할을 가진 제목, 본문, 목록, 안내 상자를 골라 같은 규칙을 적용할 수 있습니다.

무엇을 고를지 알려 주는 방식을 선택자라고 합니다.

책 전체의 제목이나 특정 장의 문단처럼, 필요한 범위를 골라 다른 모습을 줄 수 있습니다.

규칙 하나를 바꾸면 그 규칙을 받는 여러 요소가 함께 바뀌어 디자인의 통일성을 지키기 쉽습니다.

여러 규칙은 겹치며 더 구체적인 모습을 만듭니다

CSS는 한 상자에 한 가지 규칙만 주는 방식이 아닙니다. 본문 문단이라는 이유로 받는 기본 규칙이 있고, 특정 장 안에 있다는 이유로 받는 규칙이 있으며, 그중에서도 중요한 안내문이라는 이유로 받는 규칙이 있을 수 있습니다. 여러 규칙이 같은 상자에 모이면 CSS는 더 구체적으로 고른 규칙을 살피며 최종 모습을 정합니다. 이것이 CSS 이름에 들어 있는 ‘차례차례 이어지는’ 성질입니다.

예를 들어 책 전체의 본문은 편안한 글꼴과 기본 간격을 가질 수 있습니다. 그런데 한 장의 시작 문단만 조금 더 넉넉한 여백을 갖게 하고 싶을 수 있습니다. 이때 책 전체의 기본 규칙을 버리지 않고, 그 시작 문단에만 조금 더 구체적인 규칙을 더합니다. 독자는 같은 책의 분위기를 느끼면서도, 새로운 장이 시작되었다는 신호를 자연스럽게 받습니다.

이 방식은 전자책을 일관되게 만들면서도 단조롭지 않게 합니다. 모든 제목을 같은 방식으로 다루어 책의 위계를 지키고, 특별히 중요한 제목에는 한 단계 더 강한 규칙을 더할 수 있습니다. 모든 이미지에 같은 기본 여백을 주되, 표지나 큰 장면에는 다른 크기와 간격을 적용할 수도 있습니다. 기본을 지키고 필요한 곳만 더 구체적으로 다듬는 일입니다.

다만 규칙을 너무 많이 겹치면 만드는 사람도 어떤 규칙이 최종 모습을 만들었는지 알기 어려워집니다. 좋은 CSS는 많은 규칙으로 복잡하게 만드는 것이 아니라, 기본 규칙을 단단히 세우고 꼭 필요한 경우에만 예외를 더하는 방식에 가깝습니다. 독자가 보기에는 자연스러운 책이지만, 안쪽에서는 일관된 원칙이 조용히 작동하고 있어야 합니다.

규칙이 겹치는 방식

CSS에서는 하나의 상자가 기본 규칙과 더 구체적인 규칙을 함께 받을 수 있습니다.

기본 규칙은 책 전체의 통일감을 만들고, 구체적인 규칙은 특별한 장면을 다듬습니다.

같은 본문이라도 장의 첫 문단이나 중요한 안내문에는 다른 규칙을 더할 수 있습니다.

규칙은 적고 분명할수록 나중에 고치고 관리하기가 쉽습니다.

CSS는 문서를 읽을 수 있는 레이아웃으로 만듭니다

CSS의 상자와 기본 흐름, 선택자는 따로 떨어진 개념이 아닙니다. CSS는 먼저 문서의 각 요소를 상자로 보고, 그 상자들이 위에서 아래로 읽는 순서에 맞춰 놓이게 합니다. 그리고 같은 역할의 상자를 골라 글꼴과 간격, 크기와 배경을 한꺼번에 정합니다. 필요할 때는 더 구체적인 규칙을 더해 한 장면만 다르게 보이게 합니다. 이 과정이 모여 단순한 원고를 읽을 수 있는 문서로 바꿉니다.

전자책에서는 특히 이 기본 원리가 든든한 바탕이 됩니다. 화면이 작아져 문단 상자의 높이가 달라져도 다음 상자가 아래로 밀려나고, 글자를 키워도 제목과 본문은 자기 역할을 유지합니다. 모든 본문 문단을 고르는 규칙이 있으므로 책 전체의 가독성을 한 번에 다듬을 수 있고, 중요한 인용문이나 이미지 묶음에는 따로 선택한 규칙을 줄 수 있습니다. CSS는 변화하는 화면에서 책의 질서와 분위기를 함께 지키는 방법입니다.

CSS의 상자는 독자에게 보이지 않는 설계도입니다. 독자는 상자의 너비나 바깥 여백을 계산하지 않고, 자연스럽게 제목을 만나고 문단을 읽으며 이미지를 지나갑니다. 그러나 그 자연스러움은 우연이 아닙니다. 각 요소가 자기 공간을 갖고, 필요한 요소들이 같은 규칙을 받으며, 읽는 순서에 맞춰 놓인 결과입니다. CSS는 문서의 내용을 바꾸지 않고도 문서를 읽기 좋은 장소로 만드는 언어입니다.

1: W3C, “Visual formatting model”, CSS 2.2. CSS는 문서 요소를 상자로 다루며, 기본 블록 흐름에서는 상자들이 부모 영역의 위에서 시작해 세로로 차례로 놓입니다.
2: W3C, “CSS Basic Box Model”. CSS는 문서의 레이아웃을 사각형 상자들의 모임으로 모델링합니다.

이 글의 핵심

CSS는 제목, 문단, 이미지 같은 문서 요소를 각각의 상자로 보고 크기와 간격, 위치를 정합니다.

기본 흐름에서는 상자들이 문서 순서대로 화면의 위에서 아래로 쌓여 읽기의 세로 흐름을 만듭니다.

내용, 안쪽 여백, 테두리, 바깥 여백은 상자 주변의 공간과 문서의 리듬을 조절합니다.

CSS는 선택자로 같은 역할의 요소를 골라 한꺼번에 꾸미고, 필요한 곳에 더 구체적인 규칙을 더해 문서를 완성합니다.

목록으로

저작권 고시

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

HOME

FAQ

이용 약관

개인정보 이용방침

help@opkle.app
010-2747-3403

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

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

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

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