시멘틱 태그

효율적인 레이아웃 작업을 위해 사용되는 태그들

태그의 이름만 보고도 어느부분에서 사용되는 태그인지 직관적으로 알 수 있다.

header태그 - 머리말태그(상단)
- 사이트 전체의 제목부분이 될수도 있고, 본문의 제목부분이 될수도 있다.
- 주로 페이지 맨 위쪽에 삽입
- ex: form태그를 사용해 검색창을 넣거나, nav태그를 사용해서 사이트 메뉴를 넣는다.
nav태그 - 네비게이션 태그(상단메뉴)
- 같은 사이트안의 문서나 다른 사이트의 문서로 연결하는 링크를 나라냄
- 네비게이션 메뉴 뿐만 아니라 푸터에 있는 사이트 링크 모음 등 에도 사용됨
main태그 - 메인 태그(메인화면 표시)
- 메인 컨텐츠를 표시하는데 사용
- 하나의 문서에는 하나의 main요소만 존재해야함
- article, aside, footer, header, nav 등등 태그의 자식태그가 되어선 안된다.
section태그 - 주제별 콘텐츠 영역
- 웹 사이트 안의 다른 문서나 다른 사이트의 문서로 연결하는 링크를 나타냄
- 섹션 제목을 나타내는 h(h1~h6)태그가 함께 사용되는 것이 일반적이다.
article태그 - 콘텐츠 내용
- 웹 상의 실제 내용
- 태그 적용부분을 떼어내 독립적으로 배포(혹은 재사용)하더라도 완전히 하나의 콘텐츠
aside태그 - 본문 이외의 내용
- 본문 내용 외에 주변에 표시되는 기타 내용들
- 필수요소가 아니므로 광고나 링크모음 등 문서의 메인내용에 영향을 미치지 않는 내용들을 넣을 때 사용
iframe태그 - 외부문서 삽입
- 웹문서 안에 다른 외부문서(외부html) 삽입
footer태그 - 제작 정보와 저작권 정보 등(주로 하단에 삽입)
- 사이트 제작자의 연락처 정보과 저작권 정보 등을 표시한다.
div태그
- 주로 컨텐츠들을 묶어서 시각적 효과를 적용할 때, 즉 CSS를 적용할 때 사용

div 태그는 태그들 묶어서 사용하는 장바구니 같은 느낌....! 선물 상자....^^

태그들을 한번에 감싸서 css 적용시키려고 할때 사용한다.

div는 가로세로 길이를 따로 지정할 수도 있지만 안에 내용 크기를 수정해서 정할 수 도 있다.

margin:0 auto; -> 콘텐츠를 화면 가운데 정렬할때 많이 씀

#wrap{

/* 페이지의 전체적인 크기를 설정한다.

가로: 980px

margin : 상하는 0, 좌우는 페이지의 크기에 비례하도록 auto로 설정 */

width: 980px;

margin: 0 auto;

}

<body>

시멘틱 태그를 이용한 레이아웃 구성(유동형)

:가로길이들을 기준으로 유동적이게 조정하는 것이 일반적이다.

<p><img ></p> 이미지 블록 속성주기