-
카테고리
-
세부 분야
자격증 (디자인)
-
해결 여부
미해결
선생님 제거 좀 이상한데요 ㅠㅠ 푸터가 안나와요 ㅠㅠ
21.08.01 13:27 작성 조회수 187
1
<!Doctype html>
<html lang="ko">
<head>
<title>레이아웃 세로</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="left">
<header>
<div class="header-logo"></div>
<div class="navi"></div>
</header>
</div><!--left-->
<div class="right">
<div class="slide">
<div></div>
</div><!--slide-->
<div class="items">
<div class="news"></div>
<div class="banner"></div>
<div class="shortcut"></div>
</div><!--items-->
</div><!--right-->
<footer>
<div class="footer-logo"></div>
<div class="copyright"></div>
</footer>
</div><!--container-->
</body>
</html>
css는요
.container{
width:1000px;
overflow:hidden;
}
.container > div{
/*border:1px solid blue;*/
height:800px;
float:left;
box-sizing:border-box;
}
.left{
width:200px;
}
.right{
width:800px;
}
header{}
header > div{
border:1px solid red;
}
.header-logo{
height:100px;
}
.navi{
height: 400px;
}
.slide{}
.slide>div{
border:1px solid green;
height:350px;
}
.items{
overflow: hidden;
}
.items > div{
border:1px solid black;
height:200px;
float:left;
box-sizing:border-box;
/*해도 안올라감 .container > div에 left에 border:1px solid blue;가 있기때문이다.*/
}
.news{
width:300px;
}
.banner{
width:250px;
}
.shortcut{
width:250px;
}
footer{overflow:hidden;}
footer > div{
border:1px solid pink;
height:100px;
float:left;
box-sizing:border-box;
}
.footer-logo{
width:200px;
}
.copyright{
width:600px;
}
.copyright div{
border:1px solid black;
}
[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
4. 세로 2컬럼 와이어프레임(C1~C4) - 보더를 사용해서 HTML+CSS 구조만들기
강의실 바로가기
답변을 작성해보세요.
1
코딩웍스(Coding Works)
지식공유자2021.08.01
<footer>...</footer> 가 <div class="right">...</div> 내부에 있어야 하는데 <div class="right">...</div> 외부에 있어서 안나와요. footer에 보더를 그려보시면 확실히 아실거에요.
답변 1