HTML 정리 03

25 Jan 2019

Reading time ~4 minutes

HTML 정리 03 - table 태그, 특수문자, 영역 태그, HTML Form Control

table 태그

표 : 데이터를 보여줄 때 사용
- 테이블 속성들은 거의 안쓰고 CSS에서 처리한다.
구성

<table> <tr> <th> <td> <thead> <tbody> <tfoot>

테이블 시작(table 태그)
- align값은 left, center, right을 줄 수 있다.

<table 
    border="테두리선 유무(1)" width="넓이" height="높이" 
    align="정렬" bordercolor="선색" bordercolordark="진한선색변경"
    bordercolorlight="밝은선색변경" bgcolor="바닥색변경"
    background="이미지" cellspacing="td사이여백공간" 
    cellpadding="td내 여백"
>
</table>

행 만들기(tr태그)

<tr bgcolor="행의바닥색" background="이미지" height="행높이"
    align="tr 하위에 있는 td들의 수평정렬(left, center, right)" 
    valign="tr 하위에 있는 td들의 수직정렬(top,middle,bottom)"
></tr>

테이블 컬럼명 만들기(th 태그)
- 진하게 가운데정렬이 자동으로 적용됨

<th width="" border="" height="" align="" valign=""
    colspan="합칠 칸의 수" rowspan="합칠 행의 수"
></th>

테이블 칸(컬럼) 만들기(td 태그)
- 들어가는 문자열은 기본으로 일반글자, 왼쪽정렬

<td width="" height="" align="" colspan="" rowspan="" 
    background="" bgcolor="" 
></td>

thread 태그
- 테이블 구성 중 header부분을 알려줌(semantic)
- 눈에 보여지지 않고 코드상 데이터를 구분하는 용도로 사용
- 소스의 작성 위치에 상관없이 가장 위로 가서 보여짐

<thead>
    <tr>
        <th>...</th>
    </tr>
</thead>

tbody 태그
- 테이블의 구성 중 body부분을 명시

<tbody>
    <tr>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
    </tr>
</tbody>

tfooter 태그
- 테이블의 구성 중 footer부분을 명시
  - 어떤 통합된 결과를 보여줄 때 사용
- 눈에 보여지지 않고 코드상 데이터를 구분하는 용도로 사용
- 소스의 작성 위치에 상관없이 가장 아래로 가서 보여짐

<tfoot>
    <tr>
        <td>...</td>
    </tr>
</tfoot>

<table border="1">
     <thead>
           <tr>
                <th>열1</th><th>열2</th>
           </tr>
     </thead>
     <tbody>
           <tr>
                <td>0.0</td><td>0.1</td>
           </tr>
           <tr>
                <td>1.0</td><td>1.1</td>
           </tr>
     </tbody>
</table>

eclipse의 outline기능을 잘 사용하면 구조파악이 쉽다.

table의 cellspacing, cellpadding 속성

테이블의 width, height 속성값 변경은 table태그보단 td태그안에서 한다.
- td에 width를 주면 해당 컬럼은 모두 적용됨
- td에 height를 주면 해당 행은 모두 적용됨
- tr태그에 height를 주면 자식 태그들(td)에게 모두 적용된다.
  - 이를 속성의 상속이라고 한다.

<table border="1" bgcolor="#E06C75">
           <tr height="80" bgcolor="#72C379">
                <td width="300">서울시 관악구 구암중학교</td>
                <td width="200">역삼중학교</td>
           </tr>
           <tr height="60">
                <td bgcolor="#61AFD0">청학 공고</td>
                <td>평촌 공고</td>
           </tr>
</table>

복잡한 모양의 테이블

칸 합치기 : colspan=”합칠칸의 수”

<table border="1">
     <tr>
           <td>열1</td><td>열2</td>
     </tr>
     <tr>
           <td colspan="2">안녕</td>
     </tr>
</table>

행 합치기 : rowspan=”합칠행의 수”

<table border="1">
     <tr>
           <td rowspan="2">안뇽</td>
           <td>행1</td>
     </tr>
     <tr>
           <td>행2</td>
     </tr>
</table>

셀 합치기 예제(1)

<table border="1">
   <tr height="100">
      <td colspan="2"  width="200"></td>
      <td width="100"></td>
   </tr>
   <tr height="100">
      <td width="100"></td>
      <td width="200"  colspan="2"></td>
   </tr>
   <tr height="100">
      <td width="300"  colspan="3"></td>
   </tr>
</table>

셀 합치기 예제(2)

<table border="1">
   <tr height="100">
      <td width="100"  rowspan="2"></td>
      <td width="100"></td>
      <td width="100"  rowspan="3"></td>
   </tr>
   <tr height="100">
      <td width="100"  rowspan="2"></td>
   </tr>
   <tr height="100">
      <td width="100"></td>
   </tr>
</table>

셀 합치기 예제(3)

<table border="1">
     <tr height="100">
          <td colspan="2" width="200"  bgcolor="#DD5246"></td><td rowspan="3" width="100"  bgcolor="#FFCE44"></td>
     </tr>
     <tr height="100">
          <td rowspan="2" width="100"  bgcolor="#1BA160"></td><td width="100"  bgcolor="#4C8BF4"></td>
     </tr>
     <tr height="100">
          <td rowspan="2" width="200"  bgcolor="#CBCDE1"></td>
     </tr>
</table>

ML Escape Character

= Markup Language 특수 문자
특별한 기능을 가진 문자열

&문자열;

공백

&nbsp;

less than(lt), greater than(gt)
- less than = <
- greater than = >

&lt; &gt;

ampersand &

&amp;

카피라이트 ©

&copy;

큰 따옴표(“)

&quot;

공백쓰&nbsp;공백쓰<br>
엘티&lt;엘티<br>
지티&gt;지티<br>
앰퍼샌더&amp;앰퍼샌더<br>
카피라이트&copy;카피라이트<br>
큰따옴표&quot;큰따옴표

영역 태그

div 태그와 span 태그
div 태그
- 브라우저의 전체 영역을 나눌 때 사용
  - web page 전체 디자인 틀을 잡을 때 사용
- 기본 넓이가 브랑줘의 100%
span 태그
- 데이터 영역을 나눌 때 사용
  - 특정 영역을 지정하고 값을 변경할 때 사용
- 기본 넓이는 데이터의 넓이

<!-- 기본 넓이가 100%라 줄이 바뀜 -->
<div>a</div>
<div>b</div>
<div>c</div>

<!-- 기본 넓이는 데이터의 넓이라 옆에 붙음 -->
<span>a</span>
<span>b</span>
<span>c</span>

<div style="border:1px solid #3F3F3F">김정윤</div>
<div>김정운</div>
<div>이재현</div>
<hr>
<span style="border:1px solid #3F3F3F">김정윤</span>
<span>김정운</span>
<span>이재현</span>

WEB1.0과 WEB2.0

WEB 1.0
- 집단 지성이 없음
- 전문가 그룹이 존재
  - 신뢰성은 높음
  - 응답이 느리다.
  - 모든 상황에 대해 응답할 수 없다.
WEB 2.0
- 집단 지성이 있음
- 사용자 그룹
  - 신뢰성은 다소 떨어짐
  - 응답이 빠르다.
  - 모든 상황에 대해 응답할 수 있다.

HTML Form Control

일방향적으로 서버에서 데이터를 받지않고(WEB1.0) 사용자가 서버로 데이터를 HTML 객체로 전송할 수 있다.(WEB2.0)
HTML에서 제공하는 Object(객체)
- 사용자가 입력하는 값을 받을 수 있는 객체들
- 웹서버로 GET나 POST방식으로 전달할 때 사용된다.
- HTML5에서 input 속성이 다양하게 추가되었음
  - 그러나 ie에서는 많이 지원을 안함

<input> <select> <textarea>

input 태그

form태그 안에 자식태그로 존재
공통속성
- readonly
  - 읽기전용
  - 값을 수정하지 못하나 서버로 전송할 수 있다.
- disabled
  - 비활성화
  - 값을 수정하지 못하고서버로 전송할 수 없다.

<input type="" name="객체이름" readonly="readonly" disabled="disabled"/>

text type

<input type="text" size="보여지는크기" maxlength="최대입력글자수"
    placeholder="보여질메시지" value="초기값또는서버에전송할값"/>

password type
- type외 나머지 속성은 text type의 속성과 동일

<input type="password"/>

radio type
- “보여질값”과 서버에 전송할값(value)는 전혀 관련이 없다.

<input type="radio" name="객체이름" value="서버전송할값" checked="checked"/>보여질값

checkbox type
- 한번에 여러개의 선택이 가능
- 이름이 같았을 때 자동으로 그룹이 생성된다.

<input type="checkbox" name="그룹이름" value="서버전송할값"checked="checked"/>보여질값

hidden type
- 눈에 보이지 않는 객체

<input type="hidden" name="이름" value="전송할값"/>

image type
- img태그와 차이점은 input image type은 form태그 안에 있으면 전송의 기능(submit)을 한다.

<input type="image" src="이미지의경로" name="이미지명"/>

file type
- 파일을 전송할 때 사용
- JS에서 file type을 건드리지 못함
  - 서버가 클라이언트 저장소내부를 건들지 못하도록 막은 것

<input type="file" name="이름"/>

submit type

<input type="submit" value="버튼라벨"/>

reset type
- 초기화기능

<input type="reset" value="버튼라벨"/> 

button type

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

select 태그

ComboBox가 select
size가 옵션의 수보다 크게 입력되면 리스트로 출력됨(열린채로)

<select size="보여줄옵션의수" name="이름">
    <option value="서버로전송할값" selected="selected">사용자에게 보여줄 값</option>
    ...
</select>

textarea 태그

<textarea name="이름" cols="컬럼의수" rows="행의수"/>보여질 값</textarea>

숙제

숙제1 풀이

숙제2 풀이

HTML