2-4_JQuery 적용하기(포스팅 박스)

Ⅰ. 이번 회차 학습 목표 (goal)

---

1. 배우고자 하는 것

• '기록하기' 버튼을 누르면 -> 'posting 박스' 가 나옴
• '닫기' 버튼을 누르면 -> 'posting 박스' 가 들어감

Ⅱ. 함수 만들어서 붙여보기

---

1. 전략

1) 쉬운 함수로 기본 logic 을 완성 = [뼈대 완성]
2) 좀 더 복잡한 함수로 원하는 [디테일 완성]

2. [뼈대 완성] open_box, close_box 함수 만들어서 -> 기록하기 및 닫기 버튼에 붙이기

1) 함수 만들기

<script>
    function open_box(){
        alert('박스 열기')
    }
    function close_box(){
        alert('박스 닫기')
    }
</script>

2) 기록하기 버튼에 붙이기

<div class="mytitle">
    <h1> 내 생애 최고의 영화들 🎬 </h1>
    <!-- ⭐⭐⭐ click 하면 -> hey() 함수 실행하게 하기 -->
    <button onclick="open_box()"> 영화 기록하기 ✍️ </button>

3) 닫기 버튼에 붙이기

<div class="mybtn">
    <button type="button" class="btn btn-dark">기록하기👇</button>
    <button onclick="close_box()" type="button" class="btn btn-light">닫기🙌</button>

</div>

4) 결과물

3. [디테일 추가]

1) jQuery 사용해서 동일 함수에 -> show, hide 작동하하게 하기

<script>
    function open_box(){
        $('#post-box').show()
    }
    function close_box(){
        $('#post-box').hide()
    }
</script>

2) 처음 부터 post 가 안 나타나게 하기

 .mypost {
    /* 처음 나올 때 = 안 보이게 하기 */
    display: none;  
}

3) 결과물

💭 What i learned

---

• '쉬운 함수 ex) alert' 를 써서 -> '뼈대' 를 먼저 만들고 -> jQuery 같이 어렵고, 살짝 복잡한 ex) id 를 만들어야 하는 작업을 하는 구나.
• 바로 수업을 듣고 > 그 자리에서 마크다운 틀을 잡아가면서, 동시에, 복습을 하는 시간을 가져도 좋겠다고 생각함.