Return to Video

CSS 박스 모델

  • 0:00 - 0:01
    여러분은 기억날 거에요
  • 0:01 - 0:05
    저번 시간에 박스 같은 걸
    만들었던 것을요
  • 0:05 - 0:06
    'div'태그로 만들어서
  • 0:06 - 0:08
    배경색을 줬었죠
  • 0:08 - 0:11
    하지만 실은 웹페이지의
    모든 요소가
  • 0:11 - 0:13
    박스로 취급돼요
  • 0:13 - 0:14
    브라우저에 의해서는요
  • 0:14 - 0:17
    그게 박스처럼 보이건
    보이지 않건 말이죠
  • 0:17 - 0:21
    이 헤딩도 박스고
    문단도 박스고
  • 0:21 - 0:24
    우리가 만든 도
    박스에요
  • 0:24 - 0:28
    어떤 박스들은 크고
    어떤 것은 작고
  • 0:28 - 0:33
    'span'같은 것은 줄 안에 있고
    'div'같은 것은 구역이죠
  • 0:33 - 0:36
    하지만 모두 박스로
    취급돼요
  • 0:36 - 0:38
    그게 무슨 상관일까요?
  • 0:38 - 0:41
    왜냐하면 '박스 모델'이라고
    불리는 것이 있기 때문이죠
  • 0:41 - 0:44
    제가 방금 붙여넣기한
    그림에서 처럼요
  • 0:44 - 0:46
    모든 요소 박스는
    네 개의 파트로 구성돼요
  • 0:46 - 0:49
    실제 내용, 안쪽 여백,
  • 0:49 - 0:51
    테두리, 바깥 여백이죠
  • 0:51 - 0:54
    CSS를 이용해서 안쪽 여백, 테두리,
    바깥 여백을 수정할 수 있어요
  • 0:54 - 0:57
    여러분은 그게 어떤 건지
    곧 깨닫게 될 거에요
  • 0:57 - 0:59
    바깥 여백으로
    시작해 볼게요
  • 0:59 - 1:02
    이것은 박스 주변의
    투명한 영역이에요
  • 1:02 - 1:04
    이 박스를 다른 요소들과
    나누는 영역이죠
  • 1:04 - 1:08
    이 바깥 여백은 우리가 가장 즐겨쓰는
    단위인 '픽셀'로 지정할 수 있어요
  • 1:09 - 1:13
    공식 정보 칸의 사방에
    15픽셀의 바깥 여백을 주려면
  • 1:14 - 1:20
    'margin: 15px;'
    라고 하면 돼요
  • 1:21 - 1:22
    변화가 보이세요?
  • 1:23 - 1:26
    만약 각 면에 여백을
    다르게 주고 싶다면요?
  • 1:26 - 1:29
    상하여백을 좌우여백보다
    더 주고 싶다면요?
  • 1:29 - 1:31
    여백의 양을 시계방향의
    순서대로 주면 돼요
  • 1:32 - 1:33
    위에서 부터
    시작해서 말이에요
  • 1:33 - 1:41
    그러니까 위는 15px, 오른쪽은 0px,
    아래는 10px, 왼쪽은 6px라고 써요
  • 1:43 - 1:46
    아니면 각 면에 대한 속성을
    이용할 수 도 있어요
  • 1:46 - 1:48
    몇 개의 면에만
    주고 싶다면요
  • 1:48 - 1:52
    고양이 그림 주위에
    약간의 공백을 주고 싶은데
  • 1:53 - 2:01
    오른쪽이랑
    아래쪽에도 주고 싶네요
  • 2:01 - 2:04
    그리고 나머지에는
    기본 여백 정도면 되고요
  • 2:05 - 2:07
    여백으로 줄 수 있는
    특정한 값도 있어요
  • 2:07 - 2:10
    페이지를 좀 더 예쁘게
    만들 수 있게 말이죠
  • 2:10 - 2:11
    이걸 보여주려면
  • 2:11 - 2:14
    이 전체 페이지에
    를 추가할 거에요
  • 2:14 - 2:17
    id로 "container"를 줄게요
  • 2:18 - 2:22
    이 태그를 추가하고요
    모든 걸 포함하게 되었네요
  • 2:23 - 2:27
    이제 이 div에 대한
    규칙을 추가할 거에요
  • 2:28 - 2:33
    폭은 400픽셀을 주고
    페이지 가운데 정렬할 거에요
  • 2:34 - 2:38
    이걸 'margin-left: 100px;'
    이라고 할 수도 있을 거에요
  • 2:38 - 2:40
    이렇게 하면 제가 보기엔
    가운데 있는 것 처럼 보이죠
  • 2:40 - 2:42
    하지만 여러분에게는
    아닐 수도 있어요
  • 2:42 - 2:45
    왜냐하면 여러분의 브라우저는
    더 크거나 작을 수도 있으니까요
  • 2:45 - 2:46
    우리가 브라우저에게
    말해주고 싶은 것은
  • 2:46 - 2:52
    '여백을 얼마든지 줘서
    양쪽 여백이 같게 해줘'에요
  • 2:52 - 2:56
    이건 'margin: auto;'
    라고 하면 돼요
  • 2:56 - 2:58
    이건 div를 페이지의 가운데로
    정렬하는데 좋은 방법이에요
  • 3:00 - 3:02
    이제 div를 가운데에
    위치시켰으니
  • 3:02 - 3:04
    조금 더 구별되게끔
  • 3:04 - 3:06
    테두리를 추가하고 싶어요
  • 3:06 - 3:09
    CSS 테두리 속성을
    사용해서 말이죠
  • 3:09 - 3:12
    이 div에 빨간 테두리를
    추가해 볼게요
  • 3:13 - 3:14
    'border: '라고 쓰고
  • 3:14 - 3:17
    우리는 테두리의 세 가지
    속성을 정해줘야 해요
  • 3:17 - 3:19
    두께, 스타일, 색상이죠
  • 3:19 - 3:23
    얇은 테두리로 하려면
    '1px'라고 쓸게요
  • 3:23 - 3:25
    평범한 실선
    테두리로 하려면
  • 3:25 - 3:28
    'solid'라고 쓰고
  • 3:28 - 3:32
    빨간색으로 하려면
    제 RGB 선택창을 띄워서
  • 3:32 - 3:37
    타오르는 붉은색을
    고를게요
  • 3:37 - 3:40
    마치 바깥 여백처럼
    테두리도
  • 3:40 - 3:42
    한 쪽에만 줄 수 있어요
  • 3:42 - 3:46
    만약 정말 두꺼운 보라색
    테두리를 위에 주고 싶다면
  • 3:46 - 3:49
    새로운 속성을
    추가하면 돼요
  • 3:49 - 3:54
    'border-top: 10px solid purple;'
  • 3:54 - 3:59
    좋아요
    이제 이미지에 액자를 추가해보죠
  • 3:59 - 4:00
    테두리 속성으로
    이것저것 해볼게요
  • 4:02 - 4:08
    'cute-cat'으로 올라가서
    'border: 6px'
  • 4:08 - 4:12
    'groove red'로 해보죠
  • 4:12 - 4:15
    저는 그루브를 좋아하지 않으니까
    'double'로 해볼까요?
  • 4:15 - 4:20
    그냥 'ridge'로 해볼게요
    아! 이제 액자 같아 보이네요
  • 4:21 - 4:24
    그러면 공식 정보칸에도
    테두리를 적용해볼까요?
  • 4:25 - 4:27
    'border:'
    너무 크게하지 않을게요
  • 4:27 - 4:28
    '2px'
  • 4:28 - 4:31
    'dotted'로 해볼게요
  • 4:31 - 4:34
    그냥 차분한 회색으로 하죠
  • 4:35 - 4:37
    'dashed'를 한번 해볼게요
  • 4:37 - 4:39
    좋아요
    이제 제가 원하던 거에요
  • 4:40 - 4:42
    테두리를 적용했는데
    뭔가가 거슬리네요
  • 4:42 - 4:45
    사실 정말 많이 거슬려요
  • 4:46 - 4:50
    이 텍스트가 'container' 테두리에
    딱 붙어있는 게 보이세요?
  • 4:51 - 4:54
    그리고 공식 정보 칸도
    딱 붙어있네요
  • 4:54 - 4:56
    정말 이상해보이는데다
  • 4:56 - 4:59
    글자를 읽기 어려워요
  • 4:59 - 5:01
    여기서 안쪽 여백이
    등장해요
  • 5:01 - 5:04
    여러분의 요소가
    배경색이나 테두리를 가진다면
  • 5:04 - 5:06
    여러분은 아마
    안쪽 여백도 주고 싶을 거에요
  • 5:06 - 5:09
    내용과 테두리 사이에
    공백을 줘야하니까요
  • 5:09 - 5:12
    'container'에 안쪽 여백을
    추가해 볼게요
  • 5:12 - 5:17
    이 박스 주위로
    15px를 넣어 볼게요
  • 5:17 - 5:19
    아주 낫네요
  • 5:19 - 5:23
    이제 공식 정보칸에도
    안쪽 여백을 줄게요
  • 5:23 - 5:27
    'padding: 6px'
    아름다워요
  • 5:27 - 5:29
    이미지에는 여백을
    주지 않아도 될 것 같아요
  • 5:29 - 5:32
    액자 안에 저렇게 있으니
    괜찮아 보이니까요
  • 5:32 - 5:35
    이제 여러분은
    박스 모델에 대해 알게 되었어요
  • 5:35 - 5:37
    바깥 여백, 테두리
    그리고 안쪽 여백까지요
  • 5:37 - 5:39
    저는 큰 값과
    밝은 색을 써서
  • 5:39 - 5:40
    여러분에게
    잘 보여주려고 했지만
  • 5:40 - 5:42
    제 페이지는
    약간 부담스러워요
  • 5:42 - 5:45
    여러분의 페이지가 세련되고
    복잡해보이게 하고 싶다면
  • 5:45 - 5:47
    차분한 흰색이나
    회색을 쓰세요
  • 5:47 - 5:49
    여러분이
    어떻게 하든지
  • 5:49 - 5:51
    이 속성들을
    사용하도록 해요
  • 5:51 - 5:54
    왜냐하면 페이지가 어떻게 보여지고
    느껴지는지에 큰 영향을 끼치니까요
Title:
CSS 박스 모델
Description:
more » « less
Video Language:
English
Duration:
05:56

Korean subtitles

Incomplete

Revisions

Our website uses cookies for analysis purposes.