HTML / 기본태그를 활용한 웹 페이지 틀 만들기

HTML / 기본태그를 활용한 웹 페이지 틀 만들기

자 이제 앞서 공부한 것을 토대로 간단한 텍스트형 웹 페이지를 만들어 보겠다. 최종 목표는 기본 블로그 형태로 웹 페이지를 꾸미는 것인데, 아직 CSS를 배우지 않아서 불가능하다. 따라서 HTML5를 사용해서 기본 구조만 짜보려고 한다.

위와 같은 형태의 웹 페이지를 만드려고 한다. 일단 위 페이지의 레이아웃을 다음과 같이 단순화 시키고 분리한다.

이렇게 영역을 구분했으면 이 레이아웃을 행 기준(가로로 선을 그릴 수 있는 부분)으로 분리한다.

1. Header

2. Navigation

3. Section, Aside

4. Footer

이제 공간 분할 태그 <div>를 사용해서 레이아웃을 구분한다.

공간 분할(레이아웃 구분)

공간 분할을 완료했으면 안의 내용을 입력해준다.

Header

Navigation

Section, Aside

Footer

위 코드를 다 작성했다면 이 링크처럼 표시될 것 이다. 

AimHo_Example

위 예제를 보고 이게 어떻게 웹 페이지가 된다는건지 의아해하는 분들이 많을 것 같은데, 이어서 공부할 CSS3를 마무리하면 웹 페이지 틀이 어떻게 이쁘게 변하는지 알게 될 것이다.