개발 쌩초보도 30분만에 배우는 제이쿼리-하

https://youtu.be/JzEMb5-wVIs

------------------------------------------본 강좌는 동영상으로도 보실수 있습니다. !

지난번에 상편에서 우리는 기초중의 기초를 조졌습니다.

사실 저는 그것조차도 생략하려고 하였으나, 이번시간에 배워볼 이벤트 처리에 대해

조금더 구체적인 이해를 할 수 있도록 기초다지기 시간을 가졌는데요.

지난시간에 배웠던 if문이라는게 아예 프로그래밍의 근간이라고 보시면 되요.

~ 하면, ~ 해라. 아무래도 프로그래밍은 명령이니까요.

마찬가집니다. 님들이 오늘 배울게 그게 답니다.

그리고 제이쿼리 강좌 끝낼거에요. 하기 싫으면 하기 싫다고 해...

해보고 재밌으면 저보다 훨씬 구체적인 강좌나 SDK들 인터넷에 널렸는데 그거 보세요 ㅋㅋㅋㅋ

자아 또 지난번처럼 html 틀을 만들고, 제이쿼리를 불러온뒤 스크립트를 열어재낍시다.

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            
        </script>
    </head>
    <body>

    </body>
</html>

그다음에. Document, ready, function을 열어 줍시다.

html document가 ready되면 function해라 뭐 이런 뜻이죠.

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function(){
                alert('문서가 로드 되었습니다');
            });
        </script>
    </head>
    <body>

    </body>
</html>

괄호를 작성하는 순서는 $(누구가).어떻게되면(function()) 이라고 쓴다음에

function()옆에다가 우리 if문에 했던거처럼 중괄호를 끼워넣으면

$(누구가).어떻게되면(function(){ 이거해라; }) 이 틀만 기억하시면 됩니다. 저 달러($)문법이 제이쿼리 문법이에요.

그리고 우리는 보통 문서가 로드된뒤에 동작들을 만들어줄테니까 저 document ready안에다가 작성을 할 겁니다.

지난시간에 배운것들을 마저 응용해봅시다.

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function(){
                
            });
        </script>
        <style>
            .strawberry{
                width:100px;
                height:40px;
                line-height: 40px;
                text-align: center;
                background:deeppink;
                color:white;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="strawberry">딸기</div>
    </body>
</html>

strawberry라는 class의 div를 하나 만들어주고, stylesheet로 간단하게 버튼 디자인을 해주었어요.

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function(){
                
                $(".strawberry").click(function(){
                    document.write("어딜 만져요");
                });
            });
        </script>
        <style>
            .strawberry{
                width:100px;
                height:40px;
                line-height: 40px;
                text-align: center;
                background:deeppink;
                color:white;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="strawberry">딸기</div>
    </body>
</html>

그런다음에 제이쿼리로 document.ready 안에다가 이렇게 명령을 해 줍니다.

만약에 ~ 스트로베리를 ~ 클릭하면 ~ 어딜 만져요라고 써라. 이런 뜻이죠.

만약에 strawberry가 id면 $("#strawberry") 이렇게 불러오시면 됩니다.

다시 테스트 해보고 싶으시면 새로고침을 누르면 본래 클릭전 document.ready 상태로 돌아오게 됩니다.

어쩐지 이상태로만 봤을땐 활용할곳이 딱히 떠오르지 않습니다.

그러나 css를 넣어서 응용해보시면 훨씬 활용의 폭이 넓어집니다.

<body>
        <div class="strawberry">로그인</div>
        <div class="login_bg">
            <div class="login">
                <form>
                    <input type="textbox" placeholder="이메일을 입력하세요">
                    <input type="password" placeholder="비밀번호를 입력하세요">
                    <input type="submit" value="로그인">
                </form>
            </div>
        </div>
    </body>

아까 분홍색 버튼 디자인을 그대로 활용해서 글자를 로그인이라고 바꿔주고

로그인 폼 양식을 하나 만들어주는데, 저는 모달디자인으로 만들거기 때문에 로그인 창 자체를 2겹으로 만들었습니다.

<style>
            .strawberry{
                width:100px;
                height:40px;
                line-height: 40px;
                text-align: center;
                background:deeppink;
                color:white;
                cursor: pointer;
            }
            .login_bg{
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
                background:rgba(0,0,0,0.5);
            }

            .login{
                position:absolute;
                top:calc(50% - 100px);
                left:calc(50% - 150px);
                width:300px;
                height:200px;
                margin:auto;
                background:#fff;
                box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
            }
        </style>

로그인창을 대강 디자인해줍니다.

화면이 이렇게 나올거에요. 대뜸 화면을 뒤덮어버리니 아무것도 할 수가 없습니다.

.login_bg{
                display:none;
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
                background:rgba(0,0,0,0.5);
            }

일단은 login_bg에가서 저 로그인 백그라운드부터 안보이도록 display:none;처리를 해줍시다.

<script>
            $(document).ready(function(){
                $(".strawberry").click(function(){
                    $(".login_bg").css({
                        "display":"block"
                    })
                });
            });
        </script>

그다음에 스크립트로 가셔서 '로그인 버튼(.strawberry)을 클릭하면' css를 이렇게 바꿔줘라(또는 추가해라) 라고 명령해주는 겁니다.

그러면 로그인버튼을 눌렀을때 diaplay가 none에서 block으로 처리되면서 로그인창이 다시 화면에 보이게 됩니다.

물론 본래 속성이 inline이었다면 display : inline 이렇게 처리해줘야 겠죠. flex였으면 flex가 되어야 하고요.

그런데 또하나 문제가 생깁니다. 한번 열었는데 닫기 기능이 없으니 빠져나갈수가 없습니다.

별도로 닫기버튼을 만들지 않고, 모달화면의 바깥쪽(투명한 어두운 부분)을 클릭하면 다시 모달이 사라지게 만들어 봅시다.

스크립트로 가서 다음과 같이 코드를 추가합니다

<script>
            $(document).ready(function(){
                $(".strawberry").click(function(){
                    $(".login_bg").css({
                        "display":"block"
                    })
                });
                $(".login_bg").click(function(){
                    $(".login_bg").css({
                        "display":"none"
                    })
                });
            });
        </script>

로그인 백그라운드를 클릭하면, 로그인 백그라운드의 display를 안보이게 처리해라 라고말입니다.

테스트해보시면 원활하게 "로그인버튼클릭->로그인화면 등장" "모달 배경 클릭->로그인화면 사라짐" 과정을 보실수 있습니다.

그런데 한 click이벤트에 여러 css를 추가해야하는 경우가 있습니다. 그럴때는 콤마(,)로 구분해주시면 됩니다.

<script>
            $(document).ready(function(){
                $(".strawberry").click(function(){
                    $(".login_bg").css({
                        "display":"block"
                    })
                });
                $(".login_bg").click(function(){
                    $(".login_bg").css({
                        "display":"none",
                        "margin-left":"-50px"
                    })
                });
            });
        </script>

육안으로 확인할 수 있도록 login_bg를 클릭하면 login_bg가 좌측으로 -50px 움직이는 코드를 추가해보았습니다.

클릭하고 -> 모달창 한번 닫고 -> 다시 클릭해 보시면

좌측으로 50px 당겨져서 우측이 50px 비는것을 보실 수 있습니다.

마지막입니다. 저렇게 단발성으로 끝나는 이벤트가 있고, on/off되는 이벤트가 있습니다.

<script>
            $(document).ready(function(){
                $(".strawberry").click(function(){
                    $(".login_bg").css({
                        "display":"block"
                    })
                });
                $(".login_bg").click(function(){
                    $(".login_bg").css({
                        "display":"none",
                        "margin-left":"-50px"
                    })
                });

                $('.strawberry').hover(function() {
                    $(this).css("background", "red");
                }, function(){
                    $(this).css("background", "green");
                });
            });
        </script>

hover(마우스를 클릭하지 않고 올려놓기만 함) 같은 경우는

hover가 됬을때와 아닐때를 저렇게 연속하여 처리할 수가 있습니다.

마찬가지로 hover처럼 on/off로 동작하는 Toggle이라는 이벤트도 있고,

select box의 값이 바뀌었을때 사용하는 change,

텍스트박스의 포커스 활성화 상태에 따라 focus 등등 이벤트는 여러가지가 있지만

제가 더이상 일일히 설명할 필요가 없습니다. 이제부터는 검색을 하고 필요에 따라 갈아 끼우기만 하면 된다! 이거죠.

절대 억지로 외우지 마세요 ㅋㅋㅋㅋ 아래 링크를 눌러보시면 다 정리 되있어요.

사전처럼 필요할때 들어가서 찾아서 보면 되는겁니다. 제이쿼리 기초 강좌는 여기까지 해서 마치겠습니다.

https://www.w3schools.com/jquery/jquery_selectors.asp

jQuery Selectors

jQuery Selectors jQuery selectors are one of the most important parts of the jQuery library. jQuery Selectors jQuery selectors allow you to select and manipulate HTML element(s). jQuery selectors are used to "find" (or select) HTML elements based on their

www.w3schools.com

https://www.w3schools.com/jquery/jquery_events.asp

jQuery Event Methods

jQuery Event Methods jQuery is tailor-made to respond to events in an HTML page. What are Events? All the different visitors' actions that a web page can respond to are called events. An event represents the precise moment when something happens. Examples:

www.w3schools.com

'개발관련' 카테고리의 다른 글

애드센스를 달고나서 티스토리 본문내 버튼이 안눌릴때 (0)	2020.08.09
node.js homebrew 설치후 node-v가 안 보일때 (0)	2020.07.31
JIRA 알림 메일 수신 거부, 지메일 필터(차단)하기 (0)	2020.07.12
[CSS, JS] 뒤로가기 스와이프 방지하는 두가지 방법 (0)	2020.06.19
개발 쌩초보도 30분만에 배우는 제이쿼리-상 (0)	2019.10.08

딸기별땅의 방구석 일상

개발 쌩초보도 30분만에 배우는 제이쿼리-하

'개발관련' 카테고리의 다른 글

댓글

티스토리툴바

개발 쌩초보도 30분만에 배우는 제이쿼리-하

'개발관련' 카테고리의 다른 글

관련글

댓글

티스토리툴바