스파르타 웹개발 종합반 2주차 - JQuery 적용하기(포스팅박스)

이번에는 직접 jquery를 적용해보자.
이전에 만든 영화목록 사이트의 "영화 기록하기" 버튼을 누르면 사라져있던 post 화면이 나타나고, "닫기"버튼을 누르면 다시 사라지게끔 구현해보자.

• script창에 open_box와 close_box라는 함수를 정의해보자

 function open_box(){
               alert('박스 열기')
           }

 function close_box(){
                alert('박스 닫기')
           }

• open_box()는 "영화기록하기"라고 적혀있는 button에, close_box()는 "닫기"라고 적혀있는 버튼에 추가후 저장한뒤 실행해보자
  
  이렇게 작성하고 저장한뒤 사이트로 돌아가서 버튼을 누르면
  이와 같이 나타난다. 지금은 나타나거나 사라지는게 아니라 alert로 어느 곳을 누르면 함수가 작동되는지를 잘 보기 쉽게끔 한 것이고, 이제 alert 대신에 jquery의 함수로 진짜 사라지거나 나타나게 만들어보자

• 방법은 간단하다. 저번에 공부했던 show 와 hide를 alert 대신에 그것들로 바꿔주면 된다.

 function open_box(){
               $('#post-box').show()
           }

            function close_box(){
                $('#post-box').hide()
           }

• 이렇게 하면 '닫기'를 누를때는 사라지고 '영화기록하기'를 누르면 창이 나타나긴 하지만 사이트에 처음 들어갔을때 post 화면이 그대로 나타나있다. 원래 원하던 모습은 post 화면이 처음부터 사라져 있다가 '영화 기록하기'를 누르면 나타나야하므로 수정이 필요하다.

• style에서 id로 post-box라고 지정한 mypost class의 속성에서 display:none;을 추가해주면 된다.
  

• 최종 모습은 아래와 같다.