2021-09-07 (148일차) 포트폴리오 코딩 작업 중 (artwork + ending + contact)

포트폴리오 코딩 작업 중 (artwork + ending + contact)

 

- artwork

artwork 스와이퍼 슬라이드 같은 경우 어제 portfolio부분에서  해본 후 완벽극복해버린 바람에!

쉽게 해냈다!

 

- ending credit

이 부분은 디자인할 때 내가 코딩으로 구현을 할 수 있을지 알아보기 위해 사전에 검색을 해봤었다.

marquee라는 태그를 이용해 css가 없이 구현이 가능한 걸 보고 바로 넣기로 결정했었다.

그리고 대충 틀을 잡아 만들어서 codepen에 라이브러리를 저장해두었다!

그리고 오늘 만들어놓은 라이브러리를 가져오고 글자크기, 자간조정을 하는 등 디자인을 해주었다.

영화관 느낌을 내려고 어두운 배경에서 흰색 자막이 올라가는 듯한 느낌이 났다. 원하는 느낌이었다!

하지만 검정화면에 자막만 올라가자니 심심해보일 것 같다는 생각이 들었다.

별 건 아니지만 'hover을 했을 때, 어떠한 효과를 주면 어떨까?'라는 생각을 하다가

조명처럼 빛나는 효과를 주면 좋겠다고 생각을 해서 css text-shadow를 이용하여 구현해냈다.

hover효과를 이용해 그저 자막이 올라가는 장면을 보다 더 재밌게 표현할 수 있었다!

 

- contact

고민이 꽤나 많았던 부분이다.

영화의 마무리를 표현하기 위해 슬레이트를 넣어주면 좋겠다는 생각을 했다.

그리고 영화관의 마지막 모습, 즉 관객이 가고 남은 영화관 좌석 사진을 배경이미지로 은은하게 넣어줬다.

background-image로 넣어준 후, 그 안에 form박스를 만들어 input과 textarea , button을 넣어주었다.

그리고 sns를 넣어주었다!