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

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

0:00:04.345,0:00:06.757
이 리스트를 보세요 [br]어떤 것이 궁금한가요?

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

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

0:00:12.964,0:00:14.553
그들은 어떤 색인가요?

0:00:14.553,0:00:16.124
그들은 몇 살인가요?

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

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

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

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

0:00:26.816,0:00:30.332
Black & white은 토끼이고

0:00:30.332,0:00:32.213
Deamon은 고양이이며

0:00:32.213,0:00:34.204
Angel도 고양이입니다

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

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

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

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

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

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

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

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

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

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

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

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

0:01:07.192,0:01:08.608
물론 지금은 전문가지요

0:01:08.608,0:01:10.436
좋아요 그럼 준비되었나요?

0:01:10.436,0:01:15.084
첫 태그는 적절하게도 '' 태그입니다

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

0:01:20.023,0:01:23.043
그러므로 '' 태그를 써줍니다

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

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

0:01:32.002,0:01:35.286
그 가로줄 안에 헤더 칸들을 만듭니다

0:01:35.286,0:01:41.677
하나의 헤더 칸을 그리기 위해서 [br]태그를 사용합니다

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

0:01:44.879,0:01:49.092
각 줄을 구별하는데 가장 중요한 정보인[br]이름을 적어볼게요

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

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

0:01:54.699,0:01:58.602
마지막으로 색을 쓸 세로줄을 추가합니다

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

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

0:02:03.915,0:02:05.951
데이터를 적는 줄은 '' 태그 아래에

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

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

0:02:11.847,0:02:14.282
'' 태그를 사용합니다

0:02:14.282,0:02:16.717
하지만 그 안에 '' 태그를 사용하는 대신에[br]'' 태그를 사용할 것입니다

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

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

0:02:23.136,0:02:26.471
그러면 첫 번째 줄의 첫 번째 칸에는

0:02:26.471,0:02:28.056
어떠한 값(value)가 들어가야 할까요?

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

0:02:30.311,0:02:33.801
제가 만든 리스트의 첫 번째 줄에 [br]Black & white라고 써있네요

0:02:33.801,0:02:36.019
이것은 그 반려동물의 이름입니다

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

0:02:40.258,0:02:42.496
다음으로 두번째 '' 태그를 적어줍니다

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

0:02:46.726,0:02:49.724
그리고 Black & white은 토끼였으니

0:02:49.724,0:02:52.497
'rabbit'이라고 쓸게요

0:02:52.497,0:02:55.159
마지막으로 위에서 했던 방식대로

0:02:55.159,0:02:58.089
세번째 '' 태그를 보면[br]'색'이라고 써져 있으므로[br]

0:02:58.089,0:03:00.177
세번째 '' 태그에는 그에 해당하는 [br]정보를 적어주어야 할 것입니다

0:03:00.177,0:03:04.430
아마도 제가 이 토끼의 이름을 지을때[br]저는 그리 창의적인 아이는 아니었던 것 같아요

0:03:04.430,0:03:08.215
여러분도 토끼의 색깔을 [br]쉽게 짐작하실수 있으실 거에요

0:03:08.215,0:03:10.767
좋아요. 그럼 다음줄로 넘어가보죠

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

0:03:13.067,0:03:15.544
먼저 첫 번째 줄을 작성하고 난 뒤에

0:03:15.544,0:03:17.126
그 첫 번째 줄을 선택하고

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

0:03:19.394,0:03:22.588
키보드의 단축키인 ctrl키와 C키 [br]혹은 command와 C키를 눌러서

0:03:22.588,0:03:24.538
해당 내용을 복사(copy)합니다

0:03:24.538,0:03:28.637
그 다음에는 붙여넣기(paste)를 할겁니다[br]역시 운영체제에 맞게

0:03:28.637,0:03:31.082
키보드의 단축키인 ctrl키와 V키 [br]혹은 command와 V키를 눌러서

0:03:31.082,0:03:33.035
내용을 붙여 넣어줍니다

0:03:33.035,0:03:36.870
이렇게 붙여준 내용에서 [br]조금만 값을 바꾸어주면 됩니다

0:03:36.870,0:03:41.779
그럼 값을 각각 Deamon, cat [br]그리고 black으로 바꾸어줍니다

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

0:03:44.397,0:03:52.705
그다음에 값을 각각 Angel, cat [br]그리고 orange로 바꾸어줍니다

0:03:52.705,0:03:55.607
좋아요 [br]원래는 엄청 지루하게

0:03:55.607,0:03:59.068
''태그와 ''태그를 계속해서 써야만 했지만

0:03:59.068,0:04:03.292
이렇게 복사하고 붙여넣기 방식을 이용하면[br]덜 지루하게 작업할 수 있어요

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

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

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

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

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

0:04:16.142,0:04:19.661
이제 어떻게 하면 테두리나 색[br]그리고 각 칸의 크기 등

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

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

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

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

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

0:04:33.294,0:04:35.161
데이터를 테이블로 만들어 보아요!