---
title: "HTML 정리 03"
date: "2019-01-25"
tags: ["HTML"]
status: archived
verified: false
---

---


## table 태그

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

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

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

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

* **행 만들기(tr태그)**

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


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

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

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

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

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

```html
<thead>
    <tr>
        <th>...</th>
    </tr>
</thead>
```

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

```html
<tbody>
    <tr>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
    </tr>
</tbody>
```


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

```html
<tfoot>
    <tr>
        <td>...</td>
    </tr>
</tfoot>
```

![01](/md/legacy-assets/Web/HTML/03/01.webp)

```html
<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>
```

![02](/md/legacy-assets/Web/HTML/03/02.webp)

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

![03](/md/legacy-assets/Web/HTML/03/03.webp)

* **table의 cellspacing, cellpadding 속성**

![04](/md/legacy-assets/Web/HTML/03/04.webp)


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

```html
<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>
```

![05](/md/legacy-assets/Web/HTML/03/05.webp)

![06](/md/legacy-assets/Web/HTML/03/06.webp)

## 복잡한 모양의 테이블

* **칸 합치기 : colspan="합칠칸의 수"**

![07](/md/legacy-assets/Web/HTML/03/07.webp)

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

![08](/md/legacy-assets/Web/HTML/03/08.webp)

* **행 합치기 : rowspan="합칠행의 수"**

![09](/md/legacy-assets/Web/HTML/03/09.webp)

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

![10](/md/legacy-assets/Web/HTML/03/10.webp)

* 셀 합치기 예제(1)

![11](/md/legacy-assets/Web/HTML/03/11.webp)

```html
<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>
```

![12](/md/legacy-assets/Web/HTML/03/12.webp)

* 셀 합치기 예제(2)

![13](/md/legacy-assets/Web/HTML/03/13.webp)

```html
<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>
```

![14](/md/legacy-assets/Web/HTML/03/14.webp)

* 셀 합치기 예제(3)

![15](/md/legacy-assets/Web/HTML/03/15.webp)

```html
<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>
```

![16](/md/legacy-assets/Web/HTML/03/16.webp)


## ML Escape Character

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

```
&문자열;
```

* **공백**

```html
&nbsp;
```

* **less than(lt), greater than(gt)**
  * less than = &lt;
  * greater than = &gt;

```html
&lt; &gt;
```

* **ampersand &amp;**

```html
&amp;
```

* **카피라이트 &copy;**

```html
&copy;
```

* **큰 따옴표(")**

```html
&quot;
```

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

![17](/md/legacy-assets/Web/HTML/03/17.webp)

## 영역 태그

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

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

![18](/md/legacy-assets/Web/HTML/03/18.webp)

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

![19](/md/legacy-assets/Web/HTML/03/19.webp)

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

![20](/md/legacy-assets/Web/HTML/03/20.webp)

## 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에서는 많이 지원을 안함

```html
<input> <select> <textarea>
```

## input 태그

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

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

* **text type**

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

![21](/md/legacy-assets/Web/HTML/03/21.webp)

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

```html
<input type="password"/>
```

![22](/md/legacy-assets/Web/HTML/03/22.webp)

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

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

![23](/md/legacy-assets/Web/HTML/03/23.webp)

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

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

![24](/md/legacy-assets/Web/HTML/03/24.webp)

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

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


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

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

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

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

![25](/md/legacy-assets/Web/HTML/03/25.webp)

* **submit type**

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

![26](/md/legacy-assets/Web/HTML/03/26.webp)

* **reset type**
     * 초기화기능

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

![27](/md/legacy-assets/Web/HTML/03/27.webp)

* **button type**

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

![28](/md/legacy-assets/Web/HTML/03/28.webp)


## select 태그

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

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

![29](/md/legacy-assets/Web/HTML/03/29.webp)

## textarea 태그

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

![30](/md/legacy-assets/Web/HTML/03/30.webp)

## 숙제

* [숙제1 풀이](https://github.com/younggeun0/SSangYoung/blob/master/dev/workspace/html_prj/WebContent/day0125/work1.html)

![31](/md/legacy-assets/Web/HTML/03/31.webp)

![33](/md/legacy-assets/Web/HTML/03/33.webp)


* [숙제2 풀이](https://github.com/younggeun0/SSangYoung/blob/master/dev/workspace/html_prj/WebContent/day0125/work2.html)

![32](/md/legacy-assets/Web/HTML/03/32.webp)

![34](/md/legacy-assets/Web/HTML/03/34.webp)