+
+
+ 
+
+ 덩크 로우 블랙화이트5
10000
+
-
상세 설명
지점
diff --git a/src/sass/pages/_draw.scss b/src/sass/pages/_draw.scss
new file mode 100644
index 0000000..cae3dc3
--- /dev/null
+++ b/src/sass/pages/_draw.scss
@@ -0,0 +1,26 @@
+@use './../utils' as *;
+.draw {
+ position: relative;
+ &__title {
+ display: inline-block;
+ width: 100%;
+ padding: rem(20px) rem(20px) rem(20px) 0;
+ @include fontSB($size: rem(20px), $bold: 700);
+ }
+ &__button {
+ @include position($right: 0, $top: rem(20px));
+ }
+ &__list {
+ @include flexbox($justify: space-between, $wrap: wrap);
+ }
+ @include desktop {
+ background-color: yellow;
+ }
+ @include mobile {
+ background-color: pink;
+ }
+}
+
+.draw__link__img {
+ width: 200px;
+}
diff --git a/src/sass/pages/_index.scss b/src/sass/pages/_index.scss
index 4169bdb..e279c27 100644
--- a/src/sass/pages/_index.scss
+++ b/src/sass/pages/_index.scss
@@ -1 +1,2 @@
-@forward './home';
\ No newline at end of file
+@forward './home';
+@forward './draw';
diff --git a/src/sass/utils/_flexbox.scss b/src/sass/utils/_flexbox.scss
index 0905106..926fd9f 100644
--- a/src/sass/utils/_flexbox.scss
+++ b/src/sass/utils/_flexbox.scss
@@ -1,10 +1,14 @@
// flexbox
// 플렉스 박스 믹스인 ---------------------------------------------------------------- /
-@mixin flexbox($direction: row, $justify: flex-start, $items: stretch, $wrap: nowrap) {
- display: flex;
- flex-flow: $direction $wrap;
- justify-content: $justify;
- align-items: $items;
- }
-
\ No newline at end of file
+@mixin flexbox(
+ $direction: row,
+ $justify: center,
+ $items: center,
+ $wrap: nowrap
+) {
+ display: flex;
+ flex-flow: $direction $wrap;
+ justify-content: $justify;
+ align-items: $items;
+}
diff --git a/src/sass/utils/_mixin.scss b/src/sass/utils/_mixin.scss
index e69de29..3a9ec84 100644
--- a/src/sass/utils/_mixin.scss
+++ b/src/sass/utils/_mixin.scss
@@ -0,0 +1,74 @@
+@use './unit' as *;
+@use 'sass:math';
+
+// font-size, font-weight, padding, margin, border, position,test
+
+@mixin fontSB($size: initial, $bold: initial) {
+ font-size: $size;
+ font-weight: $bold;
+}
+
+@mixin autoMargin($marginX: auto) {
+ margin-left: $marginX;
+ margin-right: $marginX;
+}
+
+// padding 관련 믹스인
+@mixin paddingY($paddingY: 0) {
+ padding-top: rem($paddingY);
+ padding-bottom: rem($paddingY);
+}
+@mixin paddingX($paddingX: 0) {
+ padding-left: rem($paddingX);
+ padding-right: rem($paddingX);
+}
+
+@mixin marginY($marginY: 0) {
+ margin-top: rem($marginY);
+ margin-bottom: rem($marginY);
+}
+
+@mixin marginX($marginX: 0) {
+ margin-left: rem($marginX);
+ margin-right: rem($marginX);
+}
+
+@mixin border($px: 1px, $type: solid, $color: #c8c8c8) {
+ border: $px $type $color;
+}
+
+@mixin position(
+ $position: absolute,
+ $top: initial,
+ $right: initial,
+ $bottom: initial,
+ $left: initial
+) {
+ position: $position;
+ top: $top;
+ right: $right;
+ bottom: $bottom;
+ left: $left;
+}
+
+@mixin positionCenterX() {
+ @include position;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+@mixin positionCenterY() {
+ @include position;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+@mixin positionCenter(
+ $position: absolute,
+ $top: initial,
+ $right: initial,
+ $bottom: initial,
+ $left: initial
+) {
+ position: $position;
+}