naradesign · wonder13662 · Aug 30, 2022 · Aug 30, 2022 · Aug 30, 2022 · Aug 31, 2022
diff --git a/README.md b/README.md
@@ -7,3 +7,10 @@
 * [grid: &lt;'grid-template'&gt; \| &lt;'grid-template-rows'&gt; / \[ auto-flow && dense? \] &lt;'grid-auto-columns'&gt;? \| \[ auto-flow && dense? \] &lt;'grid-auto-rows'&gt;? / &lt;'grid-template-columns'&gt;](grid.html)
 * [grid-area: &lt;grid-line&gt; \[ / &lt;grid-line&gt; \]{0,3}](grid-area.html)
 * [CSS line-clamp generator](line-clamp-generator.html)
+
+# 테스트
+```
+$ node main.js
+```
+- [개선된 CSS 페이지](http://localhost:3000/optimized)
+- [기존 CSS 페이지](http://localhost:3000/unoptimized)
diff --git a/defer-css-my-work.css b/defer-css-my-work.css
@@ -0,0 +1,32 @@
+/* Copyright 2018 Google LLC. SPDX-License-Identifier: Apache-2.0 */
+
+.accordion-btn:hover {
+  background-color: #87cefa;
+}
+
+.paragraph1 {
+  word-wrap: break-word;
+  color: #ffa500;
+}
+
+.paragraph2 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #0000cd;
+}
+
+.paragraph3 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: clip;
+  color: #228b22;
+}
+
+p {
+  font-size: 18px;
+  font-family: Arial, Helvetica, sans-serif;
+  border: 1px solid #2e86c1;
+  border-radius: 2px;
+  padding: 5px;
+}
diff --git a/defer-css-optimized-my-work.html b/defer-css-optimized-my-work.html
@@ -0,0 +1,77 @@
+<!-- Copyright 2018 Google LLC. SPDX-License-Identifier: Apache-2.0 -->
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Optimized</title>
+  <style>
+    .accordion-btn {
+      width: 100%;
+      text-align: center;
+      font-size: 18px;
+      cursor: pointer;
+      color: #444;
+      background-color: #add8e6;
+      padding: 19px;
+      outline: none;
+      border: none;
+      border-radius: 2px;
+    }
+
+    .container {
+      display: none;
+      padding: 0 18px;
+      background-color: white;
+      overflow: hidden;
+    }
+
+    h1 {
+      word-spacing: 5px;
+      color: blue;
+      text-align: center;
+    }
+  </style>
+  <link
+    rel="preload"
+    as="style" 
+    href="defer-css-my-work.css"
+    onload="this.onload=null;this.rel='stylesheet'"
+  >  
+</head>
+<body>
+
+<h1>Critical CSS Demo - Optimized</h1>
+<h2>이 데모는 아코디언 컨테이너 안쪽의 보이지 않는 문단을 포함하여 모든 스타일을 로드합니다.</h2>
+
+  <button class="accordion-btn">Click to see a paragraph styled with set of styles #1.</button>
+  <div class="container">
+    <p class="paragraph1">This is an example of a paragraph that uses <strong>line breaks</strong> for text. This is an example of a paragraph that uses <strong>line breaks</strong> for text. This is an example of a paragraph that uses <strong>line breaks</strong> for text. This is an example of a paragraph that uses <strong>line breaks</strong> for text. This is an example of a paragraph that uses <strong>line breaks</strong> for text. This is an example of a paragraph that uses <strong>line breaks</strong> for text. This is an example of a paragraph that uses <strong>line breaks</strong> for text.</p>
+  </div>
+
+  <button class="accordion-btn">Click to see a paragraph styled with set of styles #2.</button>
+  <div class="container">
+    <p class="paragraph2">This is an example of a paragraph that uses <strong>elipsis</strong> for the overflow text. This is an example of a paragraph that uses <strong>elipsis</strong> for the overflow text. This is an example of a paragraph that uses <strong>elipsis</strong> for the overflow text. This is an example of a paragraph that uses <strong>elipsis</strong> for the overflow text.</p>
+  </div>
+
+  <button class="accordion-btn">Click to see a paragraph styled with set of styles #3.</button>
+  <div class="container">
+    <p class="paragraph3">This is an example of a paragraph that <strong>trims text</strong>. This is an example of a paragraph that <strong>trims text</strong>. This is an example of a paragraph that <strong>trims text</strong>. This is an example of a paragraph that <strong>trims text</strong>. This is an example of a paragraph that <strong>trims text</strong>. This is an example of a paragraph that <strong>trims text</strong>.</p>
+  </div>
+
+  <script>
+    var accordionBtn = document.getElementsByClassName("accordion-btn");
+
+    for (let i = 0; i < accordionBtn.length; i++) {
+        accordionBtn[i].addEventListener("click", function() {
+            var container = this.nextElementSibling;
+            if (container.style.display === "block") {
+                container.style.display = "none";
+            } else {
+                container.style.display = "block";
+            }
+        });
+    }
+  </script>
+
+</body>
+</html>
diff --git a/defer-css-unoptimized.html b/defer-css-unoptimized.html
@@ -42,4 +42,4 @@ <h2>이 데모는 아코디언 컨테이너 안쪽의 보이지 않는 문단을
   </script>
 
 </body>
-</html>
+</html>
diff --git a/defer-css.css b/defer-css.css
@@ -60,4 +60,4 @@ h3 {
   word-spacing: -5px;
   background-color: #eee;
   text-align: center;
-}
+}
diff --git a/main.js b/main.js
@@ -0,0 +1,20 @@
+var http = require('http');
+var fs = require('fs');
+var app = http.createServer(function(request,response){
+    var url = request.url;
+    if(request.url == '/optimized'){
+      url = '/defer-css-optimized-my-work.html';
+    }
+    if(request.url == '/unoptimized'){
+      url = '/defer-css-unoptimized.html';
+    }    
+    if(request.url == '/favicon.ico'){
+      response.writeHead(404);
+      response.end();
+      return;
+    }
+    response.writeHead(200);
+    response.end(fs.readFileSync(__dirname + url));
+
+});
+app.listen(3000);
-Original file line number
+Diff line change
@@ Expand Up @@
       </script>
     </body>
-    </html>
+    </html>