웹 개발 강의 7편 - 박스 모델

6강까지 CSS 규칙 여섯 개를 썼습니다. 오늘은 그 규칙들이 바꾸고 있던 모양 자체를
들여다봅니다.

페이지의 모든 요소는 사각형입니다. 원도 모서리를 둥글게 만든 사각형입니다.
브라우저는 상자를 배치할 뿐 다른 일은 하지 않습니다. 이게 보이기 시작하면
배치가 더 이상 알 수 없는 것이 아니게 됩니다.

네 겹

글자에서 바깥으로 세어 나가면 네 겹입니다.

배경은 border 까지만 칠해지고 그 바깥은 칠해지지 않습니다. padding 과 margin 을
헷갈리는 분들이 많은데, 이 한 줄이 차이의 전부입니다.

고를 때는 배경이 어디까지 칠해지길 원하는지 물어보시면 됩니다. 색칠된 상자를
키우고 싶으면 padding, 다음 상자와 떨어지게 하려면 margin 입니다.

6강의 Contact 덩어리가 padding 을 쓴 이유가 그것입니다.

아바타를 원으로

style.css 의 /* boxes */ 주석 아래에 넣습니다.

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 */

border-radius 는 모서리를 얼마나 둥글게 할지 정합니다. 50 퍼센트는 폭의
절반이고, 그 지점에서 사각형은 원이 됩니다.

border 는 굵기, 모양, 색 순서로 적습니다.

display 를 block 으로 두면 이미지 아래에 생기는 틈이 없어집니다. 이미지는
기본적으로 글자처럼 취급되어서, 글자 아래 여백이 같이 따라옵니다.

이미지 파일은 전혀 바뀌지 않았습니다. 여전히 사각형 SVG 이고, CSS 가 모서리를
구부리고 있는 것입니다.

바닥글을 떼어내기

같은 자리에 이어서 넣습니다.

네 겹 중 세 겹을 한 번에 씁니다.

margin-top 이 위쪽 내용에서 떨어뜨립니다. border-top 이 위쪽에 가는 선을
그립니다. padding-top 이 그 선과 글자 사이에 공간을 둡니다.

세 겹을 쓰면 바닥글이 또 하나의 문단처럼 보이지 않게 됩니다.

margin 이 합쳐진다는 것

어디서든 만나게 되는 내용이라 짚고 갑니다.

두 상자 사이의 margin 은 하나로 합쳐집니다. 한 덩어리 아래 40, 다음 덩어리
위 20 이면 결과는 40 입니다. 60 이 아닙니다. 처음에는 대부분 60 을 기대하게
됩니다.

padding 은 절대 합쳐지지 않습니다. padding 을 쓰는 이유가 하나 더 늘어납니다.

확인하기

python -m http.server 5500

처음 실행하면 윈도우에서 방화벽 경고창이 뜰 수 있습니다. 개인 네트워크만 체크된 상태로 액세스 허용을 눌러주시면 됩니다. 이 서버는 본인 컴퓨터에서만 쓰는 것이라 공용 네트워크는 체크하지 않으셔도 됩니다.

브라우저에서 localhost:5500 으로 들어가시면 됩니다.

아바타가 금색 테두리를 두른 원이 되었고, 아래로 내려보시면 바닥글이 가는 선
아래에 놓여 있습니다. 선언 네 개가 그 일을 전부 했습니다.

원이 타원으로 나왔으면 이미지가 정사각형이 아닌 것입니다. 우리 SVG 는 160 곱하기
160 이라 제대로 나옵니다. 휴대폰 사진은 보통 정사각형이 아니라서 먼저 잘라야
합니다.

자주 발생하는 오류

첫째, 원을 만들려고 픽셀 값을 쓰는 경우입니다. 50픽셀은 정해진 만큼만 둥글게
해서, 모양이 크기에 따라 달라집니다. 원을 원하면 퍼센트를 쓰셔야 합니다.

둘째, margin 에 배경색을 주려는 경우입니다. margin 은 배경 바깥이라 아무 일도
일어나지 않습니다.

셋째, border 에 모양만 있고 굵기가 없는 경우입니다. 대부분의 브라우저가
아무것도 안 그려서 원인을 찾기 어렵습니다.

연습 문제

1. #contact 의 padding 을 margin 으로 바꿔보고 배경이 어떻게 달라지는지 보세요.
2. 아바타의 border-radius 를 12px 로 바꿔보세요.
3. 브라우저 개발자 도구를 열어 요소를 눌러보면 네 겹이 색으로 표시됩니다.

다음 편

8강에서는 플렉스박스로 상자를 나란히 놓습니다.

영상으로 보시려면 링바이트에 같은 내용이 올라가 있습니다.
강의 노트도 함께 보실 수 있습니다.