WEBVTT

00:00:00.000 --> 00:00:03.858
보통 ‘div’를 사용하여 
페이지를 여러 박스로 나누고

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

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

00:00:11.565 --> 00:00:12.959
섬세함이 필요하죠

00:00:12.959 --> 00:00:16.484
하지만 지금은 페이지를 
보기 좋게 보이게 하는 것보다

00:00:16.484 --> 00:00:18.891
바꾸는 방법을 보여줄게요

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

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

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

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

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

00:00:36.700 --> 00:00:40.233
width: 300px;

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

00:00:43.454 --> 00:00:44.967
폭을 퍼센트로 줘 볼게요

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

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

00:00:53.326 --> 00:00:55.453
‘div’는 더 높아졌어요

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

00:00:59.136 --> 00:01:01.064
height 속성으로요

00:01:01.064 --> 00:01:03.821
height: 180px;

00:01:03.821 --> 00:01:06.852
음, 웃긴 일이 일어났네요

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

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

00:01:13.675 --> 00:01:15.827
왜 이렇게 되었을까요?

00:01:15.827 --> 00:01:20.368
바로 "overflow" 라는 속성 때문입니다

00:01:20.368 --> 00:01:23.893
'overflow'의 기본값은 'visible'로

00:01:23.893 --> 00:01:28.309
요소의 크기가 바뀌더라도 내용은
그 크기를 넘어가게 되는 겁니다

00:01:28.309 --> 00:01:30.488
조금 이상해 보이지만

00:01:30.488 --> 00:01:33.545
overflow의 다른 값은 무엇이 있을까요?

00:01:33.545 --> 00:01:37.119
'hidden'이 있어요

00:01:37.119 --> 00:01:40.414
이것은 내용을 경계에서 잘라버리죠

00:01:40.414 --> 00:01:42.095
하지만 이건 원하던 게 아니죠

00:01:42.095 --> 00:01:46.314
독자가 official info를 못 읽게 되니까요

00:01:46.314 --> 00:01:49.151
'auto'는 어떨까요

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

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

00:01:57.132 --> 00:01:59.475
원한다면 더 분명하게 할 수 있어요

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

00:02:02.757 --> 00:02:04.177
예를 들면, y 방향

00:02:04.177 --> 00:02:07.643
즉 위 아래로 스크롤바를 사용하려면

00:02:07.643 --> 00:02:10.869
overflow-y:auto; 이렇게 쓰고

00:02:10.869 --> 00:02:14.207
x 방향으로는 잘라내려 한다면

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

00:02:18.535 --> 00:02:21.419
다만 스크롤바는 사용자에게

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

00:02:24.764 --> 00:02:27.215
특히 스크롤바 속 스크롤바는

00:02:27.215 --> 00:02:29.099
가능하면 피하세요

00:02:29.099 --> 00:02:33.974
폭/높이로 돌아와서
폭과 높이는 사실

00:02:33.974 --> 00:02:37.732
그림 등 어떤 요소에든지 사용가능해요

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

00:02:42.168 --> 00:02:45.019
CSS의 width/height 속성을 쓸 수 있어요

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

00:02:52.542 --> 00:02:55.415
특성을 없애고

00:02:55.415 --> 00:03:00.396
스타일 규칙에 다음을 추가합니다 
#cute-cat {

00:03:00.396 --> 00:03:03.598
width: 120px;

00:03:03.598 --> 00:03:06.328
특성과 마찬가지로

00:03:06.328 --> 00:03:09.027
폭이나 높이 중 하나만 주고

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

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

00:03:14.759 --> 00:03:18.877
흠.. 재미있을 것 같으니까
잠깐 시도해보죠

00:03:18.877 --> 00:03:20.021
height: 40px;

00:03:20.021 --> 00:03:22.076
하하, 납작한 고양이!

00:03:22.076 --> 00:03:25.183
네, 빨리 고칠게요

00:03:25.183 --> 00:03:28.993
저는 책임감 있는 웹 개발자니까요

00:03:28.993 --> 00:03:30.689
여러분이 아는 것이 많을수록

00:03:30.689 --> 00:03:33.267
그것에 대한 책임도 지게 됩니다

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

00:03:36.070 --> 00:03:39.570
모든 고양이를 납작하게 할 수 있다고 해서 
그렇게 해야 하는 것은 아니죠

00:03:39.570 --> 00:03:42.578
여러분은 보통 다른 사람들이 사용하기 위한 
웹사이트를 만들 테니까요

00:03:42.578 --> 00:03:47.758
여러분이 재밌다고 생각하는 것이 
그들에게는 무지 불편할 수 있어요

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