Skip to content

css 최적화 #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

css 최적화 #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f2da01d
미사용 css 제거
tory-inflab Jan 1, 2023
320234b
필수 css html internal style로 적용 및 비필수 지연 로딩 적용
tory-inflab Jan 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 96 additions & 34 deletions defer-css-unoptimized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,107 @@
<!-- 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>Unoptimized</title>
<link rel="stylesheet" type="text/css" href="defer-css.css">
</head>
<body>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Unoptimized</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;
}

<h1>Critical CSS Demo - Unoptimized</h1>
<h2>이 데모는 아코디언 컨테이너 안쪽의 보이지 않는 문단을 포함하여 모든 스타일을 로드합니다.</h2>
.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.css"
onload="this.onload=null;this.rel='stylesheet'"
/>
</head>
<body>
<h1>Critical CSS Demo - Unoptimized</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 #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 #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>
<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");
<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";
}
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>
}
</script>
</body>
</html>
35 changes: 0 additions & 35 deletions defer-css.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,4 @@
/* 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;
Expand Down Expand Up @@ -49,15 +26,3 @@ p {
text-overflow: clip;
color: #228b22;
}

h1 {
word-spacing: 5px;
color: blue;
text-align: center;
}

h3 {
word-spacing: -5px;
background-color: #eee;
text-align: center;
}