Vuetify의 기본 스페이싱 단위

vuetify에서 패딩이나 마진같은 것을 쉽게 조절할 수 있는 클래스를 제공하고 있다.

일단 뷰티파이의 기본 스페이싱 단위는 4의 배수이다.

만약 마진-2 혹은 패딩-3이라고 하면 각각 4*2=8px, 4*3=12px이 마진이나 패딩 처리되는거다.

예를 들어 <div class="pa-6"></div> 이렇게 입력을 한다고 하면 6*4=24px이 패딩된다.

우리가 굳이 css에 padding: 24px; 을 입력할 필요가 없어진다.

css적으로 굉장히 깔끔해지니 많이 이용해볼 수 있을 것 같다.

 

주요 포인트

4*npx임

css 굳이 추가 안해도 됨