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) 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 ec892fc..6cf58fe 100644 --- a/defer-css-unoptimized.html +++ b/defer-css-unoptimized.html @@ -42,4 +42,4 @@

이 데모는 아코디언 컨테이너 안쪽의 보이지 않는 문단을 - + \ No newline at end of file diff --git a/defer-css.css b/defer-css.css index 9a79e5e..51bd60b 100644 --- a/defer-css.css +++ b/defer-css.css @@ -60,4 +60,4 @@ h3 { word-spacing: -5px; background-color: #eee; text-align: center; -} +} \ No newline at end of file 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