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

24 files changed, 54 insertions, 56 deletions

diff --git a/files/ko/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html b/files/ko/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html
index 3005d81a05..3799ff6daa 100644
--- a/files/ko/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html
+++ b/files/ko/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html
@@ -54,7 +54,7 @@ original_slug: Learn/Common_questions/웹_사이트가_제대로_동작하는지
 <p>Servers respond with a status message whenever they receive a request. Here are the most common statuses:</p>
 
 <dl>
- <dt><strong><span id="cke_bm_110S" style="display: none;"> </span>200: OK</strong></dt>
+ <dt><strong><span id="cke_bm_110S" class="hidden"> </span>200: OK</strong></dt>
  <dd>The resource you asked for was delivered.</dd>
  <dt><strong>301: Moved permanently</strong></dt>
  <dd>The resource has moved to a new location. You won't see this much in your browser, but it's good to know about "301" since search engines use this information a lot to update their indexes.</dd>
diff --git a/files/ko/learn/css/styling_text/styling_lists/index.html b/files/ko/learn/css/styling_text/styling_lists/index.html
index 843636c554..a87a70408c 100644
--- a/files/ko/learn/css/styling_text/styling_lists/index.html
+++ b/files/ko/learn/css/styling_text/styling_lists/index.html
@@ -122,7 +122,7 @@ dd {
  <li>The first rule sets a sitewide font and a baseline font size of 10px. These are inherited by everything on the page.</li>
  <li>Rules 2 and 3 set relative font sizes for the headings, different list types (the children of the list elements inherit these), and paragraphs. This means that each paragraph and list will have the same font size and top and bottom spacing, helping to keep the vertical rhythm consistent.</li>
  <li>Rule 4 sets the same {{cssxref("line-height")}} on the paragraphs and list items — so the paragraphs and each individual list item will have the same spacing between lines. This will also help to keep the vertical rhythm consistent.</li>
- <li>Rules 5 and 6 apply to the description list — we set the same <code>line-height</code> on the description list terms and descriptions as we did with the paragraphs and list items. Again, consistency is good! We also make the description terms have bold font, so they visually stand out easier.<span id="cke_bm_126E" style="display: none;"> </span></li>
+ <li>Rules 5 and 6 apply to the description list — we set the same <code>line-height</code> on the description list terms and descriptions as we did with the paragraphs and list items. Again, consistency is good! We also make the description terms have bold font, so they visually stand out easier.<span id="cke_bm_126E" class="hidden"> </span></li>
 </ul>
 
 <h2 id="List-specific_styles">List-specific styles</h2>
diff --git a/files/ko/learn/html/howto/index.html b/files/ko/learn/html/howto/index.html
index 2bef079e90..3390846c62 100644
--- a/files/ko/learn/html/howto/index.html
+++ b/files/ko/learn/html/howto/index.html
@@ -150,4 +150,4 @@ translation_of: Learn/HTML/Howto
 </div>
 </div>
 
-<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p>
+<p><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span> </p>
diff --git a/files/ko/learn/javascript/first_steps/silly_story_generator/index.html b/files/ko/learn/javascript/first_steps/silly_story_generator/index.html
index a6f2318602..1c32988254 100644
--- a/files/ko/learn/javascript/first_steps/silly_story_generator/index.html
+++ b/files/ko/learn/javascript/first_steps/silly_story_generator/index.html
@@ -167,7 +167,6 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator
 <div id="dicLayerSub"></div>
 </div>
 
-<div id="dicRawData" style="display: none;">{"mean":["what&lt;br/&gt;&lt;br/&gt;[대명사, 한정사]\n\t\t \t\t(의문문에서) 무엇; 몇; 어떤, 무슨\n\n\t\t 참조 which","be&lt;br/&gt;&lt;br/&gt;[동사]\n\t\t there is/are\n\t\t \t\t있다, 존재하다","script&lt;br/&gt;&lt;br/&gt;[명사]\n\t\t \t\t(연극영화방송강연 등의) 대본[원고]","is&lt;br/&gt;&lt;br/&gt;참조 be","Java Script&lt;br/&gt;&lt;br/&gt;(컴퓨터)\n\t\t \t\t자바 스크립트 ((미국 넷스케이프 커뮤니케이션스가 개발한 스크립트 언어))","TypeScript&lt;br/&gt;&lt;br/&gt;[Proper noun] labelenscripting language A scripting programming language that is a strict superset of JavaScript and used to implement interactive features of Web pages."],"word":"What is JavaScript","soundUrl":"https://dict-dn.pstatic.net/v?_lsu_sa_=39682b535d673a26a89ab1563094c4fead4462b51a0a6f796ee2097e5bbb6bb1195cb75069a5ad7d792362a5c22ac0e7677a456c5837d53ff458f869cb3070278c86c07296cca27ab57925fedb326fd11c977e7d7a242a0e57b9d7f96c3e974376013120f37159780b34a104ca6074c614d78e8a098ad60cfcbe8ec73ef6b8cb","phoneticSymbol":""}</div>
 
 <div id="dicLayerLoader" style="top: 5596px; left: 281px;"></div>
 
@@ -177,7 +176,7 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator
 <div id="dicLayerSub"></div>
 </div>
 
-<div id="dicRawData" style="display: none;"></div>
+<div id="dicRawData" class="hidden"></div>
 
 <div id="dicLayerLoader"></div>
 
@@ -187,6 +186,6 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator
 <div id="dicLayerSub"></div>
 </div>
 
-<div id="dicRawData" style="display: none;"></div>
+<div id="dicRawData" class="hidden"></div>
 
 <div id="dicLayerLoader"></div>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.html b/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.html
index 1c36ddff1d..5fde619937 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.html
+++ b/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.html
@@ -49,7 +49,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/create
    <li>javascript: URL</li>
    <li>data: URL</li>
    <li>file: URL (예, 파일시스템의 파일들. 단, 확장 안에 포함된 파일의 사용은 아래를 보라)</li>
-   <li>특권이 있는 about: URL (예, <code>about:config</code>, <code>about:addons</code>, <code>about:debugging</code>)<span style="display: none;"> </span>. 특권이 없는 URL은 된다 (예, <code>about:blank</code>).</li>
+   <li>특권이 있는 about: URL (예, <code>about:config</code>, <code>about:addons</code>, <code>about:debugging</code>)<span class="hidden"> </span>. 특권이 없는 URL은 된다 (예, <code>about:blank</code>).</li>
    <li>새 탭 페이지 (<code>about:newtab</code>)는 URL 값이 주어지지 않으면 열린다.</li>
   </ul>
 
diff --git a/files/ko/web/api/analysernode/index.html b/files/ko/web/api/analysernode/index.html
index a76feaf59c..dcffff0050 100644
--- a/files/ko/web/api/analysernode/index.html
+++ b/files/ko/web/api/analysernode/index.html
@@ -49,7 +49,7 @@ translation_of: Web/API/AnalyserNode
 <p><em>{{domxref("AudioNode")}}</em> 를 부모로 가지는 프로퍼티.<em> </em></p>
 
 <dl>
- <dt><span id="cke_bm_91S" style="display: none;"> </span>{{domxref("AnalyserNode.fftSize")}}</dt>
+ <dt><span id="cke_bm_91S" class="hidden"> </span>{{domxref("AnalyserNode.fftSize")}}</dt>
  <dd>부호가 없는(unsigned long value) 주파수 영역에서의 전체 크기의 값을 나타내기 위한 푸리에 변환의 값의 크기를 나타낸다. (대략적으로 설명을 하면 해당 주파수영역을 보는데 얼마나 세밀하게 데이터를 볼것인지를 나타낸다. 클수록 세밀하지만 시간이 오래걸리고 작으면 빨리한다.)</dd>
  <dt> </dt>
  <dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt>
diff --git a/files/ko/web/api/document/adoptnode/index.html b/files/ko/web/api/document/adoptnode/index.html
index d2cce901a6..269f91125a 100644
--- a/files/ko/web/api/document/adoptnode/index.html
+++ b/files/ko/web/api/document/adoptnode/index.html
@@ -23,8 +23,8 @@ translation_of: Web/API/Document/adoptNode
 </pre>
 
 <dl>
- <dt><code><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span>node</code></dt>
- <dd>는 현재 문서에 삽입될 노드를 의미. 아직 해당 문서에 삽입되기 전이기 때문에 새로운 노드의 <a href="/en-US/docs/DOM/Node.parentNode"><code>parentNode</code></a>는 <code>null이다.</code><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></dd>
+ <dt><code><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span>node</code></dt>
+ <dd>는 현재 문서에 삽입될 노드를 의미. 아직 해당 문서에 삽입되기 전이기 때문에 새로운 노드의 <a href="/en-US/docs/DOM/Node.parentNode"><code>parentNode</code></a>는 <code>null이다.</code><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span></dd>
  <dt><code>externalNode</code></dt>
  <dd>는 노드를 가져오기 위한 외부 문서에 있는 노드를 의미.</dd>
 </dl>
diff --git a/files/ko/web/api/rtcpeerconnection/addicecandidate/index.html b/files/ko/web/api/rtcpeerconnection/addicecandidate/index.html
index 9062abc861..fe6ac9d284 100644
--- a/files/ko/web/api/rtcpeerconnection/addicecandidate/index.html
+++ b/files/ko/web/api/rtcpeerconnection/addicecandidate/index.html
@@ -64,7 +64,7 @@ addIceCandidate(<em>candidate</em>, <em>successCallback</em>, <em>failureCallbac
   <li>지정된 {{domxref("RTCIceCandidate.sdpMLineIndex", "sdpMLineIndex")}}의 값이 원격 설명 (description)에 포함된 미디어의 숫자와 같거나 큼</li>
   <li>지정된 {{domxref("RTCIceCandidate.usernameFragment", "ufrag")}}가 어떠한 원격 설명 (description) 안의 <code>ufrag</code> 필드와 일치하지 않음</li>
   <li>{{domxref("RTCIceCandidate", "candidate")}} 문자열에 존재하는 하나 혹은 여러개의 값들이 올바르지 않거나, 파싱 될 수 없음</li>
-  <li>어떠한 이유에서던 candidate를 추가하려는 시도가 실패<span style="display: none;"> </span></li>
+  <li>어떠한 이유에서던 candidate를 추가하려는 시도가 실패<span class="hidden"> </span></li>
  </ul>
  </dd>
 </dl>
diff --git a/files/ko/web/api/rtcsessiondescription/index.html b/files/ko/web/api/rtcsessiondescription/index.html
index 927204c7da..dce47879a0 100644
--- a/files/ko/web/api/rtcsessiondescription/index.html
+++ b/files/ko/web/api/rtcsessiondescription/index.html
@@ -79,7 +79,7 @@ translation_of: Web/API/RTCSessionDescription
 	<dd>Returns a {{Glossary("JSON")}} description of the object. The values of both properties, {{domxref("RTCSessionDescription.type", "type")}} and {{domxref("RTCSessionDescription.sdp", "sdp")}}, are contained in the generated JSON.</dd>
 </dl>
 
-<h2 id="Example">Example<span id="cke_bm_72C" style="display: none;"> </span></h2>
+<h2 id="Example">Example<span id="cke_bm_72C" class="hidden"> </span></h2>
 
 <pre class="brush: js">signalingChannel.onmessage = function (evt) {
     if (!pc)
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;
diff --git a/files/ko/web/javascript/guide/functions/index.html b/files/ko/web/javascript/guide/functions/index.html
index 381beaefe4..78f49f7b4f 100644
--- a/files/ko/web/javascript/guide/functions/index.html
+++ b/files/ko/web/javascript/guide/functions/index.html
@@ -656,4 +656,4 @@ var p = new Person();</pre>
 
 <div class="itanywhere-activator" style="left: 154px; top: 13819.2px; display: none;" title="Google Translator Anywhere"></div>
 
-<div class="itanywhere-activator" style="display: none;" title="Google Translator Anywhere"></div>
+<div class="itanywhere-activator" class="hidden" title="Google Translator Anywhere"></div>
diff --git a/files/ko/web/javascript/reference/global_objects/string/startswith/index.html b/files/ko/web/javascript/reference/global_objects/string/startswith/index.html
index 41eb064129..19fce8ea97 100644
--- a/files/ko/web/javascript/reference/global_objects/string/startswith/index.html
+++ b/files/ko/web/javascript/reference/global_objects/string/startswith/index.html
@@ -31,7 +31,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith
 
 <p>문자열이 검색 문자열로 시작하면 <code>true</code>, 아니면 <code>false</code>.</p>
 
-<h2 id="설명"><span style="display: none;"> </span><span style="display: none;"> </span>설명</h2>
+<h2 id="설명"><span class="hidden"> </span><span class="hidden"> </span>설명</h2>
 
 <p><code>startsWith</code> 메소드로 어떤 문자열이 다른 문자열로 시작하는지 확인 할 수 있습니다. 대소문자를 구분합니다.</p>
 
diff --git a/files/ko/web/media/formats/index.html b/files/ko/web/media/formats/index.html
index 08785a2212..48abc40149 100644
--- a/files/ko/web/media/formats/index.html
+++ b/files/ko/web/media/formats/index.html
@@ -30,7 +30,7 @@ translation_of: Web/Media/Formats
 <h3 id="Images">Images</h3>
 
 <dl>
- <dt><span style="display: none;"> </span><a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></dt>
+ <dt><span class="hidden"> </span><a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></dt>
  <dd>Covers image file type and content format support across the major web browsers, as well as providing basic information about each type: benefits, limitations, and use cases of interest to web designers and developers.</dd>
  <dt><a href="/en-US/docs/Web/Media/Formats/Images_for_web_designers">Image file types for web designers</a></dt>
  <dd>Fundamental information about the various image file types that may be useful for web designers, including best practices and use cases for each type, and guidelines for choosing the right image file format for specific types of content.</dd>
diff --git a/files/ko/web/svg/applying_svg_effects_to_html_content/index.html b/files/ko/web/svg/applying_svg_effects_to_html_content/index.html
index fc36e06d4c..64610311fc 100644
--- a/files/ko/web/svg/applying_svg_effects_to_html_content/index.html
+++ b/files/ko/web/svg/applying_svg_effects_to_html_content/index.html
@@ -186,7 +186,7 @@ pre.target:hover { filter:url(#f3); }
 
 <p>{{EmbedLiveSample('Example_Filtering', 650, 200)}}</p>
 
-<p style="display: none;"><a class="button liveSample" href="/files/3329/filterdemo.xhtml">View this example live</a></p>
+<p class="hidden"><a class="button liveSample" href="/files/3329/filterdemo.xhtml">View this example live</a></p>
 
 <h3 id="Example_Blurred_Text">Example: Blurred Text</h3>