use class="hidden" not style="display:none"

11 files changed, 39 insertions, 40 deletions

diff --git a/files/ko/web/css/css_background_and_borders/border-image_generator/index.html b/files/ko/web/css/css_background_and_borders/border-image_generator/index.html
index 01ae23c400..229a9eabd0 100644
--- a/files/ko/web/css/css_background_and_borders/border-image_generator/index.html
+++ b/files/ko/web/css/css_background_and_borders/border-image_generator/index.html
@@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
 ---
 <p>이 도구를 사용해 CSS3 {{cssxref("border-image")}} 값을 생성할 수 있습니다.</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
 
 <h3 id="HTML_Content">HTML Content</h3>
diff --git a/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html
index a5db192618..db9310aa83 100644
--- a/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html
+++ b/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html
@@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
 ---
 <p>이 도구를 사용해 CSS3 {{cssxref("border-radius")}} 값을 생성할 수 있습니다.</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
 
 <h3 id="HTML_Content">HTML Content</h3>
diff --git a/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html
index 00b22833fb..63a6166cd1 100644
--- a/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html
+++ b/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html
@@ -8,7 +8,7 @@ translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
 ---
 <p>이 도구를 사용해 CSS {{cssxref("box-shadow")}} 효과를 생성할 수 있습니다.</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2>
 
 <h3 id="HTML_Content">HTML Content</h3>
diff --git a/files/ko/web/css/css_colors/color_picker_tool/index.html b/files/ko/web/css/css_colors/color_picker_tool/index.html
index f5437c05b5..e4dfdff671 100644
--- a/files/ko/web/css/css_colors/color_picker_tool/index.html
+++ b/files/ko/web/css/css_colors/color_picker_tool/index.html
@@ -3,7 +3,7 @@ title: Color picker tool
 slug: Web/CSS/CSS_Colors/Color_picker_tool
 translation_of: Web/CSS/CSS_Colors/Color_picker_tool
 ---
-<div style="display: none;">
+<div class="hidden">
 <h2 id="ColorPicker_Tool" name="ColorPicker_Tool">ColorPicker tool</h2>
 
 <h3 id="HTML">HTML</h3>
diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
index 9444e2bb5e..1c38813c95 100644
--- a/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
+++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
@@ -107,7 +107,7 @@ span.bold { font-weight: bold; }
   <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li>
   <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li>
   <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li>
-  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_89E" style="display: none;"> </span></li>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_89E" class="hidden"> </span></li>
 </ul>
 <div class="originaldocinfo">
   <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html
index 04e826dc17..79cf0b4d91 100644
--- a/files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html
+++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html
@@ -131,7 +131,7 @@ span.bold { font-weight: bold; }
   <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li>
   <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li>
   <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li>
-  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_94E" style="display: none;"> </span></li>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_94E" class="hidden"> </span></li>
 </ul>
 <p> </p>
 <div class="originaldocinfo">
diff --git a/files/ko/web/css/css_transitions/using_css_transitions/index.html b/files/ko/web/css/css_transitions/using_css_transitions/index.html
index c81a169965..15368d34c5 100644
--- a/files/ko/web/css/css_transitions/using_css_transitions/index.html
+++ b/files/ko/web/css/css_transitions/using_css_transitions/index.html
@@ -76,7 +76,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions
  <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-duration: 0.5s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -141,7 +141,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-duration: 1s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -206,7 +206,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-duration: 2s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -271,7 +271,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-duration: 4s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -340,7 +340,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-timing-function: ease</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -403,7 +403,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-timing-function: linear</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -466,7 +466,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-timing-function: step-end</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -529,7 +529,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-timing-function: steps(4, end)</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -596,7 +596,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-delay: 0.5s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -663,7 +663,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-delay: 1s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -730,7 +730,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-delay: 2s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -797,7 +797,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-delay: 4s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
diff --git a/files/ko/web/css/filter/index.html b/files/ko/web/css/filter/index.html
index 8020311f12..c6b8b3afd6 100644
--- a/files/ko/web/css/filter/index.html
+++ b/files/ko/web/css/filter/index.html
@@ -83,7 +83,7 @@ filter: unset;</pre>
 <pre class="brush: css notranslate">filter: blur(5px)
 </pre>
 
-<div id="blur_example" style="display: none;">
+<div id="blur_example" class="hidden">
 <pre class="brush: html notranslate">  &lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -178,7 +178,7 @@ table.standard-table td {
   &lt;/filter&gt;
 &lt;/svg&gt;</pre>
 
-<div id="brightness_example" style="display: none;">
+<div id="brightness_example" class="hidden">
 <pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -273,7 +273,7 @@ table.standard-table td {
   &lt;/filter&gt;
 &lt;/svg&gt;</pre>
 
-<div id="contrast_example" style="display: none;">
+<div id="contrast_example" class="hidden">
 <pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -380,7 +380,7 @@ table.standard-table td {
   &lt;/filter&gt;
 &lt;/svg&gt;</pre>
 
-<div id="shadow_example" style="display: none;">
+<div id="shadow_example" class="hidden">
 <pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -498,7 +498,7 @@ table.standard-table td {
 
 <pre class="brush: css notranslate">filter: grayscale(100%)</pre>
 
-<div id="grayscale_example" style="display: none;">
+<div id="grayscale_example" class="hidden">
 <pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -582,7 +582,7 @@ table.standard-table td {
 
 <pre class="brush: css notranslate">filter: hue-rotate(90deg)</pre>
 
-<div id="huerotate_example" style="display: none;">
+<div id="huerotate_example" class="hidden">
 <pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -669,7 +669,7 @@ table.standard-table td {
 
 <pre class="brush: css notranslate">filter: invert(100%)</pre>
 
-<div id="invert_example" style="display: none;">
+<div id="invert_example" class="hidden">
 <pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -753,7 +753,7 @@ table.standard-table td {
 
 <pre class="brush: css notranslate">filter: opacity(50%)</pre>
 
-<div id="opacity_example" style="display: none;">
+<div id="opacity_example" class="hidden">
 <pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -835,7 +835,7 @@ table.standard-table td {
 
 <pre class="brush: css notranslate">filter: saturate(200%)</pre>
 
-<div id="saturate_example" style="display: none;">
+<div id="saturate_example" class="hidden">
 <pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -916,7 +916,7 @@ table.standard-table td {
 
 <pre class="brush: css notranslate">filter: sepia(100%)</pre>
 
-<div id="sepia_example" style="display: none;">
+<div id="sepia_example" class="hidden">
 <pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -1000,7 +1000,7 @@ table.standard-table td {
 
 <pre class="brush: css notranslate">filter: contrast(175%) brightness(103%)</pre>
 
-<div id="combination_example" style="display: none;">
+<div id="combination_example" class="hidden">
 <pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
diff --git a/files/ko/web/css/font/index.html b/files/ko/web/css/font/index.html
index 209669ed77..9be79a3f01 100644
--- a/files/ko/web/css/font/index.html
+++ b/files/ko/web/css/font/index.html
@@ -104,9 +104,8 @@ p { font: bold italic large serif }
 p { font: status-bar }
 </pre>
 
-<p id="HTML_Content" style="display: none;">HTML Content</p>
+<p id="HTML_Content" class="hidden">HTML Content</p>
 
-<pre class="brush: html" style="display: none;">&lt;p&gt;
     Change the radio buttons below to see the generated shorthand and it's effect.
 &lt;/p&gt;
 &lt;form action="createShortHand()"&gt;
@@ -200,9 +199,9 @@ p { font: status-bar }
 &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
 </pre>
 
-<p id="CSS_Content" style="display: none;">CSS Content</p>
+<p id="CSS_Content" class="hidden">CSS Content</p>
 
-<pre class="brush: css" style="display: none;">body, input {
+<pre class="brush: css" class="hidden">body, input {
   font: 14px arial;
   overflow: hidden;
 }
@@ -253,9 +252,9 @@ p { font: status-bar }
   display: inline-block;
 }</pre>
 
-<p id="JavaScript_Content" style="display: none;">JavaScript Content</p>
+<p id="JavaScript_Content" class="hidden">JavaScript Content</p>
 
-<pre class="brush: js" style="display: none;">var textAreas = document.getElementsByClassName("curCss"),
+<pre class="brush: js" class="hidden">var textAreas = document.getElementsByClassName("curCss"),
     shortText = "",
     getCheckedValue,
     setCss,
diff --git a/files/ko/web/css/image-rendering/index.html b/files/ko/web/css/image-rendering/index.html
index 85522966f0..01bae01e74 100644
--- a/files/ko/web/css/image-rendering/index.html
+++ b/files/ko/web/css/image-rendering/index.html
@@ -47,7 +47,7 @@ image-rendering: unset;
  <dd>이미지 스케일링을 크게 확대할 때는 "nearest neighbor" 혹은 비슷한 알고리즘을 반드시 사용해야 합니다. 그래서 이미지의 큰 픽셀로 구성해서 나타낼 수 있습니다. 이미지를 작게 축소할 때는 "auto" 속성과 같습니다.</dd>
 </dl>
 
-<div class="note">The values <span id="cke_bm_145S" style="display: none;"> </span><code>optimizeQuality</code> and <code>optimizeSpeed</code> present in early draft (and coming from its SVG counterpart) are defined as synonyms for the <code>auto</code> value.</div>
+<div class="note">The values <span id="cke_bm_145S" class="hidden"> </span><code>optimizeQuality</code> and <code>optimizeSpeed</code> present in early draft (and coming from its SVG counterpart) are defined as synonyms for the <code>auto</code> value.</div>
 
 <h3 id="공식_문법">공식 문법</h3>
 
diff --git a/files/ko/web/css/transition-delay/index.html b/files/ko/web/css/transition-delay/index.html
index 17a8543321..58b3e456cd 100644
--- a/files/ko/web/css/transition-delay/index.html
+++ b/files/ko/web/css/transition-delay/index.html
@@ -44,7 +44,7 @@ transition-delay: unset;
 <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 0.5s</code></p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -111,7 +111,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
 <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 1s</code></p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -178,7 +178,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
 <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 2s</code></p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -245,7 +245,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
 <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 4s</code></p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;