X

HTML5 의 의외성 [2탄] 표, 그리고 리스트

· 2021-12-06 (월) 02:32:09 · 3066 · 2

WEB 2.0 등장 이후 가장 크게 두각을 나타낸 언어가 두가지 있습니다.

바로 CSS 와 JS 입니다.

JS 중에서도 단연 Jquery 는 Action Scripts 의 쇄락을 빠른 속도로 이끌정도로 큰 인기를 가구했고

여전히 현재진행형으로 계속 발전해나가고 있습니다.

이 Jquery 에 관한 내용을 다음 내용으로 담아낸다면 좋겠네요.

 

지난 글에서는 시멘틱에 관해서 다루었습니다.

그리고 이번 글에서는 표와 리스트의 차이를 중점적으로 다루어보려고 합니다.

 

아래는 보기 쉽게 표현한 "표, Table" 의 구조 입니다.

 

NO SUBJECT WRITER DATE
< PREV  1   2   3   4   5   6   7   8   9  NEXT >      
1 첫번째 글 제목입니다. 글쓴이 A 2021-12-06
2 두번째 글 제목입니다. 글쓴이 B 2021-12-06

 

서버사이드가 익숙하다면 SQL 이 떠오르실 것이고 일반적으로는 EXCEL 을 떠올릴수도 있습니다.

 

네 그렇습니다.

EXCEL 은 알게모르게 보편적으로 사용중인 가장 기초적인 SQL Tool 입니다.

그래서 엑셀의 매크로는 C 언어를 이용하여 작성이 가능합니다.

역시나 워터폴 형식으로 IF, ELSE 또한 작성 가능한 데이터베이스 문서 입니다.

 

그리고 표가 가지는 가장 큰 특징으로는

COLUMN 과 ROW 가 있습니다.

그리고 로우별 label 을 Array 형태로 미리 선언해주는 Col 값이 hidden 처리되어 숨어있지만

이는 중급이상 퍼블리셔분들만 이해가능하고.. 이미 사용중이시기에 패스하겠습니다.

 

본 글은 표와 리스트의 차이를 이야기하고자 합니다.

 

표의 구조는 아래와 같습니다.

구조적으로 제목(Thead, th), 내용(Tbody, td), 그것들을 정리하는 요소(Tfoot, td) 가 있는걸 알 수 있습니다.

 

Thead

3067568377_1638727766.7617.png

 

Tbody

3067568377_1638727774.5931.png

 

Tfoot

3067568377_1638727791.7028.png

 

작성중

|

댓글 2개

2021-12-10 (금) 11:17:02
감사합니다.
2022-01-12 (수) 17:38:54
Thead Tfoot을 잘 활용하면 프린트시에도 각 페이지마다
web css에서 fixed 하듯이 상단, 하단을 고정시켜서 출력 시킬수 있습니다.
더 쉽게 말씀드리자면,
웹문서 프로그램을 만들다 보면, 웹에서 출력될 때 각 페이지마다 해더가 붙어야 되는 경우가 있어요
(기관의 인증 마크나, 도장이나, 사인이나 각 페이지마다 기재가 되어야 되는 경우가 있습니다.)

이러한 경우에 Thead와 Tfoot을 잘 활용하면 쉽게 만들 수 있습니다.
thead tr td 안에 div를 넣어서 개발하는 것도 가능하니, 알아두면 굉장히 좋습니다.
댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

1,282건

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
CSS 22-05-09 조회 1,838
CSS 22-04-29 조회 2,170
CSS 22-04-28 조회 2,547
CSS 22-03-14 조회 2,072
기타 21-12-23 조회 3,042
반응형 21-12-06 조회 3,612
웹접근성 21-12-06 조회 3,067
CSS 21-08-10 조회 5,530
기타 21-06-24 조회 9,366
CSS 21-06-16 조회 3,731
웹접근성 20-12-08 조회 4,198
CSS 20-09-16 조회 4,697
기타 20-09-10 조회 3,876
CSS 20-08-04 조회 4,110
기타 20-08-03 조회 3,626
기타 20-03-23 조회 3,381
CSS 20-01-14 조회 4,248
HTML 20-01-14 조회 4,876
기타 19-09-26 조회 8,439
웹접근성 19-05-25 조회 3,571
기타 19-03-26 조회 3,472
기타 19-03-17 조회 4,832
기타 19-02-20 조회 4,684
기타 19-02-12 조회 4,637
기타 19-02-12 조회 3,135
기타 19-02-12 조회 3,175
기타 19-02-07 조회 3,024
기타 19-02-07 조회 2,996
기타 19-02-07 조회 3,636
기타 19-02-04 조회 9,889