팀프로젝트에서 영화 상세페이지를 레이어 팝업 형태로 만들어보고싶어 찾아보게 되었다!
HTML
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>레이어 팝업 상세페이지</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<a href="javascript:openPop()">카드이미지</a>
<div class="popup_layer" id="popup_layer" style="display: none;">
<div class="popup_box">
<div class="a1">
<a href="javascript:closePop();"><span class="m_header-banner-close" width="30px" height="30px">x</span></a>
</div>
<!--팝업 컨텐츠 영역 시작 -->
<form id="reviewForm" method="post">
<fieldset id="reviewer">
<legend>영화 리뷰 작성</legend>
<table>
<tr></tr>
<tr>
<td>작성자</td>
<td>
<input
type="text"
id="nameInput"
autocomplete="off"
placeholder="한글 2~5자리"
/>
</td>
<td><span id="nameResult"></span></td>
</tr>
<tr>
<td>비밀번호</td>
<td>
<input
type="password"
id="passwordInput"
autocomplete="off"
placeholder="숫자 4자리"
maxlength="4"
/>
</td>
<td><span id="passwordResult"></span></td>
</tr>
<!-- 리뷰 작성란 위에 별점 체크 기능 넣을 예정 -->
<tr>
<td>내용입력</td>
<td>
<textarea
id="reviewInput"
placeholder="최대100자."
autocomplete="off"
maxlength="100"
></textarea>
</td>
<td><span id="reviewResult"></span></td>
</tr>
<tr>
<td>별점등록</td>
<td>
<select id="starRating">
<option selected>별점선택</option>
<option value="1" data-thumbnail="../icon/free-star.png">⭐</option>
<option value="2" data-image="">⭐⭐</option>
<option value="3" data-image="">⭐⭐⭐</option>
<option value="4" data-image="">⭐⭐⭐⭐</option>
<option value="5" data-image="">⭐⭐⭐⭐⭐</option>
</select>
</td>
</tr>
</table>
<div>
<button id="btn" type="submit">리뷰 등록</button>
</div>
</fieldset>
</form>
<div id="reviews">
<!-- 리뷰 나타남 -->
</div>
<!--팝업 컨텐츠 영역 끝-->
</div>
</div>
</body>
<script src="./index.js"></script>
</html>예시로 만든 코드는 글자에 링크를 달았지만 프로젝트에서는 영화 포스터 이미지를 클릭할시 팝업창이 나오도록 구현해보려 한다!
JS
function openPop() {
document.getElementById("popup_layer").style.display = "block";
}
function closePop() {
document.getElementById("popup_layer").style.display = "none";
}프로젝트를 하면서 새로운 기능을 하나하나 알아 가며 이해하는중이라 코드를 설명하는것이 어렵다.....
계속 배워나가면서 남에게도 잘 설명할수있도록 발전하자!
프론트 엔드 시작하는 뉴비!