메가박스 사이트 만들기 학습일지#5 - 배너 반응형

swiper.js 를 통해 완성한 메가박스사이트의 배너를 각종 기기들에 맞춰 반응형으로 만드는걸 배워보자!

 

우선은 Font Awesome을 통해 아이콘을 넣는 방법을 익혀보자

 

* Font Awesome 사이트 : https://fontawesome.com/

Font Awesome

 

상위버전은 유료이므로, Old Version의 사용을 권장합니다. (개인 연습용도이기때문에)

우선 이번 사이트를 만들면서는 흔히 전체메뉴 버튼(햄버거버튼)을 넣어보는걸로 연습해보자

사용방법은 매우 간단하다! 내가원하는 아이콘을 찾아서 해당 코드를 원하는 부분에 붙여넣어주면 끝!

(샘플코드 : <i class="fa fa-bars" aria-hidden="true"></i> )

 

* 반응형 작업 시 참고사항

1. 기본 기기별 사이즈 세팅

  @media (max-width: 1290px){ }

  @media (max-width: 1024px){ }

  @media (max-width: 960px){ }

  @media (max-width: 768px){ }

  @media (max-width: 768px){ }

  @media (max-width: 480px){ }

  @media (max-width: 320px){ }  → 아이폰SE 크기

※ 이건 내 사이트를 접속하는 채널에 따라 달라질 수 있다. 

   (이번 사이트 만들기는 사전에 작업된 디자인물을 기반으로 작업을 진행하고 있다.)

 

2. 사이즈별 코딩작업 

  * 개발자 도구 활용(F12) 

    → 줄이고자 하는 영역을 Select 한 후 (Shift+Ctrl+C) 해당 영역에 대한 코딩을 수정  

max 1024px 일때의 반응형 모습 

 

이번 작업에서의 중점은 HTML ,CSS, 자바스크립트 이고, 버튼을 클릭했을때 동작하는 부분까지는 구현하지않았기때문에 우선은 디자인에 대해 코딩을 어떤식으로 만들어가는지를 공부하는게 좋을 것 같다.