[CSS] 기초 7
HTML
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>홈페이지제작</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- 1. 전체 레이아웃 생성 -->
<div id="layout">
<!-- 2. 레이아웃 틀 나누기 -->
<div id="top">
<!-- 왼쪽 상단 이미지 및 글자 설정 -->
<div id="top_left">
<img id="logo" src="cat.jpg">
<h1 id="logo_text">이미지 갤러리</h1>
</div>
<!-- 상단 중간 배너 설정 -->
<div id="top_mid">
<img id="top_banner" src="banner_635x120.jpg">
</div>
<nav>
<a href="#">개</a>
<a href="#">고양이</a>
<a href="#">토끼</a>
</nav>
</div>
<!-- 왼쪽 레이아웃 배치 및 설정 -->
<div id="left">
<div id="left_con">
<!-- 로그인 -->
<div id="login">
<form action="#" method="GET">
<fieldset>
<legend>Login</legend>
<br>
<label for="i_id">ID</label>
<input type="text" id="i_id" maxlength="10">
<br>
<label for="i_pw">PW</label>
<input type="password" id="i_pw" maxlength="10">
<br>
<input type="submit" value="Login">
<input type="button" value="SignUp">
</fieldset>
</form>
</div>
<!-- 게시판 -->
<div id="board">
<p class="board_title">Board</p>
<ul>
<li><a href="#">자유게시판</a></li>
<li><a href="#">뉴스</a></li>
<li><a href="#">버그/오류 제보 게시판</a></li>
</ul>
</div>
<!-- 자랑거리 게시판 -->
<div id="proud">
<p class="board_title">자랑하기</p>
<ul>
<li><a href="#">우리 개는요.</a></li>
<li><a href="#">우리 고양이는요.</a></li>
<li><a href="#">우리 토끼는요.</a></li>
</ul>
</div>
</div>
</div>
<!-- 메인 게시판 -->
<div id="mid">
<article>
<img id="rabbit" src="rabbit.jpg">
<img id="rabbit" src="rabbit.jpg">
<img id="rabbit" src="rabbit.jpg">
<img id="rabbit" src="rabbit.jpg">
<img id="rabbit" src="rabbit.jpg">
<img id="rabbit" src="rabbit.jpg">
<img id="rabbit" src="rabbit.jpg">
<img id="rabbit" src="rabbit.jpg">
<img id="rabbit" src="rabbit.jpg">
<img id="rabbit" src="rabbit.jpg">
<img id="rabbit" src="rabbit.jpg">
<img id="rabbit" src="rabbit.jpg">
<img id="rabbit" src="rabbit.jpg">
<img id="rabbit" src="rabbit.jpg">
<img id="rabbit" src="rabbit.jpg">
<img id="rabbit" src="rabbit.jpg">
<img id="rabbit" src="rabbit.jpg">
</article>
</div>
<!-- 오른쪽 광고 -->
<div id="right">
<img id="right_banner" src="레플나라_470x150.gif">
<img id="right_banner" src="레플나라_470x150.gif">
<img id="right_banner" src="레플나라_470x150.gif">
</div>
<!-- 하단 회사명 및 정보 입력 -->
<div id="bottom">
<div id="bottom_bar"></div>
<div id="bottom_con">
<h2>(주)307 시스템</h2>
<ul>
<li>COMPANY : (주)307시스템 , OWNER : 안성모</li>
<li>ADDRESS : [11111] 경기도 성남시 ㅇㅇ구 ㅇㅇ동 111-111</li>
<li>TEL : 02) 1111-2222 , FAX : 02) 1111-2222, E-MAIL : aaa@aaa.co.kr</li>
<li>COPYRIGHT 2007 307 system co. All Rights Reserved.</li>
</ul>
</div>
</div>
</body>
</html>
CSS
*{
/* 글씨체 지정 */
font-style: "굴림";
}
body{
background : transparent no-repeat center top;
background-attachment: scorll;
background-image: url('https://upload3.inven.co.kr/upload/2021/02/25/bbs/i15745445892.jpg');
}
#layout{
width : 1600px;
margin : 0 auto;
}
#top{
width : 1600px;
height : 200px;
background-color: red;
position: relative;
}
/* 왼쪽 상단 이미지 위치 설정 */
#top_left{
position : absolute;
left : 20px;
top : 20px;
}
/* 이미지 크기 설정 */
#logo{
width : 100px;
margin : 10px;
float : left;
}
/* 이미지 옆 텍스트 위치 및 크기 조정 */
#logo_text{
width : auto;
margin-top : 40px;
float : left;
font-size : 2em;
font-weight: 800;
color : sienna;
}
/* 상단 배너 이미지 위치 조정 */
#top_mid{
width : 1600px;
height : 120px;
background-color: pink;
text-align: center;
}
/* 배너 마진 설정 */
#top_banner{
margin-left: auto;
margin-right: auto;
}
/* nav태그 위치 설정 */
nav{
width : 600px;
height : 22px;
background-color: powderblue;
position: absolute;
bottom : 0px;
left : 0px;
right : 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
padding: 6px;
text-align: center;
}
#left{
width : 200px;
height : 800px;
background-color: orange;
float : left;
}
#left_con{
width : 180px;
margin : 10px;
background-color: pink;
}
#login{
background-color: red;
padding: 10px;
}
#i_id{
width : 80px;
}
#i_pw{
width : 80px;
}
#board{
background-color: yellow;
margin-top: 20px;
}
#proud{
background-color: green;
margin-top : 20px;
}
#mid{
width : 1200px;
height : 800px;
background-color: yellow;
float : left;
}
img#rabbit{
width : 100px;
margin : 10px;
position: relative;
}
#right{
width : 200px;
height:800px;
background-color: green;
float : left;
}
#right_banner{
display:block;
width:160px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
#bottom{
width : 1600px;
height : 140;
background-color: #EEEEEE;
position : fixed;
bottom : 0px;
}
#bottom_bar{
width : 1600px;
height : 30px;
}