From a4653e7396b1582c3417f9cb8c0e95037b8d3c99 Mon Sep 17 00:00:00 2001 From: Wonder Jung Date: Wed, 31 Aug 2022 06:39:09 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=EA=B3=BC=EC=A0=9C=EC=99=84=EB=A3=8C!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- defer-css-unoptimized.html | 46 ++++++++++++++++++++++++++++++++++++++ defer-css.css | 44 ------------------------------------ 2 files changed, 46 insertions(+), 44 deletions(-) diff --git a/defer-css-unoptimized.html b/defer-css-unoptimized.html index ec892fc..ac7b1ae 100644 --- a/defer-css-unoptimized.html +++ b/defer-css-unoptimized.html @@ -4,6 +4,52 @@ Unoptimized + + diff --git a/defer-css.css b/defer-css.css index 9a79e5e..8d9bd1f 100644 --- a/defer-css.css +++ b/defer-css.css @@ -1,28 +1,9 @@ /* Copyright 2018 Google LLC. SPDX-License-Identifier: Apache-2.0 */ -.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; -} .accordion-btn:hover { background-color: #87cefa; } -.container { - display: none; - padding: 0 18px; - background-color: white; - overflow: hidden; -} - p { font-size: 18px; font-family: Arial, Helvetica, sans-serif; @@ -31,33 +12,8 @@ p { padding: 5px; } -.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; -} - h1 { word-spacing: 5px; color: blue; text-align: center; } - -h3 { - word-spacing: -5px; - background-color: #eee; - text-align: center; -} From 7786e408777565fbab39d35069918b44a56e6f2d Mon Sep 17 00:00:00 2001 From: Wonder Jung Date: Wed, 31 Aug 2022 06:43:56 +0900 Subject: [PATCH 2/6] =?UTF-8?q?link=20preload=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- defer-css-unoptimized.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/defer-css-unoptimized.html b/defer-css-unoptimized.html index ac7b1ae..13499ce 100644 --- a/defer-css-unoptimized.html +++ b/defer-css-unoptimized.html @@ -47,10 +47,9 @@ - From 73a9ba41068bd5e929b27933af9de88e6461a1ce Mon Sep 17 00:00:00 2001 From: Wonder Jung Date: Wed, 31 Aug 2022 07:04:20 +0900 Subject: [PATCH 3/6] =?UTF-8?q?CSS=20Coverage=20=ED=83=AD=EC=9D=84=20?= =?UTF-8?q?=ED=99=95=EC=9D=B8=ED=95=98=EC=97=AC=20=EC=97=85=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- defer-css-unoptimized.html | 21 ++++----------------- defer-css.css | 25 +++++++++++++++++++------ 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/defer-css-unoptimized.html b/defer-css-unoptimized.html index 13499ce..33a0ee0 100644 --- a/defer-css-unoptimized.html +++ b/defer-css-unoptimized.html @@ -25,23 +25,10 @@ overflow: hidden; } - .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; + h1 { + word-spacing: 5px; + color: blue; + text-align: center; } Date: Wed, 31 Aug 2022 09:15:09 +0900 Subject: [PATCH 4/6] =?UTF-8?q?=EC=84=B1=EB=8A=A5=20=EB=B9=84=EA=B5=90?= =?UTF-8?q?=EB=A5=BC=20=EC=9C=84=ED=95=B4=20=EC=9E=91=EC=97=85=EB=90=9C=20?= =?UTF-8?q?CSS=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=99=80=20=EA=B8=B0=EC=A1=B4?= =?UTF-8?q?=20CSS=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A5=BC=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- defer-css-my-work.css | 32 +++++++++++++ defer-css-optimized-my-work.html | 77 ++++++++++++++++++++++++++++++++ defer-css-unoptimized.html | 36 +-------------- defer-css.css | 43 +++++++++++++++--- 4 files changed, 148 insertions(+), 40 deletions(-) create mode 100644 defer-css-my-work.css create mode 100644 defer-css-optimized-my-work.html diff --git a/defer-css-my-work.css b/defer-css-my-work.css new file mode 100644 index 0000000..e6e6f82 --- /dev/null +++ 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 new file mode 100644 index 0000000..d93efb1 --- /dev/null +++ b/defer-css-optimized-my-work.html @@ -0,0 +1,77 @@ + + + + + + Optimized + + + + + +

Critical CSS Demo - Optimized

+

이 데모는 아코디언 컨테이너 안쪽의 보이지 않는 문단을 포함하여 모든 스타일을 로드합니다.

+ + +
+

This is an example of a paragraph that uses line breaks for text. This is an example of a paragraph that uses line breaks for text. This is an example of a paragraph that uses line breaks for text. This is an example of a paragraph that uses line breaks for text. This is an example of a paragraph that uses line breaks for text. This is an example of a paragraph that uses line breaks for text. This is an example of a paragraph that uses line breaks for text.

+
+ + +
+

This is an example of a paragraph that uses elipsis for the overflow text. This is an example of a paragraph that uses elipsis for the overflow text. This is an example of a paragraph that uses elipsis for the overflow text. This is an example of a paragraph that uses elipsis for the overflow text.

+
+ + +
+

This is an example of a paragraph that trims text. This is an example of a paragraph that trims text. This is an example of a paragraph that trims text. This is an example of a paragraph that trims text. This is an example of a paragraph that trims text. This is an example of a paragraph that trims text.

+
+ + + + + diff --git a/defer-css-unoptimized.html b/defer-css-unoptimized.html index 33a0ee0..6cf58fe 100644 --- a/defer-css-unoptimized.html +++ b/defer-css-unoptimized.html @@ -4,39 +4,7 @@ Unoptimized - - + @@ -74,4 +42,4 @@

이 데모는 아코디언 컨테이너 안쪽의 보이지 않는 문단을 - + \ No newline at end of file diff --git a/defer-css.css b/defer-css.css index e6e6f82..51bd60b 100644 --- a/defer-css.css +++ b/defer-css.css @@ -1,9 +1,36 @@ /* Copyright 2018 Google LLC. SPDX-License-Identifier: Apache-2.0 */ +.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; +} .accordion-btn:hover { background-color: #87cefa; } +.container { + display: none; + padding: 0 18px; + background-color: white; + overflow: hidden; +} + +p { + font-size: 18px; + font-family: Arial, Helvetica, sans-serif; + border: 1px solid #2e86c1; + border-radius: 2px; + padding: 5px; +} + .paragraph1 { word-wrap: break-word; color: #ffa500; @@ -23,10 +50,14 @@ color: #228b22; } -p { - font-size: 18px; - font-family: Arial, Helvetica, sans-serif; - border: 1px solid #2e86c1; - border-radius: 2px; - padding: 5px; +h1 { + word-spacing: 5px; + color: blue; + text-align: center; } + +h3 { + word-spacing: -5px; + background-color: #eee; + text-align: center; +} \ No newline at end of file From e56bdd4c151d3a5bcd63ed60b82dcacc7745723a Mon Sep 17 00:00:00 2001 From: Wonder Jung Date: Wed, 31 Aug 2022 09:15:31 +0900 Subject: [PATCH 5/6] =?UTF-8?q?node.js=20=EB=A1=9C=EC=BB=AC=20=EC=9B=B9?= =?UTF-8?q?=EC=84=9C=EB=B2=84=EB=A5=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- main.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 main.js diff --git a/main.js b/main.js new file mode 100644 index 0000000..132987f --- /dev/null +++ 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); \ No newline at end of file From 88bd2a13a2bea14262c61416c7913005f0335bf7 Mon Sep 17 00:00:00 2001 From: Wonder Jung Date: Wed, 31 Aug 2022 09:15:45 +0900 Subject: [PATCH 6/6] =?UTF-8?q?=EB=A1=9C=EC=BB=AC=20=EC=9B=B9=EC=84=9C?= =?UTF-8?q?=EB=B2=84=20=EA=B4=80=EB=A0=A8=20README.md=20=EC=97=85=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index a13833c..9e17c2a 100644 --- a/README.md +++ b/README.md @@ -7,3 +7,10 @@ * [grid: <'grid-template'> \| <'grid-template-rows'> / \[ auto-flow && dense? \] <'grid-auto-columns'>? \| \[ auto-flow && dense? \] <'grid-auto-rows'>? / <'grid-template-columns'>](grid.html) * [grid-area: <grid-line> \[ / <grid-line> \]{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)