1
00:00:00,000 --> 00:00:03,858
보통 ‘div’를 사용하여 
페이지를 여러 박스로 나누고

2
00:00:03,858 --> 00:00:07,837
그 박스들의 크기와 위치를 조정합니다

3
00:00:07,837 --> 00:00:11,565
페이지를 보기 좋게 디자인하기 위해서는

4
00:00:11,565 --> 00:00:12,959
섬세함이 필요하죠

5
00:00:12,959 --> 00:00:16,484
하지만 지금은 페이지를 
보기 좋게 보이게 하는 것보다

6
00:00:16,484 --> 00:00:18,891
바꾸는 방법을 보여줄게요

7
00:00:18,891 --> 00:00:21,992
'div'인 "official-info"의 크기를 바꿔보죠

8
00:00:21,992 --> 00:00:25,789
div는 기본적으로 이용 가능한 폭의 100%를 차지합니다

9
00:00:25,789 --> 00:00:29,304
그래서 이 회색 상자가 전체 페이지에 걸쳐 있는것이죠

10
00:00:29,304 --> 00:00:32,825
이것을 300px 만큼만 차지하도록 하려 한다면

11
00:00:32,825 --> 00:00:36,700
CSS 규칙의 새로운 속성이 필요해요

12
00:00:36,700 --> 00:00:40,233
width: 300px;

13
00:00:40,233 --> 00:00:43,454
잘 되네요, 좀 더 해보죠

14
00:00:43,454 --> 00:00:44,967
폭을 퍼센트로 줘 볼게요

15
00:00:44,967 --> 00:00:50,380
이렇게 div가 가능한 폭의 70%만 차지하게 할 수 있어요

16
00:00:50,380 --> 00:00:53,326
이제 글은 더 작은 상자에 들어갔고,

17
00:00:53,326 --> 00:00:55,453
‘div’는 더 높아졌어요

18
00:00:55,453 --> 00:00:59,136
필요하다면 상자의 높이도 고정할 수 있어요

19
00:00:59,136 --> 00:01:01,064
height 속성으로요

20
00:01:01,064 --> 00:01:03,821
height: 180px;

21
00:01:03,821 --> 00:01:06,852
음, 웃긴 일이 일어났네요

22
00:01:06,852 --> 00:01:09,642
회색 상자의 높이는 180픽셀로 바꾸었는데

23
00:01:09,642 --> 00:01:13,675
글은 회색 상자 밖으로 넘쳐 흐르고 있어요

24
00:01:13,675 --> 00:01:15,827
왜 이렇게 되었을까요?

25
00:01:15,827 --> 00:01:20,368
바로 "overflow" 라는 속성 때문입니다

26
00:01:20,368 --> 00:01:23,893
'overflow'의 기본값은 'visible'로

27
00:01:23,893 --> 00:01:28,309
요소의 크기가 바뀌더라도 내용은
그 크기를 넘어가게 되는 겁니다

28
00:01:28,309 --> 00:01:30,488
조금 이상해 보이지만

29
00:01:30,488 --> 00:01:33,545
overflow의 다른 값은 무엇이 있을까요?

30
00:01:33,545 --> 00:01:37,119
'hidden'이 있어요

31
00:01:37,119 --> 00:01:40,414
이것은 내용을 경계에서 잘라버리죠

32
00:01:40,414 --> 00:01:42,095
하지만 이건 원하던 게 아니죠

33
00:01:42,095 --> 00:01:46,314
독자가 official info를 못 읽게 되니까요

34
00:01:46,314 --> 00:01:49,151
'auto'는 어떨까요

35
00:01:49,151 --> 00:01:53,136
이것은 내용이 넘치면 브라우저가 스크롤 바를 만들게 합니다

36
00:01:53,136 --> 00:01:57,132
이제 글을 보기 위해 상자 안에서 스크롤할 수 있어요

37
00:01:57,132 --> 00:01:59,475
원한다면 더 분명하게 할 수 있어요

38
00:01:59,475 --> 00:02:02,757
각 방향마다 다른 overflow 속성을 지정할 수 있답니다

39
00:02:02,757 --> 00:02:04,177
예를 들면, y 방향

40
00:02:04,177 --> 00:02:07,643
즉 위 아래로 스크롤바를 사용하려면

41
00:02:07,643 --> 00:02:10,869
overflow-y:auto; 이렇게 쓰고

42
00:02:10,869 --> 00:02:14,207
x 방향으로는 잘라내려 한다면

43
00:02:14,207 --> 00:02:18,535
overflow-x: hidden; 이렇게 할 수 있어요

44
00:02:18,535 --> 00:02:21,419
다만 스크롤바는 사용자에게

45
00:02:21,419 --> 00:02:24,764
매우 짜증날 수 있으니 overflow를 신중하게 쓰세요

46
00:02:24,764 --> 00:02:27,215
특히 스크롤바 속 스크롤바는

47
00:02:27,215 --> 00:02:29,099
가능하면 피하세요

48
00:02:29,099 --> 00:02:33,974
폭/높이로 돌아와서
폭과 높이는 사실

49
00:02:33,974 --> 00:02:37,732
그림 등 어떤 요소에든지 사용가능해요

50
00:02:37,732 --> 00:02:42,168
CSS를 배운 여러분은 image의 width/height 특성 대신

51
00:02:42,168 --> 00:02:45,019
CSS의 width/height 속성을 쓸 수 있어요

52
00:02:45,019 --> 00:02:52,542
이 고양이 그림에 id "cute-cat"을 주고 좀 더 크게 만들어보죠

53
00:02:52,542 --> 00:02:55,415
특성을 없애고

54
00:02:55,415 --> 00:03:00,396
스타일 규칙에 다음을 추가합니다 
#cute-cat {

55
00:03:00,396 --> 00:03:03,598
width: 120px;

56
00:03:03,598 --> 00:03:06,328
특성과 마찬가지로

57
00:03:06,328 --> 00:03:09,027
폭이나 높이 중 하나만 주고

58
00:03:09,027 --> 00:03:12,688
다른 수치는 브라우저가 최적의 값을 찾게 두는게 좋아요

59
00:03:12,688 --> 00:03:14,759
그렇지 않으면, 고양이가 납작해진다구요!

60
00:03:14,759 --> 00:03:18,877
흠.. 재미있을 것 같으니까
잠깐 시도해보죠

61
00:03:18,877 --> 00:03:20,021
height: 40px;

62
00:03:20,021 --> 00:03:22,076
하하, 납작한 고양이!

63
00:03:22,076 --> 00:03:25,183
네, 빨리 고칠게요

64
00:03:25,183 --> 00:03:28,993
저는 책임감 있는 웹 개발자니까요

65
00:03:28,993 --> 00:03:30,689
여러분이 아는 것이 많을수록

66
00:03:30,689 --> 00:03:33,267
그것에 대한 책임도 지게 됩니다

67
00:03:33,267 --> 00:03:36,070
여러분이 모든 것에 스크롤바를 달 수 있고

68
00:03:36,070 --> 00:03:39,570
모든 고양이를 납작하게 할 수 있다고 해서 
그렇게 해야 하는 것은 아니죠

69
00:03:39,570 --> 00:03:42,578
여러분은 보통 다른 사람들이 사용하기 위한 
웹사이트를 만들 테니까요

70
00:03:42,578 --> 00:03:47,758
여러분이 재밌다고 생각하는 것이 
그들에게는 무지 불편할 수 있어요

71
00:03:47,758 --> 00:03:54,000
하지만 여러분이 칸 아카데미에서 
웃긴 걸 조금 만드는 건 상관없답니다