HTML(8) 레이아웃 Layout

레이아웃
 >> 특정한 공간에 여러가지의 구성요소를 보기좋게
    효과적으로 배치하는 작업
 >> HTML, CSS를 통해 여러 레이아웃 작성방법들을 제공
레이아웃을 만드는 방법
 1. table을 통한 레이아웃 처리
 2. div을 이용한 레이아웃 처리
 3. 시맨틱 태그를 이용한 처리

 

 

 

Layout 실습 1-1 (css이용)

Layout 실습 1-2 (css이용)

 

 

 

 

 

sementic(의미) 태그
태그명 그 자체가 의미를 가지고 있는 태그
  - 요소가 스스로 브라우저와 개발자 모두에게 자신이
    왜 쓰였는지를 직관적으로 보여주는 요소
  - 기존 div등의 요소로 레이아웃을 제작했을 때 영역 및 목적의 파악이
    늦어지는 단점을 보완하기 위해 등장한 태그(요소)

1. header - 도입부에 대한 내용을 정의하는 태그(html 머리를 정의하는 태그)
2. nav - html 문서 사이를 탐색할 수 있는 링크들의 집합
3. main - html 문서의 실질적 내용을 정의하는 태그(section이 더 많이 활용됨)
4. section - html 문서의 전체적인 내용과 관련있는 컨텐츠, 요소들의 집합
5. article - 해당 요소의 내용 자체만으로도 이해가 되어야하는 태그
6. aside - 태그 페이지 이외의 별도의 컨텐츠를 정의하는 태그
7. figure / figcaption - 이미지, 그래픽, 비디오 등의 컨텐츠를 정의하는 태그
8. footer - html 문서의 바닥글을 명시하는 태그
            일반적으로는 사이트의 작성자 혹은 저작권 정보나 연락처 등을 명시하는 태그