1
00:00:00,000 --> 00:00:01,428
여러분은 기억날 거에요

2
00:00:01,428 --> 00:00:04,578
저번 시간에 박스 같은 걸
만들었던 것을요

3
00:00:04,591 --> 00:00:06,409
'div'태그로 만들어서

4
00:00:06,409 --> 00:00:08,352
배경색을 줬었죠

5
00:00:08,352 --> 00:00:10,855
하지만 실은 웹페이지의
모든 요소가

6
00:00:10,865 --> 00:00:12,728
박스로 취급돼요

7
00:00:12,728 --> 00:00:13,939
브라우저에 의해서는요

8
00:00:13,939 --> 00:00:16,508
그게 박스처럼 보이건
보이지 않건 말이죠

9
00:00:16,508 --> 00:00:20,638
이 헤딩도 박스고
문단도 박스고

10
00:00:20,638 --> 00:00:23,748
우리가 만든 도
박스에요

11
00:00:24,358 --> 00:00:28,018
어떤 박스들은 크고
어떤 것은 작고

12
00:00:28,018 --> 00:00:33,058
'span'같은 것은 줄 안에 있고
'div'같은 것은 구역이죠

13
00:00:33,058 --> 00:00:35,708
하지만 모두 박스로
취급돼요

14
00:00:36,358 --> 00:00:38,294
그게 무슨 상관일까요?

15
00:00:38,294 --> 00:00:41,054
왜냐하면 '박스 모델'이라고
불리는 것이 있기 때문이죠

16
00:00:41,080 --> 00:00:44,100
제가 방금 붙여넣기한
그림에서 처럼요

17
00:00:44,100 --> 00:00:46,030
모든 요소 박스는
네 개의 파트로 구성돼요

18
00:00:46,033 --> 00:00:48,513
실제 내용, 안쪽 여백,

19
00:00:48,517 --> 00:00:50,817
테두리, 바깥 여백이죠

20
00:00:51,297 --> 00:00:54,437
CSS를 이용해서 안쪽 여백, 테두리,
바깥 여백을 수정할 수 있어요

21
00:00:54,437 --> 00:00:56,507
여러분은 그게 어떤 건지
곧 깨닫게 될 거에요

22
00:00:57,287 --> 00:00:59,177
바깥 여백으로
시작해 볼게요

23
00:00:59,177 --> 00:01:01,657
이것은 박스 주변의
투명한 영역이에요

24
00:01:01,672 --> 00:01:03,822
이 박스를 다른 요소들과
나누는 영역이죠

25
00:01:03,822 --> 00:01:08,422
이 바깥 여백은 우리가 가장 즐겨쓰는
단위인 '픽셀'로 지정할 수 있어요

26
00:01:08,762 --> 00:01:13,429
공식 정보 칸의 사방에
15픽셀의 바깥 여백을 주려면

27
00:01:13,819 --> 00:01:19,699
'margin: 15px;'
라고 하면 돼요

28
00:01:20,569 --> 00:01:22,284
변화가 보이세요?

29
00:01:22,717 --> 00:01:26,357
만약 각 면에 여백을
다르게 주고 싶다면요?

30
00:01:26,357 --> 00:01:28,807
상하여백을 좌우여백보다
더 주고 싶다면요?

31
00:01:28,807 --> 00:01:31,417
여백의 양을 시계방향의
순서대로 주면 돼요

32
00:01:31,643 --> 00:01:33,413
위에서 부터
시작해서 말이에요

33
00:01:33,413 --> 00:01:41,103
그러니까 위는 15px, 오른쪽은 0px,
아래는 10px, 왼쪽은 6px라고 써요

34
00:01:42,963 --> 00:01:45,863
아니면 각 면에 대한 속성을
이용할 수 도 있어요

35
00:01:45,863 --> 00:01:48,223
몇 개의 면에만
주고 싶다면요

36
00:01:48,223 --> 00:01:52,223
고양이 그림 주위에
약간의 공백을 주고 싶은데

37
00:01:52,743 --> 00:02:00,620
오른쪽이랑
아래쪽에도 주고 싶네요

38
00:02:00,882 --> 00:02:03,792
그리고 나머지에는
기본 여백 정도면 되고요

39
00:02:04,662 --> 00:02:07,252
여백으로 줄 수 있는
특정한 값도 있어요

40
00:02:07,252 --> 00:02:09,772
페이지를 좀 더 예쁘게
만들 수 있게 말이죠

41
00:02:09,772 --> 00:02:11,004
이걸 보여주려면

42
00:02:11,004 --> 00:02:14,234
이 전체 페이지에
를 추가할 거에요

43
00:02:14,234 --> 00:02:17,464
id로 "container"를 줄게요

44
00:02:18,334 --> 00:02:22,384
이 태그를 추가하고요
모든 걸 포함하게 되었네요

45
00:02:23,004 --> 00:02:27,044
이제 이 div에 대한
규칙을 추가할 거에요

46
00:02:27,514 --> 00:02:33,164
폭은 400픽셀을 주고
페이지 가운데 정렬할 거에요

47
00:02:33,814 --> 00:02:37,744
이걸 'margin-left: 100px;'
이라고 할 수도 있을 거에요

48
00:02:37,744 --> 00:02:40,324
이렇게 하면 제가 보기엔
가운데 있는 것 처럼 보이죠

49
00:02:40,324 --> 00:02:42,104
하지만 여러분에게는
아닐 수도 있어요

50
00:02:42,104 --> 00:02:44,659
왜냐하면 여러분의 브라우저는
더 크거나 작을 수도 있으니까요

51
00:02:44,659 --> 00:02:46,171
우리가 브라우저에게
말해주고 싶은 것은

52
00:02:46,171 --> 00:02:51,641
'여백을 얼마든지 줘서
양쪽 여백이 같게 해줘'에요

53
00:02:52,201 --> 00:02:56,341
이건 'margin: auto;'
라고 하면 돼요

54
00:02:56,341 --> 00:02:58,341
이건 div를 페이지의 가운데로
정렬하는데 좋은 방법이에요

55
00:02:59,931 --> 00:03:02,071
이제 div를 가운데에
위치시켰으니

56
00:03:02,071 --> 00:03:04,012
조금 더 구별되게끔

57
00:03:04,024 --> 00:03:06,304
테두리를 추가하고 싶어요

58
00:03:06,333 --> 00:03:09,223
CSS 테두리 속성을
사용해서 말이죠

59
00:03:09,223 --> 00:03:12,223
이 div에 빨간 테두리를
추가해 볼게요

60
00:03:12,963 --> 00:03:14,253
'border: '라고 쓰고

61
00:03:14,253 --> 00:03:16,943
우리는 테두리의 세 가지
속성을 정해줘야 해요

62
00:03:16,943 --> 00:03:19,073
두께, 스타일, 색상이죠

63
00:03:19,253 --> 00:03:22,633
얇은 테두리로 하려면
'1px'라고 쓸게요

64
00:03:22,633 --> 00:03:25,369
평범한 실선
테두리로 하려면

65
00:03:25,369 --> 00:03:27,529
'solid'라고 쓰고

66
00:03:27,529 --> 00:03:31,649
빨간색으로 하려면
제 RGB 선택창을 띄워서

67
00:03:31,649 --> 00:03:37,399
타오르는 붉은색을
고를게요

68
00:03:37,399 --> 00:03:39,919
마치 바깥 여백처럼
테두리도

69
00:03:39,919 --> 00:03:41,928
한 쪽에만 줄 수 있어요

70
00:03:41,928 --> 00:03:46,078
만약 정말 두꺼운 보라색
테두리를 위에 주고 싶다면

71
00:03:46,078 --> 00:03:49,238
새로운 속성을
추가하면 돼요

72
00:03:49,248 --> 00:03:53,915
'border-top: 10px solid purple;'

73
00:03:53,915 --> 00:03:58,675
좋아요
이제 이미지에 액자를 추가해보죠

74
00:03:58,675 --> 00:04:00,445
테두리 속성으로
이것저것 해볼게요

75
00:04:01,705 --> 00:04:07,605
'cute-cat'으로 올라가서
'border: 6px'

76
00:04:07,605 --> 00:04:11,825
'groove red'로 해보죠

77
00:04:12,105 --> 00:04:15,225
저는 그루브를 좋아하지 않으니까
'double'로 해볼까요?

78
00:04:15,225 --> 00:04:19,955
그냥 'ridge'로 해볼게요
아! 이제 액자 같아 보이네요


79
00:04:20,835 --> 00:04:23,815
그러면 공식 정보칸에도
테두리를 적용해볼까요?

80
00:04:24,965 --> 00:04:26,955
'border:'
너무 크게하지 않을게요

81
00:04:26,955 --> 00:04:27,965
'2px'

82
00:04:28,405 --> 00:04:31,185
'dotted'로 해볼게요

83
00:04:31,200 --> 00:04:34,430
그냥 차분한 회색으로 하죠

84
00:04:35,080 --> 00:04:37,388
'dashed'를 한번 해볼게요

85
00:04:37,388 --> 00:04:39,188
좋아요
이제 제가 원하던 거에요

86
00:04:39,638 --> 00:04:42,438
테두리를 적용했는데
뭔가가 거슬리네요

87
00:04:42,438 --> 00:04:45,018
사실 정말 많이 거슬려요

88
00:04:45,648 --> 00:04:50,118
이 텍스트가 'container' 테두리에
딱 붙어있는 게 보이세요?

89
00:04:50,578 --> 00:04:54,218
그리고 공식 정보 칸도
딱 붙어있네요

90
00:04:54,218 --> 00:04:56,178
정말 이상해보이는데다

91
00:04:56,178 --> 00:04:58,898
글자를 읽기 어려워요

92
00:04:58,898 --> 00:05:01,148
여기서 안쪽 여백이
등장해요

93
00:05:01,148 --> 00:05:03,778
여러분의 요소가
배경색이나 테두리를 가진다면

94
00:05:03,778 --> 00:05:06,062
여러분은 아마
안쪽 여백도 주고 싶을 거에요

95
00:05:06,062 --> 00:05:08,742
내용과 테두리 사이에
공백을 줘야하니까요

96
00:05:09,286 --> 00:05:11,965
'container'에 안쪽 여백을
추가해 볼게요

97
00:05:11,965 --> 00:05:17,371
이 박스 주위로
15px를 넣어 볼게요

98
00:05:17,371 --> 00:05:19,391
아주 낫네요

99
00:05:19,391 --> 00:05:22,912
이제 공식 정보칸에도
안쪽 여백을 줄게요

100
00:05:22,912 --> 00:05:27,462
'padding: 6px'
아름다워요

101
00:05:27,462 --> 00:05:29,362
이미지에는 여백을
주지 않아도 될 것 같아요

102
00:05:29,363 --> 00:05:31,843
액자 안에 저렇게 있으니
괜찮아 보이니까요

103
00:05:31,843 --> 00:05:34,732
이제 여러분은
박스 모델에 대해 알게 되었어요

104
00:05:34,732 --> 00:05:36,552
바깥 여백, 테두리
그리고 안쪽 여백까지요

105
00:05:36,552 --> 00:05:38,622
저는 큰 값과
밝은 색을 써서

106
00:05:38,632 --> 00:05:40,082
여러분에게
잘 보여주려고 했지만

107
00:05:40,082 --> 00:05:42,260
제 페이지는
약간 부담스러워요

108
00:05:42,260 --> 00:05:45,220
여러분의 페이지가 세련되고
복잡해보이게 하고 싶다면

109
00:05:45,220 --> 00:05:47,440
차분한 흰색이나
회색을 쓰세요

110
00:05:47,440 --> 00:05:48,890
여러분이
어떻게 하든지

111
00:05:48,890 --> 00:05:50,610
이 속성들을
사용하도록 해요

112
00:05:50,610 --> 00:05:54,100
왜냐하면 페이지가 어떻게 보여지고
느껴지는지에 큰 영향을 끼치니까요