본문 바로가기
Full Stack 교육 회고록

9/20 css(flow, overflow,position) javascript(jquery, addremove)

순두부 호랑이 2022. 9. 20. 11:44
728x90
SMALL

<복습>

선택자
기호 가중치
-전체 * 0
-태그 태그이름 1
-클래스 . 10
-아이디 # 100
-자식 >
-자손 띄어쓰기
-후행 ~
-근접후행 +Flex
- Container
> display : flex;
> 축의 방향 flex-direction
> 정렬 (가로) row / column -> row기준일때 가로축을 가운데 정렬
justify-content
-> row기준일때 세로축을 가운데정렬
align-items
column 기준이라면? 반대로
- Item
-> flex-grow인라인
내부
외부
<link rel="stylesheet" href="">

 

방향이 아니라 기준이 이동하는 것이다

top은 위에가 기준이다

bottom의 아래가 기준이다

left는 왼쪽이 기준이다

right는 오른쪽이 기준이다

position
위치속성 기준
-static X -
-relative O 원래있던자리
-absolute O static이아닌부모, 없으면 body
-fixed O 무조건 body
 
<ex16.position.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>
        #parents div{
            width: 100px;
            height: 100px;
        }
        /* position: 위치를 움직이는 속성
        ** 위치 속성( top, bottom, left, right)
        : 움직이는 방향이 아니라 '기준'이 된다
        ex) top:10px;
            => 맨 웨에서부터 10px 떨어트려주겠다
        */
        #static{
        background-color: lightblue ;
        position: static;
        /* position의 디폴트 값, 위치속성이 비활성화된다 */
        top: 10px;
        left: 10px;
        }

        #relative{
        background-color: lightgreen ;
        position: relative;
        /* 위치속성이 활성화, 기준: 본인이 원래 있었던 위치, 기준점을 확인해보는 방법: (0,0) */
        top: 10px;
        left: 10px;
        }

        #parents{
            position: relative;
        }

        #absolute{
        background-color: lightpink ;

        position: absolute;
        /* 위치속성 활성화, 위치를 절대적 좌표로 이동 가능 기준:static이 아닌 부모, 부모가 없다면 body태그를 기준으로 */
        /* top:500px;
        left:500px; */
        bottom: 0px;
        }

        #fixed{
        background-color:lightyellow ;
        position: fixed;
        /* 위치 속성 활성화, 기준: 무조건 body 태그 */
        bottom: 0px;
        right: 0px;
        }

    </style>
</head>
<body>
    <!-- div#>div#*4 -->
    이곳은body태그
    <div id="parents">
        이곳은 parents div
        <div id="static">static</div>
        <div id="relative">relative</div>
        <div id="absolute">absolute</div>
        <div id="fixed">fixed</div>
    </div>
</body>
</html>
<ex17positionPrac.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>
    div{
        width: 100px;
        height: 100px;
        position: fixed;
    }
    #redbox{
        background-color:red;
        top:0px;
        left:0px;
    }
    #yellowbox{
        background-color:yellow;
        top:0px;
        right:0px;
    }

    #bluebox{
        background-color: blue;
        bottom:0px;
        left: 0px;
    }

    #greenbox{
        background-color: green;
        bottom: 0px;
        right: 0px;
    }
</style>

</head>
<body>
    <div>
    <div id="redbox"></div>
    <div id="yellowbox"></div>
    <div id="bluebox"></div>
    <div id="greenbox"></div>
    </div>
</body>
</html>

<ex18.overflow.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>
        div{
            background-color: lightgray;
            width: 150px;
            height: 150px;

            /* overflow 
            (1) visible: 영역이 벗어나도 그대로 보임 (default)
            (2) hidden: 영역이 벗어나면 전부 숨김처리
            (3) scroll: 스트롤 처리
            (4) auto: 영역이 벗어나면 스크롤, 벗어나지 않으면 영역 형태 유지
            */
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>
        <p>
            오늘은 9월 20일 입니다 날씨가 갑자기 추워져버렸네요 가을이 된 것 같아요 저는 요즘 공부를 하며 지내고 있어요 여러분도 파이팅 하시길 바랍니다
            오늘은 9월 20일 입니다 날씨가 갑자기 추워져버렸네요 가을이 된 것 같아요 저는 요즘 공부를 하며 지내고 있어요 여러분도 파이팅 하시길 바랍니다
            오늘은 9월 20일 입니다 날씨가 갑자기 추워져버렸네요 가을이 된 것 같아요 저는 요즘 공부를 하며 지내고 있어요 여러분도 파이팅 하시길 바랍니다
            오늘은 9월 20일 입니다 날씨가 갑자기 추워져버렸네요 가을이 된 것 같아요 저는 요즘 공부를 하며 지내고 있어요 여러분도 파이팅 하시길 바랍니다
            오늘은 9월 20일 입니다 날씨가 갑자기 추워져버렸네요 가을이 된 것 같아요 저는 요즘 공부를 하며 지내고 있어요 여러분도 파이팅 하시길 바랍니다
            안녕하세요
        </p>
    </div>
</body>
</html>

 

사용하지 않는게 좋다/ 구식코드이다/ 그렇지만 알고있어야된다/왜냐 남의코드를 해석할수 있어야 해서

면접질문: let과 var의 차이점은?

라이브러리와 프레임워크의 차이?

라이브러리:jquery

프레임워크:spring framework

 

라이브러리 주체 '나'<-라이브러리는 도와주는 도구

프레임워크 주체"프레임워크" <- 나는 가서 얌전히 말 잘듣고 규칙 잘 지키면서 집 쓰는 사람

 

언어 java =>spring(framework),js => jquery(라이브러리? 프레임워크?)

                       => java jsp/servlet spring springboot 전자정부프레임워크

html/css (필수)

                        => javascript Reat node.js(서버)....

<ex19float.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>
        img{
            float: left;
            margin-right: 15px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div>
        <h2>개에게 산책이 있다면 고양이에게 사냥놀이!</h2>
    </div>
    <div>
        <img src="https://dimg.donga.com/ugc/CDB/WEEKLY/Article/5b/4c/05/82/5b4c05820a99d2738de6.jpg"
        width="200px">
        <p>
            개의 문제 행동을 개선하는 대표적인 솔루션이 산책이다. 고양이의 문제 행동에도 이에 비견될 만한 중요한 솔루션이 있는데, 바로 사냥놀이다. 사냥놀이는 고양이의 본능을 자극하고 충족해준다. 스트레스를 줄이는 것은 물론, 보호자와 관계를 돈독히 하고 나아가 다묘가정에 평화를 가져다준다. 
            사냥놀이는 선택이 아닌 필수다. 야생성이 강한 고양이의 본능을 충족해줘야만 정신적 건강이 보장되기 때문이다. 야생 고양이가 하루 활동시간을 대부분 사냥에 소비하는 것과 달리, 집 고양이는 사냥시간이 10% 미만이거나 거의 없는 경우도 많다. 이로 인한 스트레스로 공격성 증가, 무기력과 비만, 다른 고양이와 다툼 등이 발생할 수 있으며 심한 경우 질환이 생기기도 한다. 
        </p>
    </div>
</body>
</html>

 

오후 javascript

<ex02jquery이벤트>

<!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">
    <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
    <title>Document</title>
</head>
<body>
    <p>로그인 폼을 작성해봅시다</p>
    <button id="btnP">p태그 다루기</button>
    <div id="div1">
        <h1 class="h">로그인폼</h1>
        ID : <input type="text" name="id"><br>
        PW : <input type="text" name="pw">
    </div>
    <p class="h"></p>
    <button id="btnDiv">div태그 다루기</button>
    <button id="btnH">클래스가 h인 태그 다루기</button>
    <button id="addAttr">id input 속성 추가</button>
    <button id="getId_Pw">input태그 다루기</button>
    <script>
        $("#btnP").click(function(){// 클릭이벤트 추가

            let p =$("p").html();// text==innerText
                                 //html==innerHTML
            //alert(p);
            $("p").html("<i>p태그</i> 텍스트 바꾸기");
        });
        $("#btnDiv").click(function(){
            $("#div1").css("background-color","pink");
        });
        $("#btnH").click(function(){
            $(".h").text("클래스가 h인 태그!");
            //this.이벤트가 발생된 요소
            $(this).text("바꾸기!");
        });
        $("#addAttr").click(function(){
            //attr: 요소의 속성에 접근
            //attr(속성이름, 속성값): 속성을 추가(변경)
            //attr(속성이름): 속성 값 가져오기
            $("input[name=id]").attr("placeholder","ID를 작성하시오");
            alert($("input[name=id]").attr("type"))
        });
        $("#getId_Pw").click(function(){
            //val()==value
            let id = $("input[name=id]").val();
            let pw= $("input[name=pw]").val();
            alert("아이디 : "+id+"비밀번호 : "+ pw);

            $("input[name=pw]").val("비밀번호");
        })
    </script>


</body>
</html>

<ex03addremove.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">
    <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
    <title>Document</title>
</head>
<body>
    <div>
        <img src="./img/pg1.gif">
    </div>
    <button id="btn1">div내부 앞에 추가</button>
    <button id="btn2">div내부 뒤에 추가</button>
    <button id="btn3">div외부 앞에 추가</button>
    <button id="btn4">div외부 뒤에 추가</button>
    <button id="btn5">img 1개 삭제</button>
    <button id="btn6">div 안 비우기</button>
    <button id="btn7">class 추가</button>
    <button id="btn8">class 삭제</button>
    <button id="btn9">부모요소 접근</button>

    <script>
        //.click: 최초에 html 페이지를 로딩할 때 선언되었던
        //요소에만 이벤트를 추가(이벤트바인딩)하고 더이상 동적으로
        //추가(바인딩)하지 않음( 정적바인딩)
        //on("click") : 동적으로 추가된 요소에 이벤트 추가 가능

        //$(이벤트를 부여할 요소의 부모(정적인 요소여야만 함!))
    $(document).on("click","#btn1", function(){
        $("div").prepend("<img src='./img/pg2.gif'>");
    });

    $(document).on("click", '#btn2', function(){
        $("div").append('<img src=\'img/pg3.gif\'>')
    })

    $(document).on("click","#btn3",function(){
        $("div").before("<img src='./img/pg3.gif'>")
    })
    $(document).on("click","#btn4",function(){
        $("div").after("<img class='i1'  src='./img/pg2.gif'>")
    })

    $(document).on("click","#btn5",function(){
        $(".i1").remove();
    })

    $(document).on("click","#btn6",function(){
        $("div").empty();
    })

    $(document).on("click","#btn7",function(){
        $("img").addClass("i1");
    })

    $(document).on("click","#btn8",function(){
        $("img").removeClass("i1");
    })

    $(document).on("click","#btn9",function(){
        $("img").parent().css("background-color","pink");
    })
    </script>
</body>
</html>

<ex04jQuery실습.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">
    <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
    <title>Document</title>
</head>
<body>
    <p class="h"></p>
    <button id='like'>좋아요</button><span>0</span>
    <br>
    <input type="text"><button class='writeCom'>댓글작성</button>
    <br>
    <div id="com">
        <p>첫댓글<button class='removeCom'>삭제</button></p>
    </div>

    <script>
        //좋아요 +1 -1
        $(document).on("click","#like",function(){
            let span = Number($("span").text())
            if($("#like").text()=="좋아요"){
                $("#like").text("좋아요 취소")
                $("span").text(span+1)
            }else{
                $("#like").text("좋아요")
                $("span").text(span-1)
            }
        })

        //댓글작성(최신순서대로)
        $(document).on("click",".writeCom",function(){
            let text=$("input").val()
            $("#com").prepend("<p>"+text+"<button class='removeCom'>삭제</button></p>");
            $("input[type=text]").val(""); //댓글창 비우기
        })

        //댓글 삭제
        $(document).on("click",".removeCom",function(){
            $(this).parent().remove()
        })
    
    </script>
</body>
</html>

<ex04jQuery실습 쌤답압.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">
    <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
    <title>Document</title>
</head>
<body>
    <p class="h"></p>
    <button id='like'>좋아요</button><span>0</span>
    <br>
    <input type="text"><button class='writeCom'>댓글작성</button>
    <br>
    <div id="com">  
        <p>첫댓글<button class='removeCom'>삭제</button></p>
    </div>

    <script>
       $(document).on("click","#like",function(){
            let like = Number($("#like+span").text()); //현재 좋아요 개수 가져오기
            $("#like+span").text(like+1); //1 더한 값을 다시 태그 사이에 텍스트로 설정
            $(this).text("좋아요 취소");
            //좋아요버튼(#like) -> 좋아요 취소 버튼(#dislike)
            $(this).attr("id","dislike");
       })
       //좋아요 취소
       $(document).on("click","#dislike", function(){
            let like = Number($("#dislike+span").text()); //현재 좋아요 개수 가져오기
            $("#dislike+span").text(like-1); //1 더한 값을 다시 태그 사이에 텍스트로 설정
            $(this).text("좋아요");
            //좋아요 취소 버튼(#dislike)-> 좋아요버튼(#like)
            $(this).attr("id","like");
       })

       //댓글추가
       $(".writeCom").click(function(){
        let com= $("input[type=text]").val();
        $("#com").prepend("<p>"+com+"<button class='removeCom'>삭제</button></p>");
        $("input[type=text]").val("");//댓글창 비우기
       })

       $(document).on("click",".removeCom",function(){
            //현재 사용자가 클릭한 버튼 기준(this)
            $(this).parent().remove();
       })


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

데이터 포맷: 데이터를 주고 받을 때는 특정한 형식으로 맞춰주어야 함

 

csv: 쉼표를 기준으로 항목을 구분하여 저장한 데이터

장점: 용량이 작다(많은 양의 데이터 전송 시 활용)

단점: 가독성이 떨어짐

활용: 간단한 테이블 작성, 읽는 속도가 중요한 부분

 

xml: 다목적 마크업 언어로 태그 등을 이용하여 데이터의 구조를 작성하는 기술

장점: 직관적이다(가독성이 좋음)

단점: 용량이 크고 데이터의 양이 많아지면 추출 속도가 떨어짐

활용: 단순 게임 옵션, 직접 데이터 수정이 잦은 부분

 

json '키-값'쌍으로 이루어진 데이터 오브젝트를 전달하기 위한 개방형 표준 포맷

장점: 용량이 적고 가독성이 좋다

 단점: 데이터 양이 많아지면 추출 속도가 떨어짐

활용: 자바스크립트 객체, Ajax(비동기통신)표준

 

java로 json 다루기

json-simple lib

gson lib

 

동기(synchronous)통신

:request가 있으면 해당 response가 전달될 때까지 다른 request를 요청할 수 없는 통신 방법

 

비동기통신

:request를 보내더라도 response를 언제 받아도 상관없이 다른 request를 요청할 수 있는 통신방법

 

<ex01.jquery>

<!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">
    <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
    <title>Document</title>
</head>
<body>
    <button onclick="req()">요청</button>

    <script>
        function req(){
            $.ajax({
                //어디로 요청할건지
                url:"http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20220901",
                //어떻게 요청할건지(요청방식-get/post/put/delete)
                //type 속성은 기본값이 get
                type:"get",
                //요청-응답 성공했을 때 수행할 작업
                success: function(date){
                    console.log(date);
                },
                //요청-응답 실패했을 때 수행할 작업
                error : function(){
                    alert("실패!");
                }
            });
        }
    </script>
</body>
</html>
728x90
LIST

'Full Stack 교육 회고록' 카테고리의 다른 글

9/22 jsp/servlet 실습  (0) 2022.09.22
9/21 jsp/servlet (was구조, servlet 특징, request vs response, url mapping)  (0) 2022.09.21
9/19 css(flex) javascript(j.query)  (2) 2022.09.19
8/16-css(박스모델, 신호등 표현) javascript(DOM, htmlelement객체)  (1) 2022.09.16
8/15 CSS(아이디, 클래스, 계층 선택자) JAVASCRIPT(화살표함수,함수)  (0) 2022.09.15

'Full Stack 교육 회고록' Related Articles

티스토리툴바