인프런 커뮤니티 질문&답변

My own life

작성한 질문수

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

4. 세로 2컬럼 와이어프레임(C1~C4) - 보더를 사용해서 HTML+CSS 구조만들기

선생님 제거 좀 이상한데요 ㅠㅠ 푸터가 안나와요 ㅠㅠ

작성

349

<!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;
}