[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:03.86,Default,,0000,0000,0000,,보통 ‘div’를 사용하여 \N페이지를 여러 박스로 나누고
Dialogue: 0,0:00:03.86,0:00:07.84,Default,,0000,0000,0000,,그 박스들의 크기와 위치를 조정합니다
Dialogue: 0,0:00:07.84,0:00:11.56,Default,,0000,0000,0000,,페이지를 보기 좋게 디자인하기 위해서는
Dialogue: 0,0:00:11.56,0:00:12.96,Default,,0000,0000,0000,,섬세함이 필요하죠
Dialogue: 0,0:00:12.96,0:00:16.48,Default,,0000,0000,0000,,하지만 지금은 페이지를 \N보기 좋게 보이게 하는 것보다
Dialogue: 0,0:00:16.48,0:00:18.89,Default,,0000,0000,0000,,바꾸는 방법을 보여줄게요
Dialogue: 0,0:00:18.89,0:00:21.99,Default,,0000,0000,0000,,'div'인 "official-info"의 크기를 바꿔보죠
Dialogue: 0,0:00:21.99,0:00:25.79,Default,,0000,0000,0000,,div는 기본적으로 이용 가능한 폭의 100%를 차지합니다
Dialogue: 0,0:00:25.79,0:00:29.30,Default,,0000,0000,0000,,그래서 이 회색 상자가 전체 페이지에 걸쳐 있는것이죠
Dialogue: 0,0:00:29.30,0:00:32.82,Default,,0000,0000,0000,,이것을 300px 만큼만 차지하도록 하려 한다면
Dialogue: 0,0:00:32.82,0:00:36.70,Default,,0000,0000,0000,,CSS 규칙의 새로운 속성이 필요해요
Dialogue: 0,0:00:36.70,0:00:40.23,Default,,0000,0000,0000,,width: 300px;
Dialogue: 0,0:00:40.23,0:00:43.45,Default,,0000,0000,0000,,잘 되네요, 좀 더 해보죠
Dialogue: 0,0:00:43.45,0:00:44.97,Default,,0000,0000,0000,,폭을 퍼센트로 줘 볼게요
Dialogue: 0,0:00:44.97,0:00:50.38,Default,,0000,0000,0000,,이렇게 div가 가능한 폭의 70%만 차지하게 할 수 있어요
Dialogue: 0,0:00:50.38,0:00:53.33,Default,,0000,0000,0000,,이제 글은 더 작은 상자에 들어갔고,
Dialogue: 0,0:00:53.33,0:00:55.45,Default,,0000,0000,0000,,‘div’는 더 높아졌어요
Dialogue: 0,0:00:55.45,0:00:59.14,Default,,0000,0000,0000,,필요하다면 상자의 높이도 고정할 수 있어요
Dialogue: 0,0:00:59.14,0:01:01.06,Default,,0000,0000,0000,,height 속성으로요
Dialogue: 0,0:01:01.06,0:01:03.82,Default,,0000,0000,0000,,height: 180px;
Dialogue: 0,0:01:03.82,0:01:06.85,Default,,0000,0000,0000,,음, 웃긴 일이 일어났네요
Dialogue: 0,0:01:06.85,0:01:09.64,Default,,0000,0000,0000,,회색 상자의 높이는 180픽셀로 바꾸었는데
Dialogue: 0,0:01:09.64,0:01:13.68,Default,,0000,0000,0000,,글은 회색 상자 밖으로 넘쳐 흐르고 있어요
Dialogue: 0,0:01:13.68,0:01:15.83,Default,,0000,0000,0000,,왜 이렇게 되었을까요?
Dialogue: 0,0:01:15.83,0:01:20.37,Default,,0000,0000,0000,,바로 "overflow" 라는 속성 때문입니다
Dialogue: 0,0:01:20.37,0:01:23.89,Default,,0000,0000,0000,,'overflow'의 기본값은 'visible'로
Dialogue: 0,0:01:23.89,0:01:28.31,Default,,0000,0000,0000,,요소의 크기가 바뀌더라도 내용은\N그 크기를 넘어가게 되는 겁니다
Dialogue: 0,0:01:28.31,0:01:30.49,Default,,0000,0000,0000,,조금 이상해 보이지만
Dialogue: 0,0:01:30.49,0:01:33.54,Default,,0000,0000,0000,,overflow의 다른 값은 무엇이 있을까요?
Dialogue: 0,0:01:33.54,0:01:37.12,Default,,0000,0000,0000,,'hidden'이 있어요
Dialogue: 0,0:01:37.12,0:01:40.41,Default,,0000,0000,0000,,이것은 내용을 경계에서 잘라버리죠
Dialogue: 0,0:01:40.41,0:01:42.10,Default,,0000,0000,0000,,하지만 이건 원하던 게 아니죠
Dialogue: 0,0:01:42.10,0:01:46.31,Default,,0000,0000,0000,,독자가 official info를 못 읽게 되니까요
Dialogue: 0,0:01:46.31,0:01:49.15,Default,,0000,0000,0000,,'auto'는 어떨까요
Dialogue: 0,0:01:49.15,0:01:53.14,Default,,0000,0000,0000,,이것은 내용이 넘치면 브라우저가 스크롤 바를 만들게 합니다
Dialogue: 0,0:01:53.14,0:01:57.13,Default,,0000,0000,0000,,이제 글을 보기 위해 상자 안에서 스크롤할 수 있어요
Dialogue: 0,0:01:57.13,0:01:59.48,Default,,0000,0000,0000,,원한다면 더 분명하게 할 수 있어요
Dialogue: 0,0:01:59.48,0:02:02.76,Default,,0000,0000,0000,,각 방향마다 다른 overflow 속성을 지정할 수 있답니다
Dialogue: 0,0:02:02.76,0:02:04.18,Default,,0000,0000,0000,,예를 들면, y 방향
Dialogue: 0,0:02:04.18,0:02:07.64,Default,,0000,0000,0000,,즉 위 아래로 스크롤바를 사용하려면
Dialogue: 0,0:02:07.64,0:02:10.87,Default,,0000,0000,0000,,overflow-y:auto; 이렇게 쓰고
Dialogue: 0,0:02:10.87,0:02:14.21,Default,,0000,0000,0000,,x 방향으로는 잘라내려 한다면
Dialogue: 0,0:02:14.21,0:02:18.54,Default,,0000,0000,0000,,overflow-x: hidden; 이렇게 할 수 있어요
Dialogue: 0,0:02:18.54,0:02:21.42,Default,,0000,0000,0000,,다만 스크롤바는 사용자에게
Dialogue: 0,0:02:21.42,0:02:24.76,Default,,0000,0000,0000,,매우 짜증날 수 있으니 overflow를 신중하게 쓰세요
Dialogue: 0,0:02:24.76,0:02:27.22,Default,,0000,0000,0000,,특히 스크롤바 속 스크롤바는
Dialogue: 0,0:02:27.22,0:02:29.10,Default,,0000,0000,0000,,가능하면 피하세요
Dialogue: 0,0:02:29.10,0:02:33.97,Default,,0000,0000,0000,,폭/높이로 돌아와서\N폭과 높이는 사실
Dialogue: 0,0:02:33.97,0:02:37.73,Default,,0000,0000,0000,,그림 등 어떤 요소에든지 사용가능해요
Dialogue: 0,0:02:37.73,0:02:42.17,Default,,0000,0000,0000,,CSS를 배운 여러분은 image의 width/height 특성 대신
Dialogue: 0,0:02:42.17,0:02:45.02,Default,,0000,0000,0000,,CSS의 width/height 속성을 쓸 수 있어요
Dialogue: 0,0:02:45.02,0:02:52.54,Default,,0000,0000,0000,,이 고양이 그림에 id "cute-cat"을 주고 좀 더 크게 만들어보죠
Dialogue: 0,0:02:52.54,0:02:55.42,Default,,0000,0000,0000,,특성을 없애고
Dialogue: 0,0:02:55.42,0:03:00.40,Default,,0000,0000,0000,,스타일 규칙에 다음을 추가합니다 \N#cute-cat {
Dialogue: 0,0:03:00.40,0:03:03.60,Default,,0000,0000,0000,,width: 120px;
Dialogue: 0,0:03:03.60,0:03:06.33,Default,,0000,0000,0000,,특성과 마찬가지로
Dialogue: 0,0:03:06.33,0:03:09.03,Default,,0000,0000,0000,,폭이나 높이 중 하나만 주고
Dialogue: 0,0:03:09.03,0:03:12.69,Default,,0000,0000,0000,,다른 수치는 브라우저가 최적의 값을 찾게 두는게 좋아요
Dialogue: 0,0:03:12.69,0:03:14.76,Default,,0000,0000,0000,,그렇지 않으면, 고양이가 납작해진다구요!
Dialogue: 0,0:03:14.76,0:03:18.88,Default,,0000,0000,0000,,흠.. 재미있을 것 같으니까\N잠깐 시도해보죠
Dialogue: 0,0:03:18.88,0:03:20.02,Default,,0000,0000,0000,,height: 40px;
Dialogue: 0,0:03:20.02,0:03:22.08,Default,,0000,0000,0000,,하하, 납작한 고양이!
Dialogue: 0,0:03:22.08,0:03:25.18,Default,,0000,0000,0000,,네, 빨리 고칠게요
Dialogue: 0,0:03:25.18,0:03:28.99,Default,,0000,0000,0000,,저는 책임감 있는 웹 개발자니까요
Dialogue: 0,0:03:28.99,0:03:30.69,Default,,0000,0000,0000,,여러분이 아는 것이 많을수록
Dialogue: 0,0:03:30.69,0:03:33.27,Default,,0000,0000,0000,,그것에 대한 책임도 지게 됩니다
Dialogue: 0,0:03:33.27,0:03:36.07,Default,,0000,0000,0000,,여러분이 모든 것에 스크롤바를 달 수 있고
Dialogue: 0,0:03:36.07,0:03:39.57,Default,,0000,0000,0000,,모든 고양이를 납작하게 할 수 있다고 해서 \N그렇게 해야 하는 것은 아니죠
Dialogue: 0,0:03:39.57,0:03:42.58,Default,,0000,0000,0000,,여러분은 보통 다른 사람들이 사용하기 위한 \N웹사이트를 만들 테니까요
Dialogue: 0,0:03:42.58,0:03:47.76,Default,,0000,0000,0000,,여러분이 재밌다고 생각하는 것이 \N그들에게는 무지 불편할 수 있어요
Dialogue: 0,0:03:47.76,0:03:54.00,Default,,0000,0000,0000,,하지만 여러분이 칸 아카데미에서 \N웃긴 걸 조금 만드는 건 상관없답니다