티스토리 뷰

코딩/HTML&CSS

슬라이드 연습

ehzim 2023. 11. 24. 01:37

 

이전에 실습했던 슬라이드는 ul과 li로 구성했다.

이번에는 div로 구성한 슬라이드 예제를 실습해보았다.

 

 

 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="s.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ju</title>
</head>
<body>
    <div class="section">
        <input type="radio" name="radio" id="s1" checked>
        <input type="radio" name="radio" id="s2">
        <input type="radio" name="radio" id="s3">
        <input type="radio" name="radio" id="s4">

        <div class="slidewrap">   <!--컨테이너 개념 큰틀-->
            <div class="slidelist">  <!--div 슬라이드 내용들 담는 큰틀-->
                <div>
                    <a>
                        <label for="s4" class="left"></label>
                        <img src="image/ju1.jpg" alt="">
                        <label for="s2" class="right"></label>
                    </a>
                </div>
                <div>
                    <a>
                        <label for="s1" class="left"></label>
                        <img src="image/ju2.jpg" alt="">
                        <label for="s3" class="right"></label>
                    </a>
                </div>
                <div>
                    <a>
                        <label for="s2" class="left"></label>
                        <img src="image/ju3.jpg" alt="">
                        <label for="s4" class="right"></label>
                    </a>
                </div>
                <div>
                    <a>
                        <label for="s3" class="left"></label>
                        <img src="image/ju4.jpg" alt="">
                        <label for="s1" class="right"></label>
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

 

 

CSS

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
input{
    display: none;
}

.section .slidewrap
{ 
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
} 
 /*전체적인 사이즈 지정  */
.section .slidelist{
    white-space: nowrap;
    font-size: 0;
}
.section .slidelist > div {
    display: inline-block; 
    width: 100%; 
    transition: all .8s;
}
.section .slidelist > div > a{
    display: block;
    position: relative;
}
img{
    width: 100%;
저작자표시

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

회원가입 form  (2) 2023.11.29
이미지 정렬 맞추기 & hover & opacity  (1) 2023.11.28
[7주 2일차] HTML CSS  (1) 2023.11.21
[7주 2일차] 슬라이드  (1) 2023.11.21
[7주 1일차] HTML&CSS  (0) 2023.11.20
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday