HTML #2

📘 레이아웃

• div 태그
  가장 흔히 사용되는 레이아웃 태그로 의미없이 단순히 구역을 나누기 위한 태그

레이아웃 태그 #1

• header
  블로그 글 제목, 작성일, 작성자, 카테고리 등의 주요 정보 담는 태그
• footer
  페이지 하단에 저작권 정보나 연락처, 페이지 정보 등 부가적인 정보를 담는 태그
• main
  페이지의 가장 큰 부분으로 사이트의 내용 즉, 주요 콘텐츠를 담는 태그, 한 페이지 내 한번만 들어가야한다.
  header 와 footer는 중복 사용 가능

레이아웃 태그 #2

• section
  콘텐츠의 구역을 나누는 태그
  신문지에서 여러 기사가 각자의 구역에서 각자의 정보를 전달하는 의미와 비슷한 역할을 하는 태그
• article
  블로그 포스트, 뉴스 기사와 같은 그 구역 안에서 작성된 독립적인 문서를 전달하는 태그
• aside
  문서의 주요 내용에 부가적인 정보 전달하는 태그 (main section article 어디서든 사용 가능)
  쇼핑몰의 오른쪽에 따라다니는 "오늘 본 상품" 같은 것, 위젯들이 모여있는 곳 으로도 사용할 수 있다.

자주하는 게임인 로스트아크 홈페이지를 가지고 레이아웃 태그를 나눠보았다. 배운걸 토대로 큼직하게 나눠보았지만 실제 홈페이지에서 개발자 도구를 통해 태그들을 살펴본 결과 버튼 하나, 이미지 하나까지도 세세하게 다 나눠져있는 것을 확인할 수 있었다. 그리고 시멘틱 마크업을 배우고 나서 div 태그를 굳이 사용할 필요가 있을까? 생각했지만 실제 홈페이지에서 div태그가 꽤 사용된 것을 보고 어떤 상황에 어떻게 쓰여있는지 열심히 찾아보았다. 무조건 쓰지말자가 아닌 유연하게 사용할 수 있는 개발자가 되어야겠다는 생각이 들었다.

 

- 레이아웃 태그를 사용해야 하는 이유

html5 이전에는 의미가 없는 <div>를 사용해서 레이아웃 구성하고 서비스를 운영했다.
이로 인해 검색엔진이나 다른 접근하는 기기들이 어떤게 사이트 제목이고 어디까지가 글인지 아는게 힘들었다.

html5부터는 태그를 의미 있게 사용하기 위해 "semantic(시멘틱)"태그를 사용한
시멘틱 마크업을 지향하는 문서 구조로 작성하게 된다.

 시멘틱 마크업으로 문서를 작성하게 되면,
 	- 검색 엔진의 검색 순위에 가산점 얻거나 기기 처리 속도, 홈페이지 로딩 속도 향상
 	- 의미가 없는 단순 구분자인 <div>를 남발하지 않고 적절한 태그를 사용하여
      웹 문서가 담은 정보와 구조를 의미 있게 전달