메인 페이지에서 상세설명이 너무 길면 짤리거나 코멘트가 잘 안보이는 경우가 생겨 글씨 크기를 키우고 5줄 이상은 줄임표로 줄이도록 수정
수정된 코드 => 코멘트와 상세설명을 구분하기 위해 top-desc, top-comment라는 클래스를 추가로 만들었다.
let temp_html = `<div class="col">
<div class="card">
<div class="screen">
<div class="top">
<div class="top-desc">${desc}</div>
<div class="top-comment">등록자 코멘트 : ${comment}</div>
</div>
<img src="${image}"
class="card-img-top" alt="...">
</div>
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p>${stars}</p>
</div>
</div>
</div>`
<div class="main">
<h2 style="width: 80%; margin: 50px auto 30px auto; font-weight: 900;">비전5가 추천하는 영화 Best4</h2>
<!-- 기본 추천 카드 출력 -->
<div class="mycards">
<div id="cards" class="row row-cols-1 row-cols-md-4 g-3">
<div class="col">
<div class="card">
<a href={{url_for('sub1')}}>
<div class="screen">
<div class="top">
<div class="top-desc">‘가모라’를 잃고 슬픔에 빠져 있던 ‘피터 퀼’이 위기에 처한 은하계와 동료를 지키기 위해 다시 한번 가디언즈 팀과 힘을 모으고,
성공하지 못할 경우 그들의 마지막이 될지도 모르는 미션에 나서는 이야기</div>
<div class="top-comment"></div>
</div>
<img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000086/86883/86883_185.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">가디언즈 오브 갤럭시-Volume 3</h5>
<p>⭐⭐⭐⭐⭐</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<a href={{url_for('sub2')}}>
<div class="screen">
<div class="top">
<div class="top-desc">아무리 빨리 달려도 과거를 앞지를 순 없다 돔(빈 디젤)과 그의 패밀리 앞에 나타난 운명의 적 단테(제이슨 모모아). 과거의 그림자는 돔의 모든 것을 파괴하기 위해 달려온다. 단테에 의해 산산히 흩어진 패밀리들은 모두 목숨을 걸고 맞서야 하는 함정에 빠지고 마는데.. 달리거나 죽거나, 그들의 마지막 질주가 시작된다!</div>
<div class="top-comment"></div>
</div>
<img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000086/86996/86996_185.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">분노의 질주-라이드 오어 다이</h5>
<p>⭐⭐⭐⭐⭐</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<a href={{url_for('sub3')}}>
<div class="screen">
<div class="top">
<div class="top-desc">사회초년생 ‘도하’와 인디 뮤지션 ‘태인’이 장거리 연애를 시작하면서 벌이는 언택트 러브 스토리</div>
<div class="top-comment"></div>
</div>
<img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000086/86912/86912_185.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">롱디</h5>
<p>⭐⭐⭐⭐⭐</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<a href={{url_for('sub4')}}>
<div class="screen">
<div class="top">
<div class="top-desc">'붉은 봉투를 줍는 자, 운명을 거스를 수 없다!' 혈기왕성한 형사 우밍한은 중요한 사건 현장에서 도로에 흩어진 증거물을 수집하던 중 의문의 붉은 봉투를 발견하고 무심코 줍는다. 그때부터 밍한에게 벌어지는 불길한 사건들! 자신에게 다가온 '운명'을 한사코 거부하던 밍한은 거듭되는 생명의 위협에 마지못해 인생 최대의 결심을 하는데... 얼결에 '부부'가 된 귀신과 최악의 빌런을 잡기 위해 인간+귀신 콤비가 벌이는 극강의 공조 수사! 코믹과 액션을 버무리고 감동과 반전까지 가미한, 풀옵션 오감으로 즐기는 블록버스터. 인류애 넘치는 콤비의 격정적인 공조가 마침내 시작된다! 이 콤비도, 두 사람의 공조 수사도 완전히 다 미쳤다!!!</div>
<div class="top-comment"></div>
</div>
<img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000087/87003/87003_185.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">메리 마이 데드 바디</h5>
<p>⭐⭐⭐⭐⭐</p>
</div>
</div>
</div>
<h2 style="width: 80%; margin: 80px auto 30px 0px; font-weight: 900;">유저가 추천하는 영화</h2>
</div>
추가한 css코드
.top-desc {
font-size: 25px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 5; /* 표시할 줄의 개수 */
-webkit-box-orient: vertical;
text-overflow: ellipsis; /* 기준 이상의 글은 ...(ellipsis)로 줄이기 */
margin-bottom: 30px;
}
.top-comment {
font-size: 20px;
}
프로젝트를 마치고 코드정리를 하고 궁금했던 부분을 물어보는 시간을 가지기로 했다.
1. 관람평 삭제 기능을 구현하기 위해 아이디와 관람평을 합쳐놓은 변수값 sum을 만듦. 해당 값을 찾아 삭제하는 기능을 추가
굳이 sum 을 만든 이유는 코멘트만 같거나 아이디만 같은 관람평을 삭제하려 할 경우 데이터베이스에 들어온 순서에 따라 원하지 않는 데이터가 삭제되는 경우을 방지하기 위해서이다.
이는 번거로우므로 처음부터 _id값도 저장하고 불러오도록 하면 sum이라는 변수를 만들지 않아도 삭제 기능을 코드를 크게 바꾸지 않고 구현가능하다.
2. 로고가 있는 배너의 경우에는 항상 화면 상단에 있게 하기 위해서 z-index:3, position:fixed 코드를 추가했다.
3. 배너때문에 main클래스의 상단 부분이 가려져 아래 코드를 추가해 배너 아래부터 main이 추가되도록 했다.
.main {
padding: 200px 0 100px 0;
height: 2500px;
}
4. 등록 팝업 페이지는 index창에 페이지를 만들어놓고 등록 버튼에 visibilty기능을 추가해 기본적으로 숨겨놓았다가 클릭 시 나타나도록 만들었다.
