100점 과제물 / 시맨틱 태그를 이용하여 페이지 구조를 작성하시오. 작성한 페이지를 화면 캡쳐하고 소스 및 태그를 정리하여 보고서 형태로 제출하시오. - 시맨틱 태그 사용 - 원 페이지, 2단 혹은 3단 구조 중에 선택하여 레이아웃 작성

소개

시맨틱 태그를 이용하여 페이지 구조를 작성하시오. 작성한 페이지를 화면 캡쳐하고 소스 및 태그를 정리하여 보고서 형태로 제출하시오.
- 시맨틱 태그 사용
- 원 페이지, 2단 혹은 3단 구조 중에 선택하여 레이아웃 작성

목차

1. 서론
1) 시맨틱 태그의 정의 및 제작할 사이트 기획

2. 본론
1) 시맨틱 태그로 구성한 레이아웃 구조
2) 스타일을 이용하여 레이아웃 꾸미기
3) 결과 이미지 및 전체 소스

3. 결론
1) 과제를 진행하며 느낀 점

4. 참고문헌

본문내용

Ⅰ. 서론
HTML5 문서는 시맨틱 태그를 이용하여 어느 기기를 사용하더라도 문서 구조를 표준화시켜 정확하게 이해할 수 있습니다.
이번 과제를 통해 시맨틱 태그를 이용한 레이아웃을 만들고 스타일을 입혀 시맨틱 태그를 실제로 사용해보려고 합니다.
먼저 코딩을 하기 전에 어떤 구조로 만들지 생각해보았습니다.
상단에는 전체 너비의 header 와 그 아래영역에는 좌측에 nav, 우측에 main으로 2단구성을 배치하였고 하단에는 footer가 있는 구조로 기획하였습니다.
그리고 main 영역에는 공지사항, 영상, 갤러리의 콘텐츠들을 배치할 예정입니다.

1. 시맨틱 태그로 구성한 레이아웃 구조
1-1. header
header 태그는 문서나 section 등의 헤더를 정의할 때 사용합니다.
보통, 도입부에 해당하는 콘텐츠나 네비 링크 집합 등을 가집니다.
참고로 html 문서는 여러 개의 header요소를 포함할 수 있습니다.

저는 header 태그의 백그라운드에 이미지를 넣을 예정이고 사진위의 흰 글씨가 잘 보일 수 있도록 검정 배경도 추가하였습니다.
로고를 대신할 텍스트도 h1태그를 사용하였고 p태그를 이용하여 하단의 텍스트도 추가하였습니다.

1-2. nav
각종 네비게이션 링크들의 집합을 정의하는 nav태그를 사용하여 메뉴(카테고리)링크를 담아주었습니다.
nav 태그 안에 ul, li 태그를 사용하여 category 메뉴를 넣고 그 안에 페이지 연결할 수 있는 a태그를 넣었고,
하위 submenu를 ul, li태그를 사용하여 넣어주었습니다.
a태그의 href 속성을 #으로 임시로 넣었지만 나중에 해당 페이지 경로를 넣어주면 됩니다.

1-3. main
main태그는 body의 주 콘텐츠를 정의할 때 사용합니다.
main태그 안에 article 태그와 section 태그를 사용하여 공지사항, 영상, 갤러리 등의 콘텐츠들을 넣어주었습니다.

참고자료

· 인터넷활용1 교안
· TCP School, http://www.tcpschool.com/html-tags/intro