feat: HTML 및 CSS 파일 추가 및 초기 스타일 설정
- index.html 파일 생성 및 기본 구조 작성 - 스타일 초기화 및 스와이프 관련 SCSS 파일 추가 - 코드 품질 검사용 GitHub Actions 워크플로우 추가 - 다양한 이미지 파일 추가
This commit is contained in:
70
.gitea/workflows/code-quality.yaml
Normal file
70
.gitea/workflows/code-quality.yaml
Normal file
@@ -0,0 +1,70 @@
|
||||
name: 코드 품질 검사
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
pull_request:
|
||||
branches: [main]
|
||||
|
||||
jobs:
|
||||
lint:
|
||||
name: 린트 검사
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: 코드 체크아웃
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Node.js 설정
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: '20'
|
||||
|
||||
- name: 린터 설치
|
||||
run: |
|
||||
npm install -g htmlhint stylelint stylelint-config-standard stylelint-config-standard-scss
|
||||
|
||||
- name: HTML 검사
|
||||
run: |
|
||||
echo "HTML 파일 검사 중..."
|
||||
htmlhint "**/*.html" --config <(echo '{
|
||||
"tagname-lowercase": true,
|
||||
"attr-lowercase": true,
|
||||
"attr-value-double-quotes": true,
|
||||
"doctype-first": true,
|
||||
"tag-pair": true,
|
||||
"spec-char-escape": true,
|
||||
"id-unique": true,
|
||||
"src-not-empty": true,
|
||||
"attr-no-duplication": true
|
||||
}')
|
||||
|
||||
- name: CSS/SCSS 검사
|
||||
run: |
|
||||
echo "CSS/SCSS 파일 검사 중..."
|
||||
stylelint "**/*.css" "**/*.scss" --config <(echo '{
|
||||
"extends": ["stylelint-config-standard", "stylelint-config-standard-scss"],
|
||||
"rules": {
|
||||
"no-empty-source": null,
|
||||
"selector-class-pattern": null,
|
||||
"scss/at-import-partial-extension": null
|
||||
}
|
||||
}') || true
|
||||
|
||||
- name: 파일 인코딩 검사
|
||||
run: |
|
||||
echo "파일 인코딩 검사 중 (UTF-8)..."
|
||||
find . -name "*.html" -o -name "*.css" -o -name "*.scss" -o -name "*.js" | head -20 | while read file; do
|
||||
if file "$file" | grep -q "UTF-8\|ASCII"; then
|
||||
echo "정상: $file"
|
||||
else
|
||||
echo "경고: $file - UTF-8이 아닐 수 있음"
|
||||
fi
|
||||
done
|
||||
|
||||
- name: 검사 결과 요약
|
||||
run: |
|
||||
echo "===== 코드 품질 검사 완료 ====="
|
||||
echo "HTML 파일: $(find . -name '*.html' | wc -l)개"
|
||||
echo "CSS 파일: $(find . -name '*.css' | wc -l)개"
|
||||
echo "SCSS 파일: $(find . -name '*.scss' | wc -l)개"
|
||||
echo "JS 파일: $(find . -name '*.js' | wc -l)개"
|
||||
219
assets/css/_reset.scss
Normal file
219
assets/css/_reset.scss
Normal file
File diff suppressed because one or more lines are too long
219
assets/css/_swiper.scss
Normal file
219
assets/css/_swiper.scss
Normal file
@@ -0,0 +1,219 @@
|
||||
|
||||
:host {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
.swiper {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
/* Fix of Webkit flickering */
|
||||
z-index: 1;
|
||||
display: block;
|
||||
}
|
||||
.swiper-vertical > .swiper-wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
.swiper-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
transition-property: transform;
|
||||
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.swiper-android .swiper-slide,
|
||||
.swiper-ios .swiper-slide,
|
||||
.swiper-wrapper {
|
||||
transform: translate3d(0px, 0, 0);
|
||||
}
|
||||
.swiper-horizontal {
|
||||
touch-action: pan-y;
|
||||
}
|
||||
.swiper-vertical {
|
||||
touch-action: pan-x;
|
||||
}
|
||||
.swiper-slide {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
transition-property: transform;
|
||||
display: block;
|
||||
}
|
||||
.swiper-slide-invisible-blank {
|
||||
visibility: hidden;
|
||||
}
|
||||
/* Auto Height */
|
||||
.swiper-autoheight,
|
||||
.swiper-autoheight .swiper-slide {
|
||||
height: auto;
|
||||
}
|
||||
.swiper-autoheight .swiper-wrapper {
|
||||
align-items: flex-start;
|
||||
transition-property: transform, height;
|
||||
}
|
||||
.swiper-backface-hidden .swiper-slide {
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
/* 3D Effects */
|
||||
.swiper-3d.swiper-css-mode .swiper-wrapper {
|
||||
perspective: 1200px;
|
||||
}
|
||||
.swiper-3d .swiper-wrapper {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.swiper-3d {
|
||||
perspective: 1200px;
|
||||
.swiper-slide,
|
||||
.swiper-cube-shadow {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
}
|
||||
|
||||
/* CSS Mode */
|
||||
.swiper-css-mode {
|
||||
> .swiper-wrapper {
|
||||
overflow: auto;
|
||||
scrollbar-width: none; /* For Firefox */
|
||||
-ms-overflow-style: none; /* For Internet Explorer and Edge */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
> .swiper-wrapper > .swiper-slide {
|
||||
scroll-snap-align: start start;
|
||||
}
|
||||
&.swiper-horizontal {
|
||||
> .swiper-wrapper {
|
||||
scroll-snap-type: x mandatory;
|
||||
}
|
||||
}
|
||||
&.swiper-vertical {
|
||||
> .swiper-wrapper {
|
||||
scroll-snap-type: y mandatory;
|
||||
}
|
||||
}
|
||||
&.swiper-free-mode {
|
||||
> .swiper-wrapper {
|
||||
scroll-snap-type: none;
|
||||
}
|
||||
> .swiper-wrapper > .swiper-slide {
|
||||
scroll-snap-align: none;
|
||||
}
|
||||
}
|
||||
&.swiper-centered {
|
||||
> .swiper-wrapper::before {
|
||||
content: '';
|
||||
flex-shrink: 0;
|
||||
order: 9999;
|
||||
}
|
||||
> .swiper-wrapper > .swiper-slide {
|
||||
scroll-snap-align: center center;
|
||||
scroll-snap-stop: always;
|
||||
}
|
||||
}
|
||||
&.swiper-centered.swiper-horizontal {
|
||||
> .swiper-wrapper > .swiper-slide:first-child {
|
||||
margin-inline-start: var(--swiper-centered-offset-before);
|
||||
}
|
||||
> .swiper-wrapper::before {
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
width: var(--swiper-centered-offset-after);
|
||||
}
|
||||
}
|
||||
&.swiper-centered.swiper-vertical {
|
||||
> .swiper-wrapper > .swiper-slide:first-child {
|
||||
margin-block-start: var(--swiper-centered-offset-before);
|
||||
}
|
||||
> .swiper-wrapper::before {
|
||||
width: 100%;
|
||||
min-width: 1px;
|
||||
height: var(--swiper-centered-offset-after);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Slide styles start */
|
||||
/* 3D Shadows */
|
||||
.swiper-3d {
|
||||
.swiper-slide-shadow,
|
||||
.swiper-slide-shadow-left,
|
||||
.swiper-slide-shadow-right,
|
||||
.swiper-slide-shadow-top,
|
||||
.swiper-slide-shadow-bottom,
|
||||
.swiper-slide-shadow,
|
||||
.swiper-slide-shadow-left,
|
||||
.swiper-slide-shadow-right,
|
||||
.swiper-slide-shadow-top,
|
||||
.swiper-slide-shadow-bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
.swiper-slide-shadow {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.swiper-slide-shadow-left {
|
||||
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
}
|
||||
.swiper-slide-shadow-right {
|
||||
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
}
|
||||
.swiper-slide-shadow-top {
|
||||
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
}
|
||||
.swiper-slide-shadow-bottom {
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
}
|
||||
}
|
||||
.swiper-lazy-preloader {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -21px;
|
||||
margin-top: -21px;
|
||||
z-index: 10;
|
||||
transform-origin: 50%;
|
||||
box-sizing: border-box;
|
||||
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
|
||||
border-radius: 50%;
|
||||
border-top-color: transparent;
|
||||
}
|
||||
.swiper:not(.swiper-watch-progress),
|
||||
.swiper-watch-progress .swiper-slide-visible {
|
||||
.swiper-lazy-preloader {
|
||||
animation: swiper-preloader-spin 1s infinite linear;
|
||||
}
|
||||
}
|
||||
.swiper-lazy-preloader-white {
|
||||
--swiper-preloader-color: #fff;
|
||||
}
|
||||
.swiper-lazy-preloader-black {
|
||||
--swiper-preloader-color: #000;
|
||||
}
|
||||
@keyframes swiper-preloader-spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
/* Slide styles end */
|
||||
1198
assets/css/style.css
Normal file
1198
assets/css/style.css
Normal file
File diff suppressed because it is too large
Load Diff
1
assets/css/style.css.map
Normal file
1
assets/css/style.css.map
Normal file
File diff suppressed because one or more lines are too long
864
assets/css/style.scss
Normal file
864
assets/css/style.scss
Normal file
@@ -0,0 +1,864 @@
|
||||
@charset "utf-8";
|
||||
@use '_reset' as *;
|
||||
@use '_swiper' as *;
|
||||
|
||||
//rem 변환 $value = 디자인px
|
||||
@function rem($value) {
|
||||
$remValue: calc($value / 16) + rem;
|
||||
@return $remValue;
|
||||
}
|
||||
|
||||
//flex
|
||||
$flex-map: (
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
between: space-between,
|
||||
around: space-around,
|
||||
stretch: stretch,
|
||||
center: center
|
||||
);
|
||||
|
||||
@function _get-flex-value($key) {
|
||||
//입력한 키값($key)를 받아서
|
||||
@return map-get($flex-map, $key); // @return 리턴한다. 배열에서 입력한 키값에 맞는 값을.
|
||||
}
|
||||
|
||||
@mixin flex($js: center, $ai: center) {
|
||||
// : 를 붙히고 값을 써준 것은 default값을 설정함
|
||||
display: flex;
|
||||
justify-content: _get-flex-value($js);
|
||||
align-items: _get-flex-value($ai);
|
||||
}
|
||||
|
||||
@mixin inlineflex($js: center, $ai: center) {
|
||||
// : 를 붙히고 값을 써준 것은 default값을 설정함
|
||||
display: inline-flex;
|
||||
justify-content: _get-flex-value($js);
|
||||
align-items: _get-flex-value($ai);
|
||||
}
|
||||
|
||||
.layer-wrap {
|
||||
overflow-y: auto;
|
||||
position: fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f3f4f9;
|
||||
|
||||
.layer-header {
|
||||
@include flex(start, center);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: rem(60);
|
||||
padding: 0 rem(10);
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #c8c8c8;
|
||||
|
||||
.header-title {
|
||||
font-size: rem(20);
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
position: relative;
|
||||
width: rem(30); // 화살표 너비
|
||||
height: rem(30); // 화살표 높이
|
||||
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 40%;
|
||||
content: '';
|
||||
width: rem(12); //화살표 크기
|
||||
height: rem(12); //화살표 크기
|
||||
border-top: rem(2) solid #000; //화살표 선
|
||||
border-right: rem(2) solid #000; //화살표 선
|
||||
transform: rotate(225deg); //다음 화살표
|
||||
}
|
||||
|
||||
|
||||
em {
|
||||
display: block;
|
||||
text-indent: -9999em;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
position: absolute;
|
||||
top:50%;
|
||||
right: rem(20);
|
||||
transform: translateY(-50%);
|
||||
width: rem(26);
|
||||
height: rem(26);
|
||||
background: url(../images/ico_close.png) no-repeat center / 100% auto;
|
||||
|
||||
em {
|
||||
display: block;
|
||||
text-indent: -9999em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layer-container {
|
||||
padding:rem(60) 0 0;
|
||||
|
||||
.layer-content-header {
|
||||
padding: rem(16);
|
||||
border-radius: 0 0 rem(30) rem(30);
|
||||
background-color: #fff;
|
||||
.point-area {
|
||||
position: relative;
|
||||
height: rem(130);
|
||||
padding:0 rem(20);
|
||||
background: url(../images/ico_point.png) no-repeat 95% 50% / rem(72) auto;
|
||||
|
||||
dt {
|
||||
font-size: rem(18);
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
span {
|
||||
margin-left:rem(4);
|
||||
font-size: rem(10);
|
||||
color:#6b6b6b;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
dd {
|
||||
font-size: rem(26);
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
letter-spacing: rem(-0.64);
|
||||
strong {
|
||||
font-size: rem(32);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.btn-useage {
|
||||
@include flex(start, center);
|
||||
position: absolute;
|
||||
top:0;
|
||||
right:rem(20);
|
||||
|
||||
em {
|
||||
display: block;
|
||||
color:#666;
|
||||
font-size: rem(14);
|
||||
font-weight: 400;
|
||||
border-bottom:1px solid #666;
|
||||
}
|
||||
&:before {
|
||||
content:"";
|
||||
display: block;
|
||||
width: rem(14);
|
||||
height: rem(14);
|
||||
margin-right: rem(4);
|
||||
background: url(../images/ico_info.png) no-repeat center / 100% auto;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.btn-txt-arr {
|
||||
@include flex(start, center);
|
||||
border-bottom:1px solid #6b6b6b;
|
||||
color:#6b6b6b;
|
||||
font-size: rem(10);
|
||||
font-weight: 400;
|
||||
|
||||
&:after {
|
||||
content:"";
|
||||
display: block;
|
||||
width: rem(8);
|
||||
height: rem(8);
|
||||
margin-left: rem(4);
|
||||
background: url(../images/ico_arrow_r2.png) no-repeat center / 100% auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn-area {
|
||||
@include flex(between, start);
|
||||
column-gap: rem(8);
|
||||
& > * {
|
||||
flex: 1;
|
||||
@include flex(between, center);
|
||||
height: rem(76);
|
||||
padding: rem(14);
|
||||
font-size: rem(16);
|
||||
color:#fff;
|
||||
font-weight: 500;
|
||||
border-radius: rem(16);
|
||||
text-align: left;
|
||||
}
|
||||
.btn-discount {
|
||||
position: relative;
|
||||
background-color: #e30084;
|
||||
.btn-switch {
|
||||
@include flex(end, center);
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-right: rem(14);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.btn-point-use {
|
||||
background-color: #1e1a3a;
|
||||
&:after {
|
||||
content:"";
|
||||
display: block;
|
||||
width: rem(26);
|
||||
height: rem(26);
|
||||
background: url(../images/ico_arrow_r.png) no-repeat center / 100% auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.layer-content {
|
||||
padding:rem(22) rem(16) rem(16);
|
||||
.category-area {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding-right: rem(44);
|
||||
margin-bottom:rem(16);
|
||||
&:after {
|
||||
content:"";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
z-index: 1;
|
||||
width: rem(62);
|
||||
height: 100%;
|
||||
background: rgb(243,244,249);
|
||||
background: linear-gradient(90deg, rgba(243,244,249,0) 0%, rgba(243,244,249,1) 40%);
|
||||
}
|
||||
.btn-cate {
|
||||
@include flex(center, center);
|
||||
height: rem(36);
|
||||
padding:0 rem(12);
|
||||
font-size: rem(16);
|
||||
color:#7a7d87;
|
||||
font-weight: 400;
|
||||
background-color: #e4e7ee;
|
||||
border-radius: rem(18);
|
||||
&.active {
|
||||
color: #fff;
|
||||
background-color: #1e1a3a;
|
||||
}
|
||||
}
|
||||
.btn-more {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top:50%;
|
||||
right:0;
|
||||
z-index: 2;
|
||||
transform: translateY(-50%);
|
||||
width: rem(30);
|
||||
height: rem(30);
|
||||
background: url(../images/btn_more.png) no-repeat center / 100% auto;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.list-area {
|
||||
.noti {
|
||||
@include flex(between, center);
|
||||
width: 100%;
|
||||
height: rem(111);
|
||||
padding: rem(2);
|
||||
margin-bottom:rem(14);
|
||||
border-radius: rem(16);
|
||||
border: 0 ;
|
||||
border-image-source: linear-gradient(to right, #e30084, #a62cbf 51%, #6b57f8);
|
||||
border-image-slice: 1;
|
||||
background-image: linear-gradient(to bottom, #fff, #fff), linear-gradient(to right, #e30084, #a62cbf 51%, #6b57f8);
|
||||
background-origin: border-box;
|
||||
background-clip: content-box, border-box;
|
||||
.txt-area {
|
||||
padding:0 rem(20);
|
||||
line-height: 1.3;
|
||||
.tit {
|
||||
position: relative;
|
||||
font-size: rem(18);
|
||||
color:#7a7d87;
|
||||
}
|
||||
|
||||
.acc {
|
||||
display: block;
|
||||
font-size: rem(22);
|
||||
font-weight: 700;
|
||||
|
||||
strong {
|
||||
font-size: rem(30);
|
||||
font-weight: 700;
|
||||
margin-left: 0;
|
||||
padding: 0 rem(4);
|
||||
}
|
||||
}
|
||||
}
|
||||
.img-area {
|
||||
padding:0 rem(20) 0 rem(10);
|
||||
img {
|
||||
width: rem(66);
|
||||
}
|
||||
}
|
||||
|
||||
&.quick {
|
||||
.tit {
|
||||
&:after {
|
||||
content: "즉시적립";
|
||||
@include inlineflex(center, center);
|
||||
position: absolute;
|
||||
top:rem(3);
|
||||
left: 100%;
|
||||
height: rem(18);
|
||||
padding: 0 rem(6) rem(2);
|
||||
margin-left:rem(8);
|
||||
font-size: rem(10);
|
||||
font-weight: 700;
|
||||
color: #e30084;
|
||||
background-color: #fbdaed;
|
||||
border-radius: rem(10);
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-column-gap: rem(12);
|
||||
grid-row-gap: rem(10);
|
||||
margin-bottom:rem(22);
|
||||
|
||||
li {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
height: rem(143);
|
||||
padding: 0;
|
||||
border: solid 0 rgba(233, 233, 233);
|
||||
border-radius: rem(8);
|
||||
background-color: #fff;
|
||||
|
||||
&+li {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.img-area {
|
||||
@include flex(end, center);
|
||||
width: 100%;
|
||||
height: rem(62);
|
||||
padding: 0 rem(12);
|
||||
margin-right: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
img {
|
||||
width: rem(48);
|
||||
height: rem(48);
|
||||
}
|
||||
}
|
||||
|
||||
.txt-area {
|
||||
@include flex(start, start);
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: rem(10) rem(16) rem(2);
|
||||
font-size: rem(16);
|
||||
color: #1e1a3a;
|
||||
font-weight: 500;
|
||||
border-radius: 0;
|
||||
|
||||
.acc {
|
||||
align-items: flex-end;
|
||||
font-size: rem(20);
|
||||
font-weight: 700;
|
||||
|
||||
strong {
|
||||
font-size: rem(30);
|
||||
font-weight: 700;
|
||||
margin-left: 0;
|
||||
padding: 0 rem(4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.quick {
|
||||
&:after {
|
||||
content: "즉시적립";
|
||||
@include inlineflex(center, center);
|
||||
position: absolute;
|
||||
bottom:rem(8.5);
|
||||
left:rem(6);
|
||||
height: rem(18);
|
||||
padding: 0 rem(6) rem(2);
|
||||
margin-left: rem(6);
|
||||
font-size: rem(10);
|
||||
font-weight: 700;
|
||||
color: #e30084;
|
||||
background-color: #fbdaed;
|
||||
border-radius: rem(10);
|
||||
}
|
||||
|
||||
.txt-area {
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.etc-cash {
|
||||
&:before {
|
||||
content: "방문+1";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: rem(12);
|
||||
left: rem(8.5);
|
||||
z-index: 3;
|
||||
padding: 2px;
|
||||
font-size: rem(10);
|
||||
font-weight: 700;
|
||||
color: #f84d40;
|
||||
background-color: #fff7d7;
|
||||
}
|
||||
}
|
||||
|
||||
&.quick {
|
||||
&.etc-cash {
|
||||
&:before {
|
||||
left: rem(53.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.caution-area {
|
||||
padding: rem(16);
|
||||
border-radius: rem(8);
|
||||
background-color: #fff;
|
||||
h3 {
|
||||
margin-bottom:rem(12);
|
||||
font-size: rem(18);
|
||||
font-weight: 700;
|
||||
color:#000;
|
||||
}
|
||||
p {
|
||||
font-size: rem(13);
|
||||
font-weight: 400;
|
||||
color:#666;
|
||||
line-height: 1.54;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.point-earn {
|
||||
padding-bottom:rem(68);
|
||||
background-color: #fff;
|
||||
|
||||
.point-info {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding:rem(30) rem(22);
|
||||
background: none;
|
||||
|
||||
figure {
|
||||
@include flex(start, center);
|
||||
|
||||
img {
|
||||
width: rem(110);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
margin-left: rem(22);
|
||||
font-size: rem(20);
|
||||
color: #6b6b6b;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
margin-top: rem(6);
|
||||
font-size: rem(28);
|
||||
color: #212121;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
padding:0 rem(22);
|
||||
margin: 0 0 rem(40);
|
||||
|
||||
>dl {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-size: rem(20);
|
||||
font-weight: 700;
|
||||
color: #212121;
|
||||
margin-bottom: rem(20);
|
||||
}
|
||||
|
||||
dd {
|
||||
font-size: rem(16);
|
||||
color: #6b6b6b;
|
||||
font-weight: 400;
|
||||
|
||||
dl {
|
||||
@include flex(start, start);
|
||||
padding: rem(16) 0 0;
|
||||
|
||||
&+dl {
|
||||
margin-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-size: rem(16);
|
||||
font-weight: 400;
|
||||
color: #212121;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: rem(16);
|
||||
}
|
||||
}
|
||||
}
|
||||
li {
|
||||
@include flex(start, start);
|
||||
margin-bottom: rem(18);
|
||||
font-size: rem(16);
|
||||
color: #6b6b6b;
|
||||
|
||||
em {
|
||||
float: none;
|
||||
width: rem(110);
|
||||
color: #212121;
|
||||
}
|
||||
> span {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.coupon {
|
||||
display: block;
|
||||
margin-bottom: rem(5);
|
||||
|
||||
img {
|
||||
width: rem(150);
|
||||
}
|
||||
}
|
||||
|
||||
.txt-caution {
|
||||
margin-top: rem(4);
|
||||
|
||||
&>* {
|
||||
@include flex(start, start);
|
||||
font-size: rem(10);
|
||||
line-height: 1.6;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: rem(3);
|
||||
height: rem(3);
|
||||
margin: rem(6) rem(4) 0 0;
|
||||
border-radius: rem(2);
|
||||
background-color: #6b6b6b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.txt-box {
|
||||
padding: rem(24) rem(22);
|
||||
margin: 0;
|
||||
background-color: #f2f3f7;
|
||||
border-radius: 0;
|
||||
ul+h4 {
|
||||
margin-top: rem(26);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: rem(18);
|
||||
font-weight: 500;
|
||||
margin-bottom: rem(8);
|
||||
}
|
||||
|
||||
li {
|
||||
@include flex(start, start);
|
||||
font-size: rem(13);
|
||||
color: #666;
|
||||
margin-bottom: rem(6);
|
||||
line-height: 1.54;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
width: rem(4);
|
||||
height: rem(4);
|
||||
margin: rem(5) rem(6) 0 0;
|
||||
border-radius: rem(2);
|
||||
opacity: 0.56;
|
||||
background-color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ico-bu {
|
||||
@include inlineflex(start, start);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: rem(4);
|
||||
height: rem(4);
|
||||
margin: rem(6) rem(6) 0 0;
|
||||
border-radius: rem(2);
|
||||
opacity: 0.56;
|
||||
background-color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn-area.fixed-bottom {
|
||||
@include flex(center, center);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: rem(12);
|
||||
z-index: 10;
|
||||
|
||||
button + button {
|
||||
margin: 0;
|
||||
}
|
||||
button {
|
||||
@include flex(center, center);
|
||||
width: 100%;
|
||||
height: rem(58);
|
||||
padding: 0 rem(20);
|
||||
font-size: rem(20);
|
||||
color:#fff;
|
||||
font-weight: 500;
|
||||
border-radius: rem(8);
|
||||
background-color: #e30084;
|
||||
}
|
||||
|
||||
&.btn-full {
|
||||
height: fit-content;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 0 1.25rem;
|
||||
border-radius: rem(10);
|
||||
background-color: #fff;
|
||||
|
||||
+ .card {
|
||||
margin-top: 0.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.cache-guide {
|
||||
padding: rem(20) rem(12);
|
||||
|
||||
#header + main {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: rem(28) rem(24);
|
||||
|
||||
h3 {
|
||||
@include inlineflex(start, center);
|
||||
position: relative;
|
||||
font-size: rem(16);
|
||||
font-weight: 500;
|
||||
color:#e30084;
|
||||
margin-bottom: rem(20);
|
||||
border-bottom: 1px solid #e30084;
|
||||
|
||||
em {
|
||||
font-size: rem(20);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
img {
|
||||
margin-top:rem(20);
|
||||
}
|
||||
}
|
||||
|
||||
.bu-type li {
|
||||
position: relative;
|
||||
padding: 0 rem(8) 0 rem(16);
|
||||
font-size: rem(14);
|
||||
color: #555;
|
||||
line-height: rem(18);
|
||||
text-indent: rem(-14);
|
||||
word-break: keep-all;
|
||||
word-wrap: break-word;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: rem(10);
|
||||
height: rem(10);
|
||||
margin-right: rem(4);
|
||||
border-radius: 50%;
|
||||
background-color: #ffe4f4;
|
||||
}
|
||||
|
||||
+ li {
|
||||
margin-top: rem(12);
|
||||
}
|
||||
|
||||
b {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.cs-info {
|
||||
margin-top: -0.3125rem;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h4 {
|
||||
padding: 0.75rem 0 0.625rem;
|
||||
font-size: 1rem;
|
||||
color: #e30084;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0.625rem 0 0;
|
||||
font-size: 0.75rem;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
|
||||
em {
|
||||
display: block;
|
||||
margin-top: 0.4375rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cs-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 3.75rem;
|
||||
border-radius: 1.875rem;
|
||||
background-color: #ffe8f5;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
font-size: 0.975rem;
|
||||
color: #e30084;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 0.75rem;
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: rem(49);
|
||||
height: rem(26);
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: #e30084;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
transition: 0.2s all ease;
|
||||
border-radius: 1rem;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: rem(2);
|
||||
width: rem(22);
|
||||
height: rem(22);
|
||||
transform: translateY(-50%);
|
||||
background-color: #e30084;
|
||||
border-radius: 50%;
|
||||
transition: 0.2s all ease;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #fff;
|
||||
|
||||
&:before {
|
||||
left: rem(24);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.swiper-slide {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 320px) {
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
BIN
assets/images/brand_aliexpress.png
Normal file
BIN
assets/images/brand_aliexpress.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
assets/images/brand_cj_the_market.png
Normal file
BIN
assets/images/brand_cj_the_market.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
assets/images/brand_coupang.png
Normal file
BIN
assets/images/brand_coupang.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
assets/images/brand_gmarket.png
Normal file
BIN
assets/images/brand_gmarket.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
assets/images/brand_homeplus.png
Normal file
BIN
assets/images/brand_homeplus.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
assets/images/brand_lotte_on.png
Normal file
BIN
assets/images/brand_lotte_on.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
assets/images/brand_ya.png
Normal file
BIN
assets/images/brand_ya.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
assets/images/btn_more.png
Normal file
BIN
assets/images/btn_more.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 665 B |
BIN
assets/images/ico-arrow-right.png
Normal file
BIN
assets/images/ico-arrow-right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
assets/images/ico_arrow_r.png
Normal file
BIN
assets/images/ico_arrow_r.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 216 B |
BIN
assets/images/ico_arrow_r2.png
Normal file
BIN
assets/images/ico_arrow_r2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 216 B |
BIN
assets/images/ico_arrow_right.png
Normal file
BIN
assets/images/ico_arrow_right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
assets/images/ico_close.png
Normal file
BIN
assets/images/ico_close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 319 B |
BIN
assets/images/ico_info.png
Normal file
BIN
assets/images/ico_info.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 410 B |
BIN
assets/images/ico_point.png
Normal file
BIN
assets/images/ico_point.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
assets/images/img_guide1.png
Normal file
BIN
assets/images/img_guide1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
assets/images/img_guide2.png
Normal file
BIN
assets/images/img_guide2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
assets/images/img_guide3.png
Normal file
BIN
assets/images/img_guide3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
assets/images/img_guide4.png
Normal file
BIN
assets/images/img_guide4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
assets/images/img_guide5.png
Normal file
BIN
assets/images/img_guide5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
14
assets/js/swiper.js
Normal file
14
assets/js/swiper.js
Normal file
File diff suppressed because one or more lines are too long
180
index.html
Normal file
180
index.html
Normal file
@@ -0,0 +1,180 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=5"/>
|
||||
<title>쿠팡 방문하고 포인트 적립</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
|
||||
<link type="text/css" rel="stylesheet" href="assets/css/style.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="layer-wrap">
|
||||
<!-- header -->
|
||||
<header class="layer-header">
|
||||
<h1 class="header-title">쇼핑 적립</h1>
|
||||
<h2 class="header-title">쇼핑 적립</h2
|
||||
<button type="button" class="btn-close"><em>닫기</em></button>
|
||||
</header>
|
||||
<!-- //header -->
|
||||
|
||||
<!-- container -->
|
||||
<div class="layer-container">
|
||||
<div class="layer-content-header">
|
||||
<div class="point-area">
|
||||
<dl>
|
||||
<dt>
|
||||
<b>내 포인트</b><span>적립예정 : 10 건</span>
|
||||
</dt>
|
||||
<dd>
|
||||
<strong>22,000</strong> P
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<button type="button" class="btn-txt-arr"><em>포인트 내역보기</em></button>
|
||||
<button type="button" class="btn-useage"><em>이용방법</em></button>
|
||||
</div>
|
||||
|
||||
<div class="btn-area">
|
||||
<button type="button" class="btn-discount">
|
||||
통신비<br> 할인 받기
|
||||
<label for="switchSlide" class="btn-switch">
|
||||
<span class="switch">
|
||||
<input type="checkbox" id="switchSlide" class="checkbox" checked="checked" />
|
||||
<span class="slider"></span>
|
||||
</span>
|
||||
</label>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn-point-use">포인트<br> 사용하기</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layer-content">
|
||||
<div class="swiper category-area">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<!-- [D] 버튼 활성화 시 active 클래스 추가 -->
|
||||
<button class="btn-cate active">전체</button>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<button class="btn-cate">종합몰</button>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<button class="btn-cate">뷰티</button>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<button class="btn-cate">패션</button>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<button class="btn-cate">종합몰</button>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<button class="btn-cate">종합몰</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-more"></button>
|
||||
</div>
|
||||
<div class="list-area">
|
||||
<!-- [D] 즉시적립 시 noti에 quick 클래스 추가 -->
|
||||
<div class="noti quick">
|
||||
<div class="txt-area">
|
||||
<span class="tit">쿠팡 쇼핑 금액의</span>
|
||||
<span class="acc">
|
||||
<strong>2.2</strong>% 적립 받기
|
||||
</span>
|
||||
</div>
|
||||
<div class="img-area"><img src="./assets/images/brand_coupang.png" alt=""></div>
|
||||
</div>
|
||||
|
||||
<!-- [D] 즉시적립 시 li에 quick 클래스 추가 -->
|
||||
<ul class="list">
|
||||
<li>
|
||||
<a href="./쇼핑하고포인트적립.html">
|
||||
<div class="txt-area">
|
||||
<span class="tit">쿠팡</span>
|
||||
<span class="acc"><strong>4</strong>%</span>
|
||||
</div>
|
||||
<div class="img-area"><img src="./assets/images/brand_ya.png" alt=""></div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./쇼핑하고포인트적립.html">
|
||||
<div class="txt-area">
|
||||
<span class="tit">G마켓</span>
|
||||
<span class="acc"><strong>1.21</strong>%</span>
|
||||
</div>
|
||||
<div class="img-area"><img src="./assets/images/brand_gmarket.png" alt=""></div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./쇼핑하고포인트적립.html">
|
||||
<div class="txt-area">
|
||||
<span class="tit">알리익스프레스</span>
|
||||
<span class="acc"><strong>5.67</strong>%</span>
|
||||
</div>
|
||||
<div class="img-area"><img src="./assets/images/brand_aliexpress.png" alt=""></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="quick">
|
||||
<a href="./쇼핑하고포인트적립.html">
|
||||
<div class="txt-area">
|
||||
<span class="tit">롯데온</span>
|
||||
<span class="acc"><strong>2.2</strong>%</span>
|
||||
</div>
|
||||
<div class="img-area"><img src="./assets/images/brand_lotte_on.png" alt=""></div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./쇼핑하고포인트적립.html">
|
||||
<div class="txt-area">
|
||||
<span class="tit">홈플러스</span>
|
||||
<span class="acc"><strong>1.21</strong>%</span>
|
||||
</div>
|
||||
<div class="img-area"><img src="./assets/images/brand_homeplus.png" alt=""></div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./쇼핑하고포인트적립.html">
|
||||
<div class="txt-area">
|
||||
<span class="tit">CJ더마켓</span>
|
||||
<span class="acc"><strong>5.67</strong>%</span>
|
||||
</div>
|
||||
<div class="img-area"><img src="./assets/images/brand_cj_the_market.png" alt=""></div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="caution-area">
|
||||
<h3>유의사항</h3>
|
||||
<p>※ 유의사항 : 본 콘텐츠는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //container -->
|
||||
</div>
|
||||
<script src="assets/js/swiper.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
var swiper = new Swiper(".category-area", {
|
||||
slidesPerView: "auto",
|
||||
spaceBetween: 8,
|
||||
freeMode: true,
|
||||
});
|
||||
|
||||
const buttons = document.querySelectorAll('.btn-cate');
|
||||
buttons.forEach((button) => {
|
||||
button.addEventListener('click', () => {
|
||||
buttons.forEach((btn) => btn.classList.remove('active'));
|
||||
button.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user