테이블 여백설정
cellpadding cellspacing = table tage에 사용
cellpadding ="수치" td나 th내의 여백을 설정할 때 사용, td나 th의 크기가 변경도니다
cellspacing ="수치" td나 th사이의 여백, td나 th크기에 반영되지 않는다.
<thead>, <tbody> , <tfoot>
사용자에게 보이는 태그는 아니고 의미와 기능은 제공되는 태그.
<thead>: 테이블내에서 제목을 표현하기위한 의미적인 태그..(항상 제일 위에서 보여진다)
<tbody>: 테이블 내에서 내용을 표현하기위한 의미적인 태그(항상 가운데에서 보여진다)
<tfoot>: 테이블 내에서 결과를 표현하기 위한 의미적인 태그(항상 제일 아래에서 보여진다)
영역태그(주로 디자인 할때 사용함)
span,div
<span> : 데이터 까지만 영역으로 설정: 사용했을때 줄이 변경되지 않는다...
한 줄에서 데이터(JSP, JavaScript) 를 구분하는 용도로 사용한다.
<div>: web broswer에 넓이 100%가 영역이 된다. 사용시 줄이 변경된다
web page의 전체 디자인(구조만 HTML로 설정 CSS에서 크기,위치를 변경)을 설정할 때 사용.
HTML Form Control
사용자가 입력하는 값을 받기위한 HTML에서 제공하는 객체들
<input> , <select> , <textarea> 3가지 객체가 제공됨
<form> 태그의 자식태그로 포함되어있을 때에 접속자가 입력한 정보가 서버로 전송될 수 있다.
<input>
type 속성에 따라 제공되는 객체가 다르다
공통속성 : name="이름", id=" 아이디 " readonly="readonly" , disablee="disable", value="값",
type="사용객체" , class="클레스명"
<input type="text" name="이름" id="아이디" class="클래스명"
이 세가지 속성은 JS나 CSS에서 HTML Form Control에 접속하기 위한 속성이다.
size="넓이" , maxlength="최대입력글자수" readonly="readonly" , disablee="disable"
value="보여줄 글자" placeholder="보여질 글자/>
value: 값이 입력되더라도 value 값은 유지됨, back-end로 전송된다.
placeholder: 값이 입력되면 사라진다. back-end로 전송되지 않는다.
readonly:편집불가, back-end로 값은 전송됨
disable: 편집불가, back-end로 값 전송 X
<input type="password">
password는 한글이 입력되지 않는다. (IME-MODE)
<input type="checkbox" name, id ,class, readonly, disabled, values="서버로 전송할 값, checked="checked">
value를 정의하지 않고 "확인" 한 상태에서 전송하면 back-end로 "on"이 전송된다.
<input type="hidden" name="이름" value="서버로 전송될 값" />
눈에 보이지 않게 값을 back-end로 전송할 때.
<input type="file" name="이름" id="아이디" class="클레스명" />
value 속성을 사용하여 값을 변경할 수 없다.
<input type="button" name="이름" id="아이디" class="클래스명" value="버튼라벨" />
버튼이 눌렸다면 JS에서 유효성 검증을 수행 한 후 back-end 로 전송하는 일.
기본 라벨은 없음
<input type="submit" name="이름" id="아이디" class="클래스명" value="버튼라벨" />
<form> 태그의 하위 태그로만 등록 되었을 때 일을 한다.
기본라벨이 존재함, web browser마다 사용되는 기본 라벨이 있다.
서버로 전송하는 일을 한다.
<input type="reset" name="이름" id="아이디" class="클래스명" value="버튼라벨" />
<form>태그의 하위 태그로만 등록 되었을 때 일을 한다.
HTML Form Control들의 값을 초기화- 처음 로딩상태로 되돌리는 일을 한다.
기본라벨이 존재함, web browser마다 사용되는 기본 라벨이 있다.
버튼들의 value는 브라우저마다 다른 라벨을 제공하는데 동일한 라벨로 서비스를 하기 위해 사용한다.
<form>
Back-end로 값을 전송하기위해서 사용하는 태그.
사용법)
<form action="값을 받을 back-end 페이지 URL" name="이름" id="아이디"
methpd="값을 전송하기위한 방식" enctype="페이지 전송 방식">
method는 web parameter을 어떻게 전송할 것인지 설정.
enctype는 페이지를 어떤 방식으로 전송할 것인지 설정함. web parameter방식(기본방식) or file전송방식
enctype="application/x-www-form-urlencorded" ->이게 기본 방식임.
enctype="multipart/form-data"
<fieldset>
<form>태그가 가진 HTML Form Control의 영역을 식별하기 위해 사용하는 테두리 선.
<legend> - > fieldset의 제목설정가능
titled border
둘이 함께 사용함, CSS에서 숨김처리하여 의미적인 용도로 사용함
<lable> 라벨을 설정하는 태그.
<select name="이름" id="아이디" , class="클래스명" size="한번에 열어서 보여줄 옵션의 개수" />
<option value="전송할 값> 보여줄 값 </option>
<textarea name="이름" id="아이디" class="클래스명" rows="보여줄 줄 수" cols="한줄에 쓸 글자수"> 보여줄 문자열
</textarea>
HTML5에서 추가된 Form Control들
-모든 브라우저에서 지원하지 않을 수 있다.
<details> :메시지를 제공하고 사용자가 메시지를 클릭하면,숨겨놓은 제공할 내용을 열어서 보여주는 태그
<details>
<summary>사용자에게 보여줄 메시지</summary>
<span>사용자에게 보여줄 내용....
</details>
<datalist> : 사용자가 클릭했을 때 준비된 여러 옵션을 보여주고 옵션을 클릭하면 옵션의 값이
<input type="text" > 에 설정되는 객체=> select와 유사하지만 입력된값을 동적으로 보여줌.
사용법)
datalist를 사용할 input 객체를 생성한다.
<input type= "text" list="아이디">
데이터를 제공할 <datalist>정의
<datalist id="아이디">
<option value="보여질 값"/>
둘이 아이디를 동일하게 설정해서 동적으로 값이 전달되게 할 수 있다.
input type에 추가된 속성
input 태그에 많은 control들이 추가됨(지원하지 않으면 그냥 나열돼서 보인다)
날짜 선택 ( 년-월-일)
<input type="date" name="이름" id="아이디" class="클래스명" value="날짜형식으로 된 다른날짜" />
년-월 만 선택
<input type="month" name="이름" id="아이디" class="클래스명" value="날짜형식으로 된 다른날짜" />
년-월-일-시간 선택
<input type="datetime-local" name="이름" id="아이디" class="클래스명" value="날짜형식으로 된 다른날짜" />
시간 선택
type=time
색
<input type="color" name="이름" id="아이디" class="클래스명" class value="설정할 색"/>
전화번호 입력
<input type="tel" name="이름" id="아이디" class="클래스명" value=""/>
이메일
<input type="email" name="이름" id="아이디" class="클래스명" value=" " />
전화번호,이메일은 input type text로 보여지고 의미적인 용도로 사용된다.
범위설정 : range
<input type="range" name="이름" id="아이디" class="클래스명" min="최저값 max="최대값" value=" 현재값" />
값을 시각적으로 보여줄 때 meta를 사용함
<meter name="이름" id="아이디" class="클래스명" min="최저값 max="최대값" value=" 현재값" />
media 재생 태그
동영상이나 음악을 재생할 때 사용하는 태그.
동영상:codec이 있는 파일만 재생 가능.(브라우저는 모든 동영상을 재생할 수 없다.)
음악:브라우저는 음악을 재생할 수 있다.
HTML4.01까지는 <embed> 태그로 동영상과 음악을 모두 재생하였으나 HTML5부터는
동영상 <video> , 음악<audio> 로 구분하여 재생한다
<embed>
사용법
<embed src="미디어파일의 경로" width="넓이" height="높이" controller="ture"
사용법
<audio src="음악파일의 경로" controls="controls" //컨트롤바 제공여부 />
지원하지 않는 브라우저에서는 '당신의 브라우저는 이 태그를 지원하지 않습니다'. 메세지가 뜸
</audio>
audio태그는 지원하나 mp3를 지원하지않는 브라우저로 접속을 하면
<audio controls="controls">
source src="음악파일의 경로"/ 첫 source에 있는 mp3
source src="음악파일의 경로"/ 처음 source에 있는 mp3를 지원하지않는 브라우저를 위해 제공한 source
</audio>
video
동영상을 재생하기 위한 태그
<video src="경로" controls="controls" width height 설정 poster="썸네일 설정"/>
당신의 브라우저는 이태그를 지원하지 않습니다
</video>
video태그는 지원하나 codec을 지원하지 않는 브라우저로 접속할 때 source로 대체 경로를 작성한다
HTML의 특수문자
기능을 가진 문자
모든 Markup Language는 동일한 특수문자를 사용(HTML,XML은 같은 특수문자를 사용)
문법)
&-시작문자 , ;-끝문자
&문자열;
HTML은 <태그명 속성="값" ,,,, <뒤에는 공백없이 바로 태그명이 기술되어야한다.
>앞에는 공백을 허용한다
HTML에서 앞에 숫자를 표현할때? #을붙여야함
흘러가는 글자
<marquee scrollamount="글자속도" direction="진행방향"> 글자</amrquee>