HTML 태그

diners88·2022년 4월 22일
0

태그

* 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>

profile
수업들은 것을 정리하고, 공부하기 위한 블로그

0개의 댓글