브라우저 화면 줄일 시 빈 공간 발생

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

savannaman

작성한 질문수

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

■ 제이쿼리 슬라이드 제작(3) - 슬라이드 제작

작성

수정됨

D1 유형이고, 브라우저 화면을 줄이면 위와 같이 빈 공간이 발생합니다. 슬라이드 이미지로 꽉 채워져야 할 것 같은데 말입니다. 제공된 예제 파일에서도 이런 증상이 있는 것 같은데 혹시 잘못된 부분이 있는 건가요?
아니면 원래 예상된 동작인지 궁금합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="container">
		<div class="maincontant">
			<div class="left">
				<header>
					<div class="headerlogo"></div>
					<div class="navi"></div>
					<div class="spotmenu"></div>
				</header>
			</div>
			<div class="right">
				<div class="slide">
					<div class="slideimg">
						<div class="slideinner slideitems">
							<a class="sitem" href="#none"><img src="images/slide-d-01.jpg" alt="slide-d-01"></a>
							<a class="sitem" href="#none"><img src="images/slide-d-02.jpg" alt="slide-d-02"></a>
							<a class="sitem" href="#none"><img src="images/slide-d-03.jpg" alt="slide-d-03"></a>
						</div>
					</div>
					<div class="slidebanner">
						<a href="#none"><img src="images/banner-01.png" alt="banner-01"></a>
						<a href="#none"><img src="images/banner-02.png" alt="banner-02"></a>
						<a href="#none"><img src="images/banner-03.png" alt="banner-03"></a>
					</div>
				</div>
				<div class="items">
					<div class="shortcut"></div>
					<div class="newsgallery"></div>
				</div>
			</div>
		</div>
		<footer>
			<div class="footerlogo"></div>
			<div class="copyright"></div>
			<div class="sns"></div>
		</footer>
	</div>
<script type="text/javascript" src="script/jquery-1.12.4.js"></script>
<script type="text/javascript" src="script/custom.js"></script>
</body>
</html>

@charset "utf-8";
body {
	margin: 0;
	background-color: #fff;
	color: #333;
}

.container {}
.maincontant {
	display: flex;
}
.maincontant > div{
	border: 1px solid;
	/* height: 800px; */
}
.left {
	width: 200px;
}
.right {
	flex : 1
}


/* header */
header{}
header > div {
	border: 1px solid red;
}
.headerlogo {
	height: 200px;
}
.navi {
	height: 500px;
}
.spotmenu {
	height: 50px;
}

.slide {
    height: 400px;
    position: relative;
}
.slideimg {
    /* border: 1px solid blue; */
    height: 400px;
    position: relative;
    overflow: hidden;
}

/* Slide Animation */
.slideinner {
    /* 실제로 움직이는 요소 */
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0;
    /* animation: slide 10s linear infinite; */
    height: inherit;
}
.slideinner a {
    /* 움직이는 .slide-image-inner에 포함된 요소 */
    height: inherit;
}
.slideinner a img {
    width: 100%;
    height: inherit;
    /* 부모요소인 a의 너비에 유동적으로 맞춰지게 하는 속성 */
    object-fit: cover;
}




.slidebanner {
	width: 100px;
	height: 300px;
	
	position: absolute;
	top: 0;
	right: 0;
}
.slidebanner img{
	width: 100px;
}


/* items */
.items{}
.items > div{
	border: 1px solid green;
}
.shortcut {
	height: 200px;
}
.newsgallery {
	height: 250px;
}

/* footer */
footer {
	display: flex;
}
footer > div {
	border: 1px solid;
	height: 100px;
}
.footerlogo {
	width: 200px;
}
.copyright {
	flex:1
}
.sns {
	width: 300px;
}

setInterval(function(){
	$('.slideitems').animate({top:'-100%'},function(){
		$('.slideitems').css({top:0});
		$('.sitem:first-child').appendTo('.slideitems')
	})
},1000);

HTML/CSS jquery 웹-디자인

답변 1

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.
savannaman님께서 브라우저 화면을 줄일 때 슬라이드가 빈 공간 없이 꽉차게 표현되도록 하려는 것 같습니다. 이 문제는 CSS 설정과 관련이 있을 수 있습니다. 아래에서 해결 방법을 제안 드립니다.

문제 설명:

현재 슬라이드가 화면을 줄일 때도 꽉 차지 않고 빈 공간이 발생하는 것은 주된 문제입니다. 슬라이드의 container, slideinner, slideimg와 같은 상위 요소들의 크기와 위치 설정 문제가 관련되어 있을 가능성이 큽니다.

문제 해결 방법:

슬라이드의 상위 컨테이너 요소 확인: 상위 컨테이너 요소의 width와 height가 적절하게 설정되어 있는지 확인하고, max-width로 브라우저에 맞게 적절히 사이즈 조절이 가능하도록 설정하세요.

.container {
    width: 100%;
    max-width: 1200px;  /* 최대 너비를 설정하여 크기를 제한 */
    margin: auto;
}

슬라이드 이미지가 차지하는 공간 비율 조정: slideinner 내에 있는 슬라이드 이미지들이 빈 공간 없이 부모 컨테이너를 차지하도록 CSS를 조정하세요.

.slideimg {
    width: 100%;  /* 컨테이너 전체 너비를 차지하도록 설정 */
}

.slideinner {
    display: flex;  /* 플렉스로 설정하여 수평으로 배치 */
    width: 300%;    /* 슬라이드 이미지 갯수에 따라 조정 */
    height: 100%;
    transition: transform 0.5s ease-in-out;  /* 슬라이드 이동 효과 */
}

.slideinner a {
    flex: 1;  /* 슬라이드 이미지가 동일한 비율로 차지하도록 */
}

애니메이션 및 위치 이동: JavaScript 또는 CSS로 슬라이드 전환 효과를 추가하여 빈 공간 없이 자연스럽게 넘어갈 수 있도록 합니다.

setInterval(function() {
    $('.slideinner').animate({left:'-100%'}, function() {
        $(this).css({left: '0'});
        $('.sitem:first-child').appendTo('.slideinner'); /* 다시 맨 뒤에 추가 */
    });
}, 3000);

유사한 문제들이 논의된 질문들

위의 해결 방법을 적용하여 문제가 개선되었는지 확인해 보세요. 적절한 크기 설정과 CSS flexbox를 활용하면 슬라이드가 화면 변화에 유동적으로 대응할 수 있습니다. 추가적인 질문이나 궁금한 사항이 있다면 언제든지 문의해 주세요.

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

savannaman

작성한 질문수

전체 Q&A

질문하기