🤍 전 강의 25% 할인 중 🤍

2024년 상반기를 돌아보고 하반기에도 함께 성장해요!
인프런이 준비한 25% 할인 받으러 가기 >>

  • 카테고리

    질문 & 답변
  • 세부 분야

    자격증 (디자인)

  • 해결 여부

    미해결

레이아웃에 푸터가 안떠요.

20.12.04 08:46 작성 조회수 91

1

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="css/style5.css">

</head>

<body>

    

    <div class="container">

        <header>

            <article class="logo"></article>

            <article class="navi"></article>

        </header>

        <section class="box1"></section>

        <section class="box2">

        <section>

            <article class="sub1"></article>

            <article class="sub2"></article>

            <article class="sub3"></article>

        </section>

        <footer></footer>

    </div>

    

</body>

</html>

-------------------------------------------------

.container {

    border:1px solid red;

    width:1200px;

    margin:auto;

}

header{

    background-color:skyblue;

    overflow:hidden;

}

header article {

    background-color:gray;

    width:300px;

    height:100px;

}

.logo {

    float:left;

}

.navi{

    float:right;

}

.box1{

    background-color:yellowgreen;

    height:300px;

}

.box2{

    background-color:greenyellow;

    overflow:hidden;

}

.box2 article{

    width:33.33333%;

    height:300px;

    float:left;

}

.sub1{background-color:darkgray;}

.sub2{background-color:gainsboro;}

.sub3{background-color:lightgray;}

footer {

    background-color: skyblue;

    height:100px;

}

css와 html 소스구요. 똑같이 따라했는데 푸터가 안떠요. 왜그렇죠?

답변 1

답변을 작성해보세요.

1

아래 코드가 빠져 있습니다.

section {

  overflow: hidden;

}

채널톡 아이콘