티스토리 뷰

코딩/HTML&CSS

[7주 2일차] 슬라이드

ehzim 2023. 11. 21. 17:28

 

 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="ss.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="section">
       <input type="radio" name="slide" id="slide01" checked>
       <input type="radio" name="slide" id="slide02">
       <input type="radio" name="slide" id="slide03">
 
       <div class="slidewrap">
          <ul class="slidelist">
             <li>
                <a>
                   <label for="slide03" class="left">l</label>
                   <img src="./img/slide01.jpg">
                   <label for="slide02" class="right">r</label>
                </a>
             </li>
             <li>
                <a>
                   <label for="slide01" class="left">l</label>
                   <img src="./img/slide02.jpg">
                   <label for="slide03" class="right">r</label>
                </a>
             </li>
             <li>
                <a>
                   <label for="slide02" class="left">l</label>
                   <img src="./img/slide03.jpg">
                   <label for="slide01" class="right">r</label>
                </a>
             </li>
          </ul>
       </div>
    </div>
 </body>
</html>

 

 

 

CSS

*{ 
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
/* .section input[id*="slide"]{display: none;} */
/* radio 버튼 안보이게 하기 id*=은 slide로 시작하는 id를 뜻함 */

.section .slidewrap {
    max-width: 1200px; margin: 0 auto; overflow: hidden;}
/* container 크기 지정  */
.section .slidelist {white-space: nowrap; font-size: 0;}
/* 인라인은 글자처럼 취급하기때문에 부모를 넘어갈수 없음->nowrap사용함 */
/* 글자 사이에는 자간이 무조건 있음 -> font-size:0;로 해서 간격 없애줌 */
/* 안하면 앞의 그림이 잘린것처럼 보임 */
.section .slidelist > li{
    display: inline-block; /*vertical-align:middle;*/ width:100%; transition:all .5s;}
    /* inline-blcok 대신 flex 사용 가능 (가로로 배치하기 위해 사용)*/

.section .slidelist > li > a{
    display: block; position:relative;
}
.section .slidelist >li > a img{
    width: 100%;
}

label{
    position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); padding: 50px; cursor:pointer;
}
/* padding으로 내용을 줌 
background로 이미지를 사용하면 내용이 없이 때문에 안보이기때문 */

/* translateY 내 크기의 50프로 만큼 이동 z-index 가려진거 보여짐 */
.left {left:30px; 
    background:url('./img/left.png') center center / 100% no-repeat;}
.right {right:30px; 
    background:url('./img/right.png') center center / 100% no-repeat;}
    /* 가로 세로center로 함 */

#slide01:checked ~ .slidewrap .slidelist >li{
    transform:translate(0%);
    
}    
#slide02:checked ~ .slidewrap .slidelist >li{
    transform:translate(-100%);
   
}    
#slide03:checked ~ .slidewrap .slidelist >li{
    transform:translate(-200%);
    
}

 

 

 

슬라이드 결과물

 

 

CSS 작성 순서

1. * 유니버셜 태그를 사용하여 전체적인 디폴트값을 정해준다.

*{ 
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
저작자표시

'코딩 > HTML&CSS' 카테고리의 다른 글

슬라이드 연습  (1) 2023.11.24
[7주 2일차] HTML CSS  (1) 2023.11.21
[7주 1일차] HTML&CSS  (0) 2023.11.20
[6주 5일차] HTML&CSS  (1) 2023.11.17
[6주 3일차] HTML&CSS  (0) 2023.11.15
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday