- table 관련 태그
- <table> : 테이블 생성시 최 상단 태그
- <thead> : 테이블 최 상단 영역
- <tbody> : 테이블 중단 영역
- <tfoot> : 테이블의 하단 영역
- <tr> : 테이블의 행(table row)
- <th> : 테이블의 컬럼명 표시
- <td> : 테이블 셀의 데이터 표시(table data)- table 병합 관련 속성
- colspan : 열의 영역을 병합시
- rowspan : 행의 영역을 병합시
- colspan, rowspan는 th, td 속성에서만 사용가능
- CSS border 속성
- border-collapse : 테이블 셀의 경계를 어떻게 나타낼지를 지정
- seperate : 셀 경계를 분리함(기본값)
- collpase : 셀 경계를 합함
- border-collapse : 테이블 셀의 경계를 어떻게 나타낼지를 지정
- 연습문제
- CSS style는 html head 태그에 작성
- CSS에서 속성 여러개 구현 해야될시 여러개 나열할 수 있음
- ex) .tb th, .tb td {
border: 2px solid black;
}<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>05_표연습문제</title> <style> .tb th{ background-color: orangered; } .tb thead th { background-color: aqua; } .tb td { background-color: orange; } .tb tfoot td { background-color: yellow; } </style> </head> <body> <table border="1" class="tb"> <thead> <tr> <th colspan="5">하수정 컬렉션</th> </tr> </thead> <tbody> <tr> <th rowspan="5">제품리스트</th> <th>코드</th> <th>분류</th> <th>가격</th> <th>구매가능개수</th> </tr> <tr> <td>01-468</td> <td>봄</td> <td>200,000원</td> <td>1068</td> </tr> <tr> <td>01-223</td> <td>여름</td> <td>200,000원</td> <td>976</td> </tr> <tr> <td>01-626</td> <td>가을</td> <td>200,000원</td> <td>1205</td> </tr> <tr> <td>01-245</td> <td>겨울</td> <td>200,000원</td> <td>537</td> </tr> </tbody> <tfoot> <tr> <th colspan="3">총합</th> <td>800,000원</td> <td>3768</td> </tr> </tfoot> </table>
</body>-
영역관련 태그
- block : 한줄 모두를 차지(크기지정 가능)
- inline : 작성된 내용의 일정한 칸을 차지(크기지정 안됨)
- div : block형식의 태그
- span : inline형식의 태그
- iframe : 웹 문서 내부에 다른 웹문서를 추가하는 태그(inline 형식)
src : 추가 할 웹문서 경로 및 사이트
width : 웹 문서 가로 사이즈
height : 웹 문서 세로 사이즈 -
이미지관련 태그
- img : 이미지를 웹 문서에 나타냄
src : 이미지 경로 및 파일명(상대경로, 절대경로)
width : 이미지 가로 사이즈
height : 이미지 세로 사이즈
px : 고정 크기 단위
% : 가변크기 단위 -
하이퍼링크 태그
- a : 다른 웹 문서와 연결 및 페이지 이동
href : 경로 및 파일명
target : 연결된 문서 어디에서 열 것이지 지정
기본값 : 같은탭에서 이동
blank : 새탭
* 속성으로 id값을 줘서 이동할 수 있음
-
입력관련태그
가. 텍스트 관련 태그
- type = text
한 줄 짜리 문자열(텍스트)을 입력할 수 있는 입력 상자
input태그의 기본값으로 생략가능
inline 형식
size : 입력 상자 크기
maxlength : 입력받는 텍스트의 최대길이
placeholder : 입력상자에 작성될 내용을 설명
- type = password
비밀번호 입력 상자(텍스트를 안보여줌)
- 그 외 기타 : url, tel, email
나. 숫자 관련 태그
- type = number
min : 최소값
max : 최대값
step : 증가/감소 단계를 지정
브라우저에 따라서 스핀박스 표시됨
- type = range
슬라이드 바를 이용해서 숫자 지정(단독 사용 X, JS와 함께 사용)
다. 날짜/시간 관련된 input 태그
- type = date
- type = month
- type = week
- type = time
- type = datetime-local
라. radio와 checkbox
- type = radio
- type = checkbox
* name속성 : radio, checkbox 뿐만 아니라 input 태그들 중 관련된 것들은 묶어서 부를 때 사용(== 그룹 이름)
ex)
팀 선택 <br>
<label for="a-team">A팀</label>
<input name="team" type="radio" id="a-team">
<label for="b-team">B팀</label>
<input name="team" type="radio" id="b-team">
<label for="c-team">C팀</label>
<input name="team" type="radio" id="c-team">
<h4>type="checkbox"</h4>
<h5>취미선택</h5>
<input type="checkbox" name="hobby" id="baseball">
<label for="baseball">야구</label>
<input type="checkbox" name="hobby" id="soccer">
<label for="soccer">축구</label>
<input type="checkbox" name="hobby" id="game">
<label for="game">게임</label>
<!-- label 두번째 방법! -->
<label>
<input type="checkbox"> 뜨개질
</label>마. 기타 input 태그
- type="color"
- type="file"
- type="hidden"
