003 - html5 모바일 화면에 최적화된 화면

 

웹 디자인을 하다 보면 PC 에서 접속 하더라도 모바일 사이즈에 최적화 되어서 보여지게 만들어야 하는 경우가 있습니다.

 

모바일 화면이 다 다름에도 아무 문제 없이 보이게 할려면 이미 잘 만들어져 있어서 아무 문제가 없는 library를 사용하는 것이 좋습니다.

 

웹 디자인 또는 웹 개발을 한다면 Bootstrap 이라는 라이브러리의 사용은 필수 입니다.

 

거의 모든 반응형 UI가 되는 웹 서비스(유/무료)들의 경우에도 해당 라이브러리를 사용 하지 않는 경우는 거의 없습니다.

 

모바일 사이즈 최적화는 viewport 라는 메타 정보가 반드시 들어가야 합니다.

<meta name="viewport" content="width=device-width, initial-scale=1">

이번 예제 에서 중요한 부분은 가운데로 정렬시키는 class 입니다.

  

 

 

See the Pen Untitled by Keun (@kwyuk) on CodePen.