1. input 박스의 값을 가져와보기

<div class="form-floating mb-3">
    <input id="url" type="email" class="form-control" placeholder="name@example.com">
    <label>영화URL</label>
</div>

// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();

// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능하지만!');

2. div 보이기 / 숨기기

// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
$('#post-box').hide();

// show()로 보이게 한다.
$('#post-box').show();

3. 태그 내 html 입력하기

<div> ~ </div> 내에, 동적으로 html을 넣고 싶다면 (예를 들어, 포스팅되면 → 카드 추가)

1) 버튼을 넣어보기

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

2) 버튼 말고, 카드를 넣어보기

// 주의: 홑따옴표(')가 아닌 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);