[웹] 반응형 웹 만들기

* 주의 *

미적 감각이 많이 떨어진 공대생이 만들었습니다.

 

---

< 구현 내용들 >

0. 반응형 웹 구현하기

0-1. CSS : @media를 사용하여 창의 너비에 따라서 적용하는 CSS를 다르게 하였습니다.

0-2. Js : 일부 기능을 window.matchMedia(query).matches를 사용하여 역시 창의 너비에 따라서 적용하게 다르게 적용하도록 하였습니다.

1. 메뉴바 

- position: fixed를 통하여 상단에 고정하도록 하였습니다.

- hover과 overflow: hidden을 통하여 div의 height를 조절하는 형식으로 구현하였습니다.

- @media(hover: hover)를 사용하여 hover 속성을 제어하였습니다.

- PC에서 float을 주고 나머지는 position: absolute를 사용하여 위치를 제어하였습니다.

- Jquery의. click메서드를 사용하였습니다.

2. 음악 재생 바 

- CSS @keyframes를 사용하여 height를 바꾸는 방식으로 구현하였습니다.

- animation-delay를 줘서 5개의 바가 서로 다르게 움직이게 만들었습니다.

- play이라는 클래스의 유무에 따라서 애니메이션을 주었습니다.

- Jquery를 사용하여 재생과 정지를 제어하였습니다.

3. 슬라이더 쇼

- 처음에는 직접 구현하였지만 좀 더 아름다운 것을 찾다가 swiper을 사용하여 구현하였습니다.

- https://swiperjs.com/get-started

4. 글자 타이핑 효과

- setInterval를 사용하여 일정 시간이 지날 때마다 한 글자씩 추가하는 방식으로 구현하였습니다.

5. 스크롤에 따라 내용 나타내기

- IntersectionObserver를 사용하여. isIntersectiong을 통해 나타나거나 사라지게 하였습니다.

---

< 학습 사이트들 >

swiper  :

https://swiperjs.com/get-started

https://swiperjs.com/demos

타이핑 효과 : 

https://gahyun-web-diary.tistory.com/2

스크롤에 반응하기 :

https://blueshw.github.io/2019/10/13/show-items-on-scroll/

https://elvanov.com/2195

 

---

< 출처 >

게임 홈페이지 : https://www.afkarena.com/

-> 여러 사진 및 배경음악, 페이지의 구성을 참조하였습니다.

공식 카페 : https://cafe.naver.com/afkarenakr

-> 여러 사진을 참조하였습니다.

 

---

< 시연 영상 >

---

< 후기 >

  우선 개발을 6월 17일에 시작하여 6월 29일로 잡고 시작하였는데 그전에 끝나서 좋았습니다. 초기 설계는 반응형 웹 + APM으로 동적인 웹 페이지 만들려고 했으나 CSS 하는데 좀 멘탈이 갈려서 APM(메뉴바의 캐릭터 소개와 덱 소개 부분에 해당)은 구현하지 않았습니다. 아마 나중에(3년 후에) 추가로 구현하지 않을까 생각합니다.

  개인적으로 해당 프로젝트는 중규모의 프로젝트라고 생각하는데 개발할 때에는 내가 너무 많은 기능을 넣은 것인가 라는 생각이 들었지만 시연 영상 찍고 나서 뭔가 허전하다는 느낌이 들었습니다. 

 

끝~~