-
홈페이지를 만들기 위해 제일 먼저 해야 할일은 바로 기획입니다.
제 홈페이지를 만들어 보도록 하겠습니다.
1. 기획
기본적으로 홈페이지 구성을 할때 헤더/메뉴/본문/푸터 이렇게 4등분을 하게 됩니다.
제 홈페이지를 보면 아래의 이미지 처럼 나누어져 있습니다.
그럼 제 홈페이지 기본구성을 코딩을 해 보도록 하겠습니다.1-1. 기본 코딩
HTML 파일을 만들겠습니다.
저는 드림위버를 통해 코딩을 하겠습니다.
드림위버를 통해 HTML 새문서를 만들면 다음과 같은 코딩이 나옵니다.
예제.1)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
</head><body>
</body>
</html>HTML은 위와 같이 기본 코딩으로 시작 합니다.
여기서 알아 두셔야 할것은 "<html> </html>"로 끝난다는것을 알아야 하며, "<html> </html>" 안으로 "<head> </head>"와"<body> </body>"로 구성되어 있다는 것을 알 수 있습니다.
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" 이부분은 웹표준화 선인 부분입니다.
웹 기술의 진보에 따라 HTML도 변화 되는데, 변화에 따라 브라우져가 HTML을 해석하는 방식도 변화가 생겼다.
이를 극복하기 위해서 브라우져에게 해당 HTML이 어떤 표준에 따른 것인지를 알려주는 것을 DTD(Document Type Definition)이라고 한다.
DTD는 문서의 제일 위에 위치한다.body 태그란 웹페이지의 내용들이 위치하는 태그다. 주로 브라우저의 분문에 표시되는 항목들이 나타난다. <head> 태그가 문서의 내용이 아니라, 그 문서의 제목이나 키워드와 같은 요소들이 위치하는 것과 대비된다.
<head> 태그는 문서를 설명하는 태그들이 위치하는 태그다. <body> 태그가 웹페이지가 담아내려는 정보 그 자체라면 head 태그는 body 태그의 정보를 설명하는 메타 정보라고 할 수 있다.
<meta>란 문서에 대한 정보를 기술하는 태그 입니다.
<head>태그 안에 표현 합니다. <meta>태그 안에는 'name'과 'content' 두개의 속성이 있다.
이 부분은 검색엔진에서 이 부분을 중심으로 데이터를 검색한다고 보면 됩니다.
<title>태그는 문서의 제목을 정의하여, 브라우져의 타이틀바에 출력하며, 문서를 찾는데 도움을 준다. 검색엔진에서 중요한 정보로 취급된다.
1-2. 본문코딩
지금까지 전체적인 코딩 부분을 보았다면 이제 정말 세부적인 브라우저에 보여지는 부분을 코딩을 하기로 하겠습니다.
예제.2)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제로이즈 홈페이지 메인샘플 1</title>
</head><body>
<!--- 헤더 --->
<div id="header">
<h3>ZEROIS</h3>
</div><!--- 헤더 --->
<!--- 메뉴 --->
<div id="menu">
<ul>
<li>HOME</li>
<li>MENU01</li>
<li>MENU02</li>
<li>MENU03</li>
<li>MENU04</li>
<li>MENU05</li>
</ul>
</div><!--- 메뉴 --->
<!--- 본문 --->
<div id="content">
<div class="main_bn">
제로이즈의 멋진 홈페이지 입니다.
</div>
<div class="site_map">
사이트맵 입니다.
</div>
</div><!--- 본문 --->
<!--- 푸터 --->
<div id="footer">
Copyrights © 2013 zerois.co.kr All Rights Reserved. Design by zerois
</div><!--- 푸터 --->
</body>
</html>위와 같이 코딩후 저장하고 브라우저에 불러오면 아래와 같이 보여 줍니다.
이상하죠..^^;왜냐 하면 HTML은 좀더 정재해서 말하면 웹상의 문서편집이라 보시면 됩니다.
그러니 그냥 코딩만 해서는 디자인적인 요서는 볼 수가 없는 것이지요
그래서 CSS를 통해 기본적인 디자인을 해주고 포토삽으로 이쁘게 다듬어야 이쁜 홈페이지가 만들어 진다고 보시면 됩니다.
그럼 오늘은 여기 까지 강좌를 하고 다음시간에는 CSS를 통해 기본적인 레이아웃을 잡아보도록 하겠습니다.
오늘 배우신 내용은 샘플파일은 다운로드 받아서 확인 후 브라우저로 실행해 보세요!!
- (sample01.html) Down (0) / 857B
-