[웹 표준에 맞는 HTML5 프로그래밍] 3차시 - 웹 페이지 구조화 하기

웹 페이지 구조화와 시맨틱 태그

1. 공간 분할 태그

- div: 블록(Block)형식으로 공간 분할

- span: 인라인(Inline)형식으로 공간 분할

- 공간 분할 태그: CSS3를 활용해 레이아웃 구성할 때 매우 유용함

2. 시맨틱 태그

Semantic: 의미론적인, 즉 태그에 의미를 부여한다는 뜻

3. 주요 웹 사이트의 태그 사용 현황

- 웹 사이트의 태그 사용 현황 확인 방법

   1. 크롬으로 주요 사이트 접속

   2. 마우스 오른쪽 버튼을 클릭해서 페이지 소스보기 선택

   3. 소스 보기 창에서 찾기를 선택

   4. 주요 태그의 개수 확인해보기

 

리스트와 표

1. 리스트(list)태그

- <li> ol </li> : 순서가 있는 목록

- <li> ul </li> : 순서가 없는 목록

- <dt> dl </dt> : 정의 목록

- <dd> dl </dd> : 정의 설명

2. 테이블(table)태그

- <table></table>

- <th></th>

- <td></td>

 

입력양식(폼)

1. 입력 양식 유형

2. 입력 양식 작동 원리

3. 다양한 양식(form)태그

4. MDN과 Codepen을 활용한 태그 연습

- MDN: https://developer.mozilla.org/en-US/ 

MDN Web Docs

- Codepen: https://codepen.io/ 

CodePen

- html5와 CSS3 태그를 모두 외울 필요 없음. 이해한 후에 궁금한 것들은 MDN 또는 w3schools에서 검색하고, 검색 결과를 Codepen과 같은 온라인 에디터 사이트에서 확인