layout
- 특정한 공간에 여러가지의 구성요소를 보기좋게 효과적으로 배치하는 작업
- 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 중요한 요소
(좋은 레이아웃은 좋은 UI를 이끌어낸다) - HTML에서 여러가지의 레이아웃 작성 방법을 제공한다.
layout 만드는 방법
- table을 이용한 레이아웃 처리
--> HTML5가 나오면서 사용빈도가 낮아졌다. - div을 이용한 레이아웃 처리
--> 속성명(id, class)을 이용해서 각각의 div을 구분 - 시맨틱 태그를 이용한 처리
--> 말 그대로 태그명이 해당 영역에 대한 명칭을 가지고 있다.
semantic 태그
- 태그명 그 자체가 의미를 가지고 있는 태그
- 요소가 스스로 브라우저와 개발자 모두에게 자신이 왜 쓰였는지를
직관적으로 보여주는 요소 - 기본 div 등의 요소로 레이아웃을 제작했을 때 영역 및 목적의 파악이
늦어지는 단점을 보완하기 위해 등장한 태그(요소)
semantic 태그 정리
- header : HTML 문서의 머리를 정의하는 태그
도입부에 대한 내용을 정의하는 태그 - nav : HTML 문서 사이에 탐색할 수 있는 링크들의 집합
- main : HTML 문서의 실질적 내용을 정의하는 태그 (section이 더 많이 활용)
- section : HTML 문서의 전체적 내용과 관련있는 컨텐츠, 요소들의 집합
- article : 해당 요소의 내용 자체만으로도 이해가 되어야하는 태그
- aside : 태그 페이지 이외의 별도의 컨텐츠를 정의하는 태그
article 내부, 외부에 들어가는 정도 - figure / figcation : 이미지, 그래픽, 비디오 등의 컨텐츠들을 정의하는 태그
- footer : HTML 문서의 바닥글
일반적으로 사이트의 작성자 혹은 저작권 정보나 연락처 등을
명시하는 태그 (기업정보)
semantic 태그 예시
<header>여기는 헤더</header>
<nav>여기는 메뉴</nav>
<section>여기는 세션</section>
<footer>여기는 바닥글</footer>div 태그 예시
<div id="header">header</div>
<div id="nav">nav</div>
<div id="section">section</div>
<div id="footer">footer</div>semantic 태그와 div 태그 둘 다 활용해서 사용하는 것이 개발실력 향상!
안녕