질문있습니다.
646
投稿した質問数 22
선생님 강의에서 테마를 변경 후 작업중입니다. 슬릭슬라이드를 적용 하였는데 마지막 사진의 위치가 내려갔습니다. 사진을 변경하여 작업을 해봐도 같은 현상이 발생합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>다울건축사무소</title>
<!--jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<!--Slick slider-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" />
<!--Custom CSS & js -->
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/resposive.css">
<script src="js/custom.js"></script>
</head>
<body>
<div class="container">
<!--section : header -->
<header>
<div class="header-inner">
<div class="logo">
<a href="#none">
<img src="/images/logo.png">
</a>
</div>
<div class="gnb">
<a href="#none">ABOUT</a>
<a href="#none">RPOJECTS</a>
<a href="#none">NEWS</a>
<a href="#none">CONTACT</a>
</div>
</div>
</header>
<!--section : home -->
<section class="home">
<div class="home-inner">
<ul class="imgbox">
<li class="item-bg" style="background-image: url(/images/강원대농업생명과학대학개축설계제안공모\(설계공모\ 당선\).jpg)">
<div class="text-area">
<h3 class="eng">강원대 농업생명과학대학 개축 설계제안 공모</h3>
<p>(설계공모 당선)</p>
</div>
</li>
<li class="item-bg" style="background-image: url(/images/서울대학교문화관재건축공사현상설계.jpg)">
<div class="text-area">
<h3 class="eng">서울대학교 문화관 재건축공사 현상설계</h3>
<p>(설계공모 당선)</p>
</div>
</li>
<li class="item-bg" style="background-image: url(/images/서울출입국·외국인청\(설계공모안\).jpg)">
<div class="text-area">
<h3 class="eng">서울출입국·외국인청</h3>
<p>(설계공모안)</p>
</div>
</li>
<li class="item-bg" style="background-image: url(/images/수성행복드림센터\(설계공모\ 당선\).jpg)">
<div class="text-area">
<h3 class="eng">수성행복드림센터</h3>
<p>(설계공모 당선)</p>
</div>
</li>
<li class="item-bg" style="background-image: url(/images/시화\ MTV\ 초중통합학교\(우수상\).jpg)">
<div class="text-area">
<h3 class="eng">시화 MTV 초중통합학교</h3>
<p>(우수상)</p>
</div>
</li>
<li class="item-bg" style="background-image: url(/images/시화mtv지하주차장\ \(설계공모\ 당선\).jpg)">
<div class="text-area">
<h3 class="eng">시화 MTV 지하주차장</h3>
<p>(설계공모 당선)</p>
</div>
</li>
<li class="item-bg" style="background-image: url(/images/한수원새울본부복지관신축.jpg)">
<div class="text-area">
<h3 class="eng">한수원 새울본부 복지관 신축</h3>
</div>
</li>
</ul>
</div>
</section>
<section class="about"></section>
<section class="award"></section>
<footer></footer>
</div>
</body>
</html>
/*CSS*/
/* Web Font - Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500;600;700&display=swap');
/* Web Font - S-CoreDream */
@font-face {
font-family: 'S-CoreDream-3Light';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Reset CSS */
* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #333;
}
button,
input {
outline: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
font-weight: normal;
line-height: 1.5em;
}
ul,
li {
padding: 0;
list-style: none;
}
/* Default CSS */
body {
font-family: 'Kanit';
line-height: 1.7em;
margin: 0;
background-color: #fff;
color: #333;
}
/*section - header*/
.header-inner {
width: 1300px;
margin: auto;
padding-top: 20px;
padding-bottom: 10px;
overflow: hidden;
}
.logo {
float: left;
}
.gnb {
margin-top: 10px;
float: right;
}
.gnb a {
font-size: 20px;
margin-left: 80px;
}
/*section - home*/
ul.imgbox {
overflow: hidden;
margin: 0;
}
.item-bg {
display: inline-block;
top: 0;
background-size: cover;
background-position: center;
height: 100vh;
}
/*Custom JS*/
$(document).ready(function(){
$('.imgbox').slick({
infinite: true,
dots: true,
speed : 3000,
autoplay: true,
autoplaySpeed: 5000,
swipe: true,
arrows: false,
fade : true,
zIndex:50,
pauseOnFocus: false,
pauseOnHover: false,
});
});回答 2
0
몸이 좋지 않아서 답변이 좀 늦었습니다.
일단 올려주신 코드로 테스트해본 결과 페이드, 스라이드 전혀 문제 없습니다. 마지막 슬라이드가 내려가는 일은 없습니다. 만약 그렇다면 h3의 상담 마진 때문에 그럴거에요. 그런데 이것도 중앙에 오게 할거니까 상단마진 때문에 그럴일이 없습니다.
일단 코드에서 문제점은 절대로 한글 경로명 파일명 사용하시시면 안됩니다. 그리고 띄어쓰기도 사용하시면 안됩니다. 또한 대소문자도 혼용하지 마시고 소문자로 통일하세요.
또 한가지는 li 안에 배경이미지로 넣으셨는데 이렇게 하셔도 되지만 그냥 html에 img 형태로 넣으세요. 그래야 나중에 이미지 수정 보완 교체 할 때 훨씬 좋습니다.
그리고 아래처럼 경로명을 상대주소와 절대주소를 혼용하시는건 썩 좋지 않습니다. 한가지로 통일하세요.
0
감사합니다 마지막 이미지에는 p태그가 없고 h3 태그만 있었는데 .text-area의 위치 때문에 위치 만큼 이미지가 내려갔습니다. 말씀하신 폴더구조는 바꿨습니다.
하드코딩으로 이미지맵(image map) 만들기
1
79
2
슬릭 슬라이더
1
148
2
position: fixed; 가 안먹혀요..뭐가 문제일까요?
1
168
1
반응형 fixed 안먹히는 문제
1
264
2
선생님
2
155
1
.news-thum .date 위치가 안맞아요
1
245
2
TypeIt - Welcome 부분이 적용이 안됩니다..
1
369
2
Scroll Reveal Animation 적용이 안되요
1
362
1
완성 후 각 섹션 display:none 주석 시 문제
1
384
3
브라우저를 줄일 때 화면 깨짐
1
633
2
welcome-heading 부분이 왜 저렇게 위치되는지 모르겠습니다.
1
341
1
제이쿼리 탭메뉴 클릭 질문
1
236
1
질문있습니다
1
549
1
슬릭슬라이더가 왜 안되는지 모르겠습니다
1
623
1
slick slider와 .ceo-content영역 겹침
1
720
1
span .badge 부분 참고하실분 하세요
2
333
1
플렉스를 안주고 그냥 패딩을 줘도 되지 않나요
1
331
1
창을 줄이면 위치가 이동되는 백그라운드 이미지
1
532
1
크롬창을 줄어들면 이미지가 작아짐
1
743
1
scroll behavior 오류
1
267
1
선생님 코딩좀 봐주세요..
1
402
3
왜 전 선생님과 화면이 다를까요?
1
368
3
따라했는데 이상합니ㅏㄷ..ㅠ
1
295
2
flex로 된 부분을 좌우로 애니매이션 할때 발생하는 문제점.
1
212
1