메가박스 사이트 만들기 학습일지#3 - 헤더 반응형(모바일)

요새는 웹사이트를 접속할 수 있는 채널이 굉장히 다양해졌다. 

나조차도 맥북, 아이패드, 핸드폰 등등 여러 채널로 사이트를 접속하다보면은 불편한것들이 느껴질때가 있다

그때는 알지 못했다ㅠㅠ 이게 이런 작업들이 이루어져야하는것인지를...!!

 

그냥 이용자 입장에서 접속할때 화면이 잘리거나 어떤 사이트는 팝업창은 뜨는데 닫기 버튼이 잘려서 닫히지않는 사이트들도 있었다

그런걸 보면서 이 수업에서 반응형에 대한 중요성을 새삼 느끼게 되었다. 한편으로는 이런것들을 다 고려해서 코딩을 해야한다고 생각하니 

정말 테스트도 많이해봐야할것같고 꼼꼼하게 봐야할것같다는 생각이들었다 

 

일단은 반응형을 코딩하는데 있어서 가장 중요한 개념부터 알고 지나가자! 

 

* 미디어쿼리 적용방법 

미디어쿼리 적용방법

이중에 주로 1번을 가장 많이 사용한다고 한다! 

미디어쿼리 사용예시

보통 max-width 를 사용하여 코딩을 하는게 일반적

 

* 반응형에서 스크롤바 생기지 않게 작업하는 방법

  → 보통, 레이아웃에서 container 영역 width 값을 1280px로 만들었다면 당연히 그거 보다 작아지는경우 스크롤바가 생긴다.

      그럴때! 미디어쿼리를 사용해서 1280px보다 작아졌을때 width값을 100%가 되도록 미디어 쿼리에 작성해준다. 

     ex)  @ media(max-width:1280px) {

                         .container{width:100%};

               }

 

이 강의에서는 실질적으로 퍼블리셔를 준비하는 사람들이 강의를 들으면 가장 좋은 강의라고 생각된다.

이미 만들어진 디자인 산출물을 보면서 어떻게 코딩을 하면될지 하나부터 차근차근 알려주는게 참 좋은 것 같다.