1. 지금까지 배운 html의 모든 내용을 활용하여 나만의 홈페이지를 만들어 봅니다. html5 이전의 홈페이지는 다음 그림과 같이 프레임을 나누어서 사용하였습니다.
2. 최근에는 프레임을 구분하지 않고 영역을 나누어서 한 페이지로 구성하는 방법을 주로 사용합니다. html5에서는 CSS를 이용해서 각 영역을 미리 지정하여 사용할 수 있습니다.
3. 나만의 홈페이지를 만들기 위 홈페이지 레이아웃을 구성합니다.
4. 내비게이션 부분의 메뉴에 연결할 웹 페이지를 만듭니다.
|
메뉴 |
연결할 페이지 |
|
나의 소개 |
2-1.html(소개 페이지) |
|
나의 앨범 |
4-3html(앨범 페이지) |
|
포트폴리오 |
6-3.html(동영상 페이지) |
최근에는 연결할 페이지도 모든 영역이 포함된 코드로 만들어져 페이지가 전체적으로 변경되는 방법을 사용합니다. 이 블로그에서는 기존의 코드를 최대한 수정하지 않고 사용하도록 iframe 태드를 사용하여 만듭니다.
5. 먼저 아래와 같이 CSS로 메인 페이지 디자인을 만듭니다. style_home.css 파일로 저장합니다.
|
body {margin: 0px; padding: 0px; background: gray;}
.wrap {width: 850px; background: white; margin: 0px auto 0px auto;}
header {background: white; width: 850px; height: 80px; text-align: center; padding: 0.1px 0px 0px 0px;}
a {text-decoration: none; color: black}
nav a:hover {color: gray; border-color: darkgray;}
nav {width: 850px; height: 45px; background: lightgray; text-align: center; color: black; padding: 0.1px 0px 0px 0px;}
nav li {display: inline; padding: 5px;}
nav a {text-decoration: none; color: black; padding: 8px; border-style: hidden hidden solid hidden; border-color: transparent; font-weight: bold}
nav a:hover {color: gray; border-color: darkgray;}
article {width: 700px; background: white; float: left; padding: 10px;}
aside {width: 1200px; background: aqua; float: right;}
footer {float: bottom; width: 850px; height: 50px;padding: 20px 0px 0px 0px; background: black; color: white; clear: both; text-align: center;}
|
|
코드 |
설명 |
|
.wrap |
본문 안에 사용된 영역을 묶어서 배경색, 여백 등을 지정 |
|
header |
헤더 부분의 배경색, 크기, 글자 정렬 등을 지정 |
|
a |
홈페이지 제목의 하이퍼링크의 밑줄을 없애고 검은색을 표현 |
|
nav a:hover |
마우스를 올렸을 때 글자색을 지정 |
|
nav |
내비게이션 영역의 크기, 배경색, 글자 정렬 등을 지정 |
|
nav a |
내비게이션 영역의 메뉴 글자들의 밑줄을 없애고 글자색 등 지정 |
|
article |
아티클 영역의 크기, 배경색, 글자 정렬 등을 지정 |
|
aside |
어사이드 영역의 크기, 배경색, 글자 정렬 등을 지정
옆의 SNS 링크 |
|
footer |
각주 영역의 크기, 배경색 글자 정렬 등을 지정 |
6. 지금까지 만들었던 파일을 모두 종합해서 나만의 홈페이지를 만들어 봅니다. 먼저 메인 페이지를 만들어 봅니다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>홈페이지 만들기</title>
<link rel="stylesheet" type="text/css" href="style_home.css">
</head>
<body>
<div class="wrap">
<header>
<h1><a href="08. Hellow, Homepage.html">Yuchae's Story</a></h1>
</header>
<nav>
<ul>
<li><a href="02. Hellow, About Me.html" target="main_area">나의 소개</a></li>
<li><a href="04. Hellow, Album.html" target="main_area">나의 앨범</a></li>
<li><a href="05. Hellow, HiperLink.html" target="main_area">하이퍼링크</a></li>
</ul>
</nav>
<article>
<iframe name="main_area" src="" seamless="false" align="center" width="700px" height="600px" frameborder="0px" scrolling="no"></iframe>
</article>
<aside>
<table hidden="440px">
<tr>
<p align="center">
<br>
<a href="http://facebook.com">페이스북</a><br><br>
<a href="http://twiter.com">트위터</a><br><br>
<a href="http://blog.naver.com">블로그</a><br><br>
<a href="http://instargram.com">인스타그램</a><br><br>
</p>
</tr>
</table>
</aside>
<footer>
::: Contact us : 0000@gmail.com :::
</footer>
</div>
</body>
</html>
|
|
속성 |
설명 |
|
<div class="wrap"> </div> |
header, article과 같은 하위 영역을 하나로 묶어 줍니다. |
|
<nav> </nav> |
메뉴 부분을 각 페이지로 링크 |
|
<ifram> </ifram> |
위의 메뉴에서 링크된 웹 페이지들이 이곳 영역에 불러와 나타납니다. name="main_area"와 위의 target="main_area"와 연결됩니다. |
|
<footer> </footer> |
저작권 정보, 제작자 정보 등을 넣어 줍니다. |