Frontend 07
CSS 박스 감각 익히기: 여백과 경계의 시각적 차이
color, font-size, background, border, margin, padding이 각각 보이긴 하지만 화면에서 어떤 차이를 만드는지 감이 없다.
근거 · 교안 p23-p25
1장: 색과 크기로 내용물을 꾸미는 법
솔라의 손가락이 노트북 트랙패드 위에서 멈칫했다. 화면에는 방금 전까지 솔라가 공들여 작성한 짧은 코드 몇 줄과 그 결과물이 나란히 떠 있었다. 하얀 화면 중앙에 덩그러니 놓인 검은색 글씨 상자. 분명 color, font-size, padding, margin 같은 CSS 속성들을 배웠고, 각 단어의 뜻도 안다. 하지만 화면에서 그것들은 그저 ‘무언가를 바꾸는 것’ 이상으로 다가오지 않았다.
“이상하네…”
솔라는 혼잣말을 중얼거렸다. padding도 공간을 만들고, margin도 공간을 만든다. font-size를 키워도 글자가 커지면서 공간을 더 차지하는 것처럼 보인다. 전부 다 비슷하게 느껴졌다. 속성 이름만 다를 뿐, 결국엔 다들 박스의 공간에 영향을 주는 것 아닌가? 솔라는 미간을 찌푸렸다. 머릿속에선 단어들이 둥둥 떠다녔지만, 화면 속 네모난 상자와 글자들은 그 단어들과 좀처럼 명확하게 연결되지 않았다.
그때 옆에서 조용히 자기 코드를 보던 루나가 솔라 쪽으로 시선을 돌렸다. 솔라의 막막한 표정을 읽은 루나는 말없이 책상 위에 놓인 작은 메모지 한 장과 펜을 솔라 쪽으로 스윽 밀었다. 컴퓨터 화면이 아니라, 새하얀 종이였다.
“거기에, ‘안녕’이라고 한번 써봐.”
솔라는 영문을 모르겠다는 표정으로 루나를 쳐다봤지만, 순순히 펜을 집어 들고 메모지 중앙에 ‘안녕’이라고 적었다. 평범한 검은색 글씨였다.
루나는 이번엔 빨간색 펜을 건넸다.
“그 글자들을 따라서, 위에 그대로 덧칠해볼래?”
솔라는 고개를 갸웃하며 빨간 펜으로 ‘안녕’이라는 글자를 조심스럽게 덧칠했다. 검은색 글씨가 선명한 빨간색으로 바뀌었다.
“자, 지금 뭐가 바뀌었지?” 루나가 물었다.
“글자 색깔.” 솔라는 즉시 대답했다. 너무 당연한 질문이었다.
“그렇지. 그럼 이번엔 다른 종이에 ‘안녕’을 아까보다 훨씬 크게 써봐.”
솔라는 새 메모지에 이전보다 두 배는 족히 될 법한 크기로 ‘안녕’이라고 썼다.
“이번엔 뭐가 바뀌었어?”
“글자 크기.”
“좋아.” 루나가 고개를 끄덕였다. 루나는 솔라가 글씨를 쓴 메모지 두 장을 나란히 놓고 물었다. “글자 색을 바꾸거나 크기를 키웠을 때, 이 메모지 자체가 움직였어? 아니면 메모지 주변의 공간이 밀려나거나 했니?”
솔라는 잠시 생각에 잠겼다. 글자 색을 바꾼 메모지, 글자 크기를 키운 메모지. 두 경우 모두 바뀐 것은 메모지 위에 쓰인 ‘글자’ 자체였다. 메모지라는 ‘공간’ 자체에는 아무런 변화도 없었다. 메모지가 책상 위에서 차지하는 영역은 그대로였다.
“아니. 글자만 바뀌었어. 종이는 그대로인데.”
“바로 그거야.” 루나가 부드럽게 말했다. “네가 지금 한 게 CSS의 color랑 font-size가 하는 일이야. 그 속성들은 박스, 즉 메모지 자체를 움직이거나 그 주변 공간을 다루지 않아. 오직 그 안에 있는 ‘내용물’, 지금 경우에는 ‘글자’에만 영향을 주지.”
솔라의 눈이 동그래졌다. ‘내용물만 바꾼다.’ 그제야 무언가 머릿속에서 명확해지는 기분이었다. 솔라는 다시 자신의 노트북 화면을 보았다. 화면 속 코드에서 font-size: 32px; 라고 적힌 부분을 지워보았다. 그러자 박스의 크기는 변하지 않고 안에 있던 글자만 작아졌다. 이번엔 color: blue;를 추가했다. 글자만 파랗게 변할 뿐, 역시 박스의 위치나 다른 요소와의 간격에는 아무런 영향이 없었다.
지금까지는 모든 속성이 박스의 공간과 관련 있을 거라 막연히 짐작했었다. 하지만 아니었다. 어떤 속성들은 박스라는 집 자체는 건드리지 않고, 그저 집 안의 가구(내용물)만 꾸미는 역할을 했던 것이다.
“아! 그러니까 color랑 font-size는 이 상자 자체의 크기나 위치를 바꾸는 게 아니라, 그냥 이 안에 있는 글자, 내용물만 꾸미는 거였구나.”
솔라의 목소리에 깨달음의 빛이 스쳤다. 드디어 수많은 CSS 속성들 사이에서 첫 번째 구분이 생겼다. ‘내용물을 꾸미는 것’과 ‘공간을 다루는 것’.
확실히 이해했다는 듯 솔라가 고개를 끄덕였다. 하지만 시선은 어느새 자신이 글씨를 썼던 새하얀 메모지에 머물러 있었다. 빨갛고 커다란 ‘안녕’이라는 글자.
문득 새로운 질문이 떠올랐다.
“언니, 그러면 글자 말고… 이 글자가 쓰인 종이 자체를 꾸미고 싶으면 어떡해? 이 하얀색 메모지 전체에 색을 칠하고 싶으면 말이야.”
2장: 배경색으로 박스의 안쪽 공간 알아보기
솔라의 질문이 끝나자, 루나는 대답 대신 서랍을 열어 무언가를 꺼냈다. 색색의 종이 몇 장과 문구점에서 흔히 볼 수 있는 투명 라벨 스티커 한 장이었다. 루나는 그것들을 솔라의 노트북 옆, 하얀 메모지가 놓여 있던 자리에 나란히 두었다. 어젯밤 솔라가 글자를 쓰고 꾸몄던 메모지는 이미 치워져 있었다. 대신 그 자리엔 선명한 노란색, 파란색 색종이와 비어있는 투명 스티커가 새로운 풍경을 만들고 있었다.
루나는 턱짓으로 노트북 화면을 가리켰다. 화면에는 여전히 하얀 배경 위에 ‘안녕’이라는 글자를 담은 상자 하나가 덩그러니 놓여 있었다. 어제 color와 font-size를 실험했던 바로 그 상태였다. 루나가 입을 열었다.
“네가 말했던 거, 글자 말고 종이 자체에 색을 칠하는 거. 코드로 해볼까?”
루나는 CSS 파일에 background-color라는 속성을 타이핑해보라고 권했다. 솔라는 고개를 끄덕이며 익숙하게 코드를 수정하기 시작했다. 머릿속으로는 형광펜으로 글자를 쭉 긋는 이미지를 떠올렸다. 글자 주변만 예쁘게 색칠될 거라고 기대했다.
background-color: lightblue;
솔라가 코드를 저장하자마자, 화면이 번쩍하고 바뀌었다. 하지만 결과는 솔라의 예상과 전혀 달랐다. ‘안녕’이라는 글자 주변만 하늘색으로 물든 게 아니었다. 글자를 감싸고 있던 사각형 영역 전체가 하나의 덩어리처럼 빈틈없이 하늘색으로 채워졌다. 마치 글자가 하늘색 색종이 위에 인쇄된 것처럼 보였다.
“어?”
솔라의 입에서 낮은 탄성이 터져 나왔다.
“나는… 글자 주변만 칠해질 줄 알았는데. 상자 전체가 칠해지네?”
그녀의 생각 속 형광펜과 화면 속 네모난 색상 블록 사이의 간극이 꽤 커 보였다. 글자를 꾸미는 것과는 확실히 다른 무언가였다. 공간에 영향을 주긴 하는데, 어떻게 다른 건지 아직 감이 잡히지 않았다.
루나는 말없이 책상 위에 놓아두었던 투명 스티커 한 칸을 떼어 솔라에게 건넸다.
“여기에 ‘안녕’이라고 써봐.”
솔라는 네임펜으로 스티커 중앙에 ‘안녕’이라고 적었다. 투명한 비닐 너머로 글씨가 선명했다.
“좋아. 이제 그 스티커의 ‘배경’을 하늘색으로 칠한다고 상상해봐.” 루나가 물었다. “어디를 칠할 거야? ‘안녕’이라는 글자 주변만 조심스럽게? 아니면 스티커 전체를?”
솔라는 잠시 멈칫했다. ‘배경을 칠한다’는 말의 의미를 곱씹었다. 만약 글자 주변만 칠한다면 그건 배경을 칠한 게 아니라, 글자에 그림자를 넣거나 꾸밈 효과를 준 것에 가까웠다. 스티커라는 사물의 ‘배경’은 스티커의 네모난 영역 전체였다.
“아… 스티커 전체를 다 칠해야지. 그래야 ‘배경’을 칠했다고 할 수 있으니까.”
그 순간, 솔라는 깨달았다는 듯 고개를 들어 화면을 다시 보았다. 화면 속 하늘색 사각형이 이제는 다르게 보였다. 그건 더 이상 낯선 색상 블록이 아니었다. 방금 솔라가 손에 쥔 투명 스티커와 똑같은 것이었다. 글자(content)를 담고 있는, 보이지 않던 하나의 영역. background-color는 그 영역을 색으로 드러내 보여주는 역할을 했던 것이다.
“그렇구나! color는 스티커 위에 쓰인 글자 색을 바꾸는 거였고, background-color는 스티커 자체의 색깔을 바꾸는 거였네. 요소가 차지하는 그 공간 전체를 채우는 거구나.”
솔라는 font-size가 글자라는 ‘내용물’의 크기를 바꾸듯, background-color는 내용물이 담긴 ‘공간’의 색을 채운다는 것을 비로소 시각적으로 이해했다. 드디어 ‘내용물’과 ‘안쪽 공간’이라는 두 번째 구분이 명확해졌다.
자신이 만든 하늘색 상자를 만족스럽게 바라보던 솔라의 미간이 다시 살짝 찌푸려졌다.
“그런데 언니, 글씨가 하늘색 상자 가장자리에 너무 딱 붙어있어서 좀 답답해 보여. 이 상자 안에서, 글씨랑 상자 테두리 사이에 공간을 좀 만들고 싶은데… 그건 어떻게 해?”
새로운 속성을 배우자, 새로운 아쉬움이 보이기 시작했다. 상자 안쪽을 쾌적하게 만들고 싶은 마음. 솔라의 시선은 하늘색 상자 속, 가장자리에 아슬아슬하게 붙어 있는 ‘안녕’이라는 글자에 머물러 있었다.
3장: padding으로 내용물과 테두리 사이 간격 조절하기
솔라는 노트북 화면에 떠 있는 하늘색 상자를 노려보았다. ‘안녕’이라는 글자가 상자 왼쪽 위에 위태롭게 달라붙어 있는 모습이 영 마음에 들지 않았다. 답답했다. background-color 덕분에 상자의 ‘안쪽 공간’이 어디까지인지는 알게 됐지만, 그 공간을 어떻게 더 쾌적하게 만들 수 있을지는 감이 오지 않았다.
그때 옆에 있던 루나가 솔라의 책상 위를 가만히 정리했다. 어제 썼던 색종이와 투명 스티커를 한쪽으로 치우고, 대신 아무것도 그려지지 않은 깨끗한 A4 용지 한 장과 펜을 가져와 솔라 앞에 놓았다. 이전의 실험 도구들이 사라지고 나타난 새하얀 종이는 마치 리셋 버튼처럼 느껴졌다.
루나는 코드가 아니라 종이를 가리켰다.
“그 종이 한가운데에 ‘안녕’이라고 작게 써볼래?”
솔라는 루나의 의도를 궁금해하며 펜을 들어 종이 중앙에 ‘안녕’이라고 적었다. 텅 빈 종이 위에 글자만 덩그러니 놓였다.
“좋아. 이제 그 글자 주변으로, 글자랑 닿지 않게 여유 공간을 충분히 두고 네모난 선을 그려봐. 액자 프레임처럼.”
솔라는 루나의 말에 따라 ‘안녕’이라는 글자에서 사방으로 넉넉하게 간격을 띄운 뒤, 조심스럽게 네모난 테두리를 그렸다. 이제 글자는 자신이 그린 선 안쪽에서 안정적으로 자리 잡은 것처럼 보였다. 글자와 선 사이에는 하얀 여백이 생겼다.
“네가 지금 답답해하는 게 바로 이거 아냐?” 루나가 화면과 솔라가 그림을 그린 종이를 번갈아 가리키며 말했다. “화면 속 상자에서는 글자가 가장자리에 딱 붙어 있는데, 네가 그린 그림에선 글자와 테두리 선 사이에 공간이 있잖아.”
“응, 맞아! 바로 이거야. 이 공간을 만들고 싶어.” 솔라가 고개를 주억거렸다.
“이 공간의 이름이 ‘안쪽 여백’이야. 코딩에서는 padding이라고 부르지.”
padding. 솔라는 들어본 적 있는 단어였다. 하지만 그저 ‘여백’이라고만 알고 있었다. 막연히 다른 상자랑 거리를 둘 때 쓰는 거라고 짐작했을 뿐, 이렇게 상자 ‘안쪽’에 공간을 만드는 역할일 거라고는 생각하지 못했다.
“한번 직접 넣어볼까?”
루나의 말에 솔라는 다시 키보드 위로 손을 가져갔다. CSS 파일에 padding: 20px; 이라는 한 줄을 추가했다. 코드를 저장하는 순간, 솔라는 상자 자체가 오른쪽으로 20픽셀만큼 밀려날 거라고 예상했다. 여백이니까, 간격을 벌리는 거니까.
하지만 화면의 변화는 솔라의 예상을 또다시 빗나갔다. 하늘색 상자는 옆으로 움직이지 않았다. 대신, 상자 자체가 거대해졌다. 글자는 그대로 있는데, 글자를 둘러싼 하늘색 영역이 사방으로 뚱뚱하게 부풀어 올랐다. 답답하게 가장자리에 붙어 있던 ‘안녕’ 글자는 이제 넉넉한 하늘색 공간 한가운데에 편안하게 자리 잡고 있었다.
“어? 상자가… 커졌네?”
솔라는 놀라서 중얼거렸다. 밀려나는 게 아니라, 커졌다. 그리고 새로 생긴 공간은 투명하지 않았다. 이전과 똑같은 하늘색 background-color로 채워져 있었다.
그 순간, 솔라의 머릿속에서 방금 그림을 그렸던 종이와 화면 속 상자가 겹쳐졌다. 종이에 그렸던 테두리 선이 바로 커진 상자의 새로운 가장자리였다. 글자와 선 사이에 남겨두었던 하얀 여백이 바로 padding이었고, 그 padding이 background-color로 채워진 것이다.
“아! padding은 상자를 미는 게 아니구나. 상자 안쪽에 솜을 채워서 부풀리는 것 같은 거네! 그래서 배경색이 이 솜 채운 부분까지 다 칠해지는 거고.”
솔라는 드디어 깨달았다. padding은 외부와의 거리를 조절하는 속성이 아니었다. 내용물과 경계 사이의 공간, 즉 ‘안쪽 여백’을 만들어 요소 자체의 시각적 크기를 키우는 역할이었다. 덕분에 ‘내용물’, ‘안쪽 공간’, 그리고 ‘안쪽 여백’이라는 세 가지 개념이 머릿속에서 제자리를 찾았다.
이제 화면 속 하늘색 상자는 더 이상 답답해 보이지 않았다. 만족스러운 미소를 짓던 솔라의 눈에 문득 새로운 궁금증이 어렸다.
“그런데 언니, 상자가 커지고 예뻐진 건 좋은데… 어디까지가 우리 상자고 어디부터가 바깥인지 좀 애매한 것 같아. 이 하늘색 공간의 끝에 명확한 선이 하나 있으면 좋겠는데.”
솔라의 시선은 부풀어 오른 하늘색 상자의 흐릿한 경계선에 머물러 있었다. 안과 밖을 구분 지어줄 명확한 울타리가 필요했다.
4장: border로 박스의 경계선을 명확히 하기
솔라의 시선은 padding 덕분에 쾌적해진 하늘색 상자에 머물러 있었다. 하지만 만족감은 길지 않았다. 상자가 커지고 글자가 편안해진 건 좋았지만, 그 하늘색 영역이 어디서 끝나고 하얀 바탕화면이 어디서 시작하는지 그 경계가 모호했다. 마치 솜사탕처럼 부풀어 오른 상자의 끝이 희미하게 번지는 것 같아 어딘가 미완성인 느낌을 지울 수 없었다.
바로 그때, 옆에 있던 루나가 조용히 움직였다. 솔라가 아까 ‘안녕’이라는 글자 주위에 네모난 선을 그렸던 A4 용지를 집어 들었다. 솔라는 그 종이에 글자와 간격을 두고 연필로 얇은 액자 프레임을 그렸었다. 루나는 말없이 두꺼운 검은색 마커 펜을 들더니, 솔라가 그려놓은 바로 그 연필선 위를 그대로 따라 덧그리기 시작했다. 지익- 지익-. 마커가 종이를 스치는 소리와 함께, 희미하던 연필선은 순식간에 두껍고 선명한 검은색 테두리로 변했다. 이전에는 그저 공간을 나누는 기준선처럼 보였던 것이, 이제는 그 자체로 존재감을 뽐내는 ‘벽’처럼 보였다.
“아!”
솔라가 탄성을 내뱉었다. 루나가 그린 검은 테두리는 솔라가 마음속으로 원했던 바로 그것이었다. 모호한 경계를 명확하게 정의해주는 단단한 울타리.
“이거! 나도 이거 하고 싶어. 내 상자에 이렇게 선을 그리고 싶어.”
솔라는 흥분하며 노트북으로 몸을 돌렸다. 루나는 나지막이 한 단어를 알려주었다.
“border.”
border. 경계. 솔라는 직관적으로 이해했다. 그녀는 망설임 없이 CSS 코드에 새로운 속성을 추가했다. border: 2px solid black;. 코드를 저장하자, 화면 속 하늘색 상자의 가장자리에 방금 루나가 종이에 그렸던 것처럼 선명한 검은색 테두리가 나타났다. 희미하게 번져 보이던 상자의 윤곽이 또렷해지자, 비로소 하나의 완성된 요소처럼 보였다.
만족스럽게 화면을 보던 솔라의 고개가 갸우뚱해졌다.
“음… 이것도 padding 같은 건가? padding은 배경색으로 채워지는 여백이고, border는 검은색으로 채워지는 여백이고? 결국 이것도 상자 안쪽에 공간을 더하는 거 아니야?”
솔라는 border가 padding과 비슷한 역할을 하는, 그저 색깔만 다른 내부 공간의 한 종류일 거라고 추측했다. 안쪽에 솜을 더 채우는데, 이번엔 검은색 솜을 채운 거라고 생각한 것이다.
루나는 대답 대신, 다시 검은 테두리가 그려진 A4 용지를 가리켰다.
“내가 검은 선을 어디에 그었지? 네가 그린 연필선 안쪽에 그렸어, 아니면 그 선 바로 위에 그렸어?”
솔라는 종이를 자세히 들여다보았다. 자신이 그렸던 연필선은 글자와의 ‘안쪽 여백’(padding)을 만들기 위한 것이었다. 루나가 그은 검은색 마커 선은 그 여백을 침범하지 않았다. 정확히 연필선이 있던 자리를 덮으며, 여백의 바깥쪽 끝에 그려져 있었다. 검은 선은 ‘안쪽 여백’의 일부가 아니라, 여백이 끝나는 지점에 세워진 ‘담장’이었다.
“아… 연필선 바로 위에 그렸어. 안쪽으로 들어오진 않았네.”
그 순간, 솔라는 무언가 깨달은 듯 브라우저의 개발자 도구를 켰다. 요소 검사 기능을 이용해 자신이 만든 상자를 클릭하자, 익숙한 박스 모델 다이어그램이 나타났다. 파란색의 콘텐츠 영역, 초록색의 padding 영역. 그리고 padding 영역을 감싸는 노란색 띠가 보였다. border.
그것은 padding의 안쪽이 아닌, 명백히 바깥쪽이었다.
“그렇구나! border는 안쪽 여백이 아니었어. padding으로 만들어진 공간의 ‘바깥’에 그려지는 경계선, 그냥 ‘선’ 그 자체였네. 배경색이 padding까지는 채우지만, border까지는 넘어오지 않는 이유가 이거였구나.”
솔라는 border가 공간을 차지하는 ‘여백’이 아니라, 공간과 공간을 나누는 ‘경계’의 정체성을 가진다는 것을 이해했다. padding이 집 안의 가구와 벽 사이의 거리라면, border는 그 ‘벽’ 자체였다. ‘내용물’, ‘안쪽 여백’, 그리고 ‘경계선’. 세 개의 층이 비로소 명확하게 분리되었다.
이제 솔라의 상자는 완벽해 보였다. ‘안녕’이라는 내용물, 글자를 편안하게 감싸는 하늘색 안쪽 여백, 그리고 그 모든 것을 단단하게 마무리하는 검은색 경계선까지.
흐뭇하게 웃던 솔라는 문득 상자 바깥의 하얀 화면으로 시선을 옮겼다. 상자 자체는 멋지게 완성됐지만, 여전히 화면 구석에 덩그러니 놓여 있었다. 만약 이런 상자를 하나 더 만들면 어떻게 될까?
“언니, 이제 상자는 정말 예쁜데, 이 상자 바깥은 어떻게 해? 이 상자랑 다른 상자가 너무 딱 붙어있으면 보기 싫을 것 같아. 우리 집 담장 밖에, 옆집이랑 간격을 좀 두려면 어떡하지?”
솔라의 질문은 이제 상자 안이 아닌, 상자 밖의 세계로 향하고 있었다.
5장: margin으로 박스 바깥 여백을 줘서 다른 요소와 분리하기
솔라의 질문은 상자 안이 아닌, 상자 밖의 세계로 향하고 있었다. ‘옆집과의 간격.’ 그 질문을 곱씹던 솔라는 키보드 위로 손을 옮겼다. 백문이 불여일견. 그녀는 자신이 만든 ‘안녕’ 상자의 HTML 코드를 그대로 복사해서 바로 아랫줄에 붙여넣었다. 화면에 똑같은 상자가 하나 더 생길 터였다. 그러면 옆집이 생긴 셈이니, 간격을 조절해볼 수 있겠지.
코드를 저장하자마자, 화면이 갱신되었다. 예상대로 똑같이 생긴 두 번째 상자가 나타났다. 하지만 두 상자는 솔라의 생각보다 훨씬 더 가까웠다. 너무 가깝다 못해, 첫 번째 상자의 아래쪽 검은 테두리와 두 번째 상자의 위쪽 검은 테두리가 한 치의 오차도 없이 맞닿아 있었다. 마치 두 개의 상자가 아니라, 가운데에 선이 그어진 하나의 긴 상자처럼 보였다. 그 모습은 어딘가 답답하고 갑갑했다.
“이게 아닌데…”
솔라는 미간을 찌푸렸다. 그녀의 시선은 다시 CSS 코드로 향했다. ‘간격’을 만드는 속성. 그녀가 아는 것은 padding이었다. padding을 더 주면 상자가 더 커지니까, 커진 상자가 아래 상자를 밀어내지 않을까? 솔라는 첫 번째 상자의 스타일에 padding: 40px; 라고 값을 더 키워 넣었다.
결과는 예상과 또 달랐다. 첫 번째 상자는 확실히 더 뚱뚱해졌다. 안쪽의 하늘색 공간이 넓어지면서 글자와 테두리 사이의 거리가 쾌적하게 벌어졌다. 하지만 거기까지였다. 상자가 커진 만큼 두 번째 상자는 아래로 밀려났지만, 두 상자의 검은 테두리는 여전히 냉정하게 서로 맞닿아 있었다. padding은 상자 안쪽을 부풀릴 뿐, 상자 밖의 관계에는 아무런 영향을 주지 못했다. ‘안쪽 여백’이라는 이름 그대로였다.
그때 옆에 있던 루나가 조용히 지난 장에서 썼던 A4 용지 두 장을 가져왔다. 두 장 모두 중앙에 ‘안녕’이라는 글씨가 쓰여 있고, 그 주위로 넉넉한 안쪽 여백과 선명한 검은색 테두리가 그려져 있었다. 루나는 그 두 장의 종이를 책상 위에 나란히 놓았다. 노트북 화면 속 상자들처럼, 두 종이의 테두리가 서로 딱 붙도록.
“자, 이 두 집 사이의 거리를 벌리고 싶어.” 루나가 입을 열었다. “어떻게 할래? 첫 번째 집에 솜을 더 채워서 집을 더 뚱뚱하게 만들 거야, 아니면 첫 번째 집 주변에 ‘이 안으로는 들어오지 마세요’하는 투명한 영역을 만들 거야?”
솔라의 눈이 커졌다. ‘투명한 영역’. 그 말은 마치 정답처럼 들렸다. 솜을 더 채우는 것(padding)이 해결책이 아니라는 건 방금 화면에서 확인했다. 필요한 것은 집 안의 공간이 아니라, 집과 집 사이의, 담장 밖의 공간이었다.
“당연히… 집 주변에 공간을 만들어야지.”
“바로 그거야. 그게 margin이야. 우리 집 담장(border)과 옆집 담장 사이의 거리. 박스 바깥의 여백이지.”
margin. 솔라는 또다시 들어는 봤지만 의미는 막연했던 단어와 마주했다. 하지만 이번에는 달랐다. padding과의 차이점을 몸으로 겪은 뒤였다. 그녀는 주저 없이 코드 편집기를 열고, 아까 실패했던 padding 값을 원래대로 돌려놓았다. 그리고 그 아래, 새로운 속성을 추가했다.
margin: 20px;
코드를 저장하는 순간, 솔라는 숨을 죽였다. 화면 속 두 상자 사이에, 드디어 그토록 원하던 공간이 생겨났다. 첫 번째 상자의 검은 테두리와 두 번째 상자의 검은 테두리 사이에 시원한 간격이 벌어졌다. 상자 자체의 크기는 변하지 않았다. padding도, border도 그대로였다. 오직 상자 바깥에 보이지 않는 힘이 생겨나 다른 상자를 밀어낸 것처럼 보였다.
그제야 모든 조각이 맞춰졌다. padding과 margin. 둘 다 ‘여백’이라는 이름 때문에 헷갈렸지만, 그 역할은 명백히 달랐다. padding은 상자 안, 배경색이 칠해지는 영역을 확장하며 내부 콘텐츠를 보호하는 ‘안쪽 여백’이었다. 반면 margin은 상자 밖, 배경색도 칠해지지 않는 투명한 영역으로, 다른 요소와의 거리를 확보하는 ‘바깥 여백’이었다.
“아! padding은 상자 안쪽에 솜을 채워서 부풀리는 거고, margin은 상자 바깥에 투명한 보호막을 쳐서 다른 요소들을 밀어내는 거였구나!”
솔라는 브라우저의 개발자 도구를 열어 박스 모델 다이어그램을 다시 확인했다. 콘텐츠(파랑), padding(초록), border(노랑)로 이루어진 익숙한 구조 바깥쪽에, 주황색으로 빛나는 margin 영역이 선명하게 보였다. 안과 밖. 그 차이가 비로소 명확하게 눈에 들어왔다.
솔라는 잠시 생각에 잠기더니, 지금까지 배운 모든 속성을 사용해 무언가를 만들기 시작했다. 마치 마지막 시험을 치르듯, 그녀의 손가락이 키보드 위를 빠르게 움직였다. 그녀는 하나의 게시글 카드를 만들고 있었다.
.card {
/* 내용물 꾸미기 (1장) */
color: #333;
font-size: 16px;
/* 안쪽 공간 채우기 (2장) */
background-color: #f9f9f9;
/* 안쪽 여백 만들기 (3장) */
padding: 20px;
/* 경계선 그리기 (4장) */
border: 1px solid #ddd;
/* 바깥 여백으로 분리하기 (5장) */
margin-bottom: 24px;
}주석을 하나씩 달아가며 코드를 완성한 솔라는 화면을 바라보았다. 화면에는 이제 엉성한 상자가 아니라, 제목과 내용이 담긴 근사한 게시글 카드가 놓여 있었다. 옅은 회색 배경 위로 글자들이 편안하게 자리 잡고 있었고, 얇은 테두리가 카드의 영역을 명확히 알려주었다. 그리고 그 아래에는 적절한 간격을 두고 다음 카드가 놓일 자리가 비어 있었다.
솔라는 미소를 지었다. 처음엔 그저 뒤죽박죽인 단어들의 나열로 보였던 CSS 속성들이, 이제는 머릿속에서 명확한 층을 이루고 있었다. 내용물, 안쪽 여백, 경계선, 그리고 바깥 여백. 화면 위의 모든 네모난 것들이 가진 질서, ‘박스 감각’을 마침내 손에 넣은 순간이었다.