Skip to content

Commit 5b87846

Browse files
author
dhp94d
committed
feat: h태그 오남용 및 스크립트 주입 방식 변경
1 parent a585a9f commit 5b87846

File tree

4 files changed

+109
-28
lines changed

4 files changed

+109
-28
lines changed

‎css/styles.css

+26-6
Original file line numberDiff line numberDiff line change
@@ -280,11 +280,21 @@ section.best-sellers .product-slider .product .product-info .price {
280280
margin-top: 0;
281281
}
282282

283-
section.best-sellers .product-slider .product .product-info .price .discounted-price {
283+
section.best-sellers
284+
.product-slider
285+
.product
286+
.product-info
287+
.price
288+
.discounted-price {
284289
color: #ec1c1c;
285290
}
286291

287-
section.best-sellers .product-slider .product .product-info .price .original-price {
292+
section.best-sellers
293+
.product-slider
294+
.product
295+
.product-info
296+
.price
297+
.original-price {
288298
color: #9b9b9b;
289299
font-weight: normal;
290300
font-size: 16px;
@@ -321,7 +331,7 @@ section.newsletter {
321331
margin: 80px auto;
322332
}
323333

324-
section.newsletter h3 {
334+
section.newsletter p {
325335
font-size: 24px;
326336
letter-spacing: 0.6px;
327337
line-height: 42px;
@@ -520,7 +530,12 @@ footer .copyright-text {
520530
line-height: 30px;
521531
}
522532

523-
section.best-sellers .product-slider .product .product-info .price .original-price {
533+
section.best-sellers
534+
.product-slider
535+
.product
536+
.product-info
537+
.price
538+
.original-price {
524539
font-size: 9px;
525540
letter-spacing: 0.23px;
526541
line-height: 30px;
@@ -550,7 +565,7 @@ footer .copyright-text {
550565
margin: 50px auto;
551566
}
552567

553-
section.newsletter h3 {
568+
section.newsletter p {
554569
font-size: 22px;
555570
letter-spacing: 0.55px;
556571
line-height: 42px;
@@ -651,7 +666,12 @@ footer .copyright-text {
651666
letter-spacing: 0.5px;
652667
}
653668

654-
section.best-sellers .product-slider .product .product-info .price .original-price {
669+
section.best-sellers
670+
.product-slider
671+
.product
672+
.product-info
673+
.price
674+
.original-price {
655675
font-size: 11px;
656676
letter-spacing: 0.28px;
657677
line-height: 20px;

‎index.html

+15-16
Original file line numberDiff line numberDiff line change
@@ -162,11 +162,11 @@ <h1>Best Sellers</h1>
162162
/>
163163
</div>
164164
<div class="product-info">
165-
<h5 class="categories">Headsets, Apple</h5>
166-
<h4 class="title">Apple Headset</h4>
167-
<h3 class="price">
165+
<p class="categories">Headsets, Apple</p>
166+
<p class="title">Apple Headset</p>
167+
<p class="price">
168168
<span>US$ 450.00</span>
169-
</h3>
169+
</p>
170170
<button>Add to bag</button>
171171
</div>
172172
</div>
@@ -181,11 +181,11 @@ <h3 class="price">
181181
/>
182182
</div>
183183
<div class="product-info">
184-
<h5 class="categories">Headsets, PS</h5>
185-
<h4 class="title">Playstation Headset</h4>
186-
<h3 class="price">
184+
<p class="categories">Headsets, PS</p>
185+
<p class="title">Playstation Headset</p>
186+
<p class="price">
187187
<span>US$ 399.99</span>
188-
</h3>
188+
</p>
189189
<button>Add to bag</button>
190190
</div>
191191
</div>
@@ -200,12 +200,12 @@ <h3 class="price">
200200
/>
201201
</div>
202202
<div class="product-info">
203-
<h5 class="categories">Headsets, Oculus</h5>
204-
<h4 class="title">Oculus Headset</h4>
205-
<h3 class="price">
203+
<p class="categories">Headsets, Oculus</p>
204+
<p class="title">Oculus Headset</p>
205+
<p class="price">
206206
<span class="discounted-price">US$ 349.99</span>
207207
<span class="original-price">US$ 419.99</span>
208-
</h3>
208+
</p>
209209
<button>Add to bag</button>
210210
</div>
211211
</div>
@@ -222,7 +222,7 @@ <h1>All Products</h1>
222222
</section>
223223

224224
<section class="newsletter" id="newsletter-section">
225-
<h3>Newsletter Signup</h3>
225+
<p>Newsletter Signup</p>
226226
<p>Subscribe now and don't miss a single deal!</p>
227227
<form>
228228
<input type="email" name="email" placeholder="Your email..." />
@@ -276,9 +276,9 @@ <h3>Newsletter Signup</h3>
276276
<a href="#" id="open_preferences_center">Update cookies preferences</a>
277277

278278
<script type="text/javascript" src="/js/main.min.js"></script>
279-
<script type="text/javascript" src="/js/products.min.js"></script>
279+
<script type="text/javascript" src="/js/products.min.js" defer></script>
280280
<!-- Google Tag Manager -->
281-
<script>
281+
<script defer>
282282
(function (w, d, s, l, i) {
283283
w[l] = w[l] || [];
284284
w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
@@ -294,7 +294,6 @@ <h3>Newsletter Signup</h3>
294294
type="text/javascript"
295295
src="//www.freeprivacypolicy.com/public/cookie-consent/4.1.0/cookie-consent.js"
296296
charset="UTF-8"
297-
defer
298297
></script>
299298
<script type="text/javascript" charset="UTF-8" defer>
300299
cookieconsent.run({

‎js/products.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ async function loadProducts() {
55
}
66

77
const onIntersection = (entries, observer) => {
8-
entries.forEach(entry => {
8+
entries.forEach((entry) => {
99
if (entry.isIntersecting) {
1010
const img = entry.target;
1111
img.src = img.dataset.src;
@@ -24,7 +24,7 @@ function displayProducts(products) {
2424
const container = document.querySelector('#all-products .container');
2525

2626
// Iterate over each product and create the HTML structure safely
27-
products.forEach(product => {
27+
products.forEach((product) => {
2828
// Create the main product div
2929
const productElement = document.createElement('div');
3030
productElement.classList.add('product');
@@ -45,15 +45,15 @@ function displayProducts(products) {
4545
const infoDiv = document.createElement('div');
4646
infoDiv.classList.add('product-info');
4747

48-
const category = document.createElement('h5');
48+
const category = document.createElement('p');
4949
category.classList.add('categories');
5050
category.textContent = product.category;
5151

52-
const title = document.createElement('h4');
52+
const title = document.createElement('p');
5353
title.classList.add('title');
5454
title.textContent = product.title;
5555

56-
const price = document.createElement('h3');
56+
const price = document.createElement('p');
5757
price.classList.add('price');
5858
const priceSpan = document.createElement('span');
5959
priceSpan.textContent = `US$ ${product.price}`;

‎js/products.min.js

+63-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,63 @@
1-
async function loadProducts(){const t=await fetch("https://fakestoreapi.com/products");const e=await t.json();displayProducts(e)}const onIntersection=(t,e)=>{t.forEach((t=>{if(t.isIntersecting){const n=t.target;n.src=n.dataset.src;e.unobserve(n)}}))};const observer=new IntersectionObserver(onIntersection,{root:null,threshold:.1});function displayProducts(t){const e=document.querySelector("#all-products .container");t.forEach((t=>{const n=document.createElement("div");n.classList.add("product");const c=document.createElement("div");c.classList.add("product-picture");const o=document.createElement("img");o.dataset.src=t.image;o.alt=`product: ${t.title}`;o.width=350;o.height=350;c.appendChild(o);observer.observe(o);const s=document.createElement("div");s.classList.add("product-info");const a=document.createElement("h5");a.classList.add("categories");a.textContent=t.category;const d=document.createElement("h4");d.classList.add("title");d.textContent=t.title;const r=document.createElement("h3");r.classList.add("price");const i=document.createElement("span");i.textContent=`US$ ${t.price}`;r.appendChild(i);const l=document.createElement("button");l.textContent="Add to bag";s.appendChild(a);s.appendChild(d);s.appendChild(r);s.appendChild(l);n.appendChild(c);n.appendChild(s);e.appendChild(n)}))}loadProducts();const heavyOperationAsync=()=>{for(let t=0;t<1e7;t++){const e=Math.sqrt(t)*Math.sqrt(t)}};requestIdleCallback(heavyOperationAsync);
1+
async function loadProducts() {
2+
const t = await fetch('https://fakestoreapi.com/products');
3+
const e = await t.json();
4+
displayProducts(e);
5+
}
6+
const onIntersection = (t, e) => {
7+
t.forEach((t) => {
8+
if (t.isIntersecting) {
9+
const n = t.target;
10+
n.src = n.dataset.src;
11+
e.unobserve(n);
12+
}
13+
});
14+
};
15+
const observer = new IntersectionObserver(onIntersection, {
16+
root: null,
17+
threshold: 0.1,
18+
});
19+
function displayProducts(t) {
20+
const e = document.querySelector('#all-products .container');
21+
t.forEach((t) => {
22+
const n = document.createElement('div');
23+
n.classList.add('product');
24+
const c = document.createElement('div');
25+
c.classList.add('product-picture');
26+
const o = document.createElement('img');
27+
o.dataset.src = t.image;
28+
o.alt = `product: ${t.title}`;
29+
o.width = 350;
30+
o.height = 350;
31+
c.appendChild(o);
32+
observer.observe(o);
33+
const s = document.createElement('div');
34+
s.classList.add('product-info');
35+
const a = document.createElement('p');
36+
a.classList.add('categories');
37+
a.textContent = t.category;
38+
const d = document.createElement('p');
39+
d.classList.add('title');
40+
d.textContent = t.title;
41+
const r = document.createElement('p');
42+
r.classList.add('price');
43+
const i = document.createElement('span');
44+
i.textContent = `US$ ${t.price}`;
45+
r.appendChild(i);
46+
const l = document.createElement('button');
47+
l.textContent = 'Add to bag';
48+
s.appendChild(a);
49+
s.appendChild(d);
50+
s.appendChild(r);
51+
s.appendChild(l);
52+
n.appendChild(c);
53+
n.appendChild(s);
54+
e.appendChild(n);
55+
});
56+
}
57+
loadProducts();
58+
const heavyOperationAsync = () => {
59+
for (let t = 0; t < 1e7; t++) {
60+
const e = Math.sqrt(t) * Math.sqrt(t);
61+
}
62+
};
63+
requestIdleCallback(heavyOperationAsync);

0 commit comments

Comments
 (0)