E유형 slide 높이 질문
675
작성한 질문수 9
E유형 수강중 궁금한점이 생겨 질문드립니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="main-content">
<div class="left">
<header>
<div class="header-logo"></div>
<div class="nav"></div>
<div class="spot-menu"></div>
</header>
</div>
<div class="center">
<div class="shortcut"></div>
<div class="news"></div>
<div class="gallery"></div>
<div class="banner"></div>
</div>
<div class="right">
<div class="slide-image"></div>
</div>
</div>
<footer>
<div class="footer-logo"></div>
<div class="footer-content">
<div class="footer-link"></div>
<div class="copyright"></div>
</div>
</footer>
</div>
</body>
</html>@charset "utf-8";
body {
margin: 0;
background: #fff;
color: #333;
}
a {
text-decoration: none;
color: inherit;
}
/* entire */
.container {}
.main-content {
display: flex;
}
.main-content > div {
/* height: 800px; */
border: 1px solid #000;
}
.left {
width: 200px;
}
.center {
width: 400px;
}
.right {
flex: 1;
}
/* header */
header {}
header > div {
border: 1px solid #000;
}
.header-logo {
height: 100px;
}
.nav {
height: 400px;
}
.spot-menu {
height: 50px;
}
/* items */
.center > div {
border: 1px solid #000;
}
.shortcut {
height: 150px;
}
.news {
height: 300px;
}
.gallery {
height: 300px;
}
.banner {
height: 150px;
}
/* slide */
.slide-image {
border: 1px solid red;
height: calc(100vh - 120px);
width: inherit;
}
/* footer */
footer {
display: flex;
}
footer > div {
border: 1px solid #000;
height: 120px;
}
.footer-logo {
width: 200px;
}
.footer-content {
flex: 1;
}
.footer-content > div {
height: 50%;
border: 1px solid #000;
box-sizing: border-box;
}
사진과 같이 슬라이드 밑에 120px 여백이 생기는데 혹시 어떤 부분을 수정해야 정상적으로 나올까요?
답변 2
0
아래 코드에서 높이를 많이 잡아서 그렇습니다.
.shortcut {
height: 150px;
}
.news {
height: 300px;
}
.gallery {
height: 300px;
}
.banner {
height: 150px;
}나중에 컨텐츠 넣으면서 높이가 줄어들면 슬라이드에 공백이 없어집니다.
컨텐츠 넣기 전에 공백 없어지는 부분을 확인하기 위해서 지금 높이를 줄여보세요.
.shortcut {
height: 150px;
}
.news {
height: 200px;
}
.gallery {
height: 200px;
}
.banner {
height: 150px;
}
-1
안녕하세요, 인프런 AI 인턴입니다. Cheon님.
질문 주신 내용은 슬라이드 이미지의 높이를 설정할 때 발생하는 여백 문제인데요. 이 문제는 보통 height: calc(100vh - 120px);의 계산식에서 발생할 수 있습니다. 이 계산식은 뷰포트의 전체 높이에서 120px을 뺀 값을 슬라이드 이미지의 높이로 사용하는 코드입니다. 슬라이드 밑에 여백이 생기는 이유는 다양한데, 몇 가지 해결 방법을 제시해드리겠습니다.
CSS Box Model 문제: 보통
box-sizing속성을 통해 패딩(border 포함)을 조절해야 하는데요,"box-sizing: border-box;"를 사용하면 패딩과 보더를 포함한 전체 크기를 설정할 수 있습니다.높이 설정 재확인:
100vh를 사용 시, 예기치 못한 스크롤바나 다른 요인에 의해 추가적인 빈 공간이 생길 수 있습니다. 이는 페이지 전체 높이(뷰포트 높이)에서 다른 요소들이 잘못 계산되어 동작하지 않을 때 발생할 수 있습니다.브라우저 관련 문제: 특정 브라우저에서 레이아웃 계산 오류가 발생할 수 있으므로, 다른 브라우저에서도 동일한 문제가 발생하는지 확인해 보시는 것도 좋습니다.
관련 질문과 해결 방법은 아래 링크에서 확인하실 수 있습니다:
- E타입 레이아웃: 레이아웃 설정 시 발생할 수 있는 스크롤바 문제의 해결 방법에 대한 답변입니다.
- E유형 레이아웃 관련 질문입니다..!: calc() 함수 사용 시 발생하는 문제와 스크롤바 관련 답변입니다.
위 내용을 확인해보시고 코드에서 조정해 보시면 도움이 될 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
해당 강의 PDF는 어디에 있나요?
1
56
2
2026 웹디자인개발기능사 실기 보는데 필요한 텍스트에디터는 무엇인가요?
1
92
2
예제파일
1
55
1
섹션10-77번강의 내 와이어프레임 pdf 자료 다운로드 어디서 하나요?
1
81
2
보더를 사용해 와이어프레임만드는 강의 html+css소스 다운로드 받을 수 있나요?
1
58
1
시험 시 슬라이드 작성 관련 문의
0
64
1
강의 질문 있습니다
1
69
1
시험 관련 문의
1
61
1
파워포인트 자료 다운로드 버튼 어디에 있나요?
1
55
1
브라우저 화면 줄일 시 빈 공간 발생
0
65
1
서브메뉴가 유지되지 못하고 사라지는데 무엇이 문제 일까요?
1
78
1
슬라이드 및 완성본 관련 사항
1
69
2
D유형 레이아웃 연습중인데 슬라이드 이미지 크기가 변하지 않습니다
1
90
3
B-4연습중인데 네비게이션의 a태그 두께가 이상하고 슬라이드 다운시 문제가 있습니다.
1
50
2
A2 연습중인데 메뉴 배경색과 서브메뉴 크기, 갤러리 그림 정리에 문제가 있습니다
1
68
2
A1 레이아웃 연습중인데 overflow: hidden이나 box-sizing: border-box;가 적용되지 않는 것 같습니다
1
55
2
레이어 팝업 '닫기' 가 안됩니다
1
62
1
공지사항과 갤러리 탭(안)구성 중 마우스 클릭시 색상변경이 안됩니다.
1
84
2
뷰티파이 설치 관련 문의
1
71
3
웹디자인 기능사 웹디자인개발기능사로 개편 되었는데 이 수업만 들어도 가능?
1
86
2
A유형~C유형 수험자 제공파일 어디서
1
73
1
A1 작업하는데 와이어프레임이 무너지고, hover일부가 적용 안되고 메뉴바가 슬라이드를 밀어냅니다. 탭메뉴도 작동하지 않습니다..
0
122
4
footer 높이 값
1
47
2
div 상하분배?가 안돼요
0
72
2