7강 · 박스 모델

한눈에

CSS 규칙 여섯 개로 페이지가 페이지처럼 읽히게 되었습니다. 오늘은 그 규칙들이 바꾸고 있던 모양 자체를 들여다봅니다.

오늘 다룰 내용은 세 가지입니다. 먼저 모든 요소가 가진 네 겹을 봅니다. 그다음 아바타를 둥글게 만들고 테두리를 둘러줍니다. 마지막으로 바닥글을 본문에서 떼어냅니다. 앞으로 나올 모든 것의 바탕이 되는 생각입니다. 페이지의 모든 요소는 사각형입니다. 원도 모서리를 둥글게 만든 사각형입니다. 브라우저는 상자를 배치할 뿐 다른 일은 하지 않습니다. 이게 보이기 시작하면 배치가 더 이상 알 수 없는 것이 아니게 됩니다. 아무 사이트에서나 개발자 도구를 열어보시면 상자들이 보입니다. 글자에서 바깥으로 세어 나가면 네 겹입니다. content 는 글자나 이미지 자체입니다. padding 은 상자 안쪽, 내용 주변의 공간입니다. border 는 padding 가장자리에 그려지는 선입니다. margin 은 바깥쪽 공간이고, 다른 상자를 밀어냅니다. 배경은 border 까지만 칠해지고 그 바깥은 칠해지지 않습니다. 그러면 padding 과 margin 중에 어떻게 고를까요. 배경이 어디까지 칠해지길 원하는지 물어보시면 됩니다. 색칠된 상자를 키우고 싶으면 padding 입니다. 다음 상자와 떨어지게 하려면 margin 입니다. 6강의 contact 덩어리가 padding 을 쓴 이유가 그것입니다. 폴더를 다시 열어보겠습니다. 오늘은 전부 스타일시트에서 일어납니다. 이번에는 HTML 이 전혀 바뀌지 않습니다. 새 규칙 두 개를 넣는데, 둘 다 상자에 관한 것입니다. 둘 다 맨 아래, 지난번에 남겨둔 주석 밑에 들어갑니다. 먼저 아바타입니다. 3강부터 계속 사각형이었습니다. border-radius 는 모서리를 얼마나 둥글게 할지 정합니다. 50 퍼센트는 폭의 절반이고, 그 지점에서 사각형은 원이 됩니다. 그다음 border 를 굵기, 모양, 색 순서로 적습니다. display 를 block 으로 두면 이미지 아래에 생기는 틈이 없어집니다. 그다음 바닥글인데, 네 겹 중 세 겹을 한 번에 씁니다. margin-top 이 위쪽 내용에서 떨어뜨립니다. border-top 이 위쪽에 가는 선을 그립니다. padding-top 이 그 선과 글자 사이에 공간을 둡니다. 세 겹을 쓰면 바닥글이 또 하나의 문단처럼 보이지 않게 됩니다.

파일이 길어져서 글자를 먼저 줄이겠습니다. 두 규칙 모두 맨 아래 boxes 주석 밑에 들어갑니다. 선택자 img 는 모든 이미지를 고르는데, 우리에게는 하나뿐입니다. footer 는 4강에서 추가한 태그를 고릅니다. 맨 끝에 다음 시간을 위한 주석을 하나 더 남겨둡니다. Ctrl + S 로 저장하시면 되고, 맥에서는 Cmd + S 입니다.

style.css

img {
  border-radius: 50%;
  border: 4px solid #C98B1B;
  display: block;
}

footer {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid #E3E4E7;
  color: #6B7078;
  font-size: 14px;
}

/* lists */

서버는 늘 하던 대로 띄웁니다. 7강째인데 여전히 한 줄입니다. 끝날 때까지 그대로 두시면 됩니다.

터미널

python -m http.server 5500

아바타가 금색 테두리를 두른 원이 되었습니다. 이미지 파일은 전혀 바뀌지 않았습니다. 여전히 사각형 SVG 이고, CSS 가 모서리를 구부리고 있는 것입니다. 아래로 내려보시면 바닥글이 가는 선 아래에 놓여 있습니다. 선언 네 개가 그 일을 전부 했습니다. 지금 이런 화면이 보이고 계셔야 합니다. 위에는 둥근 아바타, 아래에는 떼어진 바닥글입니다. 원이 타원으로 나왔으면 이미지가 정사각형이 아닌 것입니다. 우리 SVG 는 160 곱하기 160 이라 제대로 나옵니다. 휴대폰 사진은 보통 정사각형이 아니라서 먼저 잘라야 합니다. 하나 더 말씀드립니다. 어디서든 만나게 되는 내용입니다. 두 상자 사이의 margin 은 하나로 합쳐집니다. 한 덩어리 아래 40, 다음 덩어리 위 20 이면 결과는 40 입니다. 60 이 아닙니다. 처음에는 대부분 60 을 기대하게 됩니다. padding 은 절대 합쳐지지 않고, padding 을 쓰는 이유가 하나 더 늘어납니다. 여기서는 보통 세 가지에서 막히게 됩니다. 첫째, 원을 만들려고 픽셀 값을 쓰는 경우입니다. 50픽셀은 정해진 만큼만 둥글게 해서, 모양이 크기에 따라 달라집니다. 둘째, margin 에 배경색을 주려는 경우입니다. margin 은 배경 바깥이라 아무 일도 일어나지 않습니다. 셋째, border 에 모양만 있고 굵기가 없는 경우입니다. 대부분의 브라우저가 아무것도 안 그려서 원인을 찾기 어렵습니다. 마치기 전에 서버를 멈춰두겠습니다. 스타일시트가 56줄이고 규칙 여덟 개가 들어 있습니다. 쭉 내려보셔도 규칙 하나하나가 한눈에 읽힙니다. 전부 네 겹 중 하나를 바꾸고 있는 것입니다. 폴더는 그대로 두세요. 다음 시간에는 상자 두 개를 나란히 놓습니다. 오늘 기억하실 것 세 가지입니다. 모든 것은 상자이고, content, padding, border, margin 으로 되어 있습니다. padding 은 안쪽이라 배경이 칠해지고, margin 은 그렇지 않습니다. 상자 사이의 margin 두 개는 합이 아니라 더 큰 쪽이 됩니다. 다음 시간에는 플렉스박스로 상자를 나란히 놓아보겠습니다.

---

글로 정리한 같은 내용은 하루글에서도 보실 수 있습니다.