모바일 및 반응형에서 유용한 박스 레이아웃

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.

related links

1. 음수 마진(Negative margins) 활용하기

Jaehee's WebClub