-
저는 제 반려동물(pet)들의 이름을 나열한 리스트를 가진
-
웹 페이지를 만들어보려고 합니다
-
이 리스트를 보세요
어떤 것이 궁금한가요?
-
저는 Black & White, Deamon, Angel이라는
이름을 가진 반려동물이 있어요
-
그러나 그들은 어떠한 종류의 반려동물인가요?
-
그들은 어떤 색인가요?
-
그들은 몇 살인가요?
-
저는 여러분의 질문에 대답할 수 있도록
-
이 리스트에서 반려동물들에 대해
보다 많은 정보를 주고 싶습니다
-
그러기 위해서 저는 중첩된(nested) 리스트를 만들거나
-
또는 여러분이 이미 알고 있는 것처럼
괄호 안에 정보를 넣을 수 있습니다
-
Black & white은 토끼이고
-
Deamon은 고양이이며
-
Angel도 고양이입니다
-
그러나 저는 이것이 마음에 들지 않네요
왜냐하면 전혀 정돈되어 보이지 않기도 하고
-
한눈에 쉽게 전체 내용을 훑어보기도 쉽지 않고
-
게다가 모든 종을 한눈에 보기도 어렵습니다
-
사실 이것은 테이블을 위한 완벽한 예제입니다
-
각각의 가로줄(row)에는 각 반려동물의 정보를 적고
-
각각의 세로줄(column)에는 남들에게 공유하고 싶은
-
반려동물이 가진 특성을 적어주면 될 것 같습니다
-
HTML에서 테이블을 만들기 위해서는
아주 많은 양의 태그(tag)들이 필요할 것입니다
-
그러니 스스로 각오를 다지고 대비하세요
-
그렇다고 이런 모든 태그들을
기억하는 것에 대해서 걱정하진 마세요
-
나중에 언제든지 태그들을 찾아볼 수 있으니까요
-
모든 테이블 태그들을 외우는데 10년이나 걸렸어요
-
물론 지금은 전문가지요
-
좋아요 그럼 준비되었나요?
-
첫 태그는 적절하게도 '' 태그입니다
-
다음으로는 테이블의 각 세로줄에 이름을 적기 위해
테이블의 헤더(header)영역이 필요합니다
-
그러므로 '' 태그를 써줍니다
-
그 안에 보통은 헤더 칸들이 하나의 가로줄로 나열되 있습니다
-
언제든지 테이블에 가로줄을 만들기 위해서는
'' 태그을 사용하면 됩니다
-
그 가로줄 안에 헤더 칸들을 만듭니다
-
하나의 헤더 칸을 그리기 위해서
태그를 사용합니다
-
좋아요, 첫 번째 세로줄에는 어떤 이름을 붙일까요?
-
각 줄을 구별하는데 가장 중요한 정보인
이름을 적어볼게요
-
그리고 이것은 각 동물을 구별하는 식별자가 될 것입니다
-
다음으로는 종을 적을 또 다른 세로줄을 추가하고
-
마지막으로 색을 쓸 세로줄을 추가합니다
-
지금은 이정도면 적당한 것 같습니다
-
그럼 각 줄에 데이터(data)를 추가해봅시다
-
데이터를 적는 줄은 '' 태그 아래에
-
'' 태그를 적어주는 것으로 시작합니다
-
그 다음엔 다시한번 가로줄을 쓰기 위해서
-
'' 태그를 사용합니다
-
하지만 그 안에 '' 태그를 사용하는 대신에
'' 태그를 사용할 것입니다
-
왜냐면 우리는 헤더(header)가 아닌
본문(body)에 가로줄을 만들기 때문입니다.
-
태그는 표(tabular)의 데이터(data)의 약자입니디
-
그러면 첫 번째 줄의 첫 번째 칸에는
-
어떠한 값(value)가 들어가야 할까요?
-
제가 만들었던 리스트를 다시한번 살펴보기로 하죠
-
제가 만든 리스트의 첫 번째 줄에
Black & white라고 써있네요
-
이것은 그 반려동물의 이름입니다
-
그러므로 간단하게 'Black & white' 라고 쓰겠습니다
-
다음으로 두번째 '' 태그를 적어줍니다
-
두 번째 '' 태그를 보면 '종'이라 쓰여있으므로
여기에는 반려동물의 종을 적어야 함을 알 수 있습니다
-
그리고 Black & white은 토끼였으니
-
'rabbit'이라고 쓸게요
-
마지막으로 위에서 했던 방식대로
-
세번째 '' 태그를 보면
'색'이라고 써져 있으므로
-
세번째 '' 태그에는 그에 해당하는
정보를 적어주어야 할 것입니다
-
아마도 제가 이 토끼의 이름을 지을때
저는 그리 창의적인 아이는 아니었던 것 같아요
-
여러분도 토끼의 색깔을
쉽게 짐작하실수 있으실 거에요
-
좋아요. 그럼 다음줄로 넘어가보죠
-
먼저 간단한 트릭(trick)을 알려드릴게요
-
먼저 첫 번째 줄을 작성하고 난 뒤에
-
그 첫 번째 줄을 선택하고
-
여러분의 운영체제(Operationg system)에 따라서
-
키보드의 단축키인 ctrl키와 C키
혹은 command와 C키를 눌러서
-
해당 내용을 복사(copy)합니다
-
그 다음에는 붙여넣기(paste)를 할겁니다
역시 운영체제에 맞게
-
키보드의 단축키인 ctrl키와 V키
혹은 command와 V키를 눌러서
-
내용을 붙여 넣어줍니다
-
이렇게 붙여준 내용에서
조금만 값을 바꾸어주면 됩니다
-
그럼 값을 각각 Deamon, cat
그리고 black으로 바꾸어줍니다
-
그다음에 다시 한 번 복사-붙여넣기를 해주세요
-
그다음에 값을 각각 Angel, cat
그리고 orange로 바꾸어줍니다
-
좋아요
원래는 엄청 지루하게
-
''태그와 ''태그를 계속해서 써야만 했지만
-
이렇게 복사하고 붙여넣기 방식을 이용하면
덜 지루하게 작업할 수 있어요
-
그렇게 우리는 테이블을 하나 만들어 보았습니다
-
간단하게 더 많은 세로줄을 추가할 수도 있어요
-
단순히 헤더에 또 다른 ''태그를 추가하고
-
'' 태그 안의 각 줄에도 그렇게 추가해주세요
-
제 반려동물에 대해 보다 많은 정보를 공유하고 싶다면 말이죠
-
이제 어떻게 하면 테두리나 색
그리고 각 칸의 크기 등
-
테이블의 모양을 바꿀 수 있는지 궁금할거에요
-
이러한 모든 것은 이미 여러분이 배웠거나 나중에 배울
-
CSS 속성값들(Properties)을 변경하는 것으로 바꿀 수 있어요
-
지금은 이 웹사이트를 조금 바꾸어서 여러분의 반려동물이나
-
여러분이 가지고 싶은 반려동물들의 페이지를 만들어보세요
-
데이터를 테이블로 만들어 보아요!