vuetify Spacing Helper Classes

화면을 막상 화면정의서처럼 만들려고 하니 알아야할 것이 한두개가 아니네요. 

https://vuetifyjs.com/en/styles/spacing/

CSS Spacing helpers

vuetify 공식사이트에서 제공하는 class를 보니 이제 조금씩 감이 오기 시작합니다.

{property}{direction}-{size} 이렇게 사용을 하시면 됩니다.
Margin 과 padding 의 범위는 0 에서 16으로 되어있습니다. 

property 
m : Margin 을 의미
p : Padding 을 의미

direction 
t,b,l,r, s, e, x, y, a  로 구성
자세한 설명은 위의  Css Spacing Helper 참고 

Size 
이 부분이 중요합니다. 1 은 4px 을 의미합니다.
기존에 저희가 사용하는 것과 다르니 2라면 2* 4 = 8px입니다.

위의 것을 직접 실행해볼수 있는 사이트 

https://scrimba.com/scrim/cD7pnzSw?pl=pP4xZu3 

Spacing - Scrimba.com

오늘도 한개씩 알아가는 뷰린이었습니다.