1. Layout

테이블 레이아웃

• table 표 데이터와 달리, 배치를 위해 테이블을 사용함
• 옛날에 사용하였으나, 요즘은 뉴스레터 를 만들 때 쓴다.

프레임 레이아웃

• 여러 HTML 페이지를 frame 을 사용하여 한 페이지에 결합하여 레이아웃을 만듦

시맨틱 마크업

• flex, grid 등, 웹 기술의 발전, 검색엔진최적화, 접근성, 글로벌 웹사이트 제작, 반응형 등의 이유로 생겨난 레이아웃 기법
• 시맨틱 마크업의 장점은

1. SEO(검색엔진 최적화)
2. 장애가 있는 사용자에게 페이지를 탐색할 때 하나의 푯말 역할
3. 태그의 가독성 및 유지보수 용이

• 대부분의 브라우저가 웹 표준을 따르고 있으므로, 시맨틱 마크업을 필수로 사용하는 것이 좋지만 제공되는 서비스의 환경이 구 브라우저 지원을 해야 하거나, 다른 프로그램 등과의 호환을 고려한다면 사용하지 않을 수도 있다.

2. 시맨틱 태그

header

• 소개 및 탐색에 도움
• 회사명, 제목, 로고, 검색 폼, 작성자 이름 등의 요소가 포함
• 헤더를 중첩 사용하거나 헤더 안에 푸터를 사용할 수 없다.

nav (navigation bar)

• 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여준다.
• 메뉴, 목차, 브레드크럼
• 문서의 모든 링크가 nav안에 있기 보다 페이지의 주요 탐색 링크를 위한 태그로, 하나는 사이트 전체 탐색, 다른 하나는 현재 페이지 내 탐색으로 사용하듯이 하나의 웹페이지 내에 여러 개의 nav를 가질 수 있다.

footer

페이지의 작성자, 저작권 정보, 관련 문서 등의 내용을 넣음

main

• body의 주요 콘텐츠를 보여줌
• 웹페이지에서 한 번만 사용
• 사이드바, 탐색 링크, 저작권정보, 사이트 로고, 검색 폼 등 여러 페이지에 반복되는 콘텐츠를 포함해서는 안된다. (검색 폼이 주요 기능이라면 제외)

article

• 제목 요소를 자식으로 포함해야 한다.
• 독립적으로 구분해 배포하거나 재사용할 수 있는 구획으로,

  • 사이트의 다른 기능에 영향을 주지 않고 독립적인 기능을 수행
  • 아티클 영역을 제거해도 페이지는 정상적으로 작동

• 아티클이 대표적으로 사용되는 곳은 대표적으로,
  : 게시판, 블로그 글, 매거진, 뉴스 기사, 위젯, 실시간 채팅창 등

section

• 제목 요소를 자식으로 포함하여야 한다.

• section 과 article , div 중 어느 것을 사용하는가?
  : 먼저 article을 이용하여 독립적으로 사용할 수 있다면 사용하고,
  section은 웹페이지의 앞뒤 문맥의 연결성이 필요할 때 사용한다.
  단순하게 스타일링이 목적이라면 div를 사용한다.

aside

• 문서의 주요 내용과 간접적으로 연관된 부분만 나타내고, 주요 흐름이 아닌 보조적인 역할만 하는 공간이다.
• 각주, 광고 배너 등에 사용한다.

hr

• 이야기에서 장면 전환하거나 문단 안에서 주제가 변경되었을 때 사용
• 단락을 구분할 때 사용하므로 <p>태그 내의 사용은 하지 않는다.

3. 스타일링을 위한 사용

div

• division(분할) : 영역 나눔, 콘텐츠 분할 요소
• 블록 컨테이너로 웹사이트의 레이아웃을 만들 때 사용한다.
• 영역을 구분 짓거나 무리를 짓는 태그, 상당히 광범위하게 사용한다.
• 공간을 나누는 것 외에는 기능이 없지만, 많이 사용된다.

span

• 인라인 컨테이너로 아무것도 나타내지 않지만, 스타일을 적용하거나 인라인 요소를 묶을 때 사용한다.