<이공계기술전문연수> 3. jQuery(3일차)

<실습>

1. 문제

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js">
    </script>
</head>

<body>




    <style>
        div {
            border: 2px solid black;
            width: 100px;
            height: 100px;
            margin: 5px;
            float: left;
        }
    </style>

    문제3<br>
    다음 2개의 그림 중 선택한 후 복사 될 수 있도록 구현하여라 <br>
    <fieldset style="width:300px; margin:30px">
        <legend>2개의 그림 중 선택하시오.</legend>
        <div id="img1" style="background-color:red;">

        </div>
        <div id="img2" style="background-color:blue;">

        </div>
    </fieldset>

    <fieldset style="width:800px;  margin:30px">

        <legend>복사되는 공간</legend>

        <div id="div1">

        </div>
        <div id="div2">

        </div>
        <div id="div3">

        </div>
        <div id="div4">

        </div>
        <div id="div5">

        </div>
        <div id="div6">

        </div>
        <div id="div7">

        </div>
    </fieldset>



    <button id="btn1"> 초기화 </button>

    <script>
        var color;
        $(function() {
            $("div").click(function() {
                var index = $("div").index(this); //**중요문법 //몇번째 인덱스인지 확인
                //eq(index)까지 가능!

                if (index > 1) {
                    $(this).css("background-color", color);
                } else {
                    color = $(this).css("background-color");
                }
            });


            //            $("#img1").click(function(){
            //                color = $(this).css("background-color");
            //                alert(color);
            //                
            //            });
            //            $("#img2").click(function(){
            //                color = $(this).css("background-color");
            //                
            //            });
            //            $("#div1").click(function(){
            //               $(this).css("background-color",color);                
            //            });
            //            $("#div2").click(function(){
            //               $(this).css("background-color",color);                
            //            });
            //            $("#div3").click(function(){
            //               $(this).css("background-color",color);                
            //            });
            //            $("#div4").click(function(){
            //               $(this).css("background-color",color);                
            //            });
            //            $("#div5").click(function(){
            //               $(this).css("background-color",color);                
            //            });
            //            $("#div6").click(function(){
            //               $(this).css("background-color",color);                
            //            });
            //            $("#div7").click(function(){
            //               $(this).css("background-color",color);                
            //            });
            $("#btn1").click(function() {
                color = "transparent";
                $("div").each(function(index, item) {
                    if (index > 1) {
                        $(item).css("background-color", color);
                    }
                });
            });

        });
    </script>

</body>
</html>

2. tab_menu

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<style>
    li {
        height: 40px;
        line-height: 40px;
    }

    ul {
        list-style: none;
        font-weight: bold;
    }

    span {
        float: right;
    }

    .wrap {

        width: 250px;
        margin: 0;
        padding: 0;
    }

    .ul_1 {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .li_1:hover {
        background-color: #675c7c;
        color: white;
    }
    .li_2:hover,
    .li_4:hover {
        background-color: #d3c99c;
        color: #675c7c;
    }
    .li_3:hover,
    .li_5:hover {
        background-color: #d3ceb8;
        color: black;
    }
    .li_3,
    .li_5 {
        color: #d3ceb8;
        ;
    }
    .li_2,
    .li_3,
    .li_4,
    .li_5 {
        display: none;
    }
</style>

<script>
    $(function() {
        
        var checking1 = 0;
        var checking2 = 0;
        var checking3 = 0;
        var checking4 = 0;
        
        $(".li_1").eq(1).click(function() {
            if(checking1 == 0) {
                $(".li_2").css("display", "block");
                $(".span1").html("-");
                checking1 = 1;
            }else if(checking1 == 1){
                $(".li_2").css("display", "none");
                $(".span1").html("+");
                checking1 = 0;
            }
        });
        
        $(".li_1").eq(2).click(function() {
            if(checking2 == 0){
            $(".li_4").css("display", "block");
            $(".span3").html("-");
            checking2=1;   
            }else if(checking2 == 1){
            $(".li_4").css("display", "none");
            $(".span3").html("+");    
            checking2 = 0;
            }
        });
        $(".li_2").eq(5).click(function() {
            if(checking3==0){
            $(".li_3").css("display", "block");
            $(".span2").html("-");
            checking3=1;
                
            }else if(checking3==1){
            $(".li_3").css("display", "none");
            $(".span2").html("+");  
            checking3=0;
            }
        });
        $(".li_4").eq(3).click(function() {
            if(checking4==0){
            $(".li_5").css("display", "block");
            $(".span4").html("-");
            checking4=1;
            }else if(checking4==1){
            $(".li_5").css("display", "none");
            $(".span4").html("+");   
            checking4=0;
            }
        });
    });
</script>

<body>
    <div class="wrap">
        <ul class="ul_1">
            <li class="li_1">Home</li>
            <li class="li_1">JavaScript<span class="span1">+</span></li>
            <ul class="ul_2">
                <li class="li_2">Cookies</li>
                <li class="li_2">Events</li>
                <li class="li_2">Forms</li>
                <li class="li_2">Games</li>
                <li class="li_2">Images</li>
                <li class="li_2">Navigations<span class="span2">+</span></li>
                <ul class="ul_3">
                    <li class="li_3">CSS</li>
                    <li class="li_3">JavaScript</li>
                    <li class="li_3">JQuery</li>
                </ul>
                <li class="li_2">Tabs</li>
            </ul>
            <li class="li_1">Tutorials<span class="span3">+</span></li>
            <ul class="ul_4">
                <li class="li_4">HTML</li>
                <li class="li_4">CSS</li>
                <li class="li_4">JavaScript</li>
                <li class="li_4">Java<span class="span4">+</span></li>
                <ul class="ul_5">
                    <li class="li_5">JSP</li>
                    <li class="li_5">JSF</li>
                    <li class="li_5">JPA</li>
                    <li class="li_5">Contact</li>
                </ul>
            </ul>
            <li class="li_1">Contact</li>
            <li class="li_1">Upload script</li>
        </ul>
    </div>
</body></html>

3. 회원가입

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<style>
    .wrap>.header {

        border-bottom: 1px solid darkblue;
    }
    .top>h2{
        font-size: 30px;
    }
    .mid {
        border: 1px solid darkgray;
        padding: 40px;
    }
    .mid>.mid_1 {
        background-color: #f3f7fa;
        text-align: center;
    }
    #email_ok{
        font-size: 30px;
        color: #0e77d9;
    }
    #info_ok{
        margin-top: 15px;
        font-size: 18px;
           
    }
    .mid_4 {
        padding-bottom: 20px;
        border-bottom: 1px solid darkgray;
    }
    .mid_5{
        padding-top: 20px;
        padding-bottom: 20px;
    }
    #bogi {
        float: right;
        text-decoration-line: none;
    }
    .select_1,
    .select_2 {
        border: 1px solid darkgray;
    }


    #daum {
        box-sizing: border-box;
        background: #1f4787;
        border: 1px solid #1f4787;
        font-size: 20px;
        margin: 0;
        display: inline-block;
        cursor: pointer;
        color: white;
        text-align: center;
        margin-left: 700px;
    }
    .paran{
        color: dodgerblue;
    }
    li{
        color: #707070;
    }
    label{
        display: inline-block;
    }

</style>

<body>
    <div class="wrap">
        <div class="header">
            <h1><a href="#"><img src="image/logo.png"></a></h1>
        </div>
        <div class="top">
            <h2>회원가입</h2>
        </div>
        <div class="mid">
            <div class="mid_1">
                <p id="email_ok">이메일 인증 성공</p>
                <p id="info_ok">간단한 정보 입력으로 가입을 완료하세요.</p>
            </div>
            <h3 class="mid_2">이용약관 확인 및 동의</h3>
            <div class="mid_3">
                <label><input type="checkbox">개인정보 수집 및 이용에 동의<span class="paran">(필수)</span>
                </label>
                <ul class="select_1">
                    <li>수집항목 : 이름, 휴대전화번호, 생년월일, 비밀번호</li>
                    <li>수집·이용목적 : 회원제 서비스 제공</li>
                    <li>보유 및 이용기간 : 회원탈퇴 시 까지</li>
                    <li>본 동의는 안랩닷컴 서비스 제공을 위한 개인정보 수집/이용에 대한 동의로, 동의하지 않으실 경우 안랩닷컴 서비스 제공이 불가능합니다.</li>
                </ul>
            </div>
            <div class="mid_4">
                
                <label><input type="checkbox">이용 약관에 동의
                    <span class="paran">(필수)</span>
                </label>
                <a href="#" id="bogi">이용 약관 전체 보기></a>
            </div>
            <div class="mid_5">
                <label><input type="checkbox">선택 정보 수집 및 이용에 동의<span class="paran">(선택)</span></label>
                <ul class="select_2">
                    <li>수집항목 : 일반 전화번호</li>
                    <li>수집·이용목적 : 회원 식별 및 연락</li>
                    <li>보유 및 이용기간 : 회원탈퇴 시 까지</li>
                </ul>
            </div>
            <div class="bottom">
                <button type="button" id="daum" >다음</button>
            </div>
        </div>
    </div>

    
    
    
    <script>
        $(function(){
            $("#daum").click(function(){
                
            });
    
        })
    </script>
</body>

</html>

'이공계전문기술연수 > JavaScript | jQuery' 카테고리의 다른 글

<이공계기술전문연수> 2. jQuery(2일차) (0)	2019.09.25
<이공계전문기술연수> 3. JavaScript(3일차) (0)	2019.09.25
<이공계전문기술연수> 2. JavaScript(2일차) (0)	2019.09.24
<이공계기술전문연수> 1. jQuery(1일차) (0)	2019.09.23
<이공계전문기술연수> 1. JavaScript(1일차) (0)	2019.09.22

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

<이공계기술전문연수> 3. jQuery(3일차)

'이공계전문기술연수 > JavaScript | jQuery' 카테고리의 다른 글

'이공계전문기술연수 > JavaScript | jQuery' 카테고리의 다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역