Web Developer

HTML, CSS, JAVA, JavaScript, JSP...

table 2

html 테이블 구조 연습

xhtml에서는 table태그 사용이 금지되었다가 html5로 넘어오면서 table태그를 다시 사용하기 시작했다고 합니다. table로는 웹 구조를 잘 짜지 않습니다. html5에서는 시멘틱 태그들을 이용해 구조 잡는게 중요하다고 합니다. 저는 지난시간에 공부했던 table태그에 대해 좀 더 연습해 보기 위해 table태그를 이용해 홈페이지 layout을 구성 해 보았습니다. 공부를 도와주고 계신 강사님께서 제공 해 주신 예시 홈페이지 입니다. 먼저 어떻게 구조를 짤 지 고민 해 보았습니다. 큰 테이블을 하나 생성 한 후 테이블 내부에 필요한 테이블들을 추가로 생성하고 colspan과 rowspan태그를 활용해 만들어보면 되겠다 생각했습니다. table태그만 사용하면 화면에 시각적으로 보여지지 않습니다...

html 테이블 태그 - table

테이블태그 이전까지는 div로 공간을 나눠서 사용했다면, html5 에서는 테이블을 사용해 공간을 나눠 사용합니다. 테이블은 레이아웃을 구성할 때 중요한 틀이 됩니다. 네이버 홈페이지를 보면 검색창, 뉴스, 로그인, 오늘 읽을만한 글, 트렌드쇼핑 등 여러 공간으로 나뉘어 있습니다. 테이블 태그는 이처럼 각종 콘텐츠들을 원하는 위치에 배치하기 위해서 큰 하나의 화면을 구역별로 나누고, 원하는 구역에 콘텐츠를 배치하는 방식으로 웹 설계를 할 때 사용합니다. 이해가 쉽도록 빨간 선으로 가상의 테이블 구조로 나눠 보았습니다. 테이블을 생성하고, 행과 열의 병합을 거쳐 각 구역에 콘텐츠를 배치합니다. 테이블 생성 width와 height속성으로 테이블의 크기를 지정 해 줄 수 있습니다. 단위를 생략하면 px로 지..