gil/fod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

버튼 이미지 미리 로딩 수정

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2026-01-28 22:38:34 +09:00
parent 086574d412
commit 4850608ada
6 changed files with 1780 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1602
kr/assets/css/kia.css Normal file
View File

File diff suppressed because it is too large Load Diff

1
kr/assets/css/kia.css.map Normal file
View File

File diff suppressed because one or more lines are too long

141
kr/assets/css/kia/kia.css
View File

@@ -13,7 +13,7 @@ html body {
font-weight: 400;
overflow-x: hidden;
}
html input[type=checkbox] {
html input[type="checkbox"] {
accent-color: #000;
width: 2rem;
height: 2rem;
@@ -201,7 +201,7 @@ html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dd {
}
@media (min-width: 768px) {
html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dt,
html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dd {
html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dd {
font-size: 1.6rem;
width: -webkit-fit-content;
width: -moz-fit-content;
@@ -339,11 +339,13 @@ html .mainBanner .mabannerInner .listImgBtn {
width: 17.6rem;
}
}
html .mainBanner .mabannerInner .listImgBtn .oneButton div::after, html .mainBanner .mabannerInner .listImgBtn .oneButton div::before {
html .mainBanner .mabannerInner .listImgBtn .oneButton div::after,
html .mainBanner .mabannerInner .listImgBtn .oneButton div::before {
width: 3.2rem;
}
@media (min-width: 768px) {
html .mainBanner .mabannerInner .listImgBtn .oneButton div::after, html .mainBanner .mabannerInner .listImgBtn .oneButton div::before {
html .mainBanner .mabannerInner .listImgBtn .oneButton div::after,
html .mainBanner .mabannerInner .listImgBtn .oneButton div::before {
width: 3.2rem;
}
}
@@ -409,13 +411,15 @@ html .mainSwiper ul li .mainText p span {
html .mainSwiper ul li .mainText .oneButton {
margin-top: 5rem;
}
html .mainSwiper ul li .mainText .oneButton a::before, html .mainSwiper ul li .mainText .oneButton a::after {
html .mainSwiper ul li .mainText .oneButton a::before,
html .mainSwiper ul li .mainText .oneButton a::after {
width: 3.2rem;
}
html .mainCarNum .oneButton a {
position: relative;
}
html .mainCarNum .oneButton a::before, html .mainCarNum .oneButton a::after {
html .mainCarNum .oneButton a::before,
html .mainCarNum .oneButton a::after {
background-image: initial;
width: 0;
height: 0;
@@ -455,7 +459,8 @@ html .mainCarNum .oneButton a p:hover {
html .mainCarNum .oneButton {
width: 16rem;
}
html .mainCarNum .oneButton a::before, html .mainCarNum .oneButton a::after {
html .mainCarNum .oneButton a::before,
html .mainCarNum .oneButton a::after {
background-image: initial;
width: 5rem;
margin-left: -0.1rem;
@@ -644,21 +649,33 @@ html .footer .kiaInner .tLeft .companyInfo ul + ul li {
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3)::after {
display: none;
}
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1), html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2), html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3), html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4) {
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1),
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2),
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3),
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4) {
width: 100%;
}
@media (min-width: 768px) {
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1), html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2), html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3), html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4) {
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1),
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2),
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3),
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4) {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
}
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1)::after, html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2)::after, html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3)::after, html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4)::after {
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1)::after,
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2)::after,
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3)::after,
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4)::after {
display: none;
}
@media (min-width: 768px) {
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1)::after, html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2)::after, html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3)::after, html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4)::after {
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1)::after,
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2)::after,
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3)::after,
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4)::after {
display: block;
}
}
@@ -831,7 +848,7 @@ html .footer .kiaInner .familyBoxWarp .searchTextBox {
width: 32rem;
}
}
html .footer .kiaInner .familyBoxWarp .searchTextBox input[type=text] {
html .footer .kiaInner .familyBoxWarp .searchTextBox input[type="text"] {
width: 100%;
}
html .footer .kiaInner .familyBoxWarp .searchTextBox .icon-search {
@@ -857,6 +874,16 @@ html .threeButton {
justify-content: center;
}
}
html .threeButton::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg), url(../../images/kia/svg/kia-btn-wleft.svg), url(../../images/kia/svg/kia-btn-bleft.svg), url(../../images/kia/svg/kia-btn-gleft.svg);
opacity: 0;
}
html .threeButton::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yright.svg), url(../../images/kia/svg/kia-btn-wright.svg), url(../../images/kia/svg/kia-btn-bright.svg), url(../../images/kia/svg/kia-btn-gright.svg);
opacity: 0;
}
html .threeButton .leftBtn,
html .threeButton .centerBtn,
html .threeButton .rightBtn {
@@ -866,8 +893,8 @@ html .threeButton .rightBtn {
}
@media (min-width: 768px) {
html .threeButton .leftBtn,
html .threeButton .centerBtn,
html .threeButton .rightBtn {
html .threeButton .centerBtn,
html .threeButton .rightBtn {
width: 18rem;
}
}
@@ -1013,6 +1040,16 @@ html .towButton {
display: flex;
justify-content: space-between;
}
html .towButton::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg), url(../../images/kia/svg/kia-btn-wleft.svg), url(../../images/kia/svg/kia-btn-bleft.svg), url(../../images/kia/svg/kia-btn-gleft.svg);
opacity: 0;
}
html .towButton::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yright.svg), url(../../images/kia/svg/kia-btn-wright.svg), url(../../images/kia/svg/kia-btn-bright.svg), url(../../images/kia/svg/kia-btn-gright.svg);
opacity: 0;
}
html .towButton .leftBtn,
html .towButton .centerBtn,
html .towButton .rightBtn {
@@ -1140,6 +1177,16 @@ html .oneButton {
width: 100%;
min-width: 16rem;
}
html .oneButton::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg), url(../../images/kia/svg/kia-btn-wleft.svg), url(../../images/kia/svg/kia-btn-bleft.svg), url(../../images/kia/svg/kia-btn-gleft.svg);
opacity: 0;
}
html .oneButton::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yright.svg), url(../../images/kia/svg/kia-btn-wright.svg), url(../../images/kia/svg/kia-btn-bright.svg), url(../../images/kia/svg/kia-btn-gright.svg);
opacity: 0;
}
html .oneButton button,
html .oneButton div,
html .oneButton a {
@@ -1161,8 +1208,8 @@ html .oneButton a::before {
}
@media (min-width: 768px) {
html .oneButton button::before,
html .oneButton div::before,
html .oneButton a::before {
html .oneButton div::before,
html .oneButton a::before {
width: 3.2rem;
}
}
@@ -1180,8 +1227,8 @@ html .oneButton a::after {
}
@media (min-width: 768px) {
html .oneButton button::after,
html .oneButton div::after,
html .oneButton a::after {
html .oneButton div::after,
html .oneButton a::after {
width: 3.2rem;
}
}
@@ -1226,6 +1273,16 @@ html .oneButtonBlack {
height: 5.6rem;
width: 100%;
}
html .oneButtonBlack::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-gleft.svg);
opacity: 0;
}
html .oneButtonBlack::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-gright.svg);
opacity: 0;
}
html .oneButtonBlack button,
html .oneButtonBlack a {
width: 100%;
@@ -1244,19 +1301,19 @@ html .oneButtonBlack a::before {
}
@media (max-width: 320px) {
html .oneButtonBlack button::before,
html .oneButtonBlack a::before {
html .oneButtonBlack a::before {
width: 3.2rem;
}
}
@media (max-width: 768px) {
html .oneButtonBlack button::before,
html .oneButtonBlack a::before {
html .oneButtonBlack a::before {
width: 3.2rem;
}
}
@media (max-width: 501px) {
html .oneButtonBlack button::before,
html .oneButtonBlack a::before {
html .oneButtonBlack a::before {
width: 3.2rem;
}
}
@@ -1273,19 +1330,19 @@ html .oneButtonBlack a::after {
}
@media (max-width: 320px) {
html .oneButtonBlack button::after,
html .oneButtonBlack a::after {
html .oneButtonBlack a::after {
width: 4.2rem;
}
}
@media (max-width: 768px) {
html .oneButtonBlack button::after,
html .oneButtonBlack a::after {
html .oneButtonBlack a::after {
width: 3rem;
}
}
@media (max-width: 501px) {
html .oneButtonBlack button::after,
html .oneButtonBlack a::after {
html .oneButtonBlack a::after {
width: 3rem;
}
}
@@ -1329,15 +1386,15 @@ html .productRight .optionWarp .producOption .optionList .checkBtn label {
border-radius: 0.6rem;
border: 1px solid #dedede;
}
html .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox] {
html .productRight .optionWarp .producOption .optionList .checkBtn input[type="checkbox"] {
visibility: hidden;
position: absolute;
}
html .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label {
html .productRight .optionWarp .producOption .optionList .checkBtn input[type="checkbox"]:checked + label {
background-color: #05141f;
border: 1px solid #05141f;
}
html .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label::before {
html .productRight .optionWarp .producOption .optionList .checkBtn input[type="checkbox"]:checked + label::before {
content: "";
position: absolute;
right: 2rem;
@@ -1350,8 +1407,8 @@ html .productRight .optionWarp .producOption .optionList .checkBtn input[type=ch
background-size: contain;
background-repeat: no-repeat;
}
html .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label div p span,
html .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label div p strong {
html .productRight .optionWarp .producOption .optionList .checkBtn input[type="checkbox"]:checked + label div p span,
html .productRight .optionWarp .producOption .optionList .checkBtn input[type="checkbox"]:checked + label div p strong {
color: #fff;
}
html .productRight .optionWarp .producOption .optionList .checkBtn:hover label {
@@ -1381,11 +1438,13 @@ html .productRight .optionWarp .producOption .optionList .checkBtn div p strong
html .productRight .optionWarp .producOption .optionList .checkBtn + .checkBtn {
margin-top: 1rem;
}
html .inquiryBtn a::before, html .inquiryBtn a::after {
html .inquiryBtn a::before,
html .inquiryBtn a::after {
width: 3.2rem;
}
@media (min-width: 768px) {
html .inquiryBtn a::before, html .inquiryBtn a::after {
html .inquiryBtn a::before,
html .inquiryBtn a::after {
width: 3.2rem;
}
}
@@ -1467,6 +1526,16 @@ body#faq .csWarp {
width: 100%;
min-width: 16rem;
}
.oneButtonLine::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg), url(../../images/kia/svg/kia-btn-wleft.svg), url(../../images/kia/svg/kia-btn-bleft.svg), url(../../images/kia/svg/kia-btn-gleft.svg);
opacity: 0;
}
.oneButtonLine::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yright.svg), url(../../images/kia/svg/kia-btn-wright.svg), url(../../images/kia/svg/kia-btn-bright.svg), url(../../images/kia/svg/kia-btn-gright.svg);
opacity: 0;
}
.oneButtonLine button,
.oneButtonLine div,
.oneButtonLine a {
@@ -1488,8 +1557,8 @@ body#faq .csWarp {
}
@media (min-width: 768px) {
.oneButtonLine button::before,
.oneButtonLine div::before,
.oneButtonLine a::before {
.oneButtonLine div::before,
.oneButtonLine a::before {
width: 3.2rem;
}
}
@@ -1507,8 +1576,8 @@ body#faq .csWarp {
}
@media (min-width: 768px) {
.oneButtonLine button::after,
.oneButtonLine div::after,
.oneButtonLine a::after {
.oneButtonLine div::after,
.oneButtonLine a::after {
width: 3.2rem;
}
}
@@ -1549,4 +1618,4 @@ body#faq .csWarp {
border-color: #9ba1a5;
border-radius: 0;
}
/*# sourceMappingURL=kia.css.map */
/*# sourceMappingURL=kia.css.map */

12
kr/assets/css/kia/kia.css.map
View File

File diff suppressed because one or more lines are too long

57
kr/assets/css/kia/kia.scss
View File

@@ -1,4 +1,5 @@
@charset "UTF-8";
@charset "UTF-8";
@import "../utils.scss";
html {
@@ -1027,6 +1028,17 @@ html {
justify-content: center;
}
&::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg), url(../../images/kia/svg/kia-btn-wleft.svg), url(../../images/kia/svg/kia-btn-bleft.svg), url(../../images/kia/svg/kia-btn-gleft.svg);
opacity: 0;
}
&::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yright.svg), url(../../images/kia/svg/kia-btn-wright.svg), url(../../images/kia/svg/kia-btn-bright.svg), url(../../images/kia/svg/kia-btn-gright.svg);
opacity: 0;
}
.leftBtn,
.centerBtn,
.rightBtn {
@@ -1206,6 +1218,18 @@ html {
display: flex;
justify-content: space-between;
&::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg), url(../../images/kia/svg/kia-btn-wleft.svg), url(../../images/kia/svg/kia-btn-bleft.svg), url(../../images/kia/svg/kia-btn-gleft.svg);
opacity: 0;
}
&::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yright.svg), url(../../images/kia/svg/kia-btn-wright.svg), url(../../images/kia/svg/kia-btn-bright.svg), url(../../images/kia/svg/kia-btn-gright.svg);
opacity: 0;
}
.leftBtn,
.centerBtn,
.rightBtn {
@@ -1352,6 +1376,17 @@ html {
width: 100%;
min-width: 16rem;
&::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg), url(../../images/kia/svg/kia-btn-wleft.svg), url(../../images/kia/svg/kia-btn-bleft.svg), url(../../images/kia/svg/kia-btn-gleft.svg);
opacity: 0;
}
&::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yright.svg), url(../../images/kia/svg/kia-btn-wright.svg), url(../../images/kia/svg/kia-btn-bright.svg), url(../../images/kia/svg/kia-btn-gright.svg);
opacity: 0;
}
button,
div,
a {
@@ -1431,6 +1466,17 @@ html {
height: 5.6rem;
width: 100%;
&::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-gleft.svg);
opacity: 0;
}
&::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-gright.svg);
opacity: 0;
}
button,
a {
width: 100%;
@@ -1723,6 +1769,17 @@ body#faq {
width: 100%;
min-width: 16rem;
&::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg), url(../../images/kia/svg/kia-btn-wleft.svg), url(../../images/kia/svg/kia-btn-bleft.svg), url(../../images/kia/svg/kia-btn-gleft.svg);
opacity: 0;
}
&::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yright.svg), url(../../images/kia/svg/kia-btn-wright.svg), url(../../images/kia/svg/kia-btn-bright.svg), url(../../images/kia/svg/kia-btn-gright.svg);
opacity: 0;
}
button,
div,
a {

6
kr/product/pdp_display_theme_disney_frozen.html
View File

@@ -40,7 +40,9 @@
<link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png" />
<link rel="icon" href="../assets/images/kia/favicon-16x16.png" />
<link rel="stylesheet" href="../assets/css/kia/kia-font.css?v1" type="text/css" />
<link rel="stylesheet" href="../assets/css/kia/kia.css?v1" type="text/css" />
<link rel="stylesheet" href="../assets/css/kia/kia.css?v2" type="text/css" />
</head>
<body>
<!--//header-->
@@ -497,7 +499,7 @@
<dt>총 결제 금액</dt>
<dd>₩ 29,900</dd>
</dl>
<div class="paymentButton oneButtonLine">
<div class="paymentButton oneButton">
<!-- <button class="cartBtn leftBtn"><p>장바구니</p></button> -->
<button class="PurchaseBtn leftBtn"><p>바로구매</p></button>
</div>