웹퍼블리싱 코드 질문 드립니다! (기초)
-
게시물 수정 , 삭제는 로그인 필요
안녕하세요
현재 웹퍼블리싱 공부 중인 학생입니다!
정말 기초적인 문제 사항 같은데 아무리 해봐도 해결이 안돼서 여기에 질문드립니다 ㅜㅜ
.slidebar-wrap 부분의 width를 100%에서 양 옆 80px 빠진 크기로 지정하고 싶은데 계속 100%로만 지정이 되는 점이 문제입니다!
<<html>>
<section id="main">
<div class="main-wrap">
<div class="m-slide">
<div class="main-img"><a href="#"></a></div>
<p>주거성과 기능성을 한층 향상시킨 스노우피크 돔 텐트의 결정판<br>Land Breeze Pro.</p>
</div>
<div class="m-slide">
<div class="main-img"><a href="#"></a></div>
<p>우리의 길이 많은 이들에게 좋은 영향력을 줄 수 있도록<br>Snow Peak Way 2023</p>
</div>
<div class="m-slide">
<div class="main-img"><a href="#"></a></div>
<p>잠들어있던 숲을 깨우다<br>EVERLAND Campfield</p>
</div>
<div class="m-slide">
<div class="main-img"><a href="#"></a></div>
<p>자리를 더 쾌적하게, 기능성을 추구한 새로운 시스템 등장<br>Table Top Architect System</p>
</div>
<div class="slidebar-wrap">
<div class="slidebar"></div>
<div class="slidebar-w"></div>
</div>
</div>
</section>
<<css>>
<!--section1 : main-->
#main{
height:100vh;
width:100vw;
}
.main-wrap{
position:relative;
height:100vh;
width:100vw;
}
.main-wrap>div{
position:absolute;
width:100vw;
height:100vh;
}
.m-slide:nth-child(1)>.main-img{
width:100%;
height:100vh;
background:url("../img/main-01.jpg") no-repeat;
background-size:cover;
}
.m-slide:nth-child(2)>.main-img{
width:100%;
height:100vh;
background:url("../img/main-02.jpg") no-repeat;
background-size:cover;
}
.m-slide:nth-child(3)>.main-img{
width:100%;
height:100vh;
background:url("../img/main-03.jpg") no-repeat;
background-size:cover;
}
.m-slide:nth-child(4)>.main-img{
width:100%;
height:100vh;
background:url("../img/main-04.jpg") no-repeat;
background-size:cover;
}
.m-slide p{
position:absolute;
bottom:120px;
left:80px;
color:white;
font-size:36px;
}
.slidebar-wrap{
height:100vh;
width:calc(100% - 160px);
-border:1px solid red;
}
.slidebar{
position:absolute;
width:100%;
height:3px;
background-color:#666;
bottom:100px;
}
.slidebar-w{
background-color: white;
height:3px;
width:0px;
position:absolute;
bottom:100px;
z-index:90;
}
혹시 영향이 있는 건가 싶어 제이쿼리도 함께 첨부합니다!
<<제이쿼리>>
//main : 슬라이드바
function fnBar(){
//$(".slidebar-w").css("width","0px");
$(".slidebar-w").animate({
width:"25%"
},{
duration:4000,
complete:function(){
$(".slidebar-w").animate({
width:"50%"
},4000),
$(".slidebar-w").animate({
width:"75%"
},4000),
$(".slidebar-w").animate({
width:"100%"
},4000);
}
});
}
포트폴리오 만드는 중에 여기서 막혀서 진도가 못 나가고 있는데 해결해주신다면 정말 마음깊이 감사드리겠습니다! (내공 500 걸었습니다! ) 감사합니다.
현재 웹퍼블리싱 공부 중인 학생입니다!
정말 기초적인 문제 사항 같은데 아무리 해봐도 해결이 안돼서 여기에 질문드립니다 ㅜㅜ
.slidebar-wrap 부분의 width를 100%에서 양 옆 80px 빠진 크기로 지정하고 싶은데 계속 100%로만 지정이 되는 점이 문제입니다!
<<html>>
<section id="main">
<div class="main-wrap">
<div class="m-slide">
<div class="main-img"><a href="#"></a></div>
<p>주거성과 기능성을 한층 향상시킨 스노우피크 돔 텐트의 결정판<br>Land Breeze Pro.</p>
</div>
<div class="m-slide">
<div class="main-img"><a href="#"></a></div>
<p>우리의 길이 많은 이들에게 좋은 영향력을 줄 수 있도록<br>Snow Peak Way 2023</p>
</div>
<div class="m-slide">
<div class="main-img"><a href="#"></a></div>
<p>잠들어있던 숲을 깨우다<br>EVERLAND Campfield</p>
</div>
<div class="m-slide">
<div class="main-img"><a href="#"></a></div>
<p>자리를 더 쾌적하게, 기능성을 추구한 새로운 시스템 등장<br>Table Top Architect System</p>
</div>
<div class="slidebar-wrap">
<div class="slidebar"></div>
<div class="slidebar-w"></div>
</div>
</div>
</section>
<<css>>
<!--section1 : main-->
#main{
height:100vh;
width:100vw;
}
.main-wrap{
position:relative;
height:100vh;
width:100vw;
}
.main-wrap>div{
position:absolute;
width:100vw;
height:100vh;
}
.m-slide:nth-child(1)>.main-img{
width:100%;
height:100vh;
background:url("../img/main-01.jpg") no-repeat;
background-size:cover;
}
.m-slide:nth-child(2)>.main-img{
width:100%;
height:100vh;
background:url("../img/main-02.jpg") no-repeat;
background-size:cover;
}
.m-slide:nth-child(3)>.main-img{
width:100%;
height:100vh;
background:url("../img/main-03.jpg") no-repeat;
background-size:cover;
}
.m-slide:nth-child(4)>.main-img{
width:100%;
height:100vh;
background:url("../img/main-04.jpg") no-repeat;
background-size:cover;
}
.m-slide p{
position:absolute;
bottom:120px;
left:80px;
color:white;
font-size:36px;
}
.slidebar-wrap{
height:100vh;
width:calc(100% - 160px);
-border:1px solid red;
}
.slidebar{
position:absolute;
width:100%;
height:3px;
background-color:#666;
bottom:100px;
}
.slidebar-w{
background-color: white;
height:3px;
width:0px;
position:absolute;
bottom:100px;
z-index:90;
}
혹시 영향이 있는 건가 싶어 제이쿼리도 함께 첨부합니다!
<<제이쿼리>>
//main : 슬라이드바
function fnBar(){
//$(".slidebar-w").css("width","0px");
$(".slidebar-w").animate({
width:"25%"
},{
duration:4000,
complete:function(){
$(".slidebar-w").animate({
width:"50%"
},4000),
$(".slidebar-w").animate({
width:"75%"
},4000),
$(".slidebar-w").animate({
width:"100%"
},4000);
}
});
}
포트폴리오 만드는 중에 여기서 막혀서 진도가 못 나가고 있는데 해결해주신다면 정말 마음깊이 감사드리겠습니다! (내공 500 걸었습니다! ) 감사합니다.
