[웹개발] #2주차 jQuery 이용한 페이지 만들기

jQuery란?

라이브러리.

편리하게 사용할 수 있도록 자바스크립트를 미리 작성해둔 것이다.

길고 복잡하게 썼던 코드를 아래처럼 작성할 수 있다.

document.getElementById("element").style.display = "none"; //Javascript

$('#element').hide(); //jQuery

 

jQuery 사용하기

1) [최근 개봉한 영화의 코멘트를 남길 수 있는 사이트] 만들기

* input 박스 값 가져오기, div 사용, 스타일 없음

<div class="mypost" id="post-box">
    <div class="form-floating mb-3">
        <input id="url" type="email" class="form-control" placeholder="name@example.com">
        <label>최근 개봉한 영화</label>
    </div>
    <div class="form-floating">
        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                  style="height: 100px"></textarea>
        <label for="floatingTextarea2">코멘트</label>
    </div>
    <div class="mybtns">
        <button type="button" class="btn btn-dark">기록하기</button>
    </div>
</div>

 

2) 코멘트 적을 공간 만들기 

<div class="mycards">
    <div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
        <div class="col">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">영화 제목</h5>
                    <p class="card-text">영화 설명.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">한줄 평</p>
                </div>
            </div>
        </div>
    </div>
</div>

 

3) '기록하기' 버튼 생성하기

*어두운 색 버튼

//기록하기 버튼
<button type="button" class="btn btn-dark">기록하기</button>