- 어제 만들었던 웹페이지의 레이아웃 수정
- 테이블과 br태그를 사용하여 삽입했던 이미지를 전부 div태그로 수정하였다.
- navigator부분의 메뉴 텍스트를 ol태그를 이용하여 구성하였다.
<body>
<div>
<div id="header">
<div id="h-1">
<img src="./css/img/logo.jpg" alt="">
</div>
<div id="h-2">
<img src="./css/img/mainlogo.jpg" alt="">
</div>
<div id="h-3">
</div>
</div>
<div id="navigator">
<ol id="menu">
<li><a href="">Home</a></li>
<li><a href="">Profile</a></li>
<li><a href="">Board</a></li>
<li><a href="">Contact</a></li>
</ol>
</div>
<div id="contents">
<div id="c1">
<center> <img src="./css/img/left_img.jpg"></center>
</div>
<div id="c2">
<div id="c2_top">
<div class="c2_right">
<img src="./css/img/main_img1.jpg" class="c2img" alt="">
<div class="imgbottomtext">
나무를 심는 사람들</div>
</div>
<div class="c2_left">
<img src="./css/img/main_img2.jpg" class="c2img"alt="">
<div class="imgbottomtext">
아이들에게 녹색 미래를</div>
</div>
</div>
<div id="c2_bottom">
<div class="c2_right">
<img src="./css/img/main_img3.jpg" class="c2img" alt="">
<div class="imgbottomtext">
설악산을 살리는 길</div>
</div>
<div class="c2_left">
<img src="./css/img/main_img4.jpg" class="c2img" alt="">
<div class="imgbottomtext">
사라지는 북금곰들 </div>
</div>
</div>
</div>
<div id="c3">
<div id="con-login">
<div id="log-header">
<div id="idpw">
<div id="id">
<input type="text" class="login" name="user-id" placeholder="아이디를 입력하세요">
</div>
<div id="pw">
<input type="password" class="login" name="user-pw" placeholder="비밀번호를 입력하세요">
</div>
</div>
<div id="buttom">
<input type="submit" value="로그인">
</div>
</div>
<div id="log-footer" >
<a href="">회원가입</a>
<a href="">ID/PW찾기</a>
</div>
</div>
<div id="con-center">
<img src="./css/img/right_img.jpg" alt="" width="100%">
</div>
<div id="con-bottom"><img src="./css/img/me_chat.jpg" width="100%">
</div>
</div>
</div>
<div id="footer">
<img src="./css/img/footer.JPG"alt="">
</div>
</div>
<div>
</body>html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*여기까지 css rest */
div {
margin: 0 auto;
--border:1px solid black;
width: 1000px;}
#header{height: 100px;}
#content{height: 500px;}
#footer{height: 100px;}
#left{width: 15%;
height: 100%;
background-color: aqua;
display: inline-block;
}
img{
width: 100%;
height: 100%;
}
#contents{
height :500px;
}
#h-1{
height: 100%;
width: 20%;
float: left;
}
#h-2{
height: 100%;
width: 60%;
float: left;
}
#h-3{
height: 100%;
width: 20%;
float: left;
}
#c1{
padding-top: 5px;
height: 100%;
width: 15%;
float: left;
}
#c2{
height: 100%;
width: 60%;
float: left;
}
#c3{
height: 100%;
width: 25%;
float: left;
}
/*네이게이션 바 재 구성 */
#navigator{
height: 30px;
width: 100%;
}
#menu{
margin: 0%;
padding: 0%;
height: 100%;
overflow: hidden;
/*영역밖으로 나간 컨텐츠가 보이지 않게 하는것 */
}
#menu li{
width: 25%;
height: 100%;
text-align: center;
list-style-type: none;
float: left;
line-height: 30px;
background-color: rgb(100, 173, 21, 8.7);
}
a{text-decoration: none;
}
li a:link{
color: white;
}
li a:visited{
color:white;
}
/*link시 색상변하는것 없앰 */
#c3>div{
margin-top: 10px;
margin-bottom: 10px;
width: 100%;}
#log-header{
height: 60px;
width: 250px;
}
#idpw{
height: 100%;
width: 70%;
float: left;
}
#buttom{
height: 100%;
width: 30%;
float:left;
}
#id{
width:100%;
height: 50%;
}
#pw{
width:100%;
height: 50%;
}
.login{
width:95%;
height: 75%;
}
[type=submit]
{ width: 100%;
height: 100%;
}
#log-footer{
width: 100%;
height: 100%;
text-align : center;
}
#footer{
background-color: white;
}
#con-login{
height: 15%;
}
#con-center{
height: 50%;
}
#con-bottom{
height:25%
}
#c2_top{
width: 100%;
height: 50%;
}
#c2_bottom{
width: 100%;
height: 50%;
}
.c2_right{
width:50%;
height: 100%;
float: left;
align-content: center;
text-align: center;
}
.c2_left{
width:50%;
height: 100%;
float: left;
align-content: center;
text-align: center;
}
.c2img{
width: 97%;
height: 90%;
margin-top: 5px;
margin-bottom: 0px;
}
/*텍스트의 모든 것을 같이 넣음 */
.imgbottomtext{
float: left;
width: 100%;
}결과물
hello world