접근성 향상 : 제목요소 내림차순 정렬

Author: hmk20000

index.html

@@ -86,11 +86,11 @@ <h1>Best Sellers</h1>
                             <img src="images/vr1.webp" alt="product: Penom Case">
                         </div>
                         <div class="product-info">
-                            <h5 class="categories">Headsets, Apple</h5>
-                            <h4 class="title">Apple Headset</h4>
-                            <h3 class="price">
+                            <h2 class="categories">Headsets, Apple</h2>
+                            <h3 class="title">Apple Headset</h3>
+                            <h4 class="price">
                                 <span>US$ 450.00</span>
-                            </h3>
+                            </h4>
                             <button>Add to bag</button>
                         </div>
                     </div>
@@ -100,11 +100,11 @@ <h3 class="price">
                             <img src="images/vr2.webp" alt="product: Noise Cancelling Headphone">
                         </div>
                         <div class="product-info">
-                            <h5 class="categories">Headsets, PS</h5>
-                            <h4 class="title">Playstation Headset</h4>
-                            <h3 class="price">
+                            <h2 class="categories">Headsets, PS</h2>
+                            <h3 class="title">Playstation Headset</h3>
+                            <h4 class="price">
                                 <span>US$ 399.99</span>
-                            </h3>
+                            </h4>
                             <button>Add to bag</button>
                         </div>
                     </div>
@@ -114,12 +114,12 @@ <h3 class="price">
                             <img src="images/vr3.webp" alt="product: Canon Digital SLR EOS Rebel T6">
                         </div>
                         <div class="product-info">
-                            <h5 class="categories">Headsets, Oculus</h5>
-                            <h4 class="title">Oculus Headset</h4>
-                            <h3 class="price">
+                            <h2 class="categories">Headsets, Oculus</h2>
+                            <h3 class="title">Oculus Headset</h3>
+                            <4 class="price">
                                 <span class="discounted-price">US$ 349.99</span>
                                 <span class="original-price">US$ 419.99</span>
-                            </h3>
+                            </4>
                             <button>Add to bag</button>
                         </div>
                     </div>

js/products.js

@@ -29,15 +29,15 @@ function displayProducts(products) {
         const infoDiv = document.createElement('div');
         infoDiv.classList.add('product-info');
 
-        const category = document.createElement('h5');
+        const category = document.createElement('h2');
         category.classList.add('categories');
         category.textContent = product.category;
 
-        const title = document.createElement('h4');
+        const title = document.createElement('h3');
         title.classList.add('title');
         title.textContent = product.title;
 
-        const price = document.createElement('h3');
+        const price = document.createElement('h4');
         price.classList.add('price');
         const priceSpan = document.createElement('span');
         priceSpan.textContent = `US$ ${product.price}`;