슬라이드 쇼

Notice

Recent Posts

Recent Comments

Link

깃허브

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

EverGiver

슬라이드 쇼 본문

Front-End (웹)/CSS

슬라이드 쇼

친절한개발초보자 2021. 8. 25. 01:23

728x90

슬라이드 쇼

이미지를 어떤 버튼을 클릭했을 때 또는 자동으로 일정 시간이 지나면 다른 이미지로 교체되면서 그 과정에서 애니메이션 효과가 발생하는 개념

overflow
- 내가 선택한 태그의 가로와 세로 값을 넘어간 내용물들을 처리해주는 css속성
- overflow:auto
▷ 가로세로 값 넘어간 내용물들을 잘라내지 않고 스크롤을 만들어서 볼 수 있게 만들어줌
(딱 필요한 만큼만 스크롤 만들어줌)
- overflow:hidden
▷ 내가 선택한 대상태그의 가로세로 값을 넘어간 글자 및 이미지 기타 내용들을 전부 잘라버리는 기능
- overflow:scroll
▷ 기타 내용들을 스크롤을 만들어서 볼 수 있게 해 준다.
▷ 쓸모 없는 스크롤도 생김

css속성에는 다양한 단위가 존재
- px
: 고정 값 (어떠한 상황에서도 값이 변하지 않는 고정된 값)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>css슬라이드 #1</title>
    <style>
        *{margin:0;padding:0}
        li{list-style:none;}
        .clearfix:after{content:"";display:block;clear:both;}
        
        #scroll{width:600px;height:400px;margin:0 auto;overflow:auto;}
        /*px단위일 때 #scroll 가로와 세로값은 내가 웹사이트 상에서 슬라이드쇼를 얼마나 보여줄 것인지에 따라서 원하는 값을 알아서 넣어주면 된다*/
        
        #scroll_wrap{width:2400px;height:400px;}
        /*px단위일 때 #scroll의 가로값 X li의 갯수 = 가로값
        세로값은 #scroll의 세로값과 동일하게*/
        
        #scroll_wrap li{width:600px;height:400px;float:left;}
        
        #scroll_wrap li:nth-child(1){background-color:#123456}
        #scroll_wrap li:nth-child(2){background-color:#987654}
        #scroll_wrap li:nth-child(3){background-color:orange}
        #scroll_wrap li:nth-child(4){background-color:pink}
        
        
    </style>
</head>
<body>
    <div id="scroll">
        <div id="scroll_wrap">
            <ul class="clearfix">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
</html>

- %
: 유동 값 (상황에 따라서 값이 유동적으로 변하는 값)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>css슬라이드 #2</title>
    <style>
        *{margin:0;padding:0}
        li{list-style:none;}
        .clearfix:after{content:"";display:block;clear:both;}
        
        #scroll{width:80%;height:400px;margin:0 auto;overflow:auto;overflow-y:hidden;}
        
        /*%단위일 때 #scroll의 가로값은 마찬가지로 원하는 값을 작성해주면 되는데
        %단위이기 때문에 웹사이트의 가로길이를 늘리고 줄일때 마다 #scroll의 값도 똑같이 변한다 (유동값이기 때문) 
        세로값은 상관x*/
        
        #scroll_wrap{width:400%;height:400px;}
        
        /*%단위일 때 100% * li의 갯수 고정!*/
        
        #scroll_wrap li{width:25%;height:400px;float:left;}
        
        /*%단위일 때 li의 가로값은 100% / li의 갯수*/
        
        #scroll_wrap li:nth-child(1){background-color:#123456;}
        #scroll_wrap li:nth-child(2){background-color:#987654;}
        #scroll_wrap li:nth-child(3){background-color:orange;}
        #scroll_wrap li:nth-child(4){background-color:violet;}
    </style>
</head>
<body>
    <div id="scroll">
        <div id="scroll_wrap">
            <ul class="clearfix">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>css슬라이드 #2</title>
    <style>
        *{margin:0;padding:0;}
        #a{width:100%;height:400px;
            margin:0 auto;
            overflow:auto;
            overflow-y:hidden;}
        
        li{list-style:none;}
        
        #b{width:300%;height:400px;}
        
        li{width:33%;height:400px;float:left;margin-left:0.5%;}
        
        li:nth-child(1){margin-left:0px;}
        
        li:nth-child(1){background-color:red;}
        li:nth-child(2){background-color:green;}
        li:nth-child(3){background-color:blue;}
        
 
       
    </style>
</head>
<body>
        <div id="a">
             <ul id="b">
                 <li></li>
                 <li></li>
                 <li></li>
            </ul>
        </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>css슬라이드 #4</title>
    <style>
        *{margin:0;padding:0}
        li{list-style:none;}
        .clearfix:after{content:"";display:block;clear:both;}
        
        input{display:none;}
        
        #slide{width:1000px;height:300px;
                margin:0 auto;
                border:3px solid black;
                overflow:hidden;}
        
        #slide ul{width:4000px;height:300px;
                    transition:1s;}
        
        #slide li{width:1000px;height:300px;float:left;}
        
        #slide li:nth-child(1){background-color:#123456;}
        #slide li:nth-child(2){background-color:#987654;}
        #slide li:nth-child(3){background-color:aqua;}
        #slide li:nth-child(4){background-color:pink;}
        
        .scroll label{width:20px;height:20px;background-color:red;
                        border:2px solid #666;display:inline-block;
                        cursor:pointer;}
        .scroll{width:120px;margin:20px auto;}
        
        #scroll1:checked~ul{margin-left:0px;}
        
        /*#scroll = label태그중 첫번째 버튼이 체크가 되면(클리기 되면) ul태그한테 margin-left:0px 넣어줘*/
        
        #scroll2:checked~ul{margin-left:-1000px;}
        #scroll3:checked~ul{margin-left:-2000px;}
        #scroll4:checked~ul{margin-left:-3000px;}
    </style>
</head>
<body>
    <div id="slide">
        <input type="radio" name="a" id="scroll1">
        <input type="radio" name="a" id="scroll2">
        <input type="radio" name="a" id="scroll3">
        <input type="radio" name="a" id="scroll4">
        
        <ul class="clearfix">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    
     <div class="scroll">
            <label for="scroll1"></label>
            <label for="scroll2"></label>
            <label for="scroll3"></label>
            <label for="scroll4"></label>
    </div>
</body>
</html>

728x90