vuetify grid layout 들여다보기

아래 내용은 버전 1.x대의 내용입니다. 2.x대에서 기본 레이아웃을 잡는 규칙이 변경되었습니다. 기본적인 레이아웃을 참고하실 경우 다음 글을 참고하시면 좋으실지도 모르겠습니다. - 2020/09/26 - [IT/program] - Vuetify 2.x 버전으로 레이아웃 잡기

프레임워크를 그리 좋아하지 않는 저로서는 아마 프로젝트가 끝나고 나면 Vuetify를 사용할 일은 두번다시 없지 않을까 생각하면서도.. 메모는 해두어야 겠다는 생각이 들어서..

대부분의 웹프레임워크가 그렇듯이 Vuetify역시 기본적으로 반응형웹을 고려하여 만들어져 있으며, 일반적으로 사용되는 12단 형식을 사용하고 있습니다. 

Vuetify에서 제공하는 반응형 웹의 기본적인 내용은 'https://vuetifyjs.com/ko/layout/breakpoints'에서 확인 하실 수 있습니다. 또한 이미 사용하고 계신 분들은 아시겠지만, 사이트에서 제공되는 기본적인 소스들은 CodePen에서 예제를 사용할 수 있기 때문에 페이지 작업시 조금 수월하게 진행할 수 있습니다.

Extra small(xs) < Small(sm) < Medium(md) < Large(lg) < Extra large(xl)

기본적으로 3단 형식을 가지고 있는 레이아웃이라 생각했을때, 모바일에서는 1단형식을 취하는 것이 가장 보편적인 방식입니다. Vuetify에서는 이 부분을 breakpoints를 사용하여 제어하고 있습니다.

그리드 적용

바로 위에서 언급된 xs, sm, md등을 사용하는 방법입니다.

[breakpoint][1~12]

See the Pen vuetify_study_001 by minamiland (@minamiland) on CodePen.

위 소스에서 v-flex에 기입되어 있는 xs12는 숫자의 의미는 xs사이즈의 화면에서는 12단을 사용한다는 것을 의미하며 sm4는 4단짜리 3개를 의미합니다. 

텍스트 정렬

레이아웃의 특성상 작은 화면과 큰 화면에서 텍스트의 정렬을 수정해야 할 경우가 있습니다. 그럴때는 다음 옵션을 사용하시면 수월하게 적용시킬 수 있습니다.

text-[breakpoint]-[align]

See the Pen vuetify_study_002 by minamiland (@minamiland) on CodePen.

블럭 위치조정 - 일괄 조정

텍스트를 정렬은 물론이고, 블럭의 위치를 상,중,하에 위치 시켜야 할 경우도 있습니다. 이때는 다음 옵션을 사용하시면 됩니다만, 주의 할 점은 v-layout에 적용시켜서 자식요소의 블럭을 제어한다는 점입니다.

align-[start, centerm end]

See the Pen vuetify_study_003 by minamiland (@minamiland) on CodePen.

블럭 위치 조정 - 개별 조정

일괄적용시에는 <v-flex>요소를 전체적으로 감싸면 해결 됩니다만, 개별적으로 할 지정이 필요할 경우는 각각의 요소를 감싸주는 방식을 사용해야 합니다.

See the Pen vuetify_study_004 by minamiland (@minamiland) on CodePen.

뭐, 이보다 다양한 방식이 당연히 존재하겠지만 우선 일반적으로 많이 사용될 것 같은 부분을 메모해 봤습니다. 또 뭐가 있을라나..