Salangdung_i의 기록

테이블 태그 본문

WEB FRONT END

테이블 태그

Salangdung_i 2019. 9. 21. 14:12
728x90
테이블 태그
- 웹 문서에서 자료를 정리할 떄 자주 사용 
- 행과 열로 이루어져 있고, 행과 열이 만나는 지점을 셀이라고 함

<table>태그
속성	종류		내용
border	"#"임의의 숫자	표 테두리 선 투께(권장 되지 않음)
summary	설명이 담긴 텍스트 	해당 테이블에 대한 요약

<tr>태그,<td>태그
속성	종류		내용
width	"###px","##%"	너비(폭) 길이 조절 
height			높이 길이 조절
rowspan	"#"임의의 숫자 	행 확장(병합)
colspan			열 확장(병합)

※ rowspan : 속성으로 지정한 행 만큼 행을 병합
※ colspan : 속성으로 지정한 열 만큼 열을 병합


<caption> : 표에 대한 간단한 제목을 기재
<tr> : 행 하나 추가 
<th> : 테이블의 제목에 해당하는 셀(열) 추가
<td> : 셀(열) 하나 추가
<col> : 여러 줄에 걸쳐 있는 열을 지정
<colgroup> : 여러 개의 col요소를 하나의 그룹으로 편성 

<col>태그
속성	종류			내용
style	"background:[COLOR]"	배경색 지정

<colgroup>태그 
속성	종류			내용
span	"#"임의의 숫자		통합할 열의 갯수
style 	"background":[COLOR]"	배경색 지정

구조태그 

■ 테이블의 구조를 나누는 태그 
<thead></thead> : 테이블의 구조를 나누는 태그, 여러 열을 묶어 표의
헤더로 지정, 테이블에 한개만 존재가능 
<tbody></tbody> : 테이블의 구조를 나누는 태그, 여러 행과 열을 묶어 
표의 본문으로 지정, 몸체로 테이블에 여러개 존재 가능
<tfoot></tfoot> : 테일의 구조를 나누는 태그, <thead>태그 뒤에 
있어야 하며, 여러 열의 묶어 표의 푸터로 지정. 한개만 존재 가능 
페이지 영역 분할 태그 
<iframe></iframe>
- 웹 문서 안에 다른 웹페이지를 추가하는 태그 속성 
 width/ height : 페이지 크기 설정 
 name : 인라인 프레임의 이름
 src : 페이지 경로 
 ※ 현재 iframe 사용을 권장하지 않음 
 - youtube 동영상을 가져올 때 사용 
 
<div></div> 
 - block 형식의 공간을 분할(수직으로 공간분할)
 - 공간단위

 <span></span>
 - inline 형식의 공간을 분할(수평으로 공간 분할)
 - text 단위
html5 페이지 구조 
- 시멘틱 태그 : 페이지 구조를 특정 기능에 맞는 태그를 사용하여 구분 
- div 에 id를 부여하여 개별 관리하는 것보다는 태그명이 직관적이고, 
표준화 시킬수 있다는 장점이 있다. 

<header></header> 
- 특정 부분의 머릿말로 주로 검색어 , 메뉴 등 

<nav></nav> 
- 다른 사이트나 페이지로 이동하는 태그를 모아놓은 태그
- 특정 태그에 종속되지 않고 어느곳에서나 사용이 가능

<section></section> 
- 웹 문서의 컨텐츠가 들어가는 영역, 컨텐츠를 주제별로 묶을때 사용
- <section>태그 내부에 <section>태그를 넣을 수도 있음 

<article></article>
- 웹 페이지 내용이 들어가는 영역 
- 검색로봇은 이 태그가 사용된 컨텐츠는 배포할 수 있는 컨텐츠로 인식 

<aside></aside> 
- 사이드 바
- 본문 이외의 기타 내용을 담고 있는 영역
- 광고 등에 주로 사용

<footer></footer> 
- 웹페이지 맨 아래 위치하며, 회사 소개, 저작권, 연락처 등의 정보를 
표시 할때 사용 
- <footer>에는 <header>,<section>,<article>등 다른 레이아웃 사용가능
728x90