picture 태그 적용

Author: hmk20000

css/styles.css

@@ -101,11 +101,6 @@ section.hero img {
     width: 100%;
     height: auto;
     filter: brightness(50%);
-    display: none;
-}
-
-section.hero img.desktop {
-    display: initial;
 }
 
 .hero-content {
@@ -477,14 +472,6 @@ footer .copyright-text {
         display: inline-block;
     }
 
-    section.hero img.desktop {
-        display: none;
-    }
-
-    section.hero img.tablet {
-        display: initial;
-    }
-
     .hero-content h1 {
         font-size: 40px;
         letter-spacing: 1px;
@@ -616,14 +603,6 @@ footer .copyright-text {
         height: 7px;
     }
 
-    section.hero img.tablet {
-        display: none;
-    }
-
-    section.hero img.mobile {
-        display: initial;
-    }
-
     .hero-content {
         position: static;
         margin-bottom: 40px;

index.html

@@ -55,12 +55,11 @@
         </header>
 
         <section class="hero">
-
-            <img class="desktop" src="images/Hero_Desktop.webp">
-            <img class="mobile" src="images/Hero_Mobile.webp">
-            <img class="tablet" src="images/Hero_Tablet.webp">
-
-           
+            <picture>
+                <source media="(max-width: 576px)" srcset="images/Hero_Mobile.webp">
+                <source media="(max-width: 960px)" srcset="images/Hero_Tablet.webp">
+                <img src="images/Hero_Desktop.webp" alt="VR Headsets Hero Image">
+            </picture>
             <div class="hero-content">
                 <div class="container">
                     <h1>Discover our line of VR Headsets</h1>