0827 SeSAC(새싹) 3기 11일차

육은별·2021년 8월 27일
0

SeSAC(새싹)

목록 보기
11/31
post-thumbnail

제이쿼리 -> 라이브러리

  1. 어떤 요소를 선택하는 것을 간편하게
  2. 함수가 잘 정리되어있다.

head에 추가하면 된다.

"선택자"
-> CSS로 HTML문서에 스타일을 입힐 요소를 말그대로 선택하는 문자.

document.getElementById("").innerHTML; //아이디
document.getElementsByClassName("s")[0].innerHTML; //클래스 이름 -> 요소들을 가져와야하기때문에 배열로 불러야한다.

document.getElementsByName("name")[0].value;
document.getElementsByTagName("buton");
-> 배열로 불러오면 button 코드 자체가 찍힌다.

.a{
} //클래스

#b1{
} //아이디

div{
} // 태그 그 자체

document.querySelector(".a").innerHTML; // 제일 처음에 있는 a 클래스를 가지고 옴

document.querySelectorAll(".a")[1].innerHTML; // 두번째걸 하고싶으면 querySelectorAll를 써서 배열을 사용

div .a{
} //div 안에 후손 태그인 a 클래스

div > .a{
} //div 바로 아래에 자식 태그인 a 클래스

.s > .a{
} //s 클래스 바로 아래에 있는 a 클래스

.s .a{
} //s 클래스에서 후손인 a 클래스

document.querySelector(".s .a").innerHTML; //s 클래스에서 후손인 a 클래스 출력 , 모든 공백도 출력

document.querySelector(".s .a").innerHTML.trim(); // 양쪽 공백 삭제 시켜줌

document.getElementsByClassName("s")[0].children; // s 클래스의 모든 자식이 출력된다.

document.getElementsByClassName("s")[0].children[0].children; // 후손 선택

document.getElementsByClassName("chil1")[0].parentElement; //바로 위에 부모 출력

document.getElementsByClassName("chil1")[0].nextElementSibling; //바로 다음 형제 출력

document.getElementById("").innerHTML; //아이디

-> 제이쿼리 : $(".parent").html(); -> 하나를 선택

$(".parent"); -> 모두 출력

$($(".parent")[1]).html(); -> 배열을 하는 순간 한번 더 감싸줘야한다.

$("input[name=test]").val(); // input 태그 내에서 name이 test인 거 출력

$("input[name=test]").val("코딩온"); //원래 value값을 인자로 덮어씀.

function button_event() {
           $( ".child2" ).html( "코딩온" );
        }

-> 안에 값을 코딩온으로 덮어씀.

(((".parent").children()[1]).html(); -> 배열은 한번 더 감싸기

$(".child1").parents(); -> parents는 타고 올라가서 html까지 나온다.

div:nth-child(1) -> div인 첫번째 자식을 선택

$(".child1").append("

2
"); -> 선택된 요소의 안에서 마지막에 하나를 추가하겠다. //태그인식(html(), append(), prepend())

$(".child1").prepend("

2
"); -> 선택된 요소의 안에서 제일 앞에 하나를 추가하겠다.

$(".child1").before("

2
"); -> 선택된 요소(태그) 바로 전에 삽입 -> 밖에

$(".child1").after("

2
"); -> 선택된 요소(태그) 바로 후에 삽입 -> 밖에

Where property is one of:

m - for classes that set margin
p - for classes that set padding
Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
x - for classes that set both -left and -right
y - for classes that set both -top and -bottom
blank - for classes that set a margin or padding on all 4 sides of the element
Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer .25
2 - (by default) for classes that set the margin or padding to $spacer .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer 1.5
5 - (by default) for classes that set the margin or padding to $spacer 3
auto - for classes that set the margin to auto
(You can add more sizes by adding entries to the $spacers Sass map variable.)

my-3 세로 / 위아래로 3만큼 띄워라

mx-3 가로 / 양옆으로 3만큼 띄워라

<body>
        <div class="mb-3">
            <input id="date" type="text">
            <input id="toDo" type="text">
            <button onclick="schedule_insert();" >입력</button>
            <button onclick="schedule_remove();" >삭제</button>
        </div>

        <div class="d-none mb-3" id="edit_box">
            <input id="toDo_edit" type="text">
            <button onclick="schedule_edit();" >변경</button>
        </div>



        <div class="month">
            <div id="1">
                <div>1일</div>
                <div></div>
            </div>

            <div id="2">
                <div>2일</div>
                <div></div>
            </div>

            <div id="3">
                <div>3일</div>
                <div></div>
            </div>
        </div>


        <script>
            function schedule_insert(){
                var day = $("#date").val(); //2

                var todo = $("#toDo").val();

                $($("#" + day).children()[1]).append("<div>" + todo +"</div>"); //$("#" + day) = #2
                
            }
        </script>

    </body>

삭제는 remove();

("").addClass();//태그안에클래스추가("").addClass(); //태그 안에 클래스 추가("#name")removeClass("d-none"); ///태그 안에 있는 클래스를 삭제한다 ( class="d-none" )

if(("#name").hasClass("d-none")){ // d-none이라는 클래스가 있나요? $("#name")removeClass("d-none"); } else {("#name").addClass("d-none");}

.month > div{
                display: inline-block;
                width: 200px;
                height: 200px;
                vertical-align: top;
                background-color: #eaeaea;
                border: 1px solid black;
            }
.month > div > div:nth-child(1) {
          		width: 100%;
          		background-color: white;
          		text-align: center;
            }

.month > div > div:nth-child(2) {
          			padding: 5px;
          			overflow-y: auto;
          			height: 160px;
            }
.to_do {
                width: 100%;
                background-color: #b8daff;
                margin-top: 5px;
                padding: 5px;
            }

(".abc").css("display","block");−>css변경(".abc").css("display", "block"); -> css 변경(".abc").css("display": "block", "background-color": "blue");

실습

  1. "날짜"와 "할일"을 입력하는 input 창을 만든다.
  2. 입력 버튼을 누를 시 해당 "날짜"에 "할일"을 추가한다.
  3. 입력 옆에 있는 삭제 버튼을 누를시 해당 날짜의 전체 일정을 삭제 한다.
  4. 달력에 있는 수정 버튼을 누를 시, 수정을 위한 input과 수정 버튼을 표시한다.
  5. 4의 수정 버튼을 누를 시 스케쥴을 수정하고, input 창을 안 보이게 한다.
  6. 스케쥴 옆에 있는 삭제 버튼을 누르면 해당 스케쥴만 삭제되게 한다.

실습 부트스트랩 활용

<html>
    <haed>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
    
        <style>

        </style>
    
    </haed>

    <body>
        <div class="container">
            <div class="input-group my-3">
                <input type="text" class="form-control mr-2" placeholder="날짜 입력">
                <input type="text" class="form-control" placeholder="할일 입력">
                <button type="button" class="btn btn-primary mx-2">추가</button>
                <button type="button" class="btn btn-secondary">모두 삭제</button>
            </div>

            <div class="row">
                <div class="col-md-4 col-12">
                    <div class="border" style="height: 200px;">
                        <div class="text-center">1일</div>
                        <div></div>
                    </div>
                </div>
    
                <div class="col-md-4 col-12">
                    <div class="border" style="height: 200px;">
                        <div class="text-center">2일</div>
                        <div></div>
                    </div>
                </div>

                <div class="col-md-4 col-12">
                    <div class="border" style="height: 200px;">
                        <div class="text-center">3일</div>
                        <div></div>
                    </div>
                </div>
    
            </div>
        </div>
    </body>
</html>
#완성된 실습

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
    </head>

    <body>
        <div class="container">
            <div class="input-group my-3">
                <input id="date" type="text" class="form-control mr-2" placeholder="날짜 입력">
                <input id="toDo" type="text" class="form-control" placeholder="할일 입력">
                <button type="button" class="btn btn-primary mx-2" onclick="schedule_insert();">추가</button>
                <button type="button" class="btn btn-secondary" onclick="schedule_remove();">모두 삭제</button>
            </div>

            <div class="input-group d-none my-3" id="edit_box">
                <input id="toDo_edit" type="text" class="form-control mr-2" placeholder="변경 내용 입력">
                <button type="button" class="btn btn-secondary" onclick="schedule_edit();">변경</button>
            </div>

            <div class="month row">
                <div class="col-md-4 col-12">
                    <div class="border" style="height: 200px;">
                        <div class="text-center">1일</div>
                        <div></div>
                    </div>
                </div>
    
                <div class="col-md-4 col-12">
                    <div class="border" style="height: 200px;">
                        <div class="text-center">2일</div>
                        <div></div>
                    </div>
                </div>

                <div class="col-md-4 col-12">
                    <div class="border" style="height: 200px;">
                        <div class="text-center">3일</div>
                        <div></div>
                    </div>
                </div>
            </div>
        </div>

        <script>

            var editTodo;

            function schedule_insert(){
                var day = $("#date").val() - 1; //배열때문에 0이 첫번째니깐
                $($($($(".month").children()[day]).children()[0]).children()[1]).append("<div class='mb-2'>" + "<span class='to_do'>" + $("#toDo").val() + "</span>" + "<button type='button' class='btn btn-primary mr-1' onclick='edit(this.parentElement);'>수정</button>" + "<button type='button' class='btn btn-secondary' onclick='del(this);'>삭제</button>" + "</div>");
                //this.parentElement 부모까지 가져와
            }

            function schedule_remove(){
                //parent인 div를 삭제해야 요소가 사라진다.
                $($(".to_do").parent()).remove();
            }

            function edit(obj){
                editTodo = obj;
                $("#toDo_edit").val($(editTodo).children("span").text());
                $("#edit_box").removeClass("d-none");
            }

            function schedule_edit(){
                $(editTodo).children("span").text($("#toDo_edit").val());
                $("#edit_box").addClass("d-none");
            }

            function del(obj){
                //parent인 div를 삭제해야 요소가 사라진다.
                $(obj).parent().remove();
            }
        </script>

    </body>
</html>

부트스트랩

✨container 쓰면 가운데로 우선 모인다.

<div class="d-flex align-items-center justify-content-center">

            </div> //정가운데로 정렬 -> 그리드 시스템 내에선 X

display
-> flex를 주면 "자식"태그들이 모두 inline으로 바뀌며 귀신처럼 원하는 대로 정렬이 가능해진다(세로 정렬 포함) -> 후손태그는 X.

grid 시스템
container에 m-0, p-0하면 안됨.
class="row"를 주는 순간 12등분 된다.
ex) col-8, col-4
gird로 전체적인 틀을 정렬하고 flex는 그 안에 요소들을 정렬.

<div class="col-md-4"> //-> md가 될때까지는 4를 차지

div 안에 div를 넣거나

               <div class="col-md-4 col-12">
                    <div class="border" style="height: 200px;">
                        <div class="text-center">2일</div>
                        <div></div>
                    </div>
                </div>

padding으로 안에 여백 주기

p-5
profile
육은별
Front-end Engineer, Web Developer & UX/UI Design
이전 포스트

0826 SeSAC(새싹) 3기 10일차

다음 포스트

0831 SeSAC(새싹) 3기 12일차

0개의 댓글

관련 채용 정보