[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:02.66,Default,,0000,0000,0000,,저는 제 반려동물(pet)들의 이름을 나열한 리스트를 가진
Dialogue: 0,0:00:02.66,0:00:04.34,Default,,0000,0000,0000,,웹 페이지를 만들어보려고 합니다
Dialogue: 0,0:00:04.34,0:00:06.76,Default,,0000,0000,0000,,이 리스트를 보세요 \N어떤 것이 궁금한가요?
Dialogue: 0,0:00:06.76,0:00:11.11,Default,,0000,0000,0000,,저는 Black & White, Deamon, Angel이라는\N이름을 가진 반려동물이 있어요
Dialogue: 0,0:00:11.11,0:00:12.96,Default,,0000,0000,0000,,그러나 그들은 어떠한 종류의 반려동물인가요?
Dialogue: 0,0:00:12.96,0:00:14.55,Default,,0000,0000,0000,,그들은 어떤 색인가요?
Dialogue: 0,0:00:14.55,0:00:16.12,Default,,0000,0000,0000,,그들은 몇 살인가요?
Dialogue: 0,0:00:16.12,0:00:18.32,Default,,0000,0000,0000,,저는 여러분의 질문에 대답할 수 있도록
Dialogue: 0,0:00:18.32,0:00:21.05,Default,,0000,0000,0000,,이 리스트에서 반려동물들에 대해 \N보다 많은 정보를 주고 싶습니다
Dialogue: 0,0:00:21.05,0:00:23.46,Default,,0000,0000,0000,,그러기 위해서 저는 중첩된(nested) 리스트를 만들거나
Dialogue: 0,0:00:23.46,0:00:26.82,Default,,0000,0000,0000,,또는 여러분이 이미 알고 있는 것처럼\N괄호 안에 정보를 넣을 수 있습니다
Dialogue: 0,0:00:26.82,0:00:30.33,Default,,0000,0000,0000,,Black & white은 토끼이고
Dialogue: 0,0:00:30.33,0:00:32.21,Default,,0000,0000,0000,,Deamon은 고양이이며
Dialogue: 0,0:00:32.21,0:00:34.20,Default,,0000,0000,0000,,Angel도 고양이입니다
Dialogue: 0,0:00:34.20,0:00:37.38,Default,,0000,0000,0000,,그러나 저는 이것이 마음에 들지 않네요\N왜냐하면 전혀 정돈되어 보이지 않기도 하고
Dialogue: 0,0:00:37.38,0:00:40.91,Default,,0000,0000,0000,,한눈에 쉽게 전체 내용을 훑어보기도 쉽지 않고
Dialogue: 0,0:00:40.91,0:00:42.79,Default,,0000,0000,0000,,게다가 모든 종을 한눈에 보기도 어렵습니다
Dialogue: 0,0:00:42.79,0:00:47.35,Default,,0000,0000,0000,,사실 이것은 테이블을 위한 완벽한 예제입니다
Dialogue: 0,0:00:47.35,0:00:49.14,Default,,0000,0000,0000,,각각의 가로줄(row)에는 각 반려동물의 정보를 적고
Dialogue: 0,0:00:49.14,0:00:51.86,Default,,0000,0000,0000,,각각의 세로줄(column)에는 남들에게 공유하고 싶은
Dialogue: 0,0:00:51.86,0:00:54.08,Default,,0000,0000,0000,,반려동물이 가진 특성을 적어주면 될 것 같습니다
Dialogue: 0,0:00:54.08,0:00:58.38,Default,,0000,0000,0000,,HTML에서 테이블을 만들기 위해서는\N아주 많은 양의 태그(tag)들이 필요할 것입니다
Dialogue: 0,0:00:58.38,0:00:59.96,Default,,0000,0000,0000,,그러니 스스로 각오를 다지고 대비하세요
Dialogue: 0,0:00:59.96,0:01:02.56,Default,,0000,0000,0000,,그렇다고 이런 모든 태그들을 \N기억하는 것에 대해서 걱정하진 마세요
Dialogue: 0,0:01:02.56,0:01:04.43,Default,,0000,0000,0000,,나중에 언제든지 태그들을 찾아볼 수 있으니까요
Dialogue: 0,0:01:04.43,0:01:07.19,Default,,0000,0000,0000,,모든 테이블 태그들을 외우는데 10년이나 걸렸어요
Dialogue: 0,0:01:07.19,0:01:08.61,Default,,0000,0000,0000,,물론 지금은 전문가지요
Dialogue: 0,0:01:08.61,0:01:10.44,Default,,0000,0000,0000,,좋아요 그럼 준비되었나요?
Dialogue: 0,0:01:10.44,0:01:15.08,Default,,0000,0000,0000,,첫 태그는 적절하게도 '' 태그입니다
Dialogue: 0,0:01:15.08,0:01:20.02,Default,,0000,0000,0000,,다음으로는 테이블의 각 세로줄에 이름을 적기 위해\N테이블의 헤더(header)영역이 필요합니다
Dialogue: 0,0:01:20.02,0:01:23.04,Default,,0000,0000,0000,,그러므로 '' 태그를 써줍니다
Dialogue: 0,0:01:23.04,0:01:27.86,Default,,0000,0000,0000,,그 안에 보통은 헤더 칸들이 하나의 가로줄로 나열되 있습니다
Dialogue: 0,0:01:27.86,0:01:32.00,Default,,0000,0000,0000,,언제든지 테이블에 가로줄을 만들기 위해서는\N'' 태그을 사용하면 됩니다
Dialogue: 0,0:01:32.00,0:01:35.29,Default,,0000,0000,0000,,그 가로줄 안에 헤더 칸들을 만듭니다
Dialogue: 0,0:01:35.29,0:01:41.68,Default,,0000,0000,0000,,하나의 헤더 칸을 그리기 위해서 \N태그를 사용합니다
Dialogue: 0,0:01:41.68,0:01:44.88,Default,,0000,0000,0000,,좋아요, 첫 번째 세로줄에는 어떤 이름을 붙일까요?
Dialogue: 0,0:01:44.88,0:01:49.09,Default,,0000,0000,0000,,각 줄을 구별하는데 가장 중요한 정보인\N이름을 적어볼게요
Dialogue: 0,0:01:49.09,0:01:51.31,Default,,0000,0000,0000,,그리고 이것은 각 동물을 구별하는 식별자가 될 것입니다
Dialogue: 0,0:01:51.31,0:01:54.70,Default,,0000,0000,0000,,다음으로는 종을 적을 또 다른 세로줄을 추가하고
Dialogue: 0,0:01:54.70,0:01:58.60,Default,,0000,0000,0000,,마지막으로 색을 쓸 세로줄을 추가합니다
Dialogue: 0,0:01:58.60,0:02:01.53,Default,,0000,0000,0000,,지금은 이정도면 적당한 것 같습니다
Dialogue: 0,0:02:01.53,0:02:03.92,Default,,0000,0000,0000,,그럼 각 줄에 데이터(data)를 추가해봅시다
Dialogue: 0,0:02:03.92,0:02:05.95,Default,,0000,0000,0000,,데이터를 적는 줄은 '' 태그 아래에
Dialogue: 0,0:02:05.95,0:02:09.47,Default,,0000,0000,0000,,'' 태그를 적어주는 것으로 시작합니다
Dialogue: 0,0:02:09.47,0:02:11.85,Default,,0000,0000,0000,,그 다음엔 다시한번 가로줄을 쓰기 위해서
Dialogue: 0,0:02:11.85,0:02:14.28,Default,,0000,0000,0000,,'' 태그를 사용합니다
Dialogue: 0,0:02:14.28,0:02:16.72,Default,,0000,0000,0000,,하지만 그 안에 '' 태그를 사용하는 대신에\N'' 태그를 사용할 것입니다
Dialogue: 0,0:02:16.72,0:02:20.00,Default,,0000,0000,0000,,왜냐면 우리는 헤더(header)가 아닌\N본문(body)에 가로줄을 만들기 때문입니다.
Dialogue: 0,0:02:20.00,0:02:23.14,Default,,0000,0000,0000,, 태그는 표(tabular)의 데이터(data)의 약자입니디
Dialogue: 0,0:02:23.14,0:02:26.47,Default,,0000,0000,0000,,그러면 첫 번째 줄의 첫 번째 칸에는
Dialogue: 0,0:02:26.47,0:02:28.06,Default,,0000,0000,0000,,어떠한 값(value)가 들어가야 할까요?
Dialogue: 0,0:02:28.06,0:02:30.31,Default,,0000,0000,0000,,제가 만들었던 리스트를 다시한번 살펴보기로 하죠
Dialogue: 0,0:02:30.31,0:02:33.80,Default,,0000,0000,0000,,제가 만든 리스트의 첫 번째 줄에 \NBlack & white라고 써있네요
Dialogue: 0,0:02:33.80,0:02:36.02,Default,,0000,0000,0000,,이것은 그 반려동물의 이름입니다
Dialogue: 0,0:02:36.02,0:02:40.26,Default,,0000,0000,0000,,그러므로 간단하게 'Black & white' 라고 쓰겠습니다
Dialogue: 0,0:02:40.26,0:02:42.50,Default,,0000,0000,0000,,다음으로 두번째 '' 태그를 적어줍니다
Dialogue: 0,0:02:42.50,0:02:46.73,Default,,0000,0000,0000,,두 번째 '' 태그를 보면 '종'이라 쓰여있으므로 \N여기에는 반려동물의 종을 적어야 함을 알 수 있습니다
Dialogue: 0,0:02:46.73,0:02:49.72,Default,,0000,0000,0000,,그리고 Black & white은 토끼였으니
Dialogue: 0,0:02:49.72,0:02:52.50,Default,,0000,0000,0000,,'rabbit'이라고 쓸게요
Dialogue: 0,0:02:52.50,0:02:55.16,Default,,0000,0000,0000,,마지막으로 위에서 했던 방식대로
Dialogue: 0,0:02:55.16,0:02:58.09,Default,,0000,0000,0000,,세번째 '' 태그를 보면\N'색'이라고 써져 있으므로\N
Dialogue: 0,0:02:58.09,0:03:00.18,Default,,0000,0000,0000,,세번째 '' 태그에는 그에 해당하는 \N정보를 적어주어야 할 것입니다
Dialogue: 0,0:03:00.18,0:03:04.43,Default,,0000,0000,0000,,아마도 제가 이 토끼의 이름을 지을때\N저는 그리 창의적인 아이는 아니었던 것 같아요
Dialogue: 0,0:03:04.43,0:03:08.22,Default,,0000,0000,0000,,여러분도 토끼의 색깔을 \N쉽게 짐작하실수 있으실 거에요
Dialogue: 0,0:03:08.22,0:03:10.77,Default,,0000,0000,0000,,좋아요. 그럼 다음줄로 넘어가보죠
Dialogue: 0,0:03:10.77,0:03:13.07,Default,,0000,0000,0000,,먼저 간단한 트릭(trick)을 알려드릴게요
Dialogue: 0,0:03:13.07,0:03:15.54,Default,,0000,0000,0000,,먼저 첫 번째 줄을 작성하고 난 뒤에
Dialogue: 0,0:03:15.54,0:03:17.13,Default,,0000,0000,0000,,그 첫 번째 줄을 선택하고
Dialogue: 0,0:03:17.13,0:03:19.39,Default,,0000,0000,0000,,여러분의 운영체제(Operationg system)에 따라서
Dialogue: 0,0:03:19.39,0:03:22.59,Default,,0000,0000,0000,,키보드의 단축키인 ctrl키와 C키 \N혹은 command와 C키를 눌러서
Dialogue: 0,0:03:22.59,0:03:24.54,Default,,0000,0000,0000,,해당 내용을 복사(copy)합니다
Dialogue: 0,0:03:24.54,0:03:28.64,Default,,0000,0000,0000,,그 다음에는 붙여넣기(paste)를 할겁니다\N역시 운영체제에 맞게
Dialogue: 0,0:03:28.64,0:03:31.08,Default,,0000,0000,0000,,키보드의 단축키인 ctrl키와 V키 \N혹은 command와 V키를 눌러서
Dialogue: 0,0:03:31.08,0:03:33.04,Default,,0000,0000,0000,,내용을 붙여 넣어줍니다
Dialogue: 0,0:03:33.04,0:03:36.87,Default,,0000,0000,0000,,이렇게 붙여준 내용에서 \N조금만 값을 바꾸어주면 됩니다
Dialogue: 0,0:03:36.87,0:03:41.78,Default,,0000,0000,0000,,그럼 값을 각각 Deamon, cat \N그리고 black으로 바꾸어줍니다
Dialogue: 0,0:03:41.78,0:03:44.40,Default,,0000,0000,0000,,그다음에 다시 한 번 복사-붙여넣기를 해주세요
Dialogue: 0,0:03:44.40,0:03:52.70,Default,,0000,0000,0000,,그다음에 값을 각각 Angel, cat \N그리고 orange로 바꾸어줍니다
Dialogue: 0,0:03:52.70,0:03:55.61,Default,,0000,0000,0000,,좋아요 \N원래는 엄청 지루하게
Dialogue: 0,0:03:55.61,0:03:59.07,Default,,0000,0000,0000,,''태그와 ''태그를 계속해서 써야만 했지만
Dialogue: 0,0:03:59.07,0:04:03.29,Default,,0000,0000,0000,,이렇게 복사하고 붙여넣기 방식을 이용하면\N덜 지루하게 작업할 수 있어요
Dialogue: 0,0:04:03.30,0:04:05.85,Default,,0000,0000,0000,,그렇게 우리는 테이블을 하나 만들어 보았습니다
Dialogue: 0,0:04:05.85,0:04:08.04,Default,,0000,0000,0000,,간단하게 더 많은 세로줄을 추가할 수도 있어요
Dialogue: 0,0:04:08.04,0:04:10.55,Default,,0000,0000,0000,,단순히 헤더에 또 다른 ''태그를 추가하고
Dialogue: 0,0:04:10.55,0:04:12.83,Default,,0000,0000,0000,,'' 태그 안의 각 줄에도 그렇게 추가해주세요
Dialogue: 0,0:04:12.83,0:04:16.14,Default,,0000,0000,0000,,제 반려동물에 대해 보다 많은 정보를 공유하고 싶다면 말이죠
Dialogue: 0,0:04:16.14,0:04:19.66,Default,,0000,0000,0000,,이제 어떻게 하면 테두리나 색\N그리고 각 칸의 크기 등
Dialogue: 0,0:04:19.66,0:04:22.21,Default,,0000,0000,0000,,테이블의 모양을 바꿀 수 있는지 궁금할거에요
Dialogue: 0,0:04:22.21,0:04:24.67,Default,,0000,0000,0000,,이러한 모든 것은 이미 여러분이 배웠거나 나중에 배울
Dialogue: 0,0:04:24.67,0:04:27.77,Default,,0000,0000,0000,,CSS 속성값들(Properties)을 변경하는 것으로 바꿀 수 있어요
Dialogue: 0,0:04:27.77,0:04:31.46,Default,,0000,0000,0000,,지금은 이 웹사이트를 조금 바꾸어서 여러분의 반려동물이나
Dialogue: 0,0:04:31.46,0:04:33.29,Default,,0000,0000,0000,,여러분이 가지고 싶은 반려동물들의 페이지를 만들어보세요
Dialogue: 0,0:04:33.29,0:04:35.16,Default,,0000,0000,0000,,데이터를 테이블로 만들어 보아요!