스파르타 SQL - 4주차/웹 개발 종합 - 2주차

오늘 공부한 내용 📋

---

1. 스파르타 SQL 4주차 수강 완료

• SubQuery 연습
• 전체 총 문법 블로그에 정리 완료

1. 스파르타 웹 개발 종합 - 2주차 진행 중

• JQuery : HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!
• css와 마찬가지로 선택자로 id 값을 통해 특정 버튼/인풋박스/div/..등을 가리키게됨
• div ~ /div 내에 넣는다
  

```jsx
<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">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <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>

-- 버튼 넣기
let temp_html = `<button>나는 추가될 버튼이다!</button>`;
$('#cards-box').append(temp_html);

--버튼 말고 카드 넣기
// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let title = '영화 제목이 들어갑니다';

let temp_html = `<div class="col">
				            <div class="card h-100">
				                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
				                     class="card-img-top" alt="...">
				                <div class="card-body">
				                    <h5 class="card-title">${title}</h5>
				                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
				                    <p>⭐⭐⭐</p>
				                    <p class="mycomment">나의 한줄 평을 씁니다</p>
				                </div>
				            </div>
				        </div>`;
$('#cards-box').append(temp_html);
```

• 포스팅 박스 열기/닫기 function 달아보기

  function open_box(){
      alert('열린다!')
  }
  function close_box(){
      alert('닫힌다!')
  }
  
  <button onclick="open_box()">영화 기록하기</button>
  
  <button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
  
  

회고 및 코멘트 🙏🏻

---

• 서브쿼리부분이 확실히 어렵긴 했다. 문법 보면서 연습해보기
• 정처기도 얼른 1회독하자!
• JQuery 좀 어렵다…연습만이 살길ㅠ