HTML 태그

태그

* a태그 : 태그는 하이퍼링크를 걸어주는 태그.

• a태그 속성
  href : 클릭시 이동할 링크
  target : 링크를 여는방법 => _self는 현재페이지에서 바로 실행되고 기본값이다.

  <a href="./introduce/company.html target='_self'">company</a>

  ---

* select 태그 : 선택을 할수 있는 드롭다운 박스를 만드는 태그.

• 연계태그
  option 태그 : 리스트 중 하나의 아이템
  optgroup 태그 : 드롭다운 내에서 옵션 그룹을 나눌 수 있다.

• 태그 및 연계태그 속성
  value : 전송되는 값을 표현한다.
  selected : 처음 화면이 보여졌을때 기본값으로 표현할수 있다.

  <select id="loaction" name="loaction">
       <option value="gg">경기</option>
       <option value="gb" selected>경북</option>
   </select>
   <select id="loactionoftravel" name="loactionoftravel">
       <optgroup label="경기">
         <option value="sw">수원</option>
         <option value="ic">인천</option>
         <option value="sn">성남</option>
       </optgroup>
       <optgroup label="경북">
         <option value="dg">대구</option>
         <option value="ad">안동</option>
         <option value="sj">상주</option>
       </optgroup>
    </select>

---

* Table 태그 : 행과 열로 이루어진 테이블 형태로 만들어 주는 태그

• 연계태그
  th : 테이블의 헤더부분을 만드는 태그
  tr : 테이블의 행을 만드는 태그
  td : 테이블의 열을 만드는 태그

• 태그 및 연계태그 속성
  cellpadding : 셀과 글자 사이의 간격
  cellspacing : 셀 간격의 간격
  border : 테이블의 테두리
  colspan : 가로 합병(열 합병)
  rowspan : 세로 합병(행 합병)

  <table cellpadding="10" cellspacing="10" border="1">
    <tr>
      <th>ISBN</th>
      <th>title</th>
      <th>price</th>
      <th>test1</th>
      <th>test2</th>
      <th>test3</th>
    </tr>
    <tr>
      <td colspan="2">1</td>
      <td>$23</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>4</td>
      <td>my first html2</td>
      <td rowspan="2">$32</td>
      <td colspan="2">test</td>
      <td rowspan="2">test</td>
    </tr>
    <tr>
      <td>7</td>
      <td>my first html3</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </table>

---

* label 태그 : 사용자 인터페이스 항목의 설명하는 태그

• 속성
  for : for속성의 id값과 다른태그의 id값과 같다면 포커스 역할을 해준다.

<label for="phone">전화번호</label>
<input type="tel" id="phone">

---

* input 태그 : 사용자의 데이터를 받을 수 있는 태그

• type : input 태그는 type에 따라 여러가지의 형태의 데이터를 받을 수 있다.
  text : 텍스트 값을 받는 타입
  password : 비밀번호를 값을 입력하는 타입
  submit : 폼안의 데이터를 전송하는 역할
  email : e-mail을 기입할수 있는 타입
  color : color 값을 가져올수 있는 타입
  reset : form 안의 값을 초기화 하는 타입
  file : 파일을 가져올수 있는 타입
  checkbox : 체크박스로 변환
  radio : 라디오 타입으로 변환
  tel : 전화번호 타입으로 된다

• type 속성
  pattern : 전화번호 양식에 맞게 적을수 있도록 도와준다.
  placeholder : 사용자가 올바른 값을 입력할 수 있는 힌트를 제공하는 목적의 속성

  <input type="tel" id="phone" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" placeholder="010-1234-1234">

* button 태그 : 클릭을 할 수 있는 버튼을 만들 수 있는 태그

• type : button 몇가지 type에 따라 역할이 다를 수 있다.
  button : 일반적인 button 타입이라고 볼 수 있다.
  reset : 모든 컨트롤의 값을 초기화 시켜주는 타입
  submit : 서버로 값을 전송하는 타입.

<button type="submit">저장</button>
<button type="reset">취소</button>

* form 태그 : 사용자가 입력한 값을 서버로 전송하는 태그

• 속성
  action : 페이지경로 지정
  method : 데이터 전송방식 ( get, post 방식 )
  target : a태그의 target속성과 기능은 같다.

<form action="form-1.html" method="get">

* h1~h6 태그 : 6단계의 제목을 표현하는 태그.

<h1>Beetles</h1>
    <h2>External morphology</h2>
        <h3>Head</h3>
            <h4>Mouthparts</h4>
        <h3>Thorax</h3>
            <h4>Prothorax</h4>
            <h4>Pterothorax</h4>

* P 태그 : 문단을 설정하는 태그

<p> Lorem ipsum dolor sit amet</p>

* dl dt dd 태그 : 제목과 설명이 한쌍인 목록을 만들때 사용하는 태그

• dl : 용어와 그에 대한 설명을 리스트 형식으로 정의할때 사용 하는 태그
• dt : 용어의 제목이라고 볼 수 있다.
• dd : 용어에 대한 설명이라고 할 수있다.

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
</dl>

* ul ol li 태그 : 순서가 없거나, 있는 목록을 만들때 사용 하는 태그

• ul : 순서없이 모양으로 (unordered list) 목록을 만드는 태그
• ol : 번호를 메겨 순서가 있는 (ordered list) 목록을 만드는 태그
• li : 목록의 항목을 나타내는 태그 => 항상 ul,li 태그의 자식태그로 포함되어 있어야 한다.

  <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>javascript</li>
    </ul>
  <ol type="a">
      <li>HTML</li>
      <li>CSS</li>
      <li>javascript</li>
  </ol>