메인화면 (html + css) 완성

🚩 작업 기간

• 10.03 ~ 10.05 (3일)

🚩 화면

기존 OTT사이트들이 대부분 검정 배경 + 흰 글씨로 되어있는데, 영화 포스터 등에 집중이 잘 되라고 기획한 것을 알고는 있지만 매번 눈이 피곤해서 불편함을 느꼈다. 그래서 화이트 ~ 그레이 톤의 조합과 골라'보라'(..ㅎ)니까 포인트색은 보라색으로 설정해서 디자인을 해보았다.
전체적인 디자인과 배치는 키노라이츠에서 따왔으며, '키노회원들이 보고있어요!'(연령, 성별 필터 추천 기능)와 컬렉선 / 볼까말까 고민된다면?!(테마리스트, 인터뷰 포스팅 등)은 구현 기간을 고려하여 제외하였다. 키노라이츠가 최근에 도입한 커뮤니티 기능도 제외를 고려하였지만, 게시판 하나쯤은 만들어야겠다는 생각에 커뮤니티는 자리를 보존하게 되었다.

🚩 NEW!

swiper api를 처음 사용해보았다.

<!-- swiper CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

CDN과 Swiper js을 추가하고, 공식 문서를 따라서 클래스명을 지정해주면 문제없이 작동한다.
공식 사이트에 자세한 설명과 데모가 있으니 추가 내용은 공식 사이트를 참고할 것!

📍 Swiper 공식 사이트