[html] 테이블 정렬, 칸 합치기, HTML Form control

테이블 정렬 (수평정렬)

 

( 테이블 자체의 정렬)

<table align="left"

                    center

                    right

 

*  데이터 정렬

(tr, th, td)에 대해서 수행

 

- 수평정렬과 수직정렬을 할 수 있다. 

 

- tr에 속성을 사용하면 tr내의 모든 th, td에 적용된다.

 

수평정렬 align="left"

                         center

                         right

 

수직정렬 valign="top"

                         middle

                         bottom

 

 

* 칸 합치기

 

* colspan="합칠칸의 수 "     (가로행)

 

- 시작하는 td에서 colspan주고 뒤에 td를 삭제

 

* 행 합차기 roospan=" 합칠행의수 "

 

* rowspan (세로행)

 

- 시작하는 td에서 rowspan을 주고 아래의 td삭제

 

 

<table>

<tr>                                                                                          </tr>

<td></td><td></td><td></td><td></td><td></td>

<td></td>

                         colspan="2" (가로행)                              rowspan="2"(세로행)

<tr></tr>

<tr></tr>

 

</table>

 

* embed

 

- 동영상, 음악 파일 재생

 

- 모든 브라우저에서 동작하지 않는다.

 

<embed  src="재생할 파일명"/>

 

-  HTML 5에서는 

 

<audio>, <Vedio>로 나누어서 사용된다.

 

<audio src="재생할음악 파일명" controls="controls">

 

     <source     src="재생할음악파일명"/>

                              ----------------------

                              ----------------------     /위의 source의 파일 코덱이 재생이 안된다면 

                              ----------------------         하게 정의한 파일을 사용하여 재생. 

 

</audio>

-----------------------------------------------------------------

<vedio>     src="재생할 동영상파일명"     constrols="constrols"

 

     <source     src="        "/>

          .

          .

          .

     </vedio>

 

 

* HTML Form control

 

사용자에게 입력값을 받을수 있는 객체들

 

- 사용자에게 입력값을 받을 수 있도록 만들어진 객체들.

 

- <input>, <select>, <textarea> 가 존재한다.

 

- <form> 태그 안에 존재하면 back-end로 값을 넘길 수 있다.

                                           서버쪽으로 값 전달

 

 

서버   back-end           -------------------------------------

(Tomcat)

                               요청          응답

클라이언트      -------------------------------------

(web browser) 

 

 

front-end

 

 

 

* <input>

 

       ID               <input type="text" name="control명" size="보여줄 글자수" maxlength="입력제한글자수"

                         readonly="readonly"/>

                              (읽기전용)

                         

       *****            <input type="password"                     ""                  value="control이 보여질때 기본으로 제공될 값"..

 (Echo character)                

 

○ 남 ○여               <         radio       name="그룹이름"     value="서버쪽으로 보내질 값"          checked="checked" />     

                                                                                                                        선택이 되어서 보여질때

 

[ ]사진 [ ]운동      <         checkbox          

[ ]공부 [ ]술     

 

hidden               <input type="hidden"      name="이름      value="서버쪽으로 보낼 값"> : 사용자에게 보여지지 않고 값을 넘길때.

 

   파일선택         <input type="file"            name="이름" />          

    

  이미지그림        <input type="image"        src="이미지경로"      width="넓이"    height="높이"/> : 클릭시 전송의 기능이 있다.

 

     버튼             <input type="button"     value="버튼라벨"     />      : 버튼 모양   

    

     전송             <input type="submit"     value="버튼라벨"    />      : 전송 기능   

                                                                                                              <form 태그안에 존재해야 일을 한다.>

     취소             <input type="reset"     value="버튼라벨"       />      : 취소의 기능    

 

 

AABC

 

                 <select name="이름"     size="보여줄옵션의 갯수">

                              <option value="서버쪽으로 넘길 값" selected="selected">     보여질 값     </option>

                                                                                  선택된 상태

                         

                 </select>

                    

                    <textarea name="이름"   cols="한줄에 쓸 글자수"     rows="보여줄 수"></textarea>

                                                            입력제한                    입력제한X