-
안녕하세요
제로이즈 입니다.
제로이즈의 투데이 스터디
프로젝트 리슨02 메인 레이아웃 만들기 이여서 시작 하겠습니다.
오늘 시작 하기 전에 바로 하단에 있는 소스를 저번 시간에 만드신 index.php 파일에 덮어주시고 저장하세요!
<!DOCTYPE html><!-- 웹 문서 유형 선언 (html로 선언) -->
<html> <!-- html 문서 선언 시작 //-->
<head> <!-- <head>요소 선언 시작 (메타정보값을 포함) //-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>웹사이트 만들기 - 메인</title> <!-- <title>요소 선언 하고 </title>요소로 선언을 종료 함(문서의 타이틀을 포함) -->
</head> <!--// 메타정보 선언 종료 -->
<!-- 내부 스타일 정의 시작 <style>요소로 시작 선언하고 </style>요소로 선언을 종료 함 //-->
<style>
/*** 기본 스타일 정의 ***/
html, body { /* 기본 문서 요서 정의 */
margin:0; /* 기본 문서의 외부 공백 설정 값 */
padding:0; /* 기본 문서의 내부 공백 설정 값 */
border:0; /* 기본 문서의 선(두께) 설정 값 */
font-size:12px; /* 기본 문서의 기본 폰트사이즈 설정 값 */
font:'돋움',Arial, Helvetica, sans-serif; /* 기본 문서의 기본 폰트 값 */
background-color:#f1f1f1; /* 기본 문서의 배경색 값 (HEX값 표기 흰색) */
}
.wrep { /* 공통으로 사용할 클래스 선택자 설정 */
width:1024px; /* 공통으로 사용할 넓이 설정 */
margin:0 auto; /* 클래서 선택자의 태그 정렬방식 중앙 설정 */
}/*** 레이아웃 스타일 정의 ***/
#conteiner {} /* 전체 레이아웃 태그를 담고 있을 아이디 선택자 설정 (id 선택자는 고유해야 함) *//*** 헤더 영역 스타일 정의 ***/
#header { /* 헤더 아이디 선택자 설정 */
width:100%; /* 헤더 영역 넓이 설정(100%: 브라우저의 전체 퍼센트로 넓이 지정) */
height:100px; /* 헤더 영역 높이 설정 (100px: 브라우저상의 픽셀로 높이 지정) */
background-color:#fff; /* 헤더 영역 배경색 지정(흰색) */
}
.logo { /* 로고 클래스 선택자 설정 */
width:200px; /* 로고 영역의 넓이 값 설정 (넓이 200px 고정값) */
height:auto; /* 로고 영역의 높이 값 일단 자동으로 설정 (디자인 방식에 따라 조정 또는 삭제) */
float:left; /* 로고 영역의 DIV의 정렬 값 설정 */
}
.search { /* 검색박스 클래스 선택자 설정 */
width:500px; /* 검색박스 넓이 설정 (고정 넓이 500픽셀 지정) */
}
.topmenu {
width:100%;
height:34px;
display:block;
}/* 콘텐츠 영역 스타일 */
#contents {
width:100%;
min-height:500px;
}/* 푸터 영역 스타일 */
#footer {
width:100%;
height:100px;
}
</style>
<!--// 내부 스타일 정의 종료 -->
<body> <!-- html 웹상에 보이는 문서 영역 시작 //-->
<!-- 콘테이너 영역 시작 // -->
<div id="conteiner">
<!-- 헤더 영역 //-->
<div id="header">
<div class="wrep">
<div class="logo">로고</div>
<div class="search">검색</div>
</div>
<div class="topmenu">상단 메뉴</div>
</div>
<!--// 헤더 영역 끝 -->
<!-- 콘텐츠 영역 시작 -->
<div id="contents">
<div class="wrep">
콘텐츠 영역
</div>
</div>
<!--// 콘텐츠 영역 끝 -->
<!-- 푸터 영역 시작 //-->
<div id="footer">
<div class="wrep">
푸터영역
</div>
</div>
<!--// 푸터 영역 끝 -->
</div>
<!--// 콘테이너 영역 끝 -->
</body> <!--// html 웹상에 보이는 문서 영역 종료 -->
</html> <!--// html 문서 종료 -->초보자 분들을 위해 모든 소스에 설명을 달아 두었습니다.
-