본문으로 바로가기

Useful box layout in mobile and RWD

다음의 소스를 통해 박스모델을 이해하면서 레이아웃을 정의해 보도록 합니다.




로컬 테스트 시 다음의 뷰포트를 설정하고 테스트 바랍니다.

html
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">



Box layout #1

로컬 상에서 소스 테스트 시 위의 뷰포트 설정을 확인하고 개발자 도구에서 에뮬레이터를 통해 확인해 보세요.

See the Pen 모바일에서 유용한 박스 레이아웃 #1 by jaeheekim (@jaehee) on CodePen.



Box layout #2

See the Pen 모바일에서 유용한 박스 레이아웃 #2 by jaeheekim (@jaehee) on CodePen.





Jaehee's WebClub