본문 바로가기
블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기

[9일차]20210325 움직이는 배너 함수 적용

알로호모라 2021. 3. 25. 17:40
반응형

function sum(a, b){             -> a, b -> parameter 매개변수 (함수안으로 매개해주는 변수)

document.write(a+b+'<br>');

}

 

sum(2,5);    -> 2,5 argument 인자 - 함수로 들어오는 입력값 (입력)

 

입력 - argument출력 - return

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function sum(a, b){
            document.write(a+b+'<br>');
        }

        function sumColor(a,b){
            document.write('<div style="color:red">'+a+b+'</div><br>');
        }
        sum(3,5);
        sumColor(3,6);

        function sum2(a,b){
            return a+b;
        }
        document.write(sum2(3,5)+'<br>');
        document.write('<div style="color:red">'+sum2(3,5)+'</div>');
        document.write('<div style="font-size:3rem;"">'+sum2(3,5)+'</div>');


    </script>
</body>
</html>

함수에 결과값에 색상 넣기 

 

 

===================== 20210325오전 수업 ===================================

css3? 

css = Cascading style sheets

현재 개발 중인 CSS3의 경우 그림자 효과, 그라데이션, 변형 등 그래픽 편집 프로그램으로 제작한 이미지를 대체할 수 있는 기능이 추가되었다. 또한 다양한 애니메이션 기능이 추가되어 어도비 플래시를 어느 정도 대체하고 있다.

 

구글 자료 -> 이미지 5개 & 다른 자료 있음 

 

 

 

li 태그안에 img를 넣으면 이미지태크보다 li영역이 더 큼 ( 일종의 오류? 같은거) 

li의 line-height의 값이 조금있어서 얘를 처리못함. ㅇ

그래서 line-height: 0을주면됨 (img에다가)  -> 근데 이미지는 inline 이라 아직 있음 

block 으로 바꿔주면 됨.

/* CSS Style sheet*/
*{
    margin:0;
    padding:0;
}
ul,li{
    list-style: none;
}
a{
    text-decoration: none;
}
img{
    line-height: 0;
    display:block;
}

 

 

absolute 안에 absolute 를 쓰면? 

 

#banner{
    position:absolute;
    top:300px;
}

한칸 앞으로 올려진 상태 -> 아래에 있던 버튼들이 위에 공간이 남아서 올라옴. 

 

 

 

 

#banner>ul>li{
    position:absolute;
    top:0px;
}

 

li img 5개가 다 한곳으로 됨. 근데 맨 마지막게 젤 앞ㅇ로 옴. 

 

-> 상위 absolute 가 있고 또 하위absolute 있는ㄴ 거.... 

position 을 너~무 많이 쓸 일은 없음..

 

 

=====================================================================

 

        <ul class ="banner1">
            <li class="fadein"><img src="./images/image1.png"></li>
            <li class="fadein"><img src="./images/image2.png"></li>
            <li class="fadein"><img src="./images/image3.png"></li>
            <li class="fadein"><img src="./images/image4.png"></li>
            <li class="fadein"><img src="./images/image5.png"></li>
        </ul>

 

#banner>ul>li.fadein{
    animation:fadein 3s;  /*fadein을 3초 한다.*/
    
}
@keyframes fadein {
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

 

이렇게 되면 -> 모든 이미지에 fadein 3초가 들어가게 됨 

 

=================================================================

css -> 브라우저 (사파리,크롬, 파이어폭스 등등 에서 돌아감) 

 

@keyframes 

브라우저마다 다르게 처리되도록 되어잇긴함

모든 브라우저에서 작동되게하는거 = crossBrowser 라고 함. 

다른 브라우저에서 쓰고싶은 방법은 검색해서 적용 ㄱ ㄱ 

==================================================================

 

li.fadein{}

요 선택자는 - > li.fadein li태그 안에서만 클래스 명을 사용하여 이 기능을 추가하겠따~ 라ㅡㄴ 의미 

 

 

#banner>ul>li{
    position:absolute;
    top:0px;
    display:none;
}

 

display:none; -> 그 영역을 사라지게 함. 

 

-> 그림들 싹 사라짐

 

 

CSS 에 요렇게 넣기

#banner>ul>li.on{
    display:block;

}

보여주고 싶은 영역에다만 on을 쓰기 

 

            <li class="fadein on "><img src="./images/image1.png"></li>

요렇게 하면 on 있는것만 나옴. 

 

이제 JS 를 적용 해서 차례대로 사진이 보이게 하기 

=====================================SCRIPT================================

 

 

css에서 3초다.

js 는 5초 정도이면 잘 작동됨. 

 

    <script type="text/javascript">
        function banner(){
            index=0;
            console.log(index);

        }
        
    setInterval(banner,5000);

    </script>

-> console에 5초마다 0이 만들어짐

 

    <script type="text/javascript">

        function banner(){
            index=0;
            index=index+1;
            console.log(index);
        }
        
    setInterval(banner,5000);

    </script>

-> 5초 뒤에 1이 생김 (console)에 -> 잘 분석해봐 index=0 초기화가 계속 되서 1 만나옴 

 

1이 올라갈 수 있게 세팅하기 **

 

JS function 밖에 변수를 선언하면 

 

 

    <script type="text/javascript">

        function banner(){
            index=0;  //이 변수는 위 함수에서만 설정된기~ 
            index=index+1;
            console.log(index);
        }
        
    setInterval(banner,5000);

    </script>

function banner 안에서 index=0; 이 설정된거 ! 

 

위를 아래처럼 바꾸기 

 

    <script type="text/javascript">
            index=0;
        function banner(){
            index++;
            console.log(index);
        }
        
    setInterval(banner,1000);

    </script>

 

우리 이미지는 5개니깐 5가 넘어가면 다시 0으로 만들기 

-> if 문 활용

 

 

        function banner(){
            if (index >=5){
                index=0;
            }
            index++;
            console.log(index);
        }

요롷게 하면 1~5 뜨고 다시 1~5 반복 (cosole.log의 위치ㅡㄹ 바꾸니깐 0~4로 나옴) 

 

배열로 담아서 이제 해당 부분을 

 

            bannerImg=document.querySelectorAll('.banner1>li');
            console.log(bannerImg.length);

            if (index >=5){
                index=0;
            }

            console.log(index);
            index++;

요기서 5를 

    <script type="text/javascript">
        var index=0;
        function banner(){


            bannerImg=document.querySelectorAll('.banner1>li');
            console.log(bannerImg.length);

            if (index >=bannerImg.length){
                index=0;
            }

            console.log(index);
            index++;
        }
    setInterval(banner,1000);

    </script>

이렇게 됨. bannerImg의 개수만큼까지 배열로 만듬. 

 

getElementsByClassName ->>>> a[0] 요롷게

 return 값 -> html collection<element> 이라는 개ㄴㅁ 

배열과 유사한 객체  그래서 []를 썼음. 

 

querySelectorALL ->>>> a.item(0)

querySelectorALL 의 값 -> NodeListOf<Element> (마우스 ㅋㅓ서 놔봐)

 노드의 콜렉션 - 객체를 따라가는 개념 

 

 

noelistof 를 사용할 때는

bannerImg.item(0) 이렇게 씀 (어제는 bannerImg[0] 이렇게 썻음) 

 

 

 

    <script type="text/javascript">
        var index=0;
        function banner(){

            bannerImg=document.querySelectorAll('.banner1>li');

            if (index >=bannerImg.length){
                index=0;
            }

            console.log(bannerImg.item(index));

            console.log(index);
            index++;
        }
    setInterval(banner,1000);

    </script>

요렇게 하고 console.log로 확인해봐사

 

이제 setAttribute를 쓰기 

 

bannerImg.item(index).setAttribute('class','show on'); //'class'를 'show on'으로 순차적으로 바꾸겠다.

이제 on을 순차적으로 (첫번쨰꺼는 켜지고 없애지고 등등..) 

 

개발자 - 생각하는 힘도 중요함. 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./20210325오전.css">

</head>
<body>
    <!-- 이미지 나오는 영역 먼저 만들거임. 
         그리고 버튼이 나오는 영역 만들기  -->
    <div id ="banner">
        <ul class ="banner1">
            <li class="fadein on"><img src="./images/image1.png"></li>
            <li class="fadein "><img src="./images/image2.png"></li>
            <li class="fadein "><img src="./images/image3.png"></li>
            <li class="fadein "><img src="./images/image4.png"></li>
            <li class="fadein "><img src="./images/image5.png"></li>
        </ul>
    </div>
    <div id ="bannerBtn">
        <ul>
            <li>버튼1</li>
            <li>버튼2</li>
            <li>버튼3</li>
            <li>버튼4</li>
            <li>버튼5</li>
        </ul>
    </div>

    <script type="text/javascript">
        var index=0;
        function banner(){

            bannerImg=document.querySelectorAll('.banner1>li');

            if (index >=bannerImg.length){
                index=0;
            }

            bannerImg.item(index).setAttribute('class','show on');
             //'class'를 'show on'으로 순차적으로 바꾸겠다. 
            

            console.log(index);
            index++;


        }

        setInterval(banner,1000);

    </script>
</body>
</html>

 

    <script type="text/javascript">
        var index=0;
        function banner(){
            bannerImg=document.querySelectorAll('.banner1>li');

            if (index >=bannerImg.length){
                index=0;
            }

            //bannerImg.item(index).setAttribute('class','show on');
             //'class'를 'show on'으로 순차적으로 바꾸겠다. 
            for (i=0; i<bannerImg.length; i++){
                console.log(i, index);
            }
            
            index++;
        }

        setInterval(banner,1000);
    </script>

 

console 쳌

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./20210325오전.css">

</head>
<body>
    <!-- 이미지 나오는 영역 먼저 만들거임. 
         그리고 버튼이 나오는 영역 만들기  -->
    <div id ="banner">
        <ul class ="banner1">
            <li class="fadein on"><img src="./images/image1.png"></li>
            <li class="fadein "><img src="./images/image2.png"></li>
            <li class="fadein "><img src="./images/image3.png"></li>
            <li class="fadein "><img src="./images/image4.png"></li>
            <li class="fadein "><img src="./images/image5.png"></li>
        </ul>
    </div>
    <div id ="bannerBtn">
        <ul>
            <li>버튼1</li>
            <li>버튼2</li>
            <li>버튼3</li>
            <li>버튼4</li>
            <li>버튼5</li>
        </ul>
    </div>

    <script type="text/javascript">
        var index=0;
        function banner(){
            bannerImg=document.querySelectorAll('.banner1>li');

            if (index >=bannerImg.length){
                index=0;
            }

            //bannerImg.item(index).setAttribute('class','show on');
             //'class'를 'show on'으로 순차적으로 바꾸겠다. 
            for (i=0; i<bannerImg.length; i++){

                if(i==index){
                    console.log('보여줘야할 인텍스 :',i);
                } else{
                    console.log('감춰야할 인텍스 :',i);
                }
            }
            index++;
        }
        setInterval(banner,1000);
    </script>
</body>
</html>

on 움직이게 하는...

 

버튼 전단계까지 완성 !!!!!! 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./20210325오전.css">

</head>
<body>
    <!-- 이미지 나오는 영역 먼저 만들거임. 
         그리고 버튼이 나오는 영역 만들기  -->
    <div id ="banner">
        <ul class ="banner1">
            <li class="fadein on"><img src="./images/image1.png"></li>
            <li class="fadein "><img src="./images/image2.png"></li>
            <li class="fadein "><img src="./images/image3.png"></li>
            <li class="fadein "><img src="./images/image4.png"></li>
            <li class="fadein "><img src="./images/image5.png"></li>
        </ul>
    </div>
    <div id ="bannerBtn">
        <ul>
            <li>버튼1</li>
            <li>버튼2</li>
            <li>버튼3</li>
            <li>버튼4</li>
            <li>버튼5</li>
        </ul>
    </div>

    <script type="text/javascript">
        var index=0;
        function banner(){
            bannerImg=document.querySelectorAll('.banner1>li');

            if (index >=bannerImg.length){
                index=0;
            }
            
            for (i=0; i<bannerImg.length; i++){

                if(i==index){
                    bannerImg.item(i).setAttribute('class','show on');
                } else{
                    bannerImg.item(i).setAttribute('class','show');
                }
            }
            index++;
        }
        setInterval(banner,1000);
    </script>
</body>
</html>

 

 

ctrl t -> 새탭

ctrl w-?> 닫기

ctrl shift t -> 닫은 창 다시 열기 

 

 

 

======================버튼 ========================================

 

1번 버튼 누르면 첫번째꺼 보도록 

버튼 클릭했을 떄 5초를 리셋하고 5초동안 보여주는 설정도,,ㅋ.......... ㅠㅠ하 

 

clearInterval -> interval 함수 없애줌. 다시 보여주고 한번 더 실행하게끔 

 

 

 

css btn 속성 추가

#bannerBtn>ul>li{
    font-size:20px;
    padding:20px;
    font-weight: bold;
    float:left;
}

float:left 주니 나열됨

 

        var index=0;
        banner(1); //첨에 index0번을 바로 실행할 수 있게 (안그럼 첨에 5초 아무것도안나옴)
        function banner(n){
            console.log(n);

 

console 값을 봐봐 2를 넣으면 undefined.

 

 

 

?????????????????????????? 이해가 안갓슴.. 2도 넣어봐

 

            if(n!= undefined)  //인자값없이 banner()실행될때

SetInterval을 실행될떄 어쩌구저쩌구 ㅠㅠㅠㅠㅠ하 으려워

 

 

 

-> 이제 버튼에 onclick event 넣기 

 

        <ul>
            <li onclick="banner(0)">버튼1</li>
            <li onclick="banner(1)">버튼2</li>
            <li onclick="banner(2)">버튼3</li>
            <li onclick="banner(3)">버튼4</li>
            <li onclick="banner(4)">버튼5</li>
        </ul>

이걸 놓고 console.log(n)인자값 어떻게 변하는지 쳌

 

 

-> 여기까지하면 버튼 누를때 해당 사진이 뜸 

 

 

        var rolling=null;

        rolling=setInterval(banner,5000); 

 

 

아 모르겠당. 초반까지 설명 이해하다가 중반부터 너무 어려워짐. 

집가서 복습 해야겟

 

 

==============================오후 시간 ================================

 

혼자 홈페이지 만들기 -> 서버 -> node.js -> 중앙화 배움  

 

 

 

3/29 담주 월욜 블록체인 특강 1-2시간 

블록체인 개념 등등. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./20210325오전.css">

</head>
<body>
    <!-- 이미지 나오는 영역 먼저 만들거임. 
         그리고 버튼이 나오는 영역 만들기  -->
    <div id ="banner">
        <ul class ="banner1">
            <li class="fadein"><img src="./images/image1.png"></li>
            <li class="fadein"><img src="./images/image2.png"></li>
            <li class="fadein"><img src="./images/image3.png"></li>
            <li class="fadein"><img src="./images/image4.png"></li>
            <li class="fadein"><img src="./images/image5.png"></li>
        </ul>
    </div>
    <div id ="bannerBtn">
        <ul>
            <li onclick="bannerBtn(0)">버튼1</li>
            <li onclick="bannerBtn(1)">버튼2</li>
            <li onclick="bannerBtn(2)">버튼3</li>
            <li onclick="bannerBtn(3)">버튼4</li>
            <li onclick="bannerBtn(4)">버튼5</li>
        </ul>
    </div>
    <script type="text/javascript">
        var index=0;
        var rolling=null;
        banner(0); //첨에 index0번을 바로 실행할 수 있게 (안그럼 첨에 5초 아무것도안나옴)
        function banner(n){
            bannerImg=document.querySelectorAll('.banner1>li');

            if (index >=bannerImg.length){
                index=0;
            }

            if(n!= undefined){   //인자값있을 때  banner()실행될때 != 같지 않다면 
                index=n;  //난 n 값을 무조건 실행하겠다. (버튼값)
            }
            
            for (i=0; i<bannerImg.length; i++){

                if(i==index){
                    bannerImg.item(i).setAttribute('class','fadein on');
                } else{
                    bannerImg.item(i).setAttribute('class','fadein');
                }
            }
            index++;
        }

        function bannerBtn(n){  // setInterval을 제어하기위해 / 지우기 위해 
            clearInterval(rolling);
            banner(n);
            rolling=setInterval(banner,5000); // 버튼 클릭하고 지우고 배너진행하고 다시 진행한다 뜻. 
        }

        rolling=setInterval(banner,5000); 

    </script>
</body>
</html>

 

 

 

로또 추첨 html  공부해보기 ~~ 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        #wrap{
        width:100%;
        }

        #head{
            width:800;
            height:100px;
            margin: 0 auto;
            margin-top: 50px;
            text-align:center;
        }

        #middle{
            width:800px;
            margin:0 auto;
            height: 100px;
            text-align:center;
        }

        #list{
            width:360px;
            height:90px;
            margin: 0 auto;
            text-align:center;
        }
#list>li{
    list-style: none;
    float:left;
    margin: 0 auto;
    text-align:center;
}

        #test1{
            background-color:red;
            display:inline-block;
        }
        #test2{
            background-color:blue;
            display:inline-block;
            color:white;
        }
        #test3{
            background-color:white;
            color:black;
            display:inline-block;
        }
        #test4{
            background-color:yellow;
            display:inline-block;
        }
        #test5{
            background-color:purple;
            color:white;
            display:inline-block;
        }
        #test6{
            background-color:orange;
            display:inline-block;
        }

        #test1, #test2, #test3, #test4, #test5, #test6{
            width:60px; 
            height:60px;
            border-radius:30px;
            text-align:center;
            border: 1px solid black;
            padding:15px;
            box-sizing: border-box;
        }
        
    </style>
</head>
<body>
    <div id=wrap>
        <div id="head">오늘의 숫자</div>
        <div id="middle">
            <button onclick="lotto(1)">랜덤</button>
            <button onclick="lotto(0)">스톱</button>
            <br><br><br><br>
            <ul id="list">
                <li><div id="test1">11</div></li>
                <li><div id="test2">22</div></li>
                <li><div id="test3">33</div></li>
                <li><div id="test4">44</div></li>
                <li><div id="test5">55</div></li>
                <li><div id="test6">66</div></li>
            </div>
        </div>
    </div>
    
    <script type="text/javascript">

    var rolling;
    var on=1;
    var off=0;
    let i=0


    function aa(n){
        if (i=1){
            number=Math.floor(Math.random() * (45)) +1;
            a=document.getElementById('test1');
            a.innerHTML=number
            number=Math.floor(Math.random() * (45)) +1;
            b=document.getElementById('test2');
            b.innerHTML=number
            number=Math.floor(Math.random() * (45)) +1;
            c=document.getElementById('test3');
            c.innerHTML=number
            number=Math.floor(Math.random() * (45)) +1;
            d=document.getElementById('test4');
            d.innerHTML=number
            number=Math.floor(Math.random() * (45)) +1;
            e=document.getElementById('test5');
            e.innerHTML=number
            number=Math.floor(Math.random() * (45)) +1;
            f=document.getElementById('test6');
            f.innerHTML=number
            list=document.querySelector('#list');
            li=document.querySelectorAll('li');
            list.appendChild(li[0]);
            if( n == undefined){
                rolling = setInterval(aa,2);
            } else {
                console.log(11111);
                clearInterval(rolling);
            } 
        } 
        else{ 
            let i=0 
        } 
    } 
          
    </script>

    <script type="text/javascript">
        var start;
        function lotto(key){
            if ( key == 1 ) {
                console.log("랜덤");
                start = setInterval(randomNumber,1000);
            } else if ( key == 0) { 
                console.log("스톱"); 
                clearInterval(start); 
            }
        }

        function randomNumber() {
            number=Math.floor(Math.random() * (45)) +1;  
            a=document.getElementById('test1');
            a.innerHTML=number
            number=Math.floor(Math.random() * (45)) +1;
            b=document.getElementById('test2');
            b.innerHTML=number  
            number=Math.floor(Math.random() * (45)) +1;
            c=document.getElementById('test3');
            c.innerHTML=number
            number=Math.floor(Math.random() * (45)) +1;
            d=document.getElementById('test4');
            d.innerHTML=number
            number=Math.floor(Math.random() * (45)) +1;
            e=document.getElementById('test5');
            e.innerHTML=number
            number=Math.floor(Math.random() * (45)) +1;
            f=document.getElementById('test6');
            f.innerHTML=number
            list=document.querySelector('#list');
            li=document.querySelectorAll('li');
            list.appendChild(li[0]); 
        } 

    </script>
    </body>
</html>

 

 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel ="stylesheet" href="./20210325오전.css">
</head>
<body>
    <div id ="banner">
        <ul class="banner1">
            <li class="fadein"><img src="./images/image1.png"></li>
            <li class="fadein"><img src="./images/image2.png"></li>
            <li class="fadein"><img src="./images/image3.png"></li>
            <li class="fadein"><img src="./images/image4.png"></li>
            <li class="fadein"><img src="./images/image5.png"></li>
        </ul>
    </div>
    <div id ="bannerBtn">
        <ul>
            <li onclick="bannerBtn(0)">버튼</li>
            <li onclick="bannerBtn(1)">버튼</li>
            <li onclick="bannerBtn(2)">버튼</li>
            <li onclick="bannerBtn(3)">버튼</li>
            <li onclick="bannerBtn(4)">버튼</li>
        </ul>
    </div>

    <script>
        var index=0;
        var rolling;

        banner(0);
        function banner (n){
            bannerImg=document.querySelectorAll('.banner1>li');

            if(index >=bannerImg.length){
                index=0;
            }

            if(n != undefined){
                index=n;
            }

            for (i=0; i<bannerImg.length; i++){
                if(i==index){
                    bannerImg.item(i).setAttribute('class', 'fadein on');
                } else{
                    bannerImg.item(i).setAttribute('class', 'fadein');
                }
            }
            index++;
        }
        function bannerBtn(n){
            clearInterval(rolling);
            banner(n);
            rolling=setInterval(banner,2000);
        }
        
        rolling=setInterval(banner,2000);
    </script>
</body>
</html>

 

 

CSS

/*CSS Style Sheet*/

*{
    margin:0;
    padding:0;
}
ul,li{
    list-style: none;
}
a{
    text-decoration: none;
}
img{
    line-height: 0;
    display:block;     /*이건 img와 li영역 맞추주기 */
}

#banner{
    position:absolute;
    top:300px;
}

#banner>ul>li{
    position:absolute;
    top:0px;
    display:none; /*안보여주는 기능 */
}

#banner>ul>li.fadein{
    animation:fadein 2s;  /*fadein을 2초 한다.****fadeout 은??? */
    
}




#banner>ul>li.on{
    display:block;  /*보여주도록 (block함) */

}


@keyframes fadein {
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

#bannerBtn>ul>li{
    font-size:20px;
    padding:20px;
    font-weight: bold;
    float:left;
}

 

 

 

 

 

숙제 : 사이트에 배너 움직이는거 적용해보기 / 로또 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

반응형

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글

[10일차]20210326 여태까지 배운거 적용해서 경일게임아카데미 홈페이지 만들기  (0) 2021.03.26
[9일차 연습]to do list, 움직이는 배너 imgs  (0) 2021.03.26
[8일차 연습] moving clock, return, document.getElementsByClassName, for, if, getElementsByClassName, Math.floor / Math.random  (0) 2021.03.25
[8일차]20210324 object, 함수 method 직접 찾아 적용하기  (0) 2021.03.24
[7일차 연습] to do list & moving clock  (0) 2021.03.24

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' Related Articles

티스토리툴바