HTML 페이지 구획별 다단 처리시 여백이 생깁니다.
조회수 568회
안녕하세요? 오랜만에 다시 질문글을 드립니다.
이번 질문내용은 HTML로 시멘틱스를 활용한 다단 처리중 생긴 문제 입니다.
이미지를 보시면 brand라 적힌 청록색 구역은 header 영역이고, main1 과 sub1,2 가 적힌 주황색은 nav 영역, 이미지 영역은 main 영역(section 영역)입니다.
제가 원하는것은 헤더 영역과 메인영역, 네비 영역을 확대해서 보시면 흰색 공간이 보이실텐데, 이 부자연스러운 경계 영역을 제거하고 싶습니다.
제 생각으론 nav, main 태그의 border관련 CSS를 세팅해줘야 사라질것 같은데, border나 border-style 값을 none으로 처리해도 저 흰색 공백이 사라지질 않는게 문제입니다.
혹시 제 생각이 맞는데 다른 속성을 바꿔야 되는건지, 혹은 아예 다른 방법으로 해결해야하는지 알려주실수 있을까요?
이하는 제 코드 원문입니다.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>test null</title>
<style>
header {
/*메뉴 fix css 영역(헤더 영역 설정)*/
position: fixed;
top: 0;
width:100%;
left: 0;
right: 0;
height: 75px;
padding: 1rem;
color: white;
background: teal;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}
#nav {
list-style: none;
height: 60px;
padding: 5px 1px;
margin: 0;
}
#nav li {
float: left;
position: relative;
margin:5px 30px;
padding:0;
}
#nav li a {
display:block;
padding:7px 8px;
margin:0;
}
#nav li:hover > a {
background: #ffcab2;
color: black;
margin: 0;
padding: 5px;
}
#nav ul{
list-style: none;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 40px;
width: 105px;
background: #ffcab2;
text-align: center;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
font-size: 10px;
}
#nav ul li:hover a{
font-weight:bold;
}
#nav ul{
list-stlye:none;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 40px;
width: 105px;
text-align: center;
opacity: 0;
}
#nav li:hover ul{
opacity: 1;
}
#nav li:hover ul li{
height: 35px;
overflow: visible;
padding: 0;
}
h1, p {
margin: 0;
}
main {
height: 100%;
}
body {
padding-top: 75px;
background: #EEE;
}
body, html {
height: 200%;
}
* {
box-sizing: border-box;
}
/*단 나누기(헤더를 제외 영역)*/
.nav{
background-color: orange;
color: white;
width: 9%;
height: 90%;
float: left;
font-weight: bold;
}
section {
width:200px;
text-align:left;
float:left;
padding:10px;
}
footer {
background-color:#FFCC00;
height:100px;
clear:both;
}
</style>
</head>
<body>
<header>
<h1>Brand</h1>
<ul id="nav">
<li>
<a href="#">main 1</a>
<ul>
<li><a href="#">sub 1</a></li>
<li><a href="#">sub 2</a></li>
</ul>
</li>
<li>
<a href="#">main 2</a>
<ul>
<li><a href="#">sub 1</a></li>
<li><a href="#">sub 2</a></li>
<li><a href="#">sub 3</a></li>
</ul>
</li>
<li>
<a href="#">main 3</a>
<ul>
<li><a href="#">sub 1</a></li>
<li><a href="#">sub 2</a></li>
</ul>
</li>
</ul>
</header>
<nav class="nav">
<h1> main 1 </h1>
<ul>
<li><a href="#">sub 1</a></li>
<li><a href="#">sub 2</a></li>
</ul>
</nav>
<main>
<img src="img_save.png" width="700px" height="700px" />
<img src="img_save1.png" width="700px" height="700px" />
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
</main>
<nav>nav</nav>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat odio molestias harum sint? Explicabo, laboriosam.
Aliquam doloremque nulla dolor quod quia repudiandae voluptas dolorem! Iusto ipsam architecto beatae perferendis magnam.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore natus eveniet, quis veniam porro dignissimos,
animi quia autem consequuntur dicta fugiat ipsum magni corrupti tenetur, eos minima id illum non.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, corporis.
Corrupti fugit ipsum ut optio et? Dicta sapiente consequuntur cum, nihil optio asperiores.
Nihil, magnam iusto! Velit impedit provident distinctio. lorem
</div>
<footer>footer</footer>
</body>
</html>
ps : HTML로 기본적인 웹형식 표현하는게 생각보다 어렵네요 ㅠㅠ
댓글 입력