css 파일 내에 main.css 를 생성
=============================코드=============================
@charset "UTF-8";
/* 문서 전체 영역에 대한 디자인 적용 */
body {
font-size: 14px;
font-family: 맑은고딕, 명조체;
}
/* 전체 div 태그에 대한 디자인 적용 */
#container {
width: 950px; /* 문서 전체 가로폭 크기 설정 */
margin: 0 auto;
background-color: #FFF;
border: 1px solid #e8e2ae;
}
/* header 영역 디자인 적용 */
#head {
height: 208px;
margin-top: 0;
background-image: url("../img/bg.jpg"); /* ..은 img 파일의 위로 가라는 뜻(상위폴더로 가라!) */
background-repeat: no-repeat;
text-align: center;
}
/* header 영역 중에서 로그인 영역에 대한 디자인 적용 */
#login {
float: right;
margin: -20px 20px 0 0;
font-size: 12px;
word-spacing: 15px; /* 글자와 글자 사이의 간격 */
text-shadow: 1px 2px 2px #666;
}
/* 로그인 영역의 a링크 태그에 대한 디자인 적용 */
#login a {
text-decoration: none; /* 글자의 밑줄 없애기 */
color: #333;
}
#login a:hover {
color: #F90; /* 마우스 올려놨을 때 색 변하게 하기 */
}
/* header 영역의 제목과 부제목 태그 영역 디자인 적용 */
header hgroup {
position: relative; /* 자신을 기준으로 함 */
top: 60px;
left: 180px;
}
/* header 영역의 주제목 디자인 적용 */
header h1 {
font-size: 2.5em;
color: #F2CB78;
text-shadow: 1px 2px 2px #000;
}
/* header 영역의 부제목 디자인 적용 */
header h2 {
font-size: 2.5em;
color: #e18048;
text-shadow: 0px 1px 1px #000;
}
/* 네비게이션 영역 디자인 적용 */
#navi {
background-color: #C07F5A;
margin-top: -15px;
width: 950px;
height: 50px;
}
#navi ul {
height: 40px;
padding-top: 10px; /* 안쪽 상단 여백 */
}
#navi ul li {
display: inline-block;
font-size: 17px;
}
#navi a {
padding: 10px 120px 5px 60px;
color: #FFF;
text-decoration: none;
}
/* a 태그에 마우스 오버 시, 클릭 시, 포커스가 올라갔을 때 */
#navi a:hover, #navi a:active, #navi a:focus {
text-shadow: 0px 2px 2px #000;
color: #FC0;
}
/* section 영역 디자인 적용 */
#content {
background-color: #FFF;
padding-top: 5px;
padding-left: 10px;
width: 720px;
float: left;
}
#content article p {
text-align: justify; /* 글자를 양쪽으로 균등하게 정렬 */
}
/* aside 영역 디자인 적용 */
#sidebar {
float: right;
background-color: #E4DA7E;
width: 200px;
height: 480px;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
}
#sidebar img {
margin-left: 30px;
border: 1px solid #ccc;
opacity: 0.5; /* 불투명도 */
text-align: center;
}
#sidebar img:hover {
border: 1px solid #000;
opacity: 1;
}
/* footer영역 디자인 적용 */
#foot {
padding: 5px 0;
background-color: #997000;
color: #FFF;
text-align: center;
font-size: 15px;
clear: both; /* float 속성 해제 */
}html 파일
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>데카르트 홈페이지</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="container">
<header id="head"> <!-- 웹 문서의 상단 영역 -->
<div id="login">
<a href="./index.html">홈</a>
<a href="#" onclick="login_window()">로그인</a>
<a href="#" onclick="join_window()">회원가입</a>
</div> <!-- id="login" end -->
<hgroup>
<h1>데카르트, 서양 근대철학의 창시자</h1>
<h2>Rene, Decartes, 1596 ~ 1650</h2>
</hgroup>
</header>
<!-- 웹 문서의 네비게이션 영역 - 메뉴가 설정되는 영역 -->
<nav id="navi">
<ul>
<li> <a href="birth/birth.html">탄 생</a> </li>
<li> <a href="writing/writing.html">저 서</a> </li>
<li> <a href="philosophy/philosophy.html">철 학</a> </li>
<li> <a href="saying/saying.html">명 언</a> </li>
</ul>
</nav>
<!-- 웹 문서의 영역 설정하는 태그 - section 태그는 여러번 사용이 가능함 -->
<section id="content">
<h2>데카르트 소개</h2>
<!-- section 영역의 본문 태그 -->
<article>
<h3>"나는 생각한다, 고로 존재한다." "그러나 나의 존재적 근거는 신"</h3>
<p>"화이트 헤드가 말한 것처럼 유럽 철학이 플라톤에 대한 각주라면,
근대 유럽 철학은 데카르트에 대한 각주다"</p>
<p>근대는 무엇에서든 확실하고 단단한 토대를 요구하는 시대다.</p>
<p>내가 알고 있다고 여기는 것, 내가 믿고 있는 것 등
그 어떤 것에서도 분명하고 확실한 근거를 요구한다.이러한 </p>
<p>요구가 바로 근대적 합리정신이며, 데카르트는 근대의 철학적 출발점이었다.
요컨데, "나는 생각한다. 고로</p>
<p> 존재한다." 데카르트는 이 명제야말로 다른 모든 것의 근거가 되는
가장 기초적인 명제라고 보았다.</p>
<p>데카르트는 이 명제를 "신은 존재한다."는 명제와 결합시킨다.
<div>
<img src="img/bg2.png" width="710" height="195" alt="오른쪽 탁자에 있는 여왕의 오른쪽 인물이 데카르트">
</div>
</article>
</section>
<!-- 문서의 보조 내용(광고, 알림) -->
<aside id="sidebar">
<h3>저서 구입</h3>
<p>저서 구입을 원하는 분들은 010-1111-1111로 연락 주시기 바랍니다.</p>
<img src="img/book1.png" width="130" height="160">
<img src="img/book2.png" width="130" height="160">
</aside>
<!-- 문서의 하단 영역 -->
<footer id="foot">
<p>글 : 임정훈 / 저술가, 번역가</p>
<address>E-Mail : jhehun@gmail.com</address>
<p>Copyright © All right reserved</p>
</footer>
</div> <!-- id="container" end -->
</body>
</html>=============================실행=============================
login
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/login.css">
</head>
<body>
<div id="login_wrap">
<h2 class="login_title">회원 로그인</h2>
<form>
<table class="login_t">
<tr>
<th>아이디</th>
<td>
<input type="text" class="input_box" size="15">
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<input type="password" class="input_box" size="15">
</td>
</tr>
</table>
<div id="login_menu">
<input type="submit" value="로그인" class="login_b">
<input type="reset" value="취소" class="login_b">
</div> <!-- id="login_menu" end -->
</form>
</div> <!-- id="login_wrap" end -->
</body>
</html>=============================실행=============================
