[프론트엔드] HTML 강의 4일차

HTML 각종 요소 (태그)

1. table

• 여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표(엑셀)

<table border="테두리(숫자)" width="가로 길이", align="정렬(center, right, left)"> 
    <caption> .. 표이름 ... </cation>

    <tr>    ---- 한 줄 (table row:층)

        <th> ---- 가장 첫번째 줄(tr)에 <td> 대신 사용 (글씨체 진하기, 가운데 정렬, table head)
            ..<td></td>
        </th>

        <td width, height="세로 길이", rowspan="세로 병합, colspan="가로 병합"">   ---- 한 칸 (table data)
        <td>
    </tr>
</table>

2. datalist

• <input> 요소에 사용하기 위한 옵션들을 미리 드롭다운 형태로 보여주기 위해 사용, 자동 완성 기능 제공

<input type="text" list="리스트명">

<datalist id="리스트명">
    <option value="값"></option>
    ...
    ...
</datalist>

<!-- HTML5에서 제공되는 태그이며 Safari 브라우저는 지원되지 않는다. -->

---

시맨틱 웹 태그

• 전 세계에 만들어져 있는 웹 문서의 갯수 증가함에 따라 정확하게 가치 있는 정보 탐색을 위해 요구하는 사항들이 점점 늘어남에 따라 웹 세상에서 방대하게 퍼져 있는 웹 문서를 보다 쉽고 정확하게 구분하고 조합하기 위해 시맨틱 웹 태그를 사용하게 되었다.

사용 이유

⑴ 웹 접근성
● 장애를 가진 사람 혹은 가지지 않은 사람 모두 웹 사이트를 이용할 수 있게 하는 방식을 가리키는 것

⑵ 검색 엔진
● 검색 엔진의 자체 알고리즘이 키워드를 추출을 하는데 이때, 해당 알고리즘이 시맨틱 태그를 읽고 더욱 정확한 내용을 전달하여 검색 엔진의 상위 문서에 노출될 수 있도록 해준다.

⑶ 가독성

<!-- 헤더 부분 -->
<div>
...
</div>
<!-- 헤더 부분 끝 -->
<!-- 컨테이너 시작 -->
<div>
    ...
        <div>
    ...
</div>
<!-- 컨테이너 끝 -->
<!-- footer 시작 -->
...

<header>
..
</header>
<section>
    ...div
</section>
<footer>
...
</footer>

 

태그 이름	설명
header	웹사이트 제목, 로고, 검색 폼, 작성자 이름 등의 요소등을 담는 태그를 의미
hgroup	다수의 h1~h6 을 묶을 때 사용하는 태그를 의미
nav	다른 페이지로의 링크를 보여주는 태그, 메뉴, 목차, 색인 등에 사용된다. (네비게이션을 의미)
section	한 문서의 구간을 나타내며, 적합한 뜻을 가진 요소가 없을때 사용하는 태그를 의미
article	문서, 메이지 어플리케이션 또는 사이트 안에서 독립적으로 구분해 재사용할 수 있는 구간 ex) 게시판 블로그 등의 글(post), 매거진의 뉴스나 기사
aside	문서의 주요 내용과 간접적으로 연관된 부분을 나타내는 태그, 주로 사이드 바에 사용된다.
footer	일반적으로 웹페이지의 제일 아랫부분에 위치, 작성자, 저작권 정보, 회사 정보, 관련 문서등의 내용을 담고 있는 태그