여러분은 기억날 거에요

저번 시간에 박스 같은 걸
만들었던 것을요

'div'태그로 만들어서

배경색을 줬었죠

하지만 실은 웹페이지의
모든 요소가

박스로 취급돼요

브라우저에 의해서는요

그게 박스처럼 보이건
보이지 않건 말이죠

이 헤딩도 박스고
문단도 박스고

우리가 만든 도
박스에요

어떤 박스들은 크고
어떤 것은 작고

'span'같은 것은 줄 안에 있고
'div'같은 것은 구역이죠

하지만 모두 박스로
취급돼요

그게 무슨 상관일까요?

왜냐하면 '박스 모델'이라고
불리는 것이 있기 때문이죠

제가 방금 붙여넣기한
그림에서 처럼요

모든 요소 박스는
네 개의 파트로 구성돼요

실제 내용, 안쪽 여백,

테두리, 바깥 여백이죠

CSS를 이용해서 안쪽 여백, 테두리,
바깥 여백을 수정할 수 있어요

여러분은 그게 어떤 건지
곧 깨닫게 될 거에요

바깥 여백으로
시작해 볼게요

이것은 박스 주변의
투명한 영역이에요

이 박스를 다른 요소들과
나누는 영역이죠

이 바깥 여백은 우리가 가장 즐겨쓰는
단위인 '픽셀'로 지정할 수 있어요

공식 정보 칸의 사방에
15픽셀의 바깥 여백을 주려면

'margin: 15px;'
라고 하면 돼요

변화가 보이세요?

만약 각 면에 여백을
다르게 주고 싶다면요?

상하여백을 좌우여백보다
더 주고 싶다면요?

여백의 양을 시계방향의
순서대로 주면 돼요

위에서 부터
시작해서 말이에요

그러니까 위는 15px, 오른쪽은 0px,
아래는 10px, 왼쪽은 6px라고 써요

아니면 각 면에 대한 속성을
이용할 수 도 있어요

몇 개의 면에만
주고 싶다면요

고양이 그림 주위에
약간의 공백을 주고 싶은데

오른쪽이랑
아래쪽에도 주고 싶네요

그리고 나머지에는
기본 여백 정도면 되고요

여백으로 줄 수 있는
특정한 값도 있어요

페이지를 좀 더 예쁘게
만들 수 있게 말이죠

이걸 보여주려면

이 전체 페이지에
를 추가할 거에요

id로 "container"를 줄게요

이 태그를 추가하고요
모든 걸 포함하게 되었네요

이제 이 div에 대한
규칙을 추가할 거에요

폭은 400픽셀을 주고
페이지 가운데 정렬할 거에요

이걸 'margin-left: 100px;'
이라고 할 수도 있을 거에요

이렇게 하면 제가 보기엔
가운데 있는 것 처럼 보이죠

하지만 여러분에게는
아닐 수도 있어요

왜냐하면 여러분의 브라우저는
더 크거나 작을 수도 있으니까요

우리가 브라우저에게
말해주고 싶은 것은

'여백을 얼마든지 줘서
양쪽 여백이 같게 해줘'에요

이건 'margin: auto;'
라고 하면 돼요

이건 div를 페이지의 가운데로
정렬하는데 좋은 방법이에요

이제 div를 가운데에
위치시켰으니

조금 더 구별되게끔

테두리를 추가하고 싶어요

CSS 테두리 속성을
사용해서 말이죠

이 div에 빨간 테두리를
추가해 볼게요

'border: '라고 쓰고

우리는 테두리의 세 가지
속성을 정해줘야 해요

두께, 스타일, 색상이죠

얇은 테두리로 하려면
'1px'라고 쓸게요

평범한 실선
테두리로 하려면

'solid'라고 쓰고

빨간색으로 하려면
제 RGB 선택창을 띄워서

타오르는 붉은색을
고를게요

마치 바깥 여백처럼
테두리도

한 쪽에만 줄 수 있어요

만약 정말 두꺼운 보라색
테두리를 위에 주고 싶다면

새로운 속성을
추가하면 돼요

'border-top: 10px solid purple;'

좋아요
이제 이미지에 액자를 추가해보죠

테두리 속성으로
이것저것 해볼게요

'cute-cat'으로 올라가서
'border: 6px'

'groove red'로 해보죠

저는 그루브를 좋아하지 않으니까
'double'로 해볼까요?

그냥 'ridge'로 해볼게요
아! 이제 액자 같아 보이네요

그러면 공식 정보칸에도
테두리를 적용해볼까요?

'border:'
너무 크게하지 않을게요

'2px'

'dotted'로 해볼게요

그냥 차분한 회색으로 하죠

'dashed'를 한번 해볼게요

좋아요
이제 제가 원하던 거에요

테두리를 적용했는데
뭔가가 거슬리네요

사실 정말 많이 거슬려요

이 텍스트가 'container' 테두리에
딱 붙어있는 게 보이세요?

그리고 공식 정보 칸도
딱 붙어있네요

정말 이상해보이는데다

글자를 읽기 어려워요

여기서 안쪽 여백이
등장해요

여러분의 요소가
배경색이나 테두리를 가진다면

여러분은 아마
안쪽 여백도 주고 싶을 거에요

내용과 테두리 사이에
공백을 줘야하니까요

'container'에 안쪽 여백을
추가해 볼게요

이 박스 주위로
15px를 넣어 볼게요

아주 낫네요

이제 공식 정보칸에도
안쪽 여백을 줄게요

'padding: 6px'
아름다워요

이미지에는 여백을
주지 않아도 될 것 같아요

액자 안에 저렇게 있으니
괜찮아 보이니까요

이제 여러분은
박스 모델에 대해 알게 되었어요

바깥 여백, 테두리
그리고 안쪽 여백까지요

저는 큰 값과
밝은 색을 써서

여러분에게
잘 보여주려고 했지만

제 페이지는
약간 부담스러워요

여러분의 페이지가 세련되고
복잡해보이게 하고 싶다면

차분한 흰색이나
회색을 쓰세요

여러분이
어떻게 하든지

이 속성들을
사용하도록 해요

왜냐하면 페이지가 어떻게 보여지고
느껴지는지에 큰 영향을 끼치니까요