본문 바로가기
스파르타 코딩 웹개발 종합반/2주차

2-4 JQuery 적용하기(포스팅 박스) _ .show & .hide / display:none

by 율✌️ 2022. 5. 13.
영화 기록하기 버튼을 누르면 숨겨진 창이 나타나고 닫기를 누르면 사라짐.

1. 각 버튼에 먼저 function을 연결시켜준다.

<button onclick="open_box()">영화 기록하기</button>
<button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
function open_box(){
}
function close_box(){
}

2. 타겟 창의 div 에 id 값을 주기. ex) <div id="post-box">

3. 타겟 창 제어하기.

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

 

 

 

**post-box를 시작부터 감춰두기:  css를 display:none 으로 설정