[Vue.js] 영화 검색 사이트 예제 - 24. 영화 상세 페이지 정리, CSS Entities in Numeric Order 활용

스켈레톤 UI를 완성했으니, 이제 제대로 된 페이지를 구성할 단계이다.

 

상세 페이지 구조 구현

/src/store/movie.js를 확인해보면 다음과 같이 영화를 id로 검색하여 그 결과를 theMovie에 할당한다.

이를 movie 페이지에서 사용해야 하므로 /src/routes/Movie.vue에 computed 속성으로 추가한다.

추가된 속성을 활용하여 화면에 출력할 내용을 작성한다.

이 때, 기존에 스켈레톤 UI와 구분해야하므로 Template 태그를 이용해 두 그룹을 구분해준다.

이미 Movie.js에 loading 개념을 구현하였으므로 그것을 이용해 스켈레톤 UI와 실제 내용을 구분한다.

결과

로딩될 때는 스켈레톤UI가 뜨다가 로딩이 완료되면 내용이 잘 뜨는것을 볼 수 있다.

 

포스터 출력 및 구조 추가

CSS

중간 결과

여기서 .labels 속성을 보면 내부에 span 태그 3개가 있다.

이 요소들 사이사이에 동그라미 요소를 집어넣어 각 요소를 구분하고 싶다.

이 가운데 노란색 글자들이 labels 속성이다.

 

참조) Javascript, CSS, and (X)HTML entities in numeric order | CSS, JavaScript and XHTML Explained (evotech.net)

Javascript, CSS, and (X)HTML entities in numeric order

위 사이트에서 ctrl + F 로 middot을 검색해보면 다음과 같이 사용법이 뜬다.

오른쪽에서 두번째 셀이 사용법.

실제로 사용할 때는 다음과 같이 사용하면 된다.

결과

 

최종 결과

이렇듯 기본적인 골자를 구현했다.

하지만 아직 Ratings 부분을 구현해야 하며, 포스터의 해상도를 더 높여야 한다.

그것은 다음 포스팅에..