HTML - Table, Select

 

 

 

5. 사용자가 실제 데이터를 입력하는 곳을 나타내는 태그 - select

 

태그의 모습	태그의 유형	사용 목적
<select></select>	선택 폼 생성	1. 어떤 내용을 선택하는 부분을 생성하는 태그 속성  - Name : select 박스의 이름
<option></option>	선택 폼의 옵션	1. 실제 선택할 내용을 생성하는 태그 속성 ● Value : 실제적으로 전달되는 값 ● Selected : 최초로 선택되는 값으로 설정 ● Disabled : 보이지만 선택할 수 없는 옵션으로 만듬
<optgroup><optiongroup>	option을 묶는 태그	1. option을 그룹화하는 태그 속성 ★ Label : 그룹화하는 옵션의 그룹명을 결정

 

6. 테이블을 생성하는 테그 - table

태그의 모습	사용목적	속성
<table></table>	테이블을 생성	• border : 테두리 두께 • cellspacing : 테두리 간격 사이의 너비 • cellpadding : 셀 내부의 간격 • align : 테이블 정렬 속성 • width 와 height : 테이블의 너비와 높이 •bgcolor 와 bordercolor : 테이블 배경색과, 테두리 색
<tr></tr>	테이블의 행을 결정
<th></th>	테이블의 열(제목)	• colspan : 해당 칸이 점유하는 열의 수 지정 • rowspan : 해당 칸이 점유하는 행의 수 지정
<td></td>	테이블의 열(본문)

 

7. Semantic tag

 

태그의 모습	사용목적
<header></header>	해더(로고, 메뉴, 아이템 등)
<footer></footer>	하단 영역
<nav></nav>	네이게이션(다른 곳으로 이동 가능한 링크의 모음
<main></main>	콘텐츠 영역임을 표시, 한 html 당 한번만 사용하는 것이 바람직
<aside></aside>	콘텐츠와 직접적인 연고나이 없는 옆에 있는 부분을 나타냄.
<article></article>	하나의 의미 있는 요소(기사 리스트 중에서 기사 하나)
<selection></selection>	article을 그룹화하기 위한 목적으로 사용

 

 

※ 이미지 출저 : KDT 국비교육 PPT에서 발췌하였습니다.