인프런 커뮤니티 질문&답변
작성한 질문수
레이아웃 만들기 B형 관련 질문 드립니다.
작성
·
217
1
footer-inner 부분의 임시로 만든 border가
아래 사진처럼 items 부분까지 영역을 잡아 버립니다.
간단한 것을 질문 드려 죄송합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="header-inner">
<header>
<div class="header-logo"></div>
<div class="navi"></div>
</header>
</div>
<div class="content-inner">
<div class="slide">
<div></div>
</div>
<div class="items">
<div class="news"></div>
<div class="banner"></div>
<div class="shortcut"></div>
</div>
</div>
<div class="footer-inner">
<footer>
<div class="footer-logo"></div>
<div class="copyright"></div>
</footer>
</div>
</div>
</body>
</html>
=====================================================
style.css
.container{}
.header-inner{
border: 1px solid red;
}
header{
width: 1200px;
height: 100px;
margin: auto;
}
header > div{
border: 1px solid blue;
height: 100px;
}
.header-logo{
width: 200px;
float: left;
}
.navi{
width: 600px;
float: right;
}
.content-inner{
}
.slide{
width: 1200px;
margin: auto;
}
.slide > div{
border: 1px solid green;
height: 300px;
}
.items{
width: 1200px;
margin: auto;
}
.items > div{
border: 1px solid pink;
height: 200px;
float: left;
box-sizing: border-box;
}
.news{
width: 500px;
}
.banner{
width: 350px;
}
.shortcut{
width: 350px;
}
.footer-inner{
border: 1px solid red;
}
footer{
width: 1200px;
margin: auto;
overflow: hidden;
}
footer > div{
border: 1px solid green;
height: 100px;
float: left;
box-sizing: border-box;
}
.footer-logo{
width: 200px;
}
.copyright{
width: 1000px;
}
퀴즈
웹 디자인 실기 시험에서 레이아웃 제작이 중요한 이유는 무엇일까요?
디자인 요소 배치에만 영향을 주기 때문
실기 시험의 시작점이며 다른 모듈 진행에 필수적이기 때문
특정 브라우저 호환성 문제 해결에만 필요하기 때문
복잡한 스크립트 구현보다 어렵기 때문
답변 1
1
.items에 overflow: hidden주셔야 해요.
궁금한 거 있는 거 질문하는 건 당연한 겁니다. 미안해 하거나 하실 필요 없어요~