utterances-bot commented 3 years ago

Only CSS Slide - 오직 CSS만 사용하여 슬라이드 만들기 - 개발자 황준일

css로 slide를 만드는 방법에 대해 알아보겠습니다. 일단 element1 ~ element2 셀렉터, input과 label의 관계, :checked 속성에 대해서 알아야 합니다. 그 후 javascript 없이도 css로만 슬라이드 제작이 가능합니다.

http://junil-hwang.com/blog/only-css-slide/

hyun-young-luadmia-ParkKim commented 3 years ago

수동가로슬라이더에 다섯번째슬라이더를 하나 더 늘리고 싶어서 하고, 5을 하고, #pos5:checked ~ ul{margin-left:-400%;}했는데도 다섯번째 불렛버튼 눌러도 다섯번째 슬라이더로 안넘어가져서, 하니까 다섯번째 슬라이더가 먼저뜨던데 다른 불렛 눌러서 다시 다섯번째 슬라이더로 가려고하면 안가지는데 어떻게 해결하면 좋나요?

JunilHwang commented 3 years ago

@hyun-young-luadmia-ParkKim 전체 코드를 올려주세요~ 글로만 읽어보면 어떤 상황인지 이해하기가 힘드네요.. 😅

hyun-young-luadmia-ParkKim commented 3 years ago

코드를 어떻게 올리나요 여기 댓글창으로 올리면 되나요?

JunilHwang commented 3 years ago

@hyun-young-luadmia-ParkKim 네 댓글창에 마크다운 문법 참고해서 올려주시면 된답니다!

이런식으로 올릴 수 있어요~

<ul>
  <li>안녕하세요</li>
  <li>마크다운으로</li>
  <li>이렇게 코드를 올릴 수 있습니다.</li>
</ul>

hyun-young-luadmia-ParkKim commented 3 years ago

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>수동 가로 슬라이드</title>
  <link href="css/style.css" type="text/css" rel="stylesheet">
  <script src="javascript/jquery-1.12.3.js" type="text/javasript"></script>
  <script src="javascript/script.js" type="text/javascript" defer="defer"></script>
</head>
<body>
  <header>
    <div class="top">
      <div class="logo">
        <a href="#"><img src="images/LOGO.png"></a>
      </div>
      <nav class="menu">
        <ul class="navi">
          <li><a href="#">동호회 소개</a>
              <ul class="submenu">
                <li><a href="#">연혁</a></li>
                <li><a href="#">회칙</a></li>
                <li><a href="#">이용안내</a></li>
              </ul>
          </li>
          <li><a href="#">갤러리</a>
            <ul class="submenu">
              <li><a href="#">풍경 자연</a></li>
              <li><a href="#">인물</a></li>
              <li><a href="#">사물</a></li>
            </ul>
        </li>
        <li><a href="#">교육안내</a>
          <ul class="submenu">
            <li><a href="#">기초사진</a></li>
            <li><a href="#">디지털사진</a></li>
            <li><a href="#">전문사진</a></li>
          </ul>
      </li>
      <li><a href="#">CONTACT</a></li>
        </ul>
      </nav>
    </div><!--.top-->
  </header>
  <div class="slide">
    <input type="radio" name="pos" id="pos1" >
    <input type="radio" name="pos" id="pos2">
    <input type="radio" name="pos" id="pos3">
    <input type="radio" name="pos" id="pos4">
    <input type="radio" name="pos" id="pos5" checked>
    <ul>
      <li><a href="#"><img src="images/images(1).jpg" alt="slider01"></a></li>
      <li><a href="#"><img src="images/images(2).jpg" alt="slider02"></a></li>
      <li><a href="#"><img src="images/images(3).jpg" alt="slider03"></a></li>
      <li><a href="#"><img src="images/images(4).jpg" alt="slider04"></a></li>
      <li><a href="#"><img src="images/images(5).jpg" alt="slider05"></a></li>
    </ul>
    <p class="bullet">
      <label for="pos1">1</label>
      <label for="pos2">2</label>
      <label for="pos3">3</label>
      <label for="pos4">4</label>
      <label for="pos4">5</label>
    </p>
  </div><!--.slide-->
<div class="contents">
    <div class="notice">
        <h2>공지사항</h2>
        <table>
          <tr>
            <td>제 30회 정기출사 및 모임이 있습니다.</td>
            <td>2018-04-10</td>
          </tr>
          <tr>
            <td>대한민국 사진공모전이 개최됩니다. 참여해보세요</td>
            <td>2018-04-10</td>
          </tr>
          <tr>
            <td>대한민국의 자연 사진 전시회가 있습니다.</td>
            <td>2018-04-10</td>
          </tr>
          <tr>
            <td>포토그래퍼와 함께 하는 디지털사진 설명회가 있습니다.</td>
            <td>2018-04-10</td>
          </tr>
          <tr>
            <td>무빙동호회에 오신 것을 환영합니다.</td>
            <td>2018-04-10</td>
          </tr>
        </table>
    </div><!--.notice-->
    <div class="partner">
       <h2>Partner Site</h2>
       <a href="#"><img src="images/PARTNER.png"></a>
    </div><!--.partner-->
</div>
<div id="modal">
   <div class="upbody">
      <a href="#">
         <img src="images/PARTNER_UP.png">
      </a>
      <div class="btn">닫기</div>
   </div>
</div>
<div class="icons">
    <div class="icon">
       <img src="images/icon1.png" alt="icon1">
       <button>커뮤니티</button> 
    </div>
    <div class="icon">
      <img src="images/icon2.png" alt="icon2">
      <button>전시회</button> 
   </div>
   <div class="icon">
    <img src="images/icon3.png" alt="icon3">
    <button>정보마당</button> 
 </div>
</div>
<footer>
   <ul class="ftli">
      <li><a href="#">법적고지</a></li>
      <li><a href="#">개인정보취급방침</a></li>
      <li><a href="#">개인정보처리방침</a></li>
   </ul>
   <p class="info">
     상호명:무빙사진동호회<br>
     대표자:ANNE YOON<br>
     개인정보관리책임자<br>
     사업장 주소:서울특별시 금천구 가산동 가산디지털로
   </p>
</footer>  
</body>
</html>

========================css=======================================
*{
    margin:0 auto;
    padding:0;
    list-style: none;
    text-decoration: none;
    color:#333333;
}
body{
  width:1000px;
  }
ul,li{list-style:none;}
header{
    width:1000px;
    height:100px;
    position: relative;
    z-index: 10;
}
.top{
    width:1000px;
    height:100px; 
}
.logo{float: left;}
.logo img{
  width:200px;
  height:auto;
}
.menu{
    float:right;
    }
.navi{
    padding-top: 15px;
}    
.navi>li{
    float:left;
    width:150px;
    height:40px;
    line-height: 40px;
    text-align: center;
}
.navi>li:hover{
    background-color: #3366FF;
    color: #FFFFFF;}
.navi>li:hover>a{
    color: #FFFFFF;
}

.submenu{
    display: none;
    background: #ffffff;
}
.submenu>li:hover{
    background-color: #999999;
}
.slide{
        width:1000px;
        height:400px;
        overflow:hidden;
        position:relative;
    }
.slide ul{width:calc(100% * 5); display:flex; transition:1s;}
.slide li{width:calc(100% / 5);}

.slide input{display:none;}
.slide .bullet{
        position:absolute;
        bottom:20px;
        left:0;
        right:0;
        text-align:center;
        z-index:10;
    }
.slide .bullet label{
        width:10px;
        height:10px;
        border-radius:10px;
        border:2px solid #666;
        display:inline-block;
        background:#fff;
        font-size:0;
        transition:0.5s;
        cursor:pointer;
    }
    /* 슬라이드 조작 */
    #pos1:checked ~ ul{margin-left:0;}
    #pos2:checked ~ ul{margin-left:-100%;}
    #pos3:checked ~ ul{margin-left:-200%;}
    #pos4:checked ~ ul{margin-left:-300%;}
    #pos5:checked ~ ul{margin-left:-400%;}
    /* bullet 조작 */
    #pos1:checked ~ .bullet label:nth-child(1),
    #pos2:checked ~ .bullet label:nth-child(2),
    #pos3:checked ~ .bullet label:nth-child(3),
    #pos4:checked ~ .bullet label:nth-child(4),
    #pos5:checked ~ .bullet label:nth-child(5){background:#666;}

.contents{
   width:1000px;
}
.notice{
   width:500px;
   float:left;
}
.notice h2{
    text-align: center;
}
.partner{
    width:500px;
   float:right;
}
.partner h2{
    text-align: center;
}
.icons{width:100%;}
.icon{
    float:left;
    width:calc(100%/3);
}
.icon img{
    width:200px;
    height: auto;
}
#modal{
    position: fixed;
    top:0;
    left:0;
    background: rgba(50,50,50,0.5);
    width:100%;
    height: 100%;
    z-index:20;
    display: none;
}
.upbody{
    width:600px;
    height: 350px;
    background: #ffffff;

}
.upbody img{
   padding:30px;
}
.btn{
    width:80px;
    height:30px;
    line-height: 30px;
    background-color: #3366ff;
    color:#ffffff;
    text-align: center;
}
footer{
    height: 100px;
    width: 1000px;
    background-color: #3366ff;
    color: #FFFFFF;
    overflow: hidden;
    margin-top: 10px;       
}
footer .wrap{
    padding: 10px 20px;
}
footer ul{
    width: 50%;
    float: left
}
footer ul>li{
    float: left;
    margin-left: 20px;
    margin-top: 10px
}
footer p{
    width: 50%;
    font-size: 12px;
    float: right;
    color: #FFFFFF;
}

입니드아...

JunilHwang commented 3 years ago

62번쨰 줄에 보시면

<label for="pos4">5</label>

이렇게 되어 있네요. 이 부분을

<label for="pos5">5</label>

이렇게 수정해보세요!

hyun-young-luadmia-ParkKim commented 3 years ago

감사합니다!

xxxlata commented 2 years ago

안녕하세요! 좋은 슬라이드 예시여서 클론 해 보고자 이미지 삽입해서 만드는 도중 list 스타일이 아래로 내려가는 현상을 잡지 못해 다음 버튼을 눌러도 그 페이지 이미지가 보이지 않는 문제가 생겼습니다. 또 한 가지는 버튼을 누르면 첫 번째 페이지 이미지가 확대되는 현상입니다.. css의 문제인 것 같은데 부디 꼭 한번 봐주시면 감사하겠습니다.

 <div id="slide">
                        <input type="radio" name="pos" id="pos1" checked>
                        <input type="radio" name="pos" id="pos2">
                        <input type="radio" name="pos" id="pos3">
                        <input type="radio" name="pos" id="pos4">
                        <input type="radio" name="pos" id="pos5">
                        <input type="radio" name="pos" id="pos6">
                        <input type="radio" name="pos" id="pos7">
                        <ul>
                            <li><img src="img/1.png" alt=""></li>
                            <li><img src="img/2.png" alt=""></li>
                            <li><img src="img/3.png" alt=""></li>
                            <li><img src="img/4.png" alt=""></li>
                            <li><img src="img/5.png" alt=""></li>
                            <li><img src="img/6.png" alt=""></li>
                            <li><img src="img/7.png" alt=""></li>
                        </ul>
                        <p class="pos">
                            <label for="pos1"></label>
                            <label for="pos2"></label>
                            <label for="pos3"></label>
                            <label for="pos4"></label>
                            <label for="pos5"></label>
                            <label for="pos6"></label>
                            <label for="pos7"></label>
                          </p>
                    </div>

ul,li{
    list-style:none;
}

ul{
    list-style-type: disc;
}

li{
    display: list-item;
}

#slide{
    height:30rem;
    margin-top: 2rem;
    position:relative;
    overflow:hidden;
}

#slide ul{
    width:400%;
    height:100%;
    transition:1s;
}

#slide ul:after{
    content:"";
    display:block;
    clear:both;
}

#slide li{
    float:left;
    width:25%;
    height:100%;
}

#slide li img {
    width: 100%;
    display: block;
}
#slide li:nth-child(1){
    float:left;
    width:100%;
    height:100%;
    display: block;
}
#slide li:nth-child(2){
    float:left;
    width:100%;
    height:100%;
    display: block;
}
#slide li:nth-child(3){
    float:left;
    width:100%;
    height:100%;
    display: block;
}
#slide li:nth-child(4){
    float:left;
    width:100%;
    height:100%;
    display: block;
}
#slide li:nth-child(5){
    float:left;
    width:100%;
    height:100%;
    display: block;
}
#slide li:nth-child(6){
    float:left;
    width:100%;
    height:100%;
    display: block;
}
#slide li:nth-child(7){
    float:left;
    width:100%;
    height:100%;
    display: block;
}
#slide input{
    display:none;
}
#slide label{
    display:inline-block;
    vertical-align:middle;
    width:10px;
    height:10px;
    border:2px solid #666;
    background:#fff;
    transition:0.3s;
    border-radius:50%;
    cursor:pointer;
}
#slide .pos{
    text-align:center;
    position:absolute;
    bottom:10px;left:0;
    width:100%;
    text-align:center;
}
#pos1:checked~ul{
    margin-left:0%;
}
#pos2:checked~ul{
    margin-left:-100%;
}
#pos3:checked~ul{
    margin-left:-200%;
}
#pos4:checked~ul{
    margin-left:-300%;
}
#pos5:checked~ul{
    margin-left:-400%;
}
#pos6:checked~ul{
    margin-left:-500%;
}
#pos7:checked~ul{
    margin-left:-600%;
}

#pos1:checked~.pos>label:nth-child(1){
    background:#666;
}
#pos2:checked~.pos>label:nth-child(2){
    background:#666;
}
#pos3:checked~.pos>label:nth-child(3){
    background:#666;
}
#pos4:checked~.pos>label:nth-child(4){
    background:#666;
}
#pos5:checked~.pos>label:nth-child(5){
    background:#666;
}
#pos6:checked~.pos>label:nth-child(6){
    background:#666;
}
#pos7:checked~.pos>label:nth-child(7){
    background:#666;
}

JunilHwang / blog-comment

http://junil-hwang.com/blog/only-css-slide/ #20

Only CSS Slide - 오직 CSS만 사용하여 슬라이드 만들기 - 개발자 황준일