Html Element

모든 Element 가 <> </> 와 같은 형태로 되어있진 않다. 해당 형태로 되어있는건 안에 문자가 들어갈 수 있을때가 많습니다.

 

Input

 

사용자가 입력할 수 있는 형태의 Element다.

 

    <input type="text">

속성이 text면 문자를 집어넣을 수 있다.

 <input type="number">

속성이 number라면 숫자만을 집어넣을 수 있다.

 

Select

 

주어진 보기를 기준으로 선택할 수 있는 Element.

 

Select 안에 <option> 엘리멘트를 추가함으로서 선택할 요소들을 집어넣어준다.

<select>
        <option>Seoul</option>
        <option>Jeju</option>
</select>

 

Anchor

<a> 태그는 다른 웹페이지나 리소스와의 링크를 만드는 element입니다.

 

눌렀을 때 다른 웹사이트로 접속이 되는 등의 용도로 쓰입니다.

<a href="URL" target="TARGET">링크 텍스트</a>

href 속성은 링크의 주소를 나타냅니다. 

target 속성은 _self 는 현재 창에서 링크를 열고  _TARGET 은 다른 창을 새로 열어 링크에 접속합니다.

a 태그로 생성된 링크

 

Table

 

테이블(표) 형태의 element입니다.

 

<table> 엘리먼트 내엔 

 

<caption> : 제목 텍스트를 넣어주는 행 엘리먼트

 

<thead> ,<tbody> , <tfoot> :  

<tr> 을 통해 행을 추가하고 <td>에 내용을 넣어주는 형태의 엘리먼트들

 

각각의 요소는 필수가 아니며 상황에 따라 생략이 가능

 

<table>
        <caption>표 제목</caption>
        <thead>
            <tr>
                <td>열1</td>
                <td>열2</td>
                <td>열3</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>데이터</td>
                <td>데이터</td>
                <td>데이터</td>
            </tr>
            <tr>
            	<td>데이터</td>
                <td>데이터</td>
                <td>데이터</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
              <td>총합 1</td>
              <td>총합 2</td>
              <td>총합 3</td>
            </tr>
        </tfoot>
</table>