feat:최초 업로드

assets/css/_utils.scss

@@ -0,0 +1,68 @@
+/*변수*/
+$red: #fa5252;
+
+/*반응형 화면 크기*/
+$mobileSmall: 320px;
+$mobile:501px;
+$tablet: 768px;
+$desktopMin: 1025px;
+$desktopMax: 1240px;
+
+/*css 디폴트는 모바일이 기준*/
+/*반응형, 브라우저 크기가 300px 이하일때*/
+@mixin mobileSmall{
+  @media (max-width: $mobileSmall){
+    @content;
+  }
+}
+@mixin mobile{
+  @media (min-width: $mobile){
+    @content;
+  }
+}
+@mixin maxmobile{
+  @media (max-width: $mobile){
+    @content;
+  }
+}
+
+/*반응형, 브라우저 크기가 800px 이상일때*/
+/*@media (min-width: $mobile ) and (max-width: $tablet){*/
+@mixin tablet{
+  @media(min-width: $tablet){
+    @content;
+  }
+}
+@mixin maxtablet{
+  @media(max-width: $tablet){
+    @content;
+  }
+}
+
+
+@mixin maxdesktop{
+  @media (max-width: $desktopMin){
+    @content;
+  }
+}
+
+/*반응형, 브라우저 크기가 1025px 이상일때*/
+@mixin desktopMin{
+  @media (min-width: $desktopMin){
+    @content;
+  }
+}
+
+/*반응형, 브라우저 크기가 1204px 이상일때*/
+@mixin desktopMax{
+  @media (min-width: $desktopMax){
+    @content;
+  }
+}
+
+/*넓이, 높이 자동 계산함수*/
+@mixin square($size){
+  $calculated: 32px * $size;
+  width: $calculated;
+  height: $calculated;
+}