1. 별점
별점 html
<!DOCTYPE html>
<html lang="en">
<head>
<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 href="commentListView.css" rel="stylesheet">
<!-- jQuery 라이브러리 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body id="commentArea">
<div>
<hr>
<br>
<!-- 유저가 쓴 별점/코멘트가 없을 때: 별점 -->
<form id="starScoreArea">
<div id="commentTitle"><b>유저닉네임</b> 님, 이 콘텐츠 어떠셨나요?</div>
<span class="star">
★★★★★
<span>★★★★★</span>
<input type="range" oninput="drawStar(this)" value="1" step="1" min="0" max="10">
</span>
</form>
<br>
<hr>
<br>
<!-- 유저가 쓴 별점/코멘트가 있을 때 -->
<form id="starScoreArea">
<div id="commentTitle"><b>유저닉네임</b> 님의 평가입니다!</div>
<span class="star">
★★★★★
<span>★★★★★</span>
<input type="range" oninput="drawStar(this)" value="1" step="1" min="0" max="10">
</span>
<br><br>
<div id="loginUserComment">
이 영화... 대박적이다
<button>수정</button> <button>삭제</button>
</div>
</form>
<br>
<script>
const drawStar = function (target) {
$(".star span").css({ width: `${target.value * 10}%` });
}
</script>
<hr>
<table id="commentListTable">
<thead>
<tr>
<th colspan="3" id="commentInfo" width="70%" height="50px" align="left">현재 xx명의 UFO 이용자가 코멘트를 남겼습니다.</th>
<td><button id="commentListView">더보기</button></td>
</tr>
</thead>
<tbody>
<tr class="personalComment">
<th id="nickname" width="150px;">드라마광</th>
<td id="reviewStar" width="70px;">★ 3.0</td>
<td id="review_content" width="500px">이 영화... 꽤 볼만해요</td>
<!-- 타인이 쓴 코멘트만 신고 버튼 보여야 함 -->
<td id="review_report"><button>신고</button></td>
</tr>
<!-- 위의 내용을 반복 돌릴 것! 여기서부터는 하드코딩 -->
<tr>
<th>뿡뿡이</th>
<td>★ 2.0</td>
<td>이 영화... 나만 별론가</td>
<td id="review_report"><button>신고</button></td>
</tr>
<tr>
<th>재탕중</th>
<td>★ 5.0</td>
<td>이 영화보다 엄청난 영화는 없습니다</td>
<td id="review_report"><button>신고</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
별점 css
#commentArea {
background-color: rgb(23, 26, 33);
color : white;
}
/* 별점 시작 */
#starScoreArea {
font-size : 20px;
text-align : center;
}
#loginUserComment {
font-size : 13px;
}
#commentInfo {
font-size : 20px;
}
#commentListView {
color : rgb(107, 109, 106);
background-color: transparent;
text-decoration: none;
border: none;
font-size : 15px;
font-weight : bold;
cursor: pointer;
}
.star {
position: relative;
font-size: 40px;
color: #ddd;
border-radius : 10px;
}
.star input {
width: 100%;
height: 100%;
position: absolute;
left: 0;
opacity: 0;
cursor: pointer;
}
.star span {
width: 0;
position: absolute;
left: 0;
color: #64ffda;
overflow: hidden;
pointer-events: none;
}
/* 별점 끝 */
2.