0:00:00.000,0:00:03.858
보통 ‘div’를 사용하여 [br]페이지를 여러 박스로 나누고

0:00:03.858,0:00:07.837
그 박스들의 크기와 위치를 조정합니다

0:00:07.837,0:00:11.565
페이지를 보기 좋게 디자인하기 위해서는

0:00:11.565,0:00:12.959
섬세함이 필요하죠

0:00:12.959,0:00:16.484
하지만 지금은 페이지를 [br]보기 좋게 보이게 하는 것보다

0:00:16.484,0:00:18.891
바꾸는 방법을 보여줄게요

0:00:18.891,0:00:21.992
'div'인 "official-info"의 크기를 바꿔보죠

0:00:21.992,0:00:25.789
div는 기본적으로 이용 가능한 폭의 100%를 차지합니다

0:00:25.789,0:00:29.304
그래서 이 회색 상자가 전체 페이지에 걸쳐 있는것이죠

0:00:29.304,0:00:32.825
이것을 300px 만큼만 차지하도록 하려 한다면

0:00:32.825,0:00:36.700
CSS 규칙의 새로운 속성이 필요해요

0:00:36.700,0:00:40.233
width: 300px;

0:00:40.233,0:00:43.454
잘 되네요, 좀 더 해보죠

0:00:43.454,0:00:44.967
폭을 퍼센트로 줘 볼게요

0:00:44.967,0:00:50.380
이렇게 div가 가능한 폭의 70%만 차지하게 할 수 있어요

0:00:50.380,0:00:53.326
이제 글은 더 작은 상자에 들어갔고,

0:00:53.326,0:00:55.453
‘div’는 더 높아졌어요

0:00:55.453,0:00:59.136
필요하다면 상자의 높이도 고정할 수 있어요

0:00:59.136,0:01:01.064
height 속성으로요

0:01:01.064,0:01:03.821
height: 180px;

0:01:03.821,0:01:06.852
음, 웃긴 일이 일어났네요

0:01:06.852,0:01:09.642
회색 상자의 높이는 180픽셀로 바꾸었는데

0:01:09.642,0:01:13.675
글은 회색 상자 밖으로 넘쳐 흐르고 있어요

0:01:13.675,0:01:15.827
왜 이렇게 되었을까요?

0:01:15.827,0:01:20.368
바로 "overflow" 라는 속성 때문입니다

0:01:20.368,0:01:23.893
'overflow'의 기본값은 'visible'로

0:01:23.893,0:01:28.309
요소의 크기가 바뀌더라도 내용은[br]그 크기를 넘어가게 되는 겁니다

0:01:28.309,0:01:30.488
조금 이상해 보이지만

0:01:30.488,0:01:33.545
overflow의 다른 값은 무엇이 있을까요?

0:01:33.545,0:01:37.119
'hidden'이 있어요

0:01:37.119,0:01:40.414
이것은 내용을 경계에서 잘라버리죠

0:01:40.414,0:01:42.095
하지만 이건 원하던 게 아니죠

0:01:42.095,0:01:46.314
독자가 official info를 못 읽게 되니까요

0:01:46.314,0:01:49.151
'auto'는 어떨까요

0:01:49.151,0:01:53.136
이것은 내용이 넘치면 브라우저가 스크롤 바를 만들게 합니다

0:01:53.136,0:01:57.132
이제 글을 보기 위해 상자 안에서 스크롤할 수 있어요

0:01:57.132,0:01:59.475
원한다면 더 분명하게 할 수 있어요

0:01:59.475,0:02:02.757
각 방향마다 다른 overflow 속성을 지정할 수 있답니다

0:02:02.757,0:02:04.177
예를 들면, y 방향

0:02:04.177,0:02:07.643
즉 위 아래로 스크롤바를 사용하려면

0:02:07.643,0:02:10.869
overflow-y:auto; 이렇게 쓰고

0:02:10.869,0:02:14.207
x 방향으로는 잘라내려 한다면

0:02:14.207,0:02:18.535
overflow-x: hidden; 이렇게 할 수 있어요

0:02:18.535,0:02:21.419
다만 스크롤바는 사용자에게

0:02:21.419,0:02:24.764
매우 짜증날 수 있으니 overflow를 신중하게 쓰세요

0:02:24.764,0:02:27.215
특히 스크롤바 속 스크롤바는

0:02:27.215,0:02:29.099
가능하면 피하세요

0:02:29.099,0:02:33.974
폭/높이로 돌아와서[br]폭과 높이는 사실

0:02:33.974,0:02:37.732
그림 등 어떤 요소에든지 사용가능해요

0:02:37.732,0:02:42.168
CSS를 배운 여러분은 image의 width/height 특성 대신

0:02:42.168,0:02:45.019
CSS의 width/height 속성을 쓸 수 있어요

0:02:45.019,0:02:52.542
이 고양이 그림에 id "cute-cat"을 주고 좀 더 크게 만들어보죠

0:02:52.542,0:02:55.415
특성을 없애고

0:02:55.415,0:03:00.396
스타일 규칙에 다음을 추가합니다 [br]#cute-cat {

0:03:00.396,0:03:03.598
width: 120px;

0:03:03.598,0:03:06.328
특성과 마찬가지로

0:03:06.328,0:03:09.027
폭이나 높이 중 하나만 주고

0:03:09.027,0:03:12.688
다른 수치는 브라우저가 최적의 값을 찾게 두는게 좋아요

0:03:12.688,0:03:14.759
그렇지 않으면, 고양이가 납작해진다구요!

0:03:14.759,0:03:18.877
흠.. 재미있을 것 같으니까[br]잠깐 시도해보죠

0:03:18.877,0:03:20.021
height: 40px;

0:03:20.021,0:03:22.076
하하, 납작한 고양이!

0:03:22.076,0:03:25.183
네, 빨리 고칠게요

0:03:25.183,0:03:28.993
저는 책임감 있는 웹 개발자니까요

0:03:28.993,0:03:30.689
여러분이 아는 것이 많을수록

0:03:30.689,0:03:33.267
그것에 대한 책임도 지게 됩니다

0:03:33.267,0:03:36.070
여러분이 모든 것에 스크롤바를 달 수 있고

0:03:36.070,0:03:39.570
모든 고양이를 납작하게 할 수 있다고 해서 [br]그렇게 해야 하는 것은 아니죠

0:03:39.570,0:03:42.578
여러분은 보통 다른 사람들이 사용하기 위한 [br]웹사이트를 만들 테니까요

0:03:42.578,0:03:47.758
여러분이 재밌다고 생각하는 것이 [br]그들에게는 무지 불편할 수 있어요

0:03:47.758,0:03:54.000
하지만 여러분이 칸 아카데미에서 [br]웃긴 걸 조금 만드는 건 상관없답니다