[웹 표준에 맞는 HTML5 프로그래밍] 7차시 - 화면설계 확인하기

와이어프레임

1. 와이어프레임(wireframe)의 개념

- 웹사이트의 회로도(schematic)또는 청사진(blueprint)라고도 불리우며, 웹사이트의 골격을 나타내는 시각적 가이드

2. 와이어프레임(wireframe)의 구성요소

- Wrap : 전체박스

- Header : 헤더

- Slide : 이미지 슬라이드

- Contents : 콘텐츠

- Footer : 푸터

- Tab Menu : 탭메뉴

- Pop-up : 팝업창

3. 와이어프레임(wireframe)의 종류

- 가로형과 세로형이 있음

 

레이아웃 구현하기

1. HTML 기본구성 입력과 CSS Reset하기

- 웹에디터의 Emmet 기능을 활용하여 html 기본 구성을 완성함

- HTML 태그에 대한 기본 CSS 요소를 초기화

2. HTML 기본 레이아웃 구현하기

- header, slide, Main Contents, footer에 대한 HTML 영역을 구현

3. CSS로 스타일 구현하기

- header, slide, Main Contents, footer에 대한 CSS 스타일을 구현

4. Header 영역 구조 꾸미기

- ul, li, a에 대한 HTML 영역 구조를 제작함

5. 메뉴 영역 꾸미기

- ul, li, a에 대한 CSS 스타일을 제작함