걷기 시작한 Coding Novice

Javascript/JQuery

jQuery 적용하기 (box hide / show)

Spell 2022. 5. 20. 12:55

버튼 클릭으로 박스를 열고 닫기 기능을 만들어서 넣어볼꺼다.

사용하기 앞서 수정전의 전체 코드는 더보기를 누르면 나온다.

 

더보기 
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <title>메모장 만들며 부트스트랩 연습</title>
    <link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'East Sea Dokdo', cursive;
        }
        .wrap {
            width: 1000px;
            margin: auto;
        }
        .comment{
            color: blue;
            font-weight: bold;
        }
        .postingbox{
            border: solid;
            border-color: black;
            border-radius: 10px;

            width: 500px;
            padding: 30px;
            margin: 0px auto 30px auto;
        }
    </style>
    <script>
        let count = 1;
        function hey() {
            if (count % 2 == 0) {
                alert('짝수!')
            } else {
                alert('홀수!')
            }
            count += 1;
        }
    </script>
</head>

<body>
    <div class="wrap">
        <div class="jumbotron">
            <h1 class="display-4">나홀로 링크 메모장!</h1>
            <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
            <hr class="my-4">
            <p class="lead">
                <a onclick="hey()" id="btn-posting-box" class="btn btn-primary btn-lg" href="#" role="button">포스팅 하기</a>
            </p>
        </div>
        <div class="postingbox" id="post-box">
            <div class="form-group">
                <label">아티클 URL</label>
                <input type="email" class="form-control" id="article-url" aria-describedby="emailHelp"
                       placeholder="URL">
<!--                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>-->
            </div>
            <div class="form-group">
                <label for="exampleFormControlTextarea1">간단 코멘트</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
            </div>
<!--            <div class="form-check">-->
<!--                <input type="checkbox" class="form-check-input" id="exampleCheck1">-->
<!--                <label class="form-check-label" for="exampleCheck1">Check me out</label>-->
<!--            </div>-->
            <button type="submit" class="btn btn-primary">Comment 저장</button>
        </div>
        <div class="card-columns" id="cards-box">
            <div class="card">
                <img class="card-img-top" src="https://images.unsplash.com/photo-1556195332-95503f664ced?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80" alt="Card image cap">
                <div class="card-body cardimg">
                    <h5 class="card-title"><a href="https://www.naver.com">여기에 기사 제목</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어감. 가나다라마바사 어쩌구저쩌구 블라블라블라 강약약중간약약강약중간약중간중간약약</p>
                    <p class="card-text comment">코멘트 란</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://images.unsplash.com/photo-1556195332-95503f664ced?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80" alt="Card image cap">
                <div class="card-body cardimg">
                    <h5 class="card-title"><a href="https://www.naver.com">여기에 기사 제목</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어감. 가나다라마바사 어쩌구저쩌구 블라블라블라 강약약중간약약강약중간약중간중간약약</p>
                    <p class="card-text comment">코멘트 란</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://images.unsplash.com/photo-1556195332-95503f664ced?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80" alt="Card image cap">
                <div class="card-body cardimg">
                    <h5 class="card-title"><a href="https://www.naver.com">여기에 기사 제목</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어감. 가나다라마바사 어쩌구저쩌구 블라블라블라 강약약중간약약강약중간약중간중간약약</p>
                    <p class="card-text comment">코멘트 란</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://images.unsplash.com/photo-1556195332-95503f664ced?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80" alt="Card image cap">
                <div class="card-body cardimg">
                    <h5 class="card-title"><a href="https://www.naver.com">여기에 기사 제목</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어감. 가나다라마바사 어쩌구저쩌구 블라블라블라 강약약중간약약강약중간약중간중간약약</p>
                    <p class="card-text comment">코멘트 란</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://images.unsplash.com/photo-1556195332-95503f664ced?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80" alt="Card image cap">
                <div class="card-body cardimg">
                    <h5 class="card-title"><a href="https://www.naver.com">여기에 기사 제목</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어감. 가나다라마바사 어쩌구저쩌구 블라블라블라 강약약중간약약강약중간약중간중간약약</p>
                    <p class="card-text comment">코멘트 란</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://images.unsplash.com/photo-1556195332-95503f664ced?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80" alt="Card image cap">
                <div class="card-body cardimg">
                    <h5 class="card-title"><a href="https://www.naver.com">여기에 기사 제목</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어감. 가나다라마바사 어쩌구저쩌구 블라블라블라 강약약중간약약강약중간약중간중간약약</p>
                    <p class="card-text comment">코멘트 란</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

 

 

일단 해당 기능을 넣을 버튼을 찾아야 한다.

<div class="jumbotron">
    <h1 class="display-4">나홀로 링크 메모장!</h1>
    <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
    <hr class="my-4">
    <p class="lead">
        <a onclick="hey()" id="btn-posting-box" class="btn btn-primary btn-lg" href="#" role="button">포스팅 하기</a>
    </p>
</div>

해당 구역의 '포스팅 하기' 버튼으로 해볼껀데, 과거에 연습하면서 달아둔 hey()라는 함수가 들어가 있다.

이 기능을 수정해서 넣어보자.

 

<a onclick="openclose()" id="btn-posting-box" class="btn btn-primary btn-lg" href="#" role="button">포스팅 하기</a>

openclose()라는 함수로 바꿔주었다. 그럼 위에서 해당 함수도 만들어 줘야겠지?

<script>
    function openclose() {
        alert ("test")
    }
</script>

해당 함수가 제대로 작동하는지 부터 확인하자는 의미에서 경고창을 임시로 만들었다.

그리고 해당 페이지에 가서 버튼을 누르면 다음과 같이 잘 작동됨을 알 수 있었다.

 

 

다음 화면을 보자

해당 페이지의 일정부분의 화면이다. "포스팅 하기"라는 파란색 버튼을 누르면 아래 적을 수 있는 박스를 접었다가 펼 수 있게 만들려고 하는거다. 즉, 숨겼다가 나타나게 하는 기능을 넣을꺼다.

 

저 박스의 상태가 보이는 상태인지 보이지 않는 상태인지 확인해줘야 한다.

개발자 도구 console창을 열고 확인해보자.

 

아 그전에 저 구역의 박스의 id값을 확인해 봐야겠다.

<div class="postingbox" id="post-box">
            <div class="form-group">
                <label">아티클 URL</label>
                <input type="email" class="form-control" id="article-url" aria-describedby="emailHelp"
                       placeholder="URL">
<!--                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>-->
            </div>
            <div class="form-group">
                <label for="exampleFormControlTextarea1">간단 코멘트</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
            </div>
<!--            <div class="form-check">-->
<!--                <input type="checkbox" class="form-check-input" id="exampleCheck1">-->
<!--                <label class="form-check-label" for="exampleCheck1">Check me out</label>-->
<!--            </div>-->
            <button type="submit" class="btn btn-primary">Comment 저장</button>
</div>

첫줄에 id="post-box"라고 나와있다.

 

이후 개발자 도구 console창에 입력해서 display가 어떤 상태인지 확인해보자.

$('#post-box').css('display')

현재 상태가 block임을 알 수 있다.

 

그럼 본격적으로 함수를 수정하자.

<script>
    function openclose() {
        let status = $('#post-box').css('display');
    }
</script>

status(상태)에 해당 id값을 가지는 구역의 display값을 담아줬다.

마지막에 세미콜론(;)은 붙여줘도 되고, 안해줘도 되는데 이왕이면 모두 통일하여 나타내는게 좋다.

(나는 붙여주는 습관을 길러보려고 한다. 앞으로도 당연히 실수하겠지만.. 노력해보자)

 

이후 console창에 로그로 남기기 위해 추가 수정을 해줬다.

<script>
    function openclose() {
        let status = $('#post-box').css('display');
        console.log(status);
    }
</script>

이후 해당 페이지에서 버튼을 클릭했는데 당연히 아무 변화가 없다. 개발자 도구의 console창을 확인해보자.

console.log(status)라는 문구로 인해 console창에 현재의 post-box의 상태가 기록된 것이다.

 

그럼 정말 이번에 정말로 기능을 넣어보러 가자 (매번 본격적이다 크으..)

<script>
    function openclose() {
        let status = $('#post-box').css('display');
        if (status == 'block') {
            $('#post-box').hide();
        } else {
            $('#post-box').show();
        }
    }
</script>

해당 코드는 위와 같은데 해석해보자면

함수의 이름은 openclose()

status에 post-box의 id를 가지는 구역의 display 값을 넣었다.

그리고 만약 status가 'block'이라면 구역을 숨기고

그게 아니라면 보이게 show해라!

 

저장 후 페이지를 새로고침 하여 확인해보자.

위와 같은 기본의 상태에서, 함수를 넣어준 버튼을 눌러보니?

사라졌다. 다시 눌러보면?

나타 났다! 제대로 적용이 완료되었다.

 

조금 더 다듬어 주자.

저 해당 버튼의 텍스트가 박스의 display값에 따라 '닫기'와 '열기'로 수정되도록 할꺼다.

 

저 버튼의 id만 따로 확인해보자.

<a onclick="openclose()" id="btn-posting-box" class="btn btn-primary btn-lg" href="#" role="button">포스팅 하기</a>

id="btn-posting-box"라는 걸 알 수 있다.

 

함수에 추가로 수정해주자.

<script>
    function openclose() {
        let status = $('#post-box').css('display');
        if (status == 'block') {
            $('#post-box').hide();
            $('#btn-posting-box').text('포스팅박스 Close');
        } else {
            $('#post-box').show();
            $('#btn-posting-box').text('포스팅박스 Open');
        }
    }
</script>

총 2줄이 추가 되었는데 다음과 같다.

$('#btn-posting-box').text('포스팅박스 Close');

$('#btn-posting-box').text('포스팅박스 Open');

하나는 if안에 들어가 있고, 하나는 else안에 들어가 있는데

if 쪽을 살펴보자면, 만약 status(상태)가 'block'일 경우 '#post-box'구역을 숨기고, '#btn-posting-box'의 텍스트를 '포스팅박스 Close'라고 나타내줘!

라는 의미이다.

 

잘 작동하짖 확인을 또 해보자.

 

일단 초기상태의 화면은 다음과 같은데

해당 버튼을 누르면? 저기 텍스트가 바뀌고 아래 박스가 숨겨질꺼다.

다시 누르면? 저기 텍스트가 다시 바뀌고 아래 박스가 보여질꺼다.

성공!

 

 

마지막 작업으로 애초에 처음 페이지에서 저 구역자체가 닫혀 있는 상태가 초기 상태면 좋지 않을까?

이는 CSS에서 수정을 해주면 된다.

<div class="postingbox" id="post-box">
            <div class="form-group">
                <label">아티클 URL</label>
                <input type="email" class="form-control" id="article-url" aria-describedby="emailHelp"
                       placeholder="URL">
<!--                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>-->
            </div>
            <div class="form-group">
                <label for="exampleFormControlTextarea1">간단 코멘트</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
            </div>
<!--            <div class="form-check">-->
<!--                <input type="checkbox" class="form-check-input" id="exampleCheck1">-->
<!--                <label class="form-check-label" for="exampleCheck1">Check me out</label>-->
<!--            </div>-->
            <button type="submit" class="btn btn-primary">Comment 저장</button>
</div>

해당 구역의 적용된 class는 "postingbox"다.

그럼 <style></style>안에 "postingbox"를 수정해주면 된다.

 

현재 저 class의 상태는 다음과 같다.

.postingbox{
    border: solid;
    border-color: black;
    border-radius: 10px;

    width: 500px;
    padding: 30px;
    margin: 0px auto 30px auto;
}

 

다음 처럼 수정해주면 된다.

.postingbox{
    border: solid;
    border-color: black;
    border-radius: 10px;

    width: 500px;
    padding: 30px;
    margin: 0px auto 30px auto;

    display: none;
}

전에 display가 none이라고 출력되면 보이지 않는 상태라는 걸 실습을 통해서 알고있다.

그래서 해당 줄을 추가해주었다.

 

저장 후, 페이지에 가서 새로고침 해보자.

좋아! 초기 상태가 이렇게 숨겨진 상태로 시작한다.

 

 

이와 같이 jQuery와 Javascript를 함께 사용이 가능하다. 왜냐고?

jQuery는 Javascript의 라이브러리니까! 누가 짜둔 Javascript이기에 가능하다.

 

잊지말자

라이브러리 Library는 주로 소프트웨어를 개발할 때 ㄱ컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임!

 

이를 잘 활용하면 당연히 좋겠지? 아직 갈 길이 멀다!

 

 

저작자표시 비영리 변경금지

'Javascript > JQuery' 카테고리의 다른 글

jQuery 연습하기  (0) 2022.05.26
jQuery 처음 다뤄보기  (0) 2022.05.20
JQuery 시작하기  (0) 2022.05.18

'Javascript/JQuery'의 다른글

  • 현재글jQuery 적용하기 (box hide / show)

관련글

댓글

티스토리툴바