[개인과제] 눈물의 영화 검색 사이트(3)

새벽로즈·2023년 10월 20일

TIL 과제 내일배움캠프

TIL

목록 보기

31/72

카드 UI CSS

줄거리랑 별점을 hover해서 나타나는 식으로 만들어 보기로 했다.
텍스트들이 천차만별이여서 일단 일정한 width와 height를 지정했고
글자가 많아지면 스크롤이 생기도록 만듬

카드의 그림자 만들기

box shadow는 쓸줄 알지만 섬세하게 컨트롤 하고싶어서 제네레이터를 사용함.
box shadow 제네레이터 : https://cssgenerator.org/box-shadow-css-generator.html

box-shadow: 4px 5px 14px -2px rgba(102,102,102,0.74);
-webkit-box-shadow: 4px 5px 14px -2px rgba(102,102,102,0.74);
-moz-box-shadow: 4px 5px 14px -2px rgba(102,102,102,0.74);

카드 UI의 디자인

일단 생각해보기에는 카드 별점은 오른쪽 상단에 두는게 이쁠거 같았고, 배경이 없으면 별점이 안보일거 같아서 반투명한 배경색을 채우기로 했고, 흰색으로 하니 흰배경의 포스터에서는 식별이 안되어서 로고의 메인컬러 중 하나인 핑크를 더하기로 함
근데 반투명하게 만드니까 푸터 컬러랑 아주 비슷하게 되었음. 물론 다른 컬러지만!
핑크랑 옐로라니 최고임.

#movies .card:hover .txt {
	/*bottom: 62px;*/
	transform: translate(0px, 0px);
}

#movies .card:hover .rating {
	transform: translate(0px, 0px);
	/*top: 7px;*/

}

☞ 마우스 호버 했을때 top과 bottom으로 조정했었는데 이재상튜터님이 성능이 더 좋아지려면 translate 속성을 써보라고 하셔서 손쉽게 변경했다. 대부가 마우스 호버전이고 쇼생크가 마우스 호버할 경우 이렇게 나타난다.

네비바 개선

홈과 검색을 넣었지만 그냥 무의미한거 같아서 그냥 검색을 돋보기아이콘으로 바꾸고 홈을 없애고 배치를 오른쪽으로 바꿨다.
[기존]

[수정]

그래서 기존의 justify-content를 center가 아닌 flex-end로 오른쪽 정렬함

검색창 개선

원래 코드는 form 태그가 없었다.
어제 해보니 안되는거 같다만.. 재상 튜터님이 key press보다 폼이 훨씬 더 좋은거라 하셔서
과감하게 div를 form으로 변경하고 event.preventDefault();를 써서 새로고침 안되도록 했다.

마음가짐

늘 생각해보고 코딩을 하는 편이다. 구상한대로 되면 짜릿하거든.. 은 무슨..
그냥 습관적으로 먼저 생각하고 코딩하는 편인데, 안되지않을까 라는 생각도 꽤 하는편..
아 되는구나. 정말 재상 튜터님 말씀대로 머리로 생각해보고 안될거같은데라는 생각보다 일단 생각멈추고 구현부터 먼저 해야할듯하다.

그리고 Api 관련으로 재상튜터님이 정말 잘 설명해주셨다. 커피와 빼빼로박스의 설명은 찰떡이였다 ㅇ_ㅇ..

swiper.js 여정의 시작

예전에 디자이너공부시절 온갖 코드를 갖고 와서 쓰긴 했었지만, 높은 이해도를 가지지는 못했다.
이번에는 swiper.js 관련해서 공부할겸 사이트에 게시해보기로 했다.

CDN 넣기
https://swiperjs.com/get-started

위 사이트로 가서 CDN을 코드에 넣었다.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>