HTML 구조설계

• 들어가기 전에

웹페이지를 만드는 것은 문서의 구조, 즉 제목, 단락 등을 잡는 것과 같다. 그런 관점에서 웹사이트의 문서 구조를 만드는 것이 가장 먼저 할 일이다.

• 학습 목표

1. CSS 없이 먼저 HTML 구조를 설계할 수 있다.

• 핵심 개념

- HTML 구조화 설계

• HTML 구조 설계(HTML structure design)

구조화 설계는 마치 문서를 쓴다고 생각하면 쉽다. 현업에서는 Presentation 문서형태의 기획서나 디자인 파일을 받아서 그것을 기반으로 HTML 개발을 시작한다. 즉, 어떠한 화면을 보면서 그대로 구현하는 것이다. 그 화면을 보면서 구조를 분석해야 한다. 먼저 영역을 나눠서 상단/본문/네비게이션 이런 식으로 큰 부분부터 분리한다. 그 뒤에 각 영역 안에 내용의 구조를 잡는 것이 일반적이다. 각 영역 안의 내용 역시 여러가지 형태일 것이다. 목록을 나타내거나, 이미지를 나타내거나, 문단을 나타낼 수 있다. 이때마다 적절한 태그를 사용하면 된다. 그러면서 영역 안에 또 다른 영역이 있다면 점점 안으로 좁혀가면서 HTML tag를 사용하며 완성해나가는 것이다. 이때, CSS 코드를 같이 구현하지 않고 HTML로 먼저 문서의 구조를 잡아나가는 것이 개발단계에서 유리하다. 그래야 전체 뼈대가 튼튼하게 되는 것이기 때문

• 생각해보기

Q1. 자주 사용하는 웹사이트의 일부 영역(상단영역이나 하단영역 위주)의 HTML 코드를 한번 살펴보자. 그리고 나만의 하단영역(footer)을 정의해보고 HTML 코드를 한번 만들어보자.

A1. 

<footer>@Copyright by hzoou 2019</footer>

Q2. section 태그와 div 태그는 어떻게 다른걸까?

A2.