[Study] HTML/CSS | 02 HTML 태그

• HTML 태그 소개

주요 태그는 잘 이해하고, 그 외 사용 빈도가 적은 태그는 필요할 때 스스로 찾아 익히는 방향으로 학습을 진행

• 제목과 단락요소

제목(heading) 태그는 문서 내에 제목을 표현할 때 사용하는 태그 h

단락(paragraph) 태그는 paragraph를 줄여서 p

• 텍스트를 꾸며주는 요소

<b> : bold 태그는 글자를 굵게 표현하는 태그입니다.

<i> : italic 태그는 글자를 기울여서 표현하는 태그입니다.

<u> : underline 태그는 글자의 밑줄을 표현하는 태그입니다.

<s> : strike 태그는 글자의 중간선을 표현하는 태그입니다.

• 앵커 요소

<a href="http://www.naver.com/" target="_blank">네이버</a>

<a href="#some-element-id">회사 소개로 이동하기</a>

... 중략.

<h1 id="some-element-id">회사 소개</h1>

• 의미가 없는 컨테이너 요소

div 태그는 블록 레벨 태그

span 태그는 인라인 레벨 태그

<div>
	<span>Lorem</span> ipsum dolor sit.
</div>

• 리스트 요소

ul(unordered list) 태그는 순서가 없는 리스트를 표현할 때 사용

ol(ordered list) 태그는 순서가 있는 리스트를 표현할 때 사용

dl(definition/description list) 태그는 용어와 그에 대한 정의를 표현할 때 사용

<ul>
  <li>콩나물</li>
  <li>파</li>
  <li>국 간장</li>
  ...
</ul>

• 이미지 요소

<img src="./images/pizza.png" alt="피자">

gif : 제한적인 색을 사용하고 용량이 적으며 투명 이미지와 애니메이션 이미지를 지원하는 형식

jpg : 사진이나 일반적인 그림에 쓰이며 높은 압축률과 자연스러운 색상 표현을 지원하는 형식(투명을 지원하지 않는다.)

png : 이미지 손실이 적으며 투명과 반투명을 모두 지원하는 형식

• 테이블 요소

<table> : 표를 나타내는 태그

<tr> : 행을 나타내는 태그

<th> : 제목 셀을 나타내는 태그

<td> : 셀을 나타내는 태그

<table>
  <caption>
    Monthly Savings
  </caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

<table>
  <caption>
    Specification values
  </caption>
  <thead>
    <tr>
      <th rowspan="2">Grade.</th>
      <th rowspan="2">Point.</th>
      <th colspan="2">Strength.</th>
      <th rowspan="2">Percent.</th>
    </tr>
    <tr>
      <th>kg/mm</th>
      <th>lb/in</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hard</td>
      <td>0.45</td>
      <td>56.2</td>
      <td>80,000</td>
      <td>20</td>
    </tr>
    <tr>
      <td>Medium</td>
      <td>0.45</td>
      <td>49.2</td>
      <td>70,000</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Soft</td>
      <td>0.45</td>
      <td>42.2</td>
      <td>60,000</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

• 폼 요소1

폼 요소는 서버에 데이터를 전달하기 위한 요소이며 <input>은 대표적인 폼 요소

<input type="text" placeholder="입력하시오" />

<input type="password" />

<input type="radio" name="gender" /> 남자
<input type="radio" name="gender" /> 여자

<input type="checkbox" name="hobby" /> 등산
<input type="checkbox" name="hobby" /> 독서
<input type="checkbox" name="hobby" /> 운동

<input type="file" />

<form action="./test.html">
  <input type="text" name="message" /><br />
  <input type="submit" />
  <input type="reset" />
  <input
    type="image"
    src="http://placehold.it/50x50?text=click"
    alt="click"
    width="50"
    height="50"
  />
  <input type="button" value="버튼" />
</form>

<select>
  <option>서울</option>
  <option>경기</option>
  <option>강원</option>
  ...
</select>

<textarea rows="5" cols="30">
    ...
</textarea>

<label>은 form 요소의 이름과 form 요소를 명시적으로 연결시켜주기 위해 사용

<fieldset> : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용

<legend> : 폼 요소의 제목으로 <fieldset> 내부에 작성

<form>은 form 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해주는 역할을 하는 태그

action: 데이터를 처리하기 위한 서버의 주소

method: 데이터를 전송하는 방식을 지정

<label for="name">이름</label>: <input type="text" id="name" /><br />
<label for="nickname">이름</label>: <input type="text" id="nickname" /><br />
<label for="address">이름</label>: <input type="text" id="address" /><br />

<form action="" method="">
  <fieldset>
    <legend>기본 정보</legend>
    ... 폼 요소들 ...
  </fieldset>
  <fieldset>
    <legend>부가 정보</legend>
    ... 폼 요소들 ...
  </fieldset>
</form>