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

2
00:00:02,655 --> 00:00:04,345
웹 페이지를 만들어보려고 합니다

3
00:00:04,345 --> 00:00:06,757
이 리스트를 보세요 
어떤 것이 궁금한가요?

4
00:00:06,757 --> 00:00:11,113
저는 Black & White, Deamon, Angel이라는
이름을 가진 반려동물이 있어요

5
00:00:11,113 --> 00:00:12,964
그러나 그들은 어떠한 종류의 반려동물인가요?

6
00:00:12,964 --> 00:00:14,553
그들은 어떤 색인가요?

7
00:00:14,553 --> 00:00:16,124
그들은 몇 살인가요?

8
00:00:16,124 --> 00:00:18,316
저는 여러분의 질문에 대답할 수 있도록

9
00:00:18,316 --> 00:00:21,047
이 리스트에서 반려동물들에 대해 
보다 많은 정보를 주고 싶습니다

10
00:00:21,047 --> 00:00:23,457
그러기 위해서 저는 중첩된(nested) 리스트를 만들거나

11
00:00:23,457 --> 00:00:26,816
또는 여러분이 이미 알고 있는 것처럼
괄호 안에 정보를 넣을 수 있습니다

12
00:00:26,816 --> 00:00:30,332
Black & white은 토끼이고

13
00:00:30,332 --> 00:00:32,213
Deamon은 고양이이며

14
00:00:32,213 --> 00:00:34,204
Angel도 고양이입니다

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

16
00:00:37,375 --> 00:00:40,906
한눈에 쉽게 전체 내용을 훑어보기도 쉽지 않고

17
00:00:40,906 --> 00:00:42,786
게다가 모든 종을 한눈에 보기도 어렵습니다

18
00:00:42,786 --> 00:00:47,346
사실 이것은 테이블을 위한 완벽한 예제입니다

19
00:00:47,346 --> 00:00:49,140
각각의 가로줄(row)에는 각 반려동물의 정보를 적고

20
00:00:49,140 --> 00:00:51,858
각각의 세로줄(column)에는 남들에게 공유하고 싶은

21
00:00:51,858 --> 00:00:54,084
반려동물이 가진 특성을 적어주면 될 것 같습니다

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

23
00:00:58,378 --> 00:00:59,958
그러니 스스로 각오를 다지고 대비하세요

24
00:00:59,958 --> 00:01:02,561
그렇다고 이런 모든 태그들을 
기억하는 것에 대해서 걱정하진 마세요

25
00:01:02,561 --> 00:01:04,434
나중에 언제든지 태그들을 찾아볼 수 있으니까요

26
00:01:04,434 --> 00:01:07,192
모든 테이블 태그들을 외우는데 10년이나 걸렸어요

27
00:01:07,192 --> 00:01:08,608
물론 지금은 전문가지요

28
00:01:08,608 --> 00:01:10,436
좋아요 그럼 준비되었나요?

29
00:01:10,436 --> 00:01:15,084
첫 태그는 적절하게도 '' 태그입니다

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

31
00:01:20,023 --> 00:01:23,043
그러므로 '' 태그를 써줍니다

32
00:01:23,043 --> 00:01:27,858
그 안에 보통은 헤더 칸들이 하나의 가로줄로 나열되 있습니다

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

34
00:01:32,002 --> 00:01:35,286
그 가로줄 안에 헤더 칸들을 만듭니다

35
00:01:35,286 --> 00:01:41,677
하나의 헤더 칸을 그리기 위해서 
태그를 사용합니다

36
00:01:41,677 --> 00:01:44,879
좋아요, 첫 번째 세로줄에는 어떤 이름을 붙일까요?

37
00:01:44,879 --> 00:01:49,092
각 줄을 구별하는데 가장 중요한 정보인
이름을 적어볼게요

38
00:01:49,092 --> 00:01:51,306
그리고 이것은 각 동물을 구별하는 식별자가 될 것입니다

39
00:01:51,306 --> 00:01:54,699
다음으로는 종을 적을 또 다른 세로줄을 추가하고

40
00:01:54,699 --> 00:01:58,602
마지막으로 색을 쓸 세로줄을 추가합니다

41
00:01:58,602 --> 00:02:01,532
지금은 이정도면 적당한 것 같습니다

42
00:02:01,532 --> 00:02:03,915
그럼 각 줄에 데이터(data)를 추가해봅시다

43
00:02:03,915 --> 00:02:05,951
데이터를 적는 줄은 '' 태그 아래에

44
00:02:05,951 --> 00:02:09,473
'' 태그를 적어주는 것으로 시작합니다

45
00:02:09,473 --> 00:02:11,847
그 다음엔 다시한번 가로줄을 쓰기 위해서

46
00:02:11,847 --> 00:02:14,282
'' 태그를 사용합니다

47
00:02:14,282 --> 00:02:16,717
하지만 그 안에 '' 태그를 사용하는 대신에
'' 태그를 사용할 것입니다

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

49
00:02:20,005 --> 00:02:23,136
 태그는 표(tabular)의 데이터(data)의 약자입니디

50
00:02:23,136 --> 00:02:26,471
그러면 첫 번째 줄의 첫 번째 칸에는

51
00:02:26,471 --> 00:02:28,056
어떠한 값(value)가 들어가야 할까요?

52
00:02:28,056 --> 00:02:30,311
제가 만들었던 리스트를 다시한번 살펴보기로 하죠

53
00:02:30,311 --> 00:02:33,801
제가 만든 리스트의 첫 번째 줄에 
Black & white라고 써있네요

54
00:02:33,801 --> 00:02:36,019
이것은 그 반려동물의 이름입니다

55
00:02:36,019 --> 00:02:40,258
그러므로 간단하게 'Black & white' 라고 쓰겠습니다

56
00:02:40,258 --> 00:02:42,496
다음으로 두번째 '' 태그를 적어줍니다

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

58
00:02:46,726 --> 00:02:49,724
그리고 Black & white은 토끼였으니

59
00:02:49,724 --> 00:02:52,497
'rabbit'이라고 쓸게요

60
00:02:52,497 --> 00:02:55,159
마지막으로 위에서 했던 방식대로

61
00:02:55,159 --> 00:02:58,089
세번째 '' 태그를 보면
'색'이라고 써져 있으므로


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

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

64
00:03:04,430 --> 00:03:08,215
여러분도 토끼의 색깔을 
쉽게 짐작하실수 있으실 거에요

65
00:03:08,215 --> 00:03:10,767
좋아요. 그럼 다음줄로 넘어가보죠

66
00:03:10,767 --> 00:03:13,067
먼저 간단한 트릭(trick)을 알려드릴게요

67
00:03:13,067 --> 00:03:15,544
먼저 첫 번째 줄을 작성하고 난 뒤에

68
00:03:15,544 --> 00:03:17,126
그 첫 번째 줄을 선택하고

69
00:03:17,126 --> 00:03:19,394
여러분의 운영체제(Operationg system)에 따라서

70
00:03:19,394 --> 00:03:22,588
키보드의 단축키인 ctrl키와 C키 
혹은 command와 C키를 눌러서

71
00:03:22,588 --> 00:03:24,538
해당 내용을 복사(copy)합니다

72
00:03:24,538 --> 00:03:28,637
그 다음에는 붙여넣기(paste)를 할겁니다
역시 운영체제에 맞게

73
00:03:28,637 --> 00:03:31,082
키보드의 단축키인 ctrl키와 V키 
혹은 command와 V키를 눌러서

74
00:03:31,082 --> 00:03:33,035
내용을 붙여 넣어줍니다

75
00:03:33,035 --> 00:03:36,870
이렇게 붙여준 내용에서 
조금만 값을 바꾸어주면 됩니다

76
00:03:36,870 --> 00:03:41,779
그럼 값을 각각 Deamon, cat 
그리고 black으로 바꾸어줍니다

77
00:03:41,779 --> 00:03:44,397
그다음에 다시 한 번 복사-붙여넣기를 해주세요

78
00:03:44,397 --> 00:03:52,705
그다음에 값을 각각 Angel, cat 
그리고 orange로 바꾸어줍니다

79
00:03:52,705 --> 00:03:55,607
좋아요 
원래는 엄청 지루하게

80
00:03:55,607 --> 00:03:59,068
''태그와 ''태그를 계속해서 써야만 했지만

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

82
00:04:03,299 --> 00:04:05,853
그렇게 우리는 테이블을 하나 만들어 보았습니다

83
00:04:05,853 --> 00:04:08,041
간단하게 더 많은 세로줄을 추가할 수도 있어요

84
00:04:08,041 --> 00:04:10,548
단순히 헤더에 또 다른 ''태그를 추가하고

85
00:04:10,548 --> 00:04:12,827
'' 태그 안의 각 줄에도 그렇게 추가해주세요

86
00:04:12,827 --> 00:04:16,142
제 반려동물에 대해 보다 많은 정보를 공유하고 싶다면 말이죠

87
00:04:16,142 --> 00:04:19,661
이제 어떻게 하면 테두리나 색
그리고 각 칸의 크기 등

88
00:04:19,661 --> 00:04:22,209
테이블의 모양을 바꿀 수 있는지 궁금할거에요

89
00:04:22,209 --> 00:04:24,673
이러한 모든 것은 이미 여러분이 배웠거나 나중에 배울

90
00:04:24,673 --> 00:04:27,768
CSS 속성값들(Properties)을 변경하는 것으로 바꿀 수 있어요

91
00:04:27,768 --> 00:04:31,462
지금은 이 웹사이트를 조금 바꾸어서 여러분의 반려동물이나

92
00:04:31,462 --> 00:04:33,294
여러분이 가지고 싶은 반려동물들의 페이지를 만들어보세요

93
00:04:33,294 --> 00:04:35,161
데이터를 테이블로 만들어 보아요!