슬라이드 만들때 css에서 max-width

슬라이드 만들때 css에서 max-width

QA

슬라이드 만들때 css에서 max-width

본문

안녕하세요.

 

현재 슬라이드 만드는법을

 

오픈소스를 보며 공부히고 있는데요

 

궁금한게 있어 질문올립니다.

 

-------------------------------------html

 

<div class='slide-container'>
        <div class='slide-view'>
            <ul class='slide-wrap'> <!-- 애미메이션 슬라이드박스 -->
                <li class='slide slide2'></li>
                <li class='slide slide0'></li>
                <li class='slide slide1'></li>
                <li class='slide slide2'></li>
                <li class='slide slide0'></li>
            </ul>
        </div>
        
        <span class='nextBt-wrap'>
            <a href='javascript:void(0);' class='nextBt'>
                <img src='img/visu_slick_next.png' alt=''>
            </a>
        </span>
        
        <span class='prevBt-wrap'>
            <a href='javascript:void(0);' class='prevBt'>
                <img src='img/visu_slick_prev.png' alt=''>
            </a>
        </span>
        
    </div>    

 

-------------------------------------css 

@charset "utf-8";

* { margin:0; padding:0; vertical-align:top; }
html,body{ width:100%; height:100%; }
body { text-align:center; font:20px/1 '굴림', 'arial'; color:#333; background:#fff; }
ul { list-style:none; }

.slide-container { position:relative; width:100%; }

.slide-container .slide-view { z-index:1; position:relative;  width:100%; overflow:visible; }
.slide-container .slide-view .slide-wrap { position:relative; width:calc(100%*5); height:969px; margin-left:-100%; }
.slide-container .slide-view .slide-wrap:after { content:''; display:block; clear:both; }
.slide-container .slide-view .slide-wrap .slide { float:left; width:100%; max-width:1903px; height:969px; }
.slide-container .slide-view .slide-wrap .slide.slide0 { background:url(../img/slide1.jpg) no-repeat 50% 100%; background-size:cover; }
.slide-container .slide-view .slide-wrap .slide.slide1 { background:url(../img/slide2.jpg) no-repeat 50% 100%; background-size:cover; }
.slide-container .slide-view .slide-wrap .slide.slide2 { background:url(../img/slide3.jpg) no-repeat 50% 100%; background-size:cover; }

.nextBt-wrap { z-index:2; position:absolute; top:50%; margin-top:-50px; right:70px; width:52px; height:100px; }
.nextBt-wrap a img { width:100%; }

.prevBt-wrap { z-index:2; position:absolute; top:50%; margin-top:-50px; left:70px;  width:52px; height:100px; }
.prevBt-wrap a img { width:100%; }
 

 

중간에 빨간표시로 된 부분을 보면

슬라이드의 ul의 max-width가 1903px로 

지정되있는데 왜 1920px이 아닌 1903px로 지정했는지 궁금합니다.

 

또한 .slide-container .slide-view .slide-wrap 에서 

왜 clac(100%*5)------>넓이 500%로 지정했는지도 궁금합니다..(돌아가는 이미지가 5개라 그런건지...)

 

 

구글에 검색해도 안나오네요 ㅠㅠ

 

도움 부탁드립니다......ㅜㅜ

이 질문에 댓글 쓰기 :

답변 1

max-width 1903px 의 경우 스크롤 영역을 제외한 가로 크기를 지정해서 그런듯해요.

그런데 웨일 브라우저는 스크롤이 투명하게 처리되어서 1920px 로 변경해야 하고 브라우저마다 가로 사이즈가 다르기 때문에 width 100% 로 변경하면 좋을 거 같네요.

 

calc(100%*5) 의 경우 li 슬라이드가 5개여서 그렇게 계산처리 된 거 같네요.

 

슬라이드 갯수에 따라 이부분은 수정 해야될 듯해요.

답변을 작성하시기 전에 로그인 해주세요.
전체 5
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT