E유형 slide 높이 질문

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

E유형(HTML 전체 레이아웃 제작 with Flex) – E1

작성

657

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 여백이 생기는데 혹시 어떤 부분을 수정해야 정상적으로 나올까요?

HTML/CSS jquery 웹-디자인

답변 2

코딩웍스(Coding Works)

지식공유자

아래 코드에서 높이를 많이 잡아서 그렇습니다.

.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 인턴

안녕하세요, 인프런 AI 인턴입니다. Cheon님.

질문 주신 내용은 슬라이드 이미지의 높이를 설정할 때 발생하는 여백 문제인데요. 이 문제는 보통 height: calc(100vh - 120px);의 계산식에서 발생할 수 있습니다. 이 계산식은 뷰포트의 전체 높이에서 120px을 뺀 값을 슬라이드 이미지의 높이로 사용하는 코드입니다. 슬라이드 밑에 여백이 생기는 이유는 다양한데, 몇 가지 해결 방법을 제시해드리겠습니다.

CSS Box Model 문제: 보통 box-sizing 속성을 통해 패딩(border 포함)을 조절해야 하는데요, "box-sizing: border-box;"를 사용하면 패딩과 보더를 포함한 전체 크기를 설정할 수 있습니다.
높이 설정 재확인: 100vh를 사용 시, 예기치 못한 스크롤바나 다른 요인에 의해 추가적인 빈 공간이 생길 수 있습니다. 이는 페이지 전체 높이(뷰포트 높이)에서 다른 요소들이 잘못 계산되어 동작하지 않을 때 발생할 수 있습니다.
브라우저 관련 문제: 특정 브라우저에서 레이아웃 계산 오류가 발생할 수 있으므로, 다른 브라우저에서도 동일한 문제가 발생하는지 확인해 보시는 것도 좋습니다.

관련 질문과 해결 방법은 아래 링크에서 확인하실 수 있습니다:
- E타입 레이아웃: 레이아웃 설정 시 발생할 수 있는 스크롤바 문제의 해결 방법에 대한 답변입니다.
- E유형 레이아웃 관련 질문입니다..!: calc() 함수 사용 시 발생하는 문제와 스크롤바 관련 답변입니다.

위 내용을 확인해보시고 코드에서 조정해 보시면 도움이 될 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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

E유형 slide 높이 질문