HTML_헷갈리는 태그 정리(dl, select, table, address, meta)

HTML 태그 중 사용법이 헷갈리는 태그(dl, select, table, address, meta)를 MDN을 참고하며 정리한 글입니다.

<dl> - description list

• terms은 <dt> 로 description - <dd>로 감싸 포함한다.
• 주로 용어 사전이나 key: value 형태의 정보를 보여줄 때 사용한다.

<dl>
    <dt>사과</dt>
    <dd>동그랗고 빨간 과일</dd>

    <dt>바나나</dt>
    <dd>길고 노란색의 과일</dd>

</dl>

<select>

• 드롭다운 목록을 만들 때 사용한다.
• 안에 <option>을 포함하여 선택지를 만든다.

<label for="과일고르기">과일을 고르세요:</label>

<select name="과일" id="과일고르기">
    <option value="">--Please choose an option--</option>
    <option value="사과">사과</option>
    <option value="바나나">바나나</option>
    <option value="블루베리">블루베리</option>
</select>

• label과 연결해주기 위해 id 속성을 넣고, 서버에 어떤 데이터인지 설명해주기 위해 name 속성을 넣는다.(안에 포함된 <option>에는 value 속성을 사용하여 어떤 데이터인지 서버에 알려준다.)
• 이 외에도 다중 선택을 할 수 있게 만드는 multiple, 맨 처음 몇 개의 옵션이 보여질 건지 정할 수 있는 size, 다른 input 태그에서 보통 사용하는 required, disabled, autofocus 등의 속성값을 사용할 수 있다.

<table>

• 데이터를 담은 표를 만들 때 사용한다.

<p>Table with thead, tfoot, and tbody</p>
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
</table>

• <table> 안에는 열의 제목을 만드는 <th>, 행을 만드는 <tr>, 열을 만드는 <td>가 들어간다.
• <th>에는 제목과 내용을 연결해주는 scope 속성이 쓰이는데, 그 값이 "row"일 때는 스크린리더기와 같은 프로그램이 행을 기준으로 데이터를 읽어 내려간다. 반대로 "col"일 때는 열을 기준으로 하여 순서대로 데이터를 읽는다.
• <td>에는 colspan, rowspan 속성을 사용하여 각각 열과 행을 병합할 수 있다.
• 표가 복잡할 때는 <thead>, <tbody>, 그리고 <tfooter>을 사용해 css로 스타일링할 때 좀 더 편하게 작업할 수 있다.
• <caption>을 이용하여 표의 제목을 만든다.

<address>

• 주소, url, 전화번호, sns 등 연락처에 관련된 정보(contact information)를 제공한다.
• 보통 <footer> 안에 쓰인다.
• 연락처 정보는 추가적인 정보이기 때문에 기본 모양이 기울임꼴이다.

<meta>

• 문서의 인코딩을 지정한다. <meta charset="utf-8"> utf-8은 거의 모든 언어를 포함하는 문자 집합이기 때문에 모든 웹 페이지를 이와 같이 설정하는 것이 좋다.
• 많은 <meta>태그가 <name>과 <content> 속성을 포함한다. name에는 어떤 타입의 정보가 들어갈 것인지, content에는 해당하는 그 정보가 들어간다. 검색 엔진 최적화를 위해 이러한 정보를 넣어주는 것이 좋다.

<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">
<meta name="keywords" content="fill, in, your, keywords, here">