[내일배움캠프] AI트랙 - 2주차 웹프로그래밍_2_jQuery 다뤄보기

☞ [내일배움캠프] AI트랙 - 2주차 웹프로그래밍_2

---

[2주차 수업 목표]

1. Javascript 문법에 익숙해진다.

2. jQuery로 간단한 HTML을 조작할 수 있다.

3. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.

---

1. 포스팅박스 열기/닫기 기능 붙여보기

- 열기/닫기 기능을 사용하기위해 함수 선언 / open_box() / close_box()

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

-포스팅 박스 <열기(영화 기록하기) 버튼>에 function 달기

<button onclick="open_box()">영화 기록하기</button>

-포스팅 박스 <닫기 버튼>에 function 달기

<button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>

- 각 버튼 클릭 시 포스팅 박스가 열고 닫히는 걸 확인할 수 있다.

- 처음에는 포스팅박스가 없는 상태로 나오게 하기

• display: none; 설정. 화면을 열면 박스가 닫힌 상태.

<style>
	.mypost{
    	display: none;
	}
</style>

---