테이블(table)은 데이터를 나열하기 위한 기법이다. 사람들은 아주 오래 전부터 복잡한 데이터를 단순화하기 위해, 반복적인 데이터를 일목요연하게 묶기 위해, 다양한 데이터를 서로 비교하기 위해 테이블을 즐겨 사용해 왔다. 테이블을 효과적으로 사용하면 정보 처리의 효율성은 물론이고 데이터에 대한 통찰도 얻을 수 있다.
그러나 저작 측면에 있어, 테이블은 까다롭고 번거롭다. 우선 테이블을 HTML로 짜는 것 자체가 결코 만만치 않다. 텍스트만으로 구성된 내용은 텍스트 흐름을 만들어주면 되지만, 테이블은 일일이 공간을 만들어 주어야 하는 어려움이 있다. 테이블은 데이터를 1차원(선)이 아니라 2차원(면)으로 구성해야 하므로 소스 코드도 훨씬 더 많아 진다. 특히, 스크린 리더 사용자를 위해서는 테이블 헤더와 데이터 셀을 서로 연결시켜 주는 장치까지 일일이 만들어야 하는데, 이것 역시 만만치 않은 작업이다. 또한 테이블은 신축성이 없기 때문에 작은 화면에 담기 어렵다. 물론 테이블 자체를 줄이고 늘리는 것은 가능하지만, 과도하게 줄이거나 늘리게 되면 데이터를 효과적으로 표현할 수 없게 된다. 어떻게 보면 테이블은 도형이나 다름 없다. 중요한 것은 테이블은 필수 구성요소가 아니라는 사실과 테이블을 사용하는 것보다 사용하지 않는 편이 더 나을 수 있다는 사실이다. 물론 테이블을 사용하지 않으면 내용이 반복되거나 또는 불필요한 내용이 생길 수 있으므로 필요한 경우에는 테이블을 적극적으로 사용하는 것이 바람직하지만 그림이나 도형처럼 문서의 모양새를 위한 용도로 테이블이 무분별하게 사용하는 것은 줄일 필요가 있다.
실제로 용도에 맞지 않게 구현된 테이블이 지나치게 많다. 이로 인한 문제점들이 하나 둘씩 나타나고 있는데, 이 중에서 테이블을 배치 용도로 사용하고 있다는 점과 테이블의 의미적 마크업 수준이 높지 않다는 점이 가장 큰 문제점이다. 웹 초창기에 웹 문서에 대한 표준 기술을 만들었던 사람들은 웹이 이토록 다양한 분야에서 활용될 것으로 예상하지 못했을 것이다. 웹이 예상보다 빠르게 보급되면서 웹 문서에 대한 요구사항도 다양해 졌지만, 표준 기술은 여전히 학술적 용도의 웹 문서를 구현하는데 머물고 있었다. 특히, 문서 내에 여러 가지 구성요소를 배치해야 하는 상황이 자주 발생하였는데, 이를 위한 표준 기술이 마땅치 않았었다. 그래서 저작자들은 워드 프로세스에서 그랬던 것처럼 테이블을 이용하여 구성요소를 배치하였다. 이제는 SECTION, NAV, ARTICLE, ASIDE, HEADER, FOOTER, DIV 요소 등 섹션을 만들 수 있는 방법이 다양해 졌고 스타일 시트의 편집 기능이 강화되었기 때문에 테이블로 문서의 구성요소를 배치할 이유가 없어졌다.
테이블은 브라우저가 이해할 수 있도록 구성되어야 한다. 단지 시각적으로만 이해되는 테이블은 그 의미를 제대로 전달할 수 없다. 테이블은 구조 자체가 의미를 갖는다. 즉, 데이터를 단순 나열하는 것이 아니라 중요도나 성격에 따라 의미 있는 구성을 만드는 것이며, 이를 위해 표준 기술을 적절하게 사용해야 한다.
앞에서 밝혔듯이 테이블을 만드는 일은 까다롭고 번거롭고, 신축성도 없다. 그래서 테이블은 꼭 필요할 때만 제한적으로 사용할 필요가 있다. 테이블을 사용하지 않고도 데이터를 효과적으로 표현할 수 있는 방법이 있다면 테이블을 사용하지 않는 것이 더 좋다.
예제의 경우, 테이블을 사용한 곳은 단 한 곳인데, 사실 이 곳도 테이블 없이 리스트만으로 충분히 표현할 수 있다(테이블에 대한 예제를 보여주기 위해 일부러 테이블로 작성했다). 테이블을 작성하기 위해서는 제 아무리 간단한 테이블일지라도 TABLE, CAPTION, TH, TR, TD 요소 이렇게 5개의 요소가 반드시 필요하다. TABLE 요소는 테이블의 시작과 끝, CAPTION 요소는 테이블 제목, TH 요소는 테이블 헤더 셀, TR 요소는 테이블 행, TD 요소는 데이블의 데이터 셀을 표시한다. 예제의 테이블 제목은 “할인혜택”으로 지정해야 하는데, 이렇게 되면 섹션 제목과 똑 같게 된다. 같은 내용을 중복 제공하는 것은 바람직하지 않기 때문에 이럴 때는 굳이 CAPTION 요소를 제공하지 않아도 된다. 물론 TABLE 요소 다음에는 반드시 CAPTION 요소가 와야 하기 때문에 문법적으로는 문제가 생길 수 있겠다.
테이블 구성하기를 위한 표준 기술
TABLE 요소
카테고리 | Flow content |
콘텐츠 속성 | 글로벌 속성, border |
지원 브라우저 |      |
TABLE 요소는 테이블(TABLE)의 범위를 표시한다. 테이블은 행과 열에 의해 만들어진 격자가 연속적으로 이어지는 구조를 갖는다. 이 구조를 실질적으로 만드는 것은 TR, TH, TD 요소이며, TABLE 요소는 테이블의 시작 지점과 종료 지점을 표시하는 역할을 맡는다.
카테고리 | 해당 사항 없음 |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
CAPTION 요소는 테이블 제목(CAPTION)을 표시한다. 캡션은 사진이나 도해에 붙이는 간단한 제목이나 설명을 의미한다. 여기에서는 “테이블 제목” 정도로 해석할 수 있겠다.
테이블 제목은 가장 먼저 읽혀져야 하는 요소이므로 CAPTION 요소는 TABLE 요소 바로 다음에 작성된다. 테이블 당 한 개의 CAPION 요소만 지정될 수 있으며, CAPTION 요소로 표시된 제목은 기본적으로 테이블 위에 가운데 정렬로 배치된다. 그런데 테이블 제목을 테이블 아래에 두는 경우도 많기 때문에 테이블 제목의 위치를 테이블 위, 아래, 왼쪽, 오른쪽으로 지정할 수 있도록 CAPTION 요소의 align 속성이 마련되어 있다. 그러나 이 속성을 일부 브라우저에서 지원하지 않고 있고 배치에 대한 정의는 스타일 시트를 이용하는 것이 더 효과적이므로 CAPTION 요소의 align 속성은 가급적 사용하지 않는 것이 바람직하다.
※ 위 그림은 이해를 돕기 위한 것이다. 실제로 테이블이 나타나려면 기본적으로 TR 요소와 TD 요소가 있어야 하며, border 속성에 의해 표현되는 테두리선은 실제 다르다.
TR 요소
카테고리 | 해당 사항 없음 |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
TR 요소는 테이블 행(Table Row)을 표시한다. 하나의 행을 표시하려면 한 번의 TR 요소를 작성해야 한다. 즉, 4행의 테이블이라면 4번의 TR 요소를 작성해야 하는 것이다. 이 요소는 TH나 TD 요소가 있는 행을 지정하기 위한 용도로 사용되므로 TR 요소는 반드시 TH나 TD 요소를 포함해야 한다.
이름 | 학과 | 점수 | 등급 |
홍길동 | 경영학과 | 90 | A |
전지현 | 영문학과 | 80 | B |
김철수 | 건축학과 | 70 | C |
TH 요소
카테고리 | 해당 사항 없음 |
콘텐츠 속성 | 글로벌 속성, colspan, rowspan, headers, scope |
지원 브라우저 | |
TH 요소는 테이블 헤더 셀(Table Header cell, 이하 ‘헤더 셀’)을 표시한다. 테이블 셀(table cell)은 헤더 정보를 담고 있는 헤더 셀(TH 요소)과 실제 데이터를 담고 있는 데이터 셀(TD 요소)로 구분된다. 헤더는 머리 부분, 즉 제목을 의미하므로 헤더 셀은 데이터 셀의 제목으로 볼 수 있다. 앞에서 작성한 테이블은 헤더 셀과 데이터 셀을 구분하지 않았기 때문에 제목과 내용을 동일하게 표현될 수 밖에 없었다. 본몬에서 제목을 제공하듯이 테이블에도 제목을 제공해야 하므로 제목에 해당하는 셀은 TD 요소가 아닌 TH 요소로 표시한다.
테이블 셀을 읽는 순서는 위에서 아래로, 왼쪽에서 오른쪽으로 진행된다. 그래서 일반적으로 헤더 셀은 맨 위 또는 맨 왼쪽에 위치하지만, 그렇지 않은 경우도 얼마든지 있을 수 있다. 다음 예제의 경우, 맨 왼쪽에 있는 셀은 헤더 셀이 아니라 데이터 셀이다. 만약 맨 왼쪽에 있는 셀을 헤더 셀로 기본 설정되는 원칙이 적용된다면 테이블을 잘못 해석할 수 있기 때문에 TH 요소로 명확하게 밝히는 것이 중요하다. 제목과 내용을 구분하기 위해 헤더 셀의 텍스트는 굵은 서체, 가운데 정렬로 표현된다.
번호 | 이름 | 학과 | 점수 | 등급 |
1 | 홍길동 | 경영학과 | 90 | A |
2 | 전지현 | 영문학과 | 80 | B |
3 | 김철수 | 건축학과 | 70 | C |
※ 쉬운 이해를 위해 헤더 셀의 배경색을 다르게 처리하였다.
scope 속성
scope 속성은 헤더 셀의 범위(scope)를 지정한다. 범위를 정하는 방법은 다음과 같이 5가지로 구분된다.
- scope=”row” : 헤더 셀이 가로 행에 적용된다.
번호 | 이름 | 학과 | 점수 | 등급 |
1 | 홍길동 | 경영학과 | 90 | A |
2 | 전지현 | 영문학과 | 80 | B |
3 | 김철수 | 건축학과 | 70 | C |
- scope=”col” : 헤더 셀이 세로 행에 적용된다.
번호 | 이름 | 학과 | 점수 | 등급 |
1 | 홍길동 | 경영학과 | 90 | A |
2 | 전지현 | 영문학과 | 80 | B |
3 | 김철수 | 건축학과 | 70 | C |
- scope=”rowgroup” : 헤더 셀이 행 그룹에 적용된다.
번호 | 이름 | 학과 | 점수 | 등급 |
1학년 | ||||
1 | 홍길동 | 경영학과 | 90 | A |
2 | 전지현 | 영문학과 | 80 | B |
2학년 | ||||
3 | 김철수 | 건축학과 | 70 | C |
4 | 송혜교 | 생물학과 | 80 | B |
전체 평균 | 80 | B | ||
- scope=”colgroup” : 헤더 셀이 열 그룹에 적용된다.
1, 2학년 성적표 | ||||
번호 | 이름 | 학과 | 점수 | 등급 |
1학년 | ||||
1 | 홍길동 | 경영학과 | 90 | A |
2 | 전지현 | 영문학과 | 80 | B |
2학년 | ||||
3 | 김철수 | 건축학과 | 70 | C |
4 | 송혜교 | 생물학과 | 80 | B |
전체 평균 | 80 | B | ||
TD 요소
카테고리 | 해당 사항 없음 |
콘텐츠 속성 | 글로벌 속성, colspan, rowspan, headers |
지원 브라우저 | |
TD 요소는 테이블 데이터 셀(Table Data cell)을 표시한다. 데이터 셀은 데이터를 담고 있는 공간으로써 테이블 구조를 만드는 기본 구성요소다.
셀1 | 셀2 | 셀3 |
셀4 | 셀5 | 셀6 |
colspan 속성
colspan 속성은 세로 행(column)의 병합 범위(column span)을 지정한다. 이것은 셀을 가로 방향으로 합치는 것을 의미하는데, 셀 개수에 의해 병합 범위가 정해진다.
셀1-2 | 셀3 | |
셀4 | 셀5 | 셀6 |
rowspan 속성
rowspan 속성은 가로 행(row)의 병합 범위(row span)을 지정한다. 이것은 셀을 세로 방향으로 합치는 것을 의미하는데, 셀 개수에 의해 병합 범위가 정해진다.
셀 1-4 | 셀2 | 셀3 |
셀5 | 셀6 |
headers 속성
rowspan 속성은 데이터 셀과 연결된 헤더 셀(header cells)을 지정한다. 스크린 리더 사용자는 테이블을 시각적으로 처리할 수 없기 때문에 헤더 셀과 데이터 셀을 일일이 연결시키면서 음성으로 출력한다. 간단한 구조의 테이블(simple table)은 헤더 셀과 데이터 셀을 그나마 쉽게 연결시킬 수 있지만, 복잡한 구조의 테이블(complex table)은 헤더 셀과 데이터 셀의 연결이 아주 어렵다. 이런 경우, 헤더 셀의 id 속성, 데이터 셀의 headers 속성을 이용하면 헤더 셀과 데이터 셀을 정확하게 연결시킬 수 있다.
구분 | 1학년 | 2학년 | ||
홍길동 | 전지현 | 김철수 | 송혜교 | |
전공필수 | 100 | 90 | 80 | 70 |
전공선택 | 60 | 50 | 40 | 30 |
COLGROUP 요소
카테고리 | 해당 사항 없음 |
콘텐츠 속성 | 글로벌 속성, span |
지원 브라우저 | |
COLGROUP 요소는 열 그룹(COLumn GROUP)을 표시한다. 열은 세로 행을 말하며, 이 세로 행을 하나의 그룹으로 묶는 것이 열 그룹이다. COLGROUP 요소는 CAPTION 요소 바로 다음에 작성되어야 하며, 열 그룹에 스타일을 지정할 때 사용한다. 만약 열 그룹에 스타일을 지정하지 않는다면 굳이 이 요소를 사용할 필요는 없다.
span 속성
span 속성은 열 그룹의 범위(the span of the colgroup, 열의 개수)를 지정한다. 인접해 있는 열(column)을 하나로 묶고 싶다면, 열의 개수를 속성값으로 지정한다. 가령, span=”2”로 지정하면, 해당 열을 포함하여 연이어 있는 2개의 열을 같은 열 그룹으로 묶을 수 있다.
학과 | 점수 | 등급 | |
홍길동 | 경영학과 | 90 | A |
전지현 | 영문학과 | 80 | B |
김철수 | 건축학과 | 70 | C |
COL 요소
카테고리 | 해당 사항 없음 |
콘텐츠 속성 | 글로벌 속성, span |
지원 브라우저 | |
COL 요소는 테이블 열(table COLumn, 이하 “열”)을 표시한다. 테이블 구조는 TR(table row, 테이블 행)과 TD(table data cell, 테이블 데이터 셀) 요소만으로 만들 수 있으므로 굳이 열(table column)이라는 개념이 필요 없다. 그런데 TR 요소를 이용하여 한 행에 일괄적으로 스타일을 적용하듯이, COL 요소를 이용하면 열 기준으로도 일괄적으로 스타일을 적용할 수 있다.
이름 | 학과 | 점수 | 등급 |
홍길동 | 경영학과 | 90 | A |
전지현 | 영문학과 | 80 | B |
김철수 | 건축학과 | 70 | C |
THEAD 요소
카테고리 | 해당 사항 없음 |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
THEAD 요소는 테이블 헤더 그룹(Tabel HEADer group)을 표시한다. 문서와 마찬가지로 테이블도 헤더(header), 바디(body), 푸터(footer)로 그룹핑할 수 있다. 각각 THEAD, TBODY, TFOOT 요소로 표시하는데, 이 때 그룹핑 대상은 행(table row)이다. 앞에서 살펴본 COL 요소가 열(columns)을 묶는 것이라면, THEAD, TBODY, TFOOT 요소는 행(rows)을 묶는 것이다. 행을 묶는 것은 브라우저에게 테이블에 대한 구조적 정보를 알리기 위해서며, 이를 통해 브라우저는 그룹별로 테이블을 렌더링할 수 있게 된다.
대개 테이블 헤더는 1개의 행으로 이루어져 있지만 어떤 경우에는 2~3개의 행이 테이블 헤더가 될 수 있다. 이럴 때 테이블 헤더 역할을 맡고 있는 행들을 THEAD 요소로 사용하여 테이블 헤더 영역이라는 사실을 표시한다. 또한 테이블이 너무 길어 여러 장에 걸쳐 나누어 인쇄될 경우 첫 장만 테이블 헤더가 출력되는데, 각 장마다 테이블 헤더를 출력시키고자 한다면 THEAD 요소를 사용할 필요가 있다.
THEAD 요소만 단독으로 사용할 수 없으므로 TBODY, TFOOT 요소를 함께 사용해야 하는데 이 때 하나의 테이블은 하나의 THEAD 요소만 둘 수 있다. THEAD 요소는 TR, TH, TD 요소를 포함할 수 있으며, 단순히 행만 그룹핑하므로 테이블 모양에는 영향을 주지 않는다.
TFOOT 요소
카테고리 | 해당 사항 없음 |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
TFOOT 요소는 테이블 푸터 그룹(Table FOOTer group)을 표시한다. 문서 모델과 달리, 테이블 모델에서는 테이블 푸터가 바디보다 먼저 렌더링되어야 하므로 TFOOT 요소를 TBODY 요소 앞에 작성한다. 물론 출력 순서는 TBODY 요소, TFOOT 요소 순이다. HTML 문서는 작성 순서대로 출력되지만, TBODY와 TFOOT 요소의 순서는 예외적이다. 그 이유는 테이블 헤더와 푸터를 먼저 구성한 다음에 테이블 바디를 구성하는 것이 더 효율적이기 때문이다.
이름 | 학과 | 점수 | 등급 |
홍길동 | 경영학과 | 90 | A |
전지현 | 영문학과 | 80 | B |
김철수 | 건축학과 | 70 | C |
전체평균 | 80 | B | |
TBODY 요소
카테고리 | 해당 사항 없음 |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
TBODY 요소는 테이블 바디 그룹(Table BODY group)을 표시한다. TBODY 요소로 행을 묶어야 하는 이유는 크게 세 가지로 볼 수 있다.
첫 번째, 우선 테이블 바디의 데이터가 너무 많으면 2~3문서에 걸쳐 테이블을 표현해야 하는 경우가 생기는데, 이렇게 되면 테이블 헤더, 바디, 푸터가 다른 문서에 나위어 구성될 수 있다. 테이블 데이터는 반드시 헤더와 푸터를 비교하면서 읽어야 하므로 테이블 헤더, 본문, 푸터가 같은 문서에 구성되는 것은 아주 중요하다. 이럴 때, TBODY 요소를 사용하면 테이블 바디만 스크롤할 수 있도록 만들 수 있다.
두 번째, COLGROUP 요소처럼 행 그룹(row group)을 지정할 때 TBODY 요소를 사용한다. THEAD와 TFOOT 요소는 한 번만 지정할 수 있지만, TBODY는 여러 번 지정할 수 있기 때문에 행 그룹별로 스타일을 적용시킬 수 있다(multiple table body).
세 번째, 아래에 있는 표와 같이 복잡한 구성의 테이블은 테이블 헤더 셀(TH 요소)이 테이블 중간에도 올 수 있다. 이런 경우, TBODY 요소를 사용하여 TH 요소의 범위를 테이블 바디로 한정시킬 필요가 있다.
이름 | 학과 | 점수 | 등급 |
1학년 | |||
홍길동 | 경영학과 | 90 | A |
전지현 | 영문학과 | 80 | B |
2학년 | |||
김철수 | 건축학과 | 70 | C |
송혜교 | 생물학과 | 80 | B |
전체평균 | 80 | B | |
[지금까지의 소스와 결과물]
소스
<!DOCTYPE html><html lang=”ko”><head><title>UX DESIGN</title><base href=“http://www.example.com/info”><link rel=”stylesheet” type=”text/css” href=”desktop.css”><meta charset="utf-8"><meta name=”author” content=”홍길동”><meta name=”description” content=”신간 UX DESIGN에 관한 소개 웹 사이트”><meta name=”generator” content="Dreamweaver CS 5.0"><style>div.blue {color:#0000FF}
</style><script type="text/javascript" src="demo\_time.js"></script></head><body><header><div id=”logo”><a href=”http://uxdesign.example.com”><img src=”http://www.example.com/img.gif” alt=”ux design 홈” width=”120” height=”50”></a></div><div id=”search”>검색창
</div></header><nav><ul><li><a href=”info.html>책소개</a></li><li><a href=”author.html>저자소개</a></li><li><a href=”preview.html>미리보기</a></li><li><a href=”comment.html>서평</a></li><li><a href=”event.html>이벤트</a></li><li><a href=”sell.html>구입처</a></li></ul></nav><section id=”main”><h1>책소개</h1><section id=”sub\_overview”><h2>개요</h2><hgroup><h3>UX Design, 1<sup>st</sup> Edition</h3><h4>사용자가 경험하는 모든 것을 디자인하라</h4></hgroup><p><a href=”http://www.wikipedia.org” target=”_blank”>위키피디어</a>에 따르면, <q><strong><abbr title=”user experience”>UX</abbr></strong>는 사용자가 제품, 시스템 또는 서비스를 이용하면서 얻게 되는 <em>총체적 경험</em></q>이다.
</p><blockquote cite=” http://en.wikipedia.org/wiki/User\_experience”><div class=”blue”>[위키피디어 원문] <dfn>User experience</dfn> is the way a person feels about using a product, system or service. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership, but it also includes a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system.
</div></blockquote><p><dfn>인터랙티브 제품</dfn>은 상호작용이 이루어지는 제품을 일컫는다. 이러한 제품을 다루는 것이 이미 일상이 되었기 때문에 그 과정이 지루하거나 건조하다면 제품과 함께 하는 시간은 고통의 연속일 것이다.<br> 한 동안 사용성(사용하기 쉽고 편리한 정도)이 중요하게 다뤄져 왔지만, 사용성은 제품을 구성하고 있는 부분적 속성일 뿐 이것만으로는 사용자 가치(사용자가 제품으로 얻을 수 있는 모든 것)를 제대로 구현하기가 어렵다.
</p><dl><dt>사용성:</dt><dd>사용하기 쉽고 편리한 정도</dd><dt>사용자 가치:</dt><dd>사용자가 제품을 통해 얻을 수 있는 모든 것</dd></dl><p>이 책은 UX 디자인이란 무엇인가, UX 디자인을 잘 하려면이라는 질문에 제대로 된 대답을 하기 위해 저자 스스로 사용자 경험 디자인을 이해하기 위해 노력했던 과정을 담았다.
</p></section><section id=”sub\_index”><h2>목차</h2><ol><li>사용자 경험 디자인이란</li><li>경험의 흐름</li><li>지식화에 의한 경험 형성</li><li>소비자-사용자 경험</li><li>사용자 경험의 순환구조</li></ol></section><section id=”sub\_picture”><h2>상세이미지</h2><figure><figcaption>본문 내용은 아래와 같이 구성되어 있습니다.<a href=”http://www.example.com/more.html target=”\_blank”>더보기</a></figcaption><figure><img src="/UX\_UPA.jpg” alt="UX 프로세스 썸네일" width="200" height="180"><figcaption><cite><a href=”http://www.example.com/photos\_UPA.html>UX 프로세스 by UPA</a></cite></figcaption></figure><figure><img src=”/UX\_Jess.jpg” alt=”경험의주기 썸네일” width="200" height="180"><figcaption><cite><a href=”http://www.example.com/photos\_Jess.html>경험의 주기 by Jess</a></cite></figcaption></figure><figure><img src=”/UX\_Peter.jpg” alt=”UX의 중요성 썸네일” width="200" height="180"><figcaption><cite><a href=”http://www.example.com/photos\_Peter.html>UX의 중요성 by Peter</a></cite></figcaption></figure></figure></section><article id=”sub\_comment”><h2>댓글</h2></article><div id=”pubdate”><p><small>최종수정일:<time datetime=”2012-01-25” pubdate=”pubdate”>2012년 1월 25일</time></p></div></section><aside id=”sidebar”><section id=”flash\_ad”><object data=”brazil.swf” type=”application/x-shockwave-flash” width=”250” height=”250”><p><a href=”http://www.exmaple.com/ad\_brazil.html target=”\_blank”>Brazil Eucalyptus Plantations</a></p><param name=”autoplay” value=”true”></object></section><section id=”video”><h3>Podcast</h3><video src=”mappingexperience.mp4” controls=”controls” muted=”muted” width=”250”, height=”350” poster=”slide\_title.jpg”><p><a href=”http://www.exmaple.com/mappingexperience.html>Mapping the Experience Lisbon</a></p></video><p>\[비디오\] Mapping the Experience 42분</p></section><section id=”audio”><audio src=”human.mp3” controls=”controls” preload=”none” width=”250”, height=”80”><source src=”human.ogg” type=”audio/ogg”><source src=”human.mp3” type=”audio/mp3”><p><a href=”http://www.exmaple.com/human\_cast.html>Maual for Human Experience </a></p></audio><p>\[오디오\] Manual for Human Experience 3분</p></section><section id=”benefits”><h3>예약구매혜택</h3><p><s>1월 예약고객 독서대 증정</s></p><p>2월 예약고객 10% 할인</p></section><section id=”customer”><h3>할인혜택</h3>