[웹 표준에 맞는 HTML5 프로그래밍] 13차시 - 요구사항에 맞추어 사이트 디자인하기

요구사항 살펴보기

1. 웹 디자인기능사 예시문제를 예시로 요구사항 명세 분석

- 문제 개요, 와이어프레임, 영역별 지시사항

2. Q-Net 사이트에서 다운로드 가능

 

HTML로 구조 꾸미기

1. HTML 기본세팅: 예시 문제를 통해 구성을 확인

- head, A.header, B.Slide, C.Contents, Modal, Footer, Footer with SNS

2. 메뉴 영역인 Header 꾸미기: ul과 li 태그를 사용한 메뉴 구성

3. 이미지 슬라이드 영역인 Slide 꾸미기

- 슬라이드에 사용할 이미지의 경로를 확인하고 img 태그를 사용해서 삽입. alt에 해당 이미지에 대한 설명 추가

4. 탭메뉴, 공지사항, 갤러리, 배너 영역인 Contents 꾸미기

- 클릭을 통해 해당 페이지로 이동할 수 있도록 a 태그 사용과 경로 작성

5. 모달 팝업 영역인 모달 꾸미기

- 팝업에 사용할 콘텐츠 작성, 닫기 버튼 구현

6. 하단 메뉴 영역인 Footer 꾸미기

- logo, copyright, 하단 메뉴 구성

 

CSS로 모양 디자인하기 

1. HTML 구성요소의 스타일을 CSS로 디자인함

- CSS 초기화

- 메뉴들의 스타일링과 위치 속성 설정: submenu같이 고정되어야 하는 것은 absolute지정

- 이미지 슬라이드의 레이아웃의 크기보다 이미지가 클 경우 overflow:hidden으로 보이지 않도록 설정

 

JavaScript로 기능 더하기

1. HTML 구성요소의 기능을 JavaScript로 구현

- 메뉴: mouseover, mouseout을 통해 메뉴가 아래로 내려오고 다시 올라가도록 기능 구현

- imageSlide가 사용자가 지정한 시간동안 페이드인, 페이드아웃의 방법으로 보여지도록 기능 구현

- modal popup이 클릭이벤트를 통해 보여지고 닫기 버튼을 통해 사라지도록 기능 구현