WEBVTT

00:00:00.000 --> 00:00:02.655
저는 제 반려동물(pet)들의 이름을 나열한 리스트를 가진

00:00:02.655 --> 00:00:04.345
웹 페이지를 만들어보려고 합니다

00:00:04.345 --> 00:00:06.757
이 리스트를 보세요 
어떤 것이 궁금한가요?

00:00:06.757 --> 00:00:11.113
저는 Black & White, Deamon, Angel이라는
이름을 가진 반려동물이 있어요

00:00:11.113 --> 00:00:12.964
그러나 그들은 어떠한 종류의 반려동물인가요?

00:00:12.964 --> 00:00:14.553
그들은 어떤 색인가요?

00:00:14.553 --> 00:00:16.124
그들은 몇 살인가요?

00:00:16.124 --> 00:00:18.316
저는 여러분의 질문에 대답할 수 있도록

00:00:18.316 --> 00:00:21.047
이 리스트에서 반려동물들에 대해 
보다 많은 정보를 주고 싶습니다

00:00:21.047 --> 00:00:23.457
그러기 위해서 저는 중첩된(nested) 리스트를 만들거나

00:00:23.457 --> 00:00:26.816
또는 여러분이 이미 알고 있는 것처럼
괄호 안에 정보를 넣을 수 있습니다

00:00:26.816 --> 00:00:30.332
Black & white은 토끼이고

00:00:30.332 --> 00:00:32.213
Deamon은 고양이이며

00:00:32.213 --> 00:00:34.204
Angel도 고양이입니다

00:00:34.204 --> 00:00:37.375
그러나 저는 이것이 마음에 들지 않네요
왜냐하면 전혀 정돈되어 보이지 않기도 하고

00:00:37.375 --> 00:00:40.906
한눈에 쉽게 전체 내용을 훑어보기도 쉽지 않고

00:00:40.906 --> 00:00:42.786
게다가 모든 종을 한눈에 보기도 어렵습니다

00:00:42.786 --> 00:00:47.346
사실 이것은 테이블을 위한 완벽한 예제입니다

00:00:47.346 --> 00:00:49.140
각각의 가로줄(row)에는 각 반려동물의 정보를 적고

00:00:49.140 --> 00:00:51.858
각각의 세로줄(column)에는 남들에게 공유하고 싶은

00:00:51.858 --> 00:00:54.084
반려동물이 가진 특성을 적어주면 될 것 같습니다

00:00:54.084 --> 00:00:58.378
HTML에서 테이블을 만들기 위해서는
아주 많은 양의 태그(tag)들이 필요할 것입니다

00:00:58.378 --> 00:00:59.958
그러니 스스로 각오를 다지고 대비하세요

00:00:59.958 --> 00:01:02.561
그렇다고 이런 모든 태그들을 
기억하는 것에 대해서 걱정하진 마세요

00:01:02.561 --> 00:01:04.434
나중에 언제든지 태그들을 찾아볼 수 있으니까요

00:01:04.434 --> 00:01:07.192
모든 테이블 태그들을 외우는데 10년이나 걸렸어요

00:01:07.192 --> 00:01:08.608
물론 지금은 전문가지요

00:01:08.608 --> 00:01:10.436
좋아요 그럼 준비되었나요?

00:01:10.436 --> 00:01:15.084
첫 태그는 적절하게도 '' 태그입니다

00:01:15.084 --> 00:01:20.017
다음으로는 테이블의 각 세로줄에 이름을 적기 위해
테이블의 헤더(header)영역이 필요합니다

00:01:20.023 --> 00:01:23.043
그러므로 '' 태그를 써줍니다

00:01:23.043 --> 00:01:27.858
그 안에 보통은 헤더 칸들이 하나의 가로줄로 나열되 있습니다

00:01:27.858 --> 00:01:32.002
언제든지 테이블에 가로줄을 만들기 위해서는
'' 태그을 사용하면 됩니다

00:01:32.002 --> 00:01:35.286
그 가로줄 안에 헤더 칸들을 만듭니다

00:01:35.286 --> 00:01:41.677
하나의 헤더 칸을 그리기 위해서 
태그를 사용합니다

00:01:41.677 --> 00:01:44.879
좋아요, 첫 번째 세로줄에는 어떤 이름을 붙일까요?

00:01:44.879 --> 00:01:49.092
각 줄을 구별하는데 가장 중요한 정보인
이름을 적어볼게요

00:01:49.092 --> 00:01:51.306
그리고 이것은 각 동물을 구별하는 식별자가 될 것입니다

00:01:51.306 --> 00:01:54.699
다음으로는 종을 적을 또 다른 세로줄을 추가하고

00:01:54.699 --> 00:01:58.602
마지막으로 색을 쓸 세로줄을 추가합니다

00:01:58.602 --> 00:02:01.532
지금은 이정도면 적당한 것 같습니다

00:02:01.532 --> 00:02:03.915
그럼 각 줄에 데이터(data)를 추가해봅시다

00:02:03.915 --> 00:02:05.951
데이터를 적는 줄은 '' 태그 아래에

00:02:05.951 --> 00:02:09.473
'' 태그를 적어주는 것으로 시작합니다

00:02:09.473 --> 00:02:11.847
그 다음엔 다시한번 가로줄을 쓰기 위해서

00:02:11.847 --> 00:02:14.282
'' 태그를 사용합니다

00:02:14.282 --> 00:02:16.717
하지만 그 안에 '' 태그를 사용하는 대신에
'' 태그를 사용할 것입니다

00:02:16.717 --> 00:02:20.005
왜냐면 우리는 헤더(header)가 아닌
본문(body)에 가로줄을 만들기 때문입니다.

00:02:20.005 --> 00:02:23.136
 태그는 표(tabular)의 데이터(data)의 약자입니디

00:02:23.136 --> 00:02:26.471
그러면 첫 번째 줄의 첫 번째 칸에는

00:02:26.471 --> 00:02:28.056
어떠한 값(value)가 들어가야 할까요?

00:02:28.056 --> 00:02:30.311
제가 만들었던 리스트를 다시한번 살펴보기로 하죠

00:02:30.311 --> 00:02:33.801
제가 만든 리스트의 첫 번째 줄에 
Black & white라고 써있네요

00:02:33.801 --> 00:02:36.019
이것은 그 반려동물의 이름입니다

00:02:36.019 --> 00:02:40.258
그러므로 간단하게 'Black & white' 라고 쓰겠습니다

00:02:40.258 --> 00:02:42.496
다음으로 두번째 '' 태그를 적어줍니다

00:02:42.496 --> 00:02:46.726
두 번째 '' 태그를 보면 '종'이라 쓰여있으므로 
여기에는 반려동물의 종을 적어야 함을 알 수 있습니다

00:02:46.726 --> 00:02:49.724
그리고 Black & white은 토끼였으니

00:02:49.724 --> 00:02:52.497
'rabbit'이라고 쓸게요

00:02:52.497 --> 00:02:55.159
마지막으로 위에서 했던 방식대로

00:02:55.159 --> 00:02:58.089
세번째 '' 태그를 보면
'색'이라고 써져 있으므로


00:02:58.089 --> 00:03:00.177
세번째 '' 태그에는 그에 해당하는 
정보를 적어주어야 할 것입니다

00:03:00.177 --> 00:03:04.430
아마도 제가 이 토끼의 이름을 지을때
저는 그리 창의적인 아이는 아니었던 것 같아요

00:03:04.430 --> 00:03:08.215
여러분도 토끼의 색깔을 
쉽게 짐작하실수 있으실 거에요

00:03:08.215 --> 00:03:10.767
좋아요. 그럼 다음줄로 넘어가보죠

00:03:10.767 --> 00:03:13.067
먼저 간단한 트릭(trick)을 알려드릴게요

00:03:13.067 --> 00:03:15.544
먼저 첫 번째 줄을 작성하고 난 뒤에

00:03:15.544 --> 00:03:17.126
그 첫 번째 줄을 선택하고

00:03:17.126 --> 00:03:19.394
여러분의 운영체제(Operationg system)에 따라서

00:03:19.394 --> 00:03:22.588
키보드의 단축키인 ctrl키와 C키 
혹은 command와 C키를 눌러서

00:03:22.588 --> 00:03:24.538
해당 내용을 복사(copy)합니다

00:03:24.538 --> 00:03:28.637
그 다음에는 붙여넣기(paste)를 할겁니다
역시 운영체제에 맞게

00:03:28.637 --> 00:03:31.082
키보드의 단축키인 ctrl키와 V키 
혹은 command와 V키를 눌러서

00:03:31.082 --> 00:03:33.035
내용을 붙여 넣어줍니다

00:03:33.035 --> 00:03:36.870
이렇게 붙여준 내용에서 
조금만 값을 바꾸어주면 됩니다

00:03:36.870 --> 00:03:41.779
그럼 값을 각각 Deamon, cat 
그리고 black으로 바꾸어줍니다

00:03:41.779 --> 00:03:44.397
그다음에 다시 한 번 복사-붙여넣기를 해주세요

00:03:44.397 --> 00:03:52.705
그다음에 값을 각각 Angel, cat 
그리고 orange로 바꾸어줍니다

00:03:52.705 --> 00:03:55.607
좋아요 
원래는 엄청 지루하게

00:03:55.607 --> 00:03:59.068
''태그와 ''태그를 계속해서 써야만 했지만

00:03:59.068 --> 00:04:03.292
이렇게 복사하고 붙여넣기 방식을 이용하면
덜 지루하게 작업할 수 있어요

00:04:03.299 --> 00:04:05.853
그렇게 우리는 테이블을 하나 만들어 보았습니다

00:04:05.853 --> 00:04:08.041
간단하게 더 많은 세로줄을 추가할 수도 있어요

00:04:08.041 --> 00:04:10.548
단순히 헤더에 또 다른 ''태그를 추가하고

00:04:10.548 --> 00:04:12.827
'' 태그 안의 각 줄에도 그렇게 추가해주세요

00:04:12.827 --> 00:04:16.142
제 반려동물에 대해 보다 많은 정보를 공유하고 싶다면 말이죠

00:04:16.142 --> 00:04:19.661
이제 어떻게 하면 테두리나 색
그리고 각 칸의 크기 등

00:04:19.661 --> 00:04:22.209
테이블의 모양을 바꿀 수 있는지 궁금할거에요

00:04:22.209 --> 00:04:24.673
이러한 모든 것은 이미 여러분이 배웠거나 나중에 배울

00:04:24.673 --> 00:04:27.768
CSS 속성값들(Properties)을 변경하는 것으로 바꿀 수 있어요

00:04:27.768 --> 00:04:31.462
지금은 이 웹사이트를 조금 바꾸어서 여러분의 반려동물이나

00:04:31.462 --> 00:04:33.294
여러분이 가지고 싶은 반려동물들의 페이지를 만들어보세요

00:04:33.294 --> 00:04:35.161
데이터를 테이블로 만들어 보아요!