From ee778d6eea54935fd05022e0ba8c49456003381a Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:48:24 +0100 Subject: unslug ko: move --- files/ko/learn/accessibility/html/index.html | 537 ++++++++++++ files/ko/learn/accessibility/index.html | 59 ++ files/ko/learn/accessibility/mobile/index.html | 315 +++++++ .../accessibility/what_is_accessibility/index.html | 205 +++++ .../index.html | 170 ++++ .../thinking_before_coding/index.html | 176 ++++ .../index.html" | 170 ---- .../index.html" | 176 ---- files/ko/learn/css/basics/layout/index.html | 409 --------- .../fundamental_css_comprehension/index.html | 128 +++ .../learn/css/building_blocks/selectors/index.html | 223 +++++ .../css/building_blocks/the_box_model/index.html | 347 ++++++++ .../index.html" | 347 -------- .../index.html" | 223 ----- .../learn/css/css_layout/media_queries/index.html | 424 ++++++++++ .../ko/learn/css/css_layout/normal_flow/index.html | 102 +++ .../ko/learn/css/css_layout/positioning/index.html | 585 +++++++++++++ .../css/css_layout/responsive_design/index.html | 333 ++++++++ .../supporting_older_browsers/index.html | 248 ++++++ .../index.html" | 424 ---------- .../index.html" | 333 -------- .../index.html" | 585 ------------- .../index.html" | 248 ------ .../index.html" | 102 --- files/ko/learn/css/howto/css_faq/index.html | 199 +++++ .../index.html" | 128 --- .../forms/how_to_structure_a_web_form/index.html | 928 +++++++++++++++++++++ files/ko/learn/forms/index.html | 358 ++++++++ .../sending_and_retrieving_form_data/index.html | 249 ++++++ files/ko/learn/forms/your_first_form/index.html | 272 ++++++ .../css_basics/index.html | 293 +++++++ .../css_\352\270\260\353\263\270/index.html" | 293 ------- .../dealing_with_files/index.html | 117 +++ .../how_the_web_works/index.html | 99 +++ .../html_basics/index.html | 234 ++++++ .../html_\352\270\260\353\263\270/index.html" | 234 ------ .../installing_basic_software/index.html | 75 ++ .../publishing_your_website/index.html | 176 ++++ .../index.html" | 75 -- .../index.html" | 176 ---- .../index.html" | 99 --- .../index.html" | 117 --- files/ko/learn/how_to_contribute/index.html | 105 --- .../index.html" | 928 --------------------- files/ko/learn/html/forms/index.html | 358 -------- .../sending_and_retrieving_form_data/index.html | 249 ------ .../html/forms/your_first_html_form/index.html | 272 ------ .../author_fast-loading_html_pages/index.html | 132 +++ .../index.html | 268 ------ .../html/howto/use_data_attributes/index.html | 82 ++ .../index.html" | 82 -- .../ideo_and_audio_content/index.html | 327 -------- .../video_and_audio_content/index.html | 327 ++++++++ files/ko/learn/infrastructure/index.html | 19 - .../building_blocks/conditionals/index.html | 770 +++++++++++++++++ .../index.html" | 770 ----------------- .../manipulating_documents/index.html | 145 ++++ .../test_your_skills_colon__json/index.html | 65 ++ .../index.html" | 65 -- .../development_environment/index.html | 399 +++++++++ .../express_nodejs/skeleton_website/index.html | 512 ++++++++++++ .../index.html" | 399 --------- .../index.html" | 512 ------------ .../node_server_without_framework/index.html | 74 ++ files/ko/learn/skills/index.html | 22 - .../learn/web_\352\270\260\354\210\240/index.html" | 24 - .../html/index.html" | 537 ------------ .../index.html" | 59 -- .../what_is_accessibility/index.html" | 205 ----- .../index.html" | 315 ------- 70 files changed, 9358 insertions(+), 9655 deletions(-) create mode 100644 files/ko/learn/accessibility/html/index.html create mode 100644 files/ko/learn/accessibility/index.html create mode 100644 files/ko/learn/accessibility/mobile/index.html create mode 100644 files/ko/learn/accessibility/what_is_accessibility/index.html create mode 100644 files/ko/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html create mode 100644 files/ko/learn/common_questions/thinking_before_coding/index.html delete mode 100644 "files/ko/learn/common_questions/\354\233\271_\354\202\254\354\235\264\355\212\270\352\260\200_\354\240\234\353\214\200\353\241\234_\353\217\231\354\236\221\355\225\230\353\212\224\354\247\200_\355\231\225\354\235\270/index.html" delete mode 100644 "files/ko/learn/common_questions/\354\275\224\353\224\251\355\225\230\352\270\260_\354\240\204\354\227\220_\354\203\235\352\260\201\355\225\230\352\270\260/index.html" delete mode 100644 files/ko/learn/css/basics/layout/index.html create mode 100644 files/ko/learn/css/building_blocks/fundamental_css_comprehension/index.html create mode 100644 files/ko/learn/css/building_blocks/selectors/index.html create mode 100644 files/ko/learn/css/building_blocks/the_box_model/index.html delete mode 100644 "files/ko/learn/css/building_blocks/\354\203\201\354\236\220_\353\252\250\353\215\270/index.html" delete mode 100644 "files/ko/learn/css/building_blocks/\354\204\240\355\203\235\354\236\220/index.html" create mode 100644 files/ko/learn/css/css_layout/media_queries/index.html create mode 100644 files/ko/learn/css/css_layout/normal_flow/index.html create mode 100644 files/ko/learn/css/css_layout/positioning/index.html create mode 100644 files/ko/learn/css/css_layout/responsive_design/index.html create mode 100644 files/ko/learn/css/css_layout/supporting_older_browsers/index.html delete mode 100644 "files/ko/learn/css/css_layout/\353\257\270\353\224\224\354\226\264_\354\277\274\353\246\254_\354\264\210\353\263\264\354\236\220_\354\225\210\353\202\264\354\204\234/index.html" delete mode 100644 "files/ko/learn/css/css_layout/\353\260\230\354\235\221\355\230\225_\353\224\224\354\236\220\354\235\270/index.html" delete mode 100644 "files/ko/learn/css/css_layout/\354\234\204\354\271\230\354\236\241\352\270\260/index.html" delete mode 100644 "files/ko/learn/css/css_layout/\354\235\264\354\240\204_\353\270\214\353\235\274\354\232\260\354\240\200_\354\247\200\354\233\220/index.html" delete mode 100644 "files/ko/learn/css/css_layout/\354\235\274\353\260\230_\355\235\220\353\246\204/index.html" create mode 100644 files/ko/learn/css/howto/css_faq/index.html delete mode 100644 "files/ko/learn/css/introduction_to_css/\352\270\260\353\263\270\354\240\201\354\235\270_css_\354\235\264\355\225\264/index.html" create mode 100644 files/ko/learn/forms/how_to_structure_a_web_form/index.html create mode 100644 files/ko/learn/forms/index.html create mode 100644 files/ko/learn/forms/sending_and_retrieving_form_data/index.html create mode 100644 files/ko/learn/forms/your_first_form/index.html create mode 100644 files/ko/learn/getting_started_with_the_web/css_basics/index.html delete mode 100644 "files/ko/learn/getting_started_with_the_web/css_\352\270\260\353\263\270/index.html" create mode 100644 files/ko/learn/getting_started_with_the_web/dealing_with_files/index.html create mode 100644 files/ko/learn/getting_started_with_the_web/how_the_web_works/index.html create mode 100644 files/ko/learn/getting_started_with_the_web/html_basics/index.html delete mode 100644 "files/ko/learn/getting_started_with_the_web/html_\352\270\260\353\263\270/index.html" create mode 100644 files/ko/learn/getting_started_with_the_web/installing_basic_software/index.html create mode 100644 files/ko/learn/getting_started_with_the_web/publishing_your_website/index.html delete mode 100644 "files/ko/learn/getting_started_with_the_web/\352\270\260\353\263\270_\354\206\214\355\224\204\355\212\270\354\233\250\354\226\264_\354\204\244\354\271\230\355\225\230\352\270\260/index.html" delete mode 100644 "files/ko/learn/getting_started_with_the_web/\354\233\271\354\202\254\354\235\264\355\212\270_\354\266\234\355\214\220\355\225\230\352\270\260/index.html" delete mode 100644 "files/ko/learn/getting_started_with_the_web/\354\233\271\354\235\230_\353\217\231\354\236\221_\353\260\251\354\213\235/index.html" delete mode 100644 "files/ko/learn/getting_started_with_the_web/\355\214\214\354\235\274\353\223\244_\353\213\244\353\243\250\352\270\260/index.html" delete mode 100644 files/ko/learn/how_to_contribute/index.html delete mode 100644 "files/ko/learn/html/forms/html_\355\217\274_\352\265\254\354\204\261_\353\260\251\353\262\225/index.html" delete mode 100644 files/ko/learn/html/forms/index.html delete mode 100644 files/ko/learn/html/forms/sending_and_retrieving_form_data/index.html delete mode 100644 files/ko/learn/html/forms/your_first_html_form/index.html create mode 100644 files/ko/learn/html/howto/author_fast-loading_html_pages/index.html delete mode 100644 files/ko/learn/html/howto/mark_abbreviations_and_make_them_understandable/index.html create mode 100644 files/ko/learn/html/howto/use_data_attributes/index.html delete mode 100644 "files/ko/learn/html/howto/\353\215\260\354\235\264\355\204\260_\354\206\215\354\204\261_\354\202\254\354\232\251\355\225\230\352\270\260/index.html" delete mode 100644 files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html create mode 100644 files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html delete mode 100644 files/ko/learn/infrastructure/index.html create mode 100644 files/ko/learn/javascript/building_blocks/conditionals/index.html delete mode 100644 "files/ko/learn/javascript/building_blocks/\354\241\260\352\261\264\353\254\270/index.html" create mode 100644 files/ko/learn/javascript/client-side_web_apis/manipulating_documents/index.html create mode 100644 files/ko/learn/javascript/objects/test_your_skills_colon__json/index.html delete mode 100644 "files/ko/learn/javascript/objects/\354\226\274\353\247\210\353\202\230_\354\235\264\355\225\264\355\226\210\353\212\224\354\247\200_\355\231\225\354\235\270\355\225\264\353\263\264\354\236\220_colon__json/index.html" create mode 100644 files/ko/learn/server-side/express_nodejs/development_environment/index.html create mode 100644 files/ko/learn/server-side/express_nodejs/skeleton_website/index.html delete mode 100644 "files/ko/learn/server-side/express_nodejs/\352\260\234\353\260\234_\355\231\230\352\262\275/index.html" delete mode 100644 "files/ko/learn/server-side/express_nodejs/\354\212\244\354\274\210\353\240\210\355\206\244_\354\233\271\354\202\254\354\235\264\355\212\270/index.html" create mode 100644 files/ko/learn/server-side/node_server_without_framework/index.html delete mode 100644 files/ko/learn/skills/index.html delete mode 100644 "files/ko/learn/web_\352\270\260\354\210\240/index.html" delete mode 100644 "files/ko/learn/\354\240\221\352\267\274\354\204\261/html/index.html" delete mode 100644 "files/ko/learn/\354\240\221\352\267\274\354\204\261/index.html" delete mode 100644 "files/ko/learn/\354\240\221\352\267\274\354\204\261/what_is_accessibility/index.html" delete mode 100644 "files/ko/learn/\354\240\221\352\267\274\354\204\261/\353\252\250\353\260\224\354\235\274/index.html" (limited to 'files/ko/learn') diff --git a/files/ko/learn/accessibility/html/index.html b/files/ko/learn/accessibility/html/index.html new file mode 100644 index 0000000000..dae842fc92 --- /dev/null +++ b/files/ko/learn/accessibility/html/index.html @@ -0,0 +1,537 @@ +--- +title: 'HTML: 접근성을 위한 기초' +slug: Learn/접근성/HTML +tags: + - HTML + - HTML 접근성 + - 스크린리더 + - 시멘틱 + - 시멘틱 웹 + - 시멘틱웹 + - 웹 접근성 + - 접근성 향상 +translation_of: Learn/Accessibility/HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}
+ +

HTML 요소가 늘 올바른 목적을 가지고 쓰이는지 확인하는 것만으로도, 수많은 웹 콘텐츠는 접근성이 향상됩니다. 이 문서에는 접근성을 최대한으로 보장하기 위해 HTML을 어떻게 사용해야 하는지 자세히 설명합니다.

+ + + + + + + + + + + + +
Prerequisites:Basic computer literacy, a basic understanding of HTML (see Introduction to HTML), and understanding of what accessibility is.
Objective:To gain familiarity with what features of HTML have accessibility benefits, and how to use them appropriately in your web documents.
+ +

HTML과 접근성

+ +

 

+ +

HTML에 대해 더 많은 자료와 예제를 접하고, 더 많이 배우면 배울수록 당신은 의미론적 HTML(시멘틱 HTML, POSH 또는 Plain Old Semantic HTML라고 부르기도 합니다)을 사용하는 것이 중요하다는 공통 주제를 계속해서 접하게 될 것입니다. 이것은 가능한 올바른 목적으로 올바른 HTML 요소를 사용하는 것을 의미합니다.

+ +

당신은 아마 이것이 왜 중요한지 의문을 가질 수 있을 것입니다. 당신은 CSS와 JavaScript 조합을 사용해 원하는 방식으로 HTML 요소들을 동작시킬 수 있기 때문입니다. 예를 들어 사이트에서 동영상을 제어하기 위한 버튼을 당신은 이렇게 마크업 할 수 있습니다.

+ +
<div>Play video</div>
+ +

그러나 당신이 나중에 더 자세하게 배울수록, 작업에 올바른 HTML 요소를 사용하는 것이 많은 의미를 내포하고 있음을 깨닫게 될 것입니다.

+ +
<button>Play video</button>
+ +

Not only do HTML <button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — they can be tabbed between, and activated using Return/Enter.

+ +

Semantic HTML doesn't take longer to write than non-semantic (bad) markup if you do it consistently from the start of your project, and it also has other benefits beyond accessibility:

+ +
    +
  1. Easier to develop with — as mentioned above, you get some functionality for free, plus it is arguably easier to understand.
    2. +
  2. Better on mobile — semantic HTML is arguably lighter in file size than non-semantic spaghetti code, and easier to make responsive.
    3. +
  3. Good for SEO — search engines give more importance to keywords inside headings, links, etc., than keywords included in non-semantic <div>s, etc., so your documents will be more findable by customers.
    4. +
+ +

Let's get on and look at accessible HTML in more detail.

+ +
+

Note: It is a good idea to have a screenreader set up on your local computer, so you can do some testing of the examples shown below. See our Screenreaders guide for more details.

+
+ +

Good semantics

+ +

We've already talked about the importance of good semantics, and why we should use the right HTML element for the right job. This cannot be ignored, as it is one of the main places that accessibility is badly broken if not handled properly.

+ +

Out there on the web, the truth is that people do some very strange things with HTML markup. Some abuses of HTML are due to legacy practices that have not been completely forgotten, and some are just plain ignorance. Whatever the case, you should replace such bad code wherever you see it, whenever you can.

+ +

Sometimes you are not always in the position to get rid of bad markup — your pages might be generated by some kind of server-side framework that you don't have full control over, or you might have third party content on your page (such as ad banners) that you don't have control over.

+ +

The goal isn't "all or nothing", however — every improvement you are able to make will help the cause of accessibility.

+ +

Text content

+ +

One of the best accessibility aids a screenreader user can have is a good content structure of headings, paragraphs, lists, etc. A good semantic example might look something like the following:

+ +
<h1>My heading</h1>
+
+<p>This is the first section of my document.</p>
+
+<p>I'll add another paragraph here too.</p>
+
+<ol>
+  <li>Here is</li>
+  <li>a list for</li>
+  <li>you to read</li>
+</ol>
+
+<h2>My subheading</h2>
+
+<p>This is the first subsection of my document. I'd love people to be able to find this content!</p>
+
+<h2>My 2nd subheading</h2>
+
+<p>This is the second subsection of my content. I think is more interesting than the last one.</p>
+ +

We've prepared a version with longer text for you to try out with a screenreader (see good-semantics.html). If you try navigating through this, you'll see that this is pretty easy to navigate:

+ +
    +
  1. The screenreader reads each header out as you progress through the content, notifying you what is a heading, what is a paragraph, etc.
    2. +
  2. It stops after each element, letting you go at whatever pace is comfortable for you.
    3. +
  3. You can jump to next/previous heading in many screenreaders.
    4. +
  4. You can also bring up a list of all headings in many screenreaders, allowing you to use them like a handy table of contents to find specific content.
    5. +
+ +

People sometimes write headings, paragraphs, etc. using presentational HTML and line breaks, something like the following:

+ +
<font size="7">My heading</font>
+<br><br>
+This is the first section of my document.
+<br><br>
+I'll add another paragraph here too.
+<br><br>
+1. Here is
+<br><br>
+2. a list for
+<br><br>
+3. you to read
+<br><br>
+<font size="5">My subheading</font>
+<br><br>
+This is the first subsection of my document. I'd love people to be able to find this content!
+<br><br>
+<font size="5">My 2nd subheading</font>
+<br><br>
+This is the second subsection of my content. I think is more interesting than the last one.
+ +

If you try our longer version out with a screenreader (see bad-semantics.html), you'll not have a very good experience — the screenreader hasn't got anything to use as signposts, so you can't retrieve a useful table of contents, and the whole page is seen as a single giant block, so it is just read out in one go, all at once.

+ +

There are other issues too beyond accessibility — it is harder to style the content using CSS, or manipulate it with JavaScript for example, because there are no elements to use as selectors.

+ +

Using clear language

+ +

The language you use can also affect accessibility. In general you should use clear language that is not overly complex, and doesn't use unnecessary jargon or slang terms. This not only benefits people with cognitive or other disabilities; it benefits readers for whom the text is not written in their first language, younger people ... everyone in fact! Apart from this, you should try to avoid using language and characters that don't get read out clearly by the screenreader. For example:

+ + + +

Page layouts

+ +

In the bad old days, people used to create page layouts using HTML tables — using different table cells to contain the header, footer, side bar, main content column, etc. This is not a good idea because a screenreader will likely give out confusing readouts, especially if the layout is complex and has many nested tables.

+ +

Try our example table-layout.html example, which looks something like this:

+ +
<table width="1200">
+      <!-- main heading row -->
+      <tr id="heading">
+        <td colspan="6">
+
+          <h1 align="center">Header</h1>
+
+        </td>
+      </tr>
+      <!-- nav menu row  -->
+      <tr id="nav" bgcolor="#ffffff">
+        <td width="200">
+          <a href="#" align="center">Home</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Our team</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Projects</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Contact</a>
+        </td>
+        <td width="300">
+          <form width="300">
+            <input type="search" name="q" placeholder="Search query" width="300">
+          </form>
+        </td>
+        <td width="100">
+          <button width="100">Go!</button>
+        </td>
+      </tr>
+      <!-- spacer row -->
+      <tr id="spacer" height="10">
+        <td>
+
+        </td>
+      </tr>
+      <!-- main content and aside row -->
+      <tr id="main">
+        <td id="content" colspan="4" bgcolor="#ffffff">
+
+          <!-- main content goes here -->
+        </td>
+        <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top">
+          <h2>Related</h2>
+
+          <!-- aside content goes here -->
+
+        </td>
+      </tr>
+      <!-- spacer row -->
+      <tr id="spacer" height="10">
+        <td>
+
+        </td>
+      </tr>
+      <!-- footer row -->
+      <tr id="footer" bgcolor="#ffffff">
+        <td colspan="6">
+          <p>©Copyright 2050 by nobody. All rights reversed.</p>
+        </td>
+      </tr>
+    </table>
+ +

If you try to navigate this using a screenreader, it will probably tell you that there's a table to be looked at (although some screenreaders can guess the difference between table layouts and data tables). You'll then likely (depending on which screenreader you're using) have to go down into the table as an object and look at its features separately, then get out of the table again to carry on navigating the content.

+ +

Table layouts are a relic of the past — they made sense back when CSS support was not widespread in browsers, but they create confusion for screenreader users, as well as being bad for many other reasons (abuse of tables, arguably requires more markup, make designs more inflexible). Don't do it!

+ +

You can verify these claims by comparing your previous experience with a more modern website structure example, which could look something like this:

+ +
<header>
+  <h1>Header</h1>
+</header>
+
+<nav>
+  <!-- main navigation in here -->
+</nav>
+
+<!-- Here is our page's main content -->
+<main>
+
+  <!-- It contains an article -->
+  <article>
+    <h2>Article heading</h2>
+
+    <!-- article content in here -->
+  </article>
+
+  <aside>
+    <h2>Related</h2>
+
+    <!-- aside content in here -->
+  </aside>
+
+</main>
+
+<!-- And here is our main footer that is used across all the pages of our website -->
+
+<footer>
+  <!-- footer content in here -->
+</footer>
+ +

If you try our more modern structure example with a screenreader, you'll see that the layout markup no longer gets in the way and confuses the content readout. It is also much leaner and smaller in terms of code size, which means easier to maintain code, and less bandwidth for the user to download (particularly prevalent for those on slow connections).

+ +

Another consideration when creating layouts is using HTML5 semantic elements as seen in the above example (see content sectioning) — you can create a layout using only nested {{htmlelement("div")}} elements, but it is better to use appropriate sectioning elements to wrap your main navigation ({{htmlelement("nav")}}), footer ({{htmlelement("footer")}}), repeating content units ({{htmlelement("article")}}), etc. These provide extra semantics for screenreaders (and other tools) to give user extra clues about the content they are navigating (see Screen Reader Support for new HTML5 Section Elements for an idea of what screen reader support is like).

+ +
+

Note: As well as your content having good semantics and an attractive layout, it should make logical sense in its source order — you can always place it where you want using CSS later on, but you should get the source order right to start with, so what screenreader users get read out to them will make sense.

+
+ +

UI controls

+ +

By UI controls, we mean the main parts of web documents that users interact with — most commonly buttons, links, and form controls. In this section we'll look at the basic accessibility concerns to be aware of when creating such controls. Later articles on WAI-ARIA and multimedia will look at other aspects of UI accessibility.

+ +

One key aspect to the accessibility of UI controls is that by default, browsers allow them to be manipulated by the keyboard. You can try this out using our native-keyboard-accessibility.html example (see the source code) — open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements; the focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused.

+ +

+ +

You can then press Enter/Return to follow a focused link or press a button (we've included some JavaScript to make the buttons alert a message), or start typing to enter text in a text input (other form elements have different controls, for example the {{htmlelement("select")}} element can have its options displayed and cycled between using the up and down arrow keys).

+ +
+

Note: Different browsers may have different keyboard control options available. See Using native keyboard accessibility for more details.

+
+ +

You essentially get this behavior for free, just by using the appropriate elements, e.g.

+ +
<h1>Links</h1>
+
+<p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p>
+
+<p>Another link, to the <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
+
+<h2>Buttons</h2>
+
+<p>
+  <button data-message="This is from the first button">Click me!</button>
+  <button data-message="This is from the second button">Click me too!</button>
+  <button data-message="This is from the third button">And me!</button>
+</p>
+
+<h2>Form</h2>
+
+<form>
+  <div>
+    <label for="name">Fill in your name:</label>
+    <input type="text" id="name" name="name">
+  </div>
+  <div>
+    <label for="age">Enter your age:</label>
+    <input type="text" id="age" name="age">
+  </div>
+  <div>
+    <label for="mood">Choose your mood:</label>
+    <select id="mood" name="mood">
+      <option>Happy</option>
+      <option>Sad</option>
+      <option>Angry</option>
+      <option>Worried</option>
+    </select>
+  </div>
+</form>
+ +

This means using links, buttons, form elements, and labels appropriately (including the {{htmlelement("label")}} element for form controls).

+ +

However, it is again the case that people sometimes do strange things with HTML. For example, you sometimes see buttons marked up using {{htmlelement("div")}}s, for example:

+ +
<div data-message="This is from the first button">Click me!</div>
+<div data-message="This is from the second button">Click me too!</div>
+<div data-message="This is from the third button">And me!</div>
+ +

But using such code is not advised — you immediately lose the native keyboard accessibility you would have had if you'd just used {{htmlelement("button")}} elements, plus you don't get any of the default CSS styling that buttons get.

+ +

Building keyboard accessibility back in

+ +

Adding such advantages back in takes a bit of work (you can an example code in our fake-div-buttons.html example — also see the source code). Here we've given our fake <div> buttons the ability to be focused (including via tab) by giving each one the attribute tabindex="0":

+ +
<div data-message="This is from the first button" tabindex="0">Click me!</div>
+<div data-message="This is from the second button" tabindex="0">Click me too!</div>
+<div data-message="This is from the third button" tabindex="0">And me!</div>
+ +

Basically, the {{htmlattrxref("tabindex")}} attribute is primarily intended to allow tabbable elements to have a custom tab order (specified in positive numerical order), instead of just being tabbed through in their default source order. This is nearly always a bad idea, as it can cause major confusion. Use it only if you really need to, for example if the layout shows things in a very different visual order to the source code, and you want to make things work more logically. There are two other options for tabindex:

+ + + +

Whilst the above addition allows us to tab to the buttons, it does not allow us to activate them via the Enter/Return key. To do that, we had to add the following bit of JavaScript trickery:

+ +
document.onkeydown = function(e) {
+  if(e.keyCode === 13) { // The Enter/Return key
+    document.activeElement.click();
+  }
+};
+ +

Here we add a listener to the document object to detect when a button has been pressed on the keyboard. We check what button was pressed via the event object's keyCode property; if it is the keycode that matches Return/Enter, we run the function stored in the button's onclick handler using document.activeElement.click(). activeElement gives us the element that is currently focused on the page.

+ +

This is a lot of extra hassle to build the functionality back in. And there's bound to be other problems with it. Better to just use the right element for the right job in the first place.

+ +

Meaningful text labels

+ +

UI control text labels are very useful to all users, but getting them right is particularly important to users with disabilities.

+ +

You should make sure that your button and link text labels are understandable and distinctive. Don't just use "Click here" for your labels, as screenreader users sometimes get up a list of buttons and form controls. The following screenshot shows our controls being listed by VoiceOver on Mac.

+ +

+ +

Make sure your labels make sense out of context, read on their own, as well as in the context of the paragraph they are in. For example, the following shows an example of good link text:

+ +
<p>Whales are really awesome creatures. <a href="whales.html">Find out more about whales</a>.</p>
+ +

but this is bad link text:

+ +
<p>Whales are really awesome creatures. To find more out about whales, <a href="whales.html">click here</a>.</p>
+ +
+

Note: You can find a lot more about link implementation and best practices in our Creating hyperlinks article. You can also see some good and bad examples at good-links.html and bad-links.html.

+
+ +

Form labels are also important, for giving you a clue what you need to enter into each form input. The following seems like a reasonable enough example:

+ +
Fill in your name: <input type="text" id="name" name="name">
+ +

However, this is not so useful for disabled users. There is nothing in the above example to associate the label unambiguously with the form input, and make it clear how to fill it in if you cannot see it. If you access this with some screenreaders, you may only be given a description along the lines of "edit text".

+ +

The following is a much better example:

+ +
<div>
+  <label for="name">Fill in your name:</label>
+  <input type="text" id="name" name="name">
+</div>
+ +

With the code like this, the label will be clearly associated with the input; the description will be more like "Fill in your name: edit text".

+ +

+ +

As an added bonus, in most browsers associating a label with a form input means that you can click the label to select/activate the form element. This gives the input a bigger hit area, making it easier to select.

+ +
+

Note: you can see some good and bad form examples in good-form.html and bad-form.html.

+
+ +

Accessible data tables

+ +

A basic data table can be written with very simple markup, for example:

+ +
<table>
+  <tr>
+    <td>Name</td>
+    <td>Age</td>
+    <td>Gender</td>
+  </tr>
+  <tr>
+    <td>Gabriel</td>
+    <td>13</td>
+    <td>Male</td>
+  </tr>
+  <tr>
+    <td>Elva</td>
+    <td>8</td>
+    <td>Female</td>
+  </tr>
+  <tr>
+    <td>Freida</td>
+    <td>5</td>
+    <td>Female</td>
+  </tr>
+</table>
+ +

But this has problems — there is no way for a screenreader user to associate rows or columns together as groupings of data. To do this you need to know what the header rows are, and if they are heading up rows, columns, etc. This can only be done visually for the above table (see bad-table.html and try the example out yourself).

+ +

Now have a look at our punk bands table example — you can see a few accessibility aids at work here:

+ + + +
+

Note: See our HTML table advanced features and accessibility article for some more details around accessible data tables.

+
+ +

Text alternatives

+ +

Whereas textual content is inherently accessible, the same cannot necessarily be said for multimedia content — image/video content cannot be seen by visually-impaired people, and audio content cannot be heard by hearing-impaired people. We'll cover video and audio content in detail in the Accessible multimedia article later on, but for this article we'll look accessibility for the humble {{htmlelement("img")}} element.

+ +

We have a simple example written up, accessible-image.html, which features four copies of the same image:

+ +
<img src="dinosaur.png">
+
+<img src="dinosaur.png"
+     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
+
+<img src="dinosaur.png"
+     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."
+     title="The Mozilla red dinosaur">
+
+
+<img src="dinosaur.png" aria-labelledby="dino-label">
+
+<p id="dino-label">The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p>
+
+ +

The first image, when viewed by a screen reader, doesn't really offer the user much help — VoiceOver for example reads out "/dinosaur.png, image". It reads out the filename to try to provide some help. In this example the user will at least know it is a dinosaur of some kind, but often files may be uploaded with machine generated file names (e.g. from a digital camera) and these file names would likely provide no context to the image's content.

+ +
+

Note: This is why you should never include text content inside an image — screen readers simply can't access it. There are other disadvantages too — you can't select it and copy/paste it. Just don't do it!

+
+ +

When a screen reader encounters the second image, it reads out the full alt attribute — "A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.".

+ +

This highlights the importance of not only using meaningful file names in case so-called alt text is not available, but also making sure that alt text is provided in alt attributes wherever possible. Note that the contents of the alt attribute should always provide a direct representation of the image and what it conveys visually. Any personal knowledge or extra description shouldn't be included here, as it is not useful for people who have not come across the image before.

+ +

One thing to consider is whether your images have meaning inside your content, or whether they are purely for visual decoration, so have no meaning. If they are decorational, it is better to just include them in the page as CSS background images.

+ +
+

Note: Read Images in HTML and Responsive images for a lot more information about image implementation and best practices.

+
+ +

If you do want to provide extra contextual information, you should put it in the text surrounding the image, or inside a title attribute, as shown above. In this case, most screenreaders will read out the alt text, the title attribute, and the filename. In addition, browsers display title text as tooltips when moused over.

+ +

+ +

Let's have another quick look at the fourth method:

+ +
<img src="dinosaur.png" aria-labelledby="dino-label">
+
+<p id="dino-label">The Mozilla red Tyrannosaurus ... </p>
+ +

In this case, we are not using the alt attribute at all — instead, we have presented our description of the image as a regular text paragraph, given it an id, and then used the aria-labelledby attribute to refer to that id, which causes screenreaders to use that paragraph as the alt text/label for that image. This is especially useful if you want to use the same text as a label for multiple images — something that isn't possible with alt.

+ +
+

Note: aria-labelledby is part of the WAI-ARIA spec, which allows developers to add in extra semantics to their markup to improve screenreader accessibility where needed. To find out more about how it works, read our WAI-ARIA Basics article.

+
+ +

Other text alternative mechanisms

+ +

Images also have another mechanisms available for providing descriptive text. For example, there is a longdesc attribute that is meant to point to a separate web document containing an extended description of the image, for example:

+ +
<img src="dinosaur.png" longdesc="dino-info.html">
+ +

This sounds like a good idea, especially for infographics like big charts with lots of information on that could perhaps be represented as an accessible data table instead (see previous section). However, longdesc is not supported consistently by screenreaders, and the content is completely inaccessible to non-screenreader users. It is arguably much better to include the long description on the same page as the image, or link to it with a regular link.

+ +

HTML5 includes two new elements — {{htmlelement("figure")}} and {{htmlelement("figcaption")}} — which are supposed to associate a figure of some kind (it could be anything, not necessarily an image) with a figure caption:

+ +
<figure>
+  <img src="dinosaur.png" alt="The Mozilla Tyrannosaurus">
+  <figcaption>A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</figcaption>
+</figure>
+ +

Unfortunately, most screenreaders don't seem to associate figure captions with their figures yet, but the element structure is useful for CSS styling, plus it provides a way to place a description of the image next to it in the source.

+ +

Empty alt attributes

+ +
<h3>
+  <img src="article-icon.png" alt="">
+  Tyrannosaurus Rex: the king of the dinosaurs
+</h3>
+ +

There may be times where an image is included in a page's design, but its primary purpose is for visual decoration. You'll notice in the code example above that the image's alt attribute is empty — this is to make screen readers recognize the image, but not attempt to describe the image (instead they'd just say "image", or similar).

+ +

The reason to use an empty alt instead of not including it is because many screen readers announce the whole image URL if no alt is provided.  In the above example, the image is acting as a visual decoration to the heading its associated with. In cases like this, and in cases where an image is only decoration and has no content value, you should put an empty alt on your images. Another alternative is to use the aria role attribute role="presentation" — this also stops screens readers from reading out alternative text.

+ +
+

Note: if possible you should use CSS to display images that are only decoration.

+
+ +

Summary

+ +

You should now be well-versed in writing accessible HTML for most occasions. Our WAI-ARIA basics article will also fill in some gaps in this knowledge, but this article has taken care of the basics. Next up we'll explore CSS and JavaScript, and how accessibility is affected by their good or bad use.

+ +

{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}

+ +

 

+ +

In this module

+ + + +

 

diff --git a/files/ko/learn/accessibility/index.html b/files/ko/learn/accessibility/index.html new file mode 100644 index 0000000000..01c9c2e2bb --- /dev/null +++ b/files/ko/learn/accessibility/index.html @@ -0,0 +1,59 @@ +--- +title: 접근성 +slug: Learn/접근성 +tags: + - ARIA + - CSS + - HTML + - JavaScript + - 랜딩 + - 모듈 + - 문서 + - 배우기 + - 비기너 + - 접근성 +translation_of: Learn/Accessibility +--- +
{{LearnSidebar}}
+ +

웹 개발자가 되기위해서 HTML, CSS 및 JavaScript를 배우는 것이 필요하지만 배운 지식을 효과적으로 사용하기위해서는 지식이상의 기술이 필요로 합니다. 이 기술을 사용해서 웹사이트에 접근하려는 모든 사용자를 차별없이 접근할수 있도록 해야합니다.  이를 위하여 모범 사례(HTML, CSS 및 JavaScript 항목에서 설명) 를 준수하고 브라우저 호환성 테스트를 거치며 처음부터 접근성을 고려해야합니다. 이 문서에서는 후자에 대해 자세히 다룰 것입니다.

+ +

선결조건

+ +

이 문서를 최대한 활용하려면 최소한 HTML, CSS 및 JavaScript 항목 중 처음 두 문서를 통해 작업하거나 또는 접근성 문서와 관련된 기술을 통해 개선해 나가는것이 좋습니다. 

+ +
+

Note: 참고 : 당신은 당신이 당신의 자신의 파일을 생성 할 수있는 기능이없는 컴퓨터 / 태블릿 / 다른 장치에서 작업하는 경우, 당신은  JSBin 또는 Thimble 같은 온라인 코딩 프로그램에서 코드 예제의 대부분을 테스트 할수 있습니다.

+
+ +

가이드

+ +
+
접근성이란?
+
이 문서에서는 접근성이 실제로 무엇인지 자세히 살펴보는 것으로 모듈을 시작합니다. 여기에는 고려해야 할 사람의 그룹, 웹과 상호 작용하는 데 사용하는 서로 다른 도구 및 접근성 워크 플로우를 개발하는 방법이 포함됩니다.
+
HTML: 접근성을 위한 좋은기초
+
항상 올바른 HTML요소를 올바른 용도로 사용하는 것만으로 수많은 웹 콘텐츠에 접근 할 수 있습니다. 이 문서는 접근성을 극대화하기 위해 HTML을 사용하는 방법을 자세히 살펴봅니다.
+
CSS 와 JavaScript의 접근성 모범 사례
+
또한, CSS 와 JavaScript를 적절히 사용하면 접근성 높은 웹 경험을 줄수도 있지만 , 만약 잘못 사용될 경우 접근성을 크게 해칠 수 있다. 이 문서에서는 복잡한 컨텐츠도 가능한 액세스 할 수 있도록 하기 위해 고려해야 할 몇가지 CSS 및 JavaScript모범 사례를 간략히 설명합니다.
+
WAI-ARIA 기초
+
이전 문서에 이어, 시맨틱하지 못한 HTML과 동적 자바 스크립트로 업데이트되는  컨텐츠를 포함하는 복잡한 UI를 제어 하는 것은 어려울 수 있습니다. WAI-ARIA는 브라우저와 보조 기술이 사용자에게 상황을 알려 주는 데 사용할 수 있는 시맨틱한 요소를 추가하여 이러한 문제를 해결하는 기술이다. 여기서는 접근성을 향상시키기 위해 기본적인 수준에서 이 기능을 사용하는 방법을 보여 줍니다.
+
멀티미디어 접근성
+
접근성 문제를 야기할 수 있는 또 다른 범주의 콘텐츠 즉 멀티 미디어 . 비디오, 오디오 및 이미지 콘텐츠에 적절한 대체텍스트를 제공해서 보조 기술과 사용자가 이해할 수 있도록 해야 한다. 이 글은 그 방법을 보여 준다.
+
모바일 접근성
+
모바일 기기를 이용한 웹 접근이 매우 널리 사용되고 있고 iOS및 Android와 같은 유명한 플랫폼에서 액세스가 가능한 툴을 사용하는 경우, 이러한 플랫폼에서 웹 콘텐츠를 접근 할 수 있는지를 고려해야 합니다. 이 자료에서는 모바일 접근성 고려 사항에 대해 살펴봅니다.
+
+ +

평가

+ +
+
접근성 문제 해결 
+
평가에서는 진단 및 해결해야 하는 다양한 접근성 문제가 포함된 간단한 사이트를 제공합니다.
+
+ +

참고 항목

+ + diff --git a/files/ko/learn/accessibility/mobile/index.html b/files/ko/learn/accessibility/mobile/index.html new file mode 100644 index 0000000000..a64c0eaa88 --- /dev/null +++ b/files/ko/learn/accessibility/mobile/index.html @@ -0,0 +1,315 @@ +--- +title: 모바일 접근성 +slug: Learn/접근성/모바일 +translation_of: Learn/Accessibility/Mobile +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
+ +

모바일 기기에서 웹 접근이 매우 자주 발생하고 iOS와 안드로이드와 같은 유명 플랫폼들은 전문적인 접근성 점검도구들이 있기 때문에 웹콘텐츠의 접근성을 고려하는 것이 더욱 중요하다. 여기서는 모바일환경을 중심으로 접근성 고려사항을 살펴본다.

+ + + + + + + + + + + + +
사전지식: +

기본적인 컴퓨터 사용능력, HTML, CSS, JavaScript에 대한 기본적인 이해, 그리고 이전 내용들에 대한 이해.

+
목표: +

모바일 기기의 접근성에 어떤 문제가 있는지, 그리고 이를 극복하는 방법을 이해한다.

+
+ +

모바일 장치에서의 접근성

+ +

접근성 상태(일반적으로 웹 표준에 대한 지원)는 최근의 모바일 장치에서 좋다. 모바일 기기가 데스크톱 브라우저에 전혀 다른 웹 기술을 실행하면서 개발자들이 브라우저 코웃음을 치며 완전히 별개의 사이트에 서비스를 제공하도록 강요하던 시대는 이미 오래 전에 지났다(아직도 상당수의 회사가 모바일 장치의 사용을 감지하여 별도의 모바일 도메인을 서비스하고 있다).

+ + + +

The state of accessibility — and support for web standards in general — is good in modern mobile devices. Long gone are the days when mobile devices ran completely different web technologies to desktop browsers, forcing developers to use browser sniffing and serve them completely separate sites (although quite a few companies still detect usage of mobile devices and serve them a separate mobile domain).

+ +

These days, mobile devices can usually handle fully-featured websites, and the main platforms even have screenreaders built in to enable visually impaired users to use them successfully. Modern mobile browsers tend to have good support for WAI-ARIA, too.

+ +

To make a website accessible and usable on mobile, you just need to follow general good web design and accessibility best practices.

+ +

There are some exceptions that need special consideration for mobile; the main ones are:

+ + + +

Summary of screenreader testing on Android and iOS

+ +

The most common mobile platforms have fully functional screen readers. These function in much the same way as desktop screenreaders, except they are largely operated using touch gestures rather than key combinations.

+ +

Let's look at the main two: TalkBack on Android and VoiceOver on iOS.

+ +

Android TalkBack

+ +

The TalkBack screen reader is built into the Android operating system.

+ +

To turn it on, look up what phone model and Android version you have, and then look up where the TalkBack menu is. It tends to differ widely between Android versions and even between different phone models. Some phone manufacturers (e.g. Samsung) don't even have TalkBack in newer phones, and instead opted for their own screen reader.

+ +

When you've found the TalkBack menu, press the slider switch to turn TalkBack on. Follow any additional on-screen prompts that you are presented with.

+ +

When TalkBack is turned on, your Android device's basic controls will be a bit different. For example:

+ +
    +
  1. Single-tapping an app will select it, and the device will read out what the app is.
    2. +
  2. Swiping left and right will move between apps, or buttons/controls if you are in a control bar. The device will read out each option.
    3. +
  3. Double-tapping anywhere will open the app/select the option.
    4. +
  4. You can also "explore by touch" — hold your finger down on the screen and drag it around, and your device will read out the different apps/items you move across.
    5. +
+ +

If you want to turn TalkBack off:

+ +
    +
  1. Navigate back to the TalkBack menu screen (using the different gestures that are currently enabled.)
    2. +
  2. Navigate to the slider switch and activate it to turn it off.
    3. +
+ +
+

Note: You can get to your home screen at any time by swiping up and left in a smooth motion. If you have more than one home screen, you can move between them by swiping two fingers left and right.

+
+ +

For a more complete list of TalkBack gestures, see Use TalkBack gestures.

+ +

Unlocking the phone

+ +

When TalkBack is turned on, unlocking the phone is a bit different.

+ +

You can do a two-finger swipe up from the bottom of the lock screen. If you've set a passcode or pattern for unlocking your device, you will then be taken to the relevant entry screen to enter it.

+ +

You can also explore by touch to find the Unlock button at the bottom middle of the screen, and then double-tap.

+ +

Global and local menus

+ +

TalkBack allows you to access global and local context menus, wherever you have navigated to on the device. The former provides global options relating to the device as a whole, and the latter provides options relating just to the current app/screen you are in.

+ +

To get to these menus:

+ +
    +
  1. Access the global menu by quickly swiping down, and then right.
    2. +
  2. Access the local menu by quickly swiping up, and then right.
    3. +
  3. Swipe left and right to cycle between the different options.
    4. +
  4. Once you've selected the option you want, double-click to choose that option.
    5. +
+ +

For details on all the options available under the global and local context menus, see Use global and local context menus.

+ +

Browsing web pages

+ +

You can use the local context menu while in a web browser to find options to navigate web pages using just the headings, form controls, or links, or navigate line by line, etc.

+ +

For example, with TalkBack turned on:

+ +
    +
  1. Open your web browser.
    2. +
  2. Activate the URL bar.
    3. +
  3. Enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. To enter the text of the URL: +
      +
    • Select the URL bar by swiping left/right till you get to it, and then double-tapping.
      • +
    • Hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to type it. Repeat for each character.
      • +
    • Once you've finished, find the Enter key and press it.
      • +
    +
    4. +
  4. Swipe left and right to move between different items on the page.
    5. +
  5. Swipe up and right with a smooth motion to enter the local content menu.
    6. +
  6. Swipe right until you find the "Headings and Landmarks" option.
    7. +
  7. Double-tap to select it. Now you'll be able to swipe left and right to move between headings and ARIA landmarks.
    8. +
  8. To go back to the default mode, enter the local context menu again by swiping up and right, select "Default", and then double-tap to activate.
    9. +
+ +

Note: See Get started on Android with TalkBack for more complete documentation.

+ +

iOS VoiceOver

+ +

A mobile version of VoiceOver is built into the iOS operating system.

+ +

To turn it on, go to Your Settings app and select Accessibility > VoiceOver. Press the VoiceOver slider to enable it (you'll also see a number of other options related to VoiceOver on this page).

+ +
+

Note: Some older iOS devices have the VoiceOver menu at Settings app > General > Accessibility > VoiceOver.

+
+ +

Once VoiceOver is enabled, iOS's basic control gestures will be a bit different:

+ +
    +
  1. A single tap will cause the item you tap on to be selected; your device will speak the item you've tapped on.
    2. +
  2. You can also navigate the items on the screen by swiping left and right to move between them, or by sliding your finger around on the screen to move between different items (when you find the item you want, you can remove your finger to select it).
    3. +
  3. To activate the selected item (e.g., open a selected app), double-tap anywhere on the screen.
    4. +
  4. Swipe with three fingers to scroll through a page.
    5. +
  5. Tap with two fingers to perform a context-relevant action — for example, taking a photo while in the camera app.
    6. +
+ +

To turn it off again, navigate back to Settings > General > Accessibility > VoiceOver using the above gestures, and toggle the VoiceOver slider back to off.

+ +

Unlock phone

+ +

To unlock the phone, you need to press the home button (or swipe) as normal. If you have a passcode set, you can select each number by swiping/sliding (as explained above) and then double-tapping to enter each number when you've found the right one.

+ +

Using the Rotor

+ +

When VoiceOver is turned on, you have a navigation feature called the Rotor available to you, which allows you to quickly choose from a number of common useful options. To use it:

+ +
    +
  1. Twist two fingers around on the screen like you are turning a dial. Each option will be read aloud as you twist further around. You can go back and forth to cycle through the options.
    2. +
  2. Once you've found the option you want: +
      +
    • Release your fingers to select it.
      • +
    • If it is an option you can iterate the value of (such as Volume or Speaking Rate), you can do a swipe up or down to increase or decrease the value of the selected item.
      • +
    +
    3. +
+ +

The options available under the Rotor are context-sensitive — they will differ depending on what app or view you are in (see below for an example).

+ +

Browsing web pages

+ +

Let's have a go at web browsing with VoiceOver:

+ +
    +
  1. Open your web browser.
    2. +
  2. Activate the URL bar.
    3. +
  3. Enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. To enter the text of the URL: +
      +
    • Select the URL bar by swiping left/right until you get to it, and then double-tapping.
      • +
    • For each character, hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to select it. Double-tap to type it.
      • +
    • Once you've finished, find the Enter key and press it.
      • +
    +
    4. +
  4. Swipe left and right to move between items on the page. You can double-tap an item to select it (e.g., follow a link).
    5. +
  5. By default, the selected Rotor option will be Speaking Rate; you can currently swipe up and down to increase or decrease the speaking rate.
    6. +
  6. Now turn two fingers around the screen like a dial to show the rotor and move between its options. Here are a few examples of the options available: +
      +
    • Speaking Rate: Change the speaking rate.
      • +
    • Containers: Move between different semantic containers on the page.
      • +
    • Headings: Move between headings on the page.
      • +
    • Links: Move between links on the page.
      • +
    • Form Controls: Move between form controls on the page.
      • +
    • Language: Move between different translations, if they are available.
      • +
    +
    7. +
  7. Select Headings. Now you'll be able to swipe up and down to move between headings on the page.
    8. +
+ +

Note: For a more complete reference covering the VoiceOver gestures available and other hints on accessibility testing on iOS, see Test Accessibility on Your Device with VoiceOver.

+ +

Control mechanisms

+ +

In our CSS and JavaScript accessibility article, we looked at the idea of events that are specific to a certain type of control mechanism (see Mouse-specific events). To recap, these cause accessibility issues because other control mechanisms can't activate the associated functionality.

+ +

As an example, the click event is good in terms of accessibility — an associated event handler can be invoked by clicking the element the handler is set on, tabbing to it and pressing Enter/Return, or tapping it on a touchscreen device. Try our simple-button-example.html example (see it running live) to see what we mean.

+ +

Alternatively, mouse-specific events such as mousedown and mouseup create problems — their event handlers cannot be invoked using non-mouse controls.

+ +

If you try to control our simple-box-drag.html (see example live) example with a keyboard or touch, you'll see the problem. This occurs because we are using code such as the following:

+ +
div.onmousedown = function() {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  movePanel();
+}
+
+document.onmouseup = stopMove;
+ +

To enable other forms of control, you need to use different, yet equivalent events — for example, touch events work on touchscreen devices:

+ +
div.ontouchstart = function(e) {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  positionHandler(e);
+  movePanel();
+}
+
+panel.ontouchend = stopMove;
+ +

We've provided a simple example that shows how to use the mouse and touch events together — see multi-control-box-drag.html (see the example live also).

+ +
+

Note: You can also see fully functional examples showing how to implement different control mechanisms at Implementing game control mechanisms.

+
+ +

Responsive design

+ +

Responsive design is the practice of making your layouts and other features of your apps dynamically change depending on factors such as screen size and resolution, so they are usable and accessible to users of different device types.

+ +

In particular, the most common problems that need to be addressed for mobile are:

+ + + +

Note: We won't provide a full discussion of responsive design techniques here, as they are covered in other places around MDN (see above links).

+ +

Specific mobile considerations

+ +

There are other important issues to consider when making sites more accessible on mobile. We have listed a couple here, but we will add more when we think of them.

+ +

Not disabling zoom

+ +

Using viewport, it is possible to disable zoom. Always ensure resizing is enabled, and set the width to the device's width in the {{htmlelement("head")}}:

+ +
<meta name="viewport" content="width=device-width; user-scalable=yes">
+ +

You should never set user-scalable=no if at all possible — many people rely on zoom to be able to see the content of your website, so taking this functionality away is a really bad idea. There are certain situations where zooming might break the UI; in such cases, if you feel that you absolutely need to disable zoom, you should provide some other kind of equivalent, such as a control for increasing the text size in a way that doesn't break your UI.

+ +

Keeping menus accessible

+ +

Because the screen is so much narrower on mobile devices, it is very common to use media queries and other technologies to make the navigation menu shrink down to a tiny icon at the top of the display — which can be pressed to reveal the menu only if it's needed — when the site is viewed on mobile. This is commonly represented by a "three horizontal lines" icon, and the design pattern is consequently known as a "hamburger menu".

+ +

When implementing such a menu, you need to make sure that the control to reveal it is accessible by appropriate control mechanisms (normally touch for mobile), as discussed in {{anch("Control mechanisms")}} above, and that the rest of the page is moved out of the way or hidden in some way while the menu is being accessed, to avoid confusion with navigating it.

+ +

Click here for a good hamburger menu example.

+ +

User input

+ +

On mobile devices, inputting data tends to be more annoying for users than the equivalent experience on desktop computers. It is more convenient to type text into form inputs using a desktop or laptop keyboard than a touchscreen virtual keyboard or a tiny mobile physical keyboard.

+ +

For this reason, it is worth trying to minimize the amount of typing needed. As an example, instead of getting users to fill out their job title each time using a regular text input, you could instead offer a {{htmlelement("select")}} menu containing the most common options (which also helps with consistency in data entry), and offer an "Other" option that displays a text field to type any outliers into. You can see a simple example of this idea in action in common-job-types.html (see the common jobs example live).

+ +

It is also worth considering the use of HTML5 form input types such as the date on mobile platforms as they handle them well — both Android and iOS, for example, display usable widgets that fit well with the device experience. See html5-form-examples.html for some examples (see the HTML5 form examples live) — try loading these and manipulating them on mobile devices. For example:

+ + + +

If you want to provide a different solution for desktops, you could always serve different markup to your mobile devices using feature detection. See input types for raw information on detecting different input types, and also check out our feature detection article for much more information.

+ +

Summary

+ +

In this article, we have provided you with some details about common mobile accessibility-specific issues and how to overcome them. We also took you through the usage of the most common screenreaders to aid you in accessibility testing.

+ +

See also

+ + + +
{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
+ +
+

In this module

+ + +
diff --git a/files/ko/learn/accessibility/what_is_accessibility/index.html b/files/ko/learn/accessibility/what_is_accessibility/index.html new file mode 100644 index 0000000000..67f4b6d302 --- /dev/null +++ b/files/ko/learn/accessibility/what_is_accessibility/index.html @@ -0,0 +1,205 @@ +--- +title: What is accessibility? +slug: Learn/접근성/What_is_accessibility +translation_of: Learn/Accessibility/What_is_accessibility +--- +

{{LearnSidebar}}

+ +

{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}

+ +

이 글에서는 접근성이 실제로 무엇인지 자세히 살펴보기로 합니다. 이 글에는 웹에서 고려해야 할 사람의 그룹, 웹과 상호 작용하는 데 사용하는 서로 다른 도구 및 접근성 개발 워크 플로우를 포함됩니다.

+ + + + + + + + + + + + +
선행지식:기본적인 컴퓨터 사용 능력, HTML과 CSS에 대한 기본적인 이해.
목표:접근성과 친해지기. 웹 개발자로서 접근성에어떻게 영향을 미치는지 알아보기
+ +

그렇다면 접근성이란 무엇일까요?

+ +

접근성은 가능한 한 많은 사람이 웹 사이트를 사용할 수 있도록 하는 방법으로, 통상적으로 장애인만을 대상으로 한다고 생각하지만 실제로는 모바일 장치를 사용하는 사람이나 느린 네트워크 연결을 사용하는 사람들도 포함하고 있습니다.

+ +

접근성을 모든 사람을 동일하게 대하고, 그들의 능력이나 상황에 상관 없이 그들에게 같은 기회를 주는 것으로 생각할 수도 있습니다. 휠체어에 있기 때문에 누군가를 물리적 건물에서 제외시키는 것이 옳지 않은 것과 같은 방식으로(공공 건물에는 일반적으로 휠체어 경사로나 엘리베이터가 있기 때문에), 휴대 전화를 사용하지 않는 사람을 웹 사이트에서 제외시키는 것도 옳지 않다. 우리는 모두 다르지만, 모두 인간이기 때문에, 동일한 권리를 갖고 있다.

+ +

접근성은 당연히 지켜져야 할 일이지만 일부 국가에서는 법의 일부이기도 하며,  서비스 사용이나 제품 구매가 불가능했던 사람들을 불러모아 중요한 소비자들로 만들수도 있습니다.

+ +

접근성 및 이에 따른 모범 사례는 다음과 같은 모든 사람에게 도움이 될 수 있습니다.

+ + + +

어떤 종류의 장애를 본 적이 있습니까?

+ +

장애가 있는 사람들도 장애가 없는 사람들만큼이나 다양하고, 그만큰 그들의 장애유형도 다양합니다. 여기서 중요한 교훈은 자신이 컴퓨터와 웹을 어떻게 사용하는 지에 대해 생각하고 다른 사람들이 웹을 어떻게 사용하는 지에 대해 배우는 것이다.

+ +

장애의 주요 유형은 웹 콘텐츠에 액세스 하는 데 사용하는 전문 도구와 함께 아래에 설명되어 있습니다.(흔히 보조공학기기또는 보조기술 이라고 알려진).

+ +
+

Note: 세계 보건 기구(WHO)의 장애 및 보건 현황 보고서에 따르면 전 세계 인구의 약 15%에 해당하는 십억명 이상의 사람들이 장애를 갖고 있으며 1억 1천만명에서 1억 9천만명의 성인들이 심각한 장애를 갖고 있다.

+ +

 

+
+ +

시각장애인

+ +

여기에는 전맹, 저시력 장애인 색각장애인등이 포함되며 이런 많은 사람들이 화면확대경(물리적 확대경 또는 소프트웨어 줌 기능 - 대부분의 브라우저와 운영 체제에는 최근 확대 / 축소 기능이 있음)과 디지털 글자를 큰소리로 읽어주는 소프트웨어인 화면낭독기를 사용한다.

+ + + +

 

+ +

스크린 리더들과 친숙해 지는 것은 좋은 생각이다; 당신은 또한 스크린 리더를 설치하고 그것을 가지고 노는 것이 어떻게 작동하는 지에 대한 아이디어를 얻기 위해서 필요하다. 사용에 대한 자세한 내용은 크로스 브라우저 테스트 화면 판독기 가이드( cross browser testing screen readers guide)를 참조하십시오. 아래의 비디오는 또한 경험이 어떠한지에 대한 간단한 예를 제공한다.

+ +

{{EmbedYouTube("IK97XMibEws")}}

+ +

 

+ +

In terms of statistics, the World Health Organization estimates that "285 million people are estimated to be visually impaired worldwide: 39 million are blind and 246 have low vision." (see Visual impairment and blindness). That's a large and significant population of users to just miss out on because your site isn't coded properly — almost the same size as the population of the United States of America.

+ +

People with hearing impairments

+ +

Otherwise known as people with auditory impairments, or deaf people, this group of people have either low hearing levels or no hearing at all. Hearing-impaired people do use ATs (see Assistive Devices for People with Hearing, Voice, Speech, or Language Disorders), but there are not really special ATs specific for computer/web use.

+ +

There are, however, specific techniques to bear in mind for providing text alternatives to audio content that they can read, from simple text transcripts, to text tracks (i.e. captions) that can be displayed along with video. An article later on will discuss these.

+ +

Hearing-impaired people also represent a significant userbase — "360 million people worldwide have disabling hearing loss", says the World Health Organization's Deafness and hearing loss fact sheet.

+ +

People with mobility impairments

+ +

These people have disabilities concerning movement, which might involve purely physical issues (such as loss of limb or paralysis), or neurological/genetic disorders that lead to weakness or loss of control in limbs. Some people might have difficulty making the exact hand movements required to use a mouse, while others might be more severely affected, perhaps being significantly paralysed to the point where they need to use a head pointer to interact with computers.

+ +

This kind of disability can also be a result of old age, rather than any specific trauma or condition, and it could also result from hardware limitations — some users might not have a mouse.

+ +

The way this usually affects web development work is the requirement that controls be accessible by the keyboard — we'll discuss keyboard accessibility in later articles in the module, but it is a good idea to try out some websites using just the keyboard to see how you get on. Can you use the tab key to move between the different controls of a web form, for example? You can find more details about keyboard controls in our Cross browser testing Using native keyboard accessibility section.

+ +

In terms of statistics, a significant number of people have mobility impairments. The U.S. Centers for Disease Control and Prevention Disability and Functioning (Noninstitutionalized Adults 18 Years and Over) reports the USA "Percent of adults with any physical functioning difficulty: 15.1%".

+ +

People with cognitive impairments

+ +

Probably the widest range of disabilities can be seen in this last category — cognitive impairment can broadly refer to disabilities from mental illnesses to learning difficulties, difficulties in comprehension and concentration like ADHD (attention deficit hyperactivity disorder), to people on the autistic spectrum, to people with schizophrenia, and many other types of disorder besides. Such disabilities can affect many parts of everyday life, due to problems with memory, problem solving, comprehension, attention, etc.

+ +

The most common ways that such disabilities might affect website usage is difficulty in understanding how to complete a task, remembering how to do something that was previously accomplished, or increased frustration at confusing workflows or inconsistent layouts/navigation/other page features.

+ +

Unlike other web accessibility issues, it is impossible to prescribe quick fixes to many web accessibility issues arising from cognitive disabilities; the best chance you've got is to design your websites to be as logical, consistent, and usable as possible, so for example making sure that:

+ + + +

These are not "accessibility techniques" as such — they are good design practices. They will benefit everyone using your sites and should be a standard part of your work.

+ +

In terms of statistics, again the numbers are significant. Cornell University's 2014 Disability Status Report (PDF, 511KB) indicates that in 2014, 4.5% of people in the USA aged 21–64 had some form of cognitive disability.

+ +
+

Note: WebAIM's Cognitive page provides a useful expansion of these ideas, and is certainly worth reading.

+
+ +

Implementing accessibility into your project

+ +

A common accessibility myth is that accessibility is an expensive "added extra" to implement on a project. This myth actually can be true if either:

+ + + +

If however you consider accessibility from the start of a project, the cost of making most content accessible should be fairly minimal.

+ +

When planning your project, factor accessibility testing into your testing regime, just like testing for any other important target audience segment (e.g. target desktop or mobile browsers). Test early and often, ideally running automated tests to pick up on programmatically detectable missing features (such as missing image alternative text or bad link text — see Element relationships and context), and doing some testing with disabled user groups to see how well more complex site features work for them. For example:

+ + + +

You can and should keep a note of potential problem areas in your content that will need work to make it accessible, make sure it is tested thoroughly, and think about solutions/alternatives. Text content (as you'll see in the next article) is easy, but what about your multimedia content, and your whizzy 3D graphics? You should look at your project budget and realistically think about what solutions you have available to make such content accessible? You could pay to have all your multimedia content transcribed, which can be expensive, but can be done.

+ +

Also, be realistic. "100% accessibility" is an unobtainable ideal — you will always come across some kind of edge case that results in a certain user finding certain content difficult to use — but you should do as much as you can. If you are planning to include a whizzy 3D pie chart graphic made using WebGL, you might want to include a data table as an accessible alternative representation of the data. Or, you might want to just include the table and get rid of the 3D pie chart — the table is accessible by everyone, quicker to code, less CPU-intensive, and easier to maintain.

+ +

On the other hand, if you are working on a gallery website showing interesting 3D art, it would be unreasonable to expect every piece of art to be perfectly accessible to visually impaired people, given that it is an entirely visual medium.

+ +

To show that you care and have thought about accessibility, publish an accessibility statement on your site that details what your policy is toward accessibility, and what steps you have taken toward making the site accessible. If someone does complain that your site has an accessibility problem, start a dialog with them, be empathic, and take reasonable steps to try to fix the problem.

+ +
+

Note: Our Handling common accessibility problems article covers accessibility specifics that should be tested in more detail.

+
+ +

To summarize:

+ + + +

Accessibility guidelines and the law

+ +

There are numerous checklists and sets of guidelines available for basing accessibility tests on, which might seem overwhelming at first glance. Our advice is to familiarize yourself with the basic areas in which you need to take care, as well as understanding the high level structures of the guidelines that are most relevant to you.

+ + + +

So while the WCAG is a set of guidelines, your country will probably have laws governing web accessibility, or at least the accessibility of services available to the public (which could include websites, television, physical spaces, etc.) It is a good idea to find out what your laws are. If you make no effort to check that your content is accessible, you could possibly get in trouble with the law if people with diabilities complain about it.

+ +

This sounds serious, but really you just need to consider accessibility as a main priority of your web development practices, as outlined above. If in doubt, get advice from a qualified lawyer. We're not going to offer any more advice than this, because we're not lawyers.

+ +

Accessibility APIs

+ +

Web browsers make use of special accessibility APIs (provided by the underlying operating system) that expose information useful for assistive technologies (ATs) — ATs mostly tend to make use of semantic information, so this information doesn't include things like styling information, or JavaScript. This information is structured in a tree of information called the accessibility tree.

+ +

Different operating systems have different accessibility APIs available :

+ + + +

Where the native semantic information provided by the HTML elements in your web apps falls down, you can supplement it with features from the WAI-ARIA specification, which add semantic information to the accessibility tree to improve accessibility. You can learn a lot more about WAI-ARIA in our WAI-ARIA basics article.

+ +

Summary

+ +

This article should have given you a useful high level overview of accessibility, shown you why it's important, and looked at how you can fit it into your workflow. You should now also have a thirst to learn about the implementation details that can make sites accessible, and we'll start on that in the next section, looking at why HTML is a good basis for accessibility.

+ +

{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}

+ +

In this module

+ + 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 new file mode 100644 index 0000000000..d39ea4069f --- /dev/null +++ b/files/ko/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html @@ -0,0 +1,170 @@ +--- +title: 웹 사이트가 제대로 동작하는지 확인하는 방법 +slug: Learn/Common_questions/웹_사이트가_제대로_동작하는지_확인 +translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly +--- +
+

이번에는 웹사이트 동작과 관련한 다양한 문제해결 단계와 그 문제들을 해결하기 위한 방법들을 알아보겠습니다.

+
+ + + + + + + + + + + + +
전제 조건:먼저, upload files웹 서버에 파일 업로드 방법을 알아야 합니다.
목표:웹 사이트에서 발생할 수 있는 기본적인 문제들과 해결방법을 알아봅시다.
+ +

개발하신 웹 사이트를 온라인상에 배포를 하였나요? 잘 했어요! 그런데 문제없이 동작하는게 확실한가요?

+ +

종종 온라인에 배포한 웹 서버는 로컬에서 모습과는 꽤 다르게 동작할 때가 있습니다. 그 때문에 온라인에 배포할 때마다 한 번씩 확인이 필요합니다. 아마 많은 문제가 발생해 놀라게 될 텐데요: 이미지가 나오지 않거나, 페이지가 로딩이 안되거나 느리게 로딩되는 등 하는 문제들요. 대부분의 경우는 큰 문제가 아닙니다, 간단한 실수나 호스팅 세팅 같은 문제죠.

+ +

이런 문제들을 어떻게 진단하고 해결하는지 살펴봅시다.

+ +

Active Learning

+ +

There is no active learning available yet. Please, consider contributing.

+ +

Dig deeper

+ +

브라우저에서 테스트하기

+ +

웹 사이트가 잘 동작하는지 알고 싶다면, 먼저 브라우저를 시작하고 테스트하려는 페이지로 이동하세요.

+ +

어?, 이미지가 어디갔죠?

+ +

우리의 개인 사이트를 봅시다.(동작x), http://demozilla.examplehostingprovider.net/. It's not showing the image we expected!

+ +

Oops, the ‘unicorn’ image is missing

+ +

Open Firefox's Network tool (Tools ➤ Web Developer ➤ Network) and reload the page:

+ +

The image has a 404 error

+ +

There's the problem, that "404" at the bottom. "404" means "resource not found", and that's why we didn't see the image.

+ +

HTTP statuses

+ +

Servers respond with a status message whenever they receive a request. Here are the most common statuses:

+ +
+
200: OK
+
The resource you asked for was delivered.
+
301: Moved permanently
+
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.
+
304: Not modified
+
The file has not changed since the last time you asked for it, so your browser can display the version from its cache, resulting in faster response times and more efficient use of bandwidth.
+
403: Forbidden
+
You aren't allowed to display the resource. Usually it has to do with a configuration mistake (e.g. your hosting provider forgot to give you access rights to a directory).
+
404: Not found
+
Self-explanatory. We'll discuss how to solve this below.
+
500: Internal server error
+
Something went wrong on the server. For instance, maybe the server-side language ({{Glossary("PHP")}}, .Net, etc.) stopped working, or the web server itself has a configuration problem. Usually it's best to resort to your hosting provider's support team.
+
503: Service unavailable
+
Usually resulting from a shortterm system overload. The server has some sort of problem. Try again in a little while.
+
+ + + +

As beginners checking our (simple) website, we'll deal most often with 200, 304, 403, and 404.

+ +

Fixing the 404

+ +

So what went wrong?

+ +

Le list of images in our project

+ +

At first glance, the image we asked for seems to be in the right place... but the Network tool reported a "404". It turns out that we made a typo in our HTML code: unicorn_pics.png rather than unicorn_pic.png. So correct the typo in your code editor by changing the image's src attribute:

+ +

Deleting the ‘s’

+ +

Save, push to the server, and reload the page in your browser:

+ +

The image loads corectly in the browser

+ +

There you go! Let's look at the {{Glossary("HTTP")}} statuses again:

+ + + +

So we fixed the error and learned a few HTTP statuses along the way!

+ +

Frequent errors

+ +

The most frequent errors that we find are these:

+ +

Typos in the address

+ +

We wanted to type http://demozilla.examplehostingprovider.net/ but typed too fast and forgot an “l”:

+ +

Address unreachable

+ +

The address cannot be found. Indeed.

+ +

404 errors

+ +

Many times the error just results just from a typo, but sometimes maybe you either forgot to upload a resource or you lost your network connection while you were uploading your resources. First check the spelling and accuracy of the file path, and if there's still a problem, upload your files again. That will likely fix the problem.

+ +

JavaScript errors

+ +

Someone (possibly you) added a script to the page and made a mistake. This will not prevent the page from loading but you will feel something went wrong.

+ +

Open the console (Tools ➤ Web developer ➤ Web Console) and reload the page:

+ +

A Javascript error is shown in the Console

+ +

In this example, we learn (quite clearly) what the error is, and we can go fix it (we will cover JavaScript in another series of articles).

+ +

More things to check

+ +

We have listed a few simple ways to check that your website works properly, as well as the most common errors you may run across and how to fix them. You can also test if your page meets these criteria:

+ +

How's the performance?

+ +

Does the page load fast enough? Resources like WebPagetest.org or browser add-ons like YSlow can tell you a few interesting things:

+ +

Yslow diagnostics

+ +

Grades go from A to F. Our page is just small and meets most criteria. But we can already note it would have been better to use a {{Glossary("CDN")}}. That doesn't matter very much when we're only serving one image, but it would be critical for a high-bandwidth website serving many thousands of images.

+ +

Is the server responsive enough?

+ +

ping is a useful shell tool that tests the domain name you provide and tells you if the server's responding or not:

+ +
$ ping mozilla.org
+PING mozilla.org (63.245.215.20): 56 data bytes
+64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms
+64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms
+64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms
+64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms
+^C
+--- mozilla.org ping statistics ---
+4 packets transmitted, 4 packets received, 0.0% packet loss
+round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms
+ +

Just keep in mind a handy keyboard shortcut: Ctrl+C.  Ctrl+C sends an “interrupt” signal to the runtime and tells it to stop.  If you don't stop the runtime, ping will ping the server indefinitely.

+ +

A simple checklist

+ + + +

Next steps

+ +

Congratulations, your website is up and running for anyone to visit. That's a huge achievement. Now, you can start digging deeper into various subjects.

+ + diff --git a/files/ko/learn/common_questions/thinking_before_coding/index.html b/files/ko/learn/common_questions/thinking_before_coding/index.html new file mode 100644 index 0000000000..8885c5999b --- /dev/null +++ b/files/ko/learn/common_questions/thinking_before_coding/index.html @@ -0,0 +1,176 @@ +--- +title: 나의 웹사이트를 설계하기 위해서는? +slug: Learn/Common_questions/코딩하기_전에_생각하기 +tags: + - 능동학습필요 + - 초보자 +translation_of: Learn/Common_questions/Thinking_before_coding +--- +

이 글은 모든 프로젝트에서 중요한 첫 단계  - 프로젝트를 통해 달성하고 싶은 것을 정의하기 - 를 다룬다.

+ + + + + + + + + + + + +
선이수:없음
목표:웹 프로젝트 방향 설정을 위해 목적을 정하는 법을 배운다.
+ +

요약

+ +

웹 프로젝트를 시작할 때, 많은 사람들은 기술적인 면에 집중한다. 물론 자기 분야의 기술에 익숙해야한다. 그러나 정말 중요한건 무엇을 달성하고 싶은가이다. 당연한 이야기같지만, 생각보다 많은 프로젝트들이 기술적 방법의 부족이 아닌, 목적과 전망의 부족으로 실패한다.

+ +

따라서 아이디어를 얻고, 그것을 웹 사이트로 만들고 싶을 때, 다른 것보다 먼저 대답해야할 질문이 있다.

+ + + +

이러한 것들을 프로젝트 관념(ideation)이라 한다. 당신이 초보자든 숙련된 개발자든 목표에 도달하기 위해 반드시 거쳐야 할 첫 단계이다.

+ +

능동 학습

+ +

아직 가능한 능동 학습이 없다. 기여를 고민해보라.

+ +

깊게 들어가기

+ +

프로젝트는 절대 기술에서 시작하지 않는다. 음악가는 무엇을 연주할 지 정하기 전엔 어떤 음악도 만들지 않는다. 화가, 작가, 그리고 웹 개발자도 마찬가지다. 기술은 다음이다.

+ +

기술은 분명히 중요하다. 음악가는 기악을 완성해야 한다. 그러나 좋은 음악가는 절대 생각없이 좋은 음악을 만들수 없다. 그러므로 코드와 툴같은 기술로 뛰어들기 전에, 한 걸음 물러서서 하고 싶은 것을 상세히 결정해야 한다.

+ +

친구와 함께하는 한 시간의 토론은 좋은 시작이지만 부족하다. 생각을 현실로 만들 길의 탁 트인 전망을 얻으려면 앉아서 생각을 구조화해야한다. 이것을 하기 위해서, 오직 펜과 종이 그리고 적어도 다음 질문에 대한 답할 시간이 필요하다.

+ +
+

메모: 프로젝트 관념화를 수행하기 위한 셀 수 없는 방법들이 있다. 우리는 여기에 그것들을 모두 제시할 수는 없다. (책 전체로는 충분하지 않을 것이다). 이 곳에 주는 것은 전문가들이  Project Ideation(관념화), Project Planning(계획) 그리고 Project Management(관리) 라고 부르는 것을 다루는 단순한 방법이다.

+
+ +

내가 정확히 달성하고 싶은 것은 무엇인가?

+ +

이것은 대답해야 하는 가장 중요한 질문이다. 왜냐하면, 이것이 다른 모든 것을 만들기 때문이다. 도달하고 싶은 모든 목표를 목록화해라. 그것은 무엇일 수도 있다: 돈을 벌기 위해 물건 팔기, 정치적인 의견 표현하기, 새로운 친구 만들기,  음악가들과 공연하기, 고양이 사진 모으기, 또는 원하는 무엇이든.

+ +

당신이 음악가라고 생각해보자. 이런걸 원할 수 있다.

+ + + +

일단 이런 리스트를 만들고 나면, 우선순위를 정하는 것이 필요하다. 가장 중요한 것부터 덜 중요한 것까지 목표를 정렬해라.

+ +
    +
  1. 새로운 애인 찾기
    2. +
  2. 다른 사람들이 내 음악을 듣게 하기
    3. +
  3. 내 음악에 대해 이야기하기
    4. +
  4. 다른 음악가들과 만나기
    5. +
  5. 관련 상품 팔기 
    6. +
  6. 동영상으로 음악 가르치기
    7. +
  7. 내 고양이 사진 출판하기
    8. +
+ +

단순한 목표 쓰기와 순위 정하기가 만들고 싶은 것을 결정할 때, 도움이 될 것이다. (내가 이런 특징을 구현해야할까, 이런 서비스를 사용해야할까, 이런 디자인을 만들어야할까?)

+ +

우선순위가 정리된 목적 기록부가 생겼으니, 다음 질문으로 이동하자.

+ +

어떻게 웹사이트가 나를 목적지로 데려다 줄 수 있을까?

+ +

그래서 당신은 목표 리스트를 가지고 있고, 그 목표들을 이루기위해 웹사이트가 필요하다고 느낍니다. 확실합니까?

+ +

우리의 예를 다시 봅시다. 우리는 음악에 관련된 5개의 목표, 개인 삶(소중한 사람 찾기)에 관련된 하나의 목표 그리고, 완전히 상관없는 고양이 사진을 가지고 있습니다. 이 모든 목표들을 다루기 위한 하나의 웹사이트를 만드는 것이 합리적입니까? 그것이 필요할까요? 결국에, 많은 기존의 웹 서비스는 새로운 웹사이트를 만들지 않고 당신의 목표를 가져다 줄 지 모릅니다.

+ +

애인을 찾는 것은 새로운 웹사이트를 구축하는 것보다 기존의 자원을 사용하는 것이 더 알맞다는 점에서 중요한 케이스입니다. 왜? 왜냐하면 우리가 실제로 애인을 찾는 것보다 웹사이트를 구축하고 유지하는 데 더 많은 시간을 소비하기 때문입니다. 우리의 목표가 가장 중요하기 때문에, 우리는 처음부터 시작하는 것보다는 기존의 툴을 레버리징(leveraging )하는 것에 에너지를 써야합니다. 다시, 사진을 보여주기 위해 이용할 수 있는 이미 너무 많은 웹서비스가 있습니다 그래서 우리의 고양이가 얼마나 귀여운 지에 대한 것을 퍼뜨리기 위해 새로운 사이트를 구축하는 데 노력할 가치가 없습니다.

+ +

음악과 연관된 다른 5개의 목표가 있습니다. 물론, 이런 목표들을 다룰 수 있는 많은 웹서비스가 있습니다. 그러나, 우리만을 위한 웹사이트를 구축하는 경우에는 이해가 됩니다. 그런 웹사이트는 하나의 공간에 퍼블리싱하고 싶은 모든 항목을 합치는 것과 (목표 3, 5, 6에 적합) 그리고 우리와 대중 사이에 상호작용을 장려하는 것에 (목표 2, 4) 가장 좋은 방법입니다. 다시 말해서, 이런 목표들이 같은 주제를 중심으로 돌기 때문에, 한 곳에 모든 것을 가지는 것이 우리의 목표를 충족하고, 팔로어들과 연결하는 데 도움이 될 것입니다.

+ +

어떻게 웹사이트가 나의 목표를 달성하는 데 도움이 될까요? 그것에 답함으로써, 우리는 우리의 목표를 달성하는 데 가장 좋은 방법을 찾을 것이고, 노력이 낭비되지 않도록 할 것입니다.

+ +

내 목표를 달성하기 위해, 무엇을, 어떤 순서로 해야할까?

+ +

이제 우리가 달성하고 싶은 것을 알고 있으므로, 그 목표들을 실행가능한 단계로 바꿀 시간입니다.

+ +

긴 설명을 하기 보다는 이 표로 우리의 예제를 돌아봅시다:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
목표해야할 것
사람들이 당신의 음악을 듣게 하기 +
    +
  1. 음악을 녹음한다.
    2. +
  2. 온라인에서 사용할 수 있는 몇몇의 오디오 파일을 준비힌다. (기존의 웹서비스로 이것을 할 수 있을까?)
    3. +
  3. 사람들에게 당신의 웹사이트의 일부에서 당신의 음악에 접근하게 한다.
    4. +
+
음악에 대해 이야기하기 +
    +
  1. 토의를 시작하기 위한 몇몇의 글을 쓴다.
    2. +
  2. 어떻게 글이 보여야 하는 지 정해라.
    3. +
  3. 웹사이트에 이 글을 게시해라 (어떻게 이것을 할까?)
    4. +
+
다른 음악가들 만나기 +
    +
  1. 사람들이 너와 연락할 방법을 제공해라.
    2. +
  2. 너의 웹사이트에서 어떻게 사람들이 연락 채널을 찾을 지 정해라.
    3. +
+
goodies 팔기 +
    +
  1. goodies 만든다.
    2. +
  2. goodies 저장한다.
    3. +
  3. 쇼핑을 하는 방식 찾는다.
    4. +
  4. 결제 방식 찾는다.
    5. +
  5. 사이트에서 사람들의 주문 메카니즘 만든다.
    6. +
+
동영상을 통해 음악 가르치기 +
    +
  1. 동영상 강의 녹화한다.
    2. +
  2. 온라인에서 볼 수 있는 동영상 파일 준비한다. (다시, 기존의 웹사이트에서 할 수 있을까?)
    3. +
  3. 웹사이트의 한 부분에서 비디오 접근 가능하게 한다.
    4. +
+
+ +

공지할 것이 두 개가 있다. 첫째, 이런 아이템 중 몇몇은 웹과 상관이 없다. (예를 들어, 음악 녹음, 글 쓰기) 종종 그런 오프라인 활동이 프로젝트의 웹 부분보다 훨씬 더 중요하다. 예를 들어, 판매의 경우에, 공급, 결제, 배달에 시간을 쓰는 것이 사람들이 주문할 수 있는 웹사이트를 만드는 것보다 훨씬 더 중요하다.

+ +

둘째, 실행가능한 단계를 설정하는 것은 우리가 답할 필요가 있는 새로운 질문을 이끌어 낸다. 종종 우리가 본래 생각했던 것보다 더 많은 질문으로 변한다. (예를 들어, 내가 혼자서 어떻게 이것을 배워야할까? 누군가에게 이것을 부탁할까? 서드파티(제 3의) 서비스를 사용해야할까?)

+ +

결론

+ +

당신이 본 것 처럼, "나는 웹사이트를 만들고 싶다" 라는 단순한 생각이 긴 해야할 목록을 만들었다. 그리고 그것은 생각하면 할 수록 더 길어진다. 금방 그것은 압도적으로 보일 것이다. 그러나 겁먹지 마라. 당신은 모든 질문에 대답할 필요는 없다. 그리고 당신은 리스트에 모든 것을 할 필요는 없다. 중요한 것은 원하는 것과 도달하는 법에 대한 비전을 가지고 있어야하는 것이다. 일단 분명한 비전이 있다면, 당신은 해야할 때와 하는 방법을 결정할 필요가 있다. 큰 일을 작은 실행할 수 있는 단계로 부숴라. 그리고 그 작은 단계를 거대한 성과로 합쳐라.

+ +

이 글에서, 당신은 웹사이트를 만들기 위한 개략적인 계획을 지금 세울 수 있어야 한다. 다음 단계는 how the Internet works(인터넷이 작동하는 법) 을 읽어야 할 것이다.

+ +

 

diff --git "a/files/ko/learn/common_questions/\354\233\271_\354\202\254\354\235\264\355\212\270\352\260\200_\354\240\234\353\214\200\353\241\234_\353\217\231\354\236\221\355\225\230\353\212\224\354\247\200_\355\231\225\354\235\270/index.html" "b/files/ko/learn/common_questions/\354\233\271_\354\202\254\354\235\264\355\212\270\352\260\200_\354\240\234\353\214\200\353\241\234_\353\217\231\354\236\221\355\225\230\353\212\224\354\247\200_\355\231\225\354\235\270/index.html" deleted file mode 100644 index d39ea4069f..0000000000 --- "a/files/ko/learn/common_questions/\354\233\271_\354\202\254\354\235\264\355\212\270\352\260\200_\354\240\234\353\214\200\353\241\234_\353\217\231\354\236\221\355\225\230\353\212\224\354\247\200_\355\231\225\354\235\270/index.html" +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: 웹 사이트가 제대로 동작하는지 확인하는 방법 -slug: Learn/Common_questions/웹_사이트가_제대로_동작하는지_확인 -translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly ---- -
-

이번에는 웹사이트 동작과 관련한 다양한 문제해결 단계와 그 문제들을 해결하기 위한 방법들을 알아보겠습니다.

-
- - - - - - - - - - - - -
전제 조건:먼저, upload files웹 서버에 파일 업로드 방법을 알아야 합니다.
목표:웹 사이트에서 발생할 수 있는 기본적인 문제들과 해결방법을 알아봅시다.
- -

개발하신 웹 사이트를 온라인상에 배포를 하였나요? 잘 했어요! 그런데 문제없이 동작하는게 확실한가요?

- -

종종 온라인에 배포한 웹 서버는 로컬에서 모습과는 꽤 다르게 동작할 때가 있습니다. 그 때문에 온라인에 배포할 때마다 한 번씩 확인이 필요합니다. 아마 많은 문제가 발생해 놀라게 될 텐데요: 이미지가 나오지 않거나, 페이지가 로딩이 안되거나 느리게 로딩되는 등 하는 문제들요. 대부분의 경우는 큰 문제가 아닙니다, 간단한 실수나 호스팅 세팅 같은 문제죠.

- -

이런 문제들을 어떻게 진단하고 해결하는지 살펴봅시다.

- -

Active Learning

- -

There is no active learning available yet. Please, consider contributing.

- -

Dig deeper

- -

브라우저에서 테스트하기

- -

웹 사이트가 잘 동작하는지 알고 싶다면, 먼저 브라우저를 시작하고 테스트하려는 페이지로 이동하세요.

- -

어?, 이미지가 어디갔죠?

- -

우리의 개인 사이트를 봅시다.(동작x), http://demozilla.examplehostingprovider.net/. It's not showing the image we expected!

- -

Oops, the ‘unicorn’ image is missing

- -

Open Firefox's Network tool (Tools ➤ Web Developer ➤ Network) and reload the page:

- -

The image has a 404 error

- -

There's the problem, that "404" at the bottom. "404" means "resource not found", and that's why we didn't see the image.

- -

HTTP statuses

- -

Servers respond with a status message whenever they receive a request. Here are the most common statuses:

- -
-
200: OK
-
The resource you asked for was delivered.
-
301: Moved permanently
-
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.
-
304: Not modified
-
The file has not changed since the last time you asked for it, so your browser can display the version from its cache, resulting in faster response times and more efficient use of bandwidth.
-
403: Forbidden
-
You aren't allowed to display the resource. Usually it has to do with a configuration mistake (e.g. your hosting provider forgot to give you access rights to a directory).
-
404: Not found
-
Self-explanatory. We'll discuss how to solve this below.
-
500: Internal server error
-
Something went wrong on the server. For instance, maybe the server-side language ({{Glossary("PHP")}}, .Net, etc.) stopped working, or the web server itself has a configuration problem. Usually it's best to resort to your hosting provider's support team.
-
503: Service unavailable
-
Usually resulting from a shortterm system overload. The server has some sort of problem. Try again in a little while.
-
- - - -

As beginners checking our (simple) website, we'll deal most often with 200, 304, 403, and 404.

- -

Fixing the 404

- -

So what went wrong?

- -

Le list of images in our project

- -

At first glance, the image we asked for seems to be in the right place... but the Network tool reported a "404". It turns out that we made a typo in our HTML code: unicorn_pics.png rather than unicorn_pic.png. So correct the typo in your code editor by changing the image's src attribute:

- -

Deleting the ‘s’

- -

Save, push to the server, and reload the page in your browser:

- -

The image loads corectly in the browser

- -

There you go! Let's look at the {{Glossary("HTTP")}} statuses again:

- - - -

So we fixed the error and learned a few HTTP statuses along the way!

- -

Frequent errors

- -

The most frequent errors that we find are these:

- -

Typos in the address

- -

We wanted to type http://demozilla.examplehostingprovider.net/ but typed too fast and forgot an “l”:

- -

Address unreachable

- -

The address cannot be found. Indeed.

- -

404 errors

- -

Many times the error just results just from a typo, but sometimes maybe you either forgot to upload a resource or you lost your network connection while you were uploading your resources. First check the spelling and accuracy of the file path, and if there's still a problem, upload your files again. That will likely fix the problem.

- -

JavaScript errors

- -

Someone (possibly you) added a script to the page and made a mistake. This will not prevent the page from loading but you will feel something went wrong.

- -

Open the console (Tools ➤ Web developer ➤ Web Console) and reload the page:

- -

A Javascript error is shown in the Console

- -

In this example, we learn (quite clearly) what the error is, and we can go fix it (we will cover JavaScript in another series of articles).

- -

More things to check

- -

We have listed a few simple ways to check that your website works properly, as well as the most common errors you may run across and how to fix them. You can also test if your page meets these criteria:

- -

How's the performance?

- -

Does the page load fast enough? Resources like WebPagetest.org or browser add-ons like YSlow can tell you a few interesting things:

- -

Yslow diagnostics

- -

Grades go from A to F. Our page is just small and meets most criteria. But we can already note it would have been better to use a {{Glossary("CDN")}}. That doesn't matter very much when we're only serving one image, but it would be critical for a high-bandwidth website serving many thousands of images.

- -

Is the server responsive enough?

- -

ping is a useful shell tool that tests the domain name you provide and tells you if the server's responding or not:

- -
$ ping mozilla.org
-PING mozilla.org (63.245.215.20): 56 data bytes
-64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms
-64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms
-64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms
-64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms
-^C
---- mozilla.org ping statistics ---
-4 packets transmitted, 4 packets received, 0.0% packet loss
-round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms
- -

Just keep in mind a handy keyboard shortcut: Ctrl+C.  Ctrl+C sends an “interrupt” signal to the runtime and tells it to stop.  If you don't stop the runtime, ping will ping the server indefinitely.

- -

A simple checklist

- - - -

Next steps

- -

Congratulations, your website is up and running for anyone to visit. That's a huge achievement. Now, you can start digging deeper into various subjects.

- - diff --git "a/files/ko/learn/common_questions/\354\275\224\353\224\251\355\225\230\352\270\260_\354\240\204\354\227\220_\354\203\235\352\260\201\355\225\230\352\270\260/index.html" "b/files/ko/learn/common_questions/\354\275\224\353\224\251\355\225\230\352\270\260_\354\240\204\354\227\220_\354\203\235\352\260\201\355\225\230\352\270\260/index.html" deleted file mode 100644 index 8885c5999b..0000000000 --- "a/files/ko/learn/common_questions/\354\275\224\353\224\251\355\225\230\352\270\260_\354\240\204\354\227\220_\354\203\235\352\260\201\355\225\230\352\270\260/index.html" +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: 나의 웹사이트를 설계하기 위해서는? -slug: Learn/Common_questions/코딩하기_전에_생각하기 -tags: - - 능동학습필요 - - 초보자 -translation_of: Learn/Common_questions/Thinking_before_coding ---- -

이 글은 모든 프로젝트에서 중요한 첫 단계  - 프로젝트를 통해 달성하고 싶은 것을 정의하기 - 를 다룬다.

- - - - - - - - - - - - -
선이수:없음
목표:웹 프로젝트 방향 설정을 위해 목적을 정하는 법을 배운다.
- -

요약

- -

웹 프로젝트를 시작할 때, 많은 사람들은 기술적인 면에 집중한다. 물론 자기 분야의 기술에 익숙해야한다. 그러나 정말 중요한건 무엇을 달성하고 싶은가이다. 당연한 이야기같지만, 생각보다 많은 프로젝트들이 기술적 방법의 부족이 아닌, 목적과 전망의 부족으로 실패한다.

- -

따라서 아이디어를 얻고, 그것을 웹 사이트로 만들고 싶을 때, 다른 것보다 먼저 대답해야할 질문이 있다.

- - - -

이러한 것들을 프로젝트 관념(ideation)이라 한다. 당신이 초보자든 숙련된 개발자든 목표에 도달하기 위해 반드시 거쳐야 할 첫 단계이다.

- -

능동 학습

- -

아직 가능한 능동 학습이 없다. 기여를 고민해보라.

- -

깊게 들어가기

- -

프로젝트는 절대 기술에서 시작하지 않는다. 음악가는 무엇을 연주할 지 정하기 전엔 어떤 음악도 만들지 않는다. 화가, 작가, 그리고 웹 개발자도 마찬가지다. 기술은 다음이다.

- -

기술은 분명히 중요하다. 음악가는 기악을 완성해야 한다. 그러나 좋은 음악가는 절대 생각없이 좋은 음악을 만들수 없다. 그러므로 코드와 툴같은 기술로 뛰어들기 전에, 한 걸음 물러서서 하고 싶은 것을 상세히 결정해야 한다.

- -

친구와 함께하는 한 시간의 토론은 좋은 시작이지만 부족하다. 생각을 현실로 만들 길의 탁 트인 전망을 얻으려면 앉아서 생각을 구조화해야한다. 이것을 하기 위해서, 오직 펜과 종이 그리고 적어도 다음 질문에 대한 답할 시간이 필요하다.

- -
-

메모: 프로젝트 관념화를 수행하기 위한 셀 수 없는 방법들이 있다. 우리는 여기에 그것들을 모두 제시할 수는 없다. (책 전체로는 충분하지 않을 것이다). 이 곳에 주는 것은 전문가들이  Project Ideation(관념화), Project Planning(계획) 그리고 Project Management(관리) 라고 부르는 것을 다루는 단순한 방법이다.

-
- -

내가 정확히 달성하고 싶은 것은 무엇인가?

- -

이것은 대답해야 하는 가장 중요한 질문이다. 왜냐하면, 이것이 다른 모든 것을 만들기 때문이다. 도달하고 싶은 모든 목표를 목록화해라. 그것은 무엇일 수도 있다: 돈을 벌기 위해 물건 팔기, 정치적인 의견 표현하기, 새로운 친구 만들기,  음악가들과 공연하기, 고양이 사진 모으기, 또는 원하는 무엇이든.

- -

당신이 음악가라고 생각해보자. 이런걸 원할 수 있다.

- - - -

일단 이런 리스트를 만들고 나면, 우선순위를 정하는 것이 필요하다. 가장 중요한 것부터 덜 중요한 것까지 목표를 정렬해라.

- -
    -
  1. 새로운 애인 찾기
    2. -
  2. 다른 사람들이 내 음악을 듣게 하기
    3. -
  3. 내 음악에 대해 이야기하기
    4. -
  4. 다른 음악가들과 만나기
    5. -
  5. 관련 상품 팔기 
    6. -
  6. 동영상으로 음악 가르치기
    7. -
  7. 내 고양이 사진 출판하기
    8. -
- -

단순한 목표 쓰기와 순위 정하기가 만들고 싶은 것을 결정할 때, 도움이 될 것이다. (내가 이런 특징을 구현해야할까, 이런 서비스를 사용해야할까, 이런 디자인을 만들어야할까?)

- -

우선순위가 정리된 목적 기록부가 생겼으니, 다음 질문으로 이동하자.

- -

어떻게 웹사이트가 나를 목적지로 데려다 줄 수 있을까?

- -

그래서 당신은 목표 리스트를 가지고 있고, 그 목표들을 이루기위해 웹사이트가 필요하다고 느낍니다. 확실합니까?

- -

우리의 예를 다시 봅시다. 우리는 음악에 관련된 5개의 목표, 개인 삶(소중한 사람 찾기)에 관련된 하나의 목표 그리고, 완전히 상관없는 고양이 사진을 가지고 있습니다. 이 모든 목표들을 다루기 위한 하나의 웹사이트를 만드는 것이 합리적입니까? 그것이 필요할까요? 결국에, 많은 기존의 웹 서비스는 새로운 웹사이트를 만들지 않고 당신의 목표를 가져다 줄 지 모릅니다.

- -

애인을 찾는 것은 새로운 웹사이트를 구축하는 것보다 기존의 자원을 사용하는 것이 더 알맞다는 점에서 중요한 케이스입니다. 왜? 왜냐하면 우리가 실제로 애인을 찾는 것보다 웹사이트를 구축하고 유지하는 데 더 많은 시간을 소비하기 때문입니다. 우리의 목표가 가장 중요하기 때문에, 우리는 처음부터 시작하는 것보다는 기존의 툴을 레버리징(leveraging )하는 것에 에너지를 써야합니다. 다시, 사진을 보여주기 위해 이용할 수 있는 이미 너무 많은 웹서비스가 있습니다 그래서 우리의 고양이가 얼마나 귀여운 지에 대한 것을 퍼뜨리기 위해 새로운 사이트를 구축하는 데 노력할 가치가 없습니다.

- -

음악과 연관된 다른 5개의 목표가 있습니다. 물론, 이런 목표들을 다룰 수 있는 많은 웹서비스가 있습니다. 그러나, 우리만을 위한 웹사이트를 구축하는 경우에는 이해가 됩니다. 그런 웹사이트는 하나의 공간에 퍼블리싱하고 싶은 모든 항목을 합치는 것과 (목표 3, 5, 6에 적합) 그리고 우리와 대중 사이에 상호작용을 장려하는 것에 (목표 2, 4) 가장 좋은 방법입니다. 다시 말해서, 이런 목표들이 같은 주제를 중심으로 돌기 때문에, 한 곳에 모든 것을 가지는 것이 우리의 목표를 충족하고, 팔로어들과 연결하는 데 도움이 될 것입니다.

- -

어떻게 웹사이트가 나의 목표를 달성하는 데 도움이 될까요? 그것에 답함으로써, 우리는 우리의 목표를 달성하는 데 가장 좋은 방법을 찾을 것이고, 노력이 낭비되지 않도록 할 것입니다.

- -

내 목표를 달성하기 위해, 무엇을, 어떤 순서로 해야할까?

- -

이제 우리가 달성하고 싶은 것을 알고 있으므로, 그 목표들을 실행가능한 단계로 바꿀 시간입니다.

- -

긴 설명을 하기 보다는 이 표로 우리의 예제를 돌아봅시다:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
목표해야할 것
사람들이 당신의 음악을 듣게 하기 -
    -
  1. 음악을 녹음한다.
    2. -
  2. 온라인에서 사용할 수 있는 몇몇의 오디오 파일을 준비힌다. (기존의 웹서비스로 이것을 할 수 있을까?)
    3. -
  3. 사람들에게 당신의 웹사이트의 일부에서 당신의 음악에 접근하게 한다.
    4. -
-
음악에 대해 이야기하기 -
    -
  1. 토의를 시작하기 위한 몇몇의 글을 쓴다.
    2. -
  2. 어떻게 글이 보여야 하는 지 정해라.
    3. -
  3. 웹사이트에 이 글을 게시해라 (어떻게 이것을 할까?)
    4. -
-
다른 음악가들 만나기 -
    -
  1. 사람들이 너와 연락할 방법을 제공해라.
    2. -
  2. 너의 웹사이트에서 어떻게 사람들이 연락 채널을 찾을 지 정해라.
    3. -
-
goodies 팔기 -
    -
  1. goodies 만든다.
    2. -
  2. goodies 저장한다.
    3. -
  3. 쇼핑을 하는 방식 찾는다.
    4. -
  4. 결제 방식 찾는다.
    5. -
  5. 사이트에서 사람들의 주문 메카니즘 만든다.
    6. -
-
동영상을 통해 음악 가르치기 -
    -
  1. 동영상 강의 녹화한다.
    2. -
  2. 온라인에서 볼 수 있는 동영상 파일 준비한다. (다시, 기존의 웹사이트에서 할 수 있을까?)
    3. -
  3. 웹사이트의 한 부분에서 비디오 접근 가능하게 한다.
    4. -
-
- -

공지할 것이 두 개가 있다. 첫째, 이런 아이템 중 몇몇은 웹과 상관이 없다. (예를 들어, 음악 녹음, 글 쓰기) 종종 그런 오프라인 활동이 프로젝트의 웹 부분보다 훨씬 더 중요하다. 예를 들어, 판매의 경우에, 공급, 결제, 배달에 시간을 쓰는 것이 사람들이 주문할 수 있는 웹사이트를 만드는 것보다 훨씬 더 중요하다.

- -

둘째, 실행가능한 단계를 설정하는 것은 우리가 답할 필요가 있는 새로운 질문을 이끌어 낸다. 종종 우리가 본래 생각했던 것보다 더 많은 질문으로 변한다. (예를 들어, 내가 혼자서 어떻게 이것을 배워야할까? 누군가에게 이것을 부탁할까? 서드파티(제 3의) 서비스를 사용해야할까?)

- -

결론

- -

당신이 본 것 처럼, "나는 웹사이트를 만들고 싶다" 라는 단순한 생각이 긴 해야할 목록을 만들었다. 그리고 그것은 생각하면 할 수록 더 길어진다. 금방 그것은 압도적으로 보일 것이다. 그러나 겁먹지 마라. 당신은 모든 질문에 대답할 필요는 없다. 그리고 당신은 리스트에 모든 것을 할 필요는 없다. 중요한 것은 원하는 것과 도달하는 법에 대한 비전을 가지고 있어야하는 것이다. 일단 분명한 비전이 있다면, 당신은 해야할 때와 하는 방법을 결정할 필요가 있다. 큰 일을 작은 실행할 수 있는 단계로 부숴라. 그리고 그 작은 단계를 거대한 성과로 합쳐라.

- -

이 글에서, 당신은 웹사이트를 만들기 위한 개략적인 계획을 지금 세울 수 있어야 한다. 다음 단계는 how the Internet works(인터넷이 작동하는 법) 을 읽어야 할 것이다.

- -

 

diff --git a/files/ko/learn/css/basics/layout/index.html b/files/ko/learn/css/basics/layout/index.html deleted file mode 100644 index 5437902bf1..0000000000 --- a/files/ko/learn/css/basics/layout/index.html +++ /dev/null @@ -1,409 +0,0 @@ ---- -title: Introduction to CSS Layout -slug: Learn/CSS/Basics/Layout -translation_of: Learn/CSS/CSS_layout/Introduction -translation_of_original: Learn/CSS/Basics/Layout ---- -

{{PreviousNext("Learn/CSS/Basics/Box_model","Learn/CSS/Howto/style_text")}}

- -

CSS layout is the art of using various CSS properties to alter the positioning of elements on a document in order to fit the design requirements. CSS provides many layout mechanisms, the more advanced and modern techniques are so complex that they get their own articles. In this article, we will introduce the basic techniques that have been used for years.

- -

To properly layout a document with CSS, there are a few notions that one must know. The most important of these is {{Glossary("HTML")}} text flow. We will cover it in this article. Articles about other layout mechanisms will, at some point or the other, refer back to what we are discussing here.

- -

The flow

- -

At its most basic level an HTML document is a text document structured with {{Glossary("tag","tags")}}. In such a document, the text flows. That means text is displayed in the reading direction (from left to right, for example, in Latin based languages like English or French) and is broken automatically - creating new lines - each time the text reaches an edge of the document.

- -

- -

- -

Each {{Glossary("element","elements")}} in the document alters the flow of text in various ways:

- - - -

디스플레이 요소 (Elements display categories)

- -

CSS is used to define how an HTML element behaves within the flow and how it get in and out of that flow. The element behavior is defined using the property {{cssxref('display')}}. This property can take tons of values but let's focus on the four most important:

- -
-
none
-
모든 요소를 제거 합니다.
-
inline
-
줄을 바꾸지 않고, 해당 위치에서 다른 요소들과 같은 선상에 위치하려는 성질을 말합니다. 
-
block
-
This value is for the element to break the text flow with a forced line break before and after it. Its content is no longer part of the global text flow and flows only within the constraints provided by the element box model.
-
inline-block
-
This value makes the element somewhat in between inline and block type display: like inline boxes it flows with the text normally but, like block boxes, it's content is no longer part of the global text.
-
- -

Let's see an example.

- -

HTML:

- -
<p class="none">
-  1. I'm a big black cat,
-  <span>walking under a ladder,</span>
-  and I can see broken mirrors everywhere.
-</p>
-
-<p class="inline">
-  2. I'm a big black cat,
-  <span>walking under a ladder,</span>
-  and I can see broken mirrors everywhere.
-</p>
-
-<p class="block">
-  3. I'm a big black cat,
-  <span>walking under a ladder,</span>
-  and I can see broken mirrors everywhere.
-</p>
-
-<p class="inline-block">
-  4. I'm a big black cat,
-  <span>walking under a ladder,</span>
-  and I can see broken mirrors everywhere.
-</p>
-
- -

CSS:

- -
span {
-  width: 5em;
-  background: yellow;
-}
-
-.none span         { display: none;         }
-.inline span       { display: inline;       }
-.block span        { display: block;        }
-.inline-block span { display: inline-block; }
- -

Results:

- -

{{EmbedLiveSample('Elements_display_categories', '100%', '300px')}}

- -

Altering the flow

- -

By setting the display property you're already altering the flow, but you can go further.

- -

Text layout

- -

While an HTML document is nothing more than a long text flow, CSS provides many properties to deal with simple text layout. The text layout is everything that allows changing the text line breaking rules and the way the text is positioned over the natural text line.

- -

Those properties are: {{cssxref("hyphens")}}, {{cssxref("text-align")}}, {{cssxref("text-align-last")}}, {{cssxref("text-indent")}}, {{cssxref("vertical-align")}}, {{cssxref("white-space")}}, {{cssxref("word-break")}}, and {{cssxref("word-wrap")}}.

- -

Except for text-align and, text-indent the other properties have subtle effects on the text and vertical-align is often used with inline-block boxes.

- -

An example will make things clearer.

- -

HTML:

- -
<p lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p>
-<p class="format" lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p>
-
- -

CSS:

- -
.format {
-  /* The first line is "pull" to a 2em distance */
-  text-indent: -2em;
-
-  /* We need to compensate the negative indent
-     to avoid unwanted text clipping and keep
-     the whole text within the boundary of its
-     element box */
-  padding-left: 2em;
-
-  /* The text is aligned on both edges, adjusting
-     spacing between words as necessary */
-  text-align: justify;
-
-  /* The last line of the block of text is centered */
-  -moz-text-align-last: center;
-       text-align-last: center;
-
-  /* Rather than line break between two words the line
-     break can occur inside words, according to the rules
-     defined for the text language. This makes nice word cut
-     with a clear hyphen dash. If you don care about word
-     breaking rules, you could just use word-break or
-     word-wrap instead  */
-  -webkit-hyphens: auto;
-     -moz-hyphens: auto;
-      -ms-hyphens: auto;
-          hyphens: auto;
-}
- -
-

As you might notice, some properties are written multiple times with some prefix. This is because those prefixed properties are still experimental for some browsers and it is considered best practice to use them all with the standard property at the end of the list in order to provide the best backward compatibility possible.

-
- -

Results:

- -

{{ EmbedLiveSample('Text_layout', '100%', '350') }}

- -
-

It's worth noting that the trick we used to compensate the negative text indentation is a very common trick. Any property that accepts a length also accepts negative values. By fiddling with negative values and compensating them with other properties,  it's possible to produce very clever effects on the layout, especially when it applies to properties of the box model.

-
- -

Floating

- -

Okay, handling text is nice, but at some point what we really want is to move boxes around the document. The first way to handle that is to deal with floating boxes. Floating boxes are still attached to the global text flow,  but the text will flow around. Sounds weird, so let's see an example.

- -

Simple floating

- -

HTML:

- -
<div>
-  <p class="excerpt">"Why, it isn't possible," said Scrooge, "that I can have slept through a whole day and far into another night. It isn't possible that anything has happened to the sun, and this is twelve at noon!" </p>
-  <p> The idea being an alarming one, he scrambled out of bed, and groped his way to the window. He was obliged to rub the frost off with the sleeve of his dressing-gown before he could see anything; and could see very little then. All he could make out was, that it was still very foggy and extremely cold, and that there was no noise of people running to and fro, and making a great stir, as there unquestionably would have been if night had beaten off bright day, and taken possession of the world. This was a great relief, because "three days after sight of this First of Exchange pay to Mr. Ebenezer Scrooge or his order," and so forth, would have become a mere United States' security if there were no days to count by.</p>
-</div>
- -

CSS:

- -
.excerpt {
-  /* A floating box will act like a block whatever
-     the value of display we are using */
-  display: block;
-
-  /* Our box is floating to the left, which means
-     it will stack on the left side of the containing
-     block and the text will flow on its right side. */
-  float: left;
-
-  /* It is required to set a width to a floating box.
-     If we don't its width will be set
-     automatically, which means that it will grow as much
-     as possible and nothing will flow around it, like an
-     ordinary block box */
-  width: 40%;
-
-  /* We set some margins on the right and bottom side of
-     the box to avoid having the text flowing around being
-     in direct visual contact of our floating box */
-  margin: 0 1em 1em 0;
-
-  /* We make our floating box more visible with
-     a simple background color */
-  background: lightgrey;
-
-  /* As we have a solid background color it's a nice idea
-     to push the content a little bit away from the edges
-     of the box */
-  padding: 1em;
-}
- -

Results:

- -

{{ EmbedLiveSample('Simple_floating', '100%', '280') }}

- -

Layout with floating

- -

This is a very simple effect to start tweaking the flow to our wishes. Now it's possible to do better and start performing some true layout. A floating box that floats in a given direction stacks horizontally, it's a very convenient way to create rows of boxes instead of natural columns: In the flow, block boxes stack in columns and floating boxes stack in rows.

- -

Once again, an example will make things clearer.

- -

HTML:

- -
<div class="layout">
-  <div class="row">
-    <p class="cell size50">Scrooge went to bed again, and thought, and thought, and thought it over and over and over, and could make nothing of it. The more he thought, the more perplexed he was; and the more he endeavoured not to think, the more he thought.</p>
-    <p class="cell size50">Marley's Ghost bothered him exceedingly. Every time he resolved within himself, after mature inquiry, that it was all a dream, his mind flew back again, like a strong spring released, to its first position, and presented the same problem to be worked all through, "Was it a dream or not?"</p>
-  </div>
-  <div class="row">
-    <p class="cell size100">Scrooge lay in this state until the chime had gone three quarters more, when he remembered, on a sudden, that the Ghost had warned him of a visitation when the bell tolled one. He resolved to lie awake until the hour was passed; and, considering that he could no more go to sleep than go to Heaven, this was perhaps the wisest resolution in his power.</p>
-  </div>
-  <div class="row">
-    <p class="cell size33">The quarter was so long, that he was more than once convinced he must have sunk into a doze unconsciously, and missed the clock. At length it broke upon his listening ear.</p>
-    <p class="cell size33">
-      "Ding, dong!"<br>
-      "A quarter past," said Scrooge, counting.<br>
-      "Ding, dong!"<br>
-      "Half-past!" said Scrooge.<br>
-      "Ding, dong!"<br>
-      "A quarter to it," said Scrooge.<br>
-      "Ding, dong!"<br>
-      "The hour itself," said Scrooge, triumphantly, "and nothing else!"
-    </p>
-    <p class="cell size33">
-      He spoke before the hour bell sounded, which it now did with a deep, dull, hollow, melancholy ONE. Light flashed up in the room upon the instant, and the curtains of his bed were drawn.
-    </p>
-  </div>
-</div>
- -

CSS:

- -
/* This is our main layout container */
-.layout {
-  /* A background makes it visible */
-  background: lightgrey;
-
-  /* We add a small visual spacing to harmonize
-     the distance between the cells content and
-     and the layout border */
-  padding   : 0.5em;
-}
-
-/* A floating box gets somewhat out of
-   the flow, so if their container is empty
-   it will have a zero height size and the
-   floating box will overflow it. To
-   avoid such a situation, we make sure floating
-   boxes are not allowed to overflow. In
-   that specific context, with an overflow
-   hidden, floating boxes won't be clipped,
-   the parent box will extend to avoid any
-   floating box overflow.  */
-.row {
-  overflow: hidden;
-}
-
-/* Each cell is a left floating box */
-.cell {
-  float : left;
-
-  /* we add padding to our cell to create
-     some nice visual gutters between them */
-  padding   : 0.5em;
-
-  /* Because we are adding padding, we need
-     to be sure that it will not impact
-     the box width. */
-  box-sizing: border-box;
-
-  /* As margins cannot be controlled with the
-     box-sizing property, we need to be sure
-     there is none applied to our cell. */
-  margin    : 0;
-}
-
-/* Those are the sizes we can apply to our boxes */
-.size33  { width:  33%; } /* Not exactly a third, but good enough */
-.size50  { width:  50%; } /* A half */
-.size100 { width: 100%; } /* A full row */
- -

Results:

- -

{{ EmbedLiveSample('Layout_with_floating', '100%', '520') }}

- -

Using floating boxes this way, is what many CSS frameworks do. It's a robust and well-known technique but it has limits as everything must go with the flow: it's not possible to handle boxes in arbitrary order, variable sizing can be quite tricky to achieve, and vertical centering is impossible. We encourage you to dig deeper as floating boxes has been studied for long and they are among the most robust solutions for a simple layout that must be compatible with legacy browsers.

- -

If you want to better understand all the subtleties of floating boxes, we encourage you to read All about float by Chris Coyer.

- -

Positioning

- -

If floating boxes are still part of the flow, another mechanism exists to perform some layouts by extracting boxes out of the flow: CSS Positioning. Positioning is acheived by defining a positioning context with the {{cssxref("position")}} property and then allows boxes to be positioned using {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}} properties.

- -

The {{cssxref("position")}} property can take on four different values:

- -
-
static
-
This is the default value for all elements: they are part of the flow and don't define any specific positioning context.
-
relative
-
With this value, elements are still part of the flow, but they can be visually moved around their positions with {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}}. They also define a positioning context for their children elements.
-
absolute
-
With this value, elements are pushed out of the flow and no longer influence it. The position of such blocks is defined by the {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}} properties. The 0,0 position point for the top/left corner of the box is the top/left corner of the closest parent element which defines a positionning context other than static. If there is no parent with a positioning context, then, the 0,0 position point for the top/left corner of the box is the top/left corner of the document.
-
fixed
-
With this value, elements are pushed out of the flow and no longer influence it. The position of such blocks is define by the {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}} properties. The 0,0 position point for the top/left corner of the box is the top/left corner of the browser window {{Glossary("viewport")}}.
-
- -

Such positioned boxes can stack on top of each other. In that case, it's possible to change the stacking order by using the {{cssxref("z-index")}} property.

- -

Okay, let's see an example to visualize it at work.

- -

HTML:

- -
<div class="relative">
-    <div class="absolute-one">
-        <p>Position:absolute</p></br>
-        <p>Top Right</p>
-    </div>
-
-    <div class="absolute-two">
-        <p>Position:absolute</p></br>
-        <p>Bottom Centre</p>
-    </div>
-
-    <div class="absolute-three">
-        <p>Position:static</p></br>
-        <p>Where it falls</p>
-    </div>
-</div>
- -

CSS:

- -
p {
-  text-align:  centre;
-  color: #fff;
-}
-
-
-/* Setting the position to relative
-allows any child elements to be positioned
-anywhere, in relation to its container. */
-
-.relative {
-  position: relative;
-  width: 95%;
-  margin: 0 auto;
-  height: 300px;
-  background-color: #fff;
-  border: 3px solid #ADD8E6;
-}
-
-/* Just some styles for text alignment /*
-.relative div {
-  text-align: center;
-  padding: 5px;
-  display: block;
-  width: 125px;
-  height: 125px;
-  background-color: #ADD8E6;
-}
-
-/* By setting this div to position absolute
-we can position this element anywhere in relation
-to the 'relative' div /*
-.absolute-one {
-   position: absolute;
-   top: 0;
-   right: 0;
-}
-
-/* Unlike the first div which was positioned at the
-top right corner of the container div. '.absolute-two'
-is positioned bottom centre. By setting both left and right
-to 0, along with margin:auto.
-.absolute-two {
-   position: absolute;
-   bottom: 0;
-   right: 0;
-   left: 0;
-   margin: auto;
-}
-
-/* Where the div would fall naturally within it's container.
-This is also useful for returning elements from a floated
-position. E.g. on responsive styles. /*
-.absolute-three {
-   position: static;
-}
-
- -

Results:

- -

{{ EmbedLiveSample('Positioning', '100%', '400') }}

- -

If CSS positioning isn't really used for full layout, it is used quite often to deal with trick UX effect such as navigation layout, tooltip and such. This is something you'll see on a regular basis so we encourage you to get into it. Among various resources about it, we suggest you take a look at the article CSS positioning 101 by Noah Stokes.

- -

What's next

- -

The flow, the floating boxes,  and CSS positioning are the basic CSS knowledge that will drive you into CSS layout. Now you are ready to use CSS to its full potential! You should now take some time looking at practical usage of CSS. If you want to dig even deeper into layouts, you should definitely take a look at the other layout mechanism that exists with CSS: Table display, multiple columns layout, and flexible box layout.

- -

{{PreviousNext("Learn/CSS/Basics/Box_model","Learn/CSS/Howto/style_text")}}

- -
 
diff --git a/files/ko/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/ko/learn/css/building_blocks/fundamental_css_comprehension/index.html new file mode 100644 index 0000000000..d16df40221 --- /dev/null +++ b/files/ko/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -0,0 +1,128 @@ +--- +title: 기본적인 CSS 이해 +slug: Learn/CSS/Introduction_to_CSS/기본적인_CSS_이해 +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
+ +

You've covered a lot in this module, so it must feel good to have reached the end! The final step before you move on is to attempt the assessment for the module — this involves a number of related exercises that must be completed in order to create the final design — a business card/gamer card/social media profile.

+ + + + + + + + + + + + +
Prerequisites:Before attempting this assessment you should have already worked through all the articles in this module.
Objective:To test comprehension of fundamental CSS theory, syntax and mechanics.
+ +

Starting point

+ +

To get this assessment started, you should:

+ + + +
+

Note: Alternatively, you could use a site like JSBin or Thimble to do your assessment. You could paste the HTML and fill in the CSS into one of these online editors, and use this URL to point the <img> element to the image file. If the online editor you are using doesn't have a separate CSS panel, feel free to put it in a <style> element in the head of the document.

+
+ +

Project brief

+ +

You have been provided with some raw HTML and an image, and need to write the necessary CSS to style this into a nifty little online business card, which can perhaps double as a gamer card or social media profile. The following sections describe what you need to do.

+ +

Basic setup:

+ + + +

Taking care of the selectors and rulesets provided in the CSS resource file:

+ + + +

New rulesets you need to write:

+ + + +
+

Note: Bear in mind that the second ruleset sets font-size: 10px; on the <html> element — this means that for any descendants of <html>, an em will be equal to 10px rather than 16px as it is by default. (This is of course, provided the descendants in question don't have any ancestors sitting in between them and <html> in the hierarchy that have a different font-size set on them. This could affect the values you need, although in this simple example this is not an issue.)

+
+ +

Other things to think about:

+ + + +

Hints and tips

+ + + +

Example

+ +

The following screenshot shows an example of what the finished design should look like:

+ +

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

+ +

 

+ +

Assessment

+ +

If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the discussion thread about this exercise, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!

+ +

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

+ +

 

+ +

In this module

+ + + +

 

diff --git a/files/ko/learn/css/building_blocks/selectors/index.html b/files/ko/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..274653da91 --- /dev/null +++ b/files/ko/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,223 @@ +--- +title: CSS 선택자 +slug: Learn/CSS/Building_blocks/선택자 +translation_of: Learn/CSS/Building_blocks/Selectors +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
+ +

{{Glossary("CSS")}} 에서, 선택자는 스타일을 지정할 웹 페이지의 {{glossary("HTML")}} 요소를 대상으로 하는 데 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합니다. 이 기사와 하위 기사에서는 다양한 유형을 자세히 살펴보고 작동 방식을 살펴보겠습니다.

+ + + + + + + + + + + + +
전제조건:기본 컴퓨터 활용 능력, 기본 소프트웨어 설치, 파일 작업 에 대한 기본 지식, HTML 기본 사항 (HTML 소개 학습) 및 CSS 작동 방식에 대한 이해 (CSS 첫 단계 학습)
목적:CSS 선태자 작동 방식에 대해 자세히 알아보기.
+ +

선택자란 무엇인가?

+ +

우리는 이미 선택자 (selector) 를 만났습니다. CSS 선택자는 CSS 규칙의 첫 부분입니다. 규칙 내의 CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다. 선택자에 의해 선택된 요소들은 선택자의 주제(subject) 로 지칭됩니다.

+ +

Some code with the h1 highlighted.

+ +

이전 기사에서는 몇 가지 다른 선택자를 만났으며 — 예를 들어 h1 과 같은 요소 또는 .special 과 같은 class 를 선택하는 등 다양한 방법으로 문서를 대상으로 하는 선택자가 있다는 것을 배웠습니다.

+ +

CSS 에서, 선택자는 CSS 선택자 사양에 정의되어 있습니다. CSS 의 다른 부분과 마찬가지로 작동하려면, 브라우저에서 지원해야합니다. 당신이 보게 될 대부분의 선택자는 Level 3 선택자 사양 에 정의되어 있으므로, 이러한 선택자에 대한 훌륭한 브라우저 지원을 찾을 수 있습니다.

+ +

선택자 목록

+ +

동일한 CSS 를 사용하는 항목이 두 개 이상인 경우 규칙이 모든 개별 선택자에 적용되도록 개별 선택자를 선택자 목록 으로 결합할 수 있습니다. 예를 들어, h1 에 대해 동일한 CSS 와 special class 를 사용하면 이것을 두 개의 별도 규칙으로 작성할 수 있습니다.

+ +
h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+}
+ +

또한 이들 사이에 쉼표를 추가하여 선택자 목록으로 결합할 수도 있습니다.

+ +
h1, .special {
+  color: blue;
+}
+ +

공백은 쉼표 앞뒤에 유효합니다. 각 라인이 새 라인에 있으면 선택자를 더 읽기 쉽습니다.

+ +
h1,
+.special {
+  color: blue;
+}
+ +

아래 라이브 예제에서 동일한 선언을 가진 두 선택자를 결합 하십시오. 시각적 디스플레이는 결합 후 동일해야 합니다.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

+ +

이러한 방식으로 선택자를 그룹화할 때, 선택자가 유효하지 않은 경우 전체 규칙이 무시됩니다.

+ +

다음 예에서는, 잘못된 class 선택자 규칙이 무시되고 h1 은 여전히 스타일이 지정됩니다.

+ +
h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+}
+ +

그러나 결합하면, 전체 규칙이 유효하지 않은 것으로 간주되어 h1 또는 class 가 스타일 지정되지 않습니다.

+ +
h1, ..special {
+  color: blue;
+}
+ +

선택자의 유형

+ +

선택자에는 몇 가지 그룹이 있으며, 어떤 유형의 선택자가 필요한지 알면 작업에 적합한 도구를 찾는데 도움이 됩니다. 이 기사의 하위 기사에서는 다양한 선택자 그룹을 자세히 살펴 보겠습니다.

+ +

Type, class 및 ID 선택자

+ +

이 그룹에는 <h1> 과 같은 HTML 요소를 대상으로 하는 선택자가 포함됩니다.

+ +
h1 { }
+ +

또한 class 를 대상으로 하는 선택자가 포함됩니다:

+ +
.box { }
+ +

또는 ID:

+ +
#unique { }
+ +

속성 선택자

+ +

이 선택자 그룹은 요소에 특정 속성이 있는지에 따라 요소를  선택하는 다른 방법을 제공합니다:

+ +
a[title] { }
+ +

또는 특정 값을 가진 속성의 존재 여부를 기반으로 선택하십시오:

+ +
a[href="https://example.com"] { }
+ +

Pseudo-classes 및 pseudo-elements

+ +

이 선택자 그룹에는 요소의 특정 상태를 스타일링하는 pseudo-classes 가 포함됩니다. 예를 들어 :hover pseudo-class 는 마우스 포인터에 의해 요소를 가리킬 때만 요소를 선택합니다:

+ +
a:hover { }
+ +

또한 요소 자체가 아닌 요소의 특정 부분을 선택하는 pseudo-elements 도 포함됩니다. 예를 들어, ::first-line 은 항상 <span> 이 첫 번째 형식의 라인을 감싸는 것처럼 작동하여, 요소 내부의 첫 번째 텍스트 라인 (아래의 경우 <p>) 을 선택합니다.

+ +
p::first-line { }
+ +

결합자 (Combinators)

+ +

최종 선택자 그룹은 문서 내의 요소를 대상으로 하기 위해 다른 선택자를 결합합니다. 예를 들어 다음은 자식 결합자 (>) 를 사용하여 <article> 요소의 자식인 단락을 선택합니다:

+ +
article > p { }
+ +

다음 단계

+ +

이 학습 섹션 또는 일반적으로 MDN 에서 다양한 유형의 선택자로 직접 연결되는 링크에 대해서는 아래의 선택자 참조 표를 참고하거나 type, class 및 ID 선택자 에 대해 계속해서 여행을 시작하십시오.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

+ +

선택자 참조 표

+ +

아래 표는 사용 가능한 선택자의 개요와 이 안내서의 페이지에 대한 링크와 함께 각 유형의 선택자 사용법을 보여줍니다. 브라우저 지원 정보를 확인할 수 있는 각 선택자의 MDN 페이지에 대한 링크도 포함되어 있습니다. 이 자료를 나중에 자료에서 선택자를 찾아 보거나, CSS 를 일반적으로 실험할 때 다시 참조할 수 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
선택자예제CSS 자습서 배우기
Type 선택자h1 {  }Type selectors
범용 선택자* {  }The universal selector
Class 선택자.box {  }Class selectors
id 선택자#unique { }ID selectors
속성 선택자a[title] {  }Attribute selectors
Pseudo-class 선택자p:first-child { }Pseudo-classes
Pseudo-element 선택자p::first-line { }Pseudo-elements
하위 결합자article pDescendant combinator
자식 결합자article > pChild combinator
인접 형제 결합자h1 + pAdjacent sibling
일반 형제 결합자h1 ~ pGeneral sibling
+ +

이번 강의에서는

+ +
    +
  1. 계단식 및 상속
    2. +
  2. CSS 선택자 + +
    3. +
  3. 박스 모델
    4. +
  4. 배경 및 테두리
    5. +
  5. 다른 텍스트 방향 처리
    6. +
  6. 콘텐츠 overflow
    7. +
  7. 값과 단위
    8. +
  8. CSS 에서 항목 크기 조정
    9. +
  9. 이미지, 미디어 및 양식 요소
    10. +
  10. 표 스타일링
    11. +
  11. CSS 디버깅
    12. +
  12. CSS 정리
    13. +
diff --git a/files/ko/learn/css/building_blocks/the_box_model/index.html b/files/ko/learn/css/building_blocks/the_box_model/index.html new file mode 100644 index 0000000000..eec5f2b929 --- /dev/null +++ b/files/ko/learn/css/building_blocks/the_box_model/index.html @@ -0,0 +1,347 @@ +--- +title: 상자 모델 +slug: Learn/CSS/Building_blocks/상자_모델 +tags: + - CSS + - 디스플레이 + - 상자 모델 + - 여백 + - 초보자 + - 테두리 + - 패딩 + - 학습 +translation_of: Learn/CSS/Building_blocks/The_box_model +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
+ +

CSS에 포함되는 모든 요소의 외장은 박스이며, 이 박스를 이해하는 것은 CSS을 통해 레이아웃을 생성하거나, 아이템과 다른 아이템을 정렬하는 것을 가능하게 하는 열쇠입니다. 이번 단원에서 우리는 CSS 박스모델을 제대로 살펴보겠습니다. 박스의 작동 방식과 박스와 관련된 용어를 이해함으로써 더 복잡한 레이아웃 작업으로 넘어갈 수 있도록합니다.

+ + + + + + + + + + + + +
선결 사항:기본 컴퓨터 활용 능력기본 소프트웨어 설치, 파일 작업에 대한 기본 지식, HTML 기본기 (HTML 학습), CSS 작동 방식에 대한 개념 (CSS 첫 단계 학습.) 등에 대한 기본 지식
목표:CSS 박스 모델, 박스 모델을 구성하고 대체 모델로 전환하는 방법에 대해 학습합니다.
+ +

블록 및 인라인 박스

+ +

CSS에는 크게 두 가지 박스(블록 박스와 인라인 박스) 유형이 있습니다. 이러한 특성은 박스가 페이지 대열 측면 및 페이지의 다른 박스와 관련하여 박스의 작동 방식을 나타냅니다.

+ +

박스가 블록으로 정의되면 다음과 같은 방식으로 동작합니다:

+ + + +

여러분이 디스플레이 유형은 인라인으로 변경하지 않는 한 머리글(<h1>)과 <p>)와 같은 요소는 모두 기본값으로 외부 디스플레이 유형을 block 사용합니다.

+ +

박스의 외부 디스플레이 유형이 inline일 경우:

+ + + +

링크용 <a> 요소와 <span>, <em> 및 <strong> 요소는 모두 기본적으로 인라인으로 표시됩니다.

+ +

요소에 적용되는 박스 유형은 block 및 inline과 같은 {{cssxref("display")}} 속성 값으로 정의되며. 아울러 그것은 display의 outer 값과 관련이 있습니다.

+ +

구분: 내부 및 외부 디스플레이 유형

+ +

이 시점에 우리는 내부 및 외부 디스플레이 유형에 대해 설명하는 게 좋겠습니다. 위에서 언급했듯이 CSS의 박스는 외부 디스플레이 유형을 가지며, 이는 박스가 블록인지 인라인인지를 자세히 설명합니다.

+ +

그러나 박스에는 내부 디스플레이 유형도 있으며 당 박스 내부의 요소가 배치되는 방법을 나타냅니다. 기본적으로 박스 내부의 요소는 일반 대열로 배치되며, 이는 (위에서 설명한 바와 같이) 여타 블록 및 인라인 요소와 마찬가지로 작동한다는 것을 의미합니다.

+ +

그러나 여러분은 flex과 같은 display 값을 사용하여 내부 디스플레이 유형을 변경할 수 있습니다. 어떤 요소에 우리가 display: flex;를 설정하면 외부 디스플레이 유형은 블록이지만 내부 디스플레이 유형은 flex (가변) 으로 변경됩니다. 이 박스의 직계 자식은 가변 항목이 되고, 나중에 익히게 될 가변박스 규격에 명시된 규칙에 따라 배치됩니다.

+ +
+

참고: 디스플레이 속성 값 및 박스가 블록 및 인라인 레이아웃에서 작동하는 방법에 대해 자세히 보려면 블록 및 인라인 레이아웃에 대한 모질라 개발자 네트워크 가이드를 참조하십시오.

+
+ +

CSS 레이아웃에 대해 자세한 내용을 배우려면 다음번에는 예로 flex나 grid같은 박스가 취할 수 있는 그 밖의 다양한 내부 속성 값을 마주치게 될 겁니다.

+ +

그러나 블록 및 인라인 레이아웃이 웹상에 사물이 행동하는 기본값입니다. 앞서 언급했듯이 그럴 일컬어 normal flow (일반 대열) 이라고 합니다. 그렇게 부르는 까닭은 다른 지시 사항이 없으면 박스는 블록 또는 인라인 박스로 배치되기 때문입니다.

+ +

서로 다른 디스플레이 유형의 예

+ +

계속해서 몇 가지 예를 살펴보겠습니다. 아래에 우리는 세 개의 서로 다른 HTML 요소가 있으며, 모두 외부 디스플레이 유형이 block입니다. 첫 번째 단락은 CSS에 테두리가 추가된 단락입니다. 브라우저는 이걸 블록 박스로 렌더링하므로 단락은 새 줄에서 시작되며 확보된 너비 전체까지 확장할 겁니다.

+ +

두 번째는 display: flex 사용해 배치된 목록입니다. 이 예제는 컨테이너 내부의 항목에 대해 가변 레이아웃을 수립하지만, 목록 자체는 블록 박스이며 단락과 같이 전체 컨테이너 너비로 확장되어 새 줄로 행갈이를 합니다.

+ +

바로 아래에 우리는 블록 수준 단락을 하나 갖고 있으며 그 안에 두 개의 <span> 요소가 있습니다. 이들 요소는 보통 inline이겠지만, 그 중 하나에 블록 클래스에 있습니다. 우리가 그걸 미리 display: block로 설정했으니까요.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}}

+ +

우리는 다음 예제에서 inline 요소가 어떻게 동작하는지 볼 수 있습니다. 첫 번째 단락에서 <span>는 기본값으로 인라인으므로 새 줄 행갈이를 강제하지 않습니다.

+ +

display: inline-flex로 설정된 <ul> 요소도 갖고 있는데, 이는 몇 가지 가변 항목 주변에 인라인 박스를 생성합니다.

+ +

마지막으로 display: inline으로 설정된 두 단락이 있습니다. 인라인 가변 컨테이너와 단락은 모두 하나의 라인에서 하나로 진행하지 블록 수준 요소처럼 표시하기 위해 새 줄로 행갈이를 하지 않습니다.

+ +

예제에서 여러분은 display: inline 부분을 display: block으로, 또는 display: inline-flex를 display: flex로 디스플레이 모드 사이를 전환할 수 있습니다.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}}

+ +

나중에 해당 단원에서 가변 레이아웃과 같은 것들을 접하게 될 것입니다. 당장 기억해야 할 핵심은 display 속성 값을 변경하면 박스의 외부 디스플레이 유형이 블록인지 인라인인지를 변경하여, 레이아웃 속 다른 요소 주위에 자신을 표시하는 방법이 달라진다는 것입니다.

+ +

나머지 수업에서는 외부 디스플레이 유형에 집중할 것이다.

+ +

CSS Box Model이란 무엇인가?

+ +

전체 CSS box model은 블록 박스에 적용되며, 인라인 박스는 박스 모델에 정의된 일부 동작만 사용합니다. 이 모델은 당신이 페이지에서 볼 수 있는 박스를 생성하기 위해 박스의 서로 다른 부분인 여백, 테두리, 패딩 및 콘텐츠등이 어떻게 함께 작동할 것인지를 정의합니다. 몇 가지 복잡성을 추가하기 위해 표준 및 대체 박스 모델이 있습니다.

+ +

Box의 구성

+ +

CSS 블록 박스 구성하기 위한 우리의 준비물은:

+ + + +

아래 도표는 이들 레이어를 보여줍니다.

+ +

Diagram of the box model

+ +

표준 CSS box model

+ +

표준 box model에서 box에서 width와 height를 부여하면 content box의 너비와 높이가 정의됩니다. 그런 다음 패딩과 테두리는 박스의 너비와 높이에 추가되여 박스가 점유하는 전체 크기가 정해집니다. 그 내용이 아래 이미지에서 제시되었습니다.

+ +

우리는 박스의 width와 height, margin과 border 및 padding CSS 값이 다음과 같이 지정되어 있다고 간주합니다:

+ +
.box {
+  width: 350px;
+  height: 150px;
+  margin: 25px;
+  padding: 25px;
+  border: 5px solid black;
+}
+
+ +

표준 박스 모델을 사용하여 박스가 차지하는 공간은 실제로 너비 410px(350 + 25 + 25 + 5 + 5), 높이 210px(150 + 25 + 25 + 5 + 5)가 될 것인데, 양쪽 패딩과 테두리는 콘텐츠 박스에 사용되는 너비에 더해지기 때문입니다.

+ +

Showing the size of the box when the standard box model is being used.

+ +
+

참고: 여백은 박스의 실제 크기에 포함되지 않습니다. 물론 여백은 박스가 페이지에서 차지하는 총 공간에 영향을 미치지만, 박스의 외부 공간에만 영향을 미칩니다. 박스의 영역은 테두리에서 멈추게 됩니다. 여백으로 확장되지 않습니다.

+
+ +

대체 CSS box model

+ +

박스의 실제 크기를 얻기 위해 테두리와 패딩을 추가하는 것이 다소 불편하다고 생각할 수 있습니다. 당신 말이 옳을 것입니다! 이러한 이유로 CSS는 표준 박스 모델 이후 머지않아 대체 박스 모델이 도입되었습니다. 이 모델을 사용한다면 너비는 페이지에서 표시되는 박스 너비이므로 콘텐츠 영역 너비는 너비에서 패딩 및 테두리 너비를 뺀 너비입니다. 위에서 사용된 것과 동일한 CSS를 아래 결과에 대입하면(폭 = 350px, 높이 = 150px)가 됩니다.

+ +

Showing the size of the box when the alternate box model is being used.

+ +

기본값으로 브라우저는 기본 박스 모델을 사용합니다. 요소에 대체 모델을 활성화하려면 거기에 box-sizing: border-box를 설정하여 그렇게 할 수 있습니다. 이렇게 하면 당신이 설정한 크기에 따라 정의된 영역만큼 테두리 박스가 점유하도록 브라우저에 전달할 수 있습니다.

+ +
.box {
+  box-sizing: border-box;
+}
+ +

모든 요소가 대체 박스 모델을 사용하길 원한다면, (그것이 개발자들의 흔한 선택이기도 합니다) <html> 요소에 box-sizing 속성을 설정한 다음 아래의 소예제에서 볼 수 있듯이 다른 모든 요소가 해당 값을 상속하도록 설정하십시요. 이런 내용의 뒷배경이 되는 생각을 이해하고 싶다면 박스 크기에 관한 CSS 요령 문서를 참조하십시오.

+ +
html {
+  box-sizing: border-box;
+}
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+ +
+

참고: 흥미로운 기록이 있습니다. 인터넷 익스플로러는 기본적으로 대체 박스 모델로 사용되었으며 전환할 수있는 메커니즘이 없습니다.

+
+ +

박스 모델 부리기

+ +

아래 예제에서 당신은 박스 2개를 확인할 수 있습니다. 둘 다 .box 클래스에 해당하며 width, height, margin, border, padding에 대해 동일한 값이 주어졌습니다. 유일한 차이라면 두 번째 박스는 대체 박스 모델을 사용하도록 설정되었다는 겁니다.

+ +

당신은 (.alternate 클래스를 CSS에 추가해) 두 번째 박스 크기를 변경해 첫 번째 박스의 너비와 높이와 일치하도록 할 수 있습니까?

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}

+ +
+

참조: 여러분은 이곳에서 동 질문에 대한 답변을 확인할 수 있습니다..

+
+ +

브라우저 개발자도구를 사용해 박스 모델 보기

+ +

브라우저 개발자 도구를 사용하면 박스 모델을 훨씬 쉽게 이해할 수 있습니다. 파이어폭스의 개발자 도구에서 요소를 검사하면 요소의 크기와 여백, 패딩 및 테두리를 볼 수 있습니다. 이 방법으로 요소를 검사하면 실제로 그것이 당신이 생각하는 크기인지를 알아낼 수 있어 좋은 방법입니다.

+ +

Inspecting the box model of an element using Firefox DevTools

+ +

여백과 패딩과 테두리

+ +

상술한 예제에서 여러분은 이미 {{cssxref("margin")}}과 {{cssxref("padding")}}, 그리고 {{cssxref("border")}}를 보았습니다. 이번 예제에서 사용된 속성은 약칭(shorthands)으로 한꺼번에 박스의 사방면을 설정할 수 있게 해줍니다. 해당 약칭은 또한 동명의 정식 명칭 속성도 있어 박스의 사방면을 개별적으로 제어할 수 있도록 해줍니다.

+ +

해당 속성에 대한 자세한 내용을 탐구해 봅시다.

+ +

여백

+ +

여백은 박스 주변에 보이지 않는 공간입니다. 여백은 박스로부터 다른 요소를 밀어냅니다. 여백은 양수값 또는 음수값을 가질 수 있습니다. 박스 한쪽 측면에 음수값 여백을 설정하면 페이지의 다른 부분과 공백이 겹칠 수 있습니다. 여러분이 표준 또는 대체 박스 모델을 사용하든지 관계없이 표시되는 박스의 크기를 계산한 후에 항상 여백이 추가됩니다.

+ +

우리는 {{cssxref("margin")}} 속성을 사용하여 요소의 사방 여백을 한번에 제어할 수 있으며, 마찬가지로 동명의 정식 명칭 속성을 사용하며 각변의 여백을 제어할 수 있습니다.

+ + + +

아래 예제에서 여백 값을 변경하여 당 요소와 상위 컨테이너 요소 사이의 여백 생성 또는 공간 제거(음의 여백인 경우)로 인해 박스가 어떻게 밀려나는지 확인하십시오.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}}

+ +

여백 축소

+ +

여백 이해의 핵심은 여백 축소에 대한 개념입니다. 여백이 서로 맞닿은 두 개의 요소가 있으면 해당 여백은 합쳐져 하나의 여백이 됩니다. 그 중 가장 큰 여백의 크기가 됩니다.

+ +

아래 예제에는 단락 두 개가 있습니다. 상위 단락은 margin-bottom 값이 50픽셀이 주어졌습니다. 두 번째 단락은 margin-top 값이 30픽셀이 주어졌습니다. 전체 여백은 합쳐져 축소되면서 실제 박스 사이 여백은 50픽셀이며, 두 가지 여백을 합계가 되지 않습니다.

+ +

여러분은 2번째 단락의 margin-top 값을 0으로 설정해 이를 시험해 볼 수 있습니다. 두 단락 사이 표시되는 여백은 변경되지 않을 것이며, 첫 번째 단락의 bottom-margin에 설정된 50픽셀은 유지됩니다.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}}

+ +

여백이 축소될 때와 축소되지 않을 때를 말해주는 여러 가지 규칙이 있습니다. 자세한 내용은 여백 축소 정복에 대한 자세한 페이지를 참조하십시오. 당장 기억해야 할 주안점은 마진 축소란 것이 벌어지고 있다는 점이다. 여백이 있는 공간을 생성하고도 여러분이 기대하는 만큼의 공간을 얻지 못한다면, 아마도 그것은 여백 축소 현상일 것입니다.

+ +

테두리

+ +

테두리는 박스의 여백과 패딩 사이에 그려집니다. 표준 박스 모델을 사용하는 경우 테두리의 크기가 박스의 width과 height에 추가됩니다. 대체 박스 모델을 사용하고 있는 경우, 테두리의 크기는 사용 가능한 width와 height의 일부를 점유함으로 콘텐츠 박스가 더 작아지게 됩니다.

+ +

테두리를 스타일링의 경우 많은 속성이 있습니다. 4개의 테두리, 각 테두리에는 스타일, 너비 및 색상 등 당신이 변경하고 싶을만한 것들이 있습니다.

+ +

당산은 당장에 {{cssxref("border")}} 속성을 사용해 4개의 테두리 스타일과 너비, 색상을 지정할 수 있습니다.

+ +

테두리 사방면에 각각 너비와 색상, 스타일을 설정할 수 있습니다:

+ + + +

테두리 사방면에 색상, 스타일, 너비를 설정하려면 다음과 같이 사용하십시요:

+ + + +

테두리 일방 면만 색상과 스타일, 너비를 설정하려면 세분화된 정식명칙 속성 중의 하나를 사용할 수 있습니다.

+ + + +

아래 예제에서 테두리를 생성하기 위해 다양한 약칭과 정식 명칭을 사용했습니다. 그것들의 작동 방식을 파악하기 위해 서로 다른 속성을 마음대로 부려보십시요. 테두리 속성에 대한 모질라 개발자 네트워크 페이지 페이지는 당신이 선택할 수 있는 다양한 테두리 스타일에 대한 정보를 제공합니다.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}}

+ +

패딩

+ +

패딩은 테두리와 콘텐츠 영역 사이에 위치합니다. 여백과는 다르게 패딩은 음수의 크기를 가질 수 없어, 그 값은 0 또는 양수 값이여야 합니다. 여러분의 요소에 적용된 배경은 패딩 뒤에 표시됩니다.패딩의 전형적인 용도는 테두리에서 콘텐츠를 밀어내는 겁니다.

+ +

우리는 {{cssxref("padding")}} 속성을 사용하여 요소의 사방면 패딩을 개별적으로 제어할 수 있으며, 마찬가지로 정식 명칭 속성을 사용하며 각변의 패딩을 제어할 수 있습니다.

+ + + +

아래 예제에서 .box클래스에 대한 패딩값을 변경하면 박스와 관계하여 텍스트가 시작되는 지점이 달라지는지 볼 수 있습니다.

+ +

여러분은 또한 .container, 클래스에 대한 패딩을 변경하여 컨테이너와 박스 사이 공간을 만들 수 있습니다. 패딩 변경은 모든 요소에 가능하며 테두리와 요소 내부 공간 사이에 공간을 만듭니다.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}}

+ +

박스 모델과 인라인 박스

+ +

상술한 모든 내용은 블록 박스에도 100% 적용됩니다. 상술한 속성 중의 일부는 인라인 박스에도 적용할 수 있습니다. 예를 들어 <span>에 의해 생성된 속성도 그렇습니다.

+ +

아래 예제에 한 단락 내부에 <span>가 있고 거기에 width와 height, 그리고 margin와 border를 적용했습니다. 여러분이 보시다시피 너비와 높이는 무시됩니다. 여백, 패딩 및 테두리는 존치되지만 다른 콘텐츠와 인라인 박스아의 관계를 변경하지 않으므로 패딩 및 테두리는 단락의 다른 단어와 겹칩니다.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}}

+ +

인라인 블록 디스플레이 사용하기

+ +

inline와 block 사이 중립 지대를 제공하는 display 속성의 하나로 특별한 값이 있습니다. 이 속성은 항목이 새 줄로 넘어가는 행갈이를 원치않지만, width와 height가 존중되고 앞서 보았듯이 겹침 현상을 피하길 원하는 경우에 유용합니다.

+ +

display: inline-block 속성이 딸린 요소는 우리가 이미 파악했던 것 블록 요소의 하위 집합입니다.

+ + + +

그러나 새 줄로 행갈이를 하지 않고, width와 height 속성을 명시적으로 추가하는 경우에만 해당 요소의 콘텐츠보다 (동 박스가) 더 커질 뿐입니다.

+ +

다음 예제에서 우리는 <span> 요소에 display: inline-block를 추가했습니다. 스팬 요소 속성을 display: block로 변경하던가 추가했던 라인을 제거한 뒤 디스플레이 모델의 차이를 확인해 보십시요.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}}

+ +

여러분이 padding를 추가해 링크에 적중 영역을 확대하길 원하는 경우 이것이 유용할 수 있습니다. <a>는 <span>처럼 인라인 요소입니다. 여러분은 해당 요소에 display: inline-block을 사용해 패딩을 설정할 수 있으므로 사용자가 링크를 클릭할 수 있습니다.

+ +

탐색 (메뉴)모음에서 꽤 자주 사용되는 것을 볼겁니다. 아래 탐색 모음은 가변박스를 사용해 행으로 표시되었으며, <a>를 마우스로 가리킬 때 background-color를 변경할 수 있도록 <a> 요소에 패딩 추기했습니다. 패딩은 <ul> 요소의 테두리와 겹치는 것처럼 보입니다. 그렇게 된 까닭은 <a>가 인라인 요소이기 때문입니다.

+ +

.links-list a 선택기에 딸린 규칙에 display: inline-block를 추가하면, 다른 요소에 의한 패딩이 존중되므로 여러분은 이(겹치는) 문제가 해결되는 것을 보게될 것입니다.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}}

+ +

요약정리

+ +

박스 모델에 대해 이해해야 할 내용의 대부분입니다. 박스들이 레이아웃에 어떻게 포함된 것인지 혼란스러워지면, 향후 여러분은 이번 단원을 다시 찾게을 수 있습니다.

+ +

다음 단원에서는 배경과 테두리를 사용하여 평범한 보이는 박스를 더욱 흥미롭게 보이려면 어떤 방법이 있는지 살펴보겠습니다.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}

+ +

이번 단위에는

+ +
    +
  1. 계단식 나열과 상속
    2. +
  2. CSS 선택기 + +
    3. +
  3. 박스 모델
    4. +
  4. 배경 및 테두리
    5. +
  5. 서로 다른 텍스트 방향 처리
    6. +
  6. 대열이탈 콘텐츠
    7. +
  7. 속성값과 단위
    8. +
  8. CSS 항목 크기 설정
    9. +
  9. 이미지와 미디아, 양식 요소
    10. +
  10. 테이블 스타일링
    11. +
  11. CSS 디버깅
    12. +
  12. CSS 체계화
    13. +
diff --git "a/files/ko/learn/css/building_blocks/\354\203\201\354\236\220_\353\252\250\353\215\270/index.html" "b/files/ko/learn/css/building_blocks/\354\203\201\354\236\220_\353\252\250\353\215\270/index.html" deleted file mode 100644 index eec5f2b929..0000000000 --- "a/files/ko/learn/css/building_blocks/\354\203\201\354\236\220_\353\252\250\353\215\270/index.html" +++ /dev/null @@ -1,347 +0,0 @@ ---- -title: 상자 모델 -slug: Learn/CSS/Building_blocks/상자_모델 -tags: - - CSS - - 디스플레이 - - 상자 모델 - - 여백 - - 초보자 - - 테두리 - - 패딩 - - 학습 -translation_of: Learn/CSS/Building_blocks/The_box_model ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
- -

CSS에 포함되는 모든 요소의 외장은 박스이며, 이 박스를 이해하는 것은 CSS을 통해 레이아웃을 생성하거나, 아이템과 다른 아이템을 정렬하는 것을 가능하게 하는 열쇠입니다. 이번 단원에서 우리는 CSS 박스모델을 제대로 살펴보겠습니다. 박스의 작동 방식과 박스와 관련된 용어를 이해함으로써 더 복잡한 레이아웃 작업으로 넘어갈 수 있도록합니다.

- - - - - - - - - - - - -
선결 사항:기본 컴퓨터 활용 능력기본 소프트웨어 설치, 파일 작업에 대한 기본 지식, HTML 기본기 (HTML 학습), CSS 작동 방식에 대한 개념 (CSS 첫 단계 학습.) 등에 대한 기본 지식
목표:CSS 박스 모델, 박스 모델을 구성하고 대체 모델로 전환하는 방법에 대해 학습합니다.
- -

블록 및 인라인 박스

- -

CSS에는 크게 두 가지 박스(블록 박스와 인라인 박스) 유형이 있습니다. 이러한 특성은 박스가 페이지 대열 측면 및 페이지의 다른 박스와 관련하여 박스의 작동 방식을 나타냅니다.

- -

박스가 블록으로 정의되면 다음과 같은 방식으로 동작합니다:

- - - -

여러분이 디스플레이 유형은 인라인으로 변경하지 않는 한 머리글(<h1>)과 <p>)와 같은 요소는 모두 기본값으로 외부 디스플레이 유형을 block 사용합니다.

- -

박스의 외부 디스플레이 유형이 inline일 경우:

- - - -

링크용 <a> 요소와 <span>, <em> 및 <strong> 요소는 모두 기본적으로 인라인으로 표시됩니다.

- -

요소에 적용되는 박스 유형은 block 및 inline과 같은 {{cssxref("display")}} 속성 값으로 정의되며. 아울러 그것은 display의 outer 값과 관련이 있습니다.

- -

구분: 내부 및 외부 디스플레이 유형

- -

이 시점에 우리는 내부 및 외부 디스플레이 유형에 대해 설명하는 게 좋겠습니다. 위에서 언급했듯이 CSS의 박스는 외부 디스플레이 유형을 가지며, 이는 박스가 블록인지 인라인인지를 자세히 설명합니다.

- -

그러나 박스에는 내부 디스플레이 유형도 있으며 당 박스 내부의 요소가 배치되는 방법을 나타냅니다. 기본적으로 박스 내부의 요소는 일반 대열로 배치되며, 이는 (위에서 설명한 바와 같이) 여타 블록 및 인라인 요소와 마찬가지로 작동한다는 것을 의미합니다.

- -

그러나 여러분은 flex과 같은 display 값을 사용하여 내부 디스플레이 유형을 변경할 수 있습니다. 어떤 요소에 우리가 display: flex;를 설정하면 외부 디스플레이 유형은 블록이지만 내부 디스플레이 유형은 flex (가변) 으로 변경됩니다. 이 박스의 직계 자식은 가변 항목이 되고, 나중에 익히게 될 가변박스 규격에 명시된 규칙에 따라 배치됩니다.

- -
-

참고: 디스플레이 속성 값 및 박스가 블록 및 인라인 레이아웃에서 작동하는 방법에 대해 자세히 보려면 블록 및 인라인 레이아웃에 대한 모질라 개발자 네트워크 가이드를 참조하십시오.

-
- -

CSS 레이아웃에 대해 자세한 내용을 배우려면 다음번에는 예로 flex나 grid같은 박스가 취할 수 있는 그 밖의 다양한 내부 속성 값을 마주치게 될 겁니다.

- -

그러나 블록 및 인라인 레이아웃이 웹상에 사물이 행동하는 기본값입니다. 앞서 언급했듯이 그럴 일컬어 normal flow (일반 대열) 이라고 합니다. 그렇게 부르는 까닭은 다른 지시 사항이 없으면 박스는 블록 또는 인라인 박스로 배치되기 때문입니다.

- -

서로 다른 디스플레이 유형의 예

- -

계속해서 몇 가지 예를 살펴보겠습니다. 아래에 우리는 세 개의 서로 다른 HTML 요소가 있으며, 모두 외부 디스플레이 유형이 block입니다. 첫 번째 단락은 CSS에 테두리가 추가된 단락입니다. 브라우저는 이걸 블록 박스로 렌더링하므로 단락은 새 줄에서 시작되며 확보된 너비 전체까지 확장할 겁니다.

- -

두 번째는 display: flex 사용해 배치된 목록입니다. 이 예제는 컨테이너 내부의 항목에 대해 가변 레이아웃을 수립하지만, 목록 자체는 블록 박스이며 단락과 같이 전체 컨테이너 너비로 확장되어 새 줄로 행갈이를 합니다.

- -

바로 아래에 우리는 블록 수준 단락을 하나 갖고 있으며 그 안에 두 개의 <span> 요소가 있습니다. 이들 요소는 보통 inline이겠지만, 그 중 하나에 블록 클래스에 있습니다. 우리가 그걸 미리 display: block로 설정했으니까요.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}}

- -

우리는 다음 예제에서 inline 요소가 어떻게 동작하는지 볼 수 있습니다. 첫 번째 단락에서 <span>는 기본값으로 인라인으므로 새 줄 행갈이를 강제하지 않습니다.

- -

display: inline-flex로 설정된 <ul> 요소도 갖고 있는데, 이는 몇 가지 가변 항목 주변에 인라인 박스를 생성합니다.

- -

마지막으로 display: inline으로 설정된 두 단락이 있습니다. 인라인 가변 컨테이너와 단락은 모두 하나의 라인에서 하나로 진행하지 블록 수준 요소처럼 표시하기 위해 새 줄로 행갈이를 하지 않습니다.

- -

예제에서 여러분은 display: inline 부분을 display: block으로, 또는 display: inline-flex를 display: flex로 디스플레이 모드 사이를 전환할 수 있습니다.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}}

- -

나중에 해당 단원에서 가변 레이아웃과 같은 것들을 접하게 될 것입니다. 당장 기억해야 할 핵심은 display 속성 값을 변경하면 박스의 외부 디스플레이 유형이 블록인지 인라인인지를 변경하여, 레이아웃 속 다른 요소 주위에 자신을 표시하는 방법이 달라진다는 것입니다.

- -

나머지 수업에서는 외부 디스플레이 유형에 집중할 것이다.

- -

CSS Box Model이란 무엇인가?

- -

전체 CSS box model은 블록 박스에 적용되며, 인라인 박스는 박스 모델에 정의된 일부 동작만 사용합니다. 이 모델은 당신이 페이지에서 볼 수 있는 박스를 생성하기 위해 박스의 서로 다른 부분인 여백, 테두리, 패딩 및 콘텐츠등이 어떻게 함께 작동할 것인지를 정의합니다. 몇 가지 복잡성을 추가하기 위해 표준 및 대체 박스 모델이 있습니다.

- -

Box의 구성

- -

CSS 블록 박스 구성하기 위한 우리의 준비물은:

- - - -

아래 도표는 이들 레이어를 보여줍니다.

- -

Diagram of the box model

- -

표준 CSS box model

- -

표준 box model에서 box에서 width와 height를 부여하면 content box의 너비와 높이가 정의됩니다. 그런 다음 패딩과 테두리는 박스의 너비와 높이에 추가되여 박스가 점유하는 전체 크기가 정해집니다. 그 내용이 아래 이미지에서 제시되었습니다.

- -

우리는 박스의 width와 height, margin과 border 및 padding CSS 값이 다음과 같이 지정되어 있다고 간주합니다:

- -
.box {
-  width: 350px;
-  height: 150px;
-  margin: 25px;
-  padding: 25px;
-  border: 5px solid black;
-}
-
- -

표준 박스 모델을 사용하여 박스가 차지하는 공간은 실제로 너비 410px(350 + 25 + 25 + 5 + 5), 높이 210px(150 + 25 + 25 + 5 + 5)가 될 것인데, 양쪽 패딩과 테두리는 콘텐츠 박스에 사용되는 너비에 더해지기 때문입니다.

- -

Showing the size of the box when the standard box model is being used.

- -
-

참고: 여백은 박스의 실제 크기에 포함되지 않습니다. 물론 여백은 박스가 페이지에서 차지하는 총 공간에 영향을 미치지만, 박스의 외부 공간에만 영향을 미칩니다. 박스의 영역은 테두리에서 멈추게 됩니다. 여백으로 확장되지 않습니다.

-
- -

대체 CSS box model

- -

박스의 실제 크기를 얻기 위해 테두리와 패딩을 추가하는 것이 다소 불편하다고 생각할 수 있습니다. 당신 말이 옳을 것입니다! 이러한 이유로 CSS는 표준 박스 모델 이후 머지않아 대체 박스 모델이 도입되었습니다. 이 모델을 사용한다면 너비는 페이지에서 표시되는 박스 너비이므로 콘텐츠 영역 너비는 너비에서 패딩 및 테두리 너비를 뺀 너비입니다. 위에서 사용된 것과 동일한 CSS를 아래 결과에 대입하면(폭 = 350px, 높이 = 150px)가 됩니다.

- -

Showing the size of the box when the alternate box model is being used.

- -

기본값으로 브라우저는 기본 박스 모델을 사용합니다. 요소에 대체 모델을 활성화하려면 거기에 box-sizing: border-box를 설정하여 그렇게 할 수 있습니다. 이렇게 하면 당신이 설정한 크기에 따라 정의된 영역만큼 테두리 박스가 점유하도록 브라우저에 전달할 수 있습니다.

- -
.box {
-  box-sizing: border-box;
-}
- -

모든 요소가 대체 박스 모델을 사용하길 원한다면, (그것이 개발자들의 흔한 선택이기도 합니다) <html> 요소에 box-sizing 속성을 설정한 다음 아래의 소예제에서 볼 수 있듯이 다른 모든 요소가 해당 값을 상속하도록 설정하십시요. 이런 내용의 뒷배경이 되는 생각을 이해하고 싶다면 박스 크기에 관한 CSS 요령 문서를 참조하십시오.

- -
html {
-  box-sizing: border-box;
-}
-*, *::before, *::after {
-  box-sizing: inherit;
-}
- -
-

참고: 흥미로운 기록이 있습니다. 인터넷 익스플로러는 기본적으로 대체 박스 모델로 사용되었으며 전환할 수있는 메커니즘이 없습니다.

-
- -

박스 모델 부리기

- -

아래 예제에서 당신은 박스 2개를 확인할 수 있습니다. 둘 다 .box 클래스에 해당하며 width, height, margin, border, padding에 대해 동일한 값이 주어졌습니다. 유일한 차이라면 두 번째 박스는 대체 박스 모델을 사용하도록 설정되었다는 겁니다.

- -

당신은 (.alternate 클래스를 CSS에 추가해) 두 번째 박스 크기를 변경해 첫 번째 박스의 너비와 높이와 일치하도록 할 수 있습니까?

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}

- -
-

참조: 여러분은 이곳에서 동 질문에 대한 답변을 확인할 수 있습니다..

-
- -

브라우저 개발자도구를 사용해 박스 모델 보기

- -

브라우저 개발자 도구를 사용하면 박스 모델을 훨씬 쉽게 이해할 수 있습니다. 파이어폭스의 개발자 도구에서 요소를 검사하면 요소의 크기와 여백, 패딩 및 테두리를 볼 수 있습니다. 이 방법으로 요소를 검사하면 실제로 그것이 당신이 생각하는 크기인지를 알아낼 수 있어 좋은 방법입니다.

- -

Inspecting the box model of an element using Firefox DevTools

- -

여백과 패딩과 테두리

- -

상술한 예제에서 여러분은 이미 {{cssxref("margin")}}과 {{cssxref("padding")}}, 그리고 {{cssxref("border")}}를 보았습니다. 이번 예제에서 사용된 속성은 약칭(shorthands)으로 한꺼번에 박스의 사방면을 설정할 수 있게 해줍니다. 해당 약칭은 또한 동명의 정식 명칭 속성도 있어 박스의 사방면을 개별적으로 제어할 수 있도록 해줍니다.

- -

해당 속성에 대한 자세한 내용을 탐구해 봅시다.

- -

여백

- -

여백은 박스 주변에 보이지 않는 공간입니다. 여백은 박스로부터 다른 요소를 밀어냅니다. 여백은 양수값 또는 음수값을 가질 수 있습니다. 박스 한쪽 측면에 음수값 여백을 설정하면 페이지의 다른 부분과 공백이 겹칠 수 있습니다. 여러분이 표준 또는 대체 박스 모델을 사용하든지 관계없이 표시되는 박스의 크기를 계산한 후에 항상 여백이 추가됩니다.

- -

우리는 {{cssxref("margin")}} 속성을 사용하여 요소의 사방 여백을 한번에 제어할 수 있으며, 마찬가지로 동명의 정식 명칭 속성을 사용하며 각변의 여백을 제어할 수 있습니다.

- - - -

아래 예제에서 여백 값을 변경하여 당 요소와 상위 컨테이너 요소 사이의 여백 생성 또는 공간 제거(음의 여백인 경우)로 인해 박스가 어떻게 밀려나는지 확인하십시오.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}}

- -

여백 축소

- -

여백 이해의 핵심은 여백 축소에 대한 개념입니다. 여백이 서로 맞닿은 두 개의 요소가 있으면 해당 여백은 합쳐져 하나의 여백이 됩니다. 그 중 가장 큰 여백의 크기가 됩니다.

- -

아래 예제에는 단락 두 개가 있습니다. 상위 단락은 margin-bottom 값이 50픽셀이 주어졌습니다. 두 번째 단락은 margin-top 값이 30픽셀이 주어졌습니다. 전체 여백은 합쳐져 축소되면서 실제 박스 사이 여백은 50픽셀이며, 두 가지 여백을 합계가 되지 않습니다.

- -

여러분은 2번째 단락의 margin-top 값을 0으로 설정해 이를 시험해 볼 수 있습니다. 두 단락 사이 표시되는 여백은 변경되지 않을 것이며, 첫 번째 단락의 bottom-margin에 설정된 50픽셀은 유지됩니다.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}}

- -

여백이 축소될 때와 축소되지 않을 때를 말해주는 여러 가지 규칙이 있습니다. 자세한 내용은 여백 축소 정복에 대한 자세한 페이지를 참조하십시오. 당장 기억해야 할 주안점은 마진 축소란 것이 벌어지고 있다는 점이다. 여백이 있는 공간을 생성하고도 여러분이 기대하는 만큼의 공간을 얻지 못한다면, 아마도 그것은 여백 축소 현상일 것입니다.

- -

테두리

- -

테두리는 박스의 여백과 패딩 사이에 그려집니다. 표준 박스 모델을 사용하는 경우 테두리의 크기가 박스의 width과 height에 추가됩니다. 대체 박스 모델을 사용하고 있는 경우, 테두리의 크기는 사용 가능한 width와 height의 일부를 점유함으로 콘텐츠 박스가 더 작아지게 됩니다.

- -

테두리를 스타일링의 경우 많은 속성이 있습니다. 4개의 테두리, 각 테두리에는 스타일, 너비 및 색상 등 당신이 변경하고 싶을만한 것들이 있습니다.

- -

당산은 당장에 {{cssxref("border")}} 속성을 사용해 4개의 테두리 스타일과 너비, 색상을 지정할 수 있습니다.

- -

테두리 사방면에 각각 너비와 색상, 스타일을 설정할 수 있습니다:

- - - -

테두리 사방면에 색상, 스타일, 너비를 설정하려면 다음과 같이 사용하십시요:

- - - -

테두리 일방 면만 색상과 스타일, 너비를 설정하려면 세분화된 정식명칙 속성 중의 하나를 사용할 수 있습니다.

- - - -

아래 예제에서 테두리를 생성하기 위해 다양한 약칭과 정식 명칭을 사용했습니다. 그것들의 작동 방식을 파악하기 위해 서로 다른 속성을 마음대로 부려보십시요. 테두리 속성에 대한 모질라 개발자 네트워크 페이지 페이지는 당신이 선택할 수 있는 다양한 테두리 스타일에 대한 정보를 제공합니다.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}}

- -

패딩

- -

패딩은 테두리와 콘텐츠 영역 사이에 위치합니다. 여백과는 다르게 패딩은 음수의 크기를 가질 수 없어, 그 값은 0 또는 양수 값이여야 합니다. 여러분의 요소에 적용된 배경은 패딩 뒤에 표시됩니다.패딩의 전형적인 용도는 테두리에서 콘텐츠를 밀어내는 겁니다.

- -

우리는 {{cssxref("padding")}} 속성을 사용하여 요소의 사방면 패딩을 개별적으로 제어할 수 있으며, 마찬가지로 정식 명칭 속성을 사용하며 각변의 패딩을 제어할 수 있습니다.

- - - -

아래 예제에서 .box클래스에 대한 패딩값을 변경하면 박스와 관계하여 텍스트가 시작되는 지점이 달라지는지 볼 수 있습니다.

- -

여러분은 또한 .container, 클래스에 대한 패딩을 변경하여 컨테이너와 박스 사이 공간을 만들 수 있습니다. 패딩 변경은 모든 요소에 가능하며 테두리와 요소 내부 공간 사이에 공간을 만듭니다.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}}

- -

박스 모델과 인라인 박스

- -

상술한 모든 내용은 블록 박스에도 100% 적용됩니다. 상술한 속성 중의 일부는 인라인 박스에도 적용할 수 있습니다. 예를 들어 <span>에 의해 생성된 속성도 그렇습니다.

- -

아래 예제에 한 단락 내부에 <span>가 있고 거기에 width와 height, 그리고 margin와 border를 적용했습니다. 여러분이 보시다시피 너비와 높이는 무시됩니다. 여백, 패딩 및 테두리는 존치되지만 다른 콘텐츠와 인라인 박스아의 관계를 변경하지 않으므로 패딩 및 테두리는 단락의 다른 단어와 겹칩니다.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}}

- -

인라인 블록 디스플레이 사용하기

- -

inline와 block 사이 중립 지대를 제공하는 display 속성의 하나로 특별한 값이 있습니다. 이 속성은 항목이 새 줄로 넘어가는 행갈이를 원치않지만, width와 height가 존중되고 앞서 보았듯이 겹침 현상을 피하길 원하는 경우에 유용합니다.

- -

display: inline-block 속성이 딸린 요소는 우리가 이미 파악했던 것 블록 요소의 하위 집합입니다.

- - - -

그러나 새 줄로 행갈이를 하지 않고, width와 height 속성을 명시적으로 추가하는 경우에만 해당 요소의 콘텐츠보다 (동 박스가) 더 커질 뿐입니다.

- -

다음 예제에서 우리는 <span> 요소에 display: inline-block를 추가했습니다. 스팬 요소 속성을 display: block로 변경하던가 추가했던 라인을 제거한 뒤 디스플레이 모델의 차이를 확인해 보십시요.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}}

- -

여러분이 padding를 추가해 링크에 적중 영역을 확대하길 원하는 경우 이것이 유용할 수 있습니다. <a>는 <span>처럼 인라인 요소입니다. 여러분은 해당 요소에 display: inline-block을 사용해 패딩을 설정할 수 있으므로 사용자가 링크를 클릭할 수 있습니다.

- -

탐색 (메뉴)모음에서 꽤 자주 사용되는 것을 볼겁니다. 아래 탐색 모음은 가변박스를 사용해 행으로 표시되었으며, <a>를 마우스로 가리킬 때 background-color를 변경할 수 있도록 <a> 요소에 패딩 추기했습니다. 패딩은 <ul> 요소의 테두리와 겹치는 것처럼 보입니다. 그렇게 된 까닭은 <a>가 인라인 요소이기 때문입니다.

- -

.links-list a 선택기에 딸린 규칙에 display: inline-block를 추가하면, 다른 요소에 의한 패딩이 존중되므로 여러분은 이(겹치는) 문제가 해결되는 것을 보게될 것입니다.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}}

- -

요약정리

- -

박스 모델에 대해 이해해야 할 내용의 대부분입니다. 박스들이 레이아웃에 어떻게 포함된 것인지 혼란스러워지면, 향후 여러분은 이번 단원을 다시 찾게을 수 있습니다.

- -

다음 단원에서는 배경과 테두리를 사용하여 평범한 보이는 박스를 더욱 흥미롭게 보이려면 어떤 방법이 있는지 살펴보겠습니다.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}

- -

이번 단위에는

- -
    -
  1. 계단식 나열과 상속
    2. -
  2. CSS 선택기 - -
    3. -
  3. 박스 모델
    4. -
  4. 배경 및 테두리
    5. -
  5. 서로 다른 텍스트 방향 처리
    6. -
  6. 대열이탈 콘텐츠
    7. -
  7. 속성값과 단위
    8. -
  8. CSS 항목 크기 설정
    9. -
  9. 이미지와 미디아, 양식 요소
    10. -
  10. 테이블 스타일링
    11. -
  11. CSS 디버깅
    12. -
  12. CSS 체계화
    13. -
diff --git "a/files/ko/learn/css/building_blocks/\354\204\240\355\203\235\354\236\220/index.html" "b/files/ko/learn/css/building_blocks/\354\204\240\355\203\235\354\236\220/index.html" deleted file mode 100644 index 274653da91..0000000000 --- "a/files/ko/learn/css/building_blocks/\354\204\240\355\203\235\354\236\220/index.html" +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: CSS 선택자 -slug: Learn/CSS/Building_blocks/선택자 -translation_of: Learn/CSS/Building_blocks/Selectors ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
- -

{{Glossary("CSS")}} 에서, 선택자는 스타일을 지정할 웹 페이지의 {{glossary("HTML")}} 요소를 대상으로 하는 데 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합니다. 이 기사와 하위 기사에서는 다양한 유형을 자세히 살펴보고 작동 방식을 살펴보겠습니다.

- - - - - - - - - - - - -
전제조건:기본 컴퓨터 활용 능력, 기본 소프트웨어 설치, 파일 작업 에 대한 기본 지식, HTML 기본 사항 (HTML 소개 학습) 및 CSS 작동 방식에 대한 이해 (CSS 첫 단계 학습)
목적:CSS 선태자 작동 방식에 대해 자세히 알아보기.
- -

선택자란 무엇인가?

- -

우리는 이미 선택자 (selector) 를 만났습니다. CSS 선택자는 CSS 규칙의 첫 부분입니다. 규칙 내의 CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다. 선택자에 의해 선택된 요소들은 선택자의 주제(subject) 로 지칭됩니다.

- -

Some code with the h1 highlighted.

- -

이전 기사에서는 몇 가지 다른 선택자를 만났으며 — 예를 들어 h1 과 같은 요소 또는 .special 과 같은 class 를 선택하는 등 다양한 방법으로 문서를 대상으로 하는 선택자가 있다는 것을 배웠습니다.

- -

CSS 에서, 선택자는 CSS 선택자 사양에 정의되어 있습니다. CSS 의 다른 부분과 마찬가지로 작동하려면, 브라우저에서 지원해야합니다. 당신이 보게 될 대부분의 선택자는 Level 3 선택자 사양 에 정의되어 있으므로, 이러한 선택자에 대한 훌륭한 브라우저 지원을 찾을 수 있습니다.

- -

선택자 목록

- -

동일한 CSS 를 사용하는 항목이 두 개 이상인 경우 규칙이 모든 개별 선택자에 적용되도록 개별 선택자를 선택자 목록 으로 결합할 수 있습니다. 예를 들어, h1 에 대해 동일한 CSS 와 special class 를 사용하면 이것을 두 개의 별도 규칙으로 작성할 수 있습니다.

- -
h1 {
-  color: blue;
-}
-
-.special {
-  color: blue;
-}
- -

또한 이들 사이에 쉼표를 추가하여 선택자 목록으로 결합할 수도 있습니다.

- -
h1, .special {
-  color: blue;
-}
- -

공백은 쉼표 앞뒤에 유효합니다. 각 라인이 새 라인에 있으면 선택자를 더 읽기 쉽습니다.

- -
h1,
-.special {
-  color: blue;
-}
- -

아래 라이브 예제에서 동일한 선언을 가진 두 선택자를 결합 하십시오. 시각적 디스플레이는 결합 후 동일해야 합니다.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

- -

이러한 방식으로 선택자를 그룹화할 때, 선택자가 유효하지 않은 경우 전체 규칙이 무시됩니다.

- -

다음 예에서는, 잘못된 class 선택자 규칙이 무시되고 h1 은 여전히 스타일이 지정됩니다.

- -
h1 {
-  color: blue;
-}
-
-..special {
-  color: blue;
-}
- -

그러나 결합하면, 전체 규칙이 유효하지 않은 것으로 간주되어 h1 또는 class 가 스타일 지정되지 않습니다.

- -
h1, ..special {
-  color: blue;
-}
- -

선택자의 유형

- -

선택자에는 몇 가지 그룹이 있으며, 어떤 유형의 선택자가 필요한지 알면 작업에 적합한 도구를 찾는데 도움이 됩니다. 이 기사의 하위 기사에서는 다양한 선택자 그룹을 자세히 살펴 보겠습니다.

- -

Type, class 및 ID 선택자

- -

이 그룹에는 <h1> 과 같은 HTML 요소를 대상으로 하는 선택자가 포함됩니다.

- -
h1 { }
- -

또한 class 를 대상으로 하는 선택자가 포함됩니다:

- -
.box { }
- -

또는 ID:

- -
#unique { }
- -

속성 선택자

- -

이 선택자 그룹은 요소에 특정 속성이 있는지에 따라 요소를  선택하는 다른 방법을 제공합니다:

- -
a[title] { }
- -

또는 특정 값을 가진 속성의 존재 여부를 기반으로 선택하십시오:

- -
a[href="https://example.com"] { }
- -

Pseudo-classes 및 pseudo-elements

- -

이 선택자 그룹에는 요소의 특정 상태를 스타일링하는 pseudo-classes 가 포함됩니다. 예를 들어 :hover pseudo-class 는 마우스 포인터에 의해 요소를 가리킬 때만 요소를 선택합니다:

- -
a:hover { }
- -

또한 요소 자체가 아닌 요소의 특정 부분을 선택하는 pseudo-elements 도 포함됩니다. 예를 들어, ::first-line 은 항상 <span> 이 첫 번째 형식의 라인을 감싸는 것처럼 작동하여, 요소 내부의 첫 번째 텍스트 라인 (아래의 경우 <p>) 을 선택합니다.

- -
p::first-line { }
- -

결합자 (Combinators)

- -

최종 선택자 그룹은 문서 내의 요소를 대상으로 하기 위해 다른 선택자를 결합합니다. 예를 들어 다음은 자식 결합자 (>) 를 사용하여 <article> 요소의 자식인 단락을 선택합니다:

- -
article > p { }
- -

다음 단계

- -

이 학습 섹션 또는 일반적으로 MDN 에서 다양한 유형의 선택자로 직접 연결되는 링크에 대해서는 아래의 선택자 참조 표를 참고하거나 type, class 및 ID 선택자 에 대해 계속해서 여행을 시작하십시오.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

- -

선택자 참조 표

- -

아래 표는 사용 가능한 선택자의 개요와 이 안내서의 페이지에 대한 링크와 함께 각 유형의 선택자 사용법을 보여줍니다. 브라우저 지원 정보를 확인할 수 있는 각 선택자의 MDN 페이지에 대한 링크도 포함되어 있습니다. 이 자료를 나중에 자료에서 선택자를 찾아 보거나, CSS 를 일반적으로 실험할 때 다시 참조할 수 있습니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
선택자예제CSS 자습서 배우기
Type 선택자h1 {  }Type selectors
범용 선택자* {  }The universal selector
Class 선택자.box {  }Class selectors
id 선택자#unique { }ID selectors
속성 선택자a[title] {  }Attribute selectors
Pseudo-class 선택자p:first-child { }Pseudo-classes
Pseudo-element 선택자p::first-line { }Pseudo-elements
하위 결합자article pDescendant combinator
자식 결합자article > pChild combinator
인접 형제 결합자h1 + pAdjacent sibling
일반 형제 결합자h1 ~ pGeneral sibling
- -

이번 강의에서는

- -
    -
  1. 계단식 및 상속
    2. -
  2. CSS 선택자 - -
    3. -
  3. 박스 모델
    4. -
  4. 배경 및 테두리
    5. -
  5. 다른 텍스트 방향 처리
    6. -
  6. 콘텐츠 overflow
    7. -
  7. 값과 단위
    8. -
  8. CSS 에서 항목 크기 조정
    9. -
  9. 이미지, 미디어 및 양식 요소
    10. -
  10. 표 스타일링
    11. -
  11. CSS 디버깅
    12. -
  12. CSS 정리
    13. -
diff --git a/files/ko/learn/css/css_layout/media_queries/index.html b/files/ko/learn/css/css_layout/media_queries/index.html new file mode 100644 index 0000000000..cf13a1421c --- /dev/null +++ b/files/ko/learn/css/css_layout/media_queries/index.html @@ -0,0 +1,424 @@ +--- +title: 미디어 쿼리 초보자 안내서 +slug: Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서 +tags: + - 미디어 쿼리 + - 씨에스에스 + - 조판 + - 초보자 + - 학습 +translation_of: Learn/CSS/CSS_layout/Media_queries +--- +

{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

+ +

CSS Media Query는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 씨에스에스를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문이다. 그러나 예를들면 사용자는 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다. 이번 단원에서는 먼저 미디어 쿼리에 사용된 구문에 대해 배우고, 이어 해당 구문을 가공의 예제에서 사용하여 간단한 디자인이 어떻게 반응할 수 있는지 살펴보겠습니다.

+ + + + + + + + + + + + +
선결 사항:에이치티엠엘의 기초인 (에이치티엠엘 입문서를 공부하세요), 그리고 씨에스에스의 작동 방식을 파악하기 위해 (씨에스에스 첫걸음과 씨에스에스 구성 블록를 공부하세요.)
목표:미디어 쿼리를 사용하는 방법과 그걸 이용해 반응형 디자인을 생성하기 위한 가장 대표적인 접근법 파악하기.
+ +

미디어 쿼리 기본

+ +

가장 간단한 미디어 쿼리 구문은 다음과 같습니다:

+ +
@media media-type and (media-feature-rule) {
+  /* CSS rules go here */
+}
+ +

미디어 쿼리 구문의 구성 요소:

+ + + +

미디어 유형

+ +

당신이 지정할 수 있는 미디어 유형

+ + + +

다음 미디어 쿼리는 페이지가 인쇄된 경우에만 본문을 12pt로 설정합니다. 페이지가 브라우저에 로드될 때에는 적용되지 않습니다.

+ +
@media print {
+    body {
+        font-size: 12pt;
+    }
+}
+ +
+

참고: 수준 3 미디어 쿼리 규격에 정의된 여러 가지 다른 미디어 유형이 있습니다. 이들은 사장되었으니 피해야 합니다.

+
+ +
+

참고: 미디어 유형은 선택사항입니다. 미디어 쿼리에 미디어 유형을 표시하지 않으면 미디어 쿼리는 기본값으로 모든 미디어 유형에 대한 것으로 해석됩니다.

+
+ +

미디어 기능 규칙

+ +

미디어 유형을 지정한 뒤에 규칙을 적용할 미디어 기능을 선정할 수 있습니다.

+ +

너비와 높이

+ +

반응형 디자인을(그리고 광범위한 브라우저 지원이 되도록) 만들기 위해 가장 자주 탐문하는 기능은 뷰포트 너비이며, min-width와 max-width, width 등의 미디어 기능을 활용하여 뷰포트가 특정 너비 이상 또는 이하인 경우 씨에스에스를 적용할 수 있습니다.

+ +

이러한 특징들은 다른 화면 크기에 반응하는 조판을 생성하는 데 사용됩니다. 예를 들어 뷰포트가 정확히 600픽셀인 경우 본문 색상을 빨간색으로 변경하려면 다음과 같은 미디어 쿼리를 사용합니다.

+ +
@media screen and (width: 600px) {
+    body {
+        color: red;
+    }
+}
+ +

이 예제를 브라우저에서 열거나 소스를 보세요.

+ +

width(및 height) 미디어 기능은 범위 지정에 사용될 수 있다. 따라서 min- or max- 접두사를 붙이게 되면 최소값인지 최대값인지 표시할 수 있다. 예를 들어 뷰포트가 400 픽셀보다 좁은 경우 색깔을 파란색으로 만들기 위해 max-width:를 사용할 수 있다.

+ +
@media screen and (max-width: 400px) {
+    body {
+        color: blue;
+    }
+}
+ +

이 예제를를 브라우저에서 열거나 소스를 보세요.

+ +

실제로 최소값 또는 최대값을 사용하는 것이 반응형 디자인인 경우에 훨씬 유용하므로 width 또는 height 값을 사용하는 경우는 좀처럼 흔치앖습니다.

+ +

미디어 쿼리 규격 수준 4 및 5에 소개된 최신 기능 중 일부가 제한적으로 브라우저 지원이 되지만, 당신이 테스트할 수 있는 다른 여러 미디어 기능이 있습니다. 각 기능은 브라우저 지원 정보와 함께 MDN에 문서화되어 있으니만큼 당신은 미디어 쿼리 사용: 미디어 기능에서 전체 목록을 찾을 수 있습니다.

+ +

방향성

+ +

잘 지원되는 미디어 기능 중 하나는 orientation로 세로 모드인지 가로 모드인지를 검사할 수 있도록 해줍니다. 장치가 가로 방향에 있는 경우 본문 텍스트 색상을 변경하려면 다음과 같은 미디어 쿼리를 사용합니다.

+ +
@media (orientation: landscape) {
+    body {
+        color: rebeccapurple;
+    }
+}
+ +

이 예제를 브라우저에서 열거나 소스를 보세요.

+ +

표준 데스크톱 뷰에는 가로 방향이 주종을 이루고 있으며, 이 가로 방향에서 잘 작동하는 디자인은 휴대폰 또는 태블릿상에서 세로 모드로 볼 때 잘 작동하지 않을 수 있습니다. (가로/세로 모드의) 방향성 테스트는 여러분이 세로 모드의 장치에 최적화된 조판을 생성할 수 있게 도움을 줄 수 있습니다.

+ +

포인팅 장치의 사용

+ +

수준 4 규격의 일부로 hover 미디어 기능이 도입되었다. 이 기능은 사용자가 요소 위에 (마우스 커서를) 올릴 수 있는 능력을 가진 조건인지를 시험할 수 있다는 것을 의미합니다. 본질적으로 사람들이 어떤 종류의 포인팅 장치를 사용하는지를 말합니다. 터치 스크린 및 키보드 네비게이션은 요소 위에 식별자를 올릴 수 없습니다.

+ +
@media (hover: hover) {
+    body {
+        color: rebeccapurple;
+    }
+}
+ +

이 예제를 브라우저에서 열거나 소스를 보세요.

+ +

사용자가 포인팅 장치를 사용할 수 없다고 파악했다면 기본적으로 대화형 기능을 표시할 수 있습니다. 포인팅 장치를 사용할 수 있는 사용자의 경우 링크에 마우스를 올리는 기능을 이용하도록 선택할 수 있습니다.

+ +

마찬가지로 pointer 미디어 기능이 수준 4 규격에 포함되어 있다. 이것은 none과 fine coarse의 세 가지 값을 취할 수 있다. fine 포인터는 마우스나 트랙패드와 같은 것이다. 이 값으로 사용자가 작은 영역을 정확하게 공략할 수 있게 된다. coarse 포인터는 터치스크린상에 손가락을 말한다. none 값은 사용자가 포인팅 장치가 없다는 의미이다. 아마도 키보드 단독 또는 음성 명령으로 탐색하고 있다고 하겠다.

+ +

pointer 사용이 당신에게 주는 잇점이 있다면 사용자가 화면상에서 상호 작용하는 유형에 반응하는 더 나은 인터페이스를 설계할 수 있다는 것입니다. 예를 들어, 사용자가 터치스크린으로 장치와 상호 작용하고 있다는 것을 알면 히트 영역을 더 크게 만들 수 있습니다.

+ +

더 복잡한 미디어 쿼리

+ +

당신은 가능한 모든 이종의 미디어 쿼리를 가지고 그것들을 결합하거나, 쿼리 목록을 만들고 싶을 수도 있다. 그 중 어느 경우가 (조건문과) 일치할 수 있습니다.

+ +

"논리곱" 미디어 쿼리

+ +

and를 사용해 미디어 기능을 결합할 수 있습니다. 이는 마치 앞에서 미디어 유형과 기능을 결합하기 위해 and를 사용했던 방식과 같습니다. 예를 들어, min-width와 orientation의 논리곱 조건을 테스트해보고 싶을 수도 있습니다. 여기서 에이치티엠엘 본문 텍스트가 파란색이 되는 유일한 경우는 뷰포트의 너비가 최소 400픽셀 이상이고 장치가 가로 모드인 경우에만 해당합니다.

+ +
@media screen and (min-width: 400px) and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}
+ +

이 예제를 브라우저에서 열거나 소스를 보세요.

+ +

"논리합" 미디어 쿼리

+ +

만약 여러분에게 쿼리는 잔뜩있는 데, 그 중 일도 일치할 수 없다면, 여러분은 해당 쿼리들을 콤마로 분리할 수 있습니다. 아래 예제에서 뷰포트가 최소 400픽셀 너비 또는 장치가 가로 보기 방향이라면 텍스트는 파란색이 될 것입니다. 둘 중 하나라도 사실이 아니라면 쿼리의 조건문은 일치합니다.

+ +
@media screen and (min-width: 400px), screen and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}
+ +

이 예제를 브라우저에서 열거나 소스를 보세요.

+ +

"

+ +

"부정 논리" 미디어 쿼리

+ +

not 연산자를 사용하여 전체 미디어 쿼리를 부정할 수 있습니다. 이것은 미디어 쿼리의 전체 의미를 반대로 뒤집습니다. 따라서 다음 예에서 텍스트는 보기 방향이 세로일 경우에만 파란색이 됩니다.

+ +
@media not all and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}
+ +

이 예제를 브라우저에서 열거나 소스를 보세요.

+ +

분기점을 선정하는 방법

+ +

반응형 디자인 초창기에는 많은 디자이너가 매우 구체적인 화면 크기를 공략 대상으로 삼으려고 시도했습니다. 인기있는 휴대폰 및 태블릿 화면의 크기 목록이 공개되어 해당 기기의 뷰포트와 깔끔하게 일치하도록 디자인을 만들 수 있게 되었습니다.

+ +

지금은 엄청나게 다양한 크기의 지나치게 너무 많은 장치가 있어 그런 방식은 현실성이 없습니다. 즉, 모든 디자인마다 (기기의) 특정 크기에 맞추는 공략보다 더 나은 접근 방법은 콘텐츠가 어떤 식으로든 깨지기 시작하는 해당 (기기의) 크기에 해당하는 디자인을 변경하는 것입니다. 어쩌면 선 길이가 너무 길어지거나 상자 형태의 사이드바가 찌그러져 읽기가 어려워질 수도 있습니다. 그 지경이 되면 미디어 쿼리를 사용하여 이용할 수 있는 공간 대비 개선된 형태의 사이트가 나오도록 디자인을 변경해야할 지점인 것입니다. 이는 사용 기기의 정확한 화면 크기가 무엇이든 상관없이 모든 범주에 맞는 전방위적인 접금법을 말합니다. 미디어 쿼리가 도입되는 지점을 breakpoints라고 합니다.

+ +

Firefox DevTools의 반응형 디자인 모드는 이러한 분기점이 어느 부분이 될지 알아내는 데 매우 유용합니다. 동 툴은 미디어 쿼리를 추가하고 디자인을 조정하면서 콘텐츠가 개선되는 위치를 파악하기 위해 뷰포트를 쉽게 크거나 작게 만들 수 있습니다.

+ +

파이어폭스 개발툴상에 조판 갈무리

+ +

능동 학습: 모바일 우선 반응형 디자인

+ +

대체로 반응형 디자인에 대한 두 가지 접근법을 취할 수 있습니다. 데스크톱 또는 가장 넓은 뷰로 시작한 뒤 뷰포트의 축소에 맞춰 요소를 주변으로 이동시키기 위한 분기점을 추가하거나 가장 작은 뷰로 시작한 뒤에 뷰포트의 크기 확대에 맞춰 조판을 추가할 수 있습니다. 이 두 번째 접근법은 mobile first 반응형 디자인으로 설명되며 종종 선호되는 최상의 접근법입니다.

+ + + +

가장 작은 장치용 뷰는 일반 대열에서 나타나는 것처럼 종종 단순한 단일 열 형태의 콘텐츠가 됩니다. 즉 여러분은 작은 장치용이라 많은 조판을 할 필요가 없다는 말입니다. 다시말해 소스를 순서대로 잘 정렬하면 기본값으로 읽을 수 있는 조판이 됩니다.

+ +

아래의 길라잡이는 매우 간단한 조판으로 동 접근 방식을 안내해 줄 것입니다. 사이트 제작 과정에서는 미디어 쿼리내에서 조정할 수 있는 것이 더 많을 수 있지만, 그 접근 방식은 정확히 동일하게 됩니다.

+ +

길라잡이: 간단한 모바일 우선 조판

+ +

우리는 조판에 포함된 다양한 요소에 배경색을 추가하기 위해 일정한 씨에스에스를 적용한 에이치티엠엘 문서를 가지고 출발합니다.

+ +
* {
+    box-sizing: border-box;
+}
+
+body {
+    width: 90%;
+    margin: 2em auto;
+    font: 1em/1.3 Arial, Helvetica, sans-serif;
+}
+
+a:link,
+a:visited {
+    color: #333;
+}
+
+nav ul,
+    aside ul {
+    list-style: none;
+    padding: 0;
+}
+
+nav a:link,
+nav a:visited {
+    background-color: rgba(207, 232, 220, 0.2);
+    border: 2px solid rgb(79, 185, 227);
+    text-decoration: none;
+    display: block;
+    padding: 10px;
+    color: #333;
+    font-weight: bold;
+}
+
+nav a:hover {
+    background-color: rgba(207, 232, 220, 0.7);
+}
+
+.related {
+    background-color: rgba(79, 185, 227, 0.3);
+    border: 1px solid rgb(79, 185, 227);
+    padding: 10px;
+}
+
+.sidebar {
+    background-color: rgba(207, 232, 220, 0.5);
+    padding: 10px;
+}
+
+article {
+    margin-bottom: 1em;
+}
+
+ +

우리는 우리가 조판에 변경을 가하지는 않았지만, 문서의 원본은 콘텐츠를 읽을 수 있는 방식으로 순서대로 정렬됩니다. 이것은 중요한 첫 번째 단계이며, 콘텐츠가 화면 읽기 프로그램(tts)에 의해 소리내여 읽혀질 경우 콘텐츠가 (읽을 문자열를) 이해될 수도록 보장합니다.

+ +
<body>
+    <div class="wrapper">
+      <header>
+        <nav>
+          <ul>
+            <li><a href="">사이트 소개</a></li>
+            <li><a href="">연락처</a></li>
+            <li><a href="">우리팀 안내</a></li>
+            <li><a href="">블로그</a></li>
+          </ul>
+        </nav>
+      </header>
+      <main>
+        <article>
+          <div class="content">
+            <h1>채식주의자!</h1>
+            <p>
+              ...
+            </p>
+          </aside>
+        </article>
+
+        <aside class="sidebar">
+          <h2>채식에 관한 외부 링크</h2>
+          <ul>
+            <li>
+              ...
+            </li>
+          </ul>
+        </aside>
+      </main>
+
+      <footer><p>&copy;2019</p></footer>
+    </div>
+  </body>
+
+ +

이 간단한 조판은 모바일에서도 잘 작동한다. 우리가 파이어폭스 데브툴 내부 반응형 디자인 모드에서 조판을 본다면, 우리는 그것이 사이트의 직관적인 모바일 뷰로 보더라도 꽤 잘 작동한다는 것을 알 수 있다.

+ +

이 예제를 브라우저에서 열거나 소스를 보세요.

+ +

당신이 우리의 진행 과정대로 이 예제를 실행해보려면 step1.html의 사본을 당신 컴퓨터에 만드세요.

+ +

이 지점부터는 반응형 디자인 모드뷰가 점차 확대되어 라인 길이가 상당히 길어지는 모습을 확인할 정도가 되며, 수평선 형태의 탐색 메뉴가 표시될 공간을 갖추고 있습니다. 여기에서 우리는 첫 번째 미디어 쿼리를 추가할 것입니다. 사용자가 텍스트 크기를 늘리게 되면, 텍스트 크기가 작은 장비를 가진 사람과 비교해 비슷한 라인 길이지만 뷰포트가 확대되는 순간에 분기점이 발생한다는 의미입니다. 따라서 우리는 ems 단위를 사용할 것입니다.

+ +

아래 코드를 step1.html 씨에스에스의 하단에 추가하세요.

+ +
@media screen and (min-width: 40em) {
+    article {
+        display: grid;
+        grid-template-columns: 3fr 1fr;
+        column-gap: 20px;
+    }
+
+    nav ul {
+        display: flex;
+    }
+
+    nav li {
+        flex: 1;
+    }
+}
+
+ +

이 씨에스에스는 문서 안에 있는 문서 콘텐츠와 aside 요소 내부 관련 정보까지 2단 조판을 우리에게 제공합니다. 또한 우리는 가변상자를 사용하여 탐색 메뉴를 일렬로 배치했습니다.

+ +

2단계 파일을 브라우저에서 열거나 소스를 보세요.

+ +

사이드바가 새 단을 형성할 수 있는 충분한 공간이 있다고 느낄 때까지 너비를 계속 확장합니다. 미디어 쿼리안에서 주요 요소를 두 개의 열 형태의 격자로 만들 것입니다. 그런 다음 두 개의 사이드바가 서로 나란히 정렬되도록 문서의 {{cssxref("margin-bottom")}}을 제거해야하며, 바닥글 상단에 {{cssxref("border")}}(테두리)를 추가하게 됩니다. 일반적으로 이러한 미세 조정은 각 분기점 도달시 디자인을 좋게 보이게 하기 위해 여러분이 할 일입니다.

+ +

다시 한 번 아래 코드를 step1.html 씨에스에스의 하단에 추가합니다.

+ +
@media screen and (min-width: 70em) {
+    main {
+        display: grid;
+        grid-template-columns: 3fr 1fr;
+        column-gap: 20px;
+    }
+
+    article {
+        margin-bottom: 0;
+    }
+
+    footer {
+        border-top: 1px solid #ccc;
+        margin-top: 2em;
+    }
+}
+
+ +

3단계 파일을 브라우저에서 열거나 소스를 보세요.

+ +

최종 예제를 다른 너비로 보면 사용 가능한 너비에 따라 디자인이 반응하고 단일 열, 2열 또는 3열로 작동하는 방법을 볼 수 있습니다. 이것은 모바일 우선 반응형 디자인의 아주 간단한 예입니다.

+ +

당신에게 정말 미디어 쿼리가 필요할까요?

+ +

가변상자, 격자 및 다단 조판은 모두 굳이 미디어 쿼리를 필요로 하지 않고도 가변적이며 심지어 반응형 구성 요소를 만들 수 있는 방법을 제공합니다. 미디어 쿼리를 추가하지 않고도 이러한 조판 메서드를 사용해 원하는 것을 달성할 수 있는지 고려할 가치가 있습니다. 예를 들어, 여러분은 적어도 200 픽셀 너비의 카드 집합을 원할 수 있으며, 최대 200 픽셀이라면 주요 문서 부분에 맞아떨어질 수 있습니다. 이는 미디어 쿼리를 전혀 사용하지 않고 격자 조판만으로 얻을 수 있습니다.

+ +

이것은 아래 용법으로 달성될 수 있습니다.

+ +
<ul class="grid">
+    <li>
+        <h2>카드 1</h2>
+        <p>...</p>
+    </li>
+    <li>
+        <h2>카드 2</h2>
+        <p>...</p>
+    </li>
+    <li>
+        <h2>카드 3</h2>
+        <p>...</p>
+    </li>
+    <li>
+        <h2>카드 4</h2>
+        <p>...</p>
+    </li>
+    <li>
+        <h2>카드 5</h2>
+        <p>...</p>
+    </li>
+</ul>
+ +
.grid {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 20px;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+.grid li {
+    border: 1px solid #666;
+    padding: 10px;
+}
+ +

이 격자 예제를 브라우저에서 열거나 소스를 보세요.

+ +

상기 예제를 브라우저에서 열면 화면을 넓히거나 좁히거나 하여 열 트랙 수가 변경되는 것을 확인할 수 있습니다. 이 방법의 좋은 점은 격자가 뷰포트 너비를 보는 게 아니라 해당 구성 요소에 맞춰 이용할 수 있는 너비를 살핀다는 것입니다. 당신에게 미디어 쿼리가 전혀 필요하지 않을수도! 있다는 제안으로 이번 절을 마감하는 것은 이상하게 보일 수도 있습니다. 그러나 실제로 미디어 쿼리로 강화된 현대적 조판 메서드를 잘 사용하면 최상의 결과를 얻을 수 있습니다.

+ +

요약정리

+ +

여러분은 이 단원에서 미디어 쿼리에 대해 배웠으며 모바일 우선 반응형 디자인을 실제로 생성하는 방법도 알아 보았습니다.

+ +

우리가 만든 것을 시작점로 더 많은 미디어 쿼리 조건을 테스트할 수 있습니다. 예를 들어, 방문자가 pointer 미디어 기능을 사용하여 거친 포인터를 가지고 있는 것을 감지하면 탐색 메뉴의 크기를 변경할 수 있습니다.

+ +

또한 서로 다른 구성 요소를 추가하고 미디어 쿼리를 추가한다든지 또는 가변상자나 격자와 같은 조판 방법을 사용하는 것이 구성 요소를 반응형으로 만드는 가장 적절한 방법인지 여부를 실험할 수 있습니다. 바른 방식 혹은 그른 방식 따윈 없습니다. 말하자면 어떤 것이 디자인과 콘텐츠에 가장 적합한지 실험하고 관찰해야 합니다.

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

+ +

이번 단위에는

+ + diff --git a/files/ko/learn/css/css_layout/normal_flow/index.html b/files/ko/learn/css/css_layout/normal_flow/index.html new file mode 100644 index 0000000000..43b4366c0e --- /dev/null +++ b/files/ko/learn/css/css_layout/normal_flow/index.html @@ -0,0 +1,102 @@ +--- +title: 일반 대열 +slug: Learn/CSS/CSS_layout/일반_흐름 +tags: + - 격자형 + - 부동 + - 씨에스에스 + - 일반 대열 + - 조판 + - 초보자 + - 학습 +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

이번 글에서는 normal flow, 다른 말로 만일 당신이 요소의 레이아웃을 변경하지 않을 시 웹페이지 요소가 자기 자신을 배치하는 방법에 관해 설명합니다.

+ + + + + + + + + + + + +
선결 사항:HTML의 기초 (HTML에 대한 소개)와 CSS 작동 방식에 대한 개념(CSS 소개를 공부하세요.)
목표:변경이 이뤄지기 전에 브라우저가 웹 페이지를 기본값으로 레이아웃하는 방법을 설명하기
+ +

이전 단원에서 상세히 기술한 바와 같이, 당신이 CSS를 적용하지 않을 경우 웹 페이지의 요소는 normal flow로 배치됩니다. 그리고 normal flow에 포함된 요소의 위치를 조정하거나 요소를 완전히 제거함으로써 요소가 동작하는 방법을 변경할 수 있습니다. 모든 웹 페이지를 시작하는 최상의 방법은 normal flow에서 읽기 가능하며, 견고하고 구조화된 문서로 시작하는 것입니다. 이렇게 하면 제한된 기능을 가진 브라우저를 사용하거나 페이지 콘텐츠를 소리 내 읽는 스크린 리더와 같은 장치를 사용하는 사용자들까지 읽을 수 있는(readable) 콘텐츠로 만들 수 있습니다. 또한, normal flow는 읽기 가능한 문서를 만들도록 마련된 것으로, 이를 출발점으로 삼아 레이아웃을 변경할 때 웹페이지 문서와 대립해 싸울 게 아니라 그것과 협력해서 작업하게 됩니다.

+ +

서로 다른 레이아웃 메서드를 본격적으로 파헤치기 전에 일반 문서 흐름과 관련하여 이전 모듈에서 학습했던 내용 중의 일부를 복습하는 것도 가치가 있습니다.

+ +

기본값으로 요소들은 어떻게 배치되는가?

+ +

우선 개별 요소인 상자의 배치는 자신의 내용물을 채택하고, 그 주변에 패딩을 더하고, 테두리와 여백을 더하는 식으로 이뤄집니다. 다시 말해 앞서 살펴보았던 박스 모델과 같습니다.

+ +

기본값으로 블록 수준 요소의 내용물은 자기 부모 요소의 너비 100%와 자체 내용물의 최대 높이가 됩니다. 인라인 요소는 자체 내용물의 최대 높이를 취하는 동시에 최대 너비를 취합니다. 인라인 요소에 너비나 높이를 설정할 수는 없습니다. 그들은 블록 수준 요소의 콘텐츠 내부에 들어앉았을 뿐입니다. 인라인 요소의 크기를 제어하려면 그것을 display: block; 속성값이나 양쪽의 성격이 혼합된 display: inline-block;을 가지고 블록 수준 요소처럼 행동하도록 설정할 필요가 있습니다.

+ +

앞서 살펴본 내용에서 개별 요소는 설명되지만, 여러 요소가 서로 상호 작용하는 방법은 어떻게 설명할까요? (레이아웃 입문서에서 언급했던) 일반 레이아웃의 flow는 브라우저의 뷰포트 안에 요소를 배치하는 시스템입니다. 기본값으로 블록 수준 요소의 배치는 부모의 쓰기 모드(initial: horizontal-tb)에 기초해 블록 flow 방향에 포함되어 이뤄집니다. 다시 말해 각 블록 요소는 마지막 요소 아래 새 줄에 나타나며, 각 요소에 주어진 margin에 의해 구분됩니다. 그러므로 영어 또는 여타 가로쓰기, 상단에서 하단으로 행갈이 하는 쓰기 모드와 블록 수준 요소는 수직으로 배치됩니다.

+ +

인라인 요소는 다르게 동작합니다. 새로운 줄에 나타나는 대신, 다른 요소와 같은 라인에 차례로 자리 잡습니다. 다만 인접(혹은 접힌) 텍스트 콘텐츠는 해당 부모의 블록 수준 요소의 너비 내에서 자신이 자리를 잡을 수 있는 공간이 있는 경우가 해당합니다. 충분한 공간이 없을 경우 overflow되는 텍스트 또는 요소는 새로운 줄에 나타납니다.

+ +

두 개의 인접 요소가 모두 자체 여백이 지정되어 있다면 두 여백은 접촉하고 그중 큰 여백만 남게 되며, 작은 여백은 사라집니다. 이를 마진 축소(margin collapsing)라고 하며 이전에 확인해본 적이 있습니다.

+ +

이 모든 것을 설명하는 간단한 예를 살펴봅시다.

+ +
+
<h1>기본 문서 flow</h1>
+
+<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p>
+
+<p>기본값으로 우리는 우리 부모 요소의 너비 100%를 넘나들며, 우리 자녀 콘텐츠의 최대 높이를 취합니다. 우리의 총 너비와 총 높이는 우리의 콘텐츠 + 패딩 + 테두리 너비 및 높이입니다.</p>
+
+<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p>
+
+<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 오버플로할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,0.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}
+
+ +

{{ EmbedLiveSample('일반_flow', '100%', 500) }}

+ +

요약정리

+ +

이제 당신은 normal flow은 물론, 기본값으로 브라우저가 어떤 방식으로 사물을 배치하는지 이해했습니다. 당신의 디자인 필요에 따라 레이아웃을 만들기 위해 디스플레이 기본값을 변경하는 방법을 배우려면 다음 단계로 이동하세요.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

이번 단위에는

+ + diff --git a/files/ko/learn/css/css_layout/positioning/index.html b/files/ko/learn/css/css_layout/positioning/index.html new file mode 100644 index 0000000000..76a491ae0e --- /dev/null +++ b/files/ko/learn/css/css_layout/positioning/index.html @@ -0,0 +1,585 @@ +--- +title: 위치잡기 +slug: Learn/CSS/CSS_layout/위치잡기 +tags: + - 고정 + - 글 + - 상대 + - 씨에스에스 + - 안내서 + - 위치잡기 + - 절대 + - 조판 + - 초보자 + - 코딩스크립팅 +translation_of: Learn/CSS/CSS_layout/Positioning +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}
+ +

당신이 일반 문서 조판 대열에서 요소를 끄집어 내어, 그것이 다르게 행동하게 만들수 있게 해주는 것이 위치잡기다. 예를 들어 상대 요소 위에 놓거나 브라우저 뷰 포트 내부의 동일한 위치를 항상 유지하게 해준다. 이 문서는 서로 다른 {{cssxref("position")}} 값을 설명하고, 그 걸 사용하는 방법에 대해서도 설명한다.

+ + + + + + + + + + + + +
선결 사항:에이치티엠엘의 기초 (에이치티엠엘 입문서)와 씨에스에스 작동 방식에 대한 개념(씨에스에스 입문서를 공부하세요.)
목표:씨에스에스 위치잡기가 작동하는 방법 배우기
+ +

가능하면 우리 깃허브 저장소에 있는 0_basic-flow.html 파일의 사본을 가지고 당신의 컴퓨터상에서 해당 연습을 함께 따라해보시길 바랍니다. (여기 소스 코드)가 있으니 그걸 착수 파일로 이용하십시요.

+ +

위치잡기 소개

+ +

크게봐서 위치잡기의 개념은 위에서 설명했듯 기본 문서 대열에 따른 동작을 무시하고 흥미로운 효과를 낼 수 있도록 하는 것입니다. 조판 내부의 일부 상자의 위치를 기본 조판 대열 위치에서 약간 변경한다거나, 약간 기묘하거나, 편치않은 느낌을 주고 싶다면 어떨까? 위치잡기가 바로 당신의 도구입니다. 또는 페이지의 다른 부분의 상위에 부동(浮動)하는 사용자 인터페이스 요소를 만들고 싶다라거나 아울러 페이지가 스크롤된 정도와 상관없이 항상 브라우저 창 내부의 동일한 위치에 놓이게 하고 싶다면? 위치잡기는 그런 조판 작업을 가능하게 합니다.

+ +

에이치티엠엘 요소에 적용될 수 있는 여러 가지 유형의 위치잡기가 존재합니다. 어떤 요소상에 특정 유형의 위치잡기가 활성화되도록 하기 위해 {{cssxref("position")}} 속성을 사용합니다.

+ +

정적 위치잡기

+ +

정적 위치잡기는 모든 요소에 주어지는 기본값입니다. 즉, "요소를 문서 조판 대열상에 일반 위치에 배치하라는 것으로 여기서 특별한 것은 없습니다."

+ +

이를 입증한다거나, 이어질 섹션에서 다룰 예제를 설정하려면 먼저 에이치티엠엘상에 두 번째 {{htmlelement("p")}} 요소에 positioned라는 클래스를 추가하십시오:

+ +
<p class="positioned"> ... </p>
+ +

이제 다음과 같은 규칙을 당신의 씨에스에스 하단에 추가하십시요:

+ +
.positioned {
+  position: static;
+  background: yellow;
+}
+ +

이제 저장하고 새로고침하면 두 번째 단락의 배경 색깔이 업데이트된 것을 제외하고 다른 차이가 없다는 것이 확인될 것입니다. 아무 문제없습니다. 앞에서 얘기했듯이 정적 위치잡기는 기본값으로 주어진 동작입니다!

+ +
+

주석: 이 시점에 예제의 실제 구현 장면을 1_static-positioning.html에서 볼 수 있습니다.(소스 코드는 여기서 보세요).

+
+ +

상대 위치잡기

+ +

상대 위치잡기는 우리가 살펴 첫 번째 위치 유형입니다. 이것은 정적 위치 결정과 매우 유사합니다. 단, 일단 정상 조판 대열상에 위치잡기할 요소가 자리를 잡고나면 페이지의 다른 요소와 중첩되는 것을 포함하여 최종 위치를 수정할 수 있습니다. 당신의 코드에 있는 position 선언을 업데이트하십시요.

+ +
position: relative;
+ +

현 시점에서 저장하고 새로 고침하면 전혀 변경된 결과가 확인되지 않습니다. 그럼 요소의 위치를 어떻게 수정할까요? 다음 절에서 설명하겠지만, {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}을 사용해야 합니다.

+ +

상하 좌우 위치잡기 소개

+ +

{{cssxref("top")}}, {{cssxref("bottom")}}와 {{cssxref("left")}}, and {{cssxref("right")}}는 {{cssxref("position")}}과 나란히 사용되어 기준 위치에 비례해 정확한 위치잡기를 지정한다. 이를 시험하려면 다음 선언문을 씨에스에스 .positioned 규칙에 추가하십시오:

+ +
top: 30px;
+left: 30px;
+ +
+

참고: 이러한 속성의 값은 당신이 논리적으로 예상할 수 있는 모든 단위를 취할 수 있습니다. 예로 pixels, mm, rems, % 등이 해당한다.

+
+ +

이제 저장하고 새로고침하면 다음과 같은 내용의 결과를 얻을 것입니다:

+ + + +

{{ EmbedLiveSample('상하_좌우_위치잡기_소개', '100%', 500) }}

+ +

근사하죠, 그쵸? 좋습니다. 그러나 이것은 아마도 여러분이 기대했던 것이 아니었을 것입니다. 우리가 좌측 상단을 지정했는데 왜 우측 하단으로 이동했을까요? 처음에는 비논리적으로 들릴지 모르지만, 이것은 상대적 위치잡기가 작용하는 방식일 뿐입니다. 즉, 위치가 지정된 상자의 특정 측면을 밀어서 반대 방향으로 움직이는 보이지 않는 힘이 있다고 생각할 필요가 있습니다. 예를 들어, top: 30px;를 지정하면 힘은 상자 상단을 밀어서 30px 아래로 이동하게 만듭니다.

+ +
+

참고: 이 시점에 예제의 실제 구현 장면을 2_relative-positioning.html에서 확인할 수 있습니다(소스 코드 보기).

+
+ +

절대 위치잡기

+ +

절대적인 위치 결정은 매우 다른 결과를 가져옵니다. 당신의 소스 코드에 다음과 같이 위치 선언을 변경해 보겠습니다.

+ +
position: absolute;
+ +

지금 저장한 다음에 새로고침하면 다음과 같은 것이 확인되어야 합니다:

+ + + +

{{ EmbedLiveSample('절대_위치잡기', '100%', 420) }}

+ +

우선, 위치잡기 요소가 원래 있었어야 했던 문서 대열 속 위치에 있던 간격은 더 이상 존재하지 않는다는 점에 유의하십시오. 즉 간격이 더 이상 존재하지 않는 것처럼 첫 번째와 세 번째 요소가 붙어 버렸습니다! 어떤 면에서는, 이것은 사실입니다. 절대적으로 위치한 요소는 더 이상 일반 문서 조판 대열에서 존재하지 않습니다. 대신 다른 모든 것과는 별개로 독자적인 레이어상에 놓여 있습니다. 이것은 매우 유용합니다. 즉, 페이지의 다른 요소의 위치와 간섭하지 않는 격리된 사용자 인터페이스 기능을 만들 수 있습니다. 예를 들어 팝업 정보 상자 및 제어 메뉴, 롤오버 패널, 페이지 어느 곳에서나 끌어서 놓기할 수 있는 유저 인터페이스 페이지 등등…

+ +

둘째, 요소의 위치가 변경되었음을 알아차립시다. 이는 {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}가 절대 위치잡기에 해당해 다른 방식으로 작동하기 때문입니다. 요소가 진입해야 하는 방향을 지정하기 보다는 요소가 (부모) 콘테이너 요소의 상하좌우 측면으로부터 떨어지는 간격을 지정되어야 합니다. 따라서 이 경우, 내 말은 절대 위치잡기 요소는 "콘테이너 요소"의 상단에서 30px, 왼쪽에서 30px에 위치에 놓여야 한다는 말입니다.

+ +
+

참고: 당신이 필요하다면 요소의 크기를 재지정하기 위해 {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}를 사용할 수 있습니다. 당신이 위치잡기한 요소에 top: 0; bottom: 0; left: 0; right: 0;과 margin: 0;를 지정한 뒤 어떻게 되냐 보십시요! 해보고 다시 원상태로 돌리십시요...

+
+ +
+

주석: 그렇습니다. 여백이 위치잡기한 요소에 여전히 영향을 미칩니다. 그러나 마진 축소 영향은 업습니다.

+
+ +
+

참고: 당신은 3_absolute-positioning.html에서 예제를 확인할 수 있습니다(소스 코드를 보세요).

+
+ +

위치잡기 상황

+ +

어떤 요소가 절대 위치잡기의 기준이 되는 "콘테이너 요소"입니까? 이것은 위치잡기 요소의 조상에 지정된 위치 속성의 여하에 따라 많이 달라집니다. (See 콘테이너 블록 식별하기).

+ +

조상 요소가 명시적으로 정의된 위치 속성을 가지고 있지 않으면 초깃값으로 모든 조상 요소에 정적 위치가 부여됩니다. 그에 따른 결과, 절대적 위치잡기한 요소는 initial containing block에 포함되게 됩니다. 초기 콘테이너 블록은 브라우저 뷰포트 크기의 용적을 가지며, 자신도 {{htmlelement("html")}} 요소를 포함하는 블록입니다. 간단히 말해서, 절대적 위치잡기한 요소는 {{htmlelement("html")}} 요소의 외부에 포함되어 초기 뷰포트 기준과 비례한 곳에 위치하게 됩니다.

+ +

위치잡기한 요소는 에이치티엠엘 소스의 {{htmlelement("body")}} 안에 중첩되지만 최종 조판에서는 페이지의 가장자리 상단과 왼쪽에서 30px 떨어져 있습니다. 우리는 요소의 절대적 위치잡기에서 어떤 요소에 비례해 위치잡기할지 기준이 되는 positioning context(위치잡기 상황)을 변경할 수 있습니다. 이것은 조상 요소 중 하나를 기준으로 위치잡기 설정이 이뤄집니다. 다시말해 요소의 내부에 중첩된 요소 중 하나가 기준이 됩니다(내부에 중첩되지 않은 요소를 기준삼아 비례적으로 위치시킬 수 없습니다). 이를 증명하기 위해 다음과 같은 선언을 body 규칙에 추가하십시요:

+ +
position: relative;
+ +

이로써 다음과 같은 결과가 나와야 합니다.

+ + + +

{{ EmbedLiveSample('위치잡기_상황', '100%', 420) }}

+ +

위치잡기한 요소는 이제 기준이 되는 {{htmlelement("body")}} 요소와 비례한 위치에 놓이게 된다.

+ +
+

참고: 당신은 이 시점에 예제의 실제 구현 장면을 4_positioning-context.html에서 볼 수 있습니다(소스 코드 보기).

+
+ +

z-인덱스 소개

+ +

이 모든 절대적 위치잡기는 제법 재미나지만, 아직 고려하지 않은 또 다른 것이 있습니다. 요소가 겹치기 시작하면 어떤 요소가 다른 요소 위에 나타나는지 결정하는 기준은 무엇입니까? 지금까지 우리가 본 예제에서, 우리는 위치잡기 상황 속에 단 하나의 위치잡기할 요소만 주어졌습니다. 그리고 그것은 상위에 나타납니다. 왜냐면 위치잡기 요소가 비 위치잡기 요소보다 우위를 점하기 때문입니다. 하나 이상의 요소가 있을 때는 어떨까요?

+ +

다음을 씨에스에스에 추가해 첫 단락도 절대적 위치잡기 대상으로 만들어 봅시다.

+ +
p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+}
+ +

이 시점에서 당신이 보게될 것은 첫 번째 단락이 녹색으로 칠해지고, 문서 대열을 벗어나 원래 위치에서 약간 위에 자리를 잡습니다. 또한, 두 개의 단락이 겹치는 원래의 .positioned 클래스가 지정된 단락 아래에 겹겹이 포개집니다. 이렇게 되는 까닭은 .positioned 클래스로 지정된 단락이 소스 순서상에 두 번째 단락이고 소스 순서상에 뒤에 있는 위치잡기한 요소가 소스 순서상 앞서는 위치잡기한 요소보다 우위를 점하기 때문입니다.

+ +

스택 순서를 변경할 수 있습니까? 네, {{cssxref("z-index")}} 속성을 사용하면 가능합니다. z-인덱스는 z축을 가리킵니다. 당신은 앞서 배경 이미지와 그림자 오프셋을 떨어뜨리는 것과 같은 사물의 위치를 파악하는 방법을 찾는 과정에서 웹 페이지를 수평(x축)과 수직(y축) 좌표로 논의한 학습 과정을 기억하실 겁니다. (0,0)은 페이지(또는 요소)의 상단 왼쪽에 있으며, x-축 및 y-축은 페이지의 오른쪽 및 아래쪽으로 진행합니다(가로쓰기 언어의 경우를 말합니다).

+ +

웹 페이지에는 z축이 있습니다. 스크린 표면으로부터 진행하는 가상 라인, 즉 사용자 얼굴 쪽으로 향하는(당신이 화면 위에 놓고 싶은 것을 망론한다). {{cssxref("z-index")}} 값은 위치잡기한 요소가 해당 축상에 놓일 경우에 영향을 미칩니다. 양수 값은 스택 상단으로 이동하고 음수 값은 스택 아래로 이동합니다(역주: 상단으로 겹겹이 쌓이거나 하단으로 겹겹이 쌓여진다) 기본값으로 위치잡기한 요소는 모두 z-index가 auto 값을 가지며, 이는 사실상 0입니다.

+ +

스택 순서를 변경하려면 다음 선언을 p:nth-of-type(1) rule: 규칙에 추가하십시오.

+ +
z-index: 1;
+ +

이제 녹색 단락이 상단에 놓여진 완성된 예가 보여야 합니다.

+ + + +

{{ EmbedLiveSample('z-인덱스_소개', '100%', 400) }}

+ +

z-인덱스는 단위가 없는 인덱스 값만 허용한다는 점에 유의하자; 하나의 요소가 Z축 위로 23픽셀이 되도록 지정할 수 없습니다. 그런 식으론 작동하지 않습니다. 높은 값의 요소는 낮은 값 요소의 위로 간니다. 그러니 당신이 어떤 값을 사용할 지에 달려있습니다. 2와 3을 사용하면 300과 40000과 같은 효과를 얻을 수 있습니다.

+ +
+

참고: 이 시점에 예제의 실제 구현 장면을 5_z-index.html에서 볼 수 있습니다(소스 코드 보기).

+
+ +

고정 위치잡기

+ +

이제 고정 위치잡기를 살펴보자. 이것은 절대 위치잡기와 정확히 같은 방식으로 작동합니다.단 한 가지 핵심 차이점이 있습니다. 절대 위치잡기는 {{htmlelement("html")}} 요소나 가까운 조상 요소를 기준으로 비례해 요소를 고정시키지만, 고정 위치잡기는 브라우저 뷰 포트 자체를 기준으로 비례해 요소를 고정합니다. 즉, 탐색 메뉴가 계속 자리를 지키는 것과 같이 제자리에 고정된 유용한 사용자 인터페이스 항목을 생성할 수 있습니다.

+ +

우리가 무슨 얘기를 하는지 보여주기 위해 간단한 예를 들어봅시다. 먼저 씨에스에스에서 기존 p:nth-of-type(1)과 .positioned 규칙을 삭제합니다.

+ +

이제 position: relative; 선언을 지우고, 다음과 같이 고정 높이를 추가하는 규칙을 body 규칙에 업데이트합니다:

+ +
body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+ +

이제 우리는 {{htmlelement("h1")}} 요소에 position: fixed;를 부여하고, 그걸 뷰 포트의 상단 중앙에 놓게 합니다. 다음 규칙을 씨에스에스에 추가하세요.

+ +
h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}
+ +

화면 상단에 고정시키려면 top: 0;이 요구됩니다. 그런 다음 제목에 콘텐츠 열과 동일한 너비를 부여하고 콘텐츠를 중앙에 놓기 위해 오래됐지만, 신뢰감을 주는 margin: 0 auto;를 사용합니다. 그런 다음 제목에 흰색 배경과 패딩을 부여해 제목 아래에 내용이 보이지 않도록 합니다.

+ +

지금 저장하고 새로고침하면 제목이 고정되는 사소하지만, 재미난 효과를 볼 수 있으며, 스크롤 막대를 위로 올리면 콘텐츠가 드러나고 아래로 내리면 제목 밑으로 콘텐츠가 사라지는 것처럼 보입니다. 하지만 우리는 이것을 더 개선할 수 있습니다. 현재 일부 콘텐츠가 시작부터 제목에 밑에 깔려있는 부분 말입니다. 위치잡기한 제목이 문서 대열상에서 모습을 드러내지 않기 때문입니다. 그래서 나머지 콘텐츠가 맨 위로 이동했습니다. 우리는 올라간 것을 조금 아래로 이동시켜야 합니다. 우리는 그걸 첫 번째 단락에 최상위 여백을 설정해서 달성할 수 있습니다. 지금 다음 내용을 추가하세요:

+ +
p:nth-of-type(1) {
+  margin-top: 60px;
+}
+ +

당신은 이제 완성된 예제를 볼 수 있어야 합니다:

+ + + +

{{ EmbedLiveSample('고정_위치잡기', '100%', 400) }}

+ +
+

참고: 당신은 이 시점에 예제의 실제 구현 장면을 6_fixed-positioning.html에서 볼 수 있습니다 (소스 코드는 여기서 보세요).

+
+ +

position: sticky

+ +

이용할 수 있는 position: sticky라고 불리우는 또 다른 위치잡기 값이 있습니다. 이것은 다른 위치잡기보다 다소 새로운 것입니다. 이것은 기본적으로 상대 위치잡기와 고정 위치잡기가 혼합된 하이브리드로서, 위치잡기 요소가 특정 임계점에(예로 뷰포트의 상단으로부터 10px) 스크롤될 때까지 상대 위치잡기처럼 행동할 수 있다가 그 뒤에 위치가 고정됩니다. 예를 들어, 탐색 막대가 특정 지점까지 페이지와 함께 스크롤한 다음 페이지 상단에 흡착되도록 사용할 수 있습니다.

+ +
+ + +
.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('흡착_1', '100%', 200) }}

+ +

position: sticky의 일반적 사용례기도 하고 흥미로운 사용례는 스크롤링하다 제목에 도달하면 서로 다른 제목이 페이지의 맨 위에 흡착되는 색인 페이지를 만드는 것입니다. 이런 사례에 대한 마크업은 다음과 같은 모습일 수 있습니다:

+ +
<h1>흡착 위치잡기</h1>
+
+<dl>
+    <dt>A</dt>
+    <dd>Apple</dd>
+    <dd>Ant</dd>
+    <dd>Altimeter</dd>
+    <dd>Airplane</dd>
+    <dt>B</dt>
+    <dd>Bird</dd>
+    <dd>Buzzard</dd>
+    <dd>Bee</dd>
+    <dd>Banana</dd>
+    <dd>Beanstalk</dd>
+    <dt>C</dt>
+    <dd>Calculator</dd>
+    <dd>Cane</dd>
+    <dd>Camera</dd>
+    <dd>Camel</dd>
+    <dt>D</dt>
+    <dd>Duck</dd>
+    <dd>Dime</dd>
+    <dd>Dipstick</dd>
+    <dd>Drone</dd>
+    <dt>E</dt>
+    <dd>Egg</dd>
+    <dd>Elephant</dd>
+    <dd>Egret</dd>
+</dl>
+
+ +

씨에스에스는 다음과 같이 보일 수 있다. 일반 대열에서는 {{htmlelement("dt")}} 요소가 콘텐츠와 함께 스크롤됩니다. {{cssxref("top")}} 값이 0이고 {{htmlelement("dt")}} 요소에 position: sticky를 추가하면 이를 지원하는 브라우저는 그 위치(0)에 도달할 때 머리글을 브라우저 뷰포트 상단에 흡착시킵니다. 그 후 각각의 후속 머리글은 자신의 위치까지 스크롤하는 시점에 이전 머리글을 교체합니다.

+ +
dt {
+  background-color: black;
+  color: white;
+  padding: 10px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  margin: 1em 0;
+}
+
+ +
+ +
+ +

{{ EmbedLiveSample('흡착_2', '100%', 200) }}

+ +
+

참고: 당신은 이 시점에 예제의 실제 구현 장면을 7_sticky-positioning.html에서 볼 수 있습니다(소스 코드는 여기서 보세요).

+
+ +

요약정리

+ +

기본적인 위치잡기를 가지고 놀이삼아 시험해 보니 재미있었을 것이다; 비록 이것이 완전체 조판에 사용할 수 있는 방법은 아니지만, 여러분이 보았다시피 이것이 알맞은 용도로 사용될 수 있는 많은 작업들이 있다.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}

+ +

참조 항목

+ + + +

이번 단위에는

+ + diff --git a/files/ko/learn/css/css_layout/responsive_design/index.html b/files/ko/learn/css/css_layout/responsive_design/index.html new file mode 100644 index 0000000000..b1311448c7 --- /dev/null +++ b/files/ko/learn/css/css_layout/responsive_design/index.html @@ -0,0 +1,333 @@ +--- +title: 반응형 디자인 +slug: Learn/CSS/CSS_layout/반응형_디자인 +tags: + - 가변상장 + - 격자 + - 다단 + - 미디어 쿼리 + - 반응형 웹 디자인 + - 유동 격자 + - 이미지 + - 타이포크래피 +translation_of: Learn/CSS/CSS_layout/Responsive_Design +--- +
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
+ +

웹디자인 초창기에는 페이지를 구축할 때 매우 구체적인 화면 크기를 공략 대상으로 삼았습니다. 사용자가 웹디자이너가 예상한 것보다 크거나 작은 화면의 기기를 가지고 있다면 원하지 않는 스크롤 막대에서부터 지나치게 긴 길이의 라인, 사용 공간이 부족하게 되는 결과를 낳습니다. 다양한 화면 크기가 등장함에 따라 responsive web design 개념이 등장했습니다. 말하자면 서로 다른 화면 너비와 해상도 등에 맞게 웹 페이지가 조판과 모양을 변경할 수 있는 일련의 실례를 집대성한 것입니다. 이 아이디어가 우리가 멀티 디바이스 웹에 대한 설계 방식을 바꾸게 만든 장본인입니다. 이 문서에서 우리는 그 내용을 숙달하기 위해 당신이 알아야하는 주요 기술을 이해하도록 도울 것입니다.

+ + + + + + + + + + + + +
선결 사항:에이치티엠엘의 기초인 (에이치티엠엘 입문서를 공부하세요), 그리고 씨에스에스의 작동 방식을 파악하기 위해 (씨에스에스 첫걸음과 씨에스에스 구성 블록를 공부하세요.)
목표:반응형 디자인의 역사와 핵심적인 계념 파악하기
+ +

웹사이트 조판 역사

+ +

역사의 어느 시점 여러분이 웹 사이트를 디자인할 때 두 가지 옵션이 있었습니다.

+ + + +

이러한 두 가지 접근법은 사이트를 디자인하는 사람의 화면에서 가장 보기 좋은 웹 사이트로 귀결되는 경향이 있었습니다! 유동 사이트는 (아래에서 볼 수 있듯이) 디자이너의 화면보다 더 작은 화면에는 찌부러진 디자인이 나오고, 더 큰 화면에는 읽을 수 없을 정도로 길이가 긴 라인을 만들어냅니다.

+ +
두 개의 열이 있는 조판이 모바일 크기 뷰포트에서 찌부러집니다. +
+
+ +
+

주석: 여기 간단한 유동 조판을 보세요: 예제, 소스 코드. 예제를 보면 브라우저 창을 안팎으로 드래그하여 서로 다른 크기에 반응해 어떻게 보이는지 확인합니다.

+
+ +

고정 폭 사이트는 (아래에서 보듯) 사이트 너비보다 작은 화면상에 수평 스크롤 막대가 생기는 위험이 있고 더 큰 화면상에서는 웹디자인 가장자리에 많은 흰색 공간이 생길 위험이 있습니다.

+ +
이동 뷰포트에 수평 스크롤 막대가 있는 조판입니다. +
+
+ +
+

주석: 여기 간단한 고정 너비 조판을 보세요: 예제, 소스 코드. 역시 브라우저 창 크기를 변경할 때 결과를 관찰하세요.

+
+ +
+

주석: 상단 화면는 파이어폭스 개발툴 안에서 반응형 디자인 모드을 사용해 갈무리 한 것입니다.

+
+ +

모바일 웹이 첫 번째 피처폰의 등장으로 현실화되기 시작하면서 모바일을 수용하고자 하는 회사들은 일반적으로 (종종 m.example.com 또는 example.mobi 이런 식의) 서로 다른 URL를 사용하여 그들의 사이트의 특별한 모바일 버전을 만들게 됩니다. 이는 해당 사이트의 두 가지 별도 버전을 개발하고 최신 상태로 유지해야 한다는 것을 의미했습니다.

+ +

게다가, 이러한 모바일 사이트들을 경험해보면 종종 매우 축소된 기능을 제공합니다. 모바일 장치가 더욱 강력해지고 전체 웹 사이트를 표시할 수 있게 되면서, 그러한 기능 축소 모바일 버전 사이트에 갖힌 자신을 발견한 모바일 사용자들은 그들이 알고 있는 해당 사이트의 전체 기능이 있는 데스크탑 버전의 정보에 접근할 수 없었기에 좌절감을 안겨주었습니다.

+ +

반응형 디자인의 전신 가변 조판

+ +

유동 및 고정 너비의 웹사이트 구축 방법의 단점을 해결하기 위해 여러 가지 접근법이 개발되었습니다. 2004년 카메론 아담스는 다양한 화면 해상도에 적응할 수 있는 디자인을 만드는 방법을 설명하는 해상도 의존 조판이라는 제목의 게시물을 작성했습니다. 이 접근방식은 화면 해상도를 감지하고 정확한 씨에스에스를 로드하려면 자바스크립트가 필요했습니다.

+ +

조이 미클리 길렌워터는 그녀의 작업을 통해 화면을 채우는 것과 완전히 고정된 화면 크기 사이를 만족시키는 평균값을 찾으려고 시도하는 등 가변적인 사이트를 만들 수 있는 다양한 방법을 기술하고 공식화하는 데 산파 역할을 했습니다.

+ +

반응형 디자인

+ +

반응형 디자인이라는 용어는 2010년 이단 마르코트가 만든 신조어로 세 가지 기술을 조합한 용법을 설명하고 있습니다.

+ +
    +
  1. 첫 번째는 이미 길렌워터에 의해 탐구되고 있던 유동 격자라는 아이디어였으며, 마르코트의 유동 격자란(2009년 A List Apart에 발표) 문서에서 읽을 수 있다.
    2. +
  2. 두 번째 기술은 유동 이미지라는 개념이다. max-width 속성을 100%로 설정하는 매우 간단한 기술을 사용하면 이미지의 포함된 열이 이미지의 고유 크기보다 좁아지면 이미지가 더 작아지지만 더 커지지는 않습니다. 이것은 이미지가 대열이탈이 아니라 가변적인 크기의 열에 맞게 축소될 수 있지만 열이 이미지보다 넓어지면 확대되지 않고 픽셀화될 수 있습니다.
    3. +
  3. 세 번째 핵심 구성요소는 미디어 쿼리였습니다. 미디어 쿼리는카메론 아담스가 앞서 자바스크립의 사용을 탐구했던 조판 전환 유형을 씨에스에스만을 사용하여 실현합니다. 모든 화면 크기마다 하나씩 조판을 부여하기 보다는 조판을 변경할 수 있었다. 사이드바를 작은 화면에 맞게 재배치하거나 대체 탐색 매뉴를 표시할 수 있습니다.
    4. +
+ +

반응형 웹 디자인은 별도의 기술이 아니다라는 것을 이해하는 것이 중요합니다. 즉, 웹 디자인에 대한 접근 방식이나 콘텐츠를 보는데 사용되는 장치에 반응할 수 있는 조판 생성에 사용되는 모범 사례 집합을 기술하는 데 사용되는 용어다. 마르코트의 원래 연구에서 이것은 (부동체를 사용하는) 가변 격자와 미디어 쿼리를 의미했지만, 그의 문서가 쓰여진지 거의 10년 만에 반응형으로 동작하는 것이 기본값이 되었다. 현대의 씨에스에스 조판 메서드는 본질적으로 반응형이며 반응형 사이트 설계를 쉽게하기 위해 웹 플랫폼에 새로운 요소들이 내장되어 있습니다.

+ +

이 문서의 나머지 절에서는 반응형 사이트를 만들 때 사용할 수 있는 다양한 웹 플랫폼 기능에 대해 안내할 것입니다.

+ +

미디어 쿼리

+ +

반응형 디자인은 오롯이 미디어 쿼리 때문에 등장할 수 있었습니다. 미디어 쿼리 수준 3 규격은 2009년 권장사항 후보가 되었으며, 이는 브라우저에서 구현할 준비가 되어 있음을 의미합니다. 미디어 쿼리에서는 일련의 테스트를 실행할 수 있습니다(예로 사용자의 화면이 특정 너비나 특정 해성도보다 큰지 여하에 따라). 씨에스에스를 선택적으로 적용하여 사용자의 필요에 따라 페이지를 적절하게 스타일링합니다.

+ +

예를 들어, 아래 미디어 쿼리는 현재 웹 페이지가 화면 미디어로 표시되고 있는지(따라서 인쇄된 문서가 아님) 확인하며 뷰포트는 적어도 800픽셀 너비인지 테스트합니다. .container 선택기는 씨에스에스는 이 두 가지가 사실인 경우에만 적용됩니다.

+ +
@media screen and (min-width: 800px) {
+  .container {
+    margin: 1em 2em;
+  }
+} 
+
+ +

스타일시트에 여러 미디어 쿼리를 추가하여 다양한 화면 크기에 맞는 최적의 전체 조판 또는 조판의 일부를 조정할 수 있습니다. 미디어 쿼리가 도입되고 조판이 변경된 지점을 breakpoints(분기점)라고 합니다.

+ +

미디어 쿼리를 사용할 때 일반적인 접근법은 좁은 화면 장치(예: 휴대폰)에 대한 간단한 단일 열 조판을 만든 다음, 큰 화면인지 점검하고, 화면 폭이 충분하다는 것을 알게 될 때 다단 조판을 구현하는 것이다. 이를 모바일 우선 디자인이라고 표현하는 경우가 많다.

+ +

미디어 쿼리에 대한 MDN 문서를 더 찾아보십시요.

+ +

가변 격자

+ +

반응형 사이트는 분기점 전후로 자체 조판을 변경할 뿐만 아니라 가변 격자상에도 동일하게 구축됩니다. 가변 격자는 현존하는 모든 장치 크기를 공략 대상으로 삼을 필요가 없으며, 그 대상에 대한 완벽한 픽셀 조판을 구축할 필요가 없다는 것을 의미합니다. 완벽한 픽셀 접근 방식은 존재하는 다양한 크기의 장치들이 엄청나게 많고, 적어도 데스크톱에서는 사람들이 항상 브라우저 창을 최대화하지는 않는다는 사실을 감안할 때 불가능할 것입니다.

+ +

가변 격자를 사용하면 요소를 분기점에 추가하고, 콘텐츠가 불량으로 보이기 시작하는 지점에서 디자인을 변경할 수 있습니다. 예를 들어, 화면 크기가 커지면 라인 길이가 읽을 수 없게 길어지거나 상자가 좁아질 때 각 라인에 두 단어로 찌브러집니다.

+ +

반응형 디자인 초창기에는 조판 기능을 수행하는 유일한 옵션은 부동체를 사용하는 것이 었습니다. 가변 부동 조판은 각 요소에 백분율 너비를 부여하고 조판 전체의 너비가 100%를 넘지 않도록 보장함으로써 달성되었습니다. 마르코트는 유동 격자와 관련 그의 원래 작품에서 픽셀을 사용하여 설계된 조판을 채택하여 백분율로 변환하는 공식을 상세히 설명했습니다.

+ +
target / context = result 
+
+ +

예를 들어, 목표 열 크기가 60픽셀이고, 거기에 들어갈 상황(혹은 컨테이너)가 이 960픽셀이면, 씨에스에스에서 사용할 수 있는 값을 얻기 위해 우선 60픽셀을 960픽셀로 나누고 거기에 소수점을 오른쪽으로 두칸 이동합니다.

+ +
.col {
+  width: 6.25%; /* 60 / 960 = 0.0625 */
+} 
+
+ +

이 접근 방식은 오늘날 웹상에 여러 곳에서 발견될 것이며, 여기 우리의 레거시 조판 메서드 문서의 조판 절에 문서화되어 있습니다. 여러분이 업무 중에 이 접근법을 사용하는 웹 사이트를 발견할 가능성이 높기 때문에 부동 기반의 가변 조판을 사용하여 현대적인 사이트를 구축하지는 않겠지만, 그 내용을 이해할 가치는 있습니다.

+ +

다음 예제에서는 미디어 쿼리와 가변 격자를 사용하여 간단한 반응형 디자인를 보여줍니다. 좁은 화면상에서는 상자가 상대 요소 위해 겹겹이 쌓여지는 조판 형태로 표시됩니다.

+ +
상자 무리가 상대 요소의 상단에 수직으로 겹겹이 쌓이는 모바일뷰 조판입니다. +

On wider screens they move to two columns:

+ +
+
+ +
2단 조판이 적용된 데스크탑 뷰입니다. +
+
+ +
+

주석: 여러분은 여기서 실례를 찾아볼 수 있으며, 이 예제에 대한 소스 코드를 깃허브에서 찾을 수 있습니다.

+
+ +

현대 조판 기술

+ +

다단 조판과 가변상자와 격자와 같은 현대 조판 메서드는 기본값으로 응답형입니다. 그것들은 모두 여러분이 가변 격자를 만들려 한다고 가정하고 그렇게 동작하도록 편리한 방법을 제공합니다.

+ +

다단

+ +

이러한 조판 메서드 중 가장 오래된 것은 다단입니다. 여러분이 column-count를 지정하면, 이는 여러분이 콘텐츠를 나누고자 하는 단의 숫자를 나타냅니다. 그런 다음 브라우저는 다단의 크기를 화면 크기에 따라 변경되는 크기로 계산합니다.

+ +
.container {
+  column-count: 3;
+} 
+
+ +

column-width을 지정하는 대신 minimum 너비를 지정하는 것입니다. 브라우저는 컨테이너에 안착할 수 있는 만큼으로 지정한 해당 너비를 가진 열을 최대한 많이 생성하고 난 뒤에 다음 모든 열 사이에서 나머지 공간을 공유합니다. 따라서 열의 수는 공간이 얼마나 되는지에 따라 달라집니다.

+ +
.container {
+  column-width: 10em;
+} 
+
+ +

가변상자

+ +

가변상자에서 가변 항목은 초깃값 동작으로 컨테이너의 공간에 따라 항목 사이의 공간을 축소하고 분배합니다. flex-grow 및 flex-shrink 값을 변경하면 해당 항목에 주어진 주변 공간이 남거나 모질라게 될 경우 원하는 동작 방식을 표기할 수 있습니다.

+ +

아래 예제에서 가변 항목은 가변 컨테이너 안에서 각각 동일한 양의 공간을 차지하며, 가변상자: 가변 항목의 가변 크기 조정에서 설명했듯이 flex: 1식의 약칭을 사용할 수 있습니다.

+ +
.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+} 
+
+ +
+

참고: 예제로써 상기된 간단한 반응형 조판을 재구축했는데 이번에는 가변상자를 사용했습니다. 여러분은 더 이상 낮설은 백분율 값을 사용하여 열의 크기를 계산할 필요가 없는 방법을 보게 됩니다: 예제, 소스 코드.

+
+ +

씨에스에스 격자

+ +

씨에스에스 격자 조판에서 fr 단위는 격자 트랙 전역에 걸쳐 이용할 수 있는 공간을 분배할 수 있습니다. 다음 예에서는 1fr 크기의 트랙 3개가 있는 격자 컨테이너를 만듭니다. 이렇게 하면 3개의 열 트랙이 생성되며, 각 트랙은 컨테이너에 있는 사용 가능한 공간\의 한 부분을 차지합니다. 여러분은 fr 단위를 포함한 가변 격자라는 격자 조판 학습 주제에서 격자를 생성하는 이같은 접근 방식에 대해 자세히 알 수 있습니다.

+ +
.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} 
+
+ +
+

참고: 격자 조판 버전은 .wrapper 예제상에 열을 정의할 수 있으므로 더 간단합니다: 소스 코드.

+
+ +

반응형 이미지

+ +

반응 이미지에 대한 가장 간단한 접근법은 반응형 디자인에 관한 마르코트의 초창기 문서에서 설명한 바와 같습니다. 기본적으로 필요한 최대 크기의 이미지를 촬영하여 그것을 축소할 수 있습니다. 이것은 오늘날에도 사용되는 접근법이며 대부분의 스타일 시트에서 다음과 같은 씨에스에스를 어디선가는 발견할 수 있습니다.

+ +
img {
+  max-width: 100%:
+} 
+
+ +

이 접근법에는 명백한 단점이 있습니다. 해당 이미지는 고유 크기보다 훨씬 작게 표시될 수 있어 대역폭 낭비입니다. 다시말해 모바일 사용자는 브라우저 창에서 실제로 보는 것의 몇 배 크기의 이미지를 다운로드하게 되니 낭비입니다. 또한, 데스크톱과 같은 이미지 가로 세로 비율을 모바일에서 원하지 않을 수도 있습니다. 예를 들어, 모바일의 경우 정사각형 이미지가 좋을 수 있지만 데스크톱상에는 같은 이미지를 가로 보기처럼 장면을 보여줍니다. 또는 모바일 상의 이미지의 크기가 작다는 것을 이해하면서도 서로 다른 이미지를 모두 보여주고 싶을 경우가 있습니다. 말하자면 작은 화면 크기에서 더 쉽게 해석될 수 있는 이미지를 말합니다. 이런 것들은 단순히 이미지를 축소해서는 달성할 수 없습니다.

+ +

반응형 이미지는 <picture> 요소와 <img>, srcset과 sizes 속성은 이러한 문제를 모두 해결합니다. 여러분은 "힌트"(이미지에 가장 적합한 화면 크기와 해상도를 설명하는 메타 데이터)와 함께 여러 크기를 제공할 수 있으며, 브라우저는 각 장치에 가장 적합한 이미지를 선택하며, 사용자가 사용하고 있는 장치에 적합한 이미지 크기를 다운로드할 수 있도록 담보합니다.

+ +

또한 다른 화면 크기에서 사용되는 이미지를 art direct할 수 있으므로 서로 다른 화면 크기에 대해 서로 다른 자르기 또는 완전히 다른 이미지를 제공할 수 있습니다.

+ +

이곳 MDN 사이트의 에이치티엠엘 학습 섹션에서 반응형 이미지에 대한 자세한 안내서를 찾을 수 있습니다.

+ +

반응형 타이포그래피

+ +

반응형 타이포그래피 개념은 이전 작업에서 다루지 않은 반응형 디자인의 요소입니다. 본질적으로, 이것은 화면 부동산의 크기가 더 작아지거나 더 커지거나하는 것을 반영하기 위해 미디어 쿼리 구문 안에서 폰트 크기를 변경하는 것을 말합니다.

+ +

이 예제에서 우리는 수준 1 머리글을 4rem로 설정하려고 합니다. 즉, 기본 글꼴 크기의 4배입니다. 정말 큰 제목이네요! 우리는 더 큰 화면 크기상에서만 이 코끼리만한 머리글을 원하기 때문에, 우리는 먼저 더 작은 머리글을 만들고, 미디어 쿼리를 사용해 조건에 맞으면 그것을 더 큰 크기로 덮어쓰기 하면됩니다. 여기서 조건은 사용자가 적어도 1200px의 화면 크기의 기기를 가진 경우가 해당됩니다.

+ +
html {
+  font-size: 1em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 4rem;
+  }
+} 
+
+ +

상기한 반응형 격자 예제를 편집했고, 거기에 더해 이미 제시된 메서드를 사용하는 응답형 유형을 포함시켰습니다. 조판이 2개의 열 버전으로 이동함에 따라 머리글 크기가 어떻게 전환하는지 볼 수 있습니다.

+ +

모바일에서는 머리글이 더 작다:

+ +
머리글 크기가 작은 스택 모양의 조판입니다. +

On desktop however we see the larger heading size:

+ +
+
+ +
큰 머리글이 딸린 두개의 열 조판입니다. +
+
+ +
+

참고: 이 예제의 실제 구현 장면: 예제, 소스 코드.

+
+ +

타이포그래피에 대한 이러한 접근 방식이 보여주듯이, 미디어 쿼리를 제한하여 페이지 조판만 변경할 필요는 없습니다. 그들 접근법을 사용하여 어떤 요소라도 조정해서 대체 화면 크기에 맞는 더 유용하고 매력적인 요소를 만들 수 있다.

+ +

반응형 타이포그래피에 대한 뷰포트 단위 사용하기

+ +

흥미로운 접근 방식은 반응형 타이포그래피를 사용하기 위해 뷰포트 단위 vw를 사용할 수 있다는 점이다. 1vw는 뷰포트 너비의 1%와 동일하며, vw를 사용하여 글꼴 크기를 설정하면 항상 뷰포트 크기와 관련이 있다는 것을 의미한다.

+ +
h1 {
+  font-size: 6vw;
+}
+ +

위의 작업 수행에서의 문제는 사용자가 vw 단위를 사용하여 텍스트 집합을 확대/축소하는 기능을 상실하는 데 있다. 따라서 여러분은 뷰포트 단위만으로 텍스트를 설정해서는 안 된다.

+ +

해결책이 하나 있다. calc()를 사용하는 것이다. 즉, em와 같은 고정된 크기를 사용하여 속성값 집합에 vw 단위를 추가하면 텍스트는 여전히 확대/축소할 수 있다. 본질적으로 vw 단위는 확대/축소 값에 더해 추가된다.

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

즉, 머리글에 대한 폰트 크기를 한 번만 지정하면 된다. 크기를 모바일용으로 따로 설정할 게 아니라 미디어 쿼리 내에서 크기를 재정의한다는 말이다. 그러면 뷰포트의 크기가 커질수록 글꼴은 점차 커진다.

+ +
+

이에 대한 예제의 실현: 예제, 소스 코드.

+
+ +

뷰포트 메타 테그

+ +

응답형 페이지의 에이치티엠엘 소스를 보면 일반적으로 문서의 <head>에서 다음과 같은 {{htmlelement("meta")}} 태그를 볼 수 있다.

+ +
<meta name="viewport" content="width=device-width,initial-scale=1">
+
+ +

이 메타 태그는 뷰포트의 너비를 장치의 너비로 설정하여 문서를 의도한 크기의 100%로 확장해야 한다고 모바일 브라우저에게 알려줍니다. 이로써 여러분이 의도한 대로 모바일에 최적화된 크기로 문서를 표시합니다.

+ +

왜 이런 것이 필요할까요? 모바일 브라우저는 뷰포트 너비에 대해 거짓말을 하는 경향이 있기 때문이다.

+ +

이 메타 태그는 원래 iPhone이 출시되고 사람들이 작은 전화 화면에서 웹 사이트를 보기 시작했을 때 대부분의 사이트가 모바일 최적화되지 않았기 때문에 존재합니다. 따라서 모바일 브라우저는 뷰포트 너비를 960픽셀로 설정하게 됩니다. 해당 너비로 페이지를 렌더링하고, 그 결과를 데스크톱 조판의 확대 버전으로 표시합니다. 다른 모바일 브라우저(예를 들어 구글 안드로이드)도 똑같은 일을 합니다. 사용자들은 웹사이트를 확대하고 이리저리 끌어 옮기며(panning) 그들이 관심을 갖는 부분을 볼 수 있었지만, 모양이 형편 없었습니다. 만약 여러분이 반응형 디자인이 아닌 사이트를 우연히 발견하게 된다면, 여러분은 오늘날에도 이런 걸 보게 될 것입니다.

+ +

문제는 분기점과 미디어 쿼리를 포함하는 응답형 디자인이 모바일 브라우저에서 의도한 대로 작동하지 않는다는 점에 있습니다. 여러분이 480px 뷰포트 너비나 그 이하에서 시작하는 좁은 화면 조판을 갖고 있고 뷰포트가 960px로 설정되어 있다면 좁은 화면 조판을 모바일에서 절대 볼 수 없게 된다. width=device-width를 설정하면 애플의 기본값인 width=960px를 장치의 실재 너비로 재지정하므로 당신의 미디어 쿼리가 의도한 대로 작동합니다.

+ +

따라서 에이치티엠엘 문서의 헤더 부분에 상기 에이치티엠엘 라인을 항상 포함해야 합니다.

+ +

뷰포트 메타 태그와 함께 사용할 수 있는 다른 설정이 있지만 일반적으로 상기 에이치티엠엘 라인이면 여러분이 사용하고자 하는 내용에 해당합니다.

+ + + +

여러분은 minimum-scale와 maximum-scale 사용을 피해야하며, 특히 user-scalable를 no로 설정하는 것도 피해야 합니다. 사용자는 필요한 만큼 확대하거나 축소할 수 있어야 합니다.이를 방지하면 접근성 문제가 발생합니다.

+ +
+

참고: 뷰포트 메타 태그를 대체하기 위해 고안된 씨에스에스 @ 규칙이 있습니다. @viewport 그러나 브라우저 지원이 매우 형편없습니다. 그것은 인터넷 익스플로러와 에지에서 구현되었지만, 일단 크롬 기반 에지가 출시되면 더 이상 에지 브라우저의 일부가 되지 않게 됩니다.

+
+ +

요약정리

+ +

반응형 디자인은 디자인이 보여지는 당해 환경에서 반응하는 사이트 및 애플리케이션 디자인을 말합니다. 그것은 많은 씨에스에스와 에이치티엠엘 기능과 기술을 망라하며 이제 기본값으로 우리가 웹사이트를 구축할 때 필수적인 방법입니다. 여러분이 휴대폰으로 방문하는 사이트를 생각해보세요. 데스크톱 버전이 축소된 사이트, 또는 사물을 찾기 위해 옆으로 스크롤해야 하는 사이트를 우연히 발견한다는 것은 상당히 이례적인 일일 것입니다. 그렇게 된 것은 웹이 반응형으로 디자인하는 접근방식으로 옮겨갔기 때문입니다.

+ +

또한 이번 단원에서 배운 조판 메서드의 도움으로 반응형 디자인을 달성하기가 훨씬 쉬워졌습니다. 여러분이 당대 웹 개발에 신출내기라면, 반응형 디자인 초창기보다 훨씬 많은 도구가 마련되어 있으니 맘껏 이용하십시요. 따라서 당신이 참조하고 있는 어떤 자료의 연혁을 확인할 가치가 있습니다. 역사적 기록 문서로서 여전히 유용하지만, 사이트 방문자가 이용하는 장치가 무엇이건 관계없이 우아하고 유용한 디자인을 훨씬 쉽게 생성하려면 씨에스에스와 에이치티엠엘의 현대적 용법이 정답입니다.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}

+ +

이번 단위에는

+ + diff --git a/files/ko/learn/css/css_layout/supporting_older_browsers/index.html b/files/ko/learn/css/css_layout/supporting_older_browsers/index.html new file mode 100644 index 0000000000..07910a4d26 --- /dev/null +++ b/files/ko/learn/css/css_layout/supporting_older_browsers/index.html @@ -0,0 +1,248 @@ +--- +title: 이전 브라우저 지원 +slug: Learn/CSS/CSS_layout/이전_브라우저_지원 +tags: + - 가변상자 + - 격자 + - 기능 쿼리 + - 레거시 + - 부동체 + - 씨에스에스 + - 안내서 + - 조판 + - 초보자 + - 학습 +translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

+ +

이 모듈에서는 Flexbox 및 Grid를 디자인의 기본 레이아웃 메서드로 사용할 것을 권고합니다. 그러나 당신이 사용한 메서드를 지원하지 않는 브라우저나 이전 브라우저를 사용해 당신의 사이트를 방문하는 사람들이 있을 겁니다. 이런 일은 웹상에서 항상 있는 일입니다. 즉 새로운 기능이 개발됨에 따라 서로 다른 브라우저가 서로 다른 것들의 우선 순위를 정합니다. 이 문서는 구식 기술의 사용자들을 외면하지 않고도 최신 웹 기술을 사용하는 방법에 대해 설명합니다.

+ + + + + + + + + + + + +
선결 사항:HTML 기본 (HTML 입문 학습), CSS의 작동 방식 CSS 입문 및 (상자 양식 지정 학습)
목표:여러분이 사용하려는 기능을 지원하지 않을 수있는 이전 브라우저에서 레이아웃을 지원하는 방법을 파악합니다.
+ +

당신의 사이트 브라우저 지향은?

+ +

모든 웹사이트는 공략 대상에 따라 달라집니다. 접근 방식을 결정하기 전에 이전 브라우저를 사용하여 사이트를 방문하는 방문자 수를 확인하십시오. 사람들이 사용중인 기술을 알려주는 분석 기능(예: Google analytics)을 이용할 수 있고, 추가 및 교체할 기존 웹 사이트가 있는 경우 이는 간단한 작업입니다. 당신이 분석툴이 없거나, 이번이 완전히 새로운 사이트 개설이라면 Statcounter같은 위치별로 필터링된 통계를 제공할 수 있는 사이트가 있습니다.

+ +

또한 사람들이 여러분의 사이트를 이용하는 방식이나 장치 유형을 고려해야만 합니다. 예를 들어 모바일 장치 이용 방문자가 평균치를 웃돌거라는 예상을 할 수 있습니다. 접근성 및 보조 기술을 사용하는 사람들은 항상 고려해야하지만 일부 사이트에서는 그 점이 더욱 중요할 수 있습니다. 필자의 경험에 따르면 개발자들은 종종 이전 버전의 인터넷 익스플로러 사용자 1%에 대해 매우 걱정하는 반면, 더 많은 사용자 층인 내게 필요한 옵션 사용자에 대해선 전혀 고려하지 않습니다.

+ +

당신이 사용하려는 기능에 대한 지원은 어떻습니까?

+ +

사이트에 들어오는 브라우저를 알면, 해당 대상에 사용하고 싶은 기술을 평가할 수 있고, 그리고 그 기술을 이용할 수 없는 방문객들에게 얼마나 쉽게 대안을 제공할 수 있는지 진단할 수 있습니다. 우리는 CSS 속성을 상세히 설명하는 각 페이지에 대한 브라우저 호환성 정보를 모질라 개발자 네트워크에서 제공함으로써 쉽게 사용할 수 있도록 노력하고 있습니다. 예를 들어, {{cssxref("grid-template-columns")}} 페이지를 살펴보십시오. 이 페이지의 맨 아래에는 이 속성을 지원하기 시작한 버전과 함께 주요 브라우저가 나열된 표가 있습니다.

+ +

+ +

기능이 얼마나 잘 지원되는지 확인하는 또 다른 일반적인 방법은 Can I Use 웹 사이트입니다. 이 사이트에는 대부분의 웹 플랫폼 기능이 브라우저 지원 상태에 대한 정보와 함께 나열됩니다. 위치별로 사용 통계를 볼 수 있습니다. 주로 특정 지역의 사용자가있는 사이트에서 작업하는 경우 유용합니다. Google 웹 로그 분석 계정을 연결하여 사용자 데이터를 기반으로 분석할 수도 있습니다.

+ +

사용자의 브라우저가 보유한 기술과 당신이 사용하려는 것에 대한 지원을 이해하면 당신은 좋은 상황에서 모든 결정을 내리고 모든 사용자를 가장 잘 지원할 수있는 방법을 알 수 있습니다.

+ +

지원하는 것과 '모양이 똑같다'는 말은 다르다

+ +

일부 사용자는 휴대 전화로 사이트를 보고 다른 사용자는 대형 데스크톱 화면에서 사이트를 보고 있기 때문에 모든 브라우저에서 웹 사이트가 동일하게 보이지 않을 수 있습니다. 마찬가지로 일부 사용자는 이전 브라우저 버전을 갖고 있고 다른 사용자에게는 최신 브라우저를 갖고 있습니다. 일부 사용자는 화면 읽기 프로그램을 사용해 내용을 읽거나 페이지를 확대하여 읽을 수도 있습니다. 모든 사람을 지원한다는 것은 방어적으로 디자인된 콘텐츠 버전을 제공하여 최신 브라우저에서는 사이트 외관이 뛰어나지만, 이전 브라우저 사용자에게는 기본 수준으로 계속 사용할 수 있음을 의미합니다.

+ +

기본적인 지원 수준이란 페이지의 일반적인 흐름이 이해되도록 콘텐츠를 잘 구성하는 것에서 출발합니다. 기능이 매우 제한적인 전화기 사용자는 많은 CSS를 얻을 수 없지만, 콘텐츠는 쉽게 읽을 수 있는 방식으로 나열됩니다. 따라서 항상 잘 구성된 HTML 문서에서 출발해야 합니다. 여러분의 스타일 시트를 제거했을 때, 컨텐츠가 여전히 잘 이해되나요?

+ +

한 가지 옵션은 아주 오래된 브라우저나 제한된 브라우저를 사용하는 사람들이 찾을 수 있는 대체 페이지로 사이트 외관을 단순화하는 것입니다. 문제가 되는 해당 브라우저를 사용해 소수의 사람들이 사이트를 방문하는 경우 최신 브라우저 사용자들과 비슷한 체험을 그들에게 제공하기 위해 시간을 쏟는 것이 상업적으로 맞지 않을 겁니다. 사이트의 접근성을 높이고 더 많은 사용자에게 서비스를 제공하는 일에 시간을 투자하는 것이 더 좋을 겁니다. 평범한 HTML 페이지와 온갖 장신구가 포함된 페이지 사이에는 중간 지점이 있으며 CSS는 실제로 이러한 대체 페이지를 매우 간단하게 생성해 줍니다.

+ +

CSS로 대체 페이지 생성하기

+ +

CSS 규격에는 두 가지 레이아웃 메서드가 동일한 항목에 적용될 때 브라우저가 수행하는 작업을 설명하는 정보가 포함되어 있습니다. 즉, 부동체 항목이 한편으로는 CSS grid 레이아웃을 사용하는 grid 항목인 경우 발생하는 상황에 대한 정의가 있음을 의미합니다. 이 정보가 브라우저가 이해하지 못하는 CSS를 무시한다는 지식과 결합되어, 이미 다루었던 레거시 기술을 사용하여 간단한 레이아웃을 생성할 수 있는 방법이 있습니다. 그런 다음 이를 최신 브라우저에서는 grid 레이아웃으로 덮어씁니다.

+ +

아래 예에서는 세 개의 <div> 부동체를 행으로 표시했습니다. CSS grid 레이아웃을 지원하지 않는 브라우저는 상자 행을 부동 레이아웃 (浮動 組版) 으로 간주합니다. grid 항목이 되는 부동 항목은 부동 동작을 상실합니다. 즉, .wrapper 클레스를 grid 컨테이너로 전환하면 부동 항목이 grid 항목이 됩니다. 브라우저가 grid 레이아웃을 지원하는 경우 grid 디스플레이를 표시합니다. 지원하지 않으면 display: grid 관련 속성은 무시되고 부동 레이아웃이 사용됩니다.

+ +
+
* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+ +
<div class="wrapper">
+  <div class="item">항목 하나</div>
+  <div class="item">항목 둘</div>
+  <div class="item">항목 셋</div>
+</div>
+
+ +

{{ EmbedLiveSample('예제1', '100%', '200') }}

+
+ +
+

참고: {{cssxref("clear")}} 속성도 마찬가지로 정리된 항목이 grid가 되자마자 효력을 상실합니다. 따라서 정리된 footer가 딸린 레이아웃을 가질 수 있으며, 이 레이아웃이 grid 레이아웃으로 전환됩니다.

+
+ +

대체 메서드

+ +

이 부동 예제와 비슷한 방식으로 사용할 수있는 여러 레이아웃 메서드가 있습니다. 당신이 생성해야하는 레이아웃 패턴에 가장 적합한 것을 선택할 수 있습니다.

+ +
+
Float(부동) 및 clear
+
위에서 볼 수 있듯이, 부동 또는 정리 속성이 레이아웃에 미치는 효과는 부동되거나 정리된 항목이 flex 또는 grid 항목이 되면 중단됩니다.
+
display: inline-block
+
이 방법을 사용하여 열 레이아웃을 생성할 수 있는 경우는 항목이 display: inline-block로 설정되었을 경우이지만, flex 또는 grid 항목이 된다면 인라인 블록 동작은 무시됩니다.
+
display: table
+
CSS 테이블을 생성하는 메서드는 해당 단원의 입문서가 대체품으로 활용될 수 있습니다. CSS 테이블 레이아웃으로 설정된 항목은 그들이 flex 또는 grid 항목이 될 경우 자기 동작을 상실하게 됩니다. 중요하게는 테이블 구조를 수정하기 위해 생성된 익명 상자는 생성되지 않습니다.
+
다단 레이아웃
+
특정 레이아웃의 경우 당신은 다단을 대체품로 사용할 수 있습니다. 여러분의 콘테이너가 column-* 속성에 속한 것으로 정의되었다면 grid 컨테이너가 될 것이고, 다단 동작은 발생하지 않습니다.
+
grid 대체품 역할인 Flexbox
+
Flexbox는 인터넷 익스플로러 10과 11이 지원하기 때문에 grid를 지원하는 브라우저가 훨씬 많이 있습니다. 다만 이 단원의 뒷부분에서 설명하고 있는 구형 브라우저에서 flex를 지원하기 위한 처리 방법에 대해서도 확인해보세요. flex 컨테이너를 grid 컨테이너로 만들면 자식에 적용된 모든 flex () 속성은 무시됩니다.
+
+ +

구형 브라우저에서 레이아웃 조정이 많이 필요한 경우 CSS를 이런 식으로 사용하면 괜찮은 경험을 할 수 있습니다. 오래되고 잘 지원되는 기술을 기반으로 간단한 레이아웃을 추가한 다음 최신 CSS를 사용하여 잠재 고객의 90% 이상이 볼 수있는 레이아웃을 만듭니다. 그러나 대체 코드에 새 브라우저가 해석할 내용이 포함되어야하는 경우가 있습니다. 이에 대한 좋은 예는 부동 항목에 백분율 너비를 추가하여 열을 마치 grid 디스플레이처럼 보이도록 컨테이너를 채울 수 있도록 (너비를) 늘리는 경우입니다.

+ +

부동 레이아웃에서 백분율은 컨테이너를 기준으로 계산됩니다. 33.333%는 컨테이너 너비의 3 분의 1입니다. 그러나 grid에서는 항목이 배치된 grid 영역을 기준으로 33.333%가 계산되므로 grid 레이아웃이 도입되면 실제로 원하는 크기의 3분의 1이 됩니다.

+ +
+
* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+
+ +
<div class="wrapper">
+  <div class="item">항목 하나</div>
+  <div class="item">항목 둘</div>
+  <div class="item">항목 셋</div>
+</div>
+
+ +

{{ EmbedLiveSample('예제2', '100%', '200') }}

+
+ +

이 문제를 해결하려면 grid가 지원되는지 여부와 너비가 재정의되는지 여부를 감지할 수있는 방법이 필요합니다. CSS가 우리를 위해 마련한 해결책은 이렇습니다.

+ +

Feature queries

+ +

feature queries를 사용하면 브라우저가 특정 CSS 기능을 지원하는지 테스트 할 수 있습니다. 즉, 특정 기능을 지원하지 않는 브라우저 용 CSS를 작성한 다음 브라우저가 지원되는지 여부와 멋진 레이아웃을 제공하는지 확인하십시오.

+ +

위의 예제에 feature query를 추가하면 grid가 지원됨을 알고 있는 경우 이 feature query를 사용하여 항목 너비를 auto () 으로 다시 설정할 수 있습니다.

+ +
+
* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+
+@supports (display: grid) {
+  .item {
+      width: auto;
+  }
+}
+
+ +
<div class="wrapper">
+  <div class="item">항목 하나</div>
+  <div class="item">항목 둘</div>
+  <div class="item">항목 셋</div>
+</div>
+
+ +

{{ EmbedLiveSample('예제3', '100%', '200') }}

+
+ +

feature query에 대한 지원은 최신 브라우저에서 매우 유용하지만 CSS grid를 지원하지 않는 브라우저는 feature query도 지원하지 않는다는 점에 유의해야합니다. 이는 위에서 설명한 접근 방식이 해당 브라우저에서 작동한다는 것을 의미합니다. 우리가 하는 작업은 feature query를 차치하고 먼저 이전 CSS를 작성하는 것입니다. grid를 지원하지 않고 feature query를 지원하지 않는 브라우저는 자기가 이해할 수 있는 레이아웃 정보를 이용하고 그밖에 다른 것들은 완전히 무시할 수 있습니다. feature query를 지원하는 브라우저는 CSS grid도 지원하므로 grid 코드 및 feature query 내부의 코드를 실행합니다.

+ +

feature query 규격에는 브라우저가 기능을 지원하지 않는지 테스트하는 기능도 포함되어 있습니다. 이는 브라우저가 feature query를 지원하는 경우에만 유용합니다. feature query를 지원하지 않는 브라우저가 갈수록 사라짐에 따라 미래에는 지원 부족 여부를 확인하는 방법은 작동하게 됩니다. 그러나 지금은 최상의 지원을 위해 이전 CSS를 사용한 다음 덮어 쓰는 방식을 사용하십시오.

+ +

Flexbox 예전 버전

+ +

이전 버전의 브라우저에서는 이전의 Flexbox 명세가 반복되는 것을 여러분은 발견할 수 있습니다. 글을 쓰는 시점에서 이것은 Flexbox에 -ms- 접두사를 사용하는 인터넷 익스플로러 10의 문제입니다. 이는 또한 오래된 문서와 자습서가 있음을 의미합니다. 이 유용한 안내서는 보고있는 내용을 확인하는 데 도움이되고 매우 오래된 브라우저에서 flex 지원이 필요한 경우에도 도움이 될 수 있습니다.

+ +

인터넷 익스플로러 10과 11 접두사 버전

+ +

CSS grid 규격은 인터넷 익스플로러 10에서 처음 나온 원형이었습니다. 즉, 인터넷 익스플로러 10 및 11에는 최신 grid 지원이 없지만, 이 사이트에 문서화된 최신 규격과는 다르나 매우 유용한 그리드 레이아웃 버전이 있습니다. 인터넷 익스플로러 10 및 11 구현은 -ms- 접두사를 사용해 해당 그리드를 마이크로소프트 브라우저에 사용할 수 있으며 이외의 브라우저에서는 무시됩니다. 에지 브라우저는 여전히 이전 구문을 이해하므로 현대 그리드 CSS에서 모든 항목을 안전하게 덮어씁니다.

+ +

그리드 레이아웃의 점진적 향상에 대한 안내서는 그리드의 인터넷 익스플로러 버전을 이해하는 데 도움이되며 이 단원 끝에는 별도의 유용한 링크를 포함하고 있습니다. 그러나 이전 인터넷 익스플로러 버전 사용자의 방문자 수가 매우 많지 않다면 모든 비지원 브라우저에서 작동하는 대체품을 만드는 것이 더 좋습니다.

+ +

이전 브라우저 여부 확인

+ +

Flexbox 및 그리드를 지원하는 대부분의 브라우저를 사용하면 구형 브라우저를 테스트하기가 상당히 어려울 수 있습니다. 한 가지 방법은 크로스 브라우저 테스트 단위에 설명 된대로 Sauce Labs과 같은 온라인 테스트 도구를 사용하는 것입니다.

+ +

또한 가상 컴퓨터를 다운로드하여 설치한 뒤 제약이 걸린 본인의 컴퓨터 환경에서 이전 버전의 브라우저를 실행할 수 있습니다. 이전 버전의 인터넷 익스플로러에 액세스하는 것이 특히 유용하며 이를 위해 마이크로소프트는 다양한 가상 컴퓨터를 무료로 다운로드 할 수 있도록 만들었습니다. 맥, 윈도우즈 및 리눅스 운영 체제에서 가상 컴퓨터를 사용할 수 있으므로 윈도우즈 컴퓨터를 사용하지 않더라도 이전 및 최신 윈도우즈 브라우저에서 테스트할 수있는 좋은 방법입니다.

+ +

요약정리

+ +

여러분은 이제 그리드 및 Flexbox와 같은 기술을 자신있게 사용하고, 이전 브라우저를 위한 대체품을 만들고, 향후 발생할 수 있는 새로운 기술을 활용할 수 있는 지식을 얻었습니다.

+ +

참조 항목

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

+ +

이번 단위에는

+ + diff --git "a/files/ko/learn/css/css_layout/\353\257\270\353\224\224\354\226\264_\354\277\274\353\246\254_\354\264\210\353\263\264\354\236\220_\354\225\210\353\202\264\354\204\234/index.html" "b/files/ko/learn/css/css_layout/\353\257\270\353\224\224\354\226\264_\354\277\274\353\246\254_\354\264\210\353\263\264\354\236\220_\354\225\210\353\202\264\354\204\234/index.html" deleted file mode 100644 index cf13a1421c..0000000000 --- "a/files/ko/learn/css/css_layout/\353\257\270\353\224\224\354\226\264_\354\277\274\353\246\254_\354\264\210\353\263\264\354\236\220_\354\225\210\353\202\264\354\204\234/index.html" +++ /dev/null @@ -1,424 +0,0 @@ ---- -title: 미디어 쿼리 초보자 안내서 -slug: Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서 -tags: - - 미디어 쿼리 - - 씨에스에스 - - 조판 - - 초보자 - - 학습 -translation_of: Learn/CSS/CSS_layout/Media_queries ---- -

{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

- -

CSS Media Query는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 씨에스에스를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문이다. 그러나 예를들면 사용자는 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다. 이번 단원에서는 먼저 미디어 쿼리에 사용된 구문에 대해 배우고, 이어 해당 구문을 가공의 예제에서 사용하여 간단한 디자인이 어떻게 반응할 수 있는지 살펴보겠습니다.

- - - - - - - - - - - - -
선결 사항:에이치티엠엘의 기초인 (에이치티엠엘 입문서를 공부하세요), 그리고 씨에스에스의 작동 방식을 파악하기 위해 (씨에스에스 첫걸음과 씨에스에스 구성 블록를 공부하세요.)
목표:미디어 쿼리를 사용하는 방법과 그걸 이용해 반응형 디자인을 생성하기 위한 가장 대표적인 접근법 파악하기.
- -

미디어 쿼리 기본

- -

가장 간단한 미디어 쿼리 구문은 다음과 같습니다:

- -
@media media-type and (media-feature-rule) {
-  /* CSS rules go here */
-}
- -

미디어 쿼리 구문의 구성 요소:

- - - -

미디어 유형

- -

당신이 지정할 수 있는 미디어 유형

- - - -

다음 미디어 쿼리는 페이지가 인쇄된 경우에만 본문을 12pt로 설정합니다. 페이지가 브라우저에 로드될 때에는 적용되지 않습니다.

- -
@media print {
-    body {
-        font-size: 12pt;
-    }
-}
- -
-

참고: 수준 3 미디어 쿼리 규격에 정의된 여러 가지 다른 미디어 유형이 있습니다. 이들은 사장되었으니 피해야 합니다.

-
- -
-

참고: 미디어 유형은 선택사항입니다. 미디어 쿼리에 미디어 유형을 표시하지 않으면 미디어 쿼리는 기본값으로 모든 미디어 유형에 대한 것으로 해석됩니다.

-
- -

미디어 기능 규칙

- -

미디어 유형을 지정한 뒤에 규칙을 적용할 미디어 기능을 선정할 수 있습니다.

- -

너비와 높이

- -

반응형 디자인을(그리고 광범위한 브라우저 지원이 되도록) 만들기 위해 가장 자주 탐문하는 기능은 뷰포트 너비이며, min-width와 max-width, width 등의 미디어 기능을 활용하여 뷰포트가 특정 너비 이상 또는 이하인 경우 씨에스에스를 적용할 수 있습니다.

- -

이러한 특징들은 다른 화면 크기에 반응하는 조판을 생성하는 데 사용됩니다. 예를 들어 뷰포트가 정확히 600픽셀인 경우 본문 색상을 빨간색으로 변경하려면 다음과 같은 미디어 쿼리를 사용합니다.

- -
@media screen and (width: 600px) {
-    body {
-        color: red;
-    }
-}
- -

이 예제를 브라우저에서 열거나 소스를 보세요.

- -

width(및 height) 미디어 기능은 범위 지정에 사용될 수 있다. 따라서 min- or max- 접두사를 붙이게 되면 최소값인지 최대값인지 표시할 수 있다. 예를 들어 뷰포트가 400 픽셀보다 좁은 경우 색깔을 파란색으로 만들기 위해 max-width:를 사용할 수 있다.

- -
@media screen and (max-width: 400px) {
-    body {
-        color: blue;
-    }
-}
- -

이 예제를를 브라우저에서 열거나 소스를 보세요.

- -

실제로 최소값 또는 최대값을 사용하는 것이 반응형 디자인인 경우에 훨씬 유용하므로 width 또는 height 값을 사용하는 경우는 좀처럼 흔치앖습니다.

- -

미디어 쿼리 규격 수준 4 및 5에 소개된 최신 기능 중 일부가 제한적으로 브라우저 지원이 되지만, 당신이 테스트할 수 있는 다른 여러 미디어 기능이 있습니다. 각 기능은 브라우저 지원 정보와 함께 MDN에 문서화되어 있으니만큼 당신은 미디어 쿼리 사용: 미디어 기능에서 전체 목록을 찾을 수 있습니다.

- -

방향성

- -

잘 지원되는 미디어 기능 중 하나는 orientation로 세로 모드인지 가로 모드인지를 검사할 수 있도록 해줍니다. 장치가 가로 방향에 있는 경우 본문 텍스트 색상을 변경하려면 다음과 같은 미디어 쿼리를 사용합니다.

- -
@media (orientation: landscape) {
-    body {
-        color: rebeccapurple;
-    }
-}
- -

이 예제를 브라우저에서 열거나 소스를 보세요.

- -

표준 데스크톱 뷰에는 가로 방향이 주종을 이루고 있으며, 이 가로 방향에서 잘 작동하는 디자인은 휴대폰 또는 태블릿상에서 세로 모드로 볼 때 잘 작동하지 않을 수 있습니다. (가로/세로 모드의) 방향성 테스트는 여러분이 세로 모드의 장치에 최적화된 조판을 생성할 수 있게 도움을 줄 수 있습니다.

- -

포인팅 장치의 사용

- -

수준 4 규격의 일부로 hover 미디어 기능이 도입되었다. 이 기능은 사용자가 요소 위에 (마우스 커서를) 올릴 수 있는 능력을 가진 조건인지를 시험할 수 있다는 것을 의미합니다. 본질적으로 사람들이 어떤 종류의 포인팅 장치를 사용하는지를 말합니다. 터치 스크린 및 키보드 네비게이션은 요소 위에 식별자를 올릴 수 없습니다.

- -
@media (hover: hover) {
-    body {
-        color: rebeccapurple;
-    }
-}
- -

이 예제를 브라우저에서 열거나 소스를 보세요.

- -

사용자가 포인팅 장치를 사용할 수 없다고 파악했다면 기본적으로 대화형 기능을 표시할 수 있습니다. 포인팅 장치를 사용할 수 있는 사용자의 경우 링크에 마우스를 올리는 기능을 이용하도록 선택할 수 있습니다.

- -

마찬가지로 pointer 미디어 기능이 수준 4 규격에 포함되어 있다. 이것은 none과 fine coarse의 세 가지 값을 취할 수 있다. fine 포인터는 마우스나 트랙패드와 같은 것이다. 이 값으로 사용자가 작은 영역을 정확하게 공략할 수 있게 된다. coarse 포인터는 터치스크린상에 손가락을 말한다. none 값은 사용자가 포인팅 장치가 없다는 의미이다. 아마도 키보드 단독 또는 음성 명령으로 탐색하고 있다고 하겠다.

- -

pointer 사용이 당신에게 주는 잇점이 있다면 사용자가 화면상에서 상호 작용하는 유형에 반응하는 더 나은 인터페이스를 설계할 수 있다는 것입니다. 예를 들어, 사용자가 터치스크린으로 장치와 상호 작용하고 있다는 것을 알면 히트 영역을 더 크게 만들 수 있습니다.

- -

더 복잡한 미디어 쿼리

- -

당신은 가능한 모든 이종의 미디어 쿼리를 가지고 그것들을 결합하거나, 쿼리 목록을 만들고 싶을 수도 있다. 그 중 어느 경우가 (조건문과) 일치할 수 있습니다.

- -

"논리곱" 미디어 쿼리

- -

and를 사용해 미디어 기능을 결합할 수 있습니다. 이는 마치 앞에서 미디어 유형과 기능을 결합하기 위해 and를 사용했던 방식과 같습니다. 예를 들어, min-width와 orientation의 논리곱 조건을 테스트해보고 싶을 수도 있습니다. 여기서 에이치티엠엘 본문 텍스트가 파란색이 되는 유일한 경우는 뷰포트의 너비가 최소 400픽셀 이상이고 장치가 가로 모드인 경우에만 해당합니다.

- -
@media screen and (min-width: 400px) and (orientation: landscape) {
-    body {
-        color: blue;
-    }
-}
- -

이 예제를 브라우저에서 열거나 소스를 보세요.

- -

"논리합" 미디어 쿼리

- -

만약 여러분에게 쿼리는 잔뜩있는 데, 그 중 일도 일치할 수 없다면, 여러분은 해당 쿼리들을 콤마로 분리할 수 있습니다. 아래 예제에서 뷰포트가 최소 400픽셀 너비 또는 장치가 가로 보기 방향이라면 텍스트는 파란색이 될 것입니다. 둘 중 하나라도 사실이 아니라면 쿼리의 조건문은 일치합니다.

- -
@media screen and (min-width: 400px), screen and (orientation: landscape) {
-    body {
-        color: blue;
-    }
-}
- -

이 예제를 브라우저에서 열거나 소스를 보세요.

- -

"

- -

"부정 논리" 미디어 쿼리

- -

not 연산자를 사용하여 전체 미디어 쿼리를 부정할 수 있습니다. 이것은 미디어 쿼리의 전체 의미를 반대로 뒤집습니다. 따라서 다음 예에서 텍스트는 보기 방향이 세로일 경우에만 파란색이 됩니다.

- -
@media not all and (orientation: landscape) {
-    body {
-        color: blue;
-    }
-}
- -

이 예제를 브라우저에서 열거나 소스를 보세요.

- -

분기점을 선정하는 방법

- -

반응형 디자인 초창기에는 많은 디자이너가 매우 구체적인 화면 크기를 공략 대상으로 삼으려고 시도했습니다. 인기있는 휴대폰 및 태블릿 화면의 크기 목록이 공개되어 해당 기기의 뷰포트와 깔끔하게 일치하도록 디자인을 만들 수 있게 되었습니다.

- -

지금은 엄청나게 다양한 크기의 지나치게 너무 많은 장치가 있어 그런 방식은 현실성이 없습니다. 즉, 모든 디자인마다 (기기의) 특정 크기에 맞추는 공략보다 더 나은 접근 방법은 콘텐츠가 어떤 식으로든 깨지기 시작하는 해당 (기기의) 크기에 해당하는 디자인을 변경하는 것입니다. 어쩌면 선 길이가 너무 길어지거나 상자 형태의 사이드바가 찌그러져 읽기가 어려워질 수도 있습니다. 그 지경이 되면 미디어 쿼리를 사용하여 이용할 수 있는 공간 대비 개선된 형태의 사이트가 나오도록 디자인을 변경해야할 지점인 것입니다. 이는 사용 기기의 정확한 화면 크기가 무엇이든 상관없이 모든 범주에 맞는 전방위적인 접금법을 말합니다. 미디어 쿼리가 도입되는 지점을 breakpoints라고 합니다.

- -

Firefox DevTools의 반응형 디자인 모드는 이러한 분기점이 어느 부분이 될지 알아내는 데 매우 유용합니다. 동 툴은 미디어 쿼리를 추가하고 디자인을 조정하면서 콘텐츠가 개선되는 위치를 파악하기 위해 뷰포트를 쉽게 크거나 작게 만들 수 있습니다.

- -

파이어폭스 개발툴상에 조판 갈무리

- -

능동 학습: 모바일 우선 반응형 디자인

- -

대체로 반응형 디자인에 대한 두 가지 접근법을 취할 수 있습니다. 데스크톱 또는 가장 넓은 뷰로 시작한 뒤 뷰포트의 축소에 맞춰 요소를 주변으로 이동시키기 위한 분기점을 추가하거나 가장 작은 뷰로 시작한 뒤에 뷰포트의 크기 확대에 맞춰 조판을 추가할 수 있습니다. 이 두 번째 접근법은 mobile first 반응형 디자인으로 설명되며 종종 선호되는 최상의 접근법입니다.

- - - -

가장 작은 장치용 뷰는 일반 대열에서 나타나는 것처럼 종종 단순한 단일 열 형태의 콘텐츠가 됩니다. 즉 여러분은 작은 장치용이라 많은 조판을 할 필요가 없다는 말입니다. 다시말해 소스를 순서대로 잘 정렬하면 기본값으로 읽을 수 있는 조판이 됩니다.

- -

아래의 길라잡이는 매우 간단한 조판으로 동 접근 방식을 안내해 줄 것입니다. 사이트 제작 과정에서는 미디어 쿼리내에서 조정할 수 있는 것이 더 많을 수 있지만, 그 접근 방식은 정확히 동일하게 됩니다.

- -

길라잡이: 간단한 모바일 우선 조판

- -

우리는 조판에 포함된 다양한 요소에 배경색을 추가하기 위해 일정한 씨에스에스를 적용한 에이치티엠엘 문서를 가지고 출발합니다.

- -
* {
-    box-sizing: border-box;
-}
-
-body {
-    width: 90%;
-    margin: 2em auto;
-    font: 1em/1.3 Arial, Helvetica, sans-serif;
-}
-
-a:link,
-a:visited {
-    color: #333;
-}
-
-nav ul,
-    aside ul {
-    list-style: none;
-    padding: 0;
-}
-
-nav a:link,
-nav a:visited {
-    background-color: rgba(207, 232, 220, 0.2);
-    border: 2px solid rgb(79, 185, 227);
-    text-decoration: none;
-    display: block;
-    padding: 10px;
-    color: #333;
-    font-weight: bold;
-}
-
-nav a:hover {
-    background-color: rgba(207, 232, 220, 0.7);
-}
-
-.related {
-    background-color: rgba(79, 185, 227, 0.3);
-    border: 1px solid rgb(79, 185, 227);
-    padding: 10px;
-}
-
-.sidebar {
-    background-color: rgba(207, 232, 220, 0.5);
-    padding: 10px;
-}
-
-article {
-    margin-bottom: 1em;
-}
-
- -

우리는 우리가 조판에 변경을 가하지는 않았지만, 문서의 원본은 콘텐츠를 읽을 수 있는 방식으로 순서대로 정렬됩니다. 이것은 중요한 첫 번째 단계이며, 콘텐츠가 화면 읽기 프로그램(tts)에 의해 소리내여 읽혀질 경우 콘텐츠가 (읽을 문자열를) 이해될 수도록 보장합니다.

- -
<body>
-    <div class="wrapper">
-      <header>
-        <nav>
-          <ul>
-            <li><a href="">사이트 소개</a></li>
-            <li><a href="">연락처</a></li>
-            <li><a href="">우리팀 안내</a></li>
-            <li><a href="">블로그</a></li>
-          </ul>
-        </nav>
-      </header>
-      <main>
-        <article>
-          <div class="content">
-            <h1>채식주의자!</h1>
-            <p>
-              ...
-            </p>
-          </aside>
-        </article>
-
-        <aside class="sidebar">
-          <h2>채식에 관한 외부 링크</h2>
-          <ul>
-            <li>
-              ...
-            </li>
-          </ul>
-        </aside>
-      </main>
-
-      <footer><p>&copy;2019</p></footer>
-    </div>
-  </body>
-
- -

이 간단한 조판은 모바일에서도 잘 작동한다. 우리가 파이어폭스 데브툴 내부 반응형 디자인 모드에서 조판을 본다면, 우리는 그것이 사이트의 직관적인 모바일 뷰로 보더라도 꽤 잘 작동한다는 것을 알 수 있다.

- -

이 예제를 브라우저에서 열거나 소스를 보세요.

- -

당신이 우리의 진행 과정대로 이 예제를 실행해보려면 step1.html의 사본을 당신 컴퓨터에 만드세요.

- -

이 지점부터는 반응형 디자인 모드뷰가 점차 확대되어 라인 길이가 상당히 길어지는 모습을 확인할 정도가 되며, 수평선 형태의 탐색 메뉴가 표시될 공간을 갖추고 있습니다. 여기에서 우리는 첫 번째 미디어 쿼리를 추가할 것입니다. 사용자가 텍스트 크기를 늘리게 되면, 텍스트 크기가 작은 장비를 가진 사람과 비교해 비슷한 라인 길이지만 뷰포트가 확대되는 순간에 분기점이 발생한다는 의미입니다. 따라서 우리는 ems 단위를 사용할 것입니다.

- -

아래 코드를 step1.html 씨에스에스의 하단에 추가하세요.

- -
@media screen and (min-width: 40em) {
-    article {
-        display: grid;
-        grid-template-columns: 3fr 1fr;
-        column-gap: 20px;
-    }
-
-    nav ul {
-        display: flex;
-    }
-
-    nav li {
-        flex: 1;
-    }
-}
-
- -

이 씨에스에스는 문서 안에 있는 문서 콘텐츠와 aside 요소 내부 관련 정보까지 2단 조판을 우리에게 제공합니다. 또한 우리는 가변상자를 사용하여 탐색 메뉴를 일렬로 배치했습니다.

- -

2단계 파일을 브라우저에서 열거나 소스를 보세요.

- -

사이드바가 새 단을 형성할 수 있는 충분한 공간이 있다고 느낄 때까지 너비를 계속 확장합니다. 미디어 쿼리안에서 주요 요소를 두 개의 열 형태의 격자로 만들 것입니다. 그런 다음 두 개의 사이드바가 서로 나란히 정렬되도록 문서의 {{cssxref("margin-bottom")}}을 제거해야하며, 바닥글 상단에 {{cssxref("border")}}(테두리)를 추가하게 됩니다. 일반적으로 이러한 미세 조정은 각 분기점 도달시 디자인을 좋게 보이게 하기 위해 여러분이 할 일입니다.

- -

다시 한 번 아래 코드를 step1.html 씨에스에스의 하단에 추가합니다.

- -
@media screen and (min-width: 70em) {
-    main {
-        display: grid;
-        grid-template-columns: 3fr 1fr;
-        column-gap: 20px;
-    }
-
-    article {
-        margin-bottom: 0;
-    }
-
-    footer {
-        border-top: 1px solid #ccc;
-        margin-top: 2em;
-    }
-}
-
- -

3단계 파일을 브라우저에서 열거나 소스를 보세요.

- -

최종 예제를 다른 너비로 보면 사용 가능한 너비에 따라 디자인이 반응하고 단일 열, 2열 또는 3열로 작동하는 방법을 볼 수 있습니다. 이것은 모바일 우선 반응형 디자인의 아주 간단한 예입니다.

- -

당신에게 정말 미디어 쿼리가 필요할까요?

- -

가변상자, 격자 및 다단 조판은 모두 굳이 미디어 쿼리를 필요로 하지 않고도 가변적이며 심지어 반응형 구성 요소를 만들 수 있는 방법을 제공합니다. 미디어 쿼리를 추가하지 않고도 이러한 조판 메서드를 사용해 원하는 것을 달성할 수 있는지 고려할 가치가 있습니다. 예를 들어, 여러분은 적어도 200 픽셀 너비의 카드 집합을 원할 수 있으며, 최대 200 픽셀이라면 주요 문서 부분에 맞아떨어질 수 있습니다. 이는 미디어 쿼리를 전혀 사용하지 않고 격자 조판만으로 얻을 수 있습니다.

- -

이것은 아래 용법으로 달성될 수 있습니다.

- -
<ul class="grid">
-    <li>
-        <h2>카드 1</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>카드 2</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>카드 3</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>카드 4</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>카드 5</h2>
-        <p>...</p>
-    </li>
-</ul>
- -
.grid {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: grid;
-    gap: 20px;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-}
-
-.grid li {
-    border: 1px solid #666;
-    padding: 10px;
-}
- -

이 격자 예제를 브라우저에서 열거나 소스를 보세요.

- -

상기 예제를 브라우저에서 열면 화면을 넓히거나 좁히거나 하여 열 트랙 수가 변경되는 것을 확인할 수 있습니다. 이 방법의 좋은 점은 격자가 뷰포트 너비를 보는 게 아니라 해당 구성 요소에 맞춰 이용할 수 있는 너비를 살핀다는 것입니다. 당신에게 미디어 쿼리가 전혀 필요하지 않을수도! 있다는 제안으로 이번 절을 마감하는 것은 이상하게 보일 수도 있습니다. 그러나 실제로 미디어 쿼리로 강화된 현대적 조판 메서드를 잘 사용하면 최상의 결과를 얻을 수 있습니다.

- -

요약정리

- -

여러분은 이 단원에서 미디어 쿼리에 대해 배웠으며 모바일 우선 반응형 디자인을 실제로 생성하는 방법도 알아 보았습니다.

- -

우리가 만든 것을 시작점로 더 많은 미디어 쿼리 조건을 테스트할 수 있습니다. 예를 들어, 방문자가 pointer 미디어 기능을 사용하여 거친 포인터를 가지고 있는 것을 감지하면 탐색 메뉴의 크기를 변경할 수 있습니다.

- -

또한 서로 다른 구성 요소를 추가하고 미디어 쿼리를 추가한다든지 또는 가변상자나 격자와 같은 조판 방법을 사용하는 것이 구성 요소를 반응형으로 만드는 가장 적절한 방법인지 여부를 실험할 수 있습니다. 바른 방식 혹은 그른 방식 따윈 없습니다. 말하자면 어떤 것이 디자인과 콘텐츠에 가장 적합한지 실험하고 관찰해야 합니다.

- - - -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

- -

이번 단위에는

- - diff --git "a/files/ko/learn/css/css_layout/\353\260\230\354\235\221\355\230\225_\353\224\224\354\236\220\354\235\270/index.html" "b/files/ko/learn/css/css_layout/\353\260\230\354\235\221\355\230\225_\353\224\224\354\236\220\354\235\270/index.html" deleted file mode 100644 index b1311448c7..0000000000 --- "a/files/ko/learn/css/css_layout/\353\260\230\354\235\221\355\230\225_\353\224\224\354\236\220\354\235\270/index.html" +++ /dev/null @@ -1,333 +0,0 @@ ---- -title: 반응형 디자인 -slug: Learn/CSS/CSS_layout/반응형_디자인 -tags: - - 가변상장 - - 격자 - - 다단 - - 미디어 쿼리 - - 반응형 웹 디자인 - - 유동 격자 - - 이미지 - - 타이포크래피 -translation_of: Learn/CSS/CSS_layout/Responsive_Design ---- -
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
- -

웹디자인 초창기에는 페이지를 구축할 때 매우 구체적인 화면 크기를 공략 대상으로 삼았습니다. 사용자가 웹디자이너가 예상한 것보다 크거나 작은 화면의 기기를 가지고 있다면 원하지 않는 스크롤 막대에서부터 지나치게 긴 길이의 라인, 사용 공간이 부족하게 되는 결과를 낳습니다. 다양한 화면 크기가 등장함에 따라 responsive web design 개념이 등장했습니다. 말하자면 서로 다른 화면 너비와 해상도 등에 맞게 웹 페이지가 조판과 모양을 변경할 수 있는 일련의 실례를 집대성한 것입니다. 이 아이디어가 우리가 멀티 디바이스 웹에 대한 설계 방식을 바꾸게 만든 장본인입니다. 이 문서에서 우리는 그 내용을 숙달하기 위해 당신이 알아야하는 주요 기술을 이해하도록 도울 것입니다.

- - - - - - - - - - - - -
선결 사항:에이치티엠엘의 기초인 (에이치티엠엘 입문서를 공부하세요), 그리고 씨에스에스의 작동 방식을 파악하기 위해 (씨에스에스 첫걸음과 씨에스에스 구성 블록를 공부하세요.)
목표:반응형 디자인의 역사와 핵심적인 계념 파악하기
- -

웹사이트 조판 역사

- -

역사의 어느 시점 여러분이 웹 사이트를 디자인할 때 두 가지 옵션이 있었습니다.

- - - -

이러한 두 가지 접근법은 사이트를 디자인하는 사람의 화면에서 가장 보기 좋은 웹 사이트로 귀결되는 경향이 있었습니다! 유동 사이트는 (아래에서 볼 수 있듯이) 디자이너의 화면보다 더 작은 화면에는 찌부러진 디자인이 나오고, 더 큰 화면에는 읽을 수 없을 정도로 길이가 긴 라인을 만들어냅니다.

- -
두 개의 열이 있는 조판이 모바일 크기 뷰포트에서 찌부러집니다. -
-
- -
-

주석: 여기 간단한 유동 조판을 보세요: 예제, 소스 코드. 예제를 보면 브라우저 창을 안팎으로 드래그하여 서로 다른 크기에 반응해 어떻게 보이는지 확인합니다.

-
- -

고정 폭 사이트는 (아래에서 보듯) 사이트 너비보다 작은 화면상에 수평 스크롤 막대가 생기는 위험이 있고 더 큰 화면상에서는 웹디자인 가장자리에 많은 흰색 공간이 생길 위험이 있습니다.

- -
이동 뷰포트에 수평 스크롤 막대가 있는 조판입니다. -
-
- -
-

주석: 여기 간단한 고정 너비 조판을 보세요: 예제, 소스 코드. 역시 브라우저 창 크기를 변경할 때 결과를 관찰하세요.

-
- -
-

주석: 상단 화면는 파이어폭스 개발툴 안에서 반응형 디자인 모드을 사용해 갈무리 한 것입니다.

-
- -

모바일 웹이 첫 번째 피처폰의 등장으로 현실화되기 시작하면서 모바일을 수용하고자 하는 회사들은 일반적으로 (종종 m.example.com 또는 example.mobi 이런 식의) 서로 다른 URL를 사용하여 그들의 사이트의 특별한 모바일 버전을 만들게 됩니다. 이는 해당 사이트의 두 가지 별도 버전을 개발하고 최신 상태로 유지해야 한다는 것을 의미했습니다.

- -

게다가, 이러한 모바일 사이트들을 경험해보면 종종 매우 축소된 기능을 제공합니다. 모바일 장치가 더욱 강력해지고 전체 웹 사이트를 표시할 수 있게 되면서, 그러한 기능 축소 모바일 버전 사이트에 갖힌 자신을 발견한 모바일 사용자들은 그들이 알고 있는 해당 사이트의 전체 기능이 있는 데스크탑 버전의 정보에 접근할 수 없었기에 좌절감을 안겨주었습니다.

- -

반응형 디자인의 전신 가변 조판

- -

유동 및 고정 너비의 웹사이트 구축 방법의 단점을 해결하기 위해 여러 가지 접근법이 개발되었습니다. 2004년 카메론 아담스는 다양한 화면 해상도에 적응할 수 있는 디자인을 만드는 방법을 설명하는 해상도 의존 조판이라는 제목의 게시물을 작성했습니다. 이 접근방식은 화면 해상도를 감지하고 정확한 씨에스에스를 로드하려면 자바스크립트가 필요했습니다.

- -

조이 미클리 길렌워터는 그녀의 작업을 통해 화면을 채우는 것과 완전히 고정된 화면 크기 사이를 만족시키는 평균값을 찾으려고 시도하는 등 가변적인 사이트를 만들 수 있는 다양한 방법을 기술하고 공식화하는 데 산파 역할을 했습니다.

- -

반응형 디자인

- -

반응형 디자인이라는 용어는 2010년 이단 마르코트가 만든 신조어로 세 가지 기술을 조합한 용법을 설명하고 있습니다.

- -
    -
  1. 첫 번째는 이미 길렌워터에 의해 탐구되고 있던 유동 격자라는 아이디어였으며, 마르코트의 유동 격자란(2009년 A List Apart에 발표) 문서에서 읽을 수 있다.
    2. -
  2. 두 번째 기술은 유동 이미지라는 개념이다. max-width 속성을 100%로 설정하는 매우 간단한 기술을 사용하면 이미지의 포함된 열이 이미지의 고유 크기보다 좁아지면 이미지가 더 작아지지만 더 커지지는 않습니다. 이것은 이미지가 대열이탈이 아니라 가변적인 크기의 열에 맞게 축소될 수 있지만 열이 이미지보다 넓어지면 확대되지 않고 픽셀화될 수 있습니다.
    3. -
  3. 세 번째 핵심 구성요소는 미디어 쿼리였습니다. 미디어 쿼리는카메론 아담스가 앞서 자바스크립의 사용을 탐구했던 조판 전환 유형을 씨에스에스만을 사용하여 실현합니다. 모든 화면 크기마다 하나씩 조판을 부여하기 보다는 조판을 변경할 수 있었다. 사이드바를 작은 화면에 맞게 재배치하거나 대체 탐색 매뉴를 표시할 수 있습니다.
    4. -
- -

반응형 웹 디자인은 별도의 기술이 아니다라는 것을 이해하는 것이 중요합니다. 즉, 웹 디자인에 대한 접근 방식이나 콘텐츠를 보는데 사용되는 장치에 반응할 수 있는 조판 생성에 사용되는 모범 사례 집합을 기술하는 데 사용되는 용어다. 마르코트의 원래 연구에서 이것은 (부동체를 사용하는) 가변 격자와 미디어 쿼리를 의미했지만, 그의 문서가 쓰여진지 거의 10년 만에 반응형으로 동작하는 것이 기본값이 되었다. 현대의 씨에스에스 조판 메서드는 본질적으로 반응형이며 반응형 사이트 설계를 쉽게하기 위해 웹 플랫폼에 새로운 요소들이 내장되어 있습니다.

- -

이 문서의 나머지 절에서는 반응형 사이트를 만들 때 사용할 수 있는 다양한 웹 플랫폼 기능에 대해 안내할 것입니다.

- -

미디어 쿼리

- -

반응형 디자인은 오롯이 미디어 쿼리 때문에 등장할 수 있었습니다. 미디어 쿼리 수준 3 규격은 2009년 권장사항 후보가 되었으며, 이는 브라우저에서 구현할 준비가 되어 있음을 의미합니다. 미디어 쿼리에서는 일련의 테스트를 실행할 수 있습니다(예로 사용자의 화면이 특정 너비나 특정 해성도보다 큰지 여하에 따라). 씨에스에스를 선택적으로 적용하여 사용자의 필요에 따라 페이지를 적절하게 스타일링합니다.

- -

예를 들어, 아래 미디어 쿼리는 현재 웹 페이지가 화면 미디어로 표시되고 있는지(따라서 인쇄된 문서가 아님) 확인하며 뷰포트는 적어도 800픽셀 너비인지 테스트합니다. .container 선택기는 씨에스에스는 이 두 가지가 사실인 경우에만 적용됩니다.

- -
@media screen and (min-width: 800px) {
-  .container {
-    margin: 1em 2em;
-  }
-} 
-
- -

스타일시트에 여러 미디어 쿼리를 추가하여 다양한 화면 크기에 맞는 최적의 전체 조판 또는 조판의 일부를 조정할 수 있습니다. 미디어 쿼리가 도입되고 조판이 변경된 지점을 breakpoints(분기점)라고 합니다.

- -

미디어 쿼리를 사용할 때 일반적인 접근법은 좁은 화면 장치(예: 휴대폰)에 대한 간단한 단일 열 조판을 만든 다음, 큰 화면인지 점검하고, 화면 폭이 충분하다는 것을 알게 될 때 다단 조판을 구현하는 것이다. 이를 모바일 우선 디자인이라고 표현하는 경우가 많다.

- -

미디어 쿼리에 대한 MDN 문서를 더 찾아보십시요.

- -

가변 격자

- -

반응형 사이트는 분기점 전후로 자체 조판을 변경할 뿐만 아니라 가변 격자상에도 동일하게 구축됩니다. 가변 격자는 현존하는 모든 장치 크기를 공략 대상으로 삼을 필요가 없으며, 그 대상에 대한 완벽한 픽셀 조판을 구축할 필요가 없다는 것을 의미합니다. 완벽한 픽셀 접근 방식은 존재하는 다양한 크기의 장치들이 엄청나게 많고, 적어도 데스크톱에서는 사람들이 항상 브라우저 창을 최대화하지는 않는다는 사실을 감안할 때 불가능할 것입니다.

- -

가변 격자를 사용하면 요소를 분기점에 추가하고, 콘텐츠가 불량으로 보이기 시작하는 지점에서 디자인을 변경할 수 있습니다. 예를 들어, 화면 크기가 커지면 라인 길이가 읽을 수 없게 길어지거나 상자가 좁아질 때 각 라인에 두 단어로 찌브러집니다.

- -

반응형 디자인 초창기에는 조판 기능을 수행하는 유일한 옵션은 부동체를 사용하는 것이 었습니다. 가변 부동 조판은 각 요소에 백분율 너비를 부여하고 조판 전체의 너비가 100%를 넘지 않도록 보장함으로써 달성되었습니다. 마르코트는 유동 격자와 관련 그의 원래 작품에서 픽셀을 사용하여 설계된 조판을 채택하여 백분율로 변환하는 공식을 상세히 설명했습니다.

- -
target / context = result 
-
- -

예를 들어, 목표 열 크기가 60픽셀이고, 거기에 들어갈 상황(혹은 컨테이너)가 이 960픽셀이면, 씨에스에스에서 사용할 수 있는 값을 얻기 위해 우선 60픽셀을 960픽셀로 나누고 거기에 소수점을 오른쪽으로 두칸 이동합니다.

- -
.col {
-  width: 6.25%; /* 60 / 960 = 0.0625 */
-} 
-
- -

이 접근 방식은 오늘날 웹상에 여러 곳에서 발견될 것이며, 여기 우리의 레거시 조판 메서드 문서의 조판 절에 문서화되어 있습니다. 여러분이 업무 중에 이 접근법을 사용하는 웹 사이트를 발견할 가능성이 높기 때문에 부동 기반의 가변 조판을 사용하여 현대적인 사이트를 구축하지는 않겠지만, 그 내용을 이해할 가치는 있습니다.

- -

다음 예제에서는 미디어 쿼리와 가변 격자를 사용하여 간단한 반응형 디자인를 보여줍니다. 좁은 화면상에서는 상자가 상대 요소 위해 겹겹이 쌓여지는 조판 형태로 표시됩니다.

- -
상자 무리가 상대 요소의 상단에 수직으로 겹겹이 쌓이는 모바일뷰 조판입니다. -

On wider screens they move to two columns:

- -
-
- -
2단 조판이 적용된 데스크탑 뷰입니다. -
-
- -
-

주석: 여러분은 여기서 실례를 찾아볼 수 있으며, 이 예제에 대한 소스 코드를 깃허브에서 찾을 수 있습니다.

-
- -

현대 조판 기술

- -

다단 조판과 가변상자와 격자와 같은 현대 조판 메서드는 기본값으로 응답형입니다. 그것들은 모두 여러분이 가변 격자를 만들려 한다고 가정하고 그렇게 동작하도록 편리한 방법을 제공합니다.

- -

다단

- -

이러한 조판 메서드 중 가장 오래된 것은 다단입니다. 여러분이 column-count를 지정하면, 이는 여러분이 콘텐츠를 나누고자 하는 단의 숫자를 나타냅니다. 그런 다음 브라우저는 다단의 크기를 화면 크기에 따라 변경되는 크기로 계산합니다.

- -
.container {
-  column-count: 3;
-} 
-
- -

column-width을 지정하는 대신 minimum 너비를 지정하는 것입니다. 브라우저는 컨테이너에 안착할 수 있는 만큼으로 지정한 해당 너비를 가진 열을 최대한 많이 생성하고 난 뒤에 다음 모든 열 사이에서 나머지 공간을 공유합니다. 따라서 열의 수는 공간이 얼마나 되는지에 따라 달라집니다.

- -
.container {
-  column-width: 10em;
-} 
-
- -

가변상자

- -

가변상자에서 가변 항목은 초깃값 동작으로 컨테이너의 공간에 따라 항목 사이의 공간을 축소하고 분배합니다. flex-grow 및 flex-shrink 값을 변경하면 해당 항목에 주어진 주변 공간이 남거나 모질라게 될 경우 원하는 동작 방식을 표기할 수 있습니다.

- -

아래 예제에서 가변 항목은 가변 컨테이너 안에서 각각 동일한 양의 공간을 차지하며, 가변상자: 가변 항목의 가변 크기 조정에서 설명했듯이 flex: 1식의 약칭을 사용할 수 있습니다.

- -
.container {
-  display: flex;
-}
-
-.item {
-  flex: 1;
-} 
-
- -
-

참고: 예제로써 상기된 간단한 반응형 조판을 재구축했는데 이번에는 가변상자를 사용했습니다. 여러분은 더 이상 낮설은 백분율 값을 사용하여 열의 크기를 계산할 필요가 없는 방법을 보게 됩니다: 예제, 소스 코드.

-
- -

씨에스에스 격자

- -

씨에스에스 격자 조판에서 fr 단위는 격자 트랙 전역에 걸쳐 이용할 수 있는 공간을 분배할 수 있습니다. 다음 예에서는 1fr 크기의 트랙 3개가 있는 격자 컨테이너를 만듭니다. 이렇게 하면 3개의 열 트랙이 생성되며, 각 트랙은 컨테이너에 있는 사용 가능한 공간\의 한 부분을 차지합니다. 여러분은 fr 단위를 포함한 가변 격자라는 격자 조판 학습 주제에서 격자를 생성하는 이같은 접근 방식에 대해 자세히 알 수 있습니다.

- -
.container {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-} 
-
- -
-

참고: 격자 조판 버전은 .wrapper 예제상에 열을 정의할 수 있으므로 더 간단합니다: 소스 코드.

-
- -

반응형 이미지

- -

반응 이미지에 대한 가장 간단한 접근법은 반응형 디자인에 관한 마르코트의 초창기 문서에서 설명한 바와 같습니다. 기본적으로 필요한 최대 크기의 이미지를 촬영하여 그것을 축소할 수 있습니다. 이것은 오늘날에도 사용되는 접근법이며 대부분의 스타일 시트에서 다음과 같은 씨에스에스를 어디선가는 발견할 수 있습니다.

- -
img {
-  max-width: 100%:
-} 
-
- -

이 접근법에는 명백한 단점이 있습니다. 해당 이미지는 고유 크기보다 훨씬 작게 표시될 수 있어 대역폭 낭비입니다. 다시말해 모바일 사용자는 브라우저 창에서 실제로 보는 것의 몇 배 크기의 이미지를 다운로드하게 되니 낭비입니다. 또한, 데스크톱과 같은 이미지 가로 세로 비율을 모바일에서 원하지 않을 수도 있습니다. 예를 들어, 모바일의 경우 정사각형 이미지가 좋을 수 있지만 데스크톱상에는 같은 이미지를 가로 보기처럼 장면을 보여줍니다. 또는 모바일 상의 이미지의 크기가 작다는 것을 이해하면서도 서로 다른 이미지를 모두 보여주고 싶을 경우가 있습니다. 말하자면 작은 화면 크기에서 더 쉽게 해석될 수 있는 이미지를 말합니다. 이런 것들은 단순히 이미지를 축소해서는 달성할 수 없습니다.

- -

반응형 이미지는 <picture> 요소와 <img>, srcset과 sizes 속성은 이러한 문제를 모두 해결합니다. 여러분은 "힌트"(이미지에 가장 적합한 화면 크기와 해상도를 설명하는 메타 데이터)와 함께 여러 크기를 제공할 수 있으며, 브라우저는 각 장치에 가장 적합한 이미지를 선택하며, 사용자가 사용하고 있는 장치에 적합한 이미지 크기를 다운로드할 수 있도록 담보합니다.

- -

또한 다른 화면 크기에서 사용되는 이미지를 art direct할 수 있으므로 서로 다른 화면 크기에 대해 서로 다른 자르기 또는 완전히 다른 이미지를 제공할 수 있습니다.

- -

이곳 MDN 사이트의 에이치티엠엘 학습 섹션에서 반응형 이미지에 대한 자세한 안내서를 찾을 수 있습니다.

- -

반응형 타이포그래피

- -

반응형 타이포그래피 개념은 이전 작업에서 다루지 않은 반응형 디자인의 요소입니다. 본질적으로, 이것은 화면 부동산의 크기가 더 작아지거나 더 커지거나하는 것을 반영하기 위해 미디어 쿼리 구문 안에서 폰트 크기를 변경하는 것을 말합니다.

- -

이 예제에서 우리는 수준 1 머리글을 4rem로 설정하려고 합니다. 즉, 기본 글꼴 크기의 4배입니다. 정말 큰 제목이네요! 우리는 더 큰 화면 크기상에서만 이 코끼리만한 머리글을 원하기 때문에, 우리는 먼저 더 작은 머리글을 만들고, 미디어 쿼리를 사용해 조건에 맞으면 그것을 더 큰 크기로 덮어쓰기 하면됩니다. 여기서 조건은 사용자가 적어도 1200px의 화면 크기의 기기를 가진 경우가 해당됩니다.

- -
html {
-  font-size: 1em;
-}
-
-h1 {
-  font-size: 2rem;
-}
-
-@media (min-width: 1200px) {
-  h1 {
-    font-size: 4rem;
-  }
-} 
-
- -

상기한 반응형 격자 예제를 편집했고, 거기에 더해 이미 제시된 메서드를 사용하는 응답형 유형을 포함시켰습니다. 조판이 2개의 열 버전으로 이동함에 따라 머리글 크기가 어떻게 전환하는지 볼 수 있습니다.

- -

모바일에서는 머리글이 더 작다:

- -
머리글 크기가 작은 스택 모양의 조판입니다. -

On desktop however we see the larger heading size:

- -
-
- -
큰 머리글이 딸린 두개의 열 조판입니다. -
-
- -
-

참고: 이 예제의 실제 구현 장면: 예제, 소스 코드.

-
- -

타이포그래피에 대한 이러한 접근 방식이 보여주듯이, 미디어 쿼리를 제한하여 페이지 조판만 변경할 필요는 없습니다. 그들 접근법을 사용하여 어떤 요소라도 조정해서 대체 화면 크기에 맞는 더 유용하고 매력적인 요소를 만들 수 있다.

- -

반응형 타이포그래피에 대한 뷰포트 단위 사용하기

- -

흥미로운 접근 방식은 반응형 타이포그래피를 사용하기 위해 뷰포트 단위 vw를 사용할 수 있다는 점이다. 1vw는 뷰포트 너비의 1%와 동일하며, vw를 사용하여 글꼴 크기를 설정하면 항상 뷰포트 크기와 관련이 있다는 것을 의미한다.

- -
h1 {
-  font-size: 6vw;
-}
- -

위의 작업 수행에서의 문제는 사용자가 vw 단위를 사용하여 텍스트 집합을 확대/축소하는 기능을 상실하는 데 있다. 따라서 여러분은 뷰포트 단위만으로 텍스트를 설정해서는 안 된다.

- -

해결책이 하나 있다. calc()를 사용하는 것이다. 즉, em와 같은 고정된 크기를 사용하여 속성값 집합에 vw 단위를 추가하면 텍스트는 여전히 확대/축소할 수 있다. 본질적으로 vw 단위는 확대/축소 값에 더해 추가된다.

- -
h1 {
-  font-size: calc(1.5rem + 3vw);
-}
- -

즉, 머리글에 대한 폰트 크기를 한 번만 지정하면 된다. 크기를 모바일용으로 따로 설정할 게 아니라 미디어 쿼리 내에서 크기를 재정의한다는 말이다. 그러면 뷰포트의 크기가 커질수록 글꼴은 점차 커진다.

- -
-

이에 대한 예제의 실현: 예제, 소스 코드.

-
- -

뷰포트 메타 테그

- -

응답형 페이지의 에이치티엠엘 소스를 보면 일반적으로 문서의 <head>에서 다음과 같은 {{htmlelement("meta")}} 태그를 볼 수 있다.

- -
<meta name="viewport" content="width=device-width,initial-scale=1">
-
- -

이 메타 태그는 뷰포트의 너비를 장치의 너비로 설정하여 문서를 의도한 크기의 100%로 확장해야 한다고 모바일 브라우저에게 알려줍니다. 이로써 여러분이 의도한 대로 모바일에 최적화된 크기로 문서를 표시합니다.

- -

왜 이런 것이 필요할까요? 모바일 브라우저는 뷰포트 너비에 대해 거짓말을 하는 경향이 있기 때문이다.

- -

이 메타 태그는 원래 iPhone이 출시되고 사람들이 작은 전화 화면에서 웹 사이트를 보기 시작했을 때 대부분의 사이트가 모바일 최적화되지 않았기 때문에 존재합니다. 따라서 모바일 브라우저는 뷰포트 너비를 960픽셀로 설정하게 됩니다. 해당 너비로 페이지를 렌더링하고, 그 결과를 데스크톱 조판의 확대 버전으로 표시합니다. 다른 모바일 브라우저(예를 들어 구글 안드로이드)도 똑같은 일을 합니다. 사용자들은 웹사이트를 확대하고 이리저리 끌어 옮기며(panning) 그들이 관심을 갖는 부분을 볼 수 있었지만, 모양이 형편 없었습니다. 만약 여러분이 반응형 디자인이 아닌 사이트를 우연히 발견하게 된다면, 여러분은 오늘날에도 이런 걸 보게 될 것입니다.

- -

문제는 분기점과 미디어 쿼리를 포함하는 응답형 디자인이 모바일 브라우저에서 의도한 대로 작동하지 않는다는 점에 있습니다. 여러분이 480px 뷰포트 너비나 그 이하에서 시작하는 좁은 화면 조판을 갖고 있고 뷰포트가 960px로 설정되어 있다면 좁은 화면 조판을 모바일에서 절대 볼 수 없게 된다. width=device-width를 설정하면 애플의 기본값인 width=960px를 장치의 실재 너비로 재지정하므로 당신의 미디어 쿼리가 의도한 대로 작동합니다.

- -

따라서 에이치티엠엘 문서의 헤더 부분에 상기 에이치티엠엘 라인을 항상 포함해야 합니다.

- -

뷰포트 메타 태그와 함께 사용할 수 있는 다른 설정이 있지만 일반적으로 상기 에이치티엠엘 라인이면 여러분이 사용하고자 하는 내용에 해당합니다.

- - - -

여러분은 minimum-scale와 maximum-scale 사용을 피해야하며, 특히 user-scalable를 no로 설정하는 것도 피해야 합니다. 사용자는 필요한 만큼 확대하거나 축소할 수 있어야 합니다.이를 방지하면 접근성 문제가 발생합니다.

- -
-

참고: 뷰포트 메타 태그를 대체하기 위해 고안된 씨에스에스 @ 규칙이 있습니다. @viewport 그러나 브라우저 지원이 매우 형편없습니다. 그것은 인터넷 익스플로러와 에지에서 구현되었지만, 일단 크롬 기반 에지가 출시되면 더 이상 에지 브라우저의 일부가 되지 않게 됩니다.

-
- -

요약정리

- -

반응형 디자인은 디자인이 보여지는 당해 환경에서 반응하는 사이트 및 애플리케이션 디자인을 말합니다. 그것은 많은 씨에스에스와 에이치티엠엘 기능과 기술을 망라하며 이제 기본값으로 우리가 웹사이트를 구축할 때 필수적인 방법입니다. 여러분이 휴대폰으로 방문하는 사이트를 생각해보세요. 데스크톱 버전이 축소된 사이트, 또는 사물을 찾기 위해 옆으로 스크롤해야 하는 사이트를 우연히 발견한다는 것은 상당히 이례적인 일일 것입니다. 그렇게 된 것은 웹이 반응형으로 디자인하는 접근방식으로 옮겨갔기 때문입니다.

- -

또한 이번 단원에서 배운 조판 메서드의 도움으로 반응형 디자인을 달성하기가 훨씬 쉬워졌습니다. 여러분이 당대 웹 개발에 신출내기라면, 반응형 디자인 초창기보다 훨씬 많은 도구가 마련되어 있으니 맘껏 이용하십시요. 따라서 당신이 참조하고 있는 어떤 자료의 연혁을 확인할 가치가 있습니다. 역사적 기록 문서로서 여전히 유용하지만, 사이트 방문자가 이용하는 장치가 무엇이건 관계없이 우아하고 유용한 디자인을 훨씬 쉽게 생성하려면 씨에스에스와 에이치티엠엘의 현대적 용법이 정답입니다.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}

- -

이번 단위에는

- - diff --git "a/files/ko/learn/css/css_layout/\354\234\204\354\271\230\354\236\241\352\270\260/index.html" "b/files/ko/learn/css/css_layout/\354\234\204\354\271\230\354\236\241\352\270\260/index.html" deleted file mode 100644 index 76a491ae0e..0000000000 --- "a/files/ko/learn/css/css_layout/\354\234\204\354\271\230\354\236\241\352\270\260/index.html" +++ /dev/null @@ -1,585 +0,0 @@ ---- -title: 위치잡기 -slug: Learn/CSS/CSS_layout/위치잡기 -tags: - - 고정 - - 글 - - 상대 - - 씨에스에스 - - 안내서 - - 위치잡기 - - 절대 - - 조판 - - 초보자 - - 코딩스크립팅 -translation_of: Learn/CSS/CSS_layout/Positioning ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}
- -

당신이 일반 문서 조판 대열에서 요소를 끄집어 내어, 그것이 다르게 행동하게 만들수 있게 해주는 것이 위치잡기다. 예를 들어 상대 요소 위에 놓거나 브라우저 뷰 포트 내부의 동일한 위치를 항상 유지하게 해준다. 이 문서는 서로 다른 {{cssxref("position")}} 값을 설명하고, 그 걸 사용하는 방법에 대해서도 설명한다.

- - - - - - - - - - - - -
선결 사항:에이치티엠엘의 기초 (에이치티엠엘 입문서)와 씨에스에스 작동 방식에 대한 개념(씨에스에스 입문서를 공부하세요.)
목표:씨에스에스 위치잡기가 작동하는 방법 배우기
- -

가능하면 우리 깃허브 저장소에 있는 0_basic-flow.html 파일의 사본을 가지고 당신의 컴퓨터상에서 해당 연습을 함께 따라해보시길 바랍니다. (여기 소스 코드)가 있으니 그걸 착수 파일로 이용하십시요.

- -

위치잡기 소개

- -

크게봐서 위치잡기의 개념은 위에서 설명했듯 기본 문서 대열에 따른 동작을 무시하고 흥미로운 효과를 낼 수 있도록 하는 것입니다. 조판 내부의 일부 상자의 위치를 기본 조판 대열 위치에서 약간 변경한다거나, 약간 기묘하거나, 편치않은 느낌을 주고 싶다면 어떨까? 위치잡기가 바로 당신의 도구입니다. 또는 페이지의 다른 부분의 상위에 부동(浮動)하는 사용자 인터페이스 요소를 만들고 싶다라거나 아울러 페이지가 스크롤된 정도와 상관없이 항상 브라우저 창 내부의 동일한 위치에 놓이게 하고 싶다면? 위치잡기는 그런 조판 작업을 가능하게 합니다.

- -

에이치티엠엘 요소에 적용될 수 있는 여러 가지 유형의 위치잡기가 존재합니다. 어떤 요소상에 특정 유형의 위치잡기가 활성화되도록 하기 위해 {{cssxref("position")}} 속성을 사용합니다.

- -

정적 위치잡기

- -

정적 위치잡기는 모든 요소에 주어지는 기본값입니다. 즉, "요소를 문서 조판 대열상에 일반 위치에 배치하라는 것으로 여기서 특별한 것은 없습니다."

- -

이를 입증한다거나, 이어질 섹션에서 다룰 예제를 설정하려면 먼저 에이치티엠엘상에 두 번째 {{htmlelement("p")}} 요소에 positioned라는 클래스를 추가하십시오:

- -
<p class="positioned"> ... </p>
- -

이제 다음과 같은 규칙을 당신의 씨에스에스 하단에 추가하십시요:

- -
.positioned {
-  position: static;
-  background: yellow;
-}
- -

이제 저장하고 새로고침하면 두 번째 단락의 배경 색깔이 업데이트된 것을 제외하고 다른 차이가 없다는 것이 확인될 것입니다. 아무 문제없습니다. 앞에서 얘기했듯이 정적 위치잡기는 기본값으로 주어진 동작입니다!

- -
-

주석: 이 시점에 예제의 실제 구현 장면을 1_static-positioning.html에서 볼 수 있습니다.(소스 코드는 여기서 보세요).

-
- -

상대 위치잡기

- -

상대 위치잡기는 우리가 살펴 첫 번째 위치 유형입니다. 이것은 정적 위치 결정과 매우 유사합니다. 단, 일단 정상 조판 대열상에 위치잡기할 요소가 자리를 잡고나면 페이지의 다른 요소와 중첩되는 것을 포함하여 최종 위치를 수정할 수 있습니다. 당신의 코드에 있는 position 선언을 업데이트하십시요.

- -
position: relative;
- -

현 시점에서 저장하고 새로 고침하면 전혀 변경된 결과가 확인되지 않습니다. 그럼 요소의 위치를 어떻게 수정할까요? 다음 절에서 설명하겠지만, {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}을 사용해야 합니다.

- -

상하 좌우 위치잡기 소개

- -

{{cssxref("top")}}, {{cssxref("bottom")}}와 {{cssxref("left")}}, and {{cssxref("right")}}는 {{cssxref("position")}}과 나란히 사용되어 기준 위치에 비례해 정확한 위치잡기를 지정한다. 이를 시험하려면 다음 선언문을 씨에스에스 .positioned 규칙에 추가하십시오:

- -
top: 30px;
-left: 30px;
- -
-

참고: 이러한 속성의 값은 당신이 논리적으로 예상할 수 있는 모든 단위를 취할 수 있습니다. 예로 pixels, mm, rems, % 등이 해당한다.

-
- -

이제 저장하고 새로고침하면 다음과 같은 내용의 결과를 얻을 것입니다:

- - - -

{{ EmbedLiveSample('상하_좌우_위치잡기_소개', '100%', 500) }}

- -

근사하죠, 그쵸? 좋습니다. 그러나 이것은 아마도 여러분이 기대했던 것이 아니었을 것입니다. 우리가 좌측 상단을 지정했는데 왜 우측 하단으로 이동했을까요? 처음에는 비논리적으로 들릴지 모르지만, 이것은 상대적 위치잡기가 작용하는 방식일 뿐입니다. 즉, 위치가 지정된 상자의 특정 측면을 밀어서 반대 방향으로 움직이는 보이지 않는 힘이 있다고 생각할 필요가 있습니다. 예를 들어, top: 30px;를 지정하면 힘은 상자 상단을 밀어서 30px 아래로 이동하게 만듭니다.

- -
-

참고: 이 시점에 예제의 실제 구현 장면을 2_relative-positioning.html에서 확인할 수 있습니다(소스 코드 보기).

-
- -

절대 위치잡기

- -

절대적인 위치 결정은 매우 다른 결과를 가져옵니다. 당신의 소스 코드에 다음과 같이 위치 선언을 변경해 보겠습니다.

- -
position: absolute;
- -

지금 저장한 다음에 새로고침하면 다음과 같은 것이 확인되어야 합니다:

- - - -

{{ EmbedLiveSample('절대_위치잡기', '100%', 420) }}

- -

우선, 위치잡기 요소가 원래 있었어야 했던 문서 대열 속 위치에 있던 간격은 더 이상 존재하지 않는다는 점에 유의하십시오. 즉 간격이 더 이상 존재하지 않는 것처럼 첫 번째와 세 번째 요소가 붙어 버렸습니다! 어떤 면에서는, 이것은 사실입니다. 절대적으로 위치한 요소는 더 이상 일반 문서 조판 대열에서 존재하지 않습니다. 대신 다른 모든 것과는 별개로 독자적인 레이어상에 놓여 있습니다. 이것은 매우 유용합니다. 즉, 페이지의 다른 요소의 위치와 간섭하지 않는 격리된 사용자 인터페이스 기능을 만들 수 있습니다. 예를 들어 팝업 정보 상자 및 제어 메뉴, 롤오버 패널, 페이지 어느 곳에서나 끌어서 놓기할 수 있는 유저 인터페이스 페이지 등등…

- -

둘째, 요소의 위치가 변경되었음을 알아차립시다. 이는 {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}가 절대 위치잡기에 해당해 다른 방식으로 작동하기 때문입니다. 요소가 진입해야 하는 방향을 지정하기 보다는 요소가 (부모) 콘테이너 요소의 상하좌우 측면으로부터 떨어지는 간격을 지정되어야 합니다. 따라서 이 경우, 내 말은 절대 위치잡기 요소는 "콘테이너 요소"의 상단에서 30px, 왼쪽에서 30px에 위치에 놓여야 한다는 말입니다.

- -
-

참고: 당신이 필요하다면 요소의 크기를 재지정하기 위해 {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}를 사용할 수 있습니다. 당신이 위치잡기한 요소에 top: 0; bottom: 0; left: 0; right: 0;과 margin: 0;를 지정한 뒤 어떻게 되냐 보십시요! 해보고 다시 원상태로 돌리십시요...

-
- -
-

주석: 그렇습니다. 여백이 위치잡기한 요소에 여전히 영향을 미칩니다. 그러나 마진 축소 영향은 업습니다.

-
- -
-

참고: 당신은 3_absolute-positioning.html에서 예제를 확인할 수 있습니다(소스 코드를 보세요).

-
- -

위치잡기 상황

- -

어떤 요소가 절대 위치잡기의 기준이 되는 "콘테이너 요소"입니까? 이것은 위치잡기 요소의 조상에 지정된 위치 속성의 여하에 따라 많이 달라집니다. (See 콘테이너 블록 식별하기).

- -

조상 요소가 명시적으로 정의된 위치 속성을 가지고 있지 않으면 초깃값으로 모든 조상 요소에 정적 위치가 부여됩니다. 그에 따른 결과, 절대적 위치잡기한 요소는 initial containing block에 포함되게 됩니다. 초기 콘테이너 블록은 브라우저 뷰포트 크기의 용적을 가지며, 자신도 {{htmlelement("html")}} 요소를 포함하는 블록입니다. 간단히 말해서, 절대적 위치잡기한 요소는 {{htmlelement("html")}} 요소의 외부에 포함되어 초기 뷰포트 기준과 비례한 곳에 위치하게 됩니다.

- -

위치잡기한 요소는 에이치티엠엘 소스의 {{htmlelement("body")}} 안에 중첩되지만 최종 조판에서는 페이지의 가장자리 상단과 왼쪽에서 30px 떨어져 있습니다. 우리는 요소의 절대적 위치잡기에서 어떤 요소에 비례해 위치잡기할지 기준이 되는 positioning context(위치잡기 상황)을 변경할 수 있습니다. 이것은 조상 요소 중 하나를 기준으로 위치잡기 설정이 이뤄집니다. 다시말해 요소의 내부에 중첩된 요소 중 하나가 기준이 됩니다(내부에 중첩되지 않은 요소를 기준삼아 비례적으로 위치시킬 수 없습니다). 이를 증명하기 위해 다음과 같은 선언을 body 규칙에 추가하십시요:

- -
position: relative;
- -

이로써 다음과 같은 결과가 나와야 합니다.

- - - -

{{ EmbedLiveSample('위치잡기_상황', '100%', 420) }}

- -

위치잡기한 요소는 이제 기준이 되는 {{htmlelement("body")}} 요소와 비례한 위치에 놓이게 된다.

- -
-

참고: 당신은 이 시점에 예제의 실제 구현 장면을 4_positioning-context.html에서 볼 수 있습니다(소스 코드 보기).

-
- -

z-인덱스 소개

- -

이 모든 절대적 위치잡기는 제법 재미나지만, 아직 고려하지 않은 또 다른 것이 있습니다. 요소가 겹치기 시작하면 어떤 요소가 다른 요소 위에 나타나는지 결정하는 기준은 무엇입니까? 지금까지 우리가 본 예제에서, 우리는 위치잡기 상황 속에 단 하나의 위치잡기할 요소만 주어졌습니다. 그리고 그것은 상위에 나타납니다. 왜냐면 위치잡기 요소가 비 위치잡기 요소보다 우위를 점하기 때문입니다. 하나 이상의 요소가 있을 때는 어떨까요?

- -

다음을 씨에스에스에 추가해 첫 단락도 절대적 위치잡기 대상으로 만들어 봅시다.

- -
p:nth-of-type(1) {
-  position: absolute;
-  background: lime;
-  top: 10px;
-  right: 30px;
-}
- -

이 시점에서 당신이 보게될 것은 첫 번째 단락이 녹색으로 칠해지고, 문서 대열을 벗어나 원래 위치에서 약간 위에 자리를 잡습니다. 또한, 두 개의 단락이 겹치는 원래의 .positioned 클래스가 지정된 단락 아래에 겹겹이 포개집니다. 이렇게 되는 까닭은 .positioned 클래스로 지정된 단락이 소스 순서상에 두 번째 단락이고 소스 순서상에 뒤에 있는 위치잡기한 요소가 소스 순서상 앞서는 위치잡기한 요소보다 우위를 점하기 때문입니다.

- -

스택 순서를 변경할 수 있습니까? 네, {{cssxref("z-index")}} 속성을 사용하면 가능합니다. z-인덱스는 z축을 가리킵니다. 당신은 앞서 배경 이미지와 그림자 오프셋을 떨어뜨리는 것과 같은 사물의 위치를 파악하는 방법을 찾는 과정에서 웹 페이지를 수평(x축)과 수직(y축) 좌표로 논의한 학습 과정을 기억하실 겁니다. (0,0)은 페이지(또는 요소)의 상단 왼쪽에 있으며, x-축 및 y-축은 페이지의 오른쪽 및 아래쪽으로 진행합니다(가로쓰기 언어의 경우를 말합니다).

- -

웹 페이지에는 z축이 있습니다. 스크린 표면으로부터 진행하는 가상 라인, 즉 사용자 얼굴 쪽으로 향하는(당신이 화면 위에 놓고 싶은 것을 망론한다). {{cssxref("z-index")}} 값은 위치잡기한 요소가 해당 축상에 놓일 경우에 영향을 미칩니다. 양수 값은 스택 상단으로 이동하고 음수 값은 스택 아래로 이동합니다(역주: 상단으로 겹겹이 쌓이거나 하단으로 겹겹이 쌓여진다) 기본값으로 위치잡기한 요소는 모두 z-index가 auto 값을 가지며, 이는 사실상 0입니다.

- -

스택 순서를 변경하려면 다음 선언을 p:nth-of-type(1) rule: 규칙에 추가하십시오.

- -
z-index: 1;
- -

이제 녹색 단락이 상단에 놓여진 완성된 예가 보여야 합니다.

- - - -

{{ EmbedLiveSample('z-인덱스_소개', '100%', 400) }}

- -

z-인덱스는 단위가 없는 인덱스 값만 허용한다는 점에 유의하자; 하나의 요소가 Z축 위로 23픽셀이 되도록 지정할 수 없습니다. 그런 식으론 작동하지 않습니다. 높은 값의 요소는 낮은 값 요소의 위로 간니다. 그러니 당신이 어떤 값을 사용할 지에 달려있습니다. 2와 3을 사용하면 300과 40000과 같은 효과를 얻을 수 있습니다.

- -
-

참고: 이 시점에 예제의 실제 구현 장면을 5_z-index.html에서 볼 수 있습니다(소스 코드 보기).

-
- -

고정 위치잡기

- -

이제 고정 위치잡기를 살펴보자. 이것은 절대 위치잡기와 정확히 같은 방식으로 작동합니다.단 한 가지 핵심 차이점이 있습니다. 절대 위치잡기는 {{htmlelement("html")}} 요소나 가까운 조상 요소를 기준으로 비례해 요소를 고정시키지만, 고정 위치잡기는 브라우저 뷰 포트 자체를 기준으로 비례해 요소를 고정합니다. 즉, 탐색 메뉴가 계속 자리를 지키는 것과 같이 제자리에 고정된 유용한 사용자 인터페이스 항목을 생성할 수 있습니다.

- -

우리가 무슨 얘기를 하는지 보여주기 위해 간단한 예를 들어봅시다. 먼저 씨에스에스에서 기존 p:nth-of-type(1)과 .positioned 규칙을 삭제합니다.

- -

이제 position: relative; 선언을 지우고, 다음과 같이 고정 높이를 추가하는 규칙을 body 규칙에 업데이트합니다:

- -
body {
-  width: 500px;
-  height: 1400px;
-  margin: 0 auto;
-}
- -

이제 우리는 {{htmlelement("h1")}} 요소에 position: fixed;를 부여하고, 그걸 뷰 포트의 상단 중앙에 놓게 합니다. 다음 규칙을 씨에스에스에 추가하세요.

- -
h1 {
-  position: fixed;
-  top: 0;
-  width: 500px;
-  margin: 0 auto;
-  background: white;
-  padding: 10px;
-}
- -

화면 상단에 고정시키려면 top: 0;이 요구됩니다. 그런 다음 제목에 콘텐츠 열과 동일한 너비를 부여하고 콘텐츠를 중앙에 놓기 위해 오래됐지만, 신뢰감을 주는 margin: 0 auto;를 사용합니다. 그런 다음 제목에 흰색 배경과 패딩을 부여해 제목 아래에 내용이 보이지 않도록 합니다.

- -

지금 저장하고 새로고침하면 제목이 고정되는 사소하지만, 재미난 효과를 볼 수 있으며, 스크롤 막대를 위로 올리면 콘텐츠가 드러나고 아래로 내리면 제목 밑으로 콘텐츠가 사라지는 것처럼 보입니다. 하지만 우리는 이것을 더 개선할 수 있습니다. 현재 일부 콘텐츠가 시작부터 제목에 밑에 깔려있는 부분 말입니다. 위치잡기한 제목이 문서 대열상에서 모습을 드러내지 않기 때문입니다. 그래서 나머지 콘텐츠가 맨 위로 이동했습니다. 우리는 올라간 것을 조금 아래로 이동시켜야 합니다. 우리는 그걸 첫 번째 단락에 최상위 여백을 설정해서 달성할 수 있습니다. 지금 다음 내용을 추가하세요:

- -
p:nth-of-type(1) {
-  margin-top: 60px;
-}
- -

당신은 이제 완성된 예제를 볼 수 있어야 합니다:

- - - -

{{ EmbedLiveSample('고정_위치잡기', '100%', 400) }}

- -
-

참고: 당신은 이 시점에 예제의 실제 구현 장면을 6_fixed-positioning.html에서 볼 수 있습니다 (소스 코드는 여기서 보세요).

-
- -

position: sticky

- -

이용할 수 있는 position: sticky라고 불리우는 또 다른 위치잡기 값이 있습니다. 이것은 다른 위치잡기보다 다소 새로운 것입니다. 이것은 기본적으로 상대 위치잡기와 고정 위치잡기가 혼합된 하이브리드로서, 위치잡기 요소가 특정 임계점에(예로 뷰포트의 상단으로부터 10px) 스크롤될 때까지 상대 위치잡기처럼 행동할 수 있다가 그 뒤에 위치가 고정됩니다. 예를 들어, 탐색 막대가 특정 지점까지 페이지와 함께 스크롤한 다음 페이지 상단에 흡착되도록 사용할 수 있습니다.

- -
- - -
.positioned {
-  position: sticky;
-  top: 30px;
-  left: 30px;
-}
-
- -

{{ EmbedLiveSample('흡착_1', '100%', 200) }}

- -

position: sticky의 일반적 사용례기도 하고 흥미로운 사용례는 스크롤링하다 제목에 도달하면 서로 다른 제목이 페이지의 맨 위에 흡착되는 색인 페이지를 만드는 것입니다. 이런 사례에 대한 마크업은 다음과 같은 모습일 수 있습니다:

- -
<h1>흡착 위치잡기</h1>
-
-<dl>
-    <dt>A</dt>
-    <dd>Apple</dd>
-    <dd>Ant</dd>
-    <dd>Altimeter</dd>
-    <dd>Airplane</dd>
-    <dt>B</dt>
-    <dd>Bird</dd>
-    <dd>Buzzard</dd>
-    <dd>Bee</dd>
-    <dd>Banana</dd>
-    <dd>Beanstalk</dd>
-    <dt>C</dt>
-    <dd>Calculator</dd>
-    <dd>Cane</dd>
-    <dd>Camera</dd>
-    <dd>Camel</dd>
-    <dt>D</dt>
-    <dd>Duck</dd>
-    <dd>Dime</dd>
-    <dd>Dipstick</dd>
-    <dd>Drone</dd>
-    <dt>E</dt>
-    <dd>Egg</dd>
-    <dd>Elephant</dd>
-    <dd>Egret</dd>
-</dl>
-
- -

씨에스에스는 다음과 같이 보일 수 있다. 일반 대열에서는 {{htmlelement("dt")}} 요소가 콘텐츠와 함께 스크롤됩니다. {{cssxref("top")}} 값이 0이고 {{htmlelement("dt")}} 요소에 position: sticky를 추가하면 이를 지원하는 브라우저는 그 위치(0)에 도달할 때 머리글을 브라우저 뷰포트 상단에 흡착시킵니다. 그 후 각각의 후속 머리글은 자신의 위치까지 스크롤하는 시점에 이전 머리글을 교체합니다.

- -
dt {
-  background-color: black;
-  color: white;
-  padding: 10px;
-  position: sticky;
-  top: 0;
-  left: 0;
-  margin: 1em 0;
-}
-
- -
- -
- -

{{ EmbedLiveSample('흡착_2', '100%', 200) }}

- -
-

참고: 당신은 이 시점에 예제의 실제 구현 장면을 7_sticky-positioning.html에서 볼 수 있습니다(소스 코드는 여기서 보세요).

-
- -

요약정리

- -

기본적인 위치잡기를 가지고 놀이삼아 시험해 보니 재미있었을 것이다; 비록 이것이 완전체 조판에 사용할 수 있는 방법은 아니지만, 여러분이 보았다시피 이것이 알맞은 용도로 사용될 수 있는 많은 작업들이 있다.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}

- -

참조 항목

- - - -

이번 단위에는

- - diff --git "a/files/ko/learn/css/css_layout/\354\235\264\354\240\204_\353\270\214\353\235\274\354\232\260\354\240\200_\354\247\200\354\233\220/index.html" "b/files/ko/learn/css/css_layout/\354\235\264\354\240\204_\353\270\214\353\235\274\354\232\260\354\240\200_\354\247\200\354\233\220/index.html" deleted file mode 100644 index 07910a4d26..0000000000 --- "a/files/ko/learn/css/css_layout/\354\235\264\354\240\204_\353\270\214\353\235\274\354\232\260\354\240\200_\354\247\200\354\233\220/index.html" +++ /dev/null @@ -1,248 +0,0 @@ ---- -title: 이전 브라우저 지원 -slug: Learn/CSS/CSS_layout/이전_브라우저_지원 -tags: - - 가변상자 - - 격자 - - 기능 쿼리 - - 레거시 - - 부동체 - - 씨에스에스 - - 안내서 - - 조판 - - 초보자 - - 학습 -translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

- -

이 모듈에서는 Flexbox 및 Grid를 디자인의 기본 레이아웃 메서드로 사용할 것을 권고합니다. 그러나 당신이 사용한 메서드를 지원하지 않는 브라우저나 이전 브라우저를 사용해 당신의 사이트를 방문하는 사람들이 있을 겁니다. 이런 일은 웹상에서 항상 있는 일입니다. 즉 새로운 기능이 개발됨에 따라 서로 다른 브라우저가 서로 다른 것들의 우선 순위를 정합니다. 이 문서는 구식 기술의 사용자들을 외면하지 않고도 최신 웹 기술을 사용하는 방법에 대해 설명합니다.

- - - - - - - - - - - - -
선결 사항:HTML 기본 (HTML 입문 학습), CSS의 작동 방식 CSS 입문 및 (상자 양식 지정 학습)
목표:여러분이 사용하려는 기능을 지원하지 않을 수있는 이전 브라우저에서 레이아웃을 지원하는 방법을 파악합니다.
- -

당신의 사이트 브라우저 지향은?

- -

모든 웹사이트는 공략 대상에 따라 달라집니다. 접근 방식을 결정하기 전에 이전 브라우저를 사용하여 사이트를 방문하는 방문자 수를 확인하십시오. 사람들이 사용중인 기술을 알려주는 분석 기능(예: Google analytics)을 이용할 수 있고, 추가 및 교체할 기존 웹 사이트가 있는 경우 이는 간단한 작업입니다. 당신이 분석툴이 없거나, 이번이 완전히 새로운 사이트 개설이라면 Statcounter같은 위치별로 필터링된 통계를 제공할 수 있는 사이트가 있습니다.

- -

또한 사람들이 여러분의 사이트를 이용하는 방식이나 장치 유형을 고려해야만 합니다. 예를 들어 모바일 장치 이용 방문자가 평균치를 웃돌거라는 예상을 할 수 있습니다. 접근성 및 보조 기술을 사용하는 사람들은 항상 고려해야하지만 일부 사이트에서는 그 점이 더욱 중요할 수 있습니다. 필자의 경험에 따르면 개발자들은 종종 이전 버전의 인터넷 익스플로러 사용자 1%에 대해 매우 걱정하는 반면, 더 많은 사용자 층인 내게 필요한 옵션 사용자에 대해선 전혀 고려하지 않습니다.

- -

당신이 사용하려는 기능에 대한 지원은 어떻습니까?

- -

사이트에 들어오는 브라우저를 알면, 해당 대상에 사용하고 싶은 기술을 평가할 수 있고, 그리고 그 기술을 이용할 수 없는 방문객들에게 얼마나 쉽게 대안을 제공할 수 있는지 진단할 수 있습니다. 우리는 CSS 속성을 상세히 설명하는 각 페이지에 대한 브라우저 호환성 정보를 모질라 개발자 네트워크에서 제공함으로써 쉽게 사용할 수 있도록 노력하고 있습니다. 예를 들어, {{cssxref("grid-template-columns")}} 페이지를 살펴보십시오. 이 페이지의 맨 아래에는 이 속성을 지원하기 시작한 버전과 함께 주요 브라우저가 나열된 표가 있습니다.

- -

- -

기능이 얼마나 잘 지원되는지 확인하는 또 다른 일반적인 방법은 Can I Use 웹 사이트입니다. 이 사이트에는 대부분의 웹 플랫폼 기능이 브라우저 지원 상태에 대한 정보와 함께 나열됩니다. 위치별로 사용 통계를 볼 수 있습니다. 주로 특정 지역의 사용자가있는 사이트에서 작업하는 경우 유용합니다. Google 웹 로그 분석 계정을 연결하여 사용자 데이터를 기반으로 분석할 수도 있습니다.

- -

사용자의 브라우저가 보유한 기술과 당신이 사용하려는 것에 대한 지원을 이해하면 당신은 좋은 상황에서 모든 결정을 내리고 모든 사용자를 가장 잘 지원할 수있는 방법을 알 수 있습니다.

- -

지원하는 것과 '모양이 똑같다'는 말은 다르다

- -

일부 사용자는 휴대 전화로 사이트를 보고 다른 사용자는 대형 데스크톱 화면에서 사이트를 보고 있기 때문에 모든 브라우저에서 웹 사이트가 동일하게 보이지 않을 수 있습니다. 마찬가지로 일부 사용자는 이전 브라우저 버전을 갖고 있고 다른 사용자에게는 최신 브라우저를 갖고 있습니다. 일부 사용자는 화면 읽기 프로그램을 사용해 내용을 읽거나 페이지를 확대하여 읽을 수도 있습니다. 모든 사람을 지원한다는 것은 방어적으로 디자인된 콘텐츠 버전을 제공하여 최신 브라우저에서는 사이트 외관이 뛰어나지만, 이전 브라우저 사용자에게는 기본 수준으로 계속 사용할 수 있음을 의미합니다.

- -

기본적인 지원 수준이란 페이지의 일반적인 흐름이 이해되도록 콘텐츠를 잘 구성하는 것에서 출발합니다. 기능이 매우 제한적인 전화기 사용자는 많은 CSS를 얻을 수 없지만, 콘텐츠는 쉽게 읽을 수 있는 방식으로 나열됩니다. 따라서 항상 잘 구성된 HTML 문서에서 출발해야 합니다. 여러분의 스타일 시트를 제거했을 때, 컨텐츠가 여전히 잘 이해되나요?

- -

한 가지 옵션은 아주 오래된 브라우저나 제한된 브라우저를 사용하는 사람들이 찾을 수 있는 대체 페이지로 사이트 외관을 단순화하는 것입니다. 문제가 되는 해당 브라우저를 사용해 소수의 사람들이 사이트를 방문하는 경우 최신 브라우저 사용자들과 비슷한 체험을 그들에게 제공하기 위해 시간을 쏟는 것이 상업적으로 맞지 않을 겁니다. 사이트의 접근성을 높이고 더 많은 사용자에게 서비스를 제공하는 일에 시간을 투자하는 것이 더 좋을 겁니다. 평범한 HTML 페이지와 온갖 장신구가 포함된 페이지 사이에는 중간 지점이 있으며 CSS는 실제로 이러한 대체 페이지를 매우 간단하게 생성해 줍니다.

- -

CSS로 대체 페이지 생성하기

- -

CSS 규격에는 두 가지 레이아웃 메서드가 동일한 항목에 적용될 때 브라우저가 수행하는 작업을 설명하는 정보가 포함되어 있습니다. 즉, 부동체 항목이 한편으로는 CSS grid 레이아웃을 사용하는 grid 항목인 경우 발생하는 상황에 대한 정의가 있음을 의미합니다. 이 정보가 브라우저가 이해하지 못하는 CSS를 무시한다는 지식과 결합되어, 이미 다루었던 레거시 기술을 사용하여 간단한 레이아웃을 생성할 수 있는 방법이 있습니다. 그런 다음 이를 최신 브라우저에서는 grid 레이아웃으로 덮어씁니다.

- -

아래 예에서는 세 개의 <div> 부동체를 행으로 표시했습니다. CSS grid 레이아웃을 지원하지 않는 브라우저는 상자 행을 부동 레이아웃 (浮動 組版) 으로 간주합니다. grid 항목이 되는 부동 항목은 부동 동작을 상실합니다. 즉, .wrapper 클레스를 grid 컨테이너로 전환하면 부동 항목이 grid 항목이 됩니다. 브라우저가 grid 레이아웃을 지원하는 경우 grid 디스플레이를 표시합니다. 지원하지 않으면 display: grid 관련 속성은 무시되고 부동 레이아웃이 사용됩니다.

- -
-
* {box-sizing: border-box;}
-
-.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  max-width: 400px;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
-.item {
-  float: left;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-}
-
- -
<div class="wrapper">
-  <div class="item">항목 하나</div>
-  <div class="item">항목 둘</div>
-  <div class="item">항목 셋</div>
-</div>
-
- -

{{ EmbedLiveSample('예제1', '100%', '200') }}

-
- -
-

참고: {{cssxref("clear")}} 속성도 마찬가지로 정리된 항목이 grid가 되자마자 효력을 상실합니다. 따라서 정리된 footer가 딸린 레이아웃을 가질 수 있으며, 이 레이아웃이 grid 레이아웃으로 전환됩니다.

-
- -

대체 메서드

- -

이 부동 예제와 비슷한 방식으로 사용할 수있는 여러 레이아웃 메서드가 있습니다. 당신이 생성해야하는 레이아웃 패턴에 가장 적합한 것을 선택할 수 있습니다.

- -
-
Float(부동) 및 clear
-
위에서 볼 수 있듯이, 부동 또는 정리 속성이 레이아웃에 미치는 효과는 부동되거나 정리된 항목이 flex 또는 grid 항목이 되면 중단됩니다.
-
display: inline-block
-
이 방법을 사용하여 열 레이아웃을 생성할 수 있는 경우는 항목이 display: inline-block로 설정되었을 경우이지만, flex 또는 grid 항목이 된다면 인라인 블록 동작은 무시됩니다.
-
display: table
-
CSS 테이블을 생성하는 메서드는 해당 단원의 입문서가 대체품으로 활용될 수 있습니다. CSS 테이블 레이아웃으로 설정된 항목은 그들이 flex 또는 grid 항목이 될 경우 자기 동작을 상실하게 됩니다. 중요하게는 테이블 구조를 수정하기 위해 생성된 익명 상자는 생성되지 않습니다.
-
다단 레이아웃
-
특정 레이아웃의 경우 당신은 다단을 대체품로 사용할 수 있습니다. 여러분의 콘테이너가 column-* 속성에 속한 것으로 정의되었다면 grid 컨테이너가 될 것이고, 다단 동작은 발생하지 않습니다.
-
grid 대체품 역할인 Flexbox
-
Flexbox는 인터넷 익스플로러 10과 11이 지원하기 때문에 grid를 지원하는 브라우저가 훨씬 많이 있습니다. 다만 이 단원의 뒷부분에서 설명하고 있는 구형 브라우저에서 flex를 지원하기 위한 처리 방법에 대해서도 확인해보세요. flex 컨테이너를 grid 컨테이너로 만들면 자식에 적용된 모든 flex () 속성은 무시됩니다.
-
- -

구형 브라우저에서 레이아웃 조정이 많이 필요한 경우 CSS를 이런 식으로 사용하면 괜찮은 경험을 할 수 있습니다. 오래되고 잘 지원되는 기술을 기반으로 간단한 레이아웃을 추가한 다음 최신 CSS를 사용하여 잠재 고객의 90% 이상이 볼 수있는 레이아웃을 만듭니다. 그러나 대체 코드에 새 브라우저가 해석할 내용이 포함되어야하는 경우가 있습니다. 이에 대한 좋은 예는 부동 항목에 백분율 너비를 추가하여 열을 마치 grid 디스플레이처럼 보이도록 컨테이너를 채울 수 있도록 (너비를) 늘리는 경우입니다.

- -

부동 레이아웃에서 백분율은 컨테이너를 기준으로 계산됩니다. 33.333%는 컨테이너 너비의 3 분의 1입니다. 그러나 grid에서는 항목이 배치된 grid 영역을 기준으로 33.333%가 계산되므로 grid 레이아웃이 도입되면 실제로 원하는 크기의 3분의 1이 됩니다.

- -
-
* {box-sizing: border-box;}
-
-.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  max-width: 400px;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
-.item {
-  float: left;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-  width: 33.333%;
-}
-
- -
<div class="wrapper">
-  <div class="item">항목 하나</div>
-  <div class="item">항목 둘</div>
-  <div class="item">항목 셋</div>
-</div>
-
- -

{{ EmbedLiveSample('예제2', '100%', '200') }}

-
- -

이 문제를 해결하려면 grid가 지원되는지 여부와 너비가 재정의되는지 여부를 감지할 수있는 방법이 필요합니다. CSS가 우리를 위해 마련한 해결책은 이렇습니다.

- -

Feature queries

- -

feature queries를 사용하면 브라우저가 특정 CSS 기능을 지원하는지 테스트 할 수 있습니다. 즉, 특정 기능을 지원하지 않는 브라우저 용 CSS를 작성한 다음 브라우저가 지원되는지 여부와 멋진 레이아웃을 제공하는지 확인하십시오.

- -

위의 예제에 feature query를 추가하면 grid가 지원됨을 알고 있는 경우 이 feature query를 사용하여 항목 너비를 auto () 으로 다시 설정할 수 있습니다.

- -
-
* {box-sizing: border-box;}
-
-.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  max-width: 400px;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
-.item {
-  float: left;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-  width: 33.333%;
-}
-
-@supports (display: grid) {
-  .item {
-      width: auto;
-  }
-}
-
- -
<div class="wrapper">
-  <div class="item">항목 하나</div>
-  <div class="item">항목 둘</div>
-  <div class="item">항목 셋</div>
-</div>
-
- -

{{ EmbedLiveSample('예제3', '100%', '200') }}

-
- -

feature query에 대한 지원은 최신 브라우저에서 매우 유용하지만 CSS grid를 지원하지 않는 브라우저는 feature query도 지원하지 않는다는 점에 유의해야합니다. 이는 위에서 설명한 접근 방식이 해당 브라우저에서 작동한다는 것을 의미합니다. 우리가 하는 작업은 feature query를 차치하고 먼저 이전 CSS를 작성하는 것입니다. grid를 지원하지 않고 feature query를 지원하지 않는 브라우저는 자기가 이해할 수 있는 레이아웃 정보를 이용하고 그밖에 다른 것들은 완전히 무시할 수 있습니다. feature query를 지원하는 브라우저는 CSS grid도 지원하므로 grid 코드 및 feature query 내부의 코드를 실행합니다.

- -

feature query 규격에는 브라우저가 기능을 지원하지 않는지 테스트하는 기능도 포함되어 있습니다. 이는 브라우저가 feature query를 지원하는 경우에만 유용합니다. feature query를 지원하지 않는 브라우저가 갈수록 사라짐에 따라 미래에는 지원 부족 여부를 확인하는 방법은 작동하게 됩니다. 그러나 지금은 최상의 지원을 위해 이전 CSS를 사용한 다음 덮어 쓰는 방식을 사용하십시오.

- -

Flexbox 예전 버전

- -

이전 버전의 브라우저에서는 이전의 Flexbox 명세가 반복되는 것을 여러분은 발견할 수 있습니다. 글을 쓰는 시점에서 이것은 Flexbox에 -ms- 접두사를 사용하는 인터넷 익스플로러 10의 문제입니다. 이는 또한 오래된 문서와 자습서가 있음을 의미합니다. 이 유용한 안내서는 보고있는 내용을 확인하는 데 도움이되고 매우 오래된 브라우저에서 flex 지원이 필요한 경우에도 도움이 될 수 있습니다.

- -

인터넷 익스플로러 10과 11 접두사 버전

- -

CSS grid 규격은 인터넷 익스플로러 10에서 처음 나온 원형이었습니다. 즉, 인터넷 익스플로러 10 및 11에는 최신 grid 지원이 없지만, 이 사이트에 문서화된 최신 규격과는 다르나 매우 유용한 그리드 레이아웃 버전이 있습니다. 인터넷 익스플로러 10 및 11 구현은 -ms- 접두사를 사용해 해당 그리드를 마이크로소프트 브라우저에 사용할 수 있으며 이외의 브라우저에서는 무시됩니다. 에지 브라우저는 여전히 이전 구문을 이해하므로 현대 그리드 CSS에서 모든 항목을 안전하게 덮어씁니다.

- -

그리드 레이아웃의 점진적 향상에 대한 안내서는 그리드의 인터넷 익스플로러 버전을 이해하는 데 도움이되며 이 단원 끝에는 별도의 유용한 링크를 포함하고 있습니다. 그러나 이전 인터넷 익스플로러 버전 사용자의 방문자 수가 매우 많지 않다면 모든 비지원 브라우저에서 작동하는 대체품을 만드는 것이 더 좋습니다.

- -

이전 브라우저 여부 확인

- -

Flexbox 및 그리드를 지원하는 대부분의 브라우저를 사용하면 구형 브라우저를 테스트하기가 상당히 어려울 수 있습니다. 한 가지 방법은 크로스 브라우저 테스트 단위에 설명 된대로 Sauce Labs과 같은 온라인 테스트 도구를 사용하는 것입니다.

- -

또한 가상 컴퓨터를 다운로드하여 설치한 뒤 제약이 걸린 본인의 컴퓨터 환경에서 이전 버전의 브라우저를 실행할 수 있습니다. 이전 버전의 인터넷 익스플로러에 액세스하는 것이 특히 유용하며 이를 위해 마이크로소프트는 다양한 가상 컴퓨터를 무료로 다운로드 할 수 있도록 만들었습니다. 맥, 윈도우즈 및 리눅스 운영 체제에서 가상 컴퓨터를 사용할 수 있으므로 윈도우즈 컴퓨터를 사용하지 않더라도 이전 및 최신 윈도우즈 브라우저에서 테스트할 수있는 좋은 방법입니다.

- -

요약정리

- -

여러분은 이제 그리드 및 Flexbox와 같은 기술을 자신있게 사용하고, 이전 브라우저를 위한 대체품을 만들고, 향후 발생할 수 있는 새로운 기술을 활용할 수 있는 지식을 얻었습니다.

- -

참조 항목

- - - -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

- -

이번 단위에는

- - diff --git "a/files/ko/learn/css/css_layout/\354\235\274\353\260\230_\355\235\220\353\246\204/index.html" "b/files/ko/learn/css/css_layout/\354\235\274\353\260\230_\355\235\220\353\246\204/index.html" deleted file mode 100644 index 43b4366c0e..0000000000 --- "a/files/ko/learn/css/css_layout/\354\235\274\353\260\230_\355\235\220\353\246\204/index.html" +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: 일반 대열 -slug: Learn/CSS/CSS_layout/일반_흐름 -tags: - - 격자형 - - 부동 - - 씨에스에스 - - 일반 대열 - - 조판 - - 초보자 - - 학습 -translation_of: Learn/CSS/CSS_layout/Normal_Flow ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

- -

이번 글에서는 normal flow, 다른 말로 만일 당신이 요소의 레이아웃을 변경하지 않을 시 웹페이지 요소가 자기 자신을 배치하는 방법에 관해 설명합니다.

- - - - - - - - - - - - -
선결 사항:HTML의 기초 (HTML에 대한 소개)와 CSS 작동 방식에 대한 개념(CSS 소개를 공부하세요.)
목표:변경이 이뤄지기 전에 브라우저가 웹 페이지를 기본값으로 레이아웃하는 방법을 설명하기
- -

이전 단원에서 상세히 기술한 바와 같이, 당신이 CSS를 적용하지 않을 경우 웹 페이지의 요소는 normal flow로 배치됩니다. 그리고 normal flow에 포함된 요소의 위치를 조정하거나 요소를 완전히 제거함으로써 요소가 동작하는 방법을 변경할 수 있습니다. 모든 웹 페이지를 시작하는 최상의 방법은 normal flow에서 읽기 가능하며, 견고하고 구조화된 문서로 시작하는 것입니다. 이렇게 하면 제한된 기능을 가진 브라우저를 사용하거나 페이지 콘텐츠를 소리 내 읽는 스크린 리더와 같은 장치를 사용하는 사용자들까지 읽을 수 있는(readable) 콘텐츠로 만들 수 있습니다. 또한, normal flow는 읽기 가능한 문서를 만들도록 마련된 것으로, 이를 출발점으로 삼아 레이아웃을 변경할 때 웹페이지 문서와 대립해 싸울 게 아니라 그것과 협력해서 작업하게 됩니다.

- -

서로 다른 레이아웃 메서드를 본격적으로 파헤치기 전에 일반 문서 흐름과 관련하여 이전 모듈에서 학습했던 내용 중의 일부를 복습하는 것도 가치가 있습니다.

- -

기본값으로 요소들은 어떻게 배치되는가?

- -

우선 개별 요소인 상자의 배치는 자신의 내용물을 채택하고, 그 주변에 패딩을 더하고, 테두리와 여백을 더하는 식으로 이뤄집니다. 다시 말해 앞서 살펴보았던 박스 모델과 같습니다.

- -

기본값으로 블록 수준 요소의 내용물은 자기 부모 요소의 너비 100%와 자체 내용물의 최대 높이가 됩니다. 인라인 요소는 자체 내용물의 최대 높이를 취하는 동시에 최대 너비를 취합니다. 인라인 요소에 너비나 높이를 설정할 수는 없습니다. 그들은 블록 수준 요소의 콘텐츠 내부에 들어앉았을 뿐입니다. 인라인 요소의 크기를 제어하려면 그것을 display: block; 속성값이나 양쪽의 성격이 혼합된 display: inline-block;을 가지고 블록 수준 요소처럼 행동하도록 설정할 필요가 있습니다.

- -

앞서 살펴본 내용에서 개별 요소는 설명되지만, 여러 요소가 서로 상호 작용하는 방법은 어떻게 설명할까요? (레이아웃 입문서에서 언급했던) 일반 레이아웃의 flow는 브라우저의 뷰포트 안에 요소를 배치하는 시스템입니다. 기본값으로 블록 수준 요소의 배치는 부모의 쓰기 모드(initial: horizontal-tb)에 기초해 블록 flow 방향에 포함되어 이뤄집니다. 다시 말해 각 블록 요소는 마지막 요소 아래 새 줄에 나타나며, 각 요소에 주어진 margin에 의해 구분됩니다. 그러므로 영어 또는 여타 가로쓰기, 상단에서 하단으로 행갈이 하는 쓰기 모드와 블록 수준 요소는 수직으로 배치됩니다.

- -

인라인 요소는 다르게 동작합니다. 새로운 줄에 나타나는 대신, 다른 요소와 같은 라인에 차례로 자리 잡습니다. 다만 인접(혹은 접힌) 텍스트 콘텐츠는 해당 부모의 블록 수준 요소의 너비 내에서 자신이 자리를 잡을 수 있는 공간이 있는 경우가 해당합니다. 충분한 공간이 없을 경우 overflow되는 텍스트 또는 요소는 새로운 줄에 나타납니다.

- -

두 개의 인접 요소가 모두 자체 여백이 지정되어 있다면 두 여백은 접촉하고 그중 큰 여백만 남게 되며, 작은 여백은 사라집니다. 이를 마진 축소(margin collapsing)라고 하며 이전에 확인해본 적이 있습니다.

- -

이 모든 것을 설명하는 간단한 예를 살펴봅시다.

- -
-
<h1>기본 문서 flow</h1>
-
-<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p>
-
-<p>기본값으로 우리는 우리 부모 요소의 너비 100%를 넘나들며, 우리 자녀 콘텐츠의 최대 높이를 취합니다. 우리의 총 너비와 총 높이는 우리의 콘텐츠 + 패딩 + 테두리 너비 및 높이입니다.</p>
-
-<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p>
-
-<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 오버플로할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
- -
body {
-  width: 500px;
-  margin: 0 auto;
-}
-
-p {
-  background: rgba(255,84,104,0.3);
-  border: 2px solid rgb(255,84,104);
-  padding: 10px;
-  margin: 10px;
-}
-
-span {
-  background: white;
-  border: 1px solid black;
-}
-
- -

{{ EmbedLiveSample('일반_flow', '100%', 500) }}

- -

요약정리

- -

이제 당신은 normal flow은 물론, 기본값으로 브라우저가 어떤 방식으로 사물을 배치하는지 이해했습니다. 당신의 디자인 필요에 따라 레이아웃을 만들기 위해 디스플레이 기본값을 변경하는 방법을 배우려면 다음 단계로 이동하세요.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

- -

이번 단위에는

- - diff --git a/files/ko/learn/css/howto/css_faq/index.html b/files/ko/learn/css/howto/css_faq/index.html new file mode 100644 index 0000000000..604448f6c3 --- /dev/null +++ b/files/ko/learn/css/howto/css_faq/index.html @@ -0,0 +1,199 @@ +--- +title: 공통된 CSS 질문들 +slug: Web/CSS/Common_CSS_Questions +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

왜 유효한 내 CSS가 왜 올바르게 그려지지 않는가?

+ +

Browsers use the DOCTYPE declaration to choose whether to show the document using a mode that is more compatible  with Web standards or with old browser bugs. Using a correct and modern DOCTYPE declaration at the start of your HTML will improve browser standards compliance.

+ +

Modern browsers have two main rendering modes:

+ + + +

Gecko-based browsers, have a third Almost Standards Mode that has only a few minor quirks.

+ +

This is a list of the most commonly used DOCTYPE declarations that will trigger Standards or Almost Standards mode:

+ +
<!DOCTYPE html> /* This is the HTML5 doctype. Given that each modern browser uses an HTML5
+                   parser, this is the recommended doctype */
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+ +

왜 유효한 내 CSS는 모두 랜더링 되지 않는가?

+ +

원인은 다음과 같다:

+ + + +

id 와 css는 무엇이 다른가?

+ +

HTML elements can have an id and/or class attribute. The id attribute assigns a name to the element it is applied to, and for valid markup, there can be only one element with that name. The class attribute assigns a class name to the element, and that name can be used on many elements within the page. CSS allows you to apply styles to particular id and/or class names.
+
+ Use an id-specific style when you want to restrict the applied styling rules to one specific block or element. This style will only be used by the element with that particular id.
+
+ Use a class-specific style when you want to apply the styling rules to many blocks and elements within the page.

+ +

Stylesheets with fewer rules are usually more performant. It is therefore recommended to use classes as much as possible, and to reserve the use of id for specific uses (like to connect label and form elements or for styling elements that must be semantically unique).

+ +

See CSS selectors

+ +

 프로퍼티(property)에 기본값(default value)으로 복귀 시키는 방법은?

+ +

 

+ +

본래 CSS는 "default" 키워드를 제공하지 않으며 속성의 기본값을 복원하는 유일한 방법은 해당 속성을 명시 적으로 다시 선언하는 것이다.

+ +
/* Heading default color is black */
+h1 { color: red; }
+h1 { color: black; }
+ +

이것은 CSS 2에서 변경되었다. 키워드 initial은 이제 CSS 속성에서 유효한 값이다. 지정된 속성의 CSS 사양에 정의 된 기본값으로 재설정된다.

+ +
/* Heading default color is black */
+h1 { color: red; }
+h1 { color: initial; }
+ +

 

+ +

어떻게 하면 한 스타일(style)로 부터 다른 스타일을 파생시킬 수 있는가?

+ +

CSS는 한 스타일 안에서 다른 조건을 정의하는 것을 허용하지 않는다. (See Eric Meyer's note about the Working Group's stance).  그러나 여러개의 클래스(class)들을 한 엘리먼트(element)에 할당하면 같은 효과를 제공받을 수 있다.

+ +

어떻게 하면 한 요소(element)에 여러 클래스(class)를 할당할 수 있는가?

+ +

HTML elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to separate them.

+ +
<style type="text/css">
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+</style>
+
+<div class="news today">
+... content of today's news ...
+</div>
+
+ +

If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the class attribute is not relevant.

+ +

왜 내 스타일 룰(style rule)은 올바르게 동작하지 않는가?

+ +

Style rules that are syntactically correct may not apply in certain situations. You can use DOM Inspector's CSS Style Rules view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.

+ +

HTML 요소(element) 계층(hierarchy)

+ +

The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.

+ +
.news { color: black; }
+.corpName { font-weight: bold; color: red; }
+
+<!-- news item text is black, but corporate name is red and in bold -->
+<div class="news">
+   (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday...
+</div>
+
+ +

In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.

+ +

명확한 스타일 룰 재정의

+ +

CSS 스타일시트 안에서 순서가 중요하다. 만약 룰을 정의하고 같은 룰을 재정의 한다면 마지막 정의가 적용된다.

+ +
#stockTicker { font-weight: bold; }
+.stockSymbol { color: red; }
+/*  other rules             */
+/*  other rules             */
+/*  other rules             */
+.stockSymbol { font-weight: normal; }
+
+<!-- most text is in bold, except "GE", which is red and not bold -->
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

위와 같은 종류의 오류를 방지하려면 특정 선택자에 대해 규칙을 한 번만 정의하고 해당 선택자에 속하는 모든 규칙을 그룹화 하는 것이 좋다.

+ +

프로퍼티(property) 축약형의 사용

+ +

Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to default. This means that a previous rule for a single attribute could be implicitly overridden.

+ +
#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.stockSymbol { font: 14px Arial; color: red; }
+
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order is important.

+ +
#stockTicker {
+   font-weight: bold;
+   font: 12px Verdana;  /* font-weight is now normal */
+}
+
+ +

* 셀렉터(selector)의 사용

+ +

* 와일드카드 셀렉터는 모든 엘리먼트에 적용되고, 이것은 특별히 주의를 기울여 사용해야 한다.

+ +
body * { font-weight: normal; }
+#stockTicker { font: 12px Verdana; }
+.corpName { font-weight: bold; }
+.stockUp { color: red; }
+
+<div id="section">
+   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
+</div>
+
+ +

In this example the body * selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So font-weight: bold; applied to the .corpName class is overridden by font-weight: normal; applied to all elements in the body.

+ +

The use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.

+ +

CSS의 특수성

+ +

When multiples rules apply to a certain element, the rule chosen depends on its style specificity. Inline style (in HTML style attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.

+ +
div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+<div id="orange" class="green" style="color: red;">This is red</div>
+
+ +

The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the CSS 2.1 Specification chapter 6.4.3.

+ +

-moz-*, -ms-*, -webkit-*, -o-* and -khtml-* 프로퍼티(property)들이 하는 것은?

+ +

These properties, called prefixed properties, are extensions to the CSS standard. They are used to use experimental and non-standard features without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.

+ +

The use of such properties on production websites is not recommended. If nevertheless needed, you are hinted to make a plan for the website evolution: these prefixed properties can be modified or even suppressed when the standard evolves.

+ +

Please see the Mozilla CSS Extensions page for more information on the Mozilla-prefixed CSS properties.

+ +

z-index는 어떻게 포지셔닝을 하는가?

+ +

The z-index property specifies the stack order of elements.

+ +

An element with a higher z-index/stack order is always in front of an element with a lower z-index/stack order.

+ +

Z-index will only work on elements that have a specified position (position:absolute, position:relative, or position:fixed).

diff --git "a/files/ko/learn/css/introduction_to_css/\352\270\260\353\263\270\354\240\201\354\235\270_css_\354\235\264\355\225\264/index.html" "b/files/ko/learn/css/introduction_to_css/\352\270\260\353\263\270\354\240\201\354\235\270_css_\354\235\264\355\225\264/index.html" deleted file mode 100644 index d16df40221..0000000000 --- "a/files/ko/learn/css/introduction_to_css/\352\270\260\353\263\270\354\240\201\354\235\270_css_\354\235\264\355\225\264/index.html" +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: 기본적인 CSS 이해 -slug: Learn/CSS/Introduction_to_CSS/기본적인_CSS_이해 -translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
- -

You've covered a lot in this module, so it must feel good to have reached the end! The final step before you move on is to attempt the assessment for the module — this involves a number of related exercises that must be completed in order to create the final design — a business card/gamer card/social media profile.

- - - - - - - - - - - - -
Prerequisites:Before attempting this assessment you should have already worked through all the articles in this module.
Objective:To test comprehension of fundamental CSS theory, syntax and mechanics.
- -

Starting point

- -

To get this assessment started, you should:

- - - -
-

Note: Alternatively, you could use a site like JSBin or Thimble to do your assessment. You could paste the HTML and fill in the CSS into one of these online editors, and use this URL to point the <img> element to the image file. If the online editor you are using doesn't have a separate CSS panel, feel free to put it in a <style> element in the head of the document.

-
- -

Project brief

- -

You have been provided with some raw HTML and an image, and need to write the necessary CSS to style this into a nifty little online business card, which can perhaps double as a gamer card or social media profile. The following sections describe what you need to do.

- -

Basic setup:

- - - -

Taking care of the selectors and rulesets provided in the CSS resource file:

- - - -

New rulesets you need to write:

- - - -
-

Note: Bear in mind that the second ruleset sets font-size: 10px; on the <html> element — this means that for any descendants of <html>, an em will be equal to 10px rather than 16px as it is by default. (This is of course, provided the descendants in question don't have any ancestors sitting in between them and <html> in the hierarchy that have a different font-size set on them. This could affect the values you need, although in this simple example this is not an issue.)

-
- -

Other things to think about:

- - - -

Hints and tips

- - - -

Example

- -

The following screenshot shows an example of what the finished design should look like:

- -

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

- -

 

- -

Assessment

- -

If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the discussion thread about this exercise, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!

- -

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

- -

 

- -

In this module

- - - -

 

diff --git a/files/ko/learn/forms/how_to_structure_a_web_form/index.html b/files/ko/learn/forms/how_to_structure_a_web_form/index.html new file mode 100644 index 0000000000..37bfbb57ae --- /dev/null +++ b/files/ko/learn/forms/how_to_structure_a_web_form/index.html @@ -0,0 +1,928 @@ +--- +title: HTML_폼_구성_방법 +slug: Learn/HTML/Forms/HTML_폼_구성_방법 +translation_of: Learn/Forms/How_to_structure_a_web_form +--- +

HTML폼을 만들떄 구조화 하는것은 중요한 것이다. 이것은 두가지 이유로 중요하다. 폼이 사용 할수 있다는 것을 보장하고 접근성도 늘릴수 있기 떄문이다.(즉 장애인들도 쉽게 사용할 수 있다.) HTML 폼의 접근성은 중요한 점이고 어떻게 폼 접근성을 높일 수 있는지 볼것이다.

+ +

HTML 폼들은 그 유연성으로 인해 HTML 중 복잡한 구조를 가지고 있는 요소중 하나이다. 폼 요소와 속성을 잘 혼합하면 모든 형태의 기본적인 폼을 만들 수 있다. 즉 몇몇 사람들이 HTML폼이 단순하고 매우 거칠다는 것을 발견했다는 것에 주목할 가치가 있다. XForms같은 풍부한 기술이 있다는 것은 사실이지만 불행하게도 모든 브라우저에서 폼의 종류를 널리 구현되지 않았다. 왜냐하면 대부분 자바스크립트에 의존하여 HTML폼들을 다루기 떄문이다.이 문서에서는 HTML 폼 요소들을 어떻게 사용해야 하는지 자세하게 설명 할 것이다. 만약 사용자 폼 위젯 만들기에 대하여 자세한 내용을 알고 싶다면 다음 문서를 참조하시오. How to build custom form widgets

+ +

글로벌 구조

+ +

<form> 요소

+ +

{{HTMLElement("form")}} 요소는 공식적으로 폼을 정의하는 요소로 이 요소의 속성으로 폼의 작동하는 방식을 정의 할 수있다. HTML폼을 생성할떄마다 반드시 이 요소로 시작을 해야한다. 많은 보조 기술이나 브라우저 플러그인이 {{HTMLElement("form")}} 요소를 발견하고 쉽게 사용 할 수 있게 특별한 후크를 구현 할 수 있다.

+ +

우리는 저번 문서에서 이미 이 내용을 다루었다.

+ +
주의:폼을 다른 폼으로 둘러싸는 것은 엄격하게 제한되어 있다. 만약 그렇게 하면 사용자가 사용하는 브라우저에 따라 예측할 수 없는 방식으로 작동하게 된다.
+ +

언제든지 폼위젯을 {{HTMLElement("form")}} 요소 바깥에서 사용할 수 있다. 하지만 그렇게 사용한다면, 그 폼위젯은 어떠한 폼과도 관련이 없다. 폼 위젯들은 폼 바깥에서 사용될 수  있지만, 그 위젯들은 스스로 아무것도 하지 않을 것이기 때문에 당신이 그 위젯들 전용 프로세스를 만들어주어야 한다. 당신은 자바스크립트로 그 동작을 정의해주어야 한다.

+ +
+

주의:HTML5에서 HTML 폼 요소안의 폼 속성이 지원된다. 폼 속성은 {{HTMLElement("form")}} 바깥에 있는 폼요소라도 폼과 명시적으로 연결한다. 불행하게도 지금 시점에 이 기능은 다양한 브라우저에서 안정적으로 구현되지 않아서 신뢰할 수 없다.

+
+ +

{{HTMLElement("form")}} 요소는 다음과 같은 속성을 가지고 모든 속성이 필수가 아닌 선택적이다.

+ +


+  {{HTMLElement("form")}} 요소 속성

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
속성 이름기본값설명
{{htmlattrxref("accept-charset","form")}}UNKNOWN서버가 받아들일 문자 인코딩의 형식을 지정한다. 기본값은 특수 문자열 UNKNOWN이고 이경우에 폼 요소 안에 있는 문서의 인코딩에 맞는 인코딩이다.
{{htmlattrxref("action","form")}} 폼을 통해서 전송한 정보를 처리하는 웹페이지의 URL 
{{htmlattrxref("autocomplete","form")}}on이 속성은 이 폼안에 있는 위젯들의 기본값이 브라우저에 의해 자동 완성 하게 하는지 여부를 나타낸다. 이속성은 두가지 값중 하나를 같는다. on 또는 off.
{{htmlattrxref("enctype","form")}}application/x-www-form-urlencoded\method 속성이 post 값으로 지정되면,  서버로 폼을 전송하는 콘텐츠 MIME의 타입을 지정한다.: +
    +
  • application/x-www-form-urlencoded
    • +
  • multipart/form-data: {{HTMLElement("input")}}요소의 type 속성을 file로 지정한 경우 이 속성의 값을 사용한다. 
    • +
  • text/plain
    • +
+
{{htmlattrxref("method","form")}}get브라우저가 폼을 전송하기위해 사용하는 HTTP의 방식을 지정한다.
+ 이 속성은 두개의 값중 한개를 가진다.  get 또는 post.
{{htmlattrxref("name","form")}} 폼의 이름이다. 이 속성값은 반드시 문서의 폼 사이에서 고유해야하며 빈 문자열을 지정할 수없다. 일반적으로 id 속성으로 대신 지정할 수 있다.
{{htmlattrxref("novalidate","form")}}(false)이 불리언 속성은 폼이 전송 할떄 유효성 검사를 할수 없음을 나타낸다.
{{htmlattrxref("target","form")}}_self폼 요청을 전송한후 응답을 어떻게 받을것인지 지정한다. 예를들어 {{HTMLElement("iframe")}}, tab, window를 사용 할 수 있다. 이 속성의 키워드로 다음과 같은 값을 사용 할 수있다. +
    +
  • _self: 응답을 현재 브라우징 컨텍스트 ({{HTMLElement("iframe")}}, tab, window 등)에서 불러온다.
    • +
  • _blank: 응답을 새로운 브라우징 컨텍스트로 불러온다.
    • +
  • _parent: 응답을 현재의 브라우징 컨텍스트의 부모 브라우징 컨텍스트에서 불러온다. 만약 부모가 없다면 _self 키워드와 똑같이 작동한다.
    • +
  • _top: 응답을 최상휘 레벨 브라우징 컨텍스트에서 불러온다. 만약 최상위 컨텍스트가 없다면  _self 키워드와 똑같이 작동한다.
    • +
+
+ +

요소 밖에 폼 위젯들을 사용 할 수 있지만, 폼 위젯이 어떠한 폼과도 상관이 없다는 것을 유의 해야 한다.폼의 밖에서 위젯을 사용하는 것은 편리할 수 있지만 위젯들이 작동하기 위해 다른 것들을 해야 한다는 것을 의미한다. 아마 자바스크립트를 이용해서 동작을 정의 해야 할것이다.

+ +

기술적으로 HTML5는 HTML 폼 요소에서 폼 속성을 설명 했다. 이것은 요소들을 실제로  {{ HTMLElement("form") }} 안에 있지 않아도 form요소로 확실하게 바인딩 하도록 해야한다. 불행하게도 모든 브라우저가 아직 이것을 충분히 지원하지 않는다.

+ +

 <fieldset> 와 <legend> 요소

+ +

{{HTMLElement("fieldset")}}요소는 같은 목적을 가진 위젯들을 편리하게 그룹화 하는 방법이다. A {{HTMLElement("fieldset")}} 요소는 라벨인 {{HTMLElement("legend")}} 요소와 같이 사용된다. {{HTMLElement("legend")}} 요소는 공식적으로 {{HTMLElement("fieldset")}} 요소를 설명하는데 사용된다. 많은 보조 기술들이 {{HTMLElement("legend")}} 요소를 {{HTMLElement("fieldset")}} 요소의 라벨로 이용하는데 사용된다. 예를 들어  Jaws, NVDA같은 스크린 리더들은 각각의 위젯의 라벨을 읽기전에 legend들을 읽을 것이다. 

+ +

아래 조그만 예제가 있다.

+ +
<form>
+  <fieldset>
+    <legend>Fruit juice size</legend>
+    <p>
+      <input type="radio" name="size" id="size_1" value="small" />
+      <label for="size_1">Small</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_2" value="medium" />
+      <label for="size_2">Medium</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_3" value="large" />
+      <label for="size_3">Large</label>
+    </p>
+  </fieldset>
+</form>
+ +

이 예제를 스크림 리더가 Fruit juice size small을 먼저 읽고 Fruit juice size medium을 읽은 다음 마지막으로 Fruit juice size large을 읽을 것이다,

+ +

이것은 가장 중요한것 중 하나이다. 대부분 라디오 버튼을 설정할떄 마다{{HTMLElement("fieldset")}} 요소 안에 있는지 확인해야한다. 다르게 사용하는 사례가 있지만 일반적으로 {{HTMLElement("fieldset")}}  요소는 폼을 강력하게 사용할 수 있게 해준다. 보조기술의 영향으로 {{HTMLElement("fieldset")}}  요소는 폼 접근 할수 있는 키 요소 중 하나이다. 이것을 남용하지 않는 것은 개발자 책임이다. 가능한 폼을 만들떄마다 스크린리더로 들어보면서 하는 것이 좋다. 만약 말이 이상하게 들린다면 개선 해야 한다는 신호이다.

+ +

{{HTMLElement("fieldset")}} 요소는 다음과 같은 속성을 지정한다.

+ + + + + + + + + + + + + + + + + +
{{HTMLElement("fieldset")}} 요소의 속성
속성 이름기본값설명
{{htmlattrxref("disabled","fieldset")}}(false)만약 이 불리언 속성이 설정되면 폼은(첫번째 {{ HTMLElement("legend") }}요소에 있는 요소는 예외이다. ) 이것에 파생된 요소를 사용하거나 편집 할 수없게된다. 그리고 마우스 클릭같은 어떠한 브라우저 이벤트들도 받지 않을것이다. 일반적으로 브라우저는 회색으로 이를 표시할 것이다.
+ +

The <label> element

+ +

{{HTMLElement("label")}} 요소는 HTML 폼 위젯을 정의하는 공식적인 방법이다. 이것은 접근성 있는 폼을 만드는데 가장 중요한 요소이다.

+ +

{{HTMLElement("label")}} 요소는 다음과 같은 속성을 지원한다.

+ +


+ {{HTMLElement("label")}} 요소의 속성

+ +


+  

+ + + + + + + + + + + + + + + + +
속성 명기본값설명
{{htmlattrxref("for","label")}} {{HTMLElement("label")}}  요소와 같은 문서에 있는 위젯의 라벨의 ID . 문서안의 ID와 for속성 값이 같으면 그 라벨 요소는 그 위젯의 라벨이된다.
+ +

요소는 for속성으로 지정한 위젯과 묶여진다. for속성은 해당 위젯의 실제 id 속성을 참조한다. 위젯은 요소로 둘러싸게 할수 있지만 이 경우 몇가지 보조 기술이 라벨과 위젯의 암시적인 관계를 이해하지 못하기 떄문에 for 속성을 고려 해봐야한다.

+ +

심지어 보조 기술을 배제 한다고 하여도 모든 브라우저에서 공식적인 라벨 설정하면 사용자가 라벨을 누르면 해당하는 위젯이 활성화 할수 있다는 것을 알아 두어야한다. 이것은 라디오 버튼이나 체크박스를 사용하는데 특히 유용하다.

+ +
<form>
+  <p>
+    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
+    <label for="taste_1">I like cherry</label>
+  </p>
+  <p>
+    <label for="taste_2">
+      <input type="checkbox" id="taste_2" name="taste_banana" value="1">
+      I like banana
+    </label>
+  </p>
+</form>
+ +

몇가지 보조 기술은 여러개의 라벨을 한개의 위젯을 다루면 문제를 가질수 있다. 이 떄문에 위젯을 그에 맞는 폼 요소안에 넣어서 사용해야한다.

+ +

다음 예제를 보아라

+ +
<form>
+  <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
+
+  <p>
+    <label for="name">
+      <span>Name: </span>
+      <input type="text" id="name" name="username" required />
+      <strong><abbr title="required">*</abbr></strong>
+    </label>
+  </p>
+
+  <p>
+    <label for="birth">
+      <span>Date of birth: </span>
+      <input type="text" id="birth" name="userbirth" maxlength="10" /> <em>formated as mm/dd/yyyy</em>
+    </label>
+  </p>
+</form>
+ +

이 예제에서 첫번째 단락은 필수적인 요소의 규칙들을 정의한다. 이 것은 스크린 리더와 같은 보조 기술이 필수 요소들을 찾기전에 출력하거나 읽기 위해서는 반드시 시작부분 나타내야 한다. 이런식으로 사용자는 항상 자신이 무엇을 하는지 알 수있다.

+ +

첫번째 필드는 필수적이기 떄문에 라벨 요소는 name 과 * 로 필수적인 필드를 나타낸다  이런 식으로 하면 스크린 리더는 "Name star" 또는 "Name required"이라고 읽을 것이다. ( 스크린 리더의 설정에 따라 다르지만 항상 첫번째 단락에서 읽어진 것을 읽는다).  만약 두가지 라벨을 사용한다면, 사용자가 이 요소가 필수 요소 인지 보여지는지 보장 할 수없다.

+ +

두번째 폼 요소는 비슷하게 작동한다. 이 기술을 사용하면 사용자에게 어떻게 데이터를 작성하는지 알려주는데 확신 할 수 있다.

+ +

<output> 요소

+ +

이 요소는 계산의 출력을 저장하는데 사용된다. It formally defines a relationship between the fields used to get the data required to perform the calculation and an element to be used to display the results. It is also understood as a live region by some assistive technologies (which means that when the content of the {{HTMLElement("output")}} element changes, the assistive technology is aware of that change and can react to it).

+ +

{{HTMLElement("output")}} 요소는 다음 속성은 지원한다.

+ + + + + + + + + + + + + + + + + +
{{HTMLElement("output")}} 요소 속성
Attribute nameDefault valueDescription
{{htmlattrxref("for","output")}} 스페이스로 구분된 다른 요소의 ID로 설정하고 이 요소들에 값을 입력을 계산하는데 기여한다.(또는 다른 효과)
+ +

form이 사용되는 일반적인 form 구조

+ +

HTML 폼의 지정된 구조를 넘어서 하나의 HTML이라고 생각 하는게 좋다. T 이 의미는 HTML 폼을 구성하는데 HTML의 모든 능력을 사용할 수 있다는 것이다.

+ +

예제에서 볼 수 있드니 라벨과 위젯을 둘러싸는데 최고의 방법은  {{HTMLElement("p")}}요소 나 {{HTMLElement("div")}}요소를 사용하는 것이다.

+ +

게다가 {{HTMLElement("fieldset")}} 요소에 HTML 타이틀을 사용하고 복잡한 폼을 만드는데 구조에 섹션을 사용하는것도 일반적인 관행이다.

+ +

HTML 목록은 체크박스나 라디오 버튼을 사용하는데 일반적으로 사용된다.

+ +

간단한 지불 폼을 만들어 보자

+ +
<form>
+  <h1>Payment form</h1>
+  <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
+
+  <section>
+    <h2>Contact information</h2>
+
+    <fieldset>
+      <legend>Title</legend>
+      <ul>
+        <li>
+          <label for="title_1">
+            <input type="radio" id="title_1" name="title" value="M." />
+            Mister
+          </label>
+        </li>
+        <li>
+          <label for="title_2">
+            <input type="radio" id="title_2" name="title" value="Ms." />
+            Miss
+          </label>
+        </li>
+      </ul>
+    </fieldset>
+
+    <p>
+      <label for="name">
+        <span>Name: </span>
+        <input type="text" id="name" name="username" required />
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+    </p>
+
+     <p>
+      <label for="mail">
+        <span>E-mail: </span>
+        <input type="email" id="mail" name="usermail" required />
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+    </p>
+  </section>
+
+  <section>
+    <h2>Payment information</h2>
+
+    <p>
+      <label for="card">
+        <span>Card type:</span>
+        <select id="card" name="usercard">
+          <option value="visa">Visa</option>
+          <option value="mc">Mastercard</option>
+          <option value="amex">American Express</option>
+        </select>
+      </label>
+    </p>
+    <p>
+      <label for="number">
+        <span>Card number:</span>
+        <input type="text" id="number" name="cardnumber" required />
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+    </p>
+    <p>
+      <label for="date">
+        <span>Expiration date:</span>
+        <input type="text" id="date" name="expiration" required />
+        <strong><abbr title="required">*</abbr></strong>
+        <em>formated as mm/yy</em>
+      </label>
+    </p>
+  </section>
+
+  <section>
+    <p>
+      <button>Validate the payment</button>
+    </p>
+  </section>
+</form>
+ +

See this form in action (with a touch of CSS):

+ +

{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}

+ +

HTML 위젯

+ +

When you build a form, you need to use some widgets to collect data from the user. In this article we will see how to display those widgets; if you want to know more about the way those widgets work, it is detailed in the article: The native form widgets.

+ +

The <input> element

+ +

이 요소는 거의 모든 것을 할 있기 떄문에 특별 한 종류이다. 간단하게 type속성을 설정하여 완전히 바뀔수 있다. 간단하게 하기 위해서 type속성의 값을 4가지로 분류하였다. 단일 라인 텍스트 필드, 텍스트 입력 없는 컨트롤, 시간이나 날짜 컨트롤, 버튼. 이와 같은 다형성 떄문에  {{HTMLElement("input")}} 요소는 많은 속성을 지원하지만  type 속성값에 따라 달라지기 떄문에 어느 속성이 적절한지, 어느 것이 필요한지  선택하는 것은 어려울 수 있다. 

+ +

This is all summarized in the following table (for a full list of all attributes, visit the page for the {{HTMLElement("input")}} element):

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
type 속성 의 값설명필수 속성관련된 속성
단일 선 텍스트 필드
text이것은 가장 기본적인 텍스트 필드이다.  type속성을 위한 텍스트 값은 이 속성의 기본 값이다.(자동 유효성 검사를 하지않음) {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}, {{htmlattrxref("spellcheck","input")}}
email하나 또는 여러개 이메일 주소를 작성하기 위해 사용되는 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
password텍스트 필드의 값을 가리기 위해 사용되는 텍스트 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
search검색 하기 위한 텍스트 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("autosave","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}, {{htmlattrxref("spellcheck","input")}}
tel전화 번호를 입력할 수 있는 텍스트 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
url절대 URL을 다루기 위한 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
텍스트 입력 없는 컨트롤
checkbox체크박스 {{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}
color색상을 입력 받기위한 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("required","input")}}
fileA control that lets the user select a file. {{htmlattrxref("accept","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("required","input")}}
hidden보여주지 않는 컨트롤 이지만 서버로 전송되는 필드  
number소숫점을 입력받는 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}
radio라디오 버튼. 그룹 중 한가지만 선택하기 위한 필드 {{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}
range정확하지 않는 숫자를 입력받기 위한 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}
시간 과 날짜 컨트롤
date(년, 원, 일)날짜를 입력 받을 수 잇는 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
datetimeUTC 타임 존 기반으로 전체 날짜와 시간(시간, 분, 초 )을 입력 받기 위한 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
datetime-local타임존 기반이 아닌 날짜와 시간을 입력받기 위한 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
month타임존 기반이 아닌 달과 년도를 입력 받기 위한 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
time타임존 기반이 아닌 시간을 입력 받기 위한 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
week타임존 기반이 아닌 전체 날짜를 일주일-년도 숫자로 주 번호를 입력하는 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
버튼
button기본 행동이 없는 누르는 버튼 {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
image그래픽적인 전송버튼{{htmlattrxref("src","input")}}, {{htmlattrxref("alt","input")}}{{htmlattrxref("width","input")}}, {{htmlattrxref("height","input")}}, {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
reset폼의 내용을 초기화 하는 컨트롤 {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
submit폼을 전송하는 버튼 {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
+ +

몇가지 이유 때문에 브라우저에서 특정 type 속성의 값 설정을 지원하지 않으면 {{HTMLElement("input")}} 요소는  text 속성으로 렌더링 한다. 이것은 매력적이지 않아도 어쩔 수없이 폼이 작동하도록 한다.

+ +

요소는 강력한 도구지만, 모든 것을 할수 없고 다른 것들을 다루기 위해 다른 요소들이 있다.

+ +

<textarea> 요소

+ +

이 요소는 다중 텍스트 필드로 설정된다. 이 요소는 사용자가 입력한 텍스트에 줄 바꿈을 할수 있다는 것을 제외하고 단일 라인 텍스트 필드와 정확하게 똑같이 작동한다. 또한 여러줄에 걸처 랜더링을 제어 하기위해 몇가지 추가 속성 설정을 허락한다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
 {{HTMLElement("textarea")}} 요소 속성
Attribute name기본값설명
{{htmlattrxref("cols","textarea")}}20보여지는 문자 너비의 평균을 기준으로 텍스트 컨트롤의 너비
{{htmlattrxref("rows","textarea")}} 보여지는 텍스트 행의 수
{{htmlattrxref("wrap","textarea")}}softhard, soft 이 둘중 하나의 값으로 어떻게 텍스트를 둘러쌀것인지 나타낸다.
+ +

 {{HTMLElement("textarea")}} 요소는 {{HTMLElement("input")}} 요소와 다르게 작동한다. {{HTMLElement("input")}} 요소는 자동으로 닫히는 요소이다. 이는 자식 요소를 가질 수 없다는 것을 의미한다. 이와 반대로 요소는 text 콘텐츠를 자식으로 가질 수 있는 일반적인 요소이다.

+ +

이는 두가지 영향이 있다.

+ + + +

 예제를 따라가면 다음 두 요소는 똑같이 랜더링 되어 질것이다.

+ +
<form>
+  <p>
+    <label for="text_1">With regular HTML</label><br>
+    <textarea id="text_1" name="regular"><p>I'm a paragraphe</p></textarea>
+  </p>
+  <p>
+    <label for="text_2">With escaped HTML</label><br>
+    <textarea id="text_2" name="escaped">&lt;p&gt;I'm a paragraphe&lt;/p&gt;</textarea>
+  </p>
+  <p>
+    <button>Send me</button>
+  </p>
+</form>
+ +

<select>, <option>그리고 <optgroup> 요소

+ +

요소는 선택 박스를 만들 수 있게 해준다(떄로는 콤보 박스라고 한다). 선택 박스는 사용자가 하나 이상 미리 정의 된 값을 선택하는 위젯이다. 단일 값 선택  박스와 다중 값 선택 박스는 다르다. 이에 대한 자세한 내용은 다음 문서를 확인해라 The native form widgets.

+ +

선택 박스 안의 값들은  {{HTMLElement("option")}} 요소에서 정의되고 {{HTMLElement("optgroup")}} 요소 안에서 그룹화 될 수 있다.

+ +

Let's take an example:

+ +
<form>
+  <p>
+    <label for="myFruit">Pick a fruit</label>
+    <select id="myFruit" name="fruit">
+      <!-- There is a trick here you think you'll pick
+         a banana but you'll eat an orange >:-) -->
+      <option value="orange">Banana</option>
+      <option>Cherry</option>
+      <optgroup label="berries">
+        <option>Blueberry</option>
+        <option>Raspberry</option>
+        <option>Strawberry</option>
+      </optgroup>
+    </select>
+  </p>
+</form>
+ +

{HTMLElement("option")}} 요소는 폼이 전송되면 전송될 value속성을 설정한다. 만약 value 속성을 바뜨리면 {{HTMLElement("option")}} 요소는 value 값을 선택 박스 값으로 사용된다.

+ +

{{HTMLElement("optgroup")}} 요소의 라벨 속성은 값이 나오기전에 보여주고 옵션 같은 요소들은 선택할 수 없게 나온다..

+ + + + + + + + + + + + + + + + + + + + + + +
{{HTMLElement("option")}} 요소 의 속성
속성 이름기본값설명
{{htmlattrxref("label","option")}} 이 속성은 옵션을 설명하는 라벨의 텍스트이다. 만약 라벨 속성이 정의되지 않으면 이 값은 요소의 텍스트 콘텐츠로 설정된다.
{{htmlattrxref("selected","option")}}(false)만약 이 속성이 불리언 값으로 설정되는 경우 처음에 선택된 상태로 시작하게된다.
+ + + + + + + + + + + + + + + + + +
Attributes for the {{HTMLElement("optgroup")}} element
Attribute nameDefault valueDescription
{{htmlattrxref("label","optgroup")}} The name of the group of options. This attribute is mandatory.
+ +

<datalist>요소 

+ +

이 요소는 기존에 있는 위젯들에 사전 설정 값을 제공 함으로써 위젯들을 확장시킨다. 가장 잘 알려진 사용 방법은 텍스트 필드의 자동 완성 목록이다. 값들은 {{HTMLElement("datalist")}} 요소 안에 있는 {{HTMLElement("option")}}요소의 값으로 사용할 수 있다.

+ +

{{HTMLElement("datalist")}}요소와 바인드 하기위해서는 사용하는 요소의 list속성을 이용하여 설정해야한다. 이 속성은 {{HTMLElement("datalist")}} 요소의 id로 설정된다.

+ +

요소는 최근에 HTML 폼으로 추가 되었다. 그러므로 아직 이를 지원하지 않는 브라우저들도 있다. 이 문제를 처리하기 위하여 아래에 약간 까다로운 예제가 있다.

+ +
<form>
+  <p>
+    <label for="myFruit">What is your favorite fruit?</label>
+    <input type="text" id="myFruit" name="fruit" list="fruitList" />
+
+    <datalist id="fruitList">
+      <label for="suggestion">or pick a fruit</label>
+      <select id="suggestion" name="altFruit">
+        <option value="banana">Banana</option>
+        <option value="cherry">Cherry</option>
+        <option value="strawberry">Strawberry</option>
+      </select>
+    </datalist>
+  </p>
+</form>
+ +

한편 {{HTMLElement("datalist")}} 요소를 지원하는 브라우저는 {{HTMLElement("option")}} 요소를 무시하고 이를 사용하는 요소를 확장 할 것이다. 이와 반대로 {{HTMLElement("datalist")}} 요소를 지원하지 않는 브라우저는 라벨과 선택 박스를 표시 할 것이다. 물론 {{HTMLElement("datalist")}} 요소를 지원하지 않는 브라우저에 대해 자바스크립트로 하는 다른 방법이 있지만 항상 자바스크립트만 사용하는 것은 좋은 것이 아니다.

+ + + + + + + + + + + + +
Safari 6Screenshot of the datalist element fallback with Safari on Mac OS
Firefox 18Screenshot of the datalist element with Firefox on Mac OS
+ +

<meter> 와 <progress> 요소들 

+ +

이 두요소는 그래픽적으로 숫자 값을 표현 하는방법이다. 이 두 요소의 차이점은 두 요소의 의미가 다르다는 것이다.

+ + + +

속성으로 인해 이 요소들은 다음 속성을 지정 가능하다.

+ +


+ {{HTMLElement("meter")}} 요소는 다음과 같은 속성을 가진다

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attribute nameDefault valueDescription
{{htmlattrxref("min","meter")}}0The lower numeric bound of the measured range.
{{htmlattrxref("max","meter")}}1The upper numeric bound of the measured range.
{{htmlattrxref("low","meter")}}the min valueThe upper numeric bound of the low end of the measured range.
{{htmlattrxref("high","meter")}}the max valueThe lower numeric bound of the high end of the measured range.
{{htmlattrxref("optimum","meter")}} The optimal numeric value.
+ + + + + + + + + + + + + + + + + +
Attributes for the {{HTMLElement("progress")}} element
Attribute nameDefault valueDescription
{{htmlattrxref("max","progress")}} This attribute describes how much work the task indicated by the {{HTMLElement("progress")}} element requires before it's complete.
+ +

The <button> element 

+ +

{{HTMLElement("button")}} 요소는 폼 버튼을 만드는 가장 쉬운 방법이다. 버튼은 type속성에 따라 3가지 타입을 가진다.

+ + + +


+ {HTMLElement("button")}} 요소의 속성

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
속성 이름기본값설명
{{htmlattrxref("type","button")}}submit버튼의 타입.  button, reset, submit 이 있다.
{{htmlattrxref("formaction","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 action 속성에 오버라이드 된다.
{{htmlattrxref("formenctype","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 enctype 속성에 오버라이드 된다.
{{htmlattrxref("formmethod","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 method 속성에 오버라이드 된다.
{{htmlattrxref("formnovalidate","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 novalidate 속성에 오버라이드 된다.
{{htmlattrxref("formtarget","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 target 속성에 오버라이드 된다.
+ +

기술적으로 말하면 {{HTMLElement("button")}} 요소와 {{HTMLElement("input")}} 요소의 속성에 정의된 버튼 요소는 거의 차이가 없다. 단 한가지 차이점은 버튼 자체의 라벨 이다.요소 안에서는 라벨은 오직 문자 데이터로만 나타 낼 수 있지만 {{HTMLElement("button")}} 요소에서는 어떠한 HTML이 될 수있다. 그래서 이에 따른 스타일을 디자인 할 수있다.

+ +
Note: For historical reasons, the {{HTMLElement("button")}} element wasn't used very often and in many forms developers preferred to use buttons made with the {{HTMLElement("input")}} element. This is due to a bug in legacy versions of Internet Explorer (IE). In IE6 and IE7, if you add a name and a value attribute to a {{HTMLElement("button")}} element, they do not send the content of the value attribute but the raw content of the button instead. This has been fixed since IE8, so there is no longer any reason to avoid using the {{HTMLElement("button")}} element.
+ +
 
+ +

공통 속성

+ +

Many of the elements used to define form widgets have some their own attributes. However, there is a set of attributes common to all form elements that give you some control over those widgets. Here is a list of those common attributes:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attribute nameDefault valueDescription
autofocus(false)This Boolean attribute lets you specify that the element should automatically have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified.
disabled(false)This Boolean attribute indicates that the user cannot interact with the element. If this attribute is not specified, the element inherits its setting from the containing element, for example {{HTMLElement("fieldset")}}; if there is no containing element with the disabled attribute set, then the element is enabled.
form The form element that the widget is associated with. The value of the attribute must be the id attribute of a {{HTMLElement("form")}} element in the same document. In theory, it lets you set a form widget outside of a {{HTMLElement("form")}} element. In practice, however, there is no browser which supports that feature.
name The name of the element; this is submitted with the form data.
value The element's initial value.
+ +

Using ARIA to structure HTML forms

+ +

ARIA is a W3C Candidate Recommendation which adds to HTML improved accessibility for rich Internet applications, including for forms. We will discuss its use in more detail in the "How to build custom form widgets" article, but there are some basics that are good to know.

+ +

Before going further, it's worth noting that support for ARIA and assistive technologies among browsers is far from perfect, but it's improving. Just to understand the issue, when a browser encounters an ARIA attribute, it has to send information to the operating system's accessibility layer. Not all browsers are good at doing this cross platform. The assistive technologies, on their own, have to connect themselves to the OS accessibility layer to handle the information that comes from the browsers. Surprisingly, not all assistive technologies do it well. So using ARIA does not mean that your web application will be accessible, but it means that you do your best to achieve this. Unfortunately, for the time being, ARIA remains a best effort technology, but it's always better than nothing.

+ +

If you want to dig into using ARIA with HTML forms, feel free to read the related section in the ARIA documentation.

+ +

The aria-labelledby attribute

+ +

This attribute is a convenient way to define a label without using the {{HTMLElement("label")}} element. The attribute is set on the widget element and references the id attribute of the element to use as a label.

+ +
<form>
+  <p id="fruitLabel">What's your favorite fruit</p>
+  <p>
+    <input type="text" name="fruit" aria-labelledby="fruitLabel">
+  </p>
+</form>
+ +

Conceptually, it's the opposite of the for attribute on the {{HTMLElement("label")}} element. With the for attribute, you reference the id of the widget but with the aria-labbeldby attribute, you reference the id of the label.

+ +

The aria-describedby attribute

+ +

This attribute works like the aria-labelledby attribute. The difference is mainly semantic. A label defines the essence of an object, while a description provides more information that the user might need. This attribute is not advised for form elements, you should rely on the aria-labelledby attribute, except if you want to provide extensive information on the current form element. It is to be used as a provider for a longer description.

+ +

The aria-label attribute

+ +

This attribute is used when there is no explicit label in the DOM for a given widget. It lets you provide a widget that will be passed to assitive technologies without actually creating a DOM node for it.

+ +
<form>
+  <p>
+    <input type="search" name="q" aria-label="Search" />
+    <input type="submit" value="Go" />
+  </p>
+</form>
+ +

The role attribute

+ +

This is the most important ARIA attribute. It lets you give specific semantic information, understandable by assitive technologies, for a given HTML element. There are many roles available and some of them are dedicated to form widgets.

+ +

ARIA tries to provide semantics for widgets that are not currently available in HTML as well as for elements that already exist. We will see in detail how to use those roles in the article: How to build custom form widgets.

+ +

Those roles for form widgets are :

+ + + +

It's also worth noting that there's something called a composite role:

+ + + +

If those roles are extremely useful, know that there are more; ARIA is a very large specification. Digging into it can help you improve accessibility in areas far afield from HTML forms.

+ +

결론

+ +

You now have all the knowledge to properly structure your HTML forms; the next article will dig into implementation details and functional expectations: The native form widgets.

+ +

볼거리

+ + diff --git a/files/ko/learn/forms/index.html b/files/ko/learn/forms/index.html new file mode 100644 index 0000000000..f7244cbdc1 --- /dev/null +++ b/files/ko/learn/forms/index.html @@ -0,0 +1,358 @@ +--- +title: HTML 폼 가이드 +slug: Learn/HTML/Forms +translation_of: Learn/Forms +--- +

이 가이드는 HTML 폼을 숙달 시키는데 도움이 되는 문서입니다. HTML 폼은 사용자와 상호작용할 수 있는 매우 강력한 도구입니다. 그러나 역사적으로 나 기술적인 이유로 사용자에게 항상 명확하게 기능을 제공할 수 있는 것은 아닙니다. 이 가이드에서 HTML 폼 관점에서 스타일 구조, 사용자 위젯으로 데이터 다루기 등 모든 것을 다룰 것입니다. 이러한 강력한 기술들을 즐기길 바랍니다!

+ +

항목

+ +
    +
  1. 나의 첫 HTML 폼
    2. +
  2. HTML HTML 폼 구성 방법
    3. +
  3. 기본 폼 위젯
    4. +
  4. CSS와 HTML 폼 +
      +
    1. HTML 폼 스타일
      2. +
    2. HTML 폼을 위한 고급 스타일
      3. +
    3. 폼 위젯을 위한 호환성 테이블 속성
      4. +
    +
    5. +
  5. 데이터 주고 받기
    6. +
  6. 데이터 유효성 검사
    7. +
  7. 사용자 폼 위젯 만드는 방법
    8. +
  8. 자바스크립트를 통해서 폼 전달 하기 +
      +
    1. FormData 객체 사용
      2. +
    +
    9. +
  9. 기존 브라우저에서 HTML 폼
    10. +
+ +

HTML 문서

+ +

HTML 요소

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
요소관련 DOM 인터페이스설명
{{HTMLElement("button")}}{{domxref("HTMLButtonElement")}}button 요소는 클릭할 수 있는 버튼을 나타낸다.
{{HTMLElement("datalist")}}{{domxref("HTMLDataListElement")}}datalist 요소는 다른 폼 요소의 값에 대한 가능한 옵션들을 나타내는 {{ HTMLElement("option") }} 요소의 집합을 포함합니다. 
{{HTMLElement("fieldset")}}{{domxref("HTMLFieldSetElement")}}fieldset 요소는 폼 안에 여러 폼 요소들을 그룹화 하는데 사용됩니다.
{{HTMLElement("form")}}{{domxref("HTMLFormElement")}}form  요소는 사용자가 정보를 웹서버로 전송하도록 상호작용하는 요소를 포함하는 문서의 부분으로 나타냅니다.
{{HTMLElement("input")}}{{domxref("HTMLInputElement")}}input 요소는 대화형 컨트롤 폼들을 생성하는데 사용됩니다.
{{HTMLElement("keygen")}}{{domxref("HTMLKeygenElement")}}keygen 요소는 HTML 폼 요소의 일부로서 쉽게 키 데이터를 발생시키고 공개키를 전송을 위해서 존재 합니다.
{{HTMLElement("label")}}{{domxref("HTMLLabelElement")}}label 요소는 사용자 인터페이스 항목에 대한 캡션을 나타냅니다.
{{HTMLElement("legend")}}{{domxref("HTMLLegendElement")}}legend 요소는 상위 요소인 {{ HTMLElement("fieldset") }} 컨텐츠를 위한 캡션을 나타냅니다.
{{HTMLElement("meter")}}{{domxref("HTMLMeterElement")}}meter 요소는 알려진 범위 안에 정해 저 있는 스칼라 값이나 소수 값 주 하나를 나타냅니다.
{{HTMLElement("optgroup")}}{{domxref("HTMLOptGroupElement")}}optgroup 요소는 {{ HTMLElement("select") }} 요소 안에 있는 옵션 그룹을 생성합니다.
{{HTMLElement("option")}}{{domxref("HTMLOptionElement")}}HTML option 요소는 {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }} 또는 {{ HTMLElement("datalist") }}요소 안에 항목을 나타내는 컨트롤을 생성하는데 사용됩니다.
{{HTMLElement("output")}}{{domxref("HTMLOutputElement")}}output 요소는 계산 결과를 나타냅니다.
{{HTMLElement("progress")}}{{domxref("HTMLProgressElement")}}progress 요소는 작업 완료 진행 상태를 나타내는데 사용됩니다.
{{HTMLElement("select")}}{{domxref("HTMLSelectElement")}}select 요소는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다.
{{HTMLElement("textarea")}}{{domxref("HTMLTextAreaElement")}}textarea 요소는 다중 라인 일반 텍스트 편집 컨트롤을 나타냅니다.
+ +
+

Note: 모든 폼 요소들이나 모든 HTML요소들은 {{domxref("HTMLElement")}} 돔 인터페이스를 지원합니다.

+
+ +

HTML 속성

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
속성 이름요소설명
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}서버가 받는 형식 목록, 일반적으로 file 형식을 사용합니다.
accept-charset{{ HTMLElement("form") }}지원하는 문자 집합 목록
action{{ HTMLElement("form") }}폼을 통해서 전송 정보를 처리하는 프로그램의 URL 
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}폼 안에서 브라우저로 부터 자동으로 완성되는 기본 값을 가진 컨트롤 인지 아닌지 나타냅니다.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}페이지가 로드된 후 요소가 자동으로 포커스 해야 되는지 설정합니다.
challenge{{ HTMLElement("keygen") }}공개 키(public key)와 함께 전송되는 문자열입니다.
checked{{ HTMLElement("input") }} +

해당 요소가 페이지가 로드될 때 체크된 상태로 나타나도록 설정합니다. 

+
cols{{ HTMLElement("textarea") }} +

textarea의 세로줄 수를 설정합니다.

+
data{{ HTMLElement("object") }}자원의 URL을 명시합니다.
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}
disabled{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}사용자가 요소와 상호 작용할 수 있는 지 나타냅니다.
enctype{{ HTMLElement("form") }}POST방식으로 전송되는 데이터의 타입을 설정합니다.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Describes elements which belongs to this one.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} +

요소의 소유자인 폼을 나타냅니다.

+
high{{ HTMLElement("meter") }}Indicates the lower bound of the upper range.
keytype{{ HTMLElement("keygen") }}Specifies the type of key generated.
list{{ HTMLElement("input") }}Identifies a list of pre-defined options to suggest to the user.
low{{ HTMLElement("meter") }}Indicates the upper bound of the lower range.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}허용되는 최댓값을 나타냅니다.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}요소에서 허용되는 특징의 최대 수를 명시합니다.
method{{ HTMLElement("form") }}Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}허용되는 최솟값을 나타냅니다.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indicates whether multiple values can be entered in an input of the type email or file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} +

요소의 이름. For example used by the server to identify the fields in form submits.

+
novalidate{{ HTMLElement("form") }}This attribute indicates that the form shouldn't be validated when submitted.
optimum{{ HTMLElement("meter") }}Indicates the optimal numeric value.
pattern{{ HTMLElement("input") }}Defines a regular expression which the element's value will be validated against.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Provides a hint to the user of what can be entered in the field.
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indicates whether the element can be edited.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether this element is required to fill out or not.
rows{{ HTMLElement("textarea") }}Defines the number of rows in a textarea.
selected{{ HTMLElement("option") }}Defines a value which will be selected on page load.
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
src{{ HTMLElement("input") }}The URL of the embeddable content.
step{{ HTMLElement("input") }}
target{{ HTMLElement("form") }}
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}Defines the type of the element.
usemap{{ HTMLElement("input") }}
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Defines a default value which will be displayed in the element on page load.
wrap{{ HTMLElement("textarea") }}Indicates whether the text should be wrapped.
+ +

Normative reference

+ + diff --git a/files/ko/learn/forms/sending_and_retrieving_form_data/index.html b/files/ko/learn/forms/sending_and_retrieving_form_data/index.html new file mode 100644 index 0000000000..f1d7c35437 --- /dev/null +++ b/files/ko/learn/forms/sending_and_retrieving_form_data/index.html @@ -0,0 +1,249 @@ +--- +title: Sending and retrieving form data +slug: Learn/HTML/Forms/Sending_and_retrieving_form_data +translation_of: Learn/Forms/Sending_and_retrieving_form_data +--- +

많은 경우 HTML 폼은 서버에 데이터를 전송할 목적으로 사용된다. 서버는 데이터를 처리하고 사용자에게 응답을 보낼 것이다. 간단한 것 처럼 보이지만 데이터가 서버나 사용자에게 피해를 입히지 않기 위해서는 몇가지를 명심해야한다.

+ +

데이터는 어디로 갈까?

+ +

클라이언트/서버 구조

+ +

웹은 간단히 말하면 클라이언트(파이어폭스, 크롬, 사파리, IE 등)는 서버(아파치, Nginx, IIS, 톰켓 등)로 HTTP프로토콜을 사용해 요청을 하는 클라이언트/서버 구조를 기본으로 작동된다. 서버 응답은 요청과 똑같은 프로토콜을 사용한다.

+ +

A basic schema of the Web client/server architecture

+ +

클라이언트 측에서 HTML폼 만큼 사용친화적으로 HTTP 요청을 서버에 보내는 편리한 것이 없다.이것은 사용자가 정보를 HTTP요청으로 전달을 할 수있게 만든다.

+ +

클라이언트측: 데이터 보내기

+ +

{{HTMLElement("form")}} 요소는 데이터 전송 방법을 정의한다. 제공하는 모든 속성은 사용자가 submit 버튼을 누를때 보내질 요청을 구성할 수 있도록  설계되었다. 두가지 중요한 속성은 {{htmlattrxref("action","form")}} 와 {{htmlattrxref("method","form")}}이다.

+ +

{{htmlattrxref("action","form")}} 속성

+ +

이 속성은 데이터를 어디로 보낼 것인지 지정한다. 이 값은 반드시 유효한 URL이어야 한다.만약 이 속성을 지정하지 않으면 데이터는 폼이 있는 페이지의 URL로 보내질 것이다.

+ +
Examples
+ +

첫번째 예제로 데이터는 http://foo.com로 보낼 것이다.

+ +
<form action="http://foo.com">
+ +

여기에서 데이터는 폼 페이지를 호스팅을 하는 같은 서버로 전송 되지만, 서버의  다른 URL로 전송된다.

+ +
<form action="/somewhere_else">
+ +

아래와 같이 속성을 지정하지 않으면 {{HTMLElement("form")}} 속성은 데이터를 폼을 포함한 페이지 주소로 보낼 것이다.

+ +
<form>
+ +

이전에 많은 페이지들은 데이터를 반드시 폼을 포함하는 페이지와 같은 페이지에 보내는 것을 나타내는 표기법을 다음과 같이 사용했다. 그러나 HTML5 이후로 속성은 필수로 지정하지 않아도 되기 떄문에 이제 더이상 필요하지 않는다.

+ +
<form action="#">
+ +
+

Note: HTTPS(보안 HTTP) 프로토콜을 사용하는 URL을 지정하는 것도 가능하다. 이 것을 사용하면 폼 자체가 안전하지 않은 페이지에 HTTP를 이용해서 접근하는  곳에 호스트된 경우에 데이터는 나머지 요청들과 함께 암호화된다. 반면, 만약 폼이 보안 페이지에서 호스트 된 경우라도  {{htmlattrxref("action","form")}} 속성에서 안전하지 않은 HTTP URL을  지정하면 모든 브라우저는 데이터가 암호화되지 않았기 때문에 데이터를 보낼때마다 보안 경고를 출력할 것이다 

+
+ +

{{htmlattrxref("method","form")}} 속성

+ +

이 속성은 데이터를 어떻게 보낼 것인지 정의한다. HTTP protocol 은 요청 방법에 대해 다양한 방법들을 제공한다.  HTML 폼 데이터는 오직 2가지 방법으로 만 전송 할 수 있는데 바로 GET 방식과 POST방식이 있다.

+ +

이 두 가지 방식의 차이점을 이해하기 위해서는 뒤로 가서 HTTP가 어떻게 작동하는지 살펴봐야한다. 웹에서 리소스에 접근 할 때마다, 브라우저는 URL에 요청을 보낸다. HTTP요청은 두 가지 부분으로 나누어진다. 브라우저 수용력에 대한 전역 메타 테이터들을 포함하는 헤더와 서버에서 지정된 요청을 처리하는데 필요한 정보를 포함하는 바디가 있다.

+ +
GET 방식
+ +

GET 방식은 브라우저에서 서버에 주어진 리소스를 전달해달라고 말하기 위해 사용되는 방식이다. " 이봐 서버 난 이 리소스를 원해" 이 경우 브라우저는 바디가 비어 있는 요청을 하게 된다. 바디가 비어 있기 때문에,  만약 폼이 이 방식를 통하여 전송 하는 경우 데이터는 URL에 포함되어 서버로 보내진다.

+ +
예제
+ +

다음 폼을 생각 해 봅시다.

+ +
<form action="http://foo.com" method="get">
+  <input name="say" value="Hi">
+  <input name="to" value="Mom">
+  <button>Send my greetings</button>
+</form>
+ +

GET 방식을 사용하면 HTTP 요청은 다음과 같다.

+ +
GET /?say=Hi&to=Mom HTTP/1.1
+Host: foo.com
+ +
POST 방식
+ +

POST 방식은 조금 다르다. 이는 브라우저의 HTTP요청 바디안에 제공되는 데이터를 고려한 응답을 요구하기 위해 서버로 보내는 방식이다. "이봐 서버 이 데이터를 보고 이거에 맞는 데이터를 보내봐" 만약 폼이 이 방식으로 사용하여 요청을 한다면 데이터는 HTTP요청 바디에 추가되어 전송된다.

+ +

예제

+ +

이 폼을 생각해보라(위 예제와 똑같다)

+ +
<form action="http://foo.com" method="post">
+  <input name="say" value="Hi">
+  <input name="to" value="Mom">
+  <button>Send my greetings</button>
+</form>
+ +

POST 방식을 사용하면 다음과 같이 HTTP 요청을 할 것이다,

+ +
POST / HTTP/1.1
+Host: foo.com
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 13
+
+say=Hi&to=Mom
+ +

Content-Length 헤더는 바디의 크기를 나태내고,  Content-Type 헤더는 서버에 보낼 리소스의 종류 나태낸다. 우리는 비트(bit/조금씩?)에서 이러한 헤더를 설명 할 것이다.

+ +

물론 http 요청은 절대 사용자에게 표시되지 않는다(파이어폭스 웹 콘솔이나 크롬 개발자 툴을 이용하지 않는이상). 사용자에게 보여지는 것은 호출한 URL뿐이다. 그래서 GET 요청은 사용자에게 URL바에서 데이터를 볼 수있지만,  POST 요청은 그러지 못한다. 이것은 두가지 이유에서 매우 중요하다.

+ +
    +
  1. 만약 패스워드를 전송해야 되는 경우(또는 민간한 데이터의 부분), 절대 URL 바에 데이터를 출력하는 GET 방식을 사용해서는 안된다.
    2. +
  2. 만약 거대한 데이터를 보내는경우 POST 방식이 선호 된다. 왜냐하면 몇몇 브라우저는 URL들의 크기를 제한하기 떄문이다. 또한 많은 서버들이 URL들의 길이를 제한한다.
    3. +
+ +

서버측: 데이터 가져오기

+ +

어떠한 HTTP 방식을 선택 하든지 서버는 키/ 벨류 쌍의 목록과 같은 데이터를 얻기 위해 파싱된 문자열을 받을 것이다. 이러한 목록에 접근하는 방법은 사용하는 개발 플랫폼에 의존되고 어떠한 지정된 프레임워크에서 이것을 사용 할 수 있을것이다. 또한 사용 하는 기술은 동일한 키를 어떻게 처리할 것인지 결정한다. 보통 가장 마지막에 수신된 값이 우선순위를 가진다.

+ +

예제: PHP 날것

+ +

PHP 데이타에 접근 하기 위하여 몇가지 글로벌 객체를 제공한다. POST 방식 사용했다고 생각해보면, 다음과 같은 예제는 단순히 데이터만 받아 사용자에게 출력만 한다. 물론 데이터로 무엇을 할 것인지는 너어게 달려있다. 아마도 데이터를 사용자에게 출력하거나, 데이터베이스에 저장, 이메일에 전송 또는 다른 방법으로 처리할 것이다.

+ +
<?php
+  // The global $_POST variable allow to access the data send with the POST method
+  // To access the data send with the GET method, you can use $_GET
+  $say = htmlspecialchars($_POST['say']);
+  $to  = htmlspecialchars($_POST['to']);
+
+  echo  $say, ' ', $to;
+ +

이 예제는 우리가 보낸 데이터를 페이지에 출력 할 것이다. 이 예제는 다음과 같이 출력할 것이다.

+ +
Hi Mom
+ +

예제: Python

+ +

이 예제는 파이썬을 사용하여 제공된 데이터를 웹페이지에 출력하는 예제입니다. CGI 파이썬 패키지를 이용하여 폼데이터에 접근한다.

+ +
#!/usr/bin/env python
+import html
+import cgi
+import cgitb; cgitb.enable()     # for troubleshooting
+
+print("Content-Type: text/html") # HTTP header to say HTML is following
+print()                          # blank line, end of headers
+
+form = cgi.FieldStorage()
+say  = html.escape(form["say"].value);
+to   = html.escape(form["to"].value);
+
+print(say, " ", to)
+ +

이 결과는 PHP와 똑같다?.

+ +
Hi Mom
+ +

다른 언어와 프레임 워크

+ +

 Perl, Java, .Net, Ruby등 이와 같은 다른 서버측 기술이 있다. 이중에 최고라고 생각되는 것을 사용하면된다. 즉, 까다로운 일이 될 수 있기 때문에, 직접 기술을 사용하는 것은 매우 드문 일이 있음을 언급하는 것은 가치가있다.(?) 다음과 같은 폼을 더 쉽게 다루기위해 다음과 같은 좋은 프레임 워크들이 사용된다.

+ + + +

이러한 프레임 워크를 사용하는 경우에도 폼을 다루는 것은 어쩔수 없이 쉽지 않다는 것을 주목을 할 필요가 있다. 그러나 이것을 사용하면 많은 시간을 절약 할 수 있다.

+ +

특별한 경우: 파일 보내기

+ +

파일은 HTML 폼에서 특별한 경우이다. 파일은 2진 데이터 또는 다른 데이터는 텍스트 데이터로 간주된다.HTTP는 텍스트 프로토콜 이기 때문에 2진 데이터를 다루기 위해서는 특별한 요구 사항이있다.

+ +

{{htmlattrxref("enctype","form")}} 속성

+ +

이 속성은 Content-Type  HTTP 헤더의 값을 지정할 수 있게 해준다. 서버에 데이터가 무슨 종류인지 전달하기 떄문에 이 해더는 매우 중요하다. 기본 값으로는 application/x-www-form-urlencoded. 이다. 사람 말로는 "이 폼 데이터는 URL 폼 형태로 인코딩되어 있습니다" 이다

+ +

만약 파일을 보내고 싶다면 두 가지를 해야한다.

+ + + +

예제 

+ +
<form method="post" enctype="multipart/form-data">
+  <input type="file" name="myFile">
+  <button>Send the file</button>
+</form>
+ +
+

Note: 몇 브라우저는 {{htmlattrxref("multiple","input")}}속성을 {{HTMLElement("input")}}요소에 지원하여 한번에 여러 요소를 전달 할 수 있다. 이러한 파일을 서버측에서 다루는 방법은 서버에서 어떠한 기술을 사용하냐에 따라서 매우 달라진다. 앞에서 언급 한바와 같이 프레임워크를 사용하면 더 쉽게 이용할 수있다.

+
+ +
+

Warning: 많은 서버들이 남용을 예방하기 위해 HTTP요청과 파일의 크기를 제한하도록 구성된다. 파일을 전송하기 전에 서버 관리자에게 제한 크기를 확인하는것이 중요하다.

+
+ +

보안 코너

+ +

데이터를 서버로 보낼 떄마다 보안성에 대하여 생각해 봐야한다. HTML폼은 서버를 공격하는데 첫번째 매개변수가 될 수있다. 문제는 HTML폼에서 오지 않는다. 서버에서 어떻게 처리하냐에 따라 문제가 발생한다.

+ +

일반적인 보안 결함

+ +

무엇을 하는지에 따라 잘 알려진 보안 문제가 있다.

+ +

XSS 과 CSRF

+ +

크로스 사이트 스크립팅(XSS)과 크로스 사이트 요청 위조(CSRF)은 데이터를 출력하기 위해 사용자나 다른 사용자에게 데이터를 보낼떄 공격하는 일반적인 유형이다.

+ +

XSS 공격자는 다른 사용자가 볼 웹 페이지에 클라이언트 측 스크립트를 주입할 수있다.크로스 사이트 스크립팅 취약점은 공격자가 동일 출처 정책(same origin policy)의 접근 제어를 우회하여 사용 될 수 있다. 이러한 공격은 조금 불편함에서 심각한 보안 위험에 이르기 까지 다양하게 영향을 미친다.

+ +

CSRF는 XSS와 비슷하게 공격자가 같은 방법으로 시작한다. —클라이언트 스크립트를 웹페이지에 주입한다. - 그러나 이것의 대상은 다르다. CSRF 공격자는 높은 권한 계정(서버 관리자 같은)으로 권한을 상승하려고 시도하고 하지 말아야할 행동들을 할것이다.(예를들어 신뢰 할 수없는 사용자에게 데이터 전송하는 것)

+ +

XSS 공격자는 사용자가 웹사이트에 대하여 가진 신뢰를 이용하여 공격자는 웹사이트가 사용자를 신뢰한다는 것을 이용한다.

+ +

이러한 공격을 방지하려면 사용자가 서버에 보내는 데이터를 항상 확인해야하며 해당 내용을 표시해야 하는 경우 사용자가 제공한 HTML 콘텐츠를 표시하지 말아야 한다. 대신, 당신이 보여주려는 데이터가 사용자가 제공한 것과 동일한 데이터가 아니도록 데이터를 처리해야 한다. 현재 시장에 나와있는 거의 모든 프레임 워크는 어떤 유저가 보내는 데이터라도 HTML{{HTMLElement ( "script")}},{{HTMLElement ( "iframe")}} 및 {{HTMLElement ( "object")}} 요소를 데이터에서 제거하는 최소한의 필터를 구현한다. 이는 위험을 완화하는 데 도움은 되지만 반드시 근절한다고 보장할 수는 없다.

+ +

SQL injection

+ +

SQL injection is a type of attack that tries to perform actions on a database used by the target web site. This typically involves sending an SQL request and hopes that the server will execute it (many times when the application server tries to store the data). This is actually one of the main vector attacks against web sites.

+ +

The consequences can be terrible, ranging from data loss to access to a whole infrastructure by using privilege escalation. This is a very serious threat and you should never store data sent by a user without performing some sanitization (for example, by using mysql_real_escape_string() on a PHP/MySQL infrastructure).

+ +

HTTP header injection 와 email injection

+ +

These kinds of attacks can occur when your application builds HTTP headers or emails based on the data input by a user on a form. These won't directly damage your server or affect your users but are an open door to deeper problems such as session hijacking or phishing attacks.

+ +

These attacks are mostly silent, and can turn your server into a zombie.

+ +

Be paranoid: Never trust your users

+ +

So, how do you fight these threats? This is a topic far beyond this guide; however there are a few rules it's good to keep in mind. The most important rule is: never ever trust your users, including yourself; even a trusted user could have been hijacked.

+ +

All data that comes to your server must be checked and sanitized. Always. No exception.

+ + + +

If you follow these three rules of thumb, you should avoid many/most problems; however, it's always a good idea to get a security review performed by a competent third party. Don't assume that you've seen all the possible problems.

+ +

결론

+ +

여기서 볼 수 있듯이 폼데이터는 쉽게 보낼수 있지만 어플리케이션에서 데이터를 확보하는것은 까다로운 일이 될 수 있다. 프론트 앤드 개발자가 기억해야 할 것은 데이터 모델만 보안을 정한다고 끝이 아니라는 것이다. Yes, as we'll see, it's possible to perform client side data validation but the server can't trust this validation because it has no way to truly know what really happens on the client side.

+ +

볼거리

+ +

If you want to learn more about securing a web application, you can dig into these resources:

+ + diff --git a/files/ko/learn/forms/your_first_form/index.html b/files/ko/learn/forms/your_first_form/index.html new file mode 100644 index 0000000000..b997fc1f08 --- /dev/null +++ b/files/ko/learn/forms/your_first_form/index.html @@ -0,0 +1,272 @@ +--- +title: 나의 첫 HTML 폼 +slug: Learn/HTML/Forms/Your_first_HTML_form +translation_of: Learn/Forms/Your_first_form +--- +

이 문서는 HTML 폼 소개 문서입니다. 간단한 폼들을 살펴보면서 HTML 폼을 만들기에 대한 기본적인 필요 사항들을 볼 수 있을 것이다. 이 문서는 HTML폼에 대해서는 아무것도 몰라도 되지만 다음 문서에 나와 있는 기본적인 HTML이나 CSS를 알아야 한다. (the basics of HTML, CSS)

+ +

시작하기전에

+ +

HTML 폼 이란?

+ +

HTML폼은 사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용하는 것 중 중요한 기술 중에 하나이다. 폼은 사용자가 웹사이트에 데이터를 전송하는 것을 허용한다. 일반적으로 데이터는 웹 서버로 전송되지만 웹페이지가 데이터를 사용하기 위하여 사용할 수 도 있다.

+ +

HTML 폼은 하나 이상의 위젯으로 만들어 진다. 이러한 위젯들은 텍스트 필드(한줄 또는 여러줄), 셀렉 박스,  버튼, 체크박스, 라디오 버튼이 될 수 있다. 대부분 이러한 위젯들은 위젯을 설명하는 라벨과 함께 사용된다.

+ +

폼을 사용하려면 무엇이 필요합니까?

+ +

HTML을 다루기 위한 텍스트 에디터나 웹 브라우저외는 아무것도 필요 없습니다. 물론 비주얼 스튜디오, 이클립트, 앱타나 등 통합개발환경(IDE)을 사용하면 많은 이점이 있지만 이것은 만드는 사람 마음이다.

+ +

HTML 폼과 일반적인 HTML 요소의 주요 차이점은 폼에 의해 수집된 데이터는 대부분 웹서버에 전송된다는 점이다. 이런 경우 데이터를 받거나 처리하는 웹서버를 설정해야한다. 웹서버를 설정하는 방법은 이 문서의 범위를 벗어나지만 알고 싶다면 다음 문서를 참조 하시오 Sending and retrieving form data.

+ +

폼 디자인하기

+ +

코드를 보기전에 항상 잠시 뒤로 물러나 폼에 대하여 생각하는 것이 더 중요하다.   간단한 모형을 디자인 하는것은 개발자가 사용자에게 묻고 싶은 데이터를 올바르게 정의하는데 도움을 준다. 사용자 경험 (UX)의 관점에서 폼이 많을수록 사용자들이 더 줄어든다는 사실을 기억하는게 중요하다. 반드시 필요한것이 무엇인지 생각하면서 간단하게 유지하는 것이 중요하다. 폼 디자인은 사이트나 어플리케이션을 만드는 과정 중 중요한 단계이다. 폼들의 디자인은 이 문서의 범위를 벗어나지만 만약 더 자세하게 알고 싶은 경우 다음 문서를 참조 하세요.

+ + + +

이 문서에서는 간단한 문의를 하는 폼을 만들것이다. 거칠게 스케치 해보자.

+ +

The form to build, roughly sketch

+ +

우리가 만들 폼은 3개의 텍스트 필드와 하나의 버튼을 가지고 있다. 기본적으로 우리는 사용자에게 이름, 이메일, 문의사항을 물어 볼 것이고 버튼을 눌러서 웹서버로 데이터를 보내는게 목적이다.

+ +

HTML를 직접 다루어 보자

+ +

자 이제 HTML에가서 폼을 코딩 할 준비가 되었다. 우리의 문의하는 폼에서 다음과 같은 HTML 요소들을 사용할 것이다. {{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, and {{HTMLElement("button")}}.

+ +

{{HTMLElement("form")}} 요소

+ +

모든 HTML 폼은 {{HTMLElement("form")}} 요소로 다음과 같이 시작된다:

+ +
<form action="/my-handling-form-page" method="post">
+
+</form>
+ +

이 요소는 폼의 공식적인 형태이다. 이 요소는 다음 {{HTMLElement("div")}} 나 {{HTMLElement("p")}} 요소와 같이 사용되고,뿐만 아니라 폼이 동작하는 방식을 설정하는 일부 속성들을 지정 해야한다. 이러한 모든 속성은 선택적이지만 action 속성과 method 속성은 필수적으로 설정해야 한다.

+ + + +

만약 이러한 속성에 더 자세한 내용을 알고 싶다면 다음 문서를 참조하시오. Sending and retrieving form data.

+ +

{{HTMLElement("label")}}, {{HTMLElement("input")}}, 그리고 {{HTMLElement("textarea")}} 요소 추가하기

+ +

우리의 문의하는 폼은 정말 간단하고 라벨을 가지고 있는 세 개의 텍스트필드를 가지고 있다. 이름을 입력 받는 입력 필드는 한줄 텍스트 필드를 사용하고, 이메일을 입력 받는 입력 필드는 이메일만 입력받는 한줄 텍스트 필드를 사용하고, 문의 내용을 입력받는 입력 필드는 다중 라인 텍스트 필드가 사용 될것이다.

+ +

HTML코드를 다음과 같이 짤 것이다.

+ +
<form action="/my-handling-form-page" method="post">
+    <div>
+        <label for="name">Name:</label>
+        <input type="text" id="name" />
+    </div>
+    <div>
+        <label for="mail">E-mail:</label>
+        <input type="email" id="mail" />
+    </div>
+    <div>
+        <label for="msg">Message:</label>
+        <textarea id="msg"></textarea>
+    </div>
+</form>
+ +

{{HTMLElement("div")}} 요소는 코드를 편리하게 구성하고 스타일링 쉽게 만들어 줍니다. 중요한 점은 for속성은 모든{{HTMLElement("label")}} 요소에서 공식적으로 폼 위젯과 라벨을 연결하는데 사용된는 것이다. 이 속성은 위젯에 맞는 ID를 참조한다. 이 것은 몇 가지 장점이 있다. 가장 두드러 지는 것은 사용자가 라벨을 눌럿을때 그거에 맞는 위젯을 활성화 시키는 것이다.만약 이 속성에 대한 장점을 더 알고 싶다면 다음 문서에 자세히 나와있다. How to structure an HTML form.

+ +

{{HTMLElement("input")}} 요소의 가장 중요한 속성은 type 속성이다. 이 속성은 {{HTMLElement("input")}} 요소가 어떻게 입력을 받을 것인지 정의하기 떄문에 매우 중요하다. 이것은 아예 요소를 변경하기 떄문에 주의 해야한다. 만약 이것에 대하여 더 자세한 정보를 알고 싶다면 다음 문서를 참조 하라. native form widgets 우리의 예제에서는 이 속성의 기본 값인 오직 text값만 사용했다. 이 값은 제어나 유효성 검사 없이 모든 종류의 텍스트를 받아 들이는 한줄 텍스트 필드를 나타낸다. 또한 오직 이메일 주소만 받는 한줄 텍스트 필드 email값을 사용했다. 이 마지막 값은 기본 텍스트 필드를 사용자가 입력 한 데이터에 대한 몇 가지 검사를 수행하는 "지능형"필드의 종류로 전환한다. 만약 폼 데이터 유효성 확인에 대하여 자세히 알고싶다면 다음 문서를 참조 해라. Form data validation

+ +

마지막 요소를 보기전에 다음 <input /> VS <textarea></textarea>요소를 봐야한다. 이것은 이상한 HTML 요소중 하나이다. <input>태그는 자동 닫힘 태그다 무슨 의미냐면 요소가 끝날떄 반드시 "/"닫는 태그에 추가해야 하는 것을 의미한다. 이와 반대로, {{HTMLElement("textarea")}}은 자동 닫힘 태그가 아니다 그래서 반드시 엔딩태그를 사용하여 요소를 종료해야한다. 이 것은 기본 값을 정의하는 특정 기능에 영향을 미친다. 요소의 기본 값 정의는 반드시 value 속성을 다음과 같이 지정 해야 한다.

+ +
<input type="text" value="by default this element is filled with this text" />
+ +

이와 반대로 {{HTMLElement("textarea")}}요소 에서 기본값을 정의하고 싶다면,  {{HTMLElement("textarea")}}요소의 시작 태그와 끝 태그 사이에 문자들을 다음과 같이 입력 하면된다.

+ +
<textarea>by default this element is filled with this text</textarea>
+ +

 {{HTMLElement("button")}} 요소로 끝내기

+ +

우리의 폼이 거의 완성되간다. 이제 단지 사용자 데이터를 서버에 보낼수 있도록 버튼을 추가하면된다. 이것은 간단하게 {{HTMLElement("button")}} 요소를 사용한다.

+ +
<form action="/my-handling-form-page" method="post">
+    <div>
+        <label for="name">Name:</label>
+        <input type="text" id="name" />
+    </div>
+    <div>
+        <label for="mail">E-mail:</label>
+        <input type="email" id="mail" />
+    </div>
+    <div>
+        <label for="msg">Message:</label>
+        <textarea id="msg"></textarea>
+    </div>
+
+    <div class="button">
+        <button type="submit">Send your message</button>
+    </div>
+</form>
+ +

버튼은 다음과 같은 3개 종류가 있다. submit, reset, button.

+ + + +

알아두어야 할것은  {{HTMLElement("input")}} 요소를 사용하여 버튼 유형을 만들 수 있다.  {{HTMLElement("button")}}요소와 가장 큰 차이점은 {{HTMLElement("input")}}요소는 오직 일반 텍스트만 보내는 반면 {{HTMLElement("button")}}요소는 전체 HTML 콘텐츠를 보낸다.

+ +

CSS로 더욱 나이스하게 만들기

+ +

이제 우리는 HMLT폼을 가졋지만 가지고 있는 브라우저에서 보면 구리게 보인다.

+ +

+ +

CSS 스타일시트를 이용하여 조금만더 나이스하게 만들어 보자.

+ +

폼을 가운데로 정렬하고 테두리를 보이게 하는것 부터 시작하자.

+ +
form {
+    /* Just to center the form on the page */
+    margin: 0 auto;
+    width: 400px;
+    /* To see the outline of the form */
+    padding: 1em;
+    border: 1px solid #CCC;
+    border-radius: 1em;
+}
+ +

그 다음 각각 폼 위젯사이에 여백을 추가하자.

+ +
form div + div {
+    margin-top: 1em;
+}
+ +

이제 레이블에 초점을 맞추자. 우리의 폼을 더 읽기 쉽게 만들기 위해 모든 라벨들이 같은 사이즈와 같은 쪽을 정렬이 되게하자. 이 경우 오른쪽 정렬을 하지만 경우에 따라서 왼쪽 정렬도 좋을 수 있다.

+ +
label {
+    /* To make sure that all label have the same size and are properly align */
+    display: inline-block;
+    width: 90px;
+    text-align: right;
+}
+ +

HTML 폼을 다루는 가장 어려운 것중 하나는 HTML자체를 위젯으로 스타일 하는 것이다. 텍스트 필드는 쉽게 스타일 할수 있지만 다른 위젯들은 아니다. 만약 HTML 폼 위젯 스타일에 대하여 자세한 정보를 알고 싶으면 다음 문서를 참조하시오.  Styling HTML forms

+ +

폰트, 크기, 테두리를 변경 해보자

+ +
input, textarea {
+    /* To make sure that all text fields have the same font settings
+       By default, textareas have a monospace font */
+    font: 1em sans-serif;
+
+    /* To give the same size to all text field */
+    width: 300px;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+
+    /* To harmonize the look & feel of text field border */
+    border: 1px solid #999;
+}
+ +

HTML 폼은 요소의 상태를 나타내는 많은 가상클래스 를 지원한다.예르들어 위젯이 활성화 되면 하이라이트 효과를 추가할 수있다. 이것은 사용자가 쉽게 따라가도록 하는 편리한 방법이다.

+ +
input:focus, textarea:focus {
+    /* To give a little highlight on active elements */
+    border-color: #000;
+}
+ +

다중 텍스트 필드는 몇몇 사용자 지정 스타일이 필요하다. 기본적으로  {{HTMLElement("textarea")}}요소는 바닥이 텍스트 기준선에 정렬되는 인라인 블록 이다. 대부분 이것들은 우리가 원하는 것이 아니다. 이런 경우 나이스하게 라벨과 필드를 정렬하려면  {{HTMLElement("textarea")}}요소의 vertical-align 속성을  top이라 변경 해야 한다.

+ +

또하나 유용한 resize 프로퍼티는 사용자가 쉽게  {{HTMLElement("textarea")}}요소의 크기를 조정 할수 있게 해준다.

+ +
textarea {
+    /* To properly align multiline text fields with their labels */
+    vertical-align: top;
+
+    /* To give enough room to type some text */
+    height: 5em;
+
+    /* To allow users to resize any textarea vertically
+       It does not work on every browsers */
+    resize: vertical;
+}
+ +

버튼도 특별한 스타일이 필요하다. 이를 위해 우선 {{HTMLElement("div")}}요소안에 버튼을 넣는다. 그리고 다른 위젯들과 정렬을 해야한다. 그럴러면 {{HTMLElement("label")}}요소를 흉내 내야한다. 그 후에 패딩 과 마진 속성을 지정하면된다

+ +
.button {
+    /* To position the buttons to the same position of the text fields */
+    padding-left: 90px; /* same size as the label elements */
+}
+
+button {
+    /* This extra margin represent roughly the same space as the space
+       between the labels and their text fields */
+    margin-left: .5em;
+}
+ +

이제 폼이 더 나이스 해졋다.

+ +

+ +

웹서버로 데이터 보내기

+ +

까다로울지 모르는 마지막 부분은 데이터를 서버측에서 처리하는 것이다. 앞에서 언급 된 바와 같이 HTML폼은 사용자에게 데이터를 물어보고 웹서버로 데이터를 전달하는 데 편리한 방법이다.

+ +

{{HTMLElement("form")}} 요소는 action속성과 method속성을 사용하여 데이터를 어디에 어떻게 보낼것인지 정의한다.

+ +

이걸로 충분하지않다. 데이터의 이름을 지정해야한다. 이러한 이름들은 브라우저측이나 서버 측 모두에게 중요하다. 브라우저에게는 데이터 각 부분에는 이름을 지정하고 서버측 에서는 이름을 이용하여 데이터를 다룰수 있게 해준다.

+ +

그래서 데이터의 이름을 지정하려면 데이터를 받는 각 폼 위젯에 name속성을 지정해야한다.

+ +
<form action="/my-handling-form-page" method="post">
+    <div>
+        <label for="name">Name:</label>
+        <input type="text" id="name" name="user_name" />
+    </div>
+    <div>
+        <label for="mail">E-mail:</label>
+        <input type="email" id="mail" name="user_email" />
+    </div>
+    <div>
+        <label for="msg">Message:</label>
+        <textarea id="msg" name="user_message"></textarea>
+    </div>
+
+    <div class="button">
+        <button type="submit">Send your message</button>
+    </div>
+</form>
+ +

우리의 예제에서는 다음과 같이 3가지 데이터 이름을 지정했다.  "user_name", "user_email" and "user_message". 이 데이터는 "/my-handling-form-page"로  HTTP POST 방식으로 전송된다.

+ +

서버 측에서는 URL에서 HTTP 요청에 의해 구현된 3개의 키/벨류 항목의 목록 데이터를 받게 된다. 스크립트로 데이터를 다루는 방법은 너에게 달려있다. 각각 의 서버 측 언어들은(PHP, Python, Ruby, Java, C# 등)자신만의 방식으로 이를 다룬다. 더 깊게 들어가는 것은 이문서의 범위를 벗어나지만 더자세히 알고 싶다면 다음 문서를 참조하시오. Sending and retrieving form data.

+ +

결론

+ +

축하한다! 첫번째 HTML폼을 만들었다.

+ + + + + + + + + + + + + + + +
Live example
{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/HTML/Forms/Your_first_HTML_form/Example') }}
Check out the source code
+ +

하지만 이제 시작일 뿐이고, 더 깊게 파고들 시간이다. HTML폼은 이 문서에서 본 것 보다 더 강력한 도구이고, 이 가이드의 다른 문서가 나머지 내용을 배우는데 도움이 될 것이다.

+ +

{{NextMenu("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms")}}

diff --git a/files/ko/learn/getting_started_with_the_web/css_basics/index.html b/files/ko/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..a5e8e08648 --- /dev/null +++ b/files/ko/learn/getting_started_with_the_web/css_basics/index.html @@ -0,0 +1,293 @@ +--- +title: CSS 기초 +slug: Learn/Getting_started_with_the_web/CSS_기본 +tags: + - CSS + - 'l10n:priority' + - 꾸미기 + - 스크립트 코딩 + - 웹 + - 초보자 + - 학습 +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다. CSS 기초 에서 여러분이 처음 시작하며 필요한 내용을 익히도록 도와드립니다. 저희는 다음과 같은 질문에 관한 답을 드리겠습니다. 어떻게 하면 글자색을 검정이나 빨갛게 할 수 있을까? 어떻게 하면 콘텐츠를 화면의 이런 저런 곳에 보이게 할 수 있을까? 어떻게 하면 배경 이미지와 색상들로 웹페이지를 꾸밀 수 있을까?

+
+ +

그래서 CSS가 뭔가요?

+ +

HTML와 같이 CSS는 실제로 프로그래밍 언어는 아닙니다. 마크업(markup) 언어 도 아닙니다. Style sheet 언어 입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말입니다. 예를 들면, HTML 페이지에서 모든 문단 요소들을 선택하고 그 문단 요소들 안에 있는 텍스트를 빨갛게 바꾸려고 한다면 다음과 같이 CSS를 작성할 것입니다.

+ +
p {
+  color: red;
+}
+ +

한 번 해봅시다. 텍스트 에디터의 새 파일에 위의 CSS 3줄을 복사해 붙여넣으세요. 그다음에 styles 디렉토리에 style.css로 파일을 저장하세요.

+ +

아직 여러분의 HTML 문서에 CSS를 적용하는 것이 남아 있습니다. 그렇지 않으면 CSS 스타일은 그 HTML 문서가 브라우저에 표시될 때 아무 영향도 주지 않을 것입니다. (여러분이 우리 프로젝트를 따라오지 않으셨다면, 파일 다루기와 HTML 기본을 읽고 무엇이 먼저 필요한지를 알아보시기 바랍니다.)

+ +
    +
  1. index.html 파일을 열고 head의 안쪽 어딘가(즉, <head>와 </head> 태그 사이)에 아래의 코드를 붙여 넣으세요: + + 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    +
    2. +
  2. index.html을 저장하고 브라우저에서 불러오세요. 여러분은 다음과 같은 것을 보게 되실겁니다:
    3. +
+ +

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.문단의 글자가 빨간색이라면 축하드립니다! 지금 여러분은 첫번째 CSS 를 성공적으로 작성하셨습니다!

+ +

CSS의 ruleset 해부

+ +

위의 CSS를 좀 더 자세히 살펴 봅시다:

+ +

+ +

전체 구조는 rule set 라 불립니다 (하지만 종종 줄여서 "rule"이라고 합니다). 각 부분의 이름에도 주목하세요:

+ +
+
선택자(selector)
+
rule set의 맨 앞에 있는 HTML 요소 이름. 이것은 꾸밀 요소(들)을 선택합니다 (이 예에서는 p 요소). 다른 요소를 꾸미기 위해서는 선택자만 바꿔주세요.
+
선언
+
color: red와 같은 단일 규칙; 여러분이 꾸미기 원하는 요소의 속성을 명시합니다.
+
속성(property)
+
주어진 HTML 요소를 꾸밀 수 있는 방법입니다. (이 예에서, color는 p 요소의 속성입니다.) CSS에서, rule 내에서 영향을 줄 속성을 선택합니다.
+
속성 값
+
속성의 오른쪽에, 콜론 뒤에, 주어진 속성을 위한 많은 가능한 결과중 하나를 선택하기 위해 속성 값을 갖습니다 (color 의 값에는 red 외에 많은 것이 있습니다).
+
+ +

구문의 다른 중요한 부분들도 주목하세요:

+ + + +

그러니까 여러 속성 값들을 한번에 수정하기 위해서는, 세미콜론으로 구분해서 작성해야 합니다, 이렇게요:

+ +
p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}
+ +

여러 요소 선택하기

+ +

여러분은 요소의 여러 타입을 선택하고 모두에게 하나의 rule set 을 적용할 수도 있습니다. 여러 선택자는 콤마로 구분합니다. 예를 들면:

+ +
p,li,h1 {
+  color: red;
+}
+ +

선택자의 여러 종류

+ +

선택자는 여러 종류가 있습니다. 위에서, 우리는 주어진 HTML 문서안에 주어진 타입의 모든 요소를 선택하는 요소 선택자만 보았습니다. 하지만 이것보다 더 구체적인 선택을 만들 수 있습니다. 이것은 선택자의 일반적인 종류들입니다:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
선택자 이름선택하는 것예시
요소 선택자 (때때로 태그 또는 타입 선택자라 불림)특정 타입의 모든 HTML 요소.p
+ <p> 를 선택
아이디 선택자특정 아이디를 가진 페이지의 요소 (주어진 HTML 페이지에서, 아이디당 딱 하나의 요소만 허용됩니다).#my-id
+ <p id="my-id">  또는  <a id="my-id"> 를 선택
클래스 선택자특정 클래스를 가진 페이지의 요소 (한 페이지에 클래스가 여러번 나타날 수 있습니다)..my-class
+ <p class="my-class"> 와 <a class="my-class"> 를 선택
속성 선택자특정 속성을 갖는 페이지의 요소.img[src]
+ <img src="myimage.png"> 를 선택하지만 <img>  는 선택 안함
수도(Pseudo) 클래스 선택자특정 요소이지만 특정 상태에 있을 때만, 예를 들면, hover over 상태일 때.a:hover
+ <a> 를 선택하지만, 마우스 포인터가 링크위에 있을 때만 선택함
+ +

탐구할 더 많은 선택자가 있습니다. 더 자세한 목록은 선택자 가이드에서 찾아보세요.

+ +

글꼴과 문자

+ +

지금까지 약간의 CSS 기본에 대해 살펴보았습니다, 우리의 예제가 멋있게 보이도록 style.css 파일에 더  많은 rule 과 정보를 추가해 봅시다. 우선, 글꼴과 문자가 조금 더 나아보이도록 해보죠.

+ +
+

노트: "px" 가 무슨 뜻인지 설명하는 주석을 추가해 두었습니다. CSS 문서의 /* 와 */ 사이에 있는 것은 브라우저가 코드를 표현할 때 무시하는 CSS 주석입니다. 여러분이 하고 있는 것에 대한 유용한 메모를 작성하기 위한 공간입니다.

+
+ +
    +
  1. 먼저, 돌아가서 여러분이 안전한 어딘가에 저장해 두었던 구글 글꼴의 결과물을 찾으세요. index.html 의 head 안 어딘가에 <link> 요소를 추가하세요 (다시 말해서, <head> 와 </head> 태그 사이 어디에나). 이런식이 될 겁니다: + + 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    +
    2. +
  2. 다음으로, style.css 파일에 이미 존재하는 rule 을 지우세요. 좋은 테스트였지만, 빨간색의 글자가 정말 좋아 보이지는 않습니다.
    3. +
  3. 아래의 코드를 해당 위치에 추가하고, 구글 폰트로부터 얻은 font-family 코드를 placeholder 줄에 덮어쓰세요. (font-family 는 여러분이 글자를 위해 사용하길 원하는 글꼴을 의미합니다.) 이 rule 은 먼저 전체 페이지의 글자 크기와 기본 글꼴을 설정합니다. (html이 전체 페이지의 부모 요소일 때, 이 안의 모든 요소는 같은 font-size 와 font-family 를 물려 받습니다): + 
    html {
+  font-size: 10px; /* px 은 'pixels' 를 의미합니다: 기본 글자 크기는 현재 10 pixels 높이입니다. */
+  font-family: placeholder: 구글 폰트로부터 여러분이 얻은 마지막 결과가 있어야합니다.
+}
    +
    4. +
  4. 이제 HTML body 안에 문자를 포함하는 요소 h1, li 및 p 를 위해 글자 크기를 설정할 것입니다. 또한 조금 더 읽기 좋게 하기 위해 body 콘텐츠의 제목을 가운데 정렬하고 줄의 높이(line-height)와 자간(lettet-spacing)도 설정할 것입니다: + 
    h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}
    +
    5. +
+ +

px(픽셀) 값들은 여러분이 원하는대로 조정할 수 있지만, 여러분이 원하는 디자인을 얻도록, 여러분의 디자인은 이런식으로 보여야 합니다:

+ +

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

+ +

박스, 박스, 박스의 모든 것

+ +

CSS 작성에서 여러분이 알게 될 한 가지는 많은 것들이 박스에 관한 것이라는 겁니다 — 그들의 크기, 색상, 위치 등을 설정하는 것. 여러분의 페이지에 있는 대부분의 HTML 요소들은 서로의 위에 놓여있는 박스로 생각해볼 수 있습니다.

+ +

a big stack of boxes or crates sat on top of one another

+ +

놀랍지 않게도, CSS 레이아웃은 박스모델 을 주 기반으로 하고 있습니다. 여러분의 페이지의 공간을 차지하고 있는 각각의 블록들은 이와 같은 속성들을 가집니다:

+ + + +

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

+ +

여기서 이런 것도 사용합니다:

+ + + +

그럼, 우리의 페이지에 더 많은 CSS를 추가해봅시다! 페이지의 아래에 이러한 새로운 rule 을 계속 추가하세요, 그리고 값을 바꾸는 실험을 통해 이것이 어떤 결과가 나타나는지 보는것을 두려워하지 마세요.

+ +

페이지 색 바꾸기

+ +
html {
+  background-color: #00539F;
+}
+ +

이 rule 은 전체 페이지를 위한 배경색을 설정합니다. 위의 색상 코드를 여러분의 사이트를 계획할 때 선택했던 색으로 변경하세요.

+ +

body 외부 정렬하기

+ +
body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}
+ +

이제는 body 요소를 위한 것입니다. 여기 적지 않은 선언들이 있습니다. 하나 하나 모두 살펴 봅시다:

+ + + +

메인 페이지 제목 배치하고 꾸미기

+ +
h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}
+ +

여러분은 바디의 상단에 끔찍한 틈이 있다는 것을 알아차리셨을 겁니다. 브라우저가 h1 요소에 (다른 것들 사이에서) 어떤 초기 스타일링을 적용하기 때문에 발생합니다, 심지어 여러분이 아무런 CSS 를 적용하지 않았을 때도요! 안좋은 아이디어로 들릴수도 있지만, 우리는 꾸며지지 않은 웹사이트일지라도 기본적인 가독성을 갖기를 원합니다. margin: 0;.설정에 의해 초기 스타일링을 덮어쓰는 것으로 그 틈을 제거할 수 있습니다.

+ +

다음으로, 제목의 상단과 하단 padding 을 20 pixels로 설정하고, 제목 글자 색을 html 배경색과 같게 만들었습니다.

+ +

여기서 사용했던 꽤 흥미로운 속성 하나는 text-shadow 문자로, 요소의 문자 콘텐츠에 그림자를 적용해줍니다. 네 개의 값들은 다음과 같습니다:

+ + + +

다시, 여러분이 무엇을 확인해 볼 수 있는지 다른 값으로 실험을 해보세요.

+ +

이미지 가운데 정렬

+ +
img {
+  display: block;
+  margin: 0 auto;
+}
+ +

마지막으로, 이미지를 더 나아보이도록 가운데로 둘 것입니다. 전에 body 에서 했듯이 다시 margin: 0 auto 트릭을 사용해 볼 수 있지만, 무언가 더 해야할 필요가 있습니다. body 요소는 block level 입니다. 이것은 페이지의 공간을 차지하고, margin 과 여기에 적용된 다른 여백값을 가질 수 있다는 것을 의미합니다. 반면에 이미지는 inline 요소 입니다. 이것은 그렇지 못함을 의미합니다. 따라서 이미지에 margin 을 적용하기 위해서는,  display: block; 을 사용해 이미지에 block-level 성질을 주어야 합니다.

+ +
+

노트: 위의 지침에서는 body에 설정된 너비(600 픽셀) 보다 작은 이미지를 사용한다고 가정합니다. 이미지가 더 크면 body가 넘쳐 페이지의 나머지 부분으로 유출됩니다. 이 문제를 해결하려면 1) 그래픽 편집기를 사용하여 이미지의 너비를 줄이거나 2) 더 작은 값(예: 400px)  으로 <img> 요소에 width 속성을 설정하고 CSS를 사용하여 이미지 크기를 조정할 수 있습니다.

+
+ +
+

노트: 아직 display: block; 과 block-level/inline 차이를 이해하지 못하였더라도 걱정하시마세요. CSS 를 더 깊게 공부하면 이해하실 수 있을것입니다. display 의 여러 값들에 대한 더 많은 정보는 display 참조 페이지에서 찾아보세요.

+
+ +

마무리

+ +

이 글의 모든 설명을 따라오셨다면, 이와 같이 보이는 페이지가 되실 겁니다. (여기서 확인하실 수도 있습니다):

+ +

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

+ +

혹시 막히셨다면, 여러분의 코드와 Github에 있는 우리의 예제 코드와 항상 비교해보세요.

+ +

여기서, 우리는 CSS의 겉만 살짝 맛봤습니다. 더 많은 것이 알고 싶으시면 CSS 배우기 페이지로 가보세요.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}

+ +

이번 과목에서는

+ + diff --git "a/files/ko/learn/getting_started_with_the_web/css_\352\270\260\353\263\270/index.html" "b/files/ko/learn/getting_started_with_the_web/css_\352\270\260\353\263\270/index.html" deleted file mode 100644 index a5e8e08648..0000000000 --- "a/files/ko/learn/getting_started_with_the_web/css_\352\270\260\353\263\270/index.html" +++ /dev/null @@ -1,293 +0,0 @@ ---- -title: CSS 기초 -slug: Learn/Getting_started_with_the_web/CSS_기본 -tags: - - CSS - - 'l10n:priority' - - 꾸미기 - - 스크립트 코딩 - - 웹 - - 초보자 - - 학습 -translation_of: Learn/Getting_started_with_the_web/CSS_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
- -
-

CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다. CSS 기초 에서 여러분이 처음 시작하며 필요한 내용을 익히도록 도와드립니다. 저희는 다음과 같은 질문에 관한 답을 드리겠습니다. 어떻게 하면 글자색을 검정이나 빨갛게 할 수 있을까? 어떻게 하면 콘텐츠를 화면의 이런 저런 곳에 보이게 할 수 있을까? 어떻게 하면 배경 이미지와 색상들로 웹페이지를 꾸밀 수 있을까?

-
- -

그래서 CSS가 뭔가요?

- -

HTML와 같이 CSS는 실제로 프로그래밍 언어는 아닙니다. 마크업(markup) 언어 도 아닙니다. Style sheet 언어 입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말입니다. 예를 들면, HTML 페이지에서 모든 문단 요소들을 선택하고 그 문단 요소들 안에 있는 텍스트를 빨갛게 바꾸려고 한다면 다음과 같이 CSS를 작성할 것입니다.

- -
p {
-  color: red;
-}
- -

한 번 해봅시다. 텍스트 에디터의 새 파일에 위의 CSS 3줄을 복사해 붙여넣으세요. 그다음에 styles 디렉토리에 style.css로 파일을 저장하세요.

- -

아직 여러분의 HTML 문서에 CSS를 적용하는 것이 남아 있습니다. 그렇지 않으면 CSS 스타일은 그 HTML 문서가 브라우저에 표시될 때 아무 영향도 주지 않을 것입니다. (여러분이 우리 프로젝트를 따라오지 않으셨다면, 파일 다루기와 HTML 기본을 읽고 무엇이 먼저 필요한지를 알아보시기 바랍니다.)

- -
    -
  1. index.html 파일을 열고 head의 안쪽 어딘가(즉, <head>와 </head> 태그 사이)에 아래의 코드를 붙여 넣으세요: - - 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    -
    2. -
  2. index.html을 저장하고 브라우저에서 불러오세요. 여러분은 다음과 같은 것을 보게 되실겁니다:
    3. -
- -

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.문단의 글자가 빨간색이라면 축하드립니다! 지금 여러분은 첫번째 CSS 를 성공적으로 작성하셨습니다!

- -

CSS의 ruleset 해부

- -

위의 CSS를 좀 더 자세히 살펴 봅시다:

- -

- -

전체 구조는 rule set 라 불립니다 (하지만 종종 줄여서 "rule"이라고 합니다). 각 부분의 이름에도 주목하세요:

- -
-
선택자(selector)
-
rule set의 맨 앞에 있는 HTML 요소 이름. 이것은 꾸밀 요소(들)을 선택합니다 (이 예에서는 p 요소). 다른 요소를 꾸미기 위해서는 선택자만 바꿔주세요.
-
선언
-
color: red와 같은 단일 규칙; 여러분이 꾸미기 원하는 요소의 속성을 명시합니다.
-
속성(property)
-
주어진 HTML 요소를 꾸밀 수 있는 방법입니다. (이 예에서, color는 p 요소의 속성입니다.) CSS에서, rule 내에서 영향을 줄 속성을 선택합니다.
-
속성 값
-
속성의 오른쪽에, 콜론 뒤에, 주어진 속성을 위한 많은 가능한 결과중 하나를 선택하기 위해 속성 값을 갖습니다 (color 의 값에는 red 외에 많은 것이 있습니다).
-
- -

구문의 다른 중요한 부분들도 주목하세요:

- - - -

그러니까 여러 속성 값들을 한번에 수정하기 위해서는, 세미콜론으로 구분해서 작성해야 합니다, 이렇게요:

- -
p {
-  color: red;
-  width: 500px;
-  border: 1px solid black;
-}
- -

여러 요소 선택하기

- -

여러분은 요소의 여러 타입을 선택하고 모두에게 하나의 rule set 을 적용할 수도 있습니다. 여러 선택자는 콤마로 구분합니다. 예를 들면:

- -
p,li,h1 {
-  color: red;
-}
- -

선택자의 여러 종류

- -

선택자는 여러 종류가 있습니다. 위에서, 우리는 주어진 HTML 문서안에 주어진 타입의 모든 요소를 선택하는 요소 선택자만 보았습니다. 하지만 이것보다 더 구체적인 선택을 만들 수 있습니다. 이것은 선택자의 일반적인 종류들입니다:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
선택자 이름선택하는 것예시
요소 선택자 (때때로 태그 또는 타입 선택자라 불림)특정 타입의 모든 HTML 요소.p
- <p> 를 선택
아이디 선택자특정 아이디를 가진 페이지의 요소 (주어진 HTML 페이지에서, 아이디당 딱 하나의 요소만 허용됩니다).#my-id
- <p id="my-id">  또는  <a id="my-id"> 를 선택
클래스 선택자특정 클래스를 가진 페이지의 요소 (한 페이지에 클래스가 여러번 나타날 수 있습니다)..my-class
- <p class="my-class"> 와 <a class="my-class"> 를 선택
속성 선택자특정 속성을 갖는 페이지의 요소.img[src]
- <img src="myimage.png"> 를 선택하지만 <img>  는 선택 안함
수도(Pseudo) 클래스 선택자특정 요소이지만 특정 상태에 있을 때만, 예를 들면, hover over 상태일 때.a:hover
- <a> 를 선택하지만, 마우스 포인터가 링크위에 있을 때만 선택함
- -

탐구할 더 많은 선택자가 있습니다. 더 자세한 목록은 선택자 가이드에서 찾아보세요.

- -

글꼴과 문자

- -

지금까지 약간의 CSS 기본에 대해 살펴보았습니다, 우리의 예제가 멋있게 보이도록 style.css 파일에 더  많은 rule 과 정보를 추가해 봅시다. 우선, 글꼴과 문자가 조금 더 나아보이도록 해보죠.

- -
-

노트: "px" 가 무슨 뜻인지 설명하는 주석을 추가해 두었습니다. CSS 문서의 /* 와 */ 사이에 있는 것은 브라우저가 코드를 표현할 때 무시하는 CSS 주석입니다. 여러분이 하고 있는 것에 대한 유용한 메모를 작성하기 위한 공간입니다.

-
- -
    -
  1. 먼저, 돌아가서 여러분이 안전한 어딘가에 저장해 두었던 구글 글꼴의 결과물을 찾으세요. index.html 의 head 안 어딘가에 <link> 요소를 추가하세요 (다시 말해서, <head> 와 </head> 태그 사이 어디에나). 이런식이 될 겁니다: - - 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    -
    2. -
  2. 다음으로, style.css 파일에 이미 존재하는 rule 을 지우세요. 좋은 테스트였지만, 빨간색의 글자가 정말 좋아 보이지는 않습니다.
    3. -
  3. 아래의 코드를 해당 위치에 추가하고, 구글 폰트로부터 얻은 font-family 코드를 placeholder 줄에 덮어쓰세요. (font-family 는 여러분이 글자를 위해 사용하길 원하는 글꼴을 의미합니다.) 이 rule 은 먼저 전체 페이지의 글자 크기와 기본 글꼴을 설정합니다. (html이 전체 페이지의 부모 요소일 때, 이 안의 모든 요소는 같은 font-size 와 font-family 를 물려 받습니다): - 
    html {
-  font-size: 10px; /* px 은 'pixels' 를 의미합니다: 기본 글자 크기는 현재 10 pixels 높이입니다. */
-  font-family: placeholder: 구글 폰트로부터 여러분이 얻은 마지막 결과가 있어야합니다.
-}
    -
    4. -
  4. 이제 HTML body 안에 문자를 포함하는 요소 h1, li 및 p 를 위해 글자 크기를 설정할 것입니다. 또한 조금 더 읽기 좋게 하기 위해 body 콘텐츠의 제목을 가운데 정렬하고 줄의 높이(line-height)와 자간(lettet-spacing)도 설정할 것입니다: - 
    h1 {
-  font-size: 60px;
-  text-align: center;
-}
-
-p, li {
-  font-size: 16px;
-  line-height: 2;
-  letter-spacing: 1px;
-}
    -
    5. -
- -

px(픽셀) 값들은 여러분이 원하는대로 조정할 수 있지만, 여러분이 원하는 디자인을 얻도록, 여러분의 디자인은 이런식으로 보여야 합니다:

- -

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

- -

박스, 박스, 박스의 모든 것

- -

CSS 작성에서 여러분이 알게 될 한 가지는 많은 것들이 박스에 관한 것이라는 겁니다 — 그들의 크기, 색상, 위치 등을 설정하는 것. 여러분의 페이지에 있는 대부분의 HTML 요소들은 서로의 위에 놓여있는 박스로 생각해볼 수 있습니다.

- -

a big stack of boxes or crates sat on top of one another

- -

놀랍지 않게도, CSS 레이아웃은 박스모델 을 주 기반으로 하고 있습니다. 여러분의 페이지의 공간을 차지하고 있는 각각의 블록들은 이와 같은 속성들을 가집니다:

- - - -

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

- -

여기서 이런 것도 사용합니다:

- - - -

그럼, 우리의 페이지에 더 많은 CSS를 추가해봅시다! 페이지의 아래에 이러한 새로운 rule 을 계속 추가하세요, 그리고 값을 바꾸는 실험을 통해 이것이 어떤 결과가 나타나는지 보는것을 두려워하지 마세요.

- -

페이지 색 바꾸기

- -
html {
-  background-color: #00539F;
-}
- -

이 rule 은 전체 페이지를 위한 배경색을 설정합니다. 위의 색상 코드를 여러분의 사이트를 계획할 때 선택했던 색으로 변경하세요.

- -

body 외부 정렬하기

- -
body {
-  width: 600px;
-  margin: 0 auto;
-  background-color: #FF9500;
-  padding: 0 20px 20px 20px;
-  border: 5px solid black;
-}
- -

이제는 body 요소를 위한 것입니다. 여기 적지 않은 선언들이 있습니다. 하나 하나 모두 살펴 봅시다:

- - - -

메인 페이지 제목 배치하고 꾸미기

- -
h1 {
-  margin: 0;
-  padding: 20px 0;
-  color: #00539F;
-  text-shadow: 3px 3px 1px black;
-}
- -

여러분은 바디의 상단에 끔찍한 틈이 있다는 것을 알아차리셨을 겁니다. 브라우저가 h1 요소에 (다른 것들 사이에서) 어떤 초기 스타일링을 적용하기 때문에 발생합니다, 심지어 여러분이 아무런 CSS 를 적용하지 않았을 때도요! 안좋은 아이디어로 들릴수도 있지만, 우리는 꾸며지지 않은 웹사이트일지라도 기본적인 가독성을 갖기를 원합니다. margin: 0;.설정에 의해 초기 스타일링을 덮어쓰는 것으로 그 틈을 제거할 수 있습니다.

- -

다음으로, 제목의 상단과 하단 padding 을 20 pixels로 설정하고, 제목 글자 색을 html 배경색과 같게 만들었습니다.

- -

여기서 사용했던 꽤 흥미로운 속성 하나는 text-shadow 문자로, 요소의 문자 콘텐츠에 그림자를 적용해줍니다. 네 개의 값들은 다음과 같습니다:

- - - -

다시, 여러분이 무엇을 확인해 볼 수 있는지 다른 값으로 실험을 해보세요.

- -

이미지 가운데 정렬

- -
img {
-  display: block;
-  margin: 0 auto;
-}
- -

마지막으로, 이미지를 더 나아보이도록 가운데로 둘 것입니다. 전에 body 에서 했듯이 다시 margin: 0 auto 트릭을 사용해 볼 수 있지만, 무언가 더 해야할 필요가 있습니다. body 요소는 block level 입니다. 이것은 페이지의 공간을 차지하고, margin 과 여기에 적용된 다른 여백값을 가질 수 있다는 것을 의미합니다. 반면에 이미지는 inline 요소 입니다. 이것은 그렇지 못함을 의미합니다. 따라서 이미지에 margin 을 적용하기 위해서는,  display: block; 을 사용해 이미지에 block-level 성질을 주어야 합니다.

- -
-

노트: 위의 지침에서는 body에 설정된 너비(600 픽셀) 보다 작은 이미지를 사용한다고 가정합니다. 이미지가 더 크면 body가 넘쳐 페이지의 나머지 부분으로 유출됩니다. 이 문제를 해결하려면 1) 그래픽 편집기를 사용하여 이미지의 너비를 줄이거나 2) 더 작은 값(예: 400px)  으로 <img> 요소에 width 속성을 설정하고 CSS를 사용하여 이미지 크기를 조정할 수 있습니다.

-
- -
-

노트: 아직 display: block; 과 block-level/inline 차이를 이해하지 못하였더라도 걱정하시마세요. CSS 를 더 깊게 공부하면 이해하실 수 있을것입니다. display 의 여러 값들에 대한 더 많은 정보는 display 참조 페이지에서 찾아보세요.

-
- -

마무리

- -

이 글의 모든 설명을 따라오셨다면, 이와 같이 보이는 페이지가 되실 겁니다. (여기서 확인하실 수도 있습니다):

- -

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

- -

혹시 막히셨다면, 여러분의 코드와 Github에 있는 우리의 예제 코드와 항상 비교해보세요.

- -

여기서, 우리는 CSS의 겉만 살짝 맛봤습니다. 더 많은 것이 알고 싶으시면 CSS 배우기 페이지로 가보세요.

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}

- -

이번 과목에서는

- - diff --git a/files/ko/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/ko/learn/getting_started_with_the_web/dealing_with_files/index.html new file mode 100644 index 0000000000..1ed38e8cde --- /dev/null +++ b/files/ko/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -0,0 +1,117 @@ +--- +title: 파일 다루기 +slug: Learn/Getting_started_with_the_web/파일들_다루기 +tags: + - Beginner + - CodingScripting + - Files + - Guide + - HTML + - 'l10n:priority' +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

웹사이트는 문자, 코드, 스타일시트, 미디어 등 수많은 파일로 구성되어 있습니다. 웹사이트를 제작할 때, 여러분은 이러한 파일들을 여러분의 컴퓨터에 적당한 양식에 맞춰 정리해야 하고, 서로가 잘 작동하는지 확인해야 하며, 최종적으로 서버에 업로드하기 전에 모든 내용이 올바르게 나타나게 해야 합니다. 파일 다루기에서는 여러분의 웹사이트를 위한 적당한 양식을 만들기 위해 여러분이 알아야 하는 몇 가지 문제들에 대해 이야기 할 것입니다.

+
+ +

웹사이트는 컴퓨터의 어디에 두어야 할까요?

+ +

만약 여러분이 로컬컴퓨터에서 웹사이트에 대해 작업한다면, 퍼블리시된 웹사이트의 파일 구조를 반영하는 하나의 폴더 안에 관련된 모든 파일을 유지하여야 합니다. 이 폴더는 여러분이 원하는 곳이라면 어디에나 둘 수 있지만, 아마도 쉽게 찾을 수 있는 곳에 두어야 할 것입니다. 예를들면 여러분의 바탕화면이나 홈 폴더, 또는 하드 드라이브의 루트(root)가 될 것입니다.

+ +
    +
  1. 여러분의 웹사이트 프로젝트를 저장할 장소를 선택하세요. 여기에, web-projects (또는 비슷한 이름의 폴더) 라고 불리는 새 폴더를 생성하세요. 이 곳이 여러분의 웹사이트 프로젝트가 위치할 곳입니다.
    2. +
  2. 이 첫 번째 폴더에, 또다른 폴더를 하나 만들고 첫 번째 웹사이트를 저장하도록 합시다. 그 폴더를 test-site (또는 무언가 더 상상력을 발휘한 다른 이름도 좋습니다) 라고 부릅시다.
    3. +
+ +

포장과 공백에 대한 여담

+ +

이 글을 통해 알게 되겠지만, 폴더와 파일의 이름을 지을 때 공백 없이 영문 소문자로 짓기를 바랍니다. 이것은 다음과 같은 이유 때문입니다.

+ +
    +
  1. 많은 컴퓨터들 -특히 웹 서버- 은 영문 대소문자를 구분합니다. 그래서 예를 들면, 웹사이트에 test-site/MyImage.jpg라는 이미지를 저장해 두었는데 여러분이 다른 파일에서 test-site/myimage.jpg라는 이미지를 호출하는 것은 작동하지 않을 것입니다.
    2. +
  2. 브라우저들과 웹 서버들, 그리고 프로그래밍 언어들은 공백을 일관되게 처리하지 않습니다. 예를 들면, 만약 여러분이 파일 이름에 공백을 사용한다면, 어떤 시스템은 그 파일 이름을 두개의 파일 이름으로 다룰 것입니다. 어떤 서버들은 그 파일 이름의 공백을 "%20"(URIs 안의 공백을 위한 문자 코드)으로 대체하므로 여러분의 모든 링크들을 망가뜨릴 것입니다. 또한, 밑줄문자를 사용하기 보다는 대시(하이픈)으로 단어를 구분하는 것이 훨씬 더 좋습니다.: my-file.html vs. my_file.html.
    3. +
+ +

간단히 말하자면 여러분은 파일 이름을 지을 때 붙임표(hyphen)를 사용해야 합니다. 구글 검색 엔진은 하이픈를 단어 구분자로 취급합니다. 그러나 밑줄문자는 단어 구분자로 취급하지 않습니다. 이러한 이유로, 여러분이 폴더와 파일 이름을 지을 때에는 공백이 없는 영문 소문자와 대시로 구분된 단어로 작성하는 습관을 들이는 것이 제일 좋습니다. 적어도 여러분이 무엇을 하는지 알 때까지는요. 그렇게하면 나중에 발생할 문제를 줄일 수 있습니다.

+ +

웹사이트는 어떤 구조를 가져야 할까요?

+ +

다음으로, 우리의 테스트 사이트가 어떤 구조를 가져야 하는지 살펴 봅시다. 어떤 웹사이트 프로젝트를 만들든지간에 가장 공통으로 가지게 되는 것들은 index HTML 파일과 이미지, 스타일 파일(CSS 파일), 스크립트 파일들을 포함하고 있는 폴더입니다. 이것들을 이제 생성해 봅시다.

+ +
    +
  1. index.html: 이 파일은 보통은 홈페이지의 내용을 가지고 있습니다. 다시 말하면, 처음 웹사이트에 방문하면 사람들이 볼 수 있는 텍스트나 이미지이 파일 같은 것입니다. 텍스트 에디터를 사용하여, index.html 라는 새 파일을 생성하고 test-site 폴더 안에 저장하세요.
    2. +
  2. images 폴더: 이 폴더는 여러분의 사이트에 사용할 모든 이미지들을 포함하고 있습니다. test-site 폴더 안에, images 라는 폴더를 생성하세요.
    3. +
  3. styles 폴더: 이 폴더는 여러분의 내용을 보기 좋게 꾸며주기(예를 들어, 문자와 배경색을 세팅하는 것) 위한 CSS 코드를 포함할 것입니다. test-site 폴더 안에, styles 라는 폴더를 생성하세요.
    4. +
  4. scripts 폴더: 이 폴더는 모든 JavaScript 코드를 포함하고 있는데, 이 코드는 여러분의 사이트에 상호작용하는 기능을 추가할 때 사용될 것입니다.예를들면, 클릭할 때 자료를 불러오는 버튼). test-site 폴더 안에, scripts 라는 폴더를 생성하세요.
    5. +
+ +
+

참고: Windows 컴퓨터에서는 파일 이름을 보는것에 문제가 생길 수 있습니다, 왜냐하면 윈도우는 기본적으로 알려진 확장자 자동 숨김이라는 귀찮은 옵션을 갖고 있기 때문입니다. 일반적으로 윈도우 익스플로러에서, 폴더 옵션...에서 알려진 확장자 자동 숨김을 선택 해제하는 것으로 이 옵션을 끌 수 있습니다. 여러분의 윈도우 버전을 포함한 더 많은 정보는, 인터넷에서 검색을 해보세요!

+
+ +

파일 경로

+ +

파일들이 서로 의사소통할 수 있도록 하려면 여러분은 서로에게 각자의 파일 경로를 제공해야 합니다 — 기본적으로 다른 파일이 어디있는지 알 수 있도록 경로를 제공해야하는 것이죠. 이것을 시연해보기 위해, 우리는 index.html파일에 약간의HTML을 작성할 것입니다, 그리고 "웹사이트의 외관은 어떻게 할까요?" 라는 글에서 여러분이 선택한 이미지를 보여주게 할 것입니다.

+ +
    +
  1. images폴더 안에 여러분이 선택한 이미지를 복사해 넣으세요.
    2. +
  2. index.html 파일을 열고, 아래의 코드를 보이는 그대로 집어 넣습니다. 지금은 이 모든게 무슨 뜻인지 걱정할 필요가 없습니다 — 본 시리즈에서 나중에 이 구조에 대해 더 자세히 살펴볼 겁니다. + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <img src="" alt="My test image">
+  </body>
+</html>
    +
    3. +
  3. <img src="" alt="My test image">라는 줄은 페이지 안으로 이미지를 삽입하는 HTML 코드 입니다. 우리는 이미지가 어디에 있는지에 대해 HTML에게 말해줄 필요가 있습니다. 이미지는 images라는 폴더 안에 있는데, 이것은 index.html 파일과 같은 폴더에 있습니다. index.html파일에서 우리 이미지 파일로 파일 구조를 이동하기 위해, 우리가 필요한 파일 경로는 images/your-image-filename입니다. 예를 들어, 우리 이미지가 firefox-icon.png라면, 파일 경로는 images/firefox-icon.png가 됩니다.
    4. +
  4. 여러분의 HTML 코드 중 src="" 의 쌍따옴표 사이에 파일 경로를 입력하세요.
    5. +
  5. HTML 파일을 저장하고나서, 여러분의 웹 브라우저에서 이것을 로드하세요 (파일을 더블 클릭). 여러분의 새 웹페이지가 이미지를 표시하는 것을 보실 수 있습니다!
    6. +
+ +

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

+ +

파일 경로를 위한 일반적인 규칙들:

+ + + +

지금으로선, 이것이 여러분이 알아야 할 전부 입니다.

+ +
+

노트: 윈도우 파일 시스템은 기본 슬래시가 아니라 역슬래시를 사용하는 경향이 있습니다. 예시: C:\windows. 이것은 HTML에서 문제가 되지않습니다 — 여러분이 윈도우에서 웹 사이트를 개발하더라도 전방향 슬래시(/)를 코드에 사용해야 합니다.

+
+ +

또 무엇을 더 해야할까요?

+ +

현재로서는 이것이 전부입니다. 여러분의 폴더 구조는 이와 같이 보여야 합니다:

+ +

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

+ + + +

In this module

+ + diff --git a/files/ko/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/ko/learn/getting_started_with_the_web/how_the_web_works/index.html new file mode 100644 index 0000000000..009b22ec8f --- /dev/null +++ b/files/ko/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -0,0 +1,99 @@ +--- +title: 웹의 동작 방식 +slug: Learn/Getting_started_with_the_web/웹의_동작_방식 +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +

{{LearnSidebar}}

+ +

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

+ +
+

'웹의 동작 방식'은 여러분의 컴퓨터나 폰의 웹 브라우저 안에서 웹페이지를 볼 때 무슨 일이 발생하는지에 대한 간소화된 개념을 제공할 것입니다.

+
+ +

이 이론은 단기적으로 봤을 때 웹 코드를 작성하기 위해 필수적인 것은 아니지만, 머지 않아 백그라운드에서 발생하는 것을 이해하는 것으로부터 오는 장점을 얻게 될 것입니다.

+ +

클라이언트와 서버

+ +

웹에 연결된 컴퓨터는 클라이언트 와 서버 라고 합니다. 그들이 어떻게 상호작용하는가에 대한 간소화된 다이어그램은 다음과 같습니다:

+ +

+ + + +

도구 상자의 다른 부분들

+ +

위에서 설명한 클라이언트와 서버는 모든 내용을 알려주진 않습니다. 많은 다른 부분들이 포함되어 있고, 아래에서 그것들에 대해 설명할 것입니다.

+ +

지금은, 웹이 도로라고 상상해봅시다. 도로의 한 쪽 끝은 여러분의 집 같은 클라이언트 입니다. 다른 한 쪽 끝은 여러분이 뭔가를 사길 원하는 상점같은 서버입니다.

+ +

+ +

클라이언트와 서버에 덧붙여서 우리는 다음 내용들도 알아볼 필요가 있습니다.

+ + + +

그래서 정확히 무슨일이 발생할까요?

+ +

여러분이 브라우저에 웹 주소를 입력할 때 (우리의 비유에서 상점으로 걸어가는 것과 유사합니다):

+ +
    +
  1. 브라우저는 DNS 서버로 가서 웹사이트가 있는 서버의 진짜 주소를 찾습니다 (여러분이 상점의 주소를 찾습니다).
    2. +
  2. 그 다음 브라우저는 서버에게 웹사이트의 사본을 클라이언트에게 보내달라는 HTTP 요청 메세지를 서버로 전송합니다.(상점으로 가서 상품을 주문합니다.) 이 메세지, 그리고 클라이언트와 서버 사이에 전송된 모든 데이터는 TCP/IP 연결을 통해서 전송됩니다.
    3. +
  3. 이 메세지를 받은 서버는 클라이언트의 요청을 승인하고, "200 OK" 메세지를 클라이언트에게 전송합니다. "200 OK"는 "물론이죠. 당신은 웹 사이트를 볼 수 있어요! 여기 있어요" 라는 의미입니다. 그 다음 서버는 웹사이트의 파일들을 데이터 패킷이라 불리는 작은 일련의 덩어리들로 브라우저에 전송하기 시작합니다.(상점은 여러분이 주문한 상품을 전달하고, 여러분은 그것을 집으로 가져갑니다.)
    4. +
  4. 브라우저는 이 작은 덩어리들을 완전한 웹 사이트로 조립하고, 당신에게 보여줍니다. (상품이 당신의 문에 도착합니다. — 새 것이죠, 멋져요!)
    5. +
+ +

DNS 설명

+ +

실제 웹 주소는 멋지거나, 여러분이 선호하는 웹사이트를 찾기 위한 주소 막대에 입력하는 기억할만한 문자가 아닙니다. 그것은 63.245.217.105 같은 숫자 덩어리입니다.

+ +

이것은 IP 주소라고 하고, 웹의 하나뿐인 특정 위치를 나타냅니다. 그러나 기억하기에 쉽지는 않죠? 그것이 도메인 이름 서버가 발명된 이유입니다. 도메인 이름 서버는 여러분이 브라우저에 입력하는 웹주소 ("mozilla.org" 같은) 를 웹사이트의 실제 (IP) 주소에 맞춰주는 특별한 서버입니다. 

+ +

웹사이트는 그들의 IP 주소를 통해 직접 접근될 수도 있습니다. 여러분은 IP Checker와 같은 도구에 도메인을 입력해 IP 주소를 찾을 수 있습니다.

+ +

패킷 설명

+ +

앞서 우리는 서버에서 클라이언트로 전송되는 데이터의 포맷을 설명하기 위해 "패킷" 이라는 용어를 사용했습니다. 이게 무엇을 의미하는 걸까요? 기본적으로, 데이터가 웹을 거쳐서 전송될 때, 수천개의 작은 덩어리들로 전송됩니다. 그래서 다양한 웹 사용자들은 동시에 같은 웹 사이트를 다운로드 할 수 있게 됩니다. 만약 웹 사이트가 하나의 큰 덩어리들로 전송된다면, 오직 한 번에 하나의 사용자만 다운로드 할 수 있을 것입니다. 이는 분명 웹을 매우 비효율적이고, 사용하기에 재미없게 만들 것입니다.

+ +

여기도 보세요

+ + + +

크레딧

+ +

거리 사진: Street composing, by Kevin D.

+ +

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

+ +

In this module

+ + diff --git a/files/ko/learn/getting_started_with_the_web/html_basics/index.html b/files/ko/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..530f3fe11f --- /dev/null +++ b/files/ko/learn/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,234 @@ +--- +title: HTML 기본 +slug: Learn/Getting_started_with_the_web/HTML_기본 +tags: + - Beginner + - HTML + - Learn + - Web + - 'l10n:priority' + - 입문자 +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

HTML(Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. 예를 들면, 컨텐트는 여러 개의 문단, 글 머리 목록이 구조화된 것이거나 사진이나 데이터 테이블일 수도 있습니다. 제목과 같이 이 글은 HTML과 그 기능에 대한 기본적인 이해를 제공할 것입니다.

+
+ +

그래서 HTML은 무엇일까요?

+ +

HTML 은 프로그래밍 언어가 아닙니다;  컨텐츠의 구조를 정의하는 마크업 언어입니다. HTML은 컨텐츠의 서로 다른 부분들을 씌우거나(wrap) 감싸서(enclose) 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 요소({{Glossary("element", "elements")}})로 이루어져 있습니다. {{Glossary("tag", "tags")}}로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크(hyperlink)하거나 단어들을 이탤릭체로 표시하고 글씨체를 크게 또는 작게 만드는 등의 일을 할 수 있습니다. 예를 들어, 다음과 같은 컨텐츠에 대해:

+ +
내 고양이는 고약해
+
+ +

그 한 줄의 문장이 독립적인 구문이길 원한다면, 문단 태그(paragraph tags)로 둘러쌈으로해서 그것이 하나의 문단임을 명시할 수 있습니다:

+ +
<p>내 고양이는 고약해</p>
+ +

HTML 요소 분석

+ +

이 문단 요소에 대해 조금 더 탐구해봅시다.

+ +

+ +

이 요소의 주요 부분은 이렇습니다:

+ +
    +
  1. 여는 태그(opening tag): 이것은 요소의 이름으로 구성되고 (여기에서는 p), 여닫는 꺾쇠괄호로 감싸집니다. 이것은 요소가 시작되는 곳, 또는 효과를 시작하는 곳임을 나타냅니다 — 이 예제에서는 문단이 시작되는 위치를 나타냅니다.
    2. +
  2. 닫는 태그(closing tag): 이것은 여는 태그와 같지만, 요소의 이름 앞에 전방향 슬래시가 포함된다는 점이 다릅니다. 이것은 요소의 끝을 나타냅니다 — 이 예제에서는 문단이 끝나는 위치를 나타냅니다. 초보자가 가장 흔히 범하는 오류 중 하나가 닫는 태그를 쓰지 않는 것으로 이상한 결과가 표시됩니다.
    3. +
  3. 컨텐츠(content): 이것은 요소의 내용(content)으로 이 예제에서는 그냥 텍스트입니다.
    4. +
  4. 요소(element): 요소는 여는 태그와 닫는 태그, 그리고 컨텐츠로 이루어집니다.
    5. +
+ +

요소는 속성도 가질 수 있는데, 다음과 같이 사용합니다:

+ +

+ +

속성은 실제 컨텐츠로 표시되길 원하지 않는 추가적인 정보를 담고 있습니다. 이 예제에서, class 속성을 이용해 나중에 해당 요소를 특정해 스타일이나 다른 정보를 설정할 때 사용할 수 있는 식별자를 지정할 수 있습니다.

+ +

속성이 항상 가져야 하는 것:

+ +
    +
  1. 요소 이름 (또는 요소가 하나 이상 속성을 이미 가지고 있다면 이전 속성)과 속성 사이에 공백이 있어야 합니다.
    2. +
  2. 속성 이름 뒤에는 등호(=)가 와야 합니다.
    3. +
  3. 속성 값의 앞 뒤에 열고 닫는 인용부호(" 또는 ')가 있어야 합니다.
    4. +
+ +

요소 중첩

+ +

여러분은 요소를 다른 요소의 안에 놓을 수 있습니다 — 이것을 중첩(nesting)이라고 부릅니다. 우리 고양이는 아주 고약하다라고 표시하길 원한다면, 단어를 강조하는 용도로 사용하는{{htmlelement("strong")}} 요소로 "아주"를 감싸면 됩니다:

+ +
<p>내 고양이는 <strong>아주</strong> 고약해.</p>
+ +

하지만 요소가 적절히 중첩되었는지 확인할 필요가 있습니다: 위의 예제에서 우리는 <p> 요소를 먼저 열었고, 그 다음 strong을 열었기 때문에 strong 요소를 먼저 닫고, 다음으로 p를 닫아야 합니다. 다음은 잘못된 예제 입니다:

+ +
<p>내 고양이는 <strong>아주 고약해.</p></strong>
+ +

요소들이 적절히 열고 닫혀야 서로가 깔끔하게 안쪽이나 바깥쪽에 있게 됩니다. 만약 이렇게 겹치게 되면, 웹 브라우저는 여러분이 무엇을 표현하려고 했었는지 추측을 해서 화면에 보여주겠지만, 여러분이 의도한 것과 다르게 보여질 수 있습니다. 그러니까 이렇게 하지 마세요!

+ +

빈 요소

+ +

어떤 요소들은 내용을 갖지 않습니다, 그리고 이것을 빈 요소(empty elements)라고 합니다. {{htmlelement("img")}} 요소는 이미 우리 HTML 코드에 있습니다.

+ +
<img src="images/firefox-icon.png" alt="My test image">
+ +

이 요소는 두 개의 속성을 포함하고 있으나 닫는 </img> 태그가 없습니다. 이미지 요소는 효과를 주기 위해 컨텐츠를 감싸지 않기 때문입니다. 이 요소의 목적은 HTML 페이지에서 이미지가 나타날 위치에 이미지를 끼워 넣는 것입니다.

+ +

HTML 문서 해부

+ +

각 HTML 요소의 기본적인 내용들은 살펴봤지만, 그것만으로는 별로 유용하지 않습니다. 이제 각 요소들이 어떻게 전체 HTML 페이지를 구성하는지 살펴볼 차례입니다. index.html 예제(파일들 다루기 편에서 처음 봤던)에 넣은 코드를 다시 살펴봅시다:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <img src="images/firefox-icon.png" alt="My test image">
+  </body>
+</html>
+ +

살펴볼 것들:

+ + + +

이미지

+ +

{{htmlelement("img")}} 요소를 다시 살펴보도록 합시다:

+ +
<img src="images/firefox-icon.png" alt="My test image">
+ +

앞에서 설명한 것처럼 이 요소는 이미지가 나타나야 할 위치에 이미지를 끼워 넣습니다. 이미지 파일의 경로를 포함하는 src (source) 속성을 통해 이러한 일을 합니다.

+ +

 alt (alternative) 속성도 존재합니다. — 이 속성에는 다음과 같은 이유로 이미지를 볼 수 없는 사용자들을 위한 설명문(descriptive text)을 지정할 수 있습니다.:

+ +
    +
  1. 시각 장애자인 경우. 시각 장애가 심한 사용자들은 alt 텍스트(대체 텍스트)를 읽어주는 스크린 리더라는 도구를 자주 사용합니다.
    2. +
  2. 무언가 잘못되어서 이미지를 표시할 수 없는 경우. 예를 들면, src 속성 안의 경로를 일부러 틀리게 변경해보세요. 저장한 후에 페이지를 다시 열면, 이미지가 표시되어야할 위치에 다음과 같은 것을 보게 될 것입니다.
    3. +
+ +

+ +

alt 텍스트에서 핵심 단어는 "설명적인 문자(descriptive text)" 입니다. 여러분이 작성하는 alt 텍스트는 독자에게 이미지가 전달하는 어떤 것에 대해 좋은 아이디어를 가지기에 충분한 정보를 제공해야 합니다. 이 예제에서 "My test image"라는 현재의 텍스트는 전혀 좋지 않습니다. Firefox 로고에 대해서는 "파이어폭스 로고: 지구를 둘러싼 타오르는 여우"가 훨씬 나은 대안이될 수 있습니다.

+ +

지금 여러분의 이미지를 위한 더 나은 alt 텍스트를 만들어보세요.

+ +
+

노트: 접근성에 대한 더 많은 것은 MDN의 페이지 접근성 시작하기에서 찾아보세요.

+
+ +

문자 나타내기

+ +

여기에서는 문자를 나타내기 위해 사용하는 몇 개의 기본적인 HTML 엘리먼트를 다룰 것입니다.

+ +

제목

+ +

제목 요소는 여러분이 내용의 특정 부분이 제목 또는 내용의 하위 제목임을 구체화 할 수 있게 해줍니다. 책에 중심 제목이 있고 그 다음 각각의 장에 제목을 가지고, 그리고 그 안에 부제가 있는 것과 같은 방식으로 HTML 문서도 제목들을 갖습니다. HTML 은 여섯 단계의 제목을 갖고, {{htmlelement("h1")}}–{{htmlelement("h6")}} 여러분은 아마 3-4 만을 주로 사용하게 될겁니다:

+ +
<h1>My main title</h1>
+<h2>My top level heading</h2>
+<h3>My subheading</h3>
+<h4>My sub-subheading</h4>
+ +

지금 한번 해보세요, 여러분의 HTML 페이지에 있는 {{htmlelement("img")}} 요소 위에 적당한 제목을 추가합시다.

+ +

문단

+ +

위에서 설명했듯이, {{htmlelement("p")}} 요소는 문자의 문단을 포함하기 위한 것입니다; 일반적인 문자 내용을 나타낼 때 많이 사용하게 될 것입니다:

+ +
<p>This is a single paragraph</p>
+ +

간단한 문자 (웹사이트의 외관은 어떻게 할까요? 에서 보셨을겁니다)를 하나 또는 몇 개의 문단에 추가하고, <img> 요소 바로 아래 둡시다.

+ +

목록

+ +

많은 웹의 내용은 목록이기 때문에, HTML은 이것을 위한 특별한 요소를 가지고 있습니다. 목록을 나타내는 것은 항상 최소 두 개의 요소로 구성됩니다. 가장 일반적인 목록의 종류는 순서가 있는 것과 순서 없는 것이 있습니다.

+ +
    +
  1. 순서 없는 목록은 쇼핑 목록과 같이 항목의 순서에 관계가 없는 목록을 위한 것입니다. {{htmlelement("ul")}} 요소로 둘러 쌓여 있습니다.
    2. +
  2. 순서 있는 리스트는 조리법처럼 항목의 순서가 중요한 목록을 위한 것입니다. {{htmlelement("ol")}} 요소로 둘러 쌓여 있습니다.
    3. +
+ +

목록의 각 항목은 {{htmlelement("li")}} (목록 항목) 요소 안에 놓여야 합니다.

+ +

그러니까 예를 들면, 만약 아래 문단의 한 부분을 목록으로 분리하길 원한다면:

+ +
<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>
+ +

이렇게 해볼 수 있습니다:

+ +
<p>At Mozilla, we’re a global community of</p>
+
+<ul>
+  <li>technologists</li>
+  <li>thinkers</li>
+  <li>builders</li>
+</ul>
+
+<p>working together ... </p>
+ +

여러분의 예시 페이지에서 순서 있는 목록과 순서 없는 목록을 추가해보세요.

+ +

연결

+ +

연결은 아주 중요합니다 — 이것은 웹을 웹으로 만들어줍니다. 연결을 하기 위해, 간단한 요소를 사용할 필요가 있습니다 — {{htmlelement("a")}} — a 는 "anchor" 의 약자입니다. 문장 안의 어떤 단어를 링크로 만들기 위해, 아래의 순서를 따르시면 됩니다:

+ +
    +
  1. 어떤 단어를 선택하세요. "Mozilla Manifesto" 를 선택하겠습니다.
    2. +
  2. 문자를 <a> 요소로 감쌉니다, 이렇게요: + 
    <a>Mozilla Manifesto</a>
    +
    3. +
  3. <a> 요소에 href 속성을 줍니다, 이렇게요: + 
    <a href="">Mozilla Manifesto</a>
    +
    4. +
  4. 이 속성의 값에 여러분이 연결하길 원하는 웹 주소를 채웁니다.: + 
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
    +
    5. +
+ +

만약 웹 주소의 시작부분에 프로토콜이라 불리는 https:// 또는 http:// 부분을 빼먹으셨다면 예상하지 못한 결과를 얻을 것입니다. 이렇게 링크를 만든 후에, 원하는 곳으로 이동하는지 클릭해보세요.

+ +
+

처음에는 href 라는 속성 이름이 꽤 어렵게 보일수도 있습니다. 만약 기억하기가 어려우시다면, 이것은 hypertext reference(하이퍼 텍스트 참조)를 나타낸다는 것을 기억하세요.

+
+ +

아직 여러분의 페이지에 링크를 추가하지 않으셨다면, 지금 추가해보세요.

+ +

마무리

+ +

이 글의 모든 설명을 따라오셨다면, 이와 같이 보이는 페이지가 될 겁니다. (여기서도  볼 수 있습니다):
+
+ A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

+ +

잘 안 된다면, 여러분의 코드를 Github에 있는 예제 코드를 비교해 볼 수 있습니다. 

+ +

여기서, 우리는 HTML의 겉을 살짝 맛봤습니다. 더 알아보기 위해, HTML 배우기 페이지로 가보세요.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}

+ + + +

이번 모듈에서는

+ + diff --git "a/files/ko/learn/getting_started_with_the_web/html_\352\270\260\353\263\270/index.html" "b/files/ko/learn/getting_started_with_the_web/html_\352\270\260\353\263\270/index.html" deleted file mode 100644 index 530f3fe11f..0000000000 --- "a/files/ko/learn/getting_started_with_the_web/html_\352\270\260\353\263\270/index.html" +++ /dev/null @@ -1,234 +0,0 @@ ---- -title: HTML 기본 -slug: Learn/Getting_started_with_the_web/HTML_기본 -tags: - - Beginner - - HTML - - Learn - - Web - - 'l10n:priority' - - 입문자 -translation_of: Learn/Getting_started_with_the_web/HTML_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}
- -
-

HTML(Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. 예를 들면, 컨텐트는 여러 개의 문단, 글 머리 목록이 구조화된 것이거나 사진이나 데이터 테이블일 수도 있습니다. 제목과 같이 이 글은 HTML과 그 기능에 대한 기본적인 이해를 제공할 것입니다.

-
- -

그래서 HTML은 무엇일까요?

- -

HTML 은 프로그래밍 언어가 아닙니다;  컨텐츠의 구조를 정의하는 마크업 언어입니다. HTML은 컨텐츠의 서로 다른 부분들을 씌우거나(wrap) 감싸서(enclose) 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 요소({{Glossary("element", "elements")}})로 이루어져 있습니다. {{Glossary("tag", "tags")}}로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크(hyperlink)하거나 단어들을 이탤릭체로 표시하고 글씨체를 크게 또는 작게 만드는 등의 일을 할 수 있습니다. 예를 들어, 다음과 같은 컨텐츠에 대해:

- -
내 고양이는 고약해
-
- -

그 한 줄의 문장이 독립적인 구문이길 원한다면, 문단 태그(paragraph tags)로 둘러쌈으로해서 그것이 하나의 문단임을 명시할 수 있습니다:

- -
<p>내 고양이는 고약해</p>
- -

HTML 요소 분석

- -

이 문단 요소에 대해 조금 더 탐구해봅시다.

- -

- -

이 요소의 주요 부분은 이렇습니다:

- -
    -
  1. 여는 태그(opening tag): 이것은 요소의 이름으로 구성되고 (여기에서는 p), 여닫는 꺾쇠괄호로 감싸집니다. 이것은 요소가 시작되는 곳, 또는 효과를 시작하는 곳임을 나타냅니다 — 이 예제에서는 문단이 시작되는 위치를 나타냅니다.
    2. -
  2. 닫는 태그(closing tag): 이것은 여는 태그와 같지만, 요소의 이름 앞에 전방향 슬래시가 포함된다는 점이 다릅니다. 이것은 요소의 끝을 나타냅니다 — 이 예제에서는 문단이 끝나는 위치를 나타냅니다. 초보자가 가장 흔히 범하는 오류 중 하나가 닫는 태그를 쓰지 않는 것으로 이상한 결과가 표시됩니다.
    3. -
  3. 컨텐츠(content): 이것은 요소의 내용(content)으로 이 예제에서는 그냥 텍스트입니다.
    4. -
  4. 요소(element): 요소는 여는 태그와 닫는 태그, 그리고 컨텐츠로 이루어집니다.
    5. -
- -

요소는 속성도 가질 수 있는데, 다음과 같이 사용합니다:

- -

- -

속성은 실제 컨텐츠로 표시되길 원하지 않는 추가적인 정보를 담고 있습니다. 이 예제에서, class 속성을 이용해 나중에 해당 요소를 특정해 스타일이나 다른 정보를 설정할 때 사용할 수 있는 식별자를 지정할 수 있습니다.

- -

속성이 항상 가져야 하는 것:

- -
    -
  1. 요소 이름 (또는 요소가 하나 이상 속성을 이미 가지고 있다면 이전 속성)과 속성 사이에 공백이 있어야 합니다.
    2. -
  2. 속성 이름 뒤에는 등호(=)가 와야 합니다.
    3. -
  3. 속성 값의 앞 뒤에 열고 닫는 인용부호(" 또는 ')가 있어야 합니다.
    4. -
- -

요소 중첩

- -

여러분은 요소를 다른 요소의 안에 놓을 수 있습니다 — 이것을 중첩(nesting)이라고 부릅니다. 우리 고양이는 아주 고약하다라고 표시하길 원한다면, 단어를 강조하는 용도로 사용하는{{htmlelement("strong")}} 요소로 "아주"를 감싸면 됩니다:

- -
<p>내 고양이는 <strong>아주</strong> 고약해.</p>
- -

하지만 요소가 적절히 중첩되었는지 확인할 필요가 있습니다: 위의 예제에서 우리는 <p> 요소를 먼저 열었고, 그 다음 strong을 열었기 때문에 strong 요소를 먼저 닫고, 다음으로 p를 닫아야 합니다. 다음은 잘못된 예제 입니다:

- -
<p>내 고양이는 <strong>아주 고약해.</p></strong>
- -

요소들이 적절히 열고 닫혀야 서로가 깔끔하게 안쪽이나 바깥쪽에 있게 됩니다. 만약 이렇게 겹치게 되면, 웹 브라우저는 여러분이 무엇을 표현하려고 했었는지 추측을 해서 화면에 보여주겠지만, 여러분이 의도한 것과 다르게 보여질 수 있습니다. 그러니까 이렇게 하지 마세요!

- -

빈 요소

- -

어떤 요소들은 내용을 갖지 않습니다, 그리고 이것을 빈 요소(empty elements)라고 합니다. {{htmlelement("img")}} 요소는 이미 우리 HTML 코드에 있습니다.

- -
<img src="images/firefox-icon.png" alt="My test image">
- -

이 요소는 두 개의 속성을 포함하고 있으나 닫는 </img> 태그가 없습니다. 이미지 요소는 효과를 주기 위해 컨텐츠를 감싸지 않기 때문입니다. 이 요소의 목적은 HTML 페이지에서 이미지가 나타날 위치에 이미지를 끼워 넣는 것입니다.

- -

HTML 문서 해부

- -

각 HTML 요소의 기본적인 내용들은 살펴봤지만, 그것만으로는 별로 유용하지 않습니다. 이제 각 요소들이 어떻게 전체 HTML 페이지를 구성하는지 살펴볼 차례입니다. index.html 예제(파일들 다루기 편에서 처음 봤던)에 넣은 코드를 다시 살펴봅시다:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>My test page</title>
-  </head>
-  <body>
-    <img src="images/firefox-icon.png" alt="My test image">
-  </body>
-</html>
- -

살펴볼 것들:

- - - -

이미지

- -

{{htmlelement("img")}} 요소를 다시 살펴보도록 합시다:

- -
<img src="images/firefox-icon.png" alt="My test image">
- -

앞에서 설명한 것처럼 이 요소는 이미지가 나타나야 할 위치에 이미지를 끼워 넣습니다. 이미지 파일의 경로를 포함하는 src (source) 속성을 통해 이러한 일을 합니다.

- -

 alt (alternative) 속성도 존재합니다. — 이 속성에는 다음과 같은 이유로 이미지를 볼 수 없는 사용자들을 위한 설명문(descriptive text)을 지정할 수 있습니다.:

- -
    -
  1. 시각 장애자인 경우. 시각 장애가 심한 사용자들은 alt 텍스트(대체 텍스트)를 읽어주는 스크린 리더라는 도구를 자주 사용합니다.
    2. -
  2. 무언가 잘못되어서 이미지를 표시할 수 없는 경우. 예를 들면, src 속성 안의 경로를 일부러 틀리게 변경해보세요. 저장한 후에 페이지를 다시 열면, 이미지가 표시되어야할 위치에 다음과 같은 것을 보게 될 것입니다.
    3. -
- -

- -

alt 텍스트에서 핵심 단어는 "설명적인 문자(descriptive text)" 입니다. 여러분이 작성하는 alt 텍스트는 독자에게 이미지가 전달하는 어떤 것에 대해 좋은 아이디어를 가지기에 충분한 정보를 제공해야 합니다. 이 예제에서 "My test image"라는 현재의 텍스트는 전혀 좋지 않습니다. Firefox 로고에 대해서는 "파이어폭스 로고: 지구를 둘러싼 타오르는 여우"가 훨씬 나은 대안이될 수 있습니다.

- -

지금 여러분의 이미지를 위한 더 나은 alt 텍스트를 만들어보세요.

- -
-

노트: 접근성에 대한 더 많은 것은 MDN의 페이지 접근성 시작하기에서 찾아보세요.

-
- -

문자 나타내기

- -

여기에서는 문자를 나타내기 위해 사용하는 몇 개의 기본적인 HTML 엘리먼트를 다룰 것입니다.

- -

제목

- -

제목 요소는 여러분이 내용의 특정 부분이 제목 또는 내용의 하위 제목임을 구체화 할 수 있게 해줍니다. 책에 중심 제목이 있고 그 다음 각각의 장에 제목을 가지고, 그리고 그 안에 부제가 있는 것과 같은 방식으로 HTML 문서도 제목들을 갖습니다. HTML 은 여섯 단계의 제목을 갖고, {{htmlelement("h1")}}–{{htmlelement("h6")}} 여러분은 아마 3-4 만을 주로 사용하게 될겁니다:

- -
<h1>My main title</h1>
-<h2>My top level heading</h2>
-<h3>My subheading</h3>
-<h4>My sub-subheading</h4>
- -

지금 한번 해보세요, 여러분의 HTML 페이지에 있는 {{htmlelement("img")}} 요소 위에 적당한 제목을 추가합시다.

- -

문단

- -

위에서 설명했듯이, {{htmlelement("p")}} 요소는 문자의 문단을 포함하기 위한 것입니다; 일반적인 문자 내용을 나타낼 때 많이 사용하게 될 것입니다:

- -
<p>This is a single paragraph</p>
- -

간단한 문자 (웹사이트의 외관은 어떻게 할까요? 에서 보셨을겁니다)를 하나 또는 몇 개의 문단에 추가하고, <img> 요소 바로 아래 둡시다.

- -

목록

- -

많은 웹의 내용은 목록이기 때문에, HTML은 이것을 위한 특별한 요소를 가지고 있습니다. 목록을 나타내는 것은 항상 최소 두 개의 요소로 구성됩니다. 가장 일반적인 목록의 종류는 순서가 있는 것과 순서 없는 것이 있습니다.

- -
    -
  1. 순서 없는 목록은 쇼핑 목록과 같이 항목의 순서에 관계가 없는 목록을 위한 것입니다. {{htmlelement("ul")}} 요소로 둘러 쌓여 있습니다.
    2. -
  2. 순서 있는 리스트는 조리법처럼 항목의 순서가 중요한 목록을 위한 것입니다. {{htmlelement("ol")}} 요소로 둘러 쌓여 있습니다.
    3. -
- -

목록의 각 항목은 {{htmlelement("li")}} (목록 항목) 요소 안에 놓여야 합니다.

- -

그러니까 예를 들면, 만약 아래 문단의 한 부분을 목록으로 분리하길 원한다면:

- -
<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>
- -

이렇게 해볼 수 있습니다:

- -
<p>At Mozilla, we’re a global community of</p>
-
-<ul>
-  <li>technologists</li>
-  <li>thinkers</li>
-  <li>builders</li>
-</ul>
-
-<p>working together ... </p>
- -

여러분의 예시 페이지에서 순서 있는 목록과 순서 없는 목록을 추가해보세요.

- -

연결

- -

연결은 아주 중요합니다 — 이것은 웹을 웹으로 만들어줍니다. 연결을 하기 위해, 간단한 요소를 사용할 필요가 있습니다 — {{htmlelement("a")}} — a 는 "anchor" 의 약자입니다. 문장 안의 어떤 단어를 링크로 만들기 위해, 아래의 순서를 따르시면 됩니다:

- -
    -
  1. 어떤 단어를 선택하세요. "Mozilla Manifesto" 를 선택하겠습니다.
    2. -
  2. 문자를 <a> 요소로 감쌉니다, 이렇게요: - 
    <a>Mozilla Manifesto</a>
    -
    3. -
  3. <a> 요소에 href 속성을 줍니다, 이렇게요: - 
    <a href="">Mozilla Manifesto</a>
    -
    4. -
  4. 이 속성의 값에 여러분이 연결하길 원하는 웹 주소를 채웁니다.: - 
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
    -
    5. -
- -

만약 웹 주소의 시작부분에 프로토콜이라 불리는 https:// 또는 http:// 부분을 빼먹으셨다면 예상하지 못한 결과를 얻을 것입니다. 이렇게 링크를 만든 후에, 원하는 곳으로 이동하는지 클릭해보세요.

- -
-

처음에는 href 라는 속성 이름이 꽤 어렵게 보일수도 있습니다. 만약 기억하기가 어려우시다면, 이것은 hypertext reference(하이퍼 텍스트 참조)를 나타낸다는 것을 기억하세요.

-
- -

아직 여러분의 페이지에 링크를 추가하지 않으셨다면, 지금 추가해보세요.

- -

마무리

- -

이 글의 모든 설명을 따라오셨다면, 이와 같이 보이는 페이지가 될 겁니다. (여기서도  볼 수 있습니다):
-
- A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

- -

잘 안 된다면, 여러분의 코드를 Github에 있는 예제 코드를 비교해 볼 수 있습니다. 

- -

여기서, 우리는 HTML의 겉을 살짝 맛봤습니다. 더 알아보기 위해, HTML 배우기 페이지로 가보세요.

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}

- - - -

이번 모듈에서는

- - diff --git a/files/ko/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/ko/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..58ec16a8d9 --- /dev/null +++ b/files/ko/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,75 @@ +--- +title: 기본 소프트웨어 설치하기 +slug: Learn/Getting_started_with_the_web/기본_소프트웨어_설치하기 +tags: + - Beginner + - Browser + - Learn + - Setup + - Tools + - WebMechanics + - 'l10n:priority' +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
+ +
+

기본 소프트웨어 설치하기에서는 간단한 웹 개발을 하기 위해 어떤 도구가 필요하고, 어떻게 설치할 수 있는지 보여드립니다.

+
+ +

전문가들이 사용하는 도구는 뭔가요?

+ + + +

지금 당장 필요한 도구는 뭔가요?

+ +

전문가가 사용하는 리스트가 두렵게 다가올지도 모르지만, 다행히도 여러분은 저런 대부분의 것들을 모르더라도 웹 개발을 시작하실 수 있습니다. 이 글을 통해 여러분이 최소한의 도구(텍스트 편집기와 최신 웹 브라우저 같은)를 마련할 수 있도록 할 것입니다.

+ +

텍스트 편집기 설치하기

+ +

지금도 기본적인 텍스트 편집기는 아마 갖고 계실겁니다. Windows는 기본으로 메모장을, macOS는 TextEdit을 포함하고 있습니다. Linux는 배포판마다 다르지만, Ubuntu는 gedit을 가지고 있습니다.

+ +

웹 개발을 위해서라면 메모장이나 TextEdit보다는 좋은걸 써야 할겁니다. Brackets를 추천드립니다. 무려 무료인데다가(쫭쫭) 실시간 미리보기와 코드 힌트도 제공하기 때문이에요!

+ +

최신 웹 브라우저 설치하기

+ +

이제, 코드를 테스트할 데스크탑 웹 브라우저를 몇 가지 설치할겁니다. 다음 목록에서 여러분의 운영체제를 고른 후 원하시는 브라우저의 링크로 들어가 설치하세요.

+ + + +

다음으로 진행하기 전에, 테스트를 위해 최소 두 개 이상의 브라우저를 설치해야 합니다.

+ +

로컬 웹 서버 설치하기

+ +

어떤 예제는 제대로 작동하려면 웹 서버가 필요합니다. 로컬 테스트 서버 설치하기에서 설치하는 방법을 알아보세요!

+ +

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

+ +

이번 과정에서는

+ + diff --git a/files/ko/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/ko/learn/getting_started_with_the_web/publishing_your_website/index.html new file mode 100644 index 0000000000..df2016e530 --- /dev/null +++ b/files/ko/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -0,0 +1,176 @@ +--- +title: 웹사이트 출판하기 +slug: Learn/Getting_started_with_the_web/웹사이트_출판하기 +translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +--- +

{{LearnSidebar}}

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

+ +
+

일단 여러분의 웹사이트를 만들기 위한 코드 작성과 파일 구성을 끝내셨다면, 이 모든 것을 온라인에 올려 사람들이 찾을 수 있게 할 필요가 있습니다. 이 글은 어떻게 최소한의 노력으로 간단한 예시 코드를 온라인에서 얻을 수 있는지 보여줍니다.

+
+ +

옵션들은 뭐가 있나요?

+ +

웹사이트를 출판하는 것은 간단한 것이 아닙니다, 주된 이유는 이것에 아주 많은 다른 방법이 있다는 것입니다. 이 글에서는 모든 가능한 방법을 문서화 하는 것이 목적이 아닙니다. 대신에, 초심자의 관점에서 세가지 큰 전략에 대한 장단점에 대해 이야기 할 것입니다, 그리고나서 현재로써 적합할 하나의 방법을 보여드릴 것입니다.

+ +

호스팅과 도메인 이름 얻기

+ +

만약 여러분이 출판된 웹사이트에 대한 모든 컨트롤를 원한다면, 이것들을 구매해야 할 것입니다:

+ + + +

많은 전문적인 웹사이트들은 이 방법으로 온라인에 진출합니다.

+ +

게다가, 여러분은 서버로 웹사이트 파일들을 실제로 전송하기 위한 파일 전송 프로토콜 (FTP) 프로그램 (자세한 내용은 얼마나 드나요: 소프트웨어 에서 확인하세요) 이 필요할 것입니다. FTP 프로그램은 아주 다양합니다, 하지만 일반적으로 호스팅 회사에 의해 제공된 정보 (예로 사용자 이름, 비밀번호, 호스트 이름) 를 사용해 여러분의 웹서버에 로그인을 해야 합니다. 그러면 프로그램은 여러분의 로컬 파일들과 웹 서버의 파일을 두 창에서 보여주므로, 그것들을 외부로 전송하거나 다시 돌려 놓을 수 있습니다:

+ +

+ +

호스팅과 도메인을 찾는 팁

+ + + +

GitHub 또는 Dropbox 같은 온라인 도구 사용하기

+ +

어떤 도구들은 여러분이 여러분의 웹사이트를 온라인에 출판할 수 있게 해줍니다:

+ + + +

대부분의 호스팅과 다르게, 많은 도구들은 일반적으로 무료이지만, 여러분은 제한된 기능들만 사용할 수 있습니다.

+ +

Thimble 같은 웹-기반 IDE 사용하기

+ +

HTML, CSS 그리고 JavaScript 를 입력할 수 있게 하고 웹사이트로 만들어 질 때 코드의 결과를 보여주는 웹사이트 개발 환경을 대행하는 웹 앱은 많습니다 — 모든것이 한 브라우저 탭 안에 있습니다! 일반적으로 이러한 도구들을 이야기하기는 매우 쉽고, 배우기에 최고이고, 무료이고 (기본적 기능에대해), 그들은 여러분의 특정 웹 주소에 있는 만들어진 페이지를 관리합니다. 하지만, 그 기본적인 기능들은 매우 한정적이고, 그 앱들은 보통 자원들 (이미지 같은) 을 위한 관리 공간을 제공하지 않습니다.

+ +

여기 몇 개의 예시들을 실행해보시고, 어떤것이 제일 좋은지 확인해보세요:

+ + + +

+ +

GitHub 를 통한 출판

+ +

이제 어떻게 GitHub 페이지를 통해 여러분의 사이트를 출판할 수 있는지 알아보도록 합시다. 이게 여러분의 사이트를 출판하는데 유일한 방법이거나 최고의 방법이라고 이야기 하지는 않을 것입니다, 하지만 이것은 무료이고, 꽤 간단하고, 앞으로 유용할 여러분이 알게 될 몇 가지 새로운 기술도 다룰 것입니다.

+ +

기본 설치

+ +
    +
  1. 먼저, 여러분의 장치에 Git 을 설치 하세요. 이것은 GitHub 이 위에서 작동하게 되는 기초가 되는 버전 컨트롤 시스템 소프트웨어 입니다.
    2. +
  2. 다음으로, GitHub 계정을 위해 가입하세요. 간단하고 쉽습니다.
    3. +
  3. 가입을 하셨다면, github.com 에 여러분의 유저 이름과 암호로 로그인하세요.
    4. +
  4. 그리고나서, 여러분의 파일들이 들어가게될 새로운 repo 를 생성해야 합니다. GitHub 홈페이지의 오른쪽 상단에 있는 플러스 (+) 를 클릭하고, New Repository 를 선택하세요.
    5. +
  5. 이 페이지에서, Repository name 박스 안에, username.github.io 를 입력하세요, username 가 있는 곳이 여러분의 유저 이름입니다. 그러니까 예를 들어, 우리 친구 bobsmith 는 bobsmith.github.io 를 입력할 것입니다.
    6. +
  6. Create repository 를 클릭하세요. 다음과 같은 페이지로 이동하실 겁니다:
    7. +
+ +

GitHub 에 파일 올리기

+ +

이것은 GitHub 에 있는 우리의 repository 를 놓기 위해 사용해볼 커맨드 라인입니다. 커맨드 라인은 파일을 생성하거나 프로그램을 실행하는 것 같은 일을 하기 위해 유저 인터페이스 안에서 클릭을 하는 것 대신 명령어를 입력하는 창입니다. 이렇게 생긴 것입니다:

+ +

+ +
+

노트: 만약 커맨드라인이 불편하시다면, 같은 일을 하기 위해서 Git graphical user interface 를 사용하는것도 고려해 볼 수 있습니다.

+
+ +

모든 운영 체제는 커맨드 라인 도구를 갖습니다:

+ + + +

처음에는 좀 두려우실 수 있지만, 걱정하지마세요 — 기본적인 것들은 금방 익히실 수 있을 것입니다. 무언가를 하기 위해선 명령어를 입력하고 엔터를 누르는 것으로 컴퓨터에게 알려줘야합니다.

+ +
    +
  1. 커맨드 라인을 여러분의 test-site 폴더로 향하게 합니다 (또는 여러분의 웹사이트가 포함된 어디든지). 그러기 위해선, cd 명령을 사용합니다 (말하자면 "change directory"). 여기 만약 test-site 폴더 안에 여러분의 웹사이트를 놓으셨다면 여러분이 입력해야 하는 것이 있습니다: + + 
    cd Desktop/test-site
    +
    2. +
  2. 커맨드 라인이 여러분의 웹사이트 폴더 안을 가리킬 때, 그 폴더를 git repository 가 되도록 git 도구에게 알려주는 다음의 명령을 입력하세요: + 
    git init
    +
    3. +
  3. 다음으로, GitHub 사이트로 돌아가세요. 현재 페이지에서, you are interested in the section …or push an existing repository from the command line. 이 구역에 나열된 두 코드를 보게 되실 겁니다. 첫 번째 줄의 코드 전체를 복사하고, 커맨드 라인에 붙여넣은 다음, 엔터를 누르세요. 그 명령은 이렇게 보일 것입니다: + 
    git remote add origin https://github.com/bobsmith/bobsmith.github.io.git
    +
    4. +
  4. 다음으로, 다음 두 명령어를 입력하고, 각 명령마다 엔터를 누릅니다. 이것은 GitHub 에 코드를 올릴 준비를 하는 것이고, Git 에게 그 파일들을 관리하도록 요청합니다. + 
    git add --all
+git commit -m "adding my files to my repository"
    +
    5. +
  5. 마지막으로, GitHub 웹 페이지로 가서 3단계에서 봤던 두 개의 명령어중 두 번째 줄을 터미널에 입력하는 것으로 코드를 푸시합니다: + 
    git push -u origin master
    +
    6. +
  6. 이제 새 브라우저 탭 (username.github.io) 에서 여러분의 GitHub 페이지의 웹 주소로 갈 때, 여러분의 사이트를 온라인에서 보실 수 있습니다! 친구들에게 메일을 보내서 여러분의 실력을 뽐내보세요.
    7. +
+ +
+

노트: 만약 막히셨다면, GitHub Pages 홈페이지 또한 아주 도움이 될 것입니다.

+
+ +

더 많은 GitHub 이해

+ +

만약 여러분이 테스트 사이트에 더 많은 변화를 주고 GitHub에 그것들을 업로드하길 원하신다면, 이전에 하신것 처럼 간단하게 파일에 변화를 주면 됩니다. 그리고나서, GitHub에 변화를 푸시하기 위해 다음 명령어를 입력 (각 명령 다음에 엔터누르기) 해야 합니다:

+ +
git add --all
+git commit -m 'another commit'
+git push
+ +

another commit 대신에 여러분이 막 변경했던 것을 설명할 수 있는 더 적합한 메시지로 바꾸세요.

+ +

우리는 Git 의 겉을 살짝 건드려 보았습니다. 더 많이 배우시려면, GitHub Help 사이트 에서 시작하세요.

+ +

마무리

+ +

이 지점에서, 특정 웹 주소에서 여러분의 예시 웹사이트를 사용하실 수 있을 것입니다. 수고하셨습니다!

+ +

+ +

 

+ +

더 읽을거리

+ + + +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

+ +

 

+ +

In this module

+ + + +

 

+ +

 

diff --git "a/files/ko/learn/getting_started_with_the_web/\352\270\260\353\263\270_\354\206\214\355\224\204\355\212\270\354\233\250\354\226\264_\354\204\244\354\271\230\355\225\230\352\270\260/index.html" "b/files/ko/learn/getting_started_with_the_web/\352\270\260\353\263\270_\354\206\214\355\224\204\355\212\270\354\233\250\354\226\264_\354\204\244\354\271\230\355\225\230\352\270\260/index.html" deleted file mode 100644 index 58ec16a8d9..0000000000 --- "a/files/ko/learn/getting_started_with_the_web/\352\270\260\353\263\270_\354\206\214\355\224\204\355\212\270\354\233\250\354\226\264_\354\204\244\354\271\230\355\225\230\352\270\260/index.html" +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: 기본 소프트웨어 설치하기 -slug: Learn/Getting_started_with_the_web/기본_소프트웨어_설치하기 -tags: - - Beginner - - Browser - - Learn - - Setup - - Tools - - WebMechanics - - 'l10n:priority' -translation_of: Learn/Getting_started_with_the_web/Installing_basic_software ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
- -
-

기본 소프트웨어 설치하기에서는 간단한 웹 개발을 하기 위해 어떤 도구가 필요하고, 어떻게 설치할 수 있는지 보여드립니다.

-
- -

전문가들이 사용하는 도구는 뭔가요?

- - - -

지금 당장 필요한 도구는 뭔가요?

- -

전문가가 사용하는 리스트가 두렵게 다가올지도 모르지만, 다행히도 여러분은 저런 대부분의 것들을 모르더라도 웹 개발을 시작하실 수 있습니다. 이 글을 통해 여러분이 최소한의 도구(텍스트 편집기와 최신 웹 브라우저 같은)를 마련할 수 있도록 할 것입니다.

- -

텍스트 편집기 설치하기

- -

지금도 기본적인 텍스트 편집기는 아마 갖고 계실겁니다. Windows는 기본으로 메모장을, macOS는 TextEdit을 포함하고 있습니다. Linux는 배포판마다 다르지만, Ubuntu는 gedit을 가지고 있습니다.

- -

웹 개발을 위해서라면 메모장이나 TextEdit보다는 좋은걸 써야 할겁니다. Brackets를 추천드립니다. 무려 무료인데다가(쫭쫭) 실시간 미리보기와 코드 힌트도 제공하기 때문이에요!

- -

최신 웹 브라우저 설치하기

- -

이제, 코드를 테스트할 데스크탑 웹 브라우저를 몇 가지 설치할겁니다. 다음 목록에서 여러분의 운영체제를 고른 후 원하시는 브라우저의 링크로 들어가 설치하세요.

- - - -

다음으로 진행하기 전에, 테스트를 위해 최소 두 개 이상의 브라우저를 설치해야 합니다.

- -

로컬 웹 서버 설치하기

- -

어떤 예제는 제대로 작동하려면 웹 서버가 필요합니다. 로컬 테스트 서버 설치하기에서 설치하는 방법을 알아보세요!

- -

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

- -

이번 과정에서는

- - diff --git "a/files/ko/learn/getting_started_with_the_web/\354\233\271\354\202\254\354\235\264\355\212\270_\354\266\234\355\214\220\355\225\230\352\270\260/index.html" "b/files/ko/learn/getting_started_with_the_web/\354\233\271\354\202\254\354\235\264\355\212\270_\354\266\234\355\214\220\355\225\230\352\270\260/index.html" deleted file mode 100644 index df2016e530..0000000000 --- "a/files/ko/learn/getting_started_with_the_web/\354\233\271\354\202\254\354\235\264\355\212\270_\354\266\234\355\214\220\355\225\230\352\270\260/index.html" +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: 웹사이트 출판하기 -slug: Learn/Getting_started_with_the_web/웹사이트_출판하기 -translation_of: Learn/Getting_started_with_the_web/Publishing_your_website ---- -

{{LearnSidebar}}

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

- -
-

일단 여러분의 웹사이트를 만들기 위한 코드 작성과 파일 구성을 끝내셨다면, 이 모든 것을 온라인에 올려 사람들이 찾을 수 있게 할 필요가 있습니다. 이 글은 어떻게 최소한의 노력으로 간단한 예시 코드를 온라인에서 얻을 수 있는지 보여줍니다.

-
- -

옵션들은 뭐가 있나요?

- -

웹사이트를 출판하는 것은 간단한 것이 아닙니다, 주된 이유는 이것에 아주 많은 다른 방법이 있다는 것입니다. 이 글에서는 모든 가능한 방법을 문서화 하는 것이 목적이 아닙니다. 대신에, 초심자의 관점에서 세가지 큰 전략에 대한 장단점에 대해 이야기 할 것입니다, 그리고나서 현재로써 적합할 하나의 방법을 보여드릴 것입니다.

- -

호스팅과 도메인 이름 얻기

- -

만약 여러분이 출판된 웹사이트에 대한 모든 컨트롤를 원한다면, 이것들을 구매해야 할 것입니다:

- - - -

많은 전문적인 웹사이트들은 이 방법으로 온라인에 진출합니다.

- -

게다가, 여러분은 서버로 웹사이트 파일들을 실제로 전송하기 위한 파일 전송 프로토콜 (FTP) 프로그램 (자세한 내용은 얼마나 드나요: 소프트웨어 에서 확인하세요) 이 필요할 것입니다. FTP 프로그램은 아주 다양합니다, 하지만 일반적으로 호스팅 회사에 의해 제공된 정보 (예로 사용자 이름, 비밀번호, 호스트 이름) 를 사용해 여러분의 웹서버에 로그인을 해야 합니다. 그러면 프로그램은 여러분의 로컬 파일들과 웹 서버의 파일을 두 창에서 보여주므로, 그것들을 외부로 전송하거나 다시 돌려 놓을 수 있습니다:

- -

- -

호스팅과 도메인을 찾는 팁

- - - -

GitHub 또는 Dropbox 같은 온라인 도구 사용하기

- -

어떤 도구들은 여러분이 여러분의 웹사이트를 온라인에 출판할 수 있게 해줍니다:

- - - -

대부분의 호스팅과 다르게, 많은 도구들은 일반적으로 무료이지만, 여러분은 제한된 기능들만 사용할 수 있습니다.

- -

Thimble 같은 웹-기반 IDE 사용하기

- -

HTML, CSS 그리고 JavaScript 를 입력할 수 있게 하고 웹사이트로 만들어 질 때 코드의 결과를 보여주는 웹사이트 개발 환경을 대행하는 웹 앱은 많습니다 — 모든것이 한 브라우저 탭 안에 있습니다! 일반적으로 이러한 도구들을 이야기하기는 매우 쉽고, 배우기에 최고이고, 무료이고 (기본적 기능에대해), 그들은 여러분의 특정 웹 주소에 있는 만들어진 페이지를 관리합니다. 하지만, 그 기본적인 기능들은 매우 한정적이고, 그 앱들은 보통 자원들 (이미지 같은) 을 위한 관리 공간을 제공하지 않습니다.

- -

여기 몇 개의 예시들을 실행해보시고, 어떤것이 제일 좋은지 확인해보세요:

- - - -

- -

GitHub 를 통한 출판

- -

이제 어떻게 GitHub 페이지를 통해 여러분의 사이트를 출판할 수 있는지 알아보도록 합시다. 이게 여러분의 사이트를 출판하는데 유일한 방법이거나 최고의 방법이라고 이야기 하지는 않을 것입니다, 하지만 이것은 무료이고, 꽤 간단하고, 앞으로 유용할 여러분이 알게 될 몇 가지 새로운 기술도 다룰 것입니다.

- -

기본 설치

- -
    -
  1. 먼저, 여러분의 장치에 Git 을 설치 하세요. 이것은 GitHub 이 위에서 작동하게 되는 기초가 되는 버전 컨트롤 시스템 소프트웨어 입니다.
    2. -
  2. 다음으로, GitHub 계정을 위해 가입하세요. 간단하고 쉽습니다.
    3. -
  3. 가입을 하셨다면, github.com 에 여러분의 유저 이름과 암호로 로그인하세요.
    4. -
  4. 그리고나서, 여러분의 파일들이 들어가게될 새로운 repo 를 생성해야 합니다. GitHub 홈페이지의 오른쪽 상단에 있는 플러스 (+) 를 클릭하고, New Repository 를 선택하세요.
    5. -
  5. 이 페이지에서, Repository name 박스 안에, username.github.io 를 입력하세요, username 가 있는 곳이 여러분의 유저 이름입니다. 그러니까 예를 들어, 우리 친구 bobsmith 는 bobsmith.github.io 를 입력할 것입니다.
    6. -
  6. Create repository 를 클릭하세요. 다음과 같은 페이지로 이동하실 겁니다:
    7. -
- -

GitHub 에 파일 올리기

- -

이것은 GitHub 에 있는 우리의 repository 를 놓기 위해 사용해볼 커맨드 라인입니다. 커맨드 라인은 파일을 생성하거나 프로그램을 실행하는 것 같은 일을 하기 위해 유저 인터페이스 안에서 클릭을 하는 것 대신 명령어를 입력하는 창입니다. 이렇게 생긴 것입니다:

- -

- -
-

노트: 만약 커맨드라인이 불편하시다면, 같은 일을 하기 위해서 Git graphical user interface 를 사용하는것도 고려해 볼 수 있습니다.

-
- -

모든 운영 체제는 커맨드 라인 도구를 갖습니다:

- - - -

처음에는 좀 두려우실 수 있지만, 걱정하지마세요 — 기본적인 것들은 금방 익히실 수 있을 것입니다. 무언가를 하기 위해선 명령어를 입력하고 엔터를 누르는 것으로 컴퓨터에게 알려줘야합니다.

- -
    -
  1. 커맨드 라인을 여러분의 test-site 폴더로 향하게 합니다 (또는 여러분의 웹사이트가 포함된 어디든지). 그러기 위해선, cd 명령을 사용합니다 (말하자면 "change directory"). 여기 만약 test-site 폴더 안에 여러분의 웹사이트를 놓으셨다면 여러분이 입력해야 하는 것이 있습니다: - - 
    cd Desktop/test-site
    -
    2. -
  2. 커맨드 라인이 여러분의 웹사이트 폴더 안을 가리킬 때, 그 폴더를 git repository 가 되도록 git 도구에게 알려주는 다음의 명령을 입력하세요: - 
    git init
    -
    3. -
  3. 다음으로, GitHub 사이트로 돌아가세요. 현재 페이지에서, you are interested in the section …or push an existing repository from the command line. 이 구역에 나열된 두 코드를 보게 되실 겁니다. 첫 번째 줄의 코드 전체를 복사하고, 커맨드 라인에 붙여넣은 다음, 엔터를 누르세요. 그 명령은 이렇게 보일 것입니다: - 
    git remote add origin https://github.com/bobsmith/bobsmith.github.io.git
    -
    4. -
  4. 다음으로, 다음 두 명령어를 입력하고, 각 명령마다 엔터를 누릅니다. 이것은 GitHub 에 코드를 올릴 준비를 하는 것이고, Git 에게 그 파일들을 관리하도록 요청합니다. - 
    git add --all
-git commit -m "adding my files to my repository"
    -
    5. -
  5. 마지막으로, GitHub 웹 페이지로 가서 3단계에서 봤던 두 개의 명령어중 두 번째 줄을 터미널에 입력하는 것으로 코드를 푸시합니다: - 
    git push -u origin master
    -
    6. -
  6. 이제 새 브라우저 탭 (username.github.io) 에서 여러분의 GitHub 페이지의 웹 주소로 갈 때, 여러분의 사이트를 온라인에서 보실 수 있습니다! 친구들에게 메일을 보내서 여러분의 실력을 뽐내보세요.
    7. -
- -
-

노트: 만약 막히셨다면, GitHub Pages 홈페이지 또한 아주 도움이 될 것입니다.

-
- -

더 많은 GitHub 이해

- -

만약 여러분이 테스트 사이트에 더 많은 변화를 주고 GitHub에 그것들을 업로드하길 원하신다면, 이전에 하신것 처럼 간단하게 파일에 변화를 주면 됩니다. 그리고나서, GitHub에 변화를 푸시하기 위해 다음 명령어를 입력 (각 명령 다음에 엔터누르기) 해야 합니다:

- -
git add --all
-git commit -m 'another commit'
-git push
- -

another commit 대신에 여러분이 막 변경했던 것을 설명할 수 있는 더 적합한 메시지로 바꾸세요.

- -

우리는 Git 의 겉을 살짝 건드려 보았습니다. 더 많이 배우시려면, GitHub Help 사이트 에서 시작하세요.

- -

마무리

- -

이 지점에서, 특정 웹 주소에서 여러분의 예시 웹사이트를 사용하실 수 있을 것입니다. 수고하셨습니다!

- -

- -

 

- -

더 읽을거리

- - - -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

- -

 

- -

In this module

- - - -

 

- -

 

diff --git "a/files/ko/learn/getting_started_with_the_web/\354\233\271\354\235\230_\353\217\231\354\236\221_\353\260\251\354\213\235/index.html" "b/files/ko/learn/getting_started_with_the_web/\354\233\271\354\235\230_\353\217\231\354\236\221_\353\260\251\354\213\235/index.html" deleted file mode 100644 index 009b22ec8f..0000000000 --- "a/files/ko/learn/getting_started_with_the_web/\354\233\271\354\235\230_\353\217\231\354\236\221_\353\260\251\354\213\235/index.html" +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: 웹의 동작 방식 -slug: Learn/Getting_started_with_the_web/웹의_동작_방식 -translation_of: Learn/Getting_started_with_the_web/How_the_Web_works ---- -

{{LearnSidebar}}

- -

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

- -
-

'웹의 동작 방식'은 여러분의 컴퓨터나 폰의 웹 브라우저 안에서 웹페이지를 볼 때 무슨 일이 발생하는지에 대한 간소화된 개념을 제공할 것입니다.

-
- -

이 이론은 단기적으로 봤을 때 웹 코드를 작성하기 위해 필수적인 것은 아니지만, 머지 않아 백그라운드에서 발생하는 것을 이해하는 것으로부터 오는 장점을 얻게 될 것입니다.

- -

클라이언트와 서버

- -

웹에 연결된 컴퓨터는 클라이언트 와 서버 라고 합니다. 그들이 어떻게 상호작용하는가에 대한 간소화된 다이어그램은 다음과 같습니다:

- -

- - - -

도구 상자의 다른 부분들

- -

위에서 설명한 클라이언트와 서버는 모든 내용을 알려주진 않습니다. 많은 다른 부분들이 포함되어 있고, 아래에서 그것들에 대해 설명할 것입니다.

- -

지금은, 웹이 도로라고 상상해봅시다. 도로의 한 쪽 끝은 여러분의 집 같은 클라이언트 입니다. 다른 한 쪽 끝은 여러분이 뭔가를 사길 원하는 상점같은 서버입니다.

- -

- -

클라이언트와 서버에 덧붙여서 우리는 다음 내용들도 알아볼 필요가 있습니다.

- - - -

그래서 정확히 무슨일이 발생할까요?

- -

여러분이 브라우저에 웹 주소를 입력할 때 (우리의 비유에서 상점으로 걸어가는 것과 유사합니다):

- -
    -
  1. 브라우저는 DNS 서버로 가서 웹사이트가 있는 서버의 진짜 주소를 찾습니다 (여러분이 상점의 주소를 찾습니다).
    2. -
  2. 그 다음 브라우저는 서버에게 웹사이트의 사본을 클라이언트에게 보내달라는 HTTP 요청 메세지를 서버로 전송합니다.(상점으로 가서 상품을 주문합니다.) 이 메세지, 그리고 클라이언트와 서버 사이에 전송된 모든 데이터는 TCP/IP 연결을 통해서 전송됩니다.
    3. -
  3. 이 메세지를 받은 서버는 클라이언트의 요청을 승인하고, "200 OK" 메세지를 클라이언트에게 전송합니다. "200 OK"는 "물론이죠. 당신은 웹 사이트를 볼 수 있어요! 여기 있어요" 라는 의미입니다. 그 다음 서버는 웹사이트의 파일들을 데이터 패킷이라 불리는 작은 일련의 덩어리들로 브라우저에 전송하기 시작합니다.(상점은 여러분이 주문한 상품을 전달하고, 여러분은 그것을 집으로 가져갑니다.)
    4. -
  4. 브라우저는 이 작은 덩어리들을 완전한 웹 사이트로 조립하고, 당신에게 보여줍니다. (상품이 당신의 문에 도착합니다. — 새 것이죠, 멋져요!)
    5. -
- -

DNS 설명

- -

실제 웹 주소는 멋지거나, 여러분이 선호하는 웹사이트를 찾기 위한 주소 막대에 입력하는 기억할만한 문자가 아닙니다. 그것은 63.245.217.105 같은 숫자 덩어리입니다.

- -

이것은 IP 주소라고 하고, 웹의 하나뿐인 특정 위치를 나타냅니다. 그러나 기억하기에 쉽지는 않죠? 그것이 도메인 이름 서버가 발명된 이유입니다. 도메인 이름 서버는 여러분이 브라우저에 입력하는 웹주소 ("mozilla.org" 같은) 를 웹사이트의 실제 (IP) 주소에 맞춰주는 특별한 서버입니다. 

- -

웹사이트는 그들의 IP 주소를 통해 직접 접근될 수도 있습니다. 여러분은 IP Checker와 같은 도구에 도메인을 입력해 IP 주소를 찾을 수 있습니다.

- -

패킷 설명

- -

앞서 우리는 서버에서 클라이언트로 전송되는 데이터의 포맷을 설명하기 위해 "패킷" 이라는 용어를 사용했습니다. 이게 무엇을 의미하는 걸까요? 기본적으로, 데이터가 웹을 거쳐서 전송될 때, 수천개의 작은 덩어리들로 전송됩니다. 그래서 다양한 웹 사용자들은 동시에 같은 웹 사이트를 다운로드 할 수 있게 됩니다. 만약 웹 사이트가 하나의 큰 덩어리들로 전송된다면, 오직 한 번에 하나의 사용자만 다운로드 할 수 있을 것입니다. 이는 분명 웹을 매우 비효율적이고, 사용하기에 재미없게 만들 것입니다.

- -

여기도 보세요

- - - -

크레딧

- -

거리 사진: Street composing, by Kevin D.

- -

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

- -

In this module

- - diff --git "a/files/ko/learn/getting_started_with_the_web/\355\214\214\354\235\274\353\223\244_\353\213\244\353\243\250\352\270\260/index.html" "b/files/ko/learn/getting_started_with_the_web/\355\214\214\354\235\274\353\223\244_\353\213\244\353\243\250\352\270\260/index.html" deleted file mode 100644 index 1ed38e8cde..0000000000 --- "a/files/ko/learn/getting_started_with_the_web/\355\214\214\354\235\274\353\223\244_\353\213\244\353\243\250\352\270\260/index.html" +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: 파일 다루기 -slug: Learn/Getting_started_with_the_web/파일들_다루기 -tags: - - Beginner - - CodingScripting - - Files - - Guide - - HTML - - 'l10n:priority' -translation_of: Learn/Getting_started_with_the_web/Dealing_with_files ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
- -
-

웹사이트는 문자, 코드, 스타일시트, 미디어 등 수많은 파일로 구성되어 있습니다. 웹사이트를 제작할 때, 여러분은 이러한 파일들을 여러분의 컴퓨터에 적당한 양식에 맞춰 정리해야 하고, 서로가 잘 작동하는지 확인해야 하며, 최종적으로 서버에 업로드하기 전에 모든 내용이 올바르게 나타나게 해야 합니다. 파일 다루기에서는 여러분의 웹사이트를 위한 적당한 양식을 만들기 위해 여러분이 알아야 하는 몇 가지 문제들에 대해 이야기 할 것입니다.

-
- -

웹사이트는 컴퓨터의 어디에 두어야 할까요?

- -

만약 여러분이 로컬컴퓨터에서 웹사이트에 대해 작업한다면, 퍼블리시된 웹사이트의 파일 구조를 반영하는 하나의 폴더 안에 관련된 모든 파일을 유지하여야 합니다. 이 폴더는 여러분이 원하는 곳이라면 어디에나 둘 수 있지만, 아마도 쉽게 찾을 수 있는 곳에 두어야 할 것입니다. 예를들면 여러분의 바탕화면이나 홈 폴더, 또는 하드 드라이브의 루트(root)가 될 것입니다.

- -
    -
  1. 여러분의 웹사이트 프로젝트를 저장할 장소를 선택하세요. 여기에, web-projects (또는 비슷한 이름의 폴더) 라고 불리는 새 폴더를 생성하세요. 이 곳이 여러분의 웹사이트 프로젝트가 위치할 곳입니다.
    2. -
  2. 이 첫 번째 폴더에, 또다른 폴더를 하나 만들고 첫 번째 웹사이트를 저장하도록 합시다. 그 폴더를 test-site (또는 무언가 더 상상력을 발휘한 다른 이름도 좋습니다) 라고 부릅시다.
    3. -
- -

포장과 공백에 대한 여담

- -

이 글을 통해 알게 되겠지만, 폴더와 파일의 이름을 지을 때 공백 없이 영문 소문자로 짓기를 바랍니다. 이것은 다음과 같은 이유 때문입니다.

- -
    -
  1. 많은 컴퓨터들 -특히 웹 서버- 은 영문 대소문자를 구분합니다. 그래서 예를 들면, 웹사이트에 test-site/MyImage.jpg라는 이미지를 저장해 두었는데 여러분이 다른 파일에서 test-site/myimage.jpg라는 이미지를 호출하는 것은 작동하지 않을 것입니다.
    2. -
  2. 브라우저들과 웹 서버들, 그리고 프로그래밍 언어들은 공백을 일관되게 처리하지 않습니다. 예를 들면, 만약 여러분이 파일 이름에 공백을 사용한다면, 어떤 시스템은 그 파일 이름을 두개의 파일 이름으로 다룰 것입니다. 어떤 서버들은 그 파일 이름의 공백을 "%20"(URIs 안의 공백을 위한 문자 코드)으로 대체하므로 여러분의 모든 링크들을 망가뜨릴 것입니다. 또한, 밑줄문자를 사용하기 보다는 대시(하이픈)으로 단어를 구분하는 것이 훨씬 더 좋습니다.: my-file.html vs. my_file.html.
    3. -
- -

간단히 말하자면 여러분은 파일 이름을 지을 때 붙임표(hyphen)를 사용해야 합니다. 구글 검색 엔진은 하이픈를 단어 구분자로 취급합니다. 그러나 밑줄문자는 단어 구분자로 취급하지 않습니다. 이러한 이유로, 여러분이 폴더와 파일 이름을 지을 때에는 공백이 없는 영문 소문자와 대시로 구분된 단어로 작성하는 습관을 들이는 것이 제일 좋습니다. 적어도 여러분이 무엇을 하는지 알 때까지는요. 그렇게하면 나중에 발생할 문제를 줄일 수 있습니다.

- -

웹사이트는 어떤 구조를 가져야 할까요?

- -

다음으로, 우리의 테스트 사이트가 어떤 구조를 가져야 하는지 살펴 봅시다. 어떤 웹사이트 프로젝트를 만들든지간에 가장 공통으로 가지게 되는 것들은 index HTML 파일과 이미지, 스타일 파일(CSS 파일), 스크립트 파일들을 포함하고 있는 폴더입니다. 이것들을 이제 생성해 봅시다.

- -
    -
  1. index.html: 이 파일은 보통은 홈페이지의 내용을 가지고 있습니다. 다시 말하면, 처음 웹사이트에 방문하면 사람들이 볼 수 있는 텍스트나 이미지이 파일 같은 것입니다. 텍스트 에디터를 사용하여, index.html 라는 새 파일을 생성하고 test-site 폴더 안에 저장하세요.
    2. -
  2. images 폴더: 이 폴더는 여러분의 사이트에 사용할 모든 이미지들을 포함하고 있습니다. test-site 폴더 안에, images 라는 폴더를 생성하세요.
    3. -
  3. styles 폴더: 이 폴더는 여러분의 내용을 보기 좋게 꾸며주기(예를 들어, 문자와 배경색을 세팅하는 것) 위한 CSS 코드를 포함할 것입니다. test-site 폴더 안에, styles 라는 폴더를 생성하세요.
    4. -
  4. scripts 폴더: 이 폴더는 모든 JavaScript 코드를 포함하고 있는데, 이 코드는 여러분의 사이트에 상호작용하는 기능을 추가할 때 사용될 것입니다.예를들면, 클릭할 때 자료를 불러오는 버튼). test-site 폴더 안에, scripts 라는 폴더를 생성하세요.
    5. -
- -
-

참고: Windows 컴퓨터에서는 파일 이름을 보는것에 문제가 생길 수 있습니다, 왜냐하면 윈도우는 기본적으로 알려진 확장자 자동 숨김이라는 귀찮은 옵션을 갖고 있기 때문입니다. 일반적으로 윈도우 익스플로러에서, 폴더 옵션...에서 알려진 확장자 자동 숨김을 선택 해제하는 것으로 이 옵션을 끌 수 있습니다. 여러분의 윈도우 버전을 포함한 더 많은 정보는, 인터넷에서 검색을 해보세요!

-
- -

파일 경로

- -

파일들이 서로 의사소통할 수 있도록 하려면 여러분은 서로에게 각자의 파일 경로를 제공해야 합니다 — 기본적으로 다른 파일이 어디있는지 알 수 있도록 경로를 제공해야하는 것이죠. 이것을 시연해보기 위해, 우리는 index.html파일에 약간의HTML을 작성할 것입니다, 그리고 "웹사이트의 외관은 어떻게 할까요?" 라는 글에서 여러분이 선택한 이미지를 보여주게 할 것입니다.

- -
    -
  1. images폴더 안에 여러분이 선택한 이미지를 복사해 넣으세요.
    2. -
  2. index.html 파일을 열고, 아래의 코드를 보이는 그대로 집어 넣습니다. 지금은 이 모든게 무슨 뜻인지 걱정할 필요가 없습니다 — 본 시리즈에서 나중에 이 구조에 대해 더 자세히 살펴볼 겁니다. - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>My test page</title>
-  </head>
-  <body>
-    <img src="" alt="My test image">
-  </body>
-</html>
    -
    3. -
  3. <img src="" alt="My test image">라는 줄은 페이지 안으로 이미지를 삽입하는 HTML 코드 입니다. 우리는 이미지가 어디에 있는지에 대해 HTML에게 말해줄 필요가 있습니다. 이미지는 images라는 폴더 안에 있는데, 이것은 index.html 파일과 같은 폴더에 있습니다. index.html파일에서 우리 이미지 파일로 파일 구조를 이동하기 위해, 우리가 필요한 파일 경로는 images/your-image-filename입니다. 예를 들어, 우리 이미지가 firefox-icon.png라면, 파일 경로는 images/firefox-icon.png가 됩니다.
    4. -
  4. 여러분의 HTML 코드 중 src="" 의 쌍따옴표 사이에 파일 경로를 입력하세요.
    5. -
  5. HTML 파일을 저장하고나서, 여러분의 웹 브라우저에서 이것을 로드하세요 (파일을 더블 클릭). 여러분의 새 웹페이지가 이미지를 표시하는 것을 보실 수 있습니다!
    6. -
- -

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

- -

파일 경로를 위한 일반적인 규칙들:

- - - -

지금으로선, 이것이 여러분이 알아야 할 전부 입니다.

- -
-

노트: 윈도우 파일 시스템은 기본 슬래시가 아니라 역슬래시를 사용하는 경향이 있습니다. 예시: C:\windows. 이것은 HTML에서 문제가 되지않습니다 — 여러분이 윈도우에서 웹 사이트를 개발하더라도 전방향 슬래시(/)를 코드에 사용해야 합니다.

-
- -

또 무엇을 더 해야할까요?

- -

현재로서는 이것이 전부입니다. 여러분의 폴더 구조는 이와 같이 보여야 합니다:

- -

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

- - - -

In this module

- - diff --git a/files/ko/learn/how_to_contribute/index.html b/files/ko/learn/how_to_contribute/index.html deleted file mode 100644 index 08ee091c24..0000000000 --- a/files/ko/learn/how_to_contribute/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: MDN의 학습 영역에 기여하는 방법 -slug: Learn/How_to_contribute -tags: - - Documentation - - MDN Meta - - 'l10n:priority' - - 가이드 - - 배우기 - - 참여 - - 초보자 -translation_of: Learn/How_to_contribute ---- -
{{LearnSidebar}}
- -

처음으로 또는 심도 깊은 검색을 통해 오셨다면 MDN 학습 영역에 참여하는 데 관심이있는 것 같습니다. 그건 좋은 소식입니다!

- -

이 페이지에서는 MDN의 학습 콘텐츠를 개선하는 데 필요한 모든 것을 찾을 수 있습니다. 얼마나 많은 시간을 가지고 있는지, 초보자이든, 웹 개발자이든, 교사이든, 할 수있는 일이 많이 있습니다.

- -
-

Note: 새로운 학습 영역 기사를 작성하는 방법에 대한 안내서는 사람들이 웹에 대해 알 수 있도록 기사를 작성하는 방법(How to write an article to help people learn about the Web)을 제공합니다.

-
- -

특정 작업 찾기

- -

참여자는 트렐로 보드(Trello board)를 사용하여 작업을 구성합니다. 이렇게 하면 프로젝트에서 수행할 특정 작업을 찾을 수 있습니다. 참여하려면 트렐로 계정을 만들고 Chris Mills에게 보드에 대한 쓰기 액세스 권한을 요청하면 됩니다.

- -

기여는 새로운 것을 즐겁게 배우는 좋은 방법입니다. 만약 당신이 길을 잃거나 질문이 있으면 our mailing list 또는 IRC channel (자세한 내용은 이 페이지 하단 참조)로 문의하십시오. Chris Mills는 학습 영역의 핵심 드라이버입니다. 직접 디렉토리에 알림을 보내볼 수도 있습니다.

- -

다음 섹션에서는 할 수있는 작업 유형에 대한 일반적인 아이디어를 제공합니다.

- -

초보자

- -
좋습니다! 초보자는 학습 자료에 대한 피드백을 만들고 제공하는 데 매우 중요하고 가치가 있습니다. 이 기사에 대한 독자적인 시각을 잠재 고객의 구성원으로 확보하면 우리 팀의 소중한 구성원이 될 수 있습니다. 실제로, 만약 당신이 무언가를 배우기 위해 우리의 글 중 하나를 사용하여 곤경에 빠지거나 글을 약간 혼란스럽게 하는 것을 발견한다면, 문제를 해결하거나 문제에 대해 알려줌으로써 해결할 수 있습니다.
- -
- -

다음은 참여 할 수있는 몇 가지 제안 방법입니다.

- -
-
기사에 태그 추가[Add tags to our articles] (5 min)
-
MDN 컨텐츠에 태그를 지정하는 것은 MDN에 기여하는 가장 쉬운 방법 중 하나입니다. 많은 기능이 정보를 제공하기 위해 태그를 사용하므로 태그 지정을 돕는 것은 매우 가치가 있는 공헌입니다. 시작하려면 태그가없는 용어집 항목(glossary entries) 및 학습 기사(learning articles) 목록을 살펴보십시오.
-
용어 사전 항목 읽기 및 검토[Read and review a glossary entry] (5 min)
-
우리는 당신이 초보자로서 우리의 콘텐츠를 바라 보는 신선한 눈을 필요로 합니다. 용어집을 쉽게 이해할 수 없다면 항목을 개선해야한다는 의미입니다. 필요하다고 생각되는 부분은 자유롭게 변경하십시오. 자신이 직접 항목을 편집 할 수있는 적절한 기술이 없다고 생각한다면 our mailing list로 알려주십시오.
-
새로운 용어집 항목 작성[Write a new glossary entry] (20 minutes)
-
-
-
-
이것은 새로운 것을 배우는 가장 효과적인 방법입니다. 이해하려는 개념을 고르고, 그것에 대해 배울 때 그에 관한 용어집 항목을 작성하십시오. 다른 사람들에게 무언가를 설명하는 것은 지식을 "시멘트"로 만들고 다른 사람들을 돕는 동안 자신이 이해할 수 있게 하는 훌륭한 방법입니다. 모두에게 이득입니다!
-
-
-
-
학습 자료 읽기 및 검토[Read and review a learning article] (2 hours)
-
-
-
-
-
-
-
이것은 용어 사전 항목을 검토하는 것과 같습니다. (위 참조) 이 기사는 일반적으로 꽤 길기 때문에 더 많은 시간이 걸립니다.
-
-
-
-
-
-
-
- -

웹 개발자

- -

좋습니다! 당신의 기술 능력은 초보자에게 기술적으로 정확한 내용을 제공하기 위해 필요한 것입니다. MDN의 이 특정 부분은 웹 학습에만 전념하므로 유용한 설명이 아닌 단순하지 않은 설명을 가능한 간단하게 작성하십시오. 지나치게 정확한 것보다 이해하는 것이 더 중요합니다.

- -
-
용어집 항목 읽기 및 검토[Read and review a glossary entry] (5 min)
-
웹 개발자로서, 우리의 콘텐츠가 지나치게 규칙적이지 않으면서 기술적으로 정밀한 지 확인해 주길 바랍니다. 필요하다고 생각되는 부분을 자유롭게 변경하십시오. 콘텐츠를 편집하기 전에 논의하기를 원하시면 our mailing list나 IRC channel로 알림을 보내주십시오.
-
새로운 용어집 항목 작성[Write a new glossary entry] (20 minutes)
-
기술적인 전문 용어를 명확히 하는 것은 기술적으로 정확하고 간결하게 배우는 좋은 방법이다. 초보자들은 그에 감사할 것입니다. 당신의 도움이 필요한 정의되지 않은 용어(many undefined terms)가 많이 있습니다. 선택해서 작성하실 수 있습니다. 
-
학습 자료 읽기 및 검토[Read and review a learning article] (2 hours)
-
이것은 용어집을 읽고 검토하는 것과 같습니다. (위 참조) 이 기사는 일반적으로 꽤 길기 때문에 더 많은 시간이 걸립니다.
-
새로운 학습 기사 작성[Write a new learning article ](4 hours or more)
-
MDN는 웹 기술사용에 관한 간단한 기사가 부족합니다. (HTML, CSS, JavaScript, 등)MDN은 다소 오래 된 콘텐츠들이 있고, 그를 검토하고 개정할 필요가 있습니다. 기술을 최대한 초보자에게도 웹 기술을 이용하기 쉽게 작성하십시오.
-
연습, 코드 샘플 또는 대화식 학습 도구 만들기[Create exercises, code samples or interactive learning tools](? hours)
-
우리의 모든 학습 기사는 “능동적 학습" 자료라고 부르는 것을 요구합니다. 왜냐하면 사람들은 스스로 뭔가를 함으로써 최선을 다해 배우기 때문입니다. 이러한 자료는 사용자가 기사에 설명 된 개념을 적용하고 조작하는 데 도움이 되는 연습이나 대화형 콘텐츠입니다. JSFiddle 또는 그와 유사한 코드 샘플을 만드는 것에서 Thimble을 사용하여 완전히 공유된 대화형 콘텐츠를 만드는 것까지 능동적인 학습 콘텐츠를 만드는 방법은 다양합니다. 창의력을 발휘하십시오!
-
- -

교육자

- -

MDN은 기술적 우수성에 대한 오랜 역사를 가지고 있지만 새로 온 사람들에게 개념을 가르치는 가장 좋은 방법에 대한 깊이 있는 이해가 부족합니다. 이것은 우리가 교사 또는 교육자로서 당신을 필요로 하는 이유입니다. 자료를 통해 독자에게 훌륭한 교육 자료를 제공 할 수 있습니다.

- -
-
용어집 항목 읽기 및 검토[Read and review a glossary entry] (15 min)
-
용어집 항목을 확인하고 필요하다고 생각되는 부분을 자유롭게 변경하십시오. 편집하기 전에 내용을 토론하고 싶다면 our mailing list 나 IRC channel로 알림을 보내주십시오.
-
새로운 용어집 항목 작성[Write a new glossary entry] (1 hour)
-
용어의 명확하고 간단한 정의와 용어집의 기본 개념은 초보자의 필요를 충족시키는 데 중요합니다. 교육자로서의 경험은 훌륭한 용어집 항목을 만드는 데 도움이 될 수 있습니다. 우리는 주의가 필요한 많은 정의되지 않은 용어(many undefined terms)를 가지고 있습니다. 하나를 선택하고 작성하실 수 있습니다.
-
기사에 삽화 또는 도식을 추가[Add illustrations and/or schematics to articles] (1 hour)
-
아시다시피, 삽화는 모든 학습 콘텐츠의 중요한 부분입니다. 이것은 종종 MDN에서 부족한 부분이며 당신의 기술이 해당 영역에서 변화를 가져올 수 있습니다. 설명이 부족한 기사(articles that lack illustrative content)를 확인하고 삽화를 삽입하고 싶은 기사를 선택하십시오.
-
학습 자료 읽기 및 검토[Read and review a learning article] (2 hours)
-
이것은 용어집 항목을 검토하는 것과 비슷하지만 (위 참조) 일반적으로 기사가 상당히 길기 때문에 더 많은 시간이 필요합니다.
-
새로운 학습 기사 작성[Write a new learning article] (4 hours)
-
우리는 웹 생태계와 그 주변의 다른 기능적 주제에 대한 간단하고 직접적인 기사가 필요합니다. 이 학습 기사는 말 그대로 문자 그대로 모두를 다루려고 하기 보다는 교육적일 필요가 있기 때문에 무엇을 알아야하고 어떻게 하면 훌륭한 자산이 될지를 아는 당신의 경험으로 도움을 줄 수 있습니다.
-
연습 문제, 퀴즈 또는 대화식 학습 도구 만들기[Create exercises, quizzes or interactive learning tools] (? hours)
-
우리의 모든 학습 기사에는 "능동적 학습" 자료가 필요합니다. 이러한 자료는 사용자가 기사에서 설명하는 개념을 사용하고 확장하는 방법을 배우는 데 도움이 되는 연습 또는 대화형 콘텐츠입니다. Thimble와 함께 공유된 양방향 콘텐츠를 만드는 것부터 퀴즈 만들기에 이르기까지 여기에서 할 수 있는 많은 것들이 있습니다. 창의력을 발휘하십시오!
-
학습 경로 만들기[Create learning pathways ](? hours)
-
진보적이고 이해하기 쉬운 자습서를 제공하려면 콘텐츠를 하나의 경로로 만들어야 합니다. 기존 콘텐츠를 수집하고 누락된 부분을 찾아서 작성할 학습 기사를 만들 수 있습니다.
-
diff --git "a/files/ko/learn/html/forms/html_\355\217\274_\352\265\254\354\204\261_\353\260\251\353\262\225/index.html" "b/files/ko/learn/html/forms/html_\355\217\274_\352\265\254\354\204\261_\353\260\251\353\262\225/index.html" deleted file mode 100644 index 37bfbb57ae..0000000000 --- "a/files/ko/learn/html/forms/html_\355\217\274_\352\265\254\354\204\261_\353\260\251\353\262\225/index.html" +++ /dev/null @@ -1,928 +0,0 @@ ---- -title: HTML_폼_구성_방법 -slug: Learn/HTML/Forms/HTML_폼_구성_방법 -translation_of: Learn/Forms/How_to_structure_a_web_form ---- -

HTML폼을 만들떄 구조화 하는것은 중요한 것이다. 이것은 두가지 이유로 중요하다. 폼이 사용 할수 있다는 것을 보장하고 접근성도 늘릴수 있기 떄문이다.(즉 장애인들도 쉽게 사용할 수 있다.) HTML 폼의 접근성은 중요한 점이고 어떻게 폼 접근성을 높일 수 있는지 볼것이다.

- -

HTML 폼들은 그 유연성으로 인해 HTML 중 복잡한 구조를 가지고 있는 요소중 하나이다. 폼 요소와 속성을 잘 혼합하면 모든 형태의 기본적인 폼을 만들 수 있다. 즉 몇몇 사람들이 HTML폼이 단순하고 매우 거칠다는 것을 발견했다는 것에 주목할 가치가 있다. XForms같은 풍부한 기술이 있다는 것은 사실이지만 불행하게도 모든 브라우저에서 폼의 종류를 널리 구현되지 않았다. 왜냐하면 대부분 자바스크립트에 의존하여 HTML폼들을 다루기 떄문이다.이 문서에서는 HTML 폼 요소들을 어떻게 사용해야 하는지 자세하게 설명 할 것이다. 만약 사용자 폼 위젯 만들기에 대하여 자세한 내용을 알고 싶다면 다음 문서를 참조하시오. How to build custom form widgets

- -

글로벌 구조

- -

<form> 요소

- -

{{HTMLElement("form")}} 요소는 공식적으로 폼을 정의하는 요소로 이 요소의 속성으로 폼의 작동하는 방식을 정의 할 수있다. HTML폼을 생성할떄마다 반드시 이 요소로 시작을 해야한다. 많은 보조 기술이나 브라우저 플러그인이 {{HTMLElement("form")}} 요소를 발견하고 쉽게 사용 할 수 있게 특별한 후크를 구현 할 수 있다.

- -

우리는 저번 문서에서 이미 이 내용을 다루었다.

- -
주의:폼을 다른 폼으로 둘러싸는 것은 엄격하게 제한되어 있다. 만약 그렇게 하면 사용자가 사용하는 브라우저에 따라 예측할 수 없는 방식으로 작동하게 된다.
- -

언제든지 폼위젯을 {{HTMLElement("form")}} 요소 바깥에서 사용할 수 있다. 하지만 그렇게 사용한다면, 그 폼위젯은 어떠한 폼과도 관련이 없다. 폼 위젯들은 폼 바깥에서 사용될 수  있지만, 그 위젯들은 스스로 아무것도 하지 않을 것이기 때문에 당신이 그 위젯들 전용 프로세스를 만들어주어야 한다. 당신은 자바스크립트로 그 동작을 정의해주어야 한다.

- -
-

주의:HTML5에서 HTML 폼 요소안의 폼 속성이 지원된다. 폼 속성은 {{HTMLElement("form")}} 바깥에 있는 폼요소라도 폼과 명시적으로 연결한다. 불행하게도 지금 시점에 이 기능은 다양한 브라우저에서 안정적으로 구현되지 않아서 신뢰할 수 없다.

-
- -

{{HTMLElement("form")}} 요소는 다음과 같은 속성을 가지고 모든 속성이 필수가 아닌 선택적이다.

- -


-  {{HTMLElement("form")}} 요소 속성

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
속성 이름기본값설명
{{htmlattrxref("accept-charset","form")}}UNKNOWN서버가 받아들일 문자 인코딩의 형식을 지정한다. 기본값은 특수 문자열 UNKNOWN이고 이경우에 폼 요소 안에 있는 문서의 인코딩에 맞는 인코딩이다.
{{htmlattrxref("action","form")}} 폼을 통해서 전송한 정보를 처리하는 웹페이지의 URL 
{{htmlattrxref("autocomplete","form")}}on이 속성은 이 폼안에 있는 위젯들의 기본값이 브라우저에 의해 자동 완성 하게 하는지 여부를 나타낸다. 이속성은 두가지 값중 하나를 같는다. on 또는 off.
{{htmlattrxref("enctype","form")}}application/x-www-form-urlencoded\method 속성이 post 값으로 지정되면,  서버로 폼을 전송하는 콘텐츠 MIME의 타입을 지정한다.: -
    -
  • application/x-www-form-urlencoded
    • -
  • multipart/form-data: {{HTMLElement("input")}}요소의 type 속성을 file로 지정한 경우 이 속성의 값을 사용한다. 
    • -
  • text/plain
    • -
-
{{htmlattrxref("method","form")}}get브라우저가 폼을 전송하기위해 사용하는 HTTP의 방식을 지정한다.
- 이 속성은 두개의 값중 한개를 가진다.  get 또는 post.
{{htmlattrxref("name","form")}} 폼의 이름이다. 이 속성값은 반드시 문서의 폼 사이에서 고유해야하며 빈 문자열을 지정할 수없다. 일반적으로 id 속성으로 대신 지정할 수 있다.
{{htmlattrxref("novalidate","form")}}(false)이 불리언 속성은 폼이 전송 할떄 유효성 검사를 할수 없음을 나타낸다.
{{htmlattrxref("target","form")}}_self폼 요청을 전송한후 응답을 어떻게 받을것인지 지정한다. 예를들어 {{HTMLElement("iframe")}}, tab, window를 사용 할 수 있다. 이 속성의 키워드로 다음과 같은 값을 사용 할 수있다. -
    -
  • _self: 응답을 현재 브라우징 컨텍스트 ({{HTMLElement("iframe")}}, tab, window 등)에서 불러온다.
    • -
  • _blank: 응답을 새로운 브라우징 컨텍스트로 불러온다.
    • -
  • _parent: 응답을 현재의 브라우징 컨텍스트의 부모 브라우징 컨텍스트에서 불러온다. 만약 부모가 없다면 _self 키워드와 똑같이 작동한다.
    • -
  • _top: 응답을 최상휘 레벨 브라우징 컨텍스트에서 불러온다. 만약 최상위 컨텍스트가 없다면  _self 키워드와 똑같이 작동한다.
    • -
-
- -

요소 밖에 폼 위젯들을 사용 할 수 있지만, 폼 위젯이 어떠한 폼과도 상관이 없다는 것을 유의 해야 한다.폼의 밖에서 위젯을 사용하는 것은 편리할 수 있지만 위젯들이 작동하기 위해 다른 것들을 해야 한다는 것을 의미한다. 아마 자바스크립트를 이용해서 동작을 정의 해야 할것이다.

- -

기술적으로 HTML5는 HTML 폼 요소에서 폼 속성을 설명 했다. 이것은 요소들을 실제로  {{ HTMLElement("form") }} 안에 있지 않아도 form요소로 확실하게 바인딩 하도록 해야한다. 불행하게도 모든 브라우저가 아직 이것을 충분히 지원하지 않는다.

- -

 <fieldset> 와 <legend> 요소

- -

{{HTMLElement("fieldset")}}요소는 같은 목적을 가진 위젯들을 편리하게 그룹화 하는 방법이다. A {{HTMLElement("fieldset")}} 요소는 라벨인 {{HTMLElement("legend")}} 요소와 같이 사용된다. {{HTMLElement("legend")}} 요소는 공식적으로 {{HTMLElement("fieldset")}} 요소를 설명하는데 사용된다. 많은 보조 기술들이 {{HTMLElement("legend")}} 요소를 {{HTMLElement("fieldset")}} 요소의 라벨로 이용하는데 사용된다. 예를 들어  Jaws, NVDA같은 스크린 리더들은 각각의 위젯의 라벨을 읽기전에 legend들을 읽을 것이다. 

- -

아래 조그만 예제가 있다.

- -
<form>
-  <fieldset>
-    <legend>Fruit juice size</legend>
-    <p>
-      <input type="radio" name="size" id="size_1" value="small" />
-      <label for="size_1">Small</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_2" value="medium" />
-      <label for="size_2">Medium</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_3" value="large" />
-      <label for="size_3">Large</label>
-    </p>
-  </fieldset>
-</form>
- -

이 예제를 스크림 리더가 Fruit juice size small을 먼저 읽고 Fruit juice size medium을 읽은 다음 마지막으로 Fruit juice size large을 읽을 것이다,

- -

이것은 가장 중요한것 중 하나이다. 대부분 라디오 버튼을 설정할떄 마다{{HTMLElement("fieldset")}} 요소 안에 있는지 확인해야한다. 다르게 사용하는 사례가 있지만 일반적으로 {{HTMLElement("fieldset")}}  요소는 폼을 강력하게 사용할 수 있게 해준다. 보조기술의 영향으로 {{HTMLElement("fieldset")}}  요소는 폼 접근 할수 있는 키 요소 중 하나이다. 이것을 남용하지 않는 것은 개발자 책임이다. 가능한 폼을 만들떄마다 스크린리더로 들어보면서 하는 것이 좋다. 만약 말이 이상하게 들린다면 개선 해야 한다는 신호이다.

- -

{{HTMLElement("fieldset")}} 요소는 다음과 같은 속성을 지정한다.

- - - - - - - - - - - - - - - - - -
{{HTMLElement("fieldset")}} 요소의 속성
속성 이름기본값설명
{{htmlattrxref("disabled","fieldset")}}(false)만약 이 불리언 속성이 설정되면 폼은(첫번째 {{ HTMLElement("legend") }}요소에 있는 요소는 예외이다. ) 이것에 파생된 요소를 사용하거나 편집 할 수없게된다. 그리고 마우스 클릭같은 어떠한 브라우저 이벤트들도 받지 않을것이다. 일반적으로 브라우저는 회색으로 이를 표시할 것이다.
- -

The <label> element

- -

{{HTMLElement("label")}} 요소는 HTML 폼 위젯을 정의하는 공식적인 방법이다. 이것은 접근성 있는 폼을 만드는데 가장 중요한 요소이다.

- -

{{HTMLElement("label")}} 요소는 다음과 같은 속성을 지원한다.

- -


- {{HTMLElement("label")}} 요소의 속성

- -


-  

- - - - - - - - - - - - - - - - -
속성 명기본값설명
{{htmlattrxref("for","label")}} {{HTMLElement("label")}}  요소와 같은 문서에 있는 위젯의 라벨의 ID . 문서안의 ID와 for속성 값이 같으면 그 라벨 요소는 그 위젯의 라벨이된다.
- -

요소는 for속성으로 지정한 위젯과 묶여진다. for속성은 해당 위젯의 실제 id 속성을 참조한다. 위젯은 요소로 둘러싸게 할수 있지만 이 경우 몇가지 보조 기술이 라벨과 위젯의 암시적인 관계를 이해하지 못하기 떄문에 for 속성을 고려 해봐야한다.

- -

심지어 보조 기술을 배제 한다고 하여도 모든 브라우저에서 공식적인 라벨 설정하면 사용자가 라벨을 누르면 해당하는 위젯이 활성화 할수 있다는 것을 알아 두어야한다. 이것은 라디오 버튼이나 체크박스를 사용하는데 특히 유용하다.

- -
<form>
-  <p>
-    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
-    <label for="taste_1">I like cherry</label>
-  </p>
-  <p>
-    <label for="taste_2">
-      <input type="checkbox" id="taste_2" name="taste_banana" value="1">
-      I like banana
-    </label>
-  </p>
-</form>
- -

몇가지 보조 기술은 여러개의 라벨을 한개의 위젯을 다루면 문제를 가질수 있다. 이 떄문에 위젯을 그에 맞는 폼 요소안에 넣어서 사용해야한다.

- -

다음 예제를 보아라

- -
<form>
-  <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
-
-  <p>
-    <label for="name">
-      <span>Name: </span>
-      <input type="text" id="name" name="username" required />
-      <strong><abbr title="required">*</abbr></strong>
-    </label>
-  </p>
-
-  <p>
-    <label for="birth">
-      <span>Date of birth: </span>
-      <input type="text" id="birth" name="userbirth" maxlength="10" /> <em>formated as mm/dd/yyyy</em>
-    </label>
-  </p>
-</form>
- -

이 예제에서 첫번째 단락은 필수적인 요소의 규칙들을 정의한다. 이 것은 스크린 리더와 같은 보조 기술이 필수 요소들을 찾기전에 출력하거나 읽기 위해서는 반드시 시작부분 나타내야 한다. 이런식으로 사용자는 항상 자신이 무엇을 하는지 알 수있다.

- -

첫번째 필드는 필수적이기 떄문에 라벨 요소는 name 과 * 로 필수적인 필드를 나타낸다  이런 식으로 하면 스크린 리더는 "Name star" 또는 "Name required"이라고 읽을 것이다. ( 스크린 리더의 설정에 따라 다르지만 항상 첫번째 단락에서 읽어진 것을 읽는다).  만약 두가지 라벨을 사용한다면, 사용자가 이 요소가 필수 요소 인지 보여지는지 보장 할 수없다.

- -

두번째 폼 요소는 비슷하게 작동한다. 이 기술을 사용하면 사용자에게 어떻게 데이터를 작성하는지 알려주는데 확신 할 수 있다.

- -

<output> 요소

- -

이 요소는 계산의 출력을 저장하는데 사용된다. It formally defines a relationship between the fields used to get the data required to perform the calculation and an element to be used to display the results. It is also understood as a live region by some assistive technologies (which means that when the content of the {{HTMLElement("output")}} element changes, the assistive technology is aware of that change and can react to it).

- -

{{HTMLElement("output")}} 요소는 다음 속성은 지원한다.

- - - - - - - - - - - - - - - - - -
{{HTMLElement("output")}} 요소 속성
Attribute nameDefault valueDescription
{{htmlattrxref("for","output")}} 스페이스로 구분된 다른 요소의 ID로 설정하고 이 요소들에 값을 입력을 계산하는데 기여한다.(또는 다른 효과)
- -

form이 사용되는 일반적인 form 구조

- -

HTML 폼의 지정된 구조를 넘어서 하나의 HTML이라고 생각 하는게 좋다. T 이 의미는 HTML 폼을 구성하는데 HTML의 모든 능력을 사용할 수 있다는 것이다.

- -

예제에서 볼 수 있드니 라벨과 위젯을 둘러싸는데 최고의 방법은  {{HTMLElement("p")}}요소 나 {{HTMLElement("div")}}요소를 사용하는 것이다.

- -

게다가 {{HTMLElement("fieldset")}} 요소에 HTML 타이틀을 사용하고 복잡한 폼을 만드는데 구조에 섹션을 사용하는것도 일반적인 관행이다.

- -

HTML 목록은 체크박스나 라디오 버튼을 사용하는데 일반적으로 사용된다.

- -

간단한 지불 폼을 만들어 보자

- -
<form>
-  <h1>Payment form</h1>
-  <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
-
-  <section>
-    <h2>Contact information</h2>
-
-    <fieldset>
-      <legend>Title</legend>
-      <ul>
-        <li>
-          <label for="title_1">
-            <input type="radio" id="title_1" name="title" value="M." />
-            Mister
-          </label>
-        </li>
-        <li>
-          <label for="title_2">
-            <input type="radio" id="title_2" name="title" value="Ms." />
-            Miss
-          </label>
-        </li>
-      </ul>
-    </fieldset>
-
-    <p>
-      <label for="name">
-        <span>Name: </span>
-        <input type="text" id="name" name="username" required />
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-    </p>
-
-     <p>
-      <label for="mail">
-        <span>E-mail: </span>
-        <input type="email" id="mail" name="usermail" required />
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-    </p>
-  </section>
-
-  <section>
-    <h2>Payment information</h2>
-
-    <p>
-      <label for="card">
-        <span>Card type:</span>
-        <select id="card" name="usercard">
-          <option value="visa">Visa</option>
-          <option value="mc">Mastercard</option>
-          <option value="amex">American Express</option>
-        </select>
-      </label>
-    </p>
-    <p>
-      <label for="number">
-        <span>Card number:</span>
-        <input type="text" id="number" name="cardnumber" required />
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-    </p>
-    <p>
-      <label for="date">
-        <span>Expiration date:</span>
-        <input type="text" id="date" name="expiration" required />
-        <strong><abbr title="required">*</abbr></strong>
-        <em>formated as mm/yy</em>
-      </label>
-    </p>
-  </section>
-
-  <section>
-    <p>
-      <button>Validate the payment</button>
-    </p>
-  </section>
-</form>
- -

See this form in action (with a touch of CSS):

- -

{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}

- -

HTML 위젯

- -

When you build a form, you need to use some widgets to collect data from the user. In this article we will see how to display those widgets; if you want to know more about the way those widgets work, it is detailed in the article: The native form widgets.

- -

The <input> element

- -

이 요소는 거의 모든 것을 할 있기 떄문에 특별 한 종류이다. 간단하게 type속성을 설정하여 완전히 바뀔수 있다. 간단하게 하기 위해서 type속성의 값을 4가지로 분류하였다. 단일 라인 텍스트 필드, 텍스트 입력 없는 컨트롤, 시간이나 날짜 컨트롤, 버튼. 이와 같은 다형성 떄문에  {{HTMLElement("input")}} 요소는 많은 속성을 지원하지만  type 속성값에 따라 달라지기 떄문에 어느 속성이 적절한지, 어느 것이 필요한지  선택하는 것은 어려울 수 있다. 

- -

This is all summarized in the following table (for a full list of all attributes, visit the page for the {{HTMLElement("input")}} element):

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
type 속성 의 값설명필수 속성관련된 속성
단일 선 텍스트 필드
text이것은 가장 기본적인 텍스트 필드이다.  type속성을 위한 텍스트 값은 이 속성의 기본 값이다.(자동 유효성 검사를 하지않음) {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}, {{htmlattrxref("spellcheck","input")}}
email하나 또는 여러개 이메일 주소를 작성하기 위해 사용되는 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
password텍스트 필드의 값을 가리기 위해 사용되는 텍스트 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
search검색 하기 위한 텍스트 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("autosave","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}, {{htmlattrxref("spellcheck","input")}}
tel전화 번호를 입력할 수 있는 텍스트 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
url절대 URL을 다루기 위한 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
텍스트 입력 없는 컨트롤
checkbox체크박스 {{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}
color색상을 입력 받기위한 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("required","input")}}
fileA control that lets the user select a file. {{htmlattrxref("accept","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("required","input")}}
hidden보여주지 않는 컨트롤 이지만 서버로 전송되는 필드  
number소숫점을 입력받는 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}
radio라디오 버튼. 그룹 중 한가지만 선택하기 위한 필드 {{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}
range정확하지 않는 숫자를 입력받기 위한 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}
시간 과 날짜 컨트롤
date(년, 원, 일)날짜를 입력 받을 수 잇는 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
datetimeUTC 타임 존 기반으로 전체 날짜와 시간(시간, 분, 초 )을 입력 받기 위한 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
datetime-local타임존 기반이 아닌 날짜와 시간을 입력받기 위한 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
month타임존 기반이 아닌 달과 년도를 입력 받기 위한 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
time타임존 기반이 아닌 시간을 입력 받기 위한 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
week타임존 기반이 아닌 전체 날짜를 일주일-년도 숫자로 주 번호를 입력하는 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
버튼
button기본 행동이 없는 누르는 버튼 {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
image그래픽적인 전송버튼{{htmlattrxref("src","input")}}, {{htmlattrxref("alt","input")}}{{htmlattrxref("width","input")}}, {{htmlattrxref("height","input")}}, {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
reset폼의 내용을 초기화 하는 컨트롤 {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
submit폼을 전송하는 버튼 {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
- -

몇가지 이유 때문에 브라우저에서 특정 type 속성의 값 설정을 지원하지 않으면 {{HTMLElement("input")}} 요소는  text 속성으로 렌더링 한다. 이것은 매력적이지 않아도 어쩔 수없이 폼이 작동하도록 한다.

- -

요소는 강력한 도구지만, 모든 것을 할수 없고 다른 것들을 다루기 위해 다른 요소들이 있다.

- -

<textarea> 요소

- -

이 요소는 다중 텍스트 필드로 설정된다. 이 요소는 사용자가 입력한 텍스트에 줄 바꿈을 할수 있다는 것을 제외하고 단일 라인 텍스트 필드와 정확하게 똑같이 작동한다. 또한 여러줄에 걸처 랜더링을 제어 하기위해 몇가지 추가 속성 설정을 허락한다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
 {{HTMLElement("textarea")}} 요소 속성
Attribute name기본값설명
{{htmlattrxref("cols","textarea")}}20보여지는 문자 너비의 평균을 기준으로 텍스트 컨트롤의 너비
{{htmlattrxref("rows","textarea")}} 보여지는 텍스트 행의 수
{{htmlattrxref("wrap","textarea")}}softhard, soft 이 둘중 하나의 값으로 어떻게 텍스트를 둘러쌀것인지 나타낸다.
- -

 {{HTMLElement("textarea")}} 요소는 {{HTMLElement("input")}} 요소와 다르게 작동한다. {{HTMLElement("input")}} 요소는 자동으로 닫히는 요소이다. 이는 자식 요소를 가질 수 없다는 것을 의미한다. 이와 반대로 요소는 text 콘텐츠를 자식으로 가질 수 있는 일반적인 요소이다.

- -

이는 두가지 영향이 있다.

- - - -

 예제를 따라가면 다음 두 요소는 똑같이 랜더링 되어 질것이다.

- -
<form>
-  <p>
-    <label for="text_1">With regular HTML</label><br>
-    <textarea id="text_1" name="regular"><p>I'm a paragraphe</p></textarea>
-  </p>
-  <p>
-    <label for="text_2">With escaped HTML</label><br>
-    <textarea id="text_2" name="escaped">&lt;p&gt;I'm a paragraphe&lt;/p&gt;</textarea>
-  </p>
-  <p>
-    <button>Send me</button>
-  </p>
-</form>
- -

<select>, <option>그리고 <optgroup> 요소

- -

요소는 선택 박스를 만들 수 있게 해준다(떄로는 콤보 박스라고 한다). 선택 박스는 사용자가 하나 이상 미리 정의 된 값을 선택하는 위젯이다. 단일 값 선택  박스와 다중 값 선택 박스는 다르다. 이에 대한 자세한 내용은 다음 문서를 확인해라 The native form widgets.

- -

선택 박스 안의 값들은  {{HTMLElement("option")}} 요소에서 정의되고 {{HTMLElement("optgroup")}} 요소 안에서 그룹화 될 수 있다.

- -

Let's take an example:

- -
<form>
-  <p>
-    <label for="myFruit">Pick a fruit</label>
-    <select id="myFruit" name="fruit">
-      <!-- There is a trick here you think you'll pick
-         a banana but you'll eat an orange >:-) -->
-      <option value="orange">Banana</option>
-      <option>Cherry</option>
-      <optgroup label="berries">
-        <option>Blueberry</option>
-        <option>Raspberry</option>
-        <option>Strawberry</option>
-      </optgroup>
-    </select>
-  </p>
-</form>
- -

{HTMLElement("option")}} 요소는 폼이 전송되면 전송될 value속성을 설정한다. 만약 value 속성을 바뜨리면 {{HTMLElement("option")}} 요소는 value 값을 선택 박스 값으로 사용된다.

- -

{{HTMLElement("optgroup")}} 요소의 라벨 속성은 값이 나오기전에 보여주고 옵션 같은 요소들은 선택할 수 없게 나온다..

- - - - - - - - - - - - - - - - - - - - - - -
{{HTMLElement("option")}} 요소 의 속성
속성 이름기본값설명
{{htmlattrxref("label","option")}} 이 속성은 옵션을 설명하는 라벨의 텍스트이다. 만약 라벨 속성이 정의되지 않으면 이 값은 요소의 텍스트 콘텐츠로 설정된다.
{{htmlattrxref("selected","option")}}(false)만약 이 속성이 불리언 값으로 설정되는 경우 처음에 선택된 상태로 시작하게된다.
- - - - - - - - - - - - - - - - - -
Attributes for the {{HTMLElement("optgroup")}} element
Attribute nameDefault valueDescription
{{htmlattrxref("label","optgroup")}} The name of the group of options. This attribute is mandatory.
- -

<datalist>요소 

- -

이 요소는 기존에 있는 위젯들에 사전 설정 값을 제공 함으로써 위젯들을 확장시킨다. 가장 잘 알려진 사용 방법은 텍스트 필드의 자동 완성 목록이다. 값들은 {{HTMLElement("datalist")}} 요소 안에 있는 {{HTMLElement("option")}}요소의 값으로 사용할 수 있다.

- -

{{HTMLElement("datalist")}}요소와 바인드 하기위해서는 사용하는 요소의 list속성을 이용하여 설정해야한다. 이 속성은 {{HTMLElement("datalist")}} 요소의 id로 설정된다.

- -

요소는 최근에 HTML 폼으로 추가 되었다. 그러므로 아직 이를 지원하지 않는 브라우저들도 있다. 이 문제를 처리하기 위하여 아래에 약간 까다로운 예제가 있다.

- -
<form>
-  <p>
-    <label for="myFruit">What is your favorite fruit?</label>
-    <input type="text" id="myFruit" name="fruit" list="fruitList" />
-
-    <datalist id="fruitList">
-      <label for="suggestion">or pick a fruit</label>
-      <select id="suggestion" name="altFruit">
-        <option value="banana">Banana</option>
-        <option value="cherry">Cherry</option>
-        <option value="strawberry">Strawberry</option>
-      </select>
-    </datalist>
-  </p>
-</form>
- -

한편 {{HTMLElement("datalist")}} 요소를 지원하는 브라우저는 {{HTMLElement("option")}} 요소를 무시하고 이를 사용하는 요소를 확장 할 것이다. 이와 반대로 {{HTMLElement("datalist")}} 요소를 지원하지 않는 브라우저는 라벨과 선택 박스를 표시 할 것이다. 물론 {{HTMLElement("datalist")}} 요소를 지원하지 않는 브라우저에 대해 자바스크립트로 하는 다른 방법이 있지만 항상 자바스크립트만 사용하는 것은 좋은 것이 아니다.

- - - - - - - - - - - - -
Safari 6Screenshot of the datalist element fallback with Safari on Mac OS
Firefox 18Screenshot of the datalist element with Firefox on Mac OS
- -

<meter> 와 <progress> 요소들 

- -

이 두요소는 그래픽적으로 숫자 값을 표현 하는방법이다. 이 두 요소의 차이점은 두 요소의 의미가 다르다는 것이다.

- - - -

속성으로 인해 이 요소들은 다음 속성을 지정 가능하다.

- -


- {{HTMLElement("meter")}} 요소는 다음과 같은 속성을 가진다

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attribute nameDefault valueDescription
{{htmlattrxref("min","meter")}}0The lower numeric bound of the measured range.
{{htmlattrxref("max","meter")}}1The upper numeric bound of the measured range.
{{htmlattrxref("low","meter")}}the min valueThe upper numeric bound of the low end of the measured range.
{{htmlattrxref("high","meter")}}the max valueThe lower numeric bound of the high end of the measured range.
{{htmlattrxref("optimum","meter")}} The optimal numeric value.
- - - - - - - - - - - - - - - - - -
Attributes for the {{HTMLElement("progress")}} element
Attribute nameDefault valueDescription
{{htmlattrxref("max","progress")}} This attribute describes how much work the task indicated by the {{HTMLElement("progress")}} element requires before it's complete.
- -

The <button> element 

- -

{{HTMLElement("button")}} 요소는 폼 버튼을 만드는 가장 쉬운 방법이다. 버튼은 type속성에 따라 3가지 타입을 가진다.

- - - -


- {HTMLElement("button")}} 요소의 속성

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
속성 이름기본값설명
{{htmlattrxref("type","button")}}submit버튼의 타입.  button, reset, submit 이 있다.
{{htmlattrxref("formaction","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 action 속성에 오버라이드 된다.
{{htmlattrxref("formenctype","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 enctype 속성에 오버라이드 된다.
{{htmlattrxref("formmethod","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 method 속성에 오버라이드 된다.
{{htmlattrxref("formnovalidate","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 novalidate 속성에 오버라이드 된다.
{{htmlattrxref("formtarget","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 target 속성에 오버라이드 된다.
- -

기술적으로 말하면 {{HTMLElement("button")}} 요소와 {{HTMLElement("input")}} 요소의 속성에 정의된 버튼 요소는 거의 차이가 없다. 단 한가지 차이점은 버튼 자체의 라벨 이다.요소 안에서는 라벨은 오직 문자 데이터로만 나타 낼 수 있지만 {{HTMLElement("button")}} 요소에서는 어떠한 HTML이 될 수있다. 그래서 이에 따른 스타일을 디자인 할 수있다.

- -
Note: For historical reasons, the {{HTMLElement("button")}} element wasn't used very often and in many forms developers preferred to use buttons made with the {{HTMLElement("input")}} element. This is due to a bug in legacy versions of Internet Explorer (IE). In IE6 and IE7, if you add a name and a value attribute to a {{HTMLElement("button")}} element, they do not send the content of the value attribute but the raw content of the button instead. This has been fixed since IE8, so there is no longer any reason to avoid using the {{HTMLElement("button")}} element.
- -
 
- -

공통 속성

- -

Many of the elements used to define form widgets have some their own attributes. However, there is a set of attributes common to all form elements that give you some control over those widgets. Here is a list of those common attributes:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attribute nameDefault valueDescription
autofocus(false)This Boolean attribute lets you specify that the element should automatically have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified.
disabled(false)This Boolean attribute indicates that the user cannot interact with the element. If this attribute is not specified, the element inherits its setting from the containing element, for example {{HTMLElement("fieldset")}}; if there is no containing element with the disabled attribute set, then the element is enabled.
form The form element that the widget is associated with. The value of the attribute must be the id attribute of a {{HTMLElement("form")}} element in the same document. In theory, it lets you set a form widget outside of a {{HTMLElement("form")}} element. In practice, however, there is no browser which supports that feature.
name The name of the element; this is submitted with the form data.
value The element's initial value.
- -

Using ARIA to structure HTML forms

- -

ARIA is a W3C Candidate Recommendation which adds to HTML improved accessibility for rich Internet applications, including for forms. We will discuss its use in more detail in the "How to build custom form widgets" article, but there are some basics that are good to know.

- -

Before going further, it's worth noting that support for ARIA and assistive technologies among browsers is far from perfect, but it's improving. Just to understand the issue, when a browser encounters an ARIA attribute, it has to send information to the operating system's accessibility layer. Not all browsers are good at doing this cross platform. The assistive technologies, on their own, have to connect themselves to the OS accessibility layer to handle the information that comes from the browsers. Surprisingly, not all assistive technologies do it well. So using ARIA does not mean that your web application will be accessible, but it means that you do your best to achieve this. Unfortunately, for the time being, ARIA remains a best effort technology, but it's always better than nothing.

- -

If you want to dig into using ARIA with HTML forms, feel free to read the related section in the ARIA documentation.

- -

The aria-labelledby attribute

- -

This attribute is a convenient way to define a label without using the {{HTMLElement("label")}} element. The attribute is set on the widget element and references the id attribute of the element to use as a label.

- -
<form>
-  <p id="fruitLabel">What's your favorite fruit</p>
-  <p>
-    <input type="text" name="fruit" aria-labelledby="fruitLabel">
-  </p>
-</form>
- -

Conceptually, it's the opposite of the for attribute on the {{HTMLElement("label")}} element. With the for attribute, you reference the id of the widget but with the aria-labbeldby attribute, you reference the id of the label.

- -

The aria-describedby attribute

- -

This attribute works like the aria-labelledby attribute. The difference is mainly semantic. A label defines the essence of an object, while a description provides more information that the user might need. This attribute is not advised for form elements, you should rely on the aria-labelledby attribute, except if you want to provide extensive information on the current form element. It is to be used as a provider for a longer description.

- -

The aria-label attribute

- -

This attribute is used when there is no explicit label in the DOM for a given widget. It lets you provide a widget that will be passed to assitive technologies without actually creating a DOM node for it.

- -
<form>
-  <p>
-    <input type="search" name="q" aria-label="Search" />
-    <input type="submit" value="Go" />
-  </p>
-</form>
- -

The role attribute

- -

This is the most important ARIA attribute. It lets you give specific semantic information, understandable by assitive technologies, for a given HTML element. There are many roles available and some of them are dedicated to form widgets.

- -

ARIA tries to provide semantics for widgets that are not currently available in HTML as well as for elements that already exist. We will see in detail how to use those roles in the article: How to build custom form widgets.

- -

Those roles for form widgets are :

- - - -

It's also worth noting that there's something called a composite role:

- - - -

If those roles are extremely useful, know that there are more; ARIA is a very large specification. Digging into it can help you improve accessibility in areas far afield from HTML forms.

- -

결론

- -

You now have all the knowledge to properly structure your HTML forms; the next article will dig into implementation details and functional expectations: The native form widgets.

- -

볼거리

- - diff --git a/files/ko/learn/html/forms/index.html b/files/ko/learn/html/forms/index.html deleted file mode 100644 index f7244cbdc1..0000000000 --- a/files/ko/learn/html/forms/index.html +++ /dev/null @@ -1,358 +0,0 @@ ---- -title: HTML 폼 가이드 -slug: Learn/HTML/Forms -translation_of: Learn/Forms ---- -

이 가이드는 HTML 폼을 숙달 시키는데 도움이 되는 문서입니다. HTML 폼은 사용자와 상호작용할 수 있는 매우 강력한 도구입니다. 그러나 역사적으로 나 기술적인 이유로 사용자에게 항상 명확하게 기능을 제공할 수 있는 것은 아닙니다. 이 가이드에서 HTML 폼 관점에서 스타일 구조, 사용자 위젯으로 데이터 다루기 등 모든 것을 다룰 것입니다. 이러한 강력한 기술들을 즐기길 바랍니다!

- -

항목

- -
    -
  1. 나의 첫 HTML 폼
    2. -
  2. HTML HTML 폼 구성 방법
    3. -
  3. 기본 폼 위젯
    4. -
  4. CSS와 HTML 폼 -
      -
    1. HTML 폼 스타일
      2. -
    2. HTML 폼을 위한 고급 스타일
      3. -
    3. 폼 위젯을 위한 호환성 테이블 속성
      4. -
    -
    5. -
  5. 데이터 주고 받기
    6. -
  6. 데이터 유효성 검사
    7. -
  7. 사용자 폼 위젯 만드는 방법
    8. -
  8. 자바스크립트를 통해서 폼 전달 하기 -
      -
    1. FormData 객체 사용
      2. -
    -
    9. -
  9. 기존 브라우저에서 HTML 폼
    10. -
- -

HTML 문서

- -

HTML 요소

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
요소관련 DOM 인터페이스설명
{{HTMLElement("button")}}{{domxref("HTMLButtonElement")}}button 요소는 클릭할 수 있는 버튼을 나타낸다.
{{HTMLElement("datalist")}}{{domxref("HTMLDataListElement")}}datalist 요소는 다른 폼 요소의 값에 대한 가능한 옵션들을 나타내는 {{ HTMLElement("option") }} 요소의 집합을 포함합니다. 
{{HTMLElement("fieldset")}}{{domxref("HTMLFieldSetElement")}}fieldset 요소는 폼 안에 여러 폼 요소들을 그룹화 하는데 사용됩니다.
{{HTMLElement("form")}}{{domxref("HTMLFormElement")}}form  요소는 사용자가 정보를 웹서버로 전송하도록 상호작용하는 요소를 포함하는 문서의 부분으로 나타냅니다.
{{HTMLElement("input")}}{{domxref("HTMLInputElement")}}input 요소는 대화형 컨트롤 폼들을 생성하는데 사용됩니다.
{{HTMLElement("keygen")}}{{domxref("HTMLKeygenElement")}}keygen 요소는 HTML 폼 요소의 일부로서 쉽게 키 데이터를 발생시키고 공개키를 전송을 위해서 존재 합니다.
{{HTMLElement("label")}}{{domxref("HTMLLabelElement")}}label 요소는 사용자 인터페이스 항목에 대한 캡션을 나타냅니다.
{{HTMLElement("legend")}}{{domxref("HTMLLegendElement")}}legend 요소는 상위 요소인 {{ HTMLElement("fieldset") }} 컨텐츠를 위한 캡션을 나타냅니다.
{{HTMLElement("meter")}}{{domxref("HTMLMeterElement")}}meter 요소는 알려진 범위 안에 정해 저 있는 스칼라 값이나 소수 값 주 하나를 나타냅니다.
{{HTMLElement("optgroup")}}{{domxref("HTMLOptGroupElement")}}optgroup 요소는 {{ HTMLElement("select") }} 요소 안에 있는 옵션 그룹을 생성합니다.
{{HTMLElement("option")}}{{domxref("HTMLOptionElement")}}HTML option 요소는 {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }} 또는 {{ HTMLElement("datalist") }}요소 안에 항목을 나타내는 컨트롤을 생성하는데 사용됩니다.
{{HTMLElement("output")}}{{domxref("HTMLOutputElement")}}output 요소는 계산 결과를 나타냅니다.
{{HTMLElement("progress")}}{{domxref("HTMLProgressElement")}}progress 요소는 작업 완료 진행 상태를 나타내는데 사용됩니다.
{{HTMLElement("select")}}{{domxref("HTMLSelectElement")}}select 요소는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다.
{{HTMLElement("textarea")}}{{domxref("HTMLTextAreaElement")}}textarea 요소는 다중 라인 일반 텍스트 편집 컨트롤을 나타냅니다.
- -
-

Note: 모든 폼 요소들이나 모든 HTML요소들은 {{domxref("HTMLElement")}} 돔 인터페이스를 지원합니다.

-
- -

HTML 속성

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
속성 이름요소설명
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}서버가 받는 형식 목록, 일반적으로 file 형식을 사용합니다.
accept-charset{{ HTMLElement("form") }}지원하는 문자 집합 목록
action{{ HTMLElement("form") }}폼을 통해서 전송 정보를 처리하는 프로그램의 URL 
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}폼 안에서 브라우저로 부터 자동으로 완성되는 기본 값을 가진 컨트롤 인지 아닌지 나타냅니다.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}페이지가 로드된 후 요소가 자동으로 포커스 해야 되는지 설정합니다.
challenge{{ HTMLElement("keygen") }}공개 키(public key)와 함께 전송되는 문자열입니다.
checked{{ HTMLElement("input") }} -

해당 요소가 페이지가 로드될 때 체크된 상태로 나타나도록 설정합니다. 

-
cols{{ HTMLElement("textarea") }} -

textarea의 세로줄 수를 설정합니다.

-
data{{ HTMLElement("object") }}자원의 URL을 명시합니다.
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}
disabled{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}사용자가 요소와 상호 작용할 수 있는 지 나타냅니다.
enctype{{ HTMLElement("form") }}POST방식으로 전송되는 데이터의 타입을 설정합니다.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Describes elements which belongs to this one.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} -

요소의 소유자인 폼을 나타냅니다.

-
high{{ HTMLElement("meter") }}Indicates the lower bound of the upper range.
keytype{{ HTMLElement("keygen") }}Specifies the type of key generated.
list{{ HTMLElement("input") }}Identifies a list of pre-defined options to suggest to the user.
low{{ HTMLElement("meter") }}Indicates the upper bound of the lower range.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}허용되는 최댓값을 나타냅니다.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}요소에서 허용되는 특징의 최대 수를 명시합니다.
method{{ HTMLElement("form") }}Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}허용되는 최솟값을 나타냅니다.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indicates whether multiple values can be entered in an input of the type email or file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} -

요소의 이름. For example used by the server to identify the fields in form submits.

-
novalidate{{ HTMLElement("form") }}This attribute indicates that the form shouldn't be validated when submitted.
optimum{{ HTMLElement("meter") }}Indicates the optimal numeric value.
pattern{{ HTMLElement("input") }}Defines a regular expression which the element's value will be validated against.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Provides a hint to the user of what can be entered in the field.
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indicates whether the element can be edited.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether this element is required to fill out or not.
rows{{ HTMLElement("textarea") }}Defines the number of rows in a textarea.
selected{{ HTMLElement("option") }}Defines a value which will be selected on page load.
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
src{{ HTMLElement("input") }}The URL of the embeddable content.
step{{ HTMLElement("input") }}
target{{ HTMLElement("form") }}
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}Defines the type of the element.
usemap{{ HTMLElement("input") }}
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Defines a default value which will be displayed in the element on page load.
wrap{{ HTMLElement("textarea") }}Indicates whether the text should be wrapped.
- -

Normative reference

- - diff --git a/files/ko/learn/html/forms/sending_and_retrieving_form_data/index.html b/files/ko/learn/html/forms/sending_and_retrieving_form_data/index.html deleted file mode 100644 index f1d7c35437..0000000000 --- a/files/ko/learn/html/forms/sending_and_retrieving_form_data/index.html +++ /dev/null @@ -1,249 +0,0 @@ ---- -title: Sending and retrieving form data -slug: Learn/HTML/Forms/Sending_and_retrieving_form_data -translation_of: Learn/Forms/Sending_and_retrieving_form_data ---- -

많은 경우 HTML 폼은 서버에 데이터를 전송할 목적으로 사용된다. 서버는 데이터를 처리하고 사용자에게 응답을 보낼 것이다. 간단한 것 처럼 보이지만 데이터가 서버나 사용자에게 피해를 입히지 않기 위해서는 몇가지를 명심해야한다.

- -

데이터는 어디로 갈까?

- -

클라이언트/서버 구조

- -

웹은 간단히 말하면 클라이언트(파이어폭스, 크롬, 사파리, IE 등)는 서버(아파치, Nginx, IIS, 톰켓 등)로 HTTP프로토콜을 사용해 요청을 하는 클라이언트/서버 구조를 기본으로 작동된다. 서버 응답은 요청과 똑같은 프로토콜을 사용한다.

- -

A basic schema of the Web client/server architecture

- -

클라이언트 측에서 HTML폼 만큼 사용친화적으로 HTTP 요청을 서버에 보내는 편리한 것이 없다.이것은 사용자가 정보를 HTTP요청으로 전달을 할 수있게 만든다.

- -

클라이언트측: 데이터 보내기

- -

{{HTMLElement("form")}} 요소는 데이터 전송 방법을 정의한다. 제공하는 모든 속성은 사용자가 submit 버튼을 누를때 보내질 요청을 구성할 수 있도록  설계되었다. 두가지 중요한 속성은 {{htmlattrxref("action","form")}} 와 {{htmlattrxref("method","form")}}이다.

- -

{{htmlattrxref("action","form")}} 속성

- -

이 속성은 데이터를 어디로 보낼 것인지 지정한다. 이 값은 반드시 유효한 URL이어야 한다.만약 이 속성을 지정하지 않으면 데이터는 폼이 있는 페이지의 URL로 보내질 것이다.

- -
Examples
- -

첫번째 예제로 데이터는 http://foo.com로 보낼 것이다.

- -
<form action="http://foo.com">
- -

여기에서 데이터는 폼 페이지를 호스팅을 하는 같은 서버로 전송 되지만, 서버의  다른 URL로 전송된다.

- -
<form action="/somewhere_else">
- -

아래와 같이 속성을 지정하지 않으면 {{HTMLElement("form")}} 속성은 데이터를 폼을 포함한 페이지 주소로 보낼 것이다.

- -
<form>
- -

이전에 많은 페이지들은 데이터를 반드시 폼을 포함하는 페이지와 같은 페이지에 보내는 것을 나타내는 표기법을 다음과 같이 사용했다. 그러나 HTML5 이후로 속성은 필수로 지정하지 않아도 되기 떄문에 이제 더이상 필요하지 않는다.

- -
<form action="#">
- -
-

Note: HTTPS(보안 HTTP) 프로토콜을 사용하는 URL을 지정하는 것도 가능하다. 이 것을 사용하면 폼 자체가 안전하지 않은 페이지에 HTTP를 이용해서 접근하는  곳에 호스트된 경우에 데이터는 나머지 요청들과 함께 암호화된다. 반면, 만약 폼이 보안 페이지에서 호스트 된 경우라도  {{htmlattrxref("action","form")}} 속성에서 안전하지 않은 HTTP URL을  지정하면 모든 브라우저는 데이터가 암호화되지 않았기 때문에 데이터를 보낼때마다 보안 경고를 출력할 것이다 

-
- -

{{htmlattrxref("method","form")}} 속성

- -

이 속성은 데이터를 어떻게 보낼 것인지 정의한다. HTTP protocol 은 요청 방법에 대해 다양한 방법들을 제공한다.  HTML 폼 데이터는 오직 2가지 방법으로 만 전송 할 수 있는데 바로 GET 방식과 POST방식이 있다.

- -

이 두 가지 방식의 차이점을 이해하기 위해서는 뒤로 가서 HTTP가 어떻게 작동하는지 살펴봐야한다. 웹에서 리소스에 접근 할 때마다, 브라우저는 URL에 요청을 보낸다. HTTP요청은 두 가지 부분으로 나누어진다. 브라우저 수용력에 대한 전역 메타 테이터들을 포함하는 헤더와 서버에서 지정된 요청을 처리하는데 필요한 정보를 포함하는 바디가 있다.

- -
GET 방식
- -

GET 방식은 브라우저에서 서버에 주어진 리소스를 전달해달라고 말하기 위해 사용되는 방식이다. " 이봐 서버 난 이 리소스를 원해" 이 경우 브라우저는 바디가 비어 있는 요청을 하게 된다. 바디가 비어 있기 때문에,  만약 폼이 이 방식를 통하여 전송 하는 경우 데이터는 URL에 포함되어 서버로 보내진다.

- -
예제
- -

다음 폼을 생각 해 봅시다.

- -
<form action="http://foo.com" method="get">
-  <input name="say" value="Hi">
-  <input name="to" value="Mom">
-  <button>Send my greetings</button>
-</form>
- -

GET 방식을 사용하면 HTTP 요청은 다음과 같다.

- -
GET /?say=Hi&to=Mom HTTP/1.1
-Host: foo.com
- -
POST 방식
- -

POST 방식은 조금 다르다. 이는 브라우저의 HTTP요청 바디안에 제공되는 데이터를 고려한 응답을 요구하기 위해 서버로 보내는 방식이다. "이봐 서버 이 데이터를 보고 이거에 맞는 데이터를 보내봐" 만약 폼이 이 방식으로 사용하여 요청을 한다면 데이터는 HTTP요청 바디에 추가되어 전송된다.

- -

예제

- -

이 폼을 생각해보라(위 예제와 똑같다)

- -
<form action="http://foo.com" method="post">
-  <input name="say" value="Hi">
-  <input name="to" value="Mom">
-  <button>Send my greetings</button>
-</form>
- -

POST 방식을 사용하면 다음과 같이 HTTP 요청을 할 것이다,

- -
POST / HTTP/1.1
-Host: foo.com
-Content-Type: application/x-www-form-urlencoded
-Content-Length: 13
-
-say=Hi&to=Mom
- -

Content-Length 헤더는 바디의 크기를 나태내고,  Content-Type 헤더는 서버에 보낼 리소스의 종류 나태낸다. 우리는 비트(bit/조금씩?)에서 이러한 헤더를 설명 할 것이다.

- -

물론 http 요청은 절대 사용자에게 표시되지 않는다(파이어폭스 웹 콘솔이나 크롬 개발자 툴을 이용하지 않는이상). 사용자에게 보여지는 것은 호출한 URL뿐이다. 그래서 GET 요청은 사용자에게 URL바에서 데이터를 볼 수있지만,  POST 요청은 그러지 못한다. 이것은 두가지 이유에서 매우 중요하다.

- -
    -
  1. 만약 패스워드를 전송해야 되는 경우(또는 민간한 데이터의 부분), 절대 URL 바에 데이터를 출력하는 GET 방식을 사용해서는 안된다.
    2. -
  2. 만약 거대한 데이터를 보내는경우 POST 방식이 선호 된다. 왜냐하면 몇몇 브라우저는 URL들의 크기를 제한하기 떄문이다. 또한 많은 서버들이 URL들의 길이를 제한한다.
    3. -
- -

서버측: 데이터 가져오기

- -

어떠한 HTTP 방식을 선택 하든지 서버는 키/ 벨류 쌍의 목록과 같은 데이터를 얻기 위해 파싱된 문자열을 받을 것이다. 이러한 목록에 접근하는 방법은 사용하는 개발 플랫폼에 의존되고 어떠한 지정된 프레임워크에서 이것을 사용 할 수 있을것이다. 또한 사용 하는 기술은 동일한 키를 어떻게 처리할 것인지 결정한다. 보통 가장 마지막에 수신된 값이 우선순위를 가진다.

- -

예제: PHP 날것

- -

PHP 데이타에 접근 하기 위하여 몇가지 글로벌 객체를 제공한다. POST 방식 사용했다고 생각해보면, 다음과 같은 예제는 단순히 데이터만 받아 사용자에게 출력만 한다. 물론 데이터로 무엇을 할 것인지는 너어게 달려있다. 아마도 데이터를 사용자에게 출력하거나, 데이터베이스에 저장, 이메일에 전송 또는 다른 방법으로 처리할 것이다.

- -
<?php
-  // The global $_POST variable allow to access the data send with the POST method
-  // To access the data send with the GET method, you can use $_GET
-  $say = htmlspecialchars($_POST['say']);
-  $to  = htmlspecialchars($_POST['to']);
-
-  echo  $say, ' ', $to;
- -

이 예제는 우리가 보낸 데이터를 페이지에 출력 할 것이다. 이 예제는 다음과 같이 출력할 것이다.

- -
Hi Mom
- -

예제: Python

- -

이 예제는 파이썬을 사용하여 제공된 데이터를 웹페이지에 출력하는 예제입니다. CGI 파이썬 패키지를 이용하여 폼데이터에 접근한다.

- -
#!/usr/bin/env python
-import html
-import cgi
-import cgitb; cgitb.enable()     # for troubleshooting
-
-print("Content-Type: text/html") # HTTP header to say HTML is following
-print()                          # blank line, end of headers
-
-form = cgi.FieldStorage()
-say  = html.escape(form["say"].value);
-to   = html.escape(form["to"].value);
-
-print(say, " ", to)
- -

이 결과는 PHP와 똑같다?.

- -
Hi Mom
- -

다른 언어와 프레임 워크

- -

 Perl, Java, .Net, Ruby등 이와 같은 다른 서버측 기술이 있다. 이중에 최고라고 생각되는 것을 사용하면된다. 즉, 까다로운 일이 될 수 있기 때문에, 직접 기술을 사용하는 것은 매우 드문 일이 있음을 언급하는 것은 가치가있다.(?) 다음과 같은 폼을 더 쉽게 다루기위해 다음과 같은 좋은 프레임 워크들이 사용된다.

- - - -

이러한 프레임 워크를 사용하는 경우에도 폼을 다루는 것은 어쩔수 없이 쉽지 않다는 것을 주목을 할 필요가 있다. 그러나 이것을 사용하면 많은 시간을 절약 할 수 있다.

- -

특별한 경우: 파일 보내기

- -

파일은 HTML 폼에서 특별한 경우이다. 파일은 2진 데이터 또는 다른 데이터는 텍스트 데이터로 간주된다.HTTP는 텍스트 프로토콜 이기 때문에 2진 데이터를 다루기 위해서는 특별한 요구 사항이있다.

- -

{{htmlattrxref("enctype","form")}} 속성

- -

이 속성은 Content-Type  HTTP 헤더의 값을 지정할 수 있게 해준다. 서버에 데이터가 무슨 종류인지 전달하기 떄문에 이 해더는 매우 중요하다. 기본 값으로는 application/x-www-form-urlencoded. 이다. 사람 말로는 "이 폼 데이터는 URL 폼 형태로 인코딩되어 있습니다" 이다

- -

만약 파일을 보내고 싶다면 두 가지를 해야한다.

- - - -

예제 

- -
<form method="post" enctype="multipart/form-data">
-  <input type="file" name="myFile">
-  <button>Send the file</button>
-</form>
- -
-

Note: 몇 브라우저는 {{htmlattrxref("multiple","input")}}속성을 {{HTMLElement("input")}}요소에 지원하여 한번에 여러 요소를 전달 할 수 있다. 이러한 파일을 서버측에서 다루는 방법은 서버에서 어떠한 기술을 사용하냐에 따라서 매우 달라진다. 앞에서 언급 한바와 같이 프레임워크를 사용하면 더 쉽게 이용할 수있다.

-
- -
-

Warning: 많은 서버들이 남용을 예방하기 위해 HTTP요청과 파일의 크기를 제한하도록 구성된다. 파일을 전송하기 전에 서버 관리자에게 제한 크기를 확인하는것이 중요하다.

-
- -

보안 코너

- -

데이터를 서버로 보낼 떄마다 보안성에 대하여 생각해 봐야한다. HTML폼은 서버를 공격하는데 첫번째 매개변수가 될 수있다. 문제는 HTML폼에서 오지 않는다. 서버에서 어떻게 처리하냐에 따라 문제가 발생한다.

- -

일반적인 보안 결함

- -

무엇을 하는지에 따라 잘 알려진 보안 문제가 있다.

- -

XSS 과 CSRF

- -

크로스 사이트 스크립팅(XSS)과 크로스 사이트 요청 위조(CSRF)은 데이터를 출력하기 위해 사용자나 다른 사용자에게 데이터를 보낼떄 공격하는 일반적인 유형이다.

- -

XSS 공격자는 다른 사용자가 볼 웹 페이지에 클라이언트 측 스크립트를 주입할 수있다.크로스 사이트 스크립팅 취약점은 공격자가 동일 출처 정책(same origin policy)의 접근 제어를 우회하여 사용 될 수 있다. 이러한 공격은 조금 불편함에서 심각한 보안 위험에 이르기 까지 다양하게 영향을 미친다.

- -

CSRF는 XSS와 비슷하게 공격자가 같은 방법으로 시작한다. —클라이언트 스크립트를 웹페이지에 주입한다. - 그러나 이것의 대상은 다르다. CSRF 공격자는 높은 권한 계정(서버 관리자 같은)으로 권한을 상승하려고 시도하고 하지 말아야할 행동들을 할것이다.(예를들어 신뢰 할 수없는 사용자에게 데이터 전송하는 것)

- -

XSS 공격자는 사용자가 웹사이트에 대하여 가진 신뢰를 이용하여 공격자는 웹사이트가 사용자를 신뢰한다는 것을 이용한다.

- -

이러한 공격을 방지하려면 사용자가 서버에 보내는 데이터를 항상 확인해야하며 해당 내용을 표시해야 하는 경우 사용자가 제공한 HTML 콘텐츠를 표시하지 말아야 한다. 대신, 당신이 보여주려는 데이터가 사용자가 제공한 것과 동일한 데이터가 아니도록 데이터를 처리해야 한다. 현재 시장에 나와있는 거의 모든 프레임 워크는 어떤 유저가 보내는 데이터라도 HTML{{HTMLElement ( "script")}},{{HTMLElement ( "iframe")}} 및 {{HTMLElement ( "object")}} 요소를 데이터에서 제거하는 최소한의 필터를 구현한다. 이는 위험을 완화하는 데 도움은 되지만 반드시 근절한다고 보장할 수는 없다.

- -

SQL injection

- -

SQL injection is a type of attack that tries to perform actions on a database used by the target web site. This typically involves sending an SQL request and hopes that the server will execute it (many times when the application server tries to store the data). This is actually one of the main vector attacks against web sites.

- -

The consequences can be terrible, ranging from data loss to access to a whole infrastructure by using privilege escalation. This is a very serious threat and you should never store data sent by a user without performing some sanitization (for example, by using mysql_real_escape_string() on a PHP/MySQL infrastructure).

- -

HTTP header injection 와 email injection

- -

These kinds of attacks can occur when your application builds HTTP headers or emails based on the data input by a user on a form. These won't directly damage your server or affect your users but are an open door to deeper problems such as session hijacking or phishing attacks.

- -

These attacks are mostly silent, and can turn your server into a zombie.

- -

Be paranoid: Never trust your users

- -

So, how do you fight these threats? This is a topic far beyond this guide; however there are a few rules it's good to keep in mind. The most important rule is: never ever trust your users, including yourself; even a trusted user could have been hijacked.

- -

All data that comes to your server must be checked and sanitized. Always. No exception.

- - - -

If you follow these three rules of thumb, you should avoid many/most problems; however, it's always a good idea to get a security review performed by a competent third party. Don't assume that you've seen all the possible problems.

- -

결론

- -

여기서 볼 수 있듯이 폼데이터는 쉽게 보낼수 있지만 어플리케이션에서 데이터를 확보하는것은 까다로운 일이 될 수 있다. 프론트 앤드 개발자가 기억해야 할 것은 데이터 모델만 보안을 정한다고 끝이 아니라는 것이다. Yes, as we'll see, it's possible to perform client side data validation but the server can't trust this validation because it has no way to truly know what really happens on the client side.

- -

볼거리

- -

If you want to learn more about securing a web application, you can dig into these resources:

- - diff --git a/files/ko/learn/html/forms/your_first_html_form/index.html b/files/ko/learn/html/forms/your_first_html_form/index.html deleted file mode 100644 index b997fc1f08..0000000000 --- a/files/ko/learn/html/forms/your_first_html_form/index.html +++ /dev/null @@ -1,272 +0,0 @@ ---- -title: 나의 첫 HTML 폼 -slug: Learn/HTML/Forms/Your_first_HTML_form -translation_of: Learn/Forms/Your_first_form ---- -

이 문서는 HTML 폼 소개 문서입니다. 간단한 폼들을 살펴보면서 HTML 폼을 만들기에 대한 기본적인 필요 사항들을 볼 수 있을 것이다. 이 문서는 HTML폼에 대해서는 아무것도 몰라도 되지만 다음 문서에 나와 있는 기본적인 HTML이나 CSS를 알아야 한다. (the basics of HTML, CSS)

- -

시작하기전에

- -

HTML 폼 이란?

- -

HTML폼은 사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용하는 것 중 중요한 기술 중에 하나이다. 폼은 사용자가 웹사이트에 데이터를 전송하는 것을 허용한다. 일반적으로 데이터는 웹 서버로 전송되지만 웹페이지가 데이터를 사용하기 위하여 사용할 수 도 있다.

- -

HTML 폼은 하나 이상의 위젯으로 만들어 진다. 이러한 위젯들은 텍스트 필드(한줄 또는 여러줄), 셀렉 박스,  버튼, 체크박스, 라디오 버튼이 될 수 있다. 대부분 이러한 위젯들은 위젯을 설명하는 라벨과 함께 사용된다.

- -

폼을 사용하려면 무엇이 필요합니까?

- -

HTML을 다루기 위한 텍스트 에디터나 웹 브라우저외는 아무것도 필요 없습니다. 물론 비주얼 스튜디오, 이클립트, 앱타나 등 통합개발환경(IDE)을 사용하면 많은 이점이 있지만 이것은 만드는 사람 마음이다.

- -

HTML 폼과 일반적인 HTML 요소의 주요 차이점은 폼에 의해 수집된 데이터는 대부분 웹서버에 전송된다는 점이다. 이런 경우 데이터를 받거나 처리하는 웹서버를 설정해야한다. 웹서버를 설정하는 방법은 이 문서의 범위를 벗어나지만 알고 싶다면 다음 문서를 참조 하시오 Sending and retrieving form data.

- -

폼 디자인하기

- -

코드를 보기전에 항상 잠시 뒤로 물러나 폼에 대하여 생각하는 것이 더 중요하다.   간단한 모형을 디자인 하는것은 개발자가 사용자에게 묻고 싶은 데이터를 올바르게 정의하는데 도움을 준다. 사용자 경험 (UX)의 관점에서 폼이 많을수록 사용자들이 더 줄어든다는 사실을 기억하는게 중요하다. 반드시 필요한것이 무엇인지 생각하면서 간단하게 유지하는 것이 중요하다. 폼 디자인은 사이트나 어플리케이션을 만드는 과정 중 중요한 단계이다. 폼들의 디자인은 이 문서의 범위를 벗어나지만 만약 더 자세하게 알고 싶은 경우 다음 문서를 참조 하세요.

- - - -

이 문서에서는 간단한 문의를 하는 폼을 만들것이다. 거칠게 스케치 해보자.

- -

The form to build, roughly sketch

- -

우리가 만들 폼은 3개의 텍스트 필드와 하나의 버튼을 가지고 있다. 기본적으로 우리는 사용자에게 이름, 이메일, 문의사항을 물어 볼 것이고 버튼을 눌러서 웹서버로 데이터를 보내는게 목적이다.

- -

HTML를 직접 다루어 보자

- -

자 이제 HTML에가서 폼을 코딩 할 준비가 되었다. 우리의 문의하는 폼에서 다음과 같은 HTML 요소들을 사용할 것이다. {{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, and {{HTMLElement("button")}}.

- -

{{HTMLElement("form")}} 요소

- -

모든 HTML 폼은 {{HTMLElement("form")}} 요소로 다음과 같이 시작된다:

- -
<form action="/my-handling-form-page" method="post">
-
-</form>
- -

이 요소는 폼의 공식적인 형태이다. 이 요소는 다음 {{HTMLElement("div")}} 나 {{HTMLElement("p")}} 요소와 같이 사용되고,뿐만 아니라 폼이 동작하는 방식을 설정하는 일부 속성들을 지정 해야한다. 이러한 모든 속성은 선택적이지만 action 속성과 method 속성은 필수적으로 설정해야 한다.

- - - -

만약 이러한 속성에 더 자세한 내용을 알고 싶다면 다음 문서를 참조하시오. Sending and retrieving form data.

- -

{{HTMLElement("label")}}, {{HTMLElement("input")}}, 그리고 {{HTMLElement("textarea")}} 요소 추가하기

- -

우리의 문의하는 폼은 정말 간단하고 라벨을 가지고 있는 세 개의 텍스트필드를 가지고 있다. 이름을 입력 받는 입력 필드는 한줄 텍스트 필드를 사용하고, 이메일을 입력 받는 입력 필드는 이메일만 입력받는 한줄 텍스트 필드를 사용하고, 문의 내용을 입력받는 입력 필드는 다중 라인 텍스트 필드가 사용 될것이다.

- -

HTML코드를 다음과 같이 짤 것이다.

- -
<form action="/my-handling-form-page" method="post">
-    <div>
-        <label for="name">Name:</label>
-        <input type="text" id="name" />
-    </div>
-    <div>
-        <label for="mail">E-mail:</label>
-        <input type="email" id="mail" />
-    </div>
-    <div>
-        <label for="msg">Message:</label>
-        <textarea id="msg"></textarea>
-    </div>
-</form>
- -

{{HTMLElement("div")}} 요소는 코드를 편리하게 구성하고 스타일링 쉽게 만들어 줍니다. 중요한 점은 for속성은 모든{{HTMLElement("label")}} 요소에서 공식적으로 폼 위젯과 라벨을 연결하는데 사용된는 것이다. 이 속성은 위젯에 맞는 ID를 참조한다. 이 것은 몇 가지 장점이 있다. 가장 두드러 지는 것은 사용자가 라벨을 눌럿을때 그거에 맞는 위젯을 활성화 시키는 것이다.만약 이 속성에 대한 장점을 더 알고 싶다면 다음 문서에 자세히 나와있다. How to structure an HTML form.

- -

{{HTMLElement("input")}} 요소의 가장 중요한 속성은 type 속성이다. 이 속성은 {{HTMLElement("input")}} 요소가 어떻게 입력을 받을 것인지 정의하기 떄문에 매우 중요하다. 이것은 아예 요소를 변경하기 떄문에 주의 해야한다. 만약 이것에 대하여 더 자세한 정보를 알고 싶다면 다음 문서를 참조 하라. native form widgets 우리의 예제에서는 이 속성의 기본 값인 오직 text값만 사용했다. 이 값은 제어나 유효성 검사 없이 모든 종류의 텍스트를 받아 들이는 한줄 텍스트 필드를 나타낸다. 또한 오직 이메일 주소만 받는 한줄 텍스트 필드 email값을 사용했다. 이 마지막 값은 기본 텍스트 필드를 사용자가 입력 한 데이터에 대한 몇 가지 검사를 수행하는 "지능형"필드의 종류로 전환한다. 만약 폼 데이터 유효성 확인에 대하여 자세히 알고싶다면 다음 문서를 참조 해라. Form data validation

- -

마지막 요소를 보기전에 다음 <input /> VS <textarea></textarea>요소를 봐야한다. 이것은 이상한 HTML 요소중 하나이다. <input>태그는 자동 닫힘 태그다 무슨 의미냐면 요소가 끝날떄 반드시 "/"닫는 태그에 추가해야 하는 것을 의미한다. 이와 반대로, {{HTMLElement("textarea")}}은 자동 닫힘 태그가 아니다 그래서 반드시 엔딩태그를 사용하여 요소를 종료해야한다. 이 것은 기본 값을 정의하는 특정 기능에 영향을 미친다. 요소의 기본 값 정의는 반드시 value 속성을 다음과 같이 지정 해야 한다.

- -
<input type="text" value="by default this element is filled with this text" />
- -

이와 반대로 {{HTMLElement("textarea")}}요소 에서 기본값을 정의하고 싶다면,  {{HTMLElement("textarea")}}요소의 시작 태그와 끝 태그 사이에 문자들을 다음과 같이 입력 하면된다.

- -
<textarea>by default this element is filled with this text</textarea>
- -

 {{HTMLElement("button")}} 요소로 끝내기

- -

우리의 폼이 거의 완성되간다. 이제 단지 사용자 데이터를 서버에 보낼수 있도록 버튼을 추가하면된다. 이것은 간단하게 {{HTMLElement("button")}} 요소를 사용한다.

- -
<form action="/my-handling-form-page" method="post">
-    <div>
-        <label for="name">Name:</label>
-        <input type="text" id="name" />
-    </div>
-    <div>
-        <label for="mail">E-mail:</label>
-        <input type="email" id="mail" />
-    </div>
-    <div>
-        <label for="msg">Message:</label>
-        <textarea id="msg"></textarea>
-    </div>
-
-    <div class="button">
-        <button type="submit">Send your message</button>
-    </div>
-</form>
- -

버튼은 다음과 같은 3개 종류가 있다. submit, reset, button.

- - - -

알아두어야 할것은  {{HTMLElement("input")}} 요소를 사용하여 버튼 유형을 만들 수 있다.  {{HTMLElement("button")}}요소와 가장 큰 차이점은 {{HTMLElement("input")}}요소는 오직 일반 텍스트만 보내는 반면 {{HTMLElement("button")}}요소는 전체 HTML 콘텐츠를 보낸다.

- -

CSS로 더욱 나이스하게 만들기

- -

이제 우리는 HMLT폼을 가졋지만 가지고 있는 브라우저에서 보면 구리게 보인다.

- -

- -

CSS 스타일시트를 이용하여 조금만더 나이스하게 만들어 보자.

- -

폼을 가운데로 정렬하고 테두리를 보이게 하는것 부터 시작하자.

- -
form {
-    /* Just to center the form on the page */
-    margin: 0 auto;
-    width: 400px;
-    /* To see the outline of the form */
-    padding: 1em;
-    border: 1px solid #CCC;
-    border-radius: 1em;
-}
- -

그 다음 각각 폼 위젯사이에 여백을 추가하자.

- -
form div + div {
-    margin-top: 1em;
-}
- -

이제 레이블에 초점을 맞추자. 우리의 폼을 더 읽기 쉽게 만들기 위해 모든 라벨들이 같은 사이즈와 같은 쪽을 정렬이 되게하자. 이 경우 오른쪽 정렬을 하지만 경우에 따라서 왼쪽 정렬도 좋을 수 있다.

- -
label {
-    /* To make sure that all label have the same size and are properly align */
-    display: inline-block;
-    width: 90px;
-    text-align: right;
-}
- -

HTML 폼을 다루는 가장 어려운 것중 하나는 HTML자체를 위젯으로 스타일 하는 것이다. 텍스트 필드는 쉽게 스타일 할수 있지만 다른 위젯들은 아니다. 만약 HTML 폼 위젯 스타일에 대하여 자세한 정보를 알고 싶으면 다음 문서를 참조하시오.  Styling HTML forms

- -

폰트, 크기, 테두리를 변경 해보자

- -
input, textarea {
-    /* To make sure that all text fields have the same font settings
-       By default, textareas have a monospace font */
-    font: 1em sans-serif;
-
-    /* To give the same size to all text field */
-    width: 300px;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-
-    /* To harmonize the look & feel of text field border */
-    border: 1px solid #999;
-}
- -

HTML 폼은 요소의 상태를 나타내는 많은 가상클래스 를 지원한다.예르들어 위젯이 활성화 되면 하이라이트 효과를 추가할 수있다. 이것은 사용자가 쉽게 따라가도록 하는 편리한 방법이다.

- -
input:focus, textarea:focus {
-    /* To give a little highlight on active elements */
-    border-color: #000;
-}
- -

다중 텍스트 필드는 몇몇 사용자 지정 스타일이 필요하다. 기본적으로  {{HTMLElement("textarea")}}요소는 바닥이 텍스트 기준선에 정렬되는 인라인 블록 이다. 대부분 이것들은 우리가 원하는 것이 아니다. 이런 경우 나이스하게 라벨과 필드를 정렬하려면  {{HTMLElement("textarea")}}요소의 vertical-align 속성을  top이라 변경 해야 한다.

- -

또하나 유용한 resize 프로퍼티는 사용자가 쉽게  {{HTMLElement("textarea")}}요소의 크기를 조정 할수 있게 해준다.

- -
textarea {
-    /* To properly align multiline text fields with their labels */
-    vertical-align: top;
-
-    /* To give enough room to type some text */
-    height: 5em;
-
-    /* To allow users to resize any textarea vertically
-       It does not work on every browsers */
-    resize: vertical;
-}
- -

버튼도 특별한 스타일이 필요하다. 이를 위해 우선 {{HTMLElement("div")}}요소안에 버튼을 넣는다. 그리고 다른 위젯들과 정렬을 해야한다. 그럴러면 {{HTMLElement("label")}}요소를 흉내 내야한다. 그 후에 패딩 과 마진 속성을 지정하면된다

- -
.button {
-    /* To position the buttons to the same position of the text fields */
-    padding-left: 90px; /* same size as the label elements */
-}
-
-button {
-    /* This extra margin represent roughly the same space as the space
-       between the labels and their text fields */
-    margin-left: .5em;
-}
- -

이제 폼이 더 나이스 해졋다.

- -

- -

웹서버로 데이터 보내기

- -

까다로울지 모르는 마지막 부분은 데이터를 서버측에서 처리하는 것이다. 앞에서 언급 된 바와 같이 HTML폼은 사용자에게 데이터를 물어보고 웹서버로 데이터를 전달하는 데 편리한 방법이다.

- -

{{HTMLElement("form")}} 요소는 action속성과 method속성을 사용하여 데이터를 어디에 어떻게 보낼것인지 정의한다.

- -

이걸로 충분하지않다. 데이터의 이름을 지정해야한다. 이러한 이름들은 브라우저측이나 서버 측 모두에게 중요하다. 브라우저에게는 데이터 각 부분에는 이름을 지정하고 서버측 에서는 이름을 이용하여 데이터를 다룰수 있게 해준다.

- -

그래서 데이터의 이름을 지정하려면 데이터를 받는 각 폼 위젯에 name속성을 지정해야한다.

- -
<form action="/my-handling-form-page" method="post">
-    <div>
-        <label for="name">Name:</label>
-        <input type="text" id="name" name="user_name" />
-    </div>
-    <div>
-        <label for="mail">E-mail:</label>
-        <input type="email" id="mail" name="user_email" />
-    </div>
-    <div>
-        <label for="msg">Message:</label>
-        <textarea id="msg" name="user_message"></textarea>
-    </div>
-
-    <div class="button">
-        <button type="submit">Send your message</button>
-    </div>
-</form>
- -

우리의 예제에서는 다음과 같이 3가지 데이터 이름을 지정했다.  "user_name", "user_email" and "user_message". 이 데이터는 "/my-handling-form-page"로  HTTP POST 방식으로 전송된다.

- -

서버 측에서는 URL에서 HTTP 요청에 의해 구현된 3개의 키/벨류 항목의 목록 데이터를 받게 된다. 스크립트로 데이터를 다루는 방법은 너에게 달려있다. 각각 의 서버 측 언어들은(PHP, Python, Ruby, Java, C# 등)자신만의 방식으로 이를 다룬다. 더 깊게 들어가는 것은 이문서의 범위를 벗어나지만 더자세히 알고 싶다면 다음 문서를 참조하시오. Sending and retrieving form data.

- -

결론

- -

축하한다! 첫번째 HTML폼을 만들었다.

- - - - - - - - - - - - - - - -
Live example
{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/HTML/Forms/Your_first_HTML_form/Example') }}
Check out the source code
- -

하지만 이제 시작일 뿐이고, 더 깊게 파고들 시간이다. HTML폼은 이 문서에서 본 것 보다 더 강력한 도구이고, 이 가이드의 다른 문서가 나머지 내용을 배우는데 도움이 될 것이다.

- -

{{NextMenu("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms")}}

diff --git a/files/ko/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ko/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..09ac7171e0 --- /dev/null +++ b/files/ko/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,132 @@ +--- +title: Tips for Authoring Fast-loading HTML Pages +slug: Tips_for_Authoring_Fast-loading_HTML_Pages +tags: + - HTML +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +

Summary: Learn common-sense tips for producing HTML pages which load quickly and provide visitor satisfaction. 여기에 나온 팁들은 상식과 실험에 바탕을 두고 있습니다. 만약 당신이 페이지 불러오기 성능을 향상시킬 수 있는 팁을 알고 있다면 이 글의 토론 페이지에 조언해 주시기 바랍니다.

+

최적화된 웹 페이지는 사이트 방문자들에게 즉각적인 응답을 해줄 뿐만 아니라, 웹 서버의 부담을 덜어주고 인터넷 연결의 부하를 줄여줍니다. 이것은 커다란 사이트나 뉴스 속보와 같은 특별한 상황에서 트래픽이 급격히 증가하는 사이트에 있어서 아주 중요합니다.

+

페이지 불러오기 성능을 최적화하는 것이 저대역폭 방문자를 위한 컨텐츠에만 해당하는 것은 아닙니다. 이것은 고대역폭 컨텐츠에도 똑같이 중요하며 고속 인터넷 사용자들에게도 상당한 성능 향상을 기대할 수 있습니다.

+

Tips

+

페이지 무게를 줄여라

+

페이지 무게는 지금까지 페이지 불러오기 성능의 가장 중요한 요소이다.

+

불필요한 공백, 주석을 없애고 인라인 스크립트와 CSS를 외부파일로 옮기면 페이지 구조의 변화를 최소화하면서 다운로드 성능을 향상시킬 수 있다

+

HTML Tidy등의 도구를 사용, 바른 HTML 소스로부터 첫 공백과 여분의 빈라인을 자동으로 줄일 수 있다. 다른 도구는 재형식화하거나 긴 식별자를 짧은 버전으로 줄여 JavaScript를 압축할 수 있다.

+

파일 수를 최소화하라

+

웹 페이지에서 참조하는 파일의 수를 줄이면 페이지를 다운로드하는데 필요한 HTTP 접속 횟수가 감소합니다.

+

브라우저의 캐시 설정에 따라서, 브라우저는 각각의 CSS와 JavaScript, 그림 파일에 대해서 마지막으로 다운로드한 이후로 해당 파일이 변경되었는지 확인하기 위해 If-Modified-Since 요청을 웹 서버로 보내게 됩니다.

+

웹 페이지에서 참조하는 파일의 수를 줄이면, 이러한 요청을 보내고 그에 해당하는 응답이 도착하는데 필요한 시간을 줄일 수 있습니다.

+

브라우저는 페이지를 표시하기 전에 각각의 CSS와 JavaScript 파일의 변경시간을 반드시 확인해야 합니다. 따라서 웹 페이지에서 참조하는 파일들에 대한 마지막 변경시간을 확인하는데 너무 많은 시간을 소비하면 웹 페이지의 초기 표시 시간이 오래 걸릴 수 있습니다.

+

도메인 검색을 줄이라

+

각각의 도메인은 DNS 검색에 시간을 소비하기 때문에, CSS와 JavaScript 및 이미지를 참조하는데 사용되는 도메인 수를 줄이면 페이지를 불러오는 시간이 단축됩니다.

+

이것이 항상 실현가능한 것이 아닐지라도, 가능한한 최소한의 도메인을 사용하도록 주의해야 합니다.

+

재사용되는 내용을 캐시하라

+

캐시가능한 내용이 적절한 만료시간으로 캐시되었는지 확인해야 합니다.

+

특히 Last-Modified 헤더에 신경써야 합니다. 이것은 페이지의 효율적인 캐싱을 가능케 합니다. 이것에 의해 브라우저가 읽어들이고자 하는 파일이 마지막으로 변경된 시간에 대한 정보가 전달됩니다. 정적인 페이지(예를 들면, <tt>.html</tt>, <tt>.css</tt>)는 대부분의 웹 서버가 파일 시스템에 저장된 마지막 변경시간을 토대로 자동적으로 Last-Modified 헤더를 추가합니다. 동적인 페이지(예를 들면, <tt>.php</tt>, <tt>.aspx</tt>)는 물론 불가능합니다.

+

그러므로, 특히 동적으로 생성되는 페이지들에 대한 이 부분의 연구가 중요합니다. 이것은 조금 복잡하지만, 정상적으로 캐시 불가능한 페이지들에 대한 페이지 요청을 대폭 줄일 수 있게 합니다.

+

추가 정보:

+
    +
  1. RSS 해커들을 위한 HTTP 조건부 GET
    2. +
  2. HTTP 304: Not Modified
    3. +
  3. On HTTP Last-Modified and ETag
    4. +
+

페이지 컴포넌트의 순서를 최적화

+

사용자가 페이지를 읽어들일 때 페이지의 내용 요소를 가장 먼저 다운로드하면 가장 빠른 응답시간을 얻을 수 있습니다.

+

페이지의 내용 요소는 페이지의 표시를 위해 필요한 모든 CSS 및 JavaScript와 함께 가장 먼저 다운로드되어야 합니다. 이러한 내용 요소들은 일반적으로 텍스트로 되어 있고 모뎀상에서 텍스트 압축효과를 얻을 수 있기에 사용자에게 가장 빠른 응답 시간을 제공합니다.

+

페이지를 모두 읽어들인 후에야 사용가능한 모든 DHTML 기능들은 초기에는 사용하지 못하게 설정되어 있어야 하며 페이지 불러오기가 끝난 후에만 사용가능해야 합니다. 이것은 페이지의 내용 요소를 먼저 읽어들인 다음에 DHTML JavaScript를 읽어들이게 하여 전체적인 페이지 불러오기 성능을 향상시킵니다.

+

inline script 수를 최소화

+

inline script는 페이지 구조를 바꿀 수 있다는 것을 파서가 가정해야 하므로 페이지 불러오기에 비용이 많이 들 수 있다. 일반적으로 inline script 사용을 줄이고 내용을 출력하기 위해 document.write()의 사용을 줄여 전체페이지의 불러오는 시간을 향상시킬 수 있다. document.write()에 기반한 오래된 방식 대신 현대의 W3C DOM방법을 사용하여 페이지 내용을 다루라.

+

최신 CSS와 올바른 markup을 사용하라

+

최신 CSS는 markup의 양을 줄여주며, 레이아웃 측면에서 그림의 사용을 줄여줍니다. 또한 다양한 방법으로 텍스트를 나타내는 그림의 사용을 줄여줍니다. 텍스트를 나타내는 그림을 사용하면 텍스트와 CSS를 사용할 때보다 부하가 큽니다.

+

올바른 markup을 사용하는 것에는 추가적인 장점이 있습니다. 브라우저가 HTML을 처리할 때 "오류 정정"을 하지 않아도 될 뿐만 아니라, 웹 페이지를 + + 전처리(pre-process) + 할 수 있는 다른 도구들을 마음대로 사용할 수 있습니다. 예를 들면, HTML Tidy는 웹 페이지상의 공백과 불필요한 종료 태그들을 삭제해 줍니다. 그러나 웹 페이지에 심각한 markup 오류가 있다면 이 도구는 사용할 수 없습니다.

+

내용을 조각내라

+

table기반의 레이아웃을 <div>를 쓰거나 table을 작은 table로 나누면 전체 페이지 내용을 내려받지 않고 표시할 수 있다.

+

아래와 같이 깊게 중첩된 table 대신

+
+ 
<TABLE>
+  <TABLE>
+    <TABLE>
+          ...
+    </TABLE>
+  </TABLE>
+</TABLE>
+
+

중첩되지 않은 table 또는 div를 쓰라

+
<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+

그림과 표의 크기를 명시하라

+

브라우저가 그림과 표의 크기를 바로 알아낼 수 있다면, 내용을 바꾸지 않고도 웹 페이지를 표시하는게 가능합니다. 이것은 페이지를 표시하는 속도를 빠르게 할 뿐만 아니라 페이지 불러오기가 끝났을 때 페이지의 배치가 바뀌는 것을 막아줍니다. 그런 이유로, 가능하면 그림의 height와 width가 명시되어야 합니다.

+

표는 CSS 선택자:속성 조합이다.

+
+

table-layout: fixed;

+
+

그리고 COL과 COLGROUP 태그를 사용하여 열(column)의 넓이를 명시해야 합니다.

+

사용자 에이전트의 요구사항을 적절하게 선택하라

+

웹 페이지의 디자인 향상을 위해서는 사용자 에이전트의 요구사항을 적절하게 선택해야 합니다. 모든 브라우저, 특히 저사양의 브라우저에서까지 웹 페이지의 내용이 픽셀 하나하나까지 완벽하게 표현되기를 원하지는 않습니까?

+

이상적으로, 기본적인 최소 요구사항은 관련된 표준을 지원하는 현대적인 브라우저를 기준으로 해야 합니다. 이것은 모든 플랫폼 상의 Netscape 7/Gecko 1.0.2+, Windows의 Internet Explorer 5.5+, Windows의 Opera 7+, Mac OS X의 Safari에 해당합니다.

+

그러나 여기에 나와있는 대부분의 팁들은 사용자 에이전트 요구사항과 관계 없이 모든 사용자 에이전트와 웹 페이지에 해당하는 일반적인 내용임을 알아두시기 바랍니다.

+

페이지 구조 예

+

· HTML

+
+
+ · HEAD
+
+
+
+
+
+ · LINK ...
+ 페이지의 표시를 위해 CSS 파일이 필요하다. 유지보수를 위해 관련되지 않은 CSS 파일을 분리하고 성능을 위해 파일 수를 최소화하라.
+
+
+
+
+
+
+
+ · SCRIPT ...
+ JavaScript 파일은 페이지를 불러들일 때 필요하지만 DHTML은 페이지 불러오기가 끝난 후에만 동작합니다.
+
+ 유지보수를 위해 관련되지 않은 JavaScript를 별도의 파일로 분리하고 성능을 위해 파일 수를 최소화하세요.
+
+
+
+
+
+ · BODY
+
+ · 페이지 내용을 가시적인 작은 덩어리(tables / divs)로 나누면 전체 페이지를 모두 다운로드 하지 않고도 내용을 표시할 수 있습니다.
+
+
+
+
+
+ · SCRIPT ...
+ DHTML을 위해 어떠한 스크립트라도 사용될 수 있습니다. 일반적으로 DHTML 스크립트는 페이지 불러오기가 완전히 끝나고 필요한 객체들이 모두 초기화된 후에만 동작합니다. 따라서 페이지 내용을 불러오기 전에 이러한 스크립트들을 먼저 읽어들일 필요가 없습니다. 오직 페이지 로딩시간을 증가시킬 뿐입니다.
+
+ 유지보수를 위해 관련되지 않은 JavaScript를 별도의 파일로 분리하고 성능을 위해 파일 수를 최소화하세요.
+
+ 만약 롤오버 효과를 위해 사용되는 그림이 있다면, 페이지 내용을 읽어들인 후에 그 그림을 미리 읽어들여야 합니다.
+
+
+
+

관련 링크

+ +
+

원문 정보

+ +
+

 

diff --git a/files/ko/learn/html/howto/mark_abbreviations_and_make_them_understandable/index.html b/files/ko/learn/html/howto/mark_abbreviations_and_make_them_understandable/index.html deleted file mode 100644 index 8a1d0cb625..0000000000 --- a/files/ko/learn/html/howto/mark_abbreviations_and_make_them_understandable/index.html +++ /dev/null @@ -1,268 +0,0 @@ ---- -title: 약자 표시 및 이해시키는 방법 -slug: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable -tags: - - HTML - - 초보 -translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations -translation_of_original: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable ---- -
-

HTML은 독자가 이해할 수 있도록 해주는 약자를 표시해주는 단순하고 직관적인 방법을 제공합니다.

-
- - - - - - - - - - - - -
먼저:기초적인 HTML 문서 만들기에 익숙해지셔야 합니다.
목표:HTML로 어떻게 약자 및 두음문자를 표시하는지 알아봅시다.
- -

약자에 대해

- -

항상 우리는 글을 쓸 때 약자나 두음문자를 사용합니다.('중화인민공화국'의 '중국'같이 짧게 적는 것이 약자, '아껴쓰고, 나눠쓰고, 바꿔쓰고, 다시쓰고'의 '아나바다'와 같이 첫 글자만 골라서 쓰는 것이 두음문자입니다.)

- -

We have to make sure that our readers can understand our abbreviations. In standard writing, it's really common to spell out the abbreviation only on its first occurrence, then just use the abbreviation everywhere:

- -
유럽연합(UE)은 28 개의 주로, 합중국(US)은 50 개의 주로 이루어져 있습니다. US는 연방제 공화국, UE는 자치주들이 정치적, 경제적으로 결속한 집단입니다.
- -
-

이렇게 하면 모든 웹 페이지에 완전히 유효하지만, HTML은 독자들에게 약자를 설명하기 위한 부가적인 방법을 제공해줍니다.

-
- -

abbr 요소

- -

HTML 약자 요소 ({{HTMLElement("abbr")}})는 약자에 익숙하지 않거나 시각장애우같이 스크린 리더를 실행해야 하는 사람들을 돕기 위한 약자나 두음문자를 말합니다. 가장 중요한 규칙은, 가능한 언제든지 쓰라는 것입니다.

- -
-

알림: <acronym> 요소에 대해 들어보셨겠지만, <acronym>은 사장되었으므로 브라우저에서 언제든지 지원을 끊을 수 있기 때문에 사용하지 말아야 합니다.

-
- -
<p>I need to talk to you <abbr>ASAP</abbr>.</p>
- -

이렇게 title 속성으로 약자를 설명할 수도 있습니다:

- -
<p>I need to talk to you <abbr title="as soon as possible">ASAP</abbr>.</p>
- -

언제 title 속성을 적어야 할까요? 마음대로 시면 됩니다. It can be overkill to spell out a very common abbreviation like "ASAP" or an abbreviation used many times in your document. When in doubt, err on the side of providing the full description.

- -
-

Note: In languages with grammatical number (especially languages with more than two numbers, like Arabic), use the same grammatical number in your title attribute as inside your <abbr> element.

-
- -

{{glossary("CSS")}}로 약자를 가리키는 가시적인 정보를 추가, 변경, 제거하실 수 있습니다. 보통 마우스를 대면 브라우저가 title 속성의 콘텐츠를 툴팁으로 보여준다는 것도 기억하십시오. 이전의 예시대로 하면 이렇게 보여집니다:

- -

{{ EmbedLiveSample('The_abbr_element','100%',90) }}

- -
-

중요: 만약 사람들이 약자를 이해하는 것을 따진다면, 절대로 title 속성에 의존하지 마세요. Spell your abbreviation out in the text on first occurrence. 툴팁에 접근하려면 마우스가 필요합니다. 이것은 폰이나 키보드, 스크린 리더를 쓰는 사람들을 배제합니다.

-
- -

실전

- -

{{HTMLElement('abbr')}}에 대해 알아봅시다. 이 글 바로 밑에 약자를 <abbr>로 표시하고 title 속성으로 설명합니다. 다 했으면 잘 되었는지 보기 위해 "show results"를 눌러봅시다. 용어 사전에서 모든 약자들을 보실 수 있습니다.

- - - -

{{ EmbedLiveSample('Exercise','100%',220) }}

- -

더 알아보기

- - diff --git a/files/ko/learn/html/howto/use_data_attributes/index.html b/files/ko/learn/html/howto/use_data_attributes/index.html new file mode 100644 index 0000000000..d4abd5da57 --- /dev/null +++ b/files/ko/learn/html/howto/use_data_attributes/index.html @@ -0,0 +1,82 @@ +--- +title: 데이터 속성 사용하기 +slug: Learn/HTML/Howto/데이터_속성_사용하기 +tags: + - HTML + - HTML5 + - 가이드 + - 예제 + - 웹 + - 전용 데이터 속성 +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +
{{LearnSidebar}}
+ +

HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었습니다. data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, {{domxref("Node.setUserData()")}}과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다.

+ +

HTML 문법

+ +

문법은 간단합니다. 어느 엘리멘트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있습니다. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있어요. 아래 data 사용법이 있습니다:

+ +
<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+...
+</article>
+ +

JavaScript 에서 접근하기

+ +

JavaScript 에서 이 속성 값들을 읽는 방법은 너무 간단합니다. 값을 읽기 위한 완전한 HTML 이름과 함께 {{domxref("Element.getAttribute", "getAttribute()")}} 를 사용하면 됩니다. 그러나 표준은 더 간단한 방법을 정의합니다.:  {{domxref("DOMStringMap")}} 는 {{domxref("HTMLElement.dataset", "dataset")}} 속성을 통해 읽어낼 수 있습니다.

+ +

dataset 객체를 통해 data 속성을 가져오기 위해서는 속성 이름의 data- 뒷 부분을 사용합니다.(대시들은 camelCase로 변환되는 것에 주의하세요.) 

+ +
var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"
+ +

각 속성은 문자열이며 읽거나 쓸 수 있습니다. 위의 경우에서 article.dataset.columns = 5와 같이 설정하면 해당 속성을 "5"로 변경할 것입니다.

+ +

CSS 에서 접근하기

+ +

데이터 속성은 순 HTML 속성이기 때문에 CSS에서도 접근할 수 있다는 것에 주목하세요. 예를 들어, 부모 데이터를 article에서 보여주려면 {{cssxref("attr")}} 함수의 생성된 content 를 사용하면 됩니다.:

+ +
article::before {
+  content: attr(data-parent);
+}
+ +

CSS의 속성 선택자도 데이터에 따라 스타일을 바꾸는데 사용할 수 있습니다.:

+ +
article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}
+ +

이 JSBin 예시에서 이들이 함께 작동하는 것을 볼 수 있습니다. 

+ +

데이터 속성들은 게임 점수와 같이 계속 변하는 정보도 저장할 수 있습니다. CSS선택자와 자바스크립트 접근을 이용해서 display 규칙을 사용하지 않고도 훌륭한 효과를 만들 수도 있습니다. 생성된 content와 CSS transition의 예시를 보려면 이 screencast 를 확인하세요. (JSBin 예시).

+ +

데이터 값은 문자열입니다. 스타일을 적용하려면 숫자 값은 선택자에 따옴표 안에 써주어야 합니다.

+ +

문제점

+ +

보여야 하고 접근 가능해야하는 내용은 데이터 속성에 저장하지 마세요. 접근 보조 기술이 접근할 수 없기 때문입니다. 또한 검색 크롤러가 데이터 속성의 값을 찾지 못할 것입니다.

+ +

고려해야할 주요한 문제는 인터넷 익스플로러의 지원과 성능입니다. 인터넷 익스플로러11+ 은 표준을 지원하지만, 이전 버전들은 dataset을 지원하지 않습니다. IE 10 이하를 지원하기 위해서는 대신 {{domxref("Element.getAttribute", "getAttribute()")}}를 통해 데이터 속성을 접근해야 합니다. 또한, JS 데이터 저장소에 저장하는 것과 비교해서 데이터 속성 읽기의 성능은 저조합니다.

+ +

하지만 이 때문에, 커스텀 요소와 관련된 메타 데이터를 위해서는 훌륭한 해결책입니다.

+ +

Firefox 49.0.2(아마도 이전/이후의 버전)에서는,1022 데이터를 초과하는 데이터 속성은 자바스크립트(EcmaScript 4)가 읽지 못할 것입니다.

+ +

더 알아보기

+ + diff --git "a/files/ko/learn/html/howto/\353\215\260\354\235\264\355\204\260_\354\206\215\354\204\261_\354\202\254\354\232\251\355\225\230\352\270\260/index.html" "b/files/ko/learn/html/howto/\353\215\260\354\235\264\355\204\260_\354\206\215\354\204\261_\354\202\254\354\232\251\355\225\230\352\270\260/index.html" deleted file mode 100644 index d4abd5da57..0000000000 --- "a/files/ko/learn/html/howto/\353\215\260\354\235\264\355\204\260_\354\206\215\354\204\261_\354\202\254\354\232\251\355\225\230\352\270\260/index.html" +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: 데이터 속성 사용하기 -slug: Learn/HTML/Howto/데이터_속성_사용하기 -tags: - - HTML - - HTML5 - - 가이드 - - 예제 - - 웹 - - 전용 데이터 속성 -translation_of: Learn/HTML/Howto/Use_data_attributes ---- -
{{LearnSidebar}}
- -

HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었습니다. data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, {{domxref("Node.setUserData()")}}과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다.

- -

HTML 문법

- -

문법은 간단합니다. 어느 엘리멘트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있습니다. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있어요. 아래 data 사용법이 있습니다:

- -
<article
-  id="electriccars"
-  data-columns="3"
-  data-index-number="12314"
-  data-parent="cars">
-...
-</article>
- -

JavaScript 에서 접근하기

- -

JavaScript 에서 이 속성 값들을 읽는 방법은 너무 간단합니다. 값을 읽기 위한 완전한 HTML 이름과 함께 {{domxref("Element.getAttribute", "getAttribute()")}} 를 사용하면 됩니다. 그러나 표준은 더 간단한 방법을 정의합니다.:  {{domxref("DOMStringMap")}} 는 {{domxref("HTMLElement.dataset", "dataset")}} 속성을 통해 읽어낼 수 있습니다.

- -

dataset 객체를 통해 data 속성을 가져오기 위해서는 속성 이름의 data- 뒷 부분을 사용합니다.(대시들은 camelCase로 변환되는 것에 주의하세요.) 

- -
var article = document.getElementById('electriccars');
-
-article.dataset.columns // "3"
-article.dataset.indexNumber // "12314"
-article.dataset.parent // "cars"
- -

각 속성은 문자열이며 읽거나 쓸 수 있습니다. 위의 경우에서 article.dataset.columns = 5와 같이 설정하면 해당 속성을 "5"로 변경할 것입니다.

- -

CSS 에서 접근하기

- -

데이터 속성은 순 HTML 속성이기 때문에 CSS에서도 접근할 수 있다는 것에 주목하세요. 예를 들어, 부모 데이터를 article에서 보여주려면 {{cssxref("attr")}} 함수의 생성된 content 를 사용하면 됩니다.:

- -
article::before {
-  content: attr(data-parent);
-}
- -

CSS의 속성 선택자도 데이터에 따라 스타일을 바꾸는데 사용할 수 있습니다.:

- -
article[data-columns='3'] {
-  width: 400px;
-}
-article[data-columns='4'] {
-  width: 600px;
-}
- -

이 JSBin 예시에서 이들이 함께 작동하는 것을 볼 수 있습니다. 

- -

데이터 속성들은 게임 점수와 같이 계속 변하는 정보도 저장할 수 있습니다. CSS선택자와 자바스크립트 접근을 이용해서 display 규칙을 사용하지 않고도 훌륭한 효과를 만들 수도 있습니다. 생성된 content와 CSS transition의 예시를 보려면 이 screencast 를 확인하세요. (JSBin 예시).

- -

데이터 값은 문자열입니다. 스타일을 적용하려면 숫자 값은 선택자에 따옴표 안에 써주어야 합니다.

- -

문제점

- -

보여야 하고 접근 가능해야하는 내용은 데이터 속성에 저장하지 마세요. 접근 보조 기술이 접근할 수 없기 때문입니다. 또한 검색 크롤러가 데이터 속성의 값을 찾지 못할 것입니다.

- -

고려해야할 주요한 문제는 인터넷 익스플로러의 지원과 성능입니다. 인터넷 익스플로러11+ 은 표준을 지원하지만, 이전 버전들은 dataset을 지원하지 않습니다. IE 10 이하를 지원하기 위해서는 대신 {{domxref("Element.getAttribute", "getAttribute()")}}를 통해 데이터 속성을 접근해야 합니다. 또한, JS 데이터 저장소에 저장하는 것과 비교해서 데이터 속성 읽기의 성능은 저조합니다.

- -

하지만 이 때문에, 커스텀 요소와 관련된 메타 데이터를 위해서는 훌륭한 해결책입니다.

- -

Firefox 49.0.2(아마도 이전/이후의 버전)에서는,1022 데이터를 초과하는 데이터 속성은 자바스크립트(EcmaScript 4)가 읽지 못할 것입니다.

- -

더 알아보기

- - diff --git a/files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html b/files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html deleted file mode 100644 index d6930ac381..0000000000 --- a/files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html +++ /dev/null @@ -1,327 +0,0 @@ ---- -title: 비디오 그리고 오디오 컨텐츠 -slug: Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
- -

이제 우리는 웹페이지에 간단한 이미지를 추가하는 것에 익숙해졌으므로, 다음 단계는 HTML 문서에 비디오와 오디오 플레이어를 추가하는 것이다! 이 기사에서는 {{htmlelement("video")}}와 {{htmlelement("audio")}}  요소들로 그렇게 하는 것에 대해 살펴보고, 동영상에 캡션/자막을 추가하는 방법을 살펴봄으로써 마무리하겠다.

- - - - - - - - - - - - -
사전 지식:기본 컴퓨터 사용능력, 기본 소프트웨어 설치, 파일 작업에 대한 기본 지식, HTML 기본 원리(HTML 시작에서 다룬 내용) 및 HTML의 이미지
목표:비디오 및 오디오 컨텐츠를 웹 페이지에 포함시키고 비디오에 캡션/자막을 추가하는 방법을 배웁니다.
- -

웹 상에서 비디오 그리고 오디오

- -

Web developers have wanted to use video and audio on the Web for a long time, ever since the early 2000s when we started to have bandwidth fast enough to support any kind of video (video files are much larger than text or even images.) In the early days, native web technologies such as HTML didn't have the ability to embed video and audio on the Web, so proprietary (or plugin-based) technologies like Flash (and later, Silverlight) became popular for handling such content. This kind of technology worked ok, but it had a number of problems, including not working well with HTML/CSS features, security issues, and accessibility issues.

- -

A native solution would solve much of this if implemented correctly. Fortunately, a few years later the {{glossary("HTML5")}} specification had such features added, with the {{htmlelement("video")}} and {{htmlelement("audio")}} elements, and some shiny new {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} for controlling them. We'll not be looking at JavaScript here — just the basic foundations that can be achieved with HTML.

- -

We won't be teaching you how to produce audio and video files — that requires a completely different skillset. We have provided you with sample audio and video files and example code for your own experimentation, in case you are unable to get hold of your own.

- -
-

Note: Before you begin here, you should also know that there are quite a few OVPs (online video providers) like YouTube, Dailymotion, and Vimeo, and online audio providers like Soundcloud. Such companies offer a convenient, easy way to host and consume videos, so you don't have to worry about the enormous bandwidth consumption. OVPs even usually offer ready-made code for embedding video/audio in your webpages; if you use that route, you can avoid some of the difficulties we discuss in this article. We'll be discussing this kind of service a bit more in the next article.

-
- -

The <video> element

- -

The {{htmlelement("video")}} element allows you to embed a video very easily. A really simple example looks like this:

- -
<video src="rabbit320.webm" controls>
-  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
-</video>
- -

The features of note are:

- -
-
{{htmlattrxref("src","video")}}
-
In the same way as for the {{htmlelement("img")}} element, the src (source) attribute contains a path to the video you want to embed. It works in exactly the same way.
-
{{htmlattrxref("controls","video")}}
-
Users must be able to control video and audio playback (it's especially critical for people who have epilepsy.) You must either use the controls attribute to include the browser's own control interface, or build your interface using the appropriate JavaScript API. At a minimum, the interface must include a way to start and stop the media, and to adjust the volume.
-
The paragraph inside the <video> tags
-
This is called fallback content — this will be displayed if the browser accessing the page doesn't support the <video> element, allowing us to provide a fallback for older browsers. This can be anything you like; in this case, we've provided a direct link to the video file, so the user can at least access it some way regardless of what browser they are using.
-
- -

The embedded video will look something like this:

- -

A simple video player showing a video of a small white rabbit

- -

You can try the example live here (see also the source code.)

- -

Using multiple source formats to improve compatibility

- -

There's a problem with the above example, which you may have noticed already if you've tried to access the live link above with an older browser like Internet Explorer or even an older version of Safari. The video won't play, because different browsers support different video (and audio) formats. Fortunately, there are things you can do to help prevent this from being a problem.

- -

Contents of a media file

- -

First, let's go through the terminology quickly. Formats like MP3, MP4 and WebM are called container formats. They define a structure in which the audio and/or video tracks that make up the media are stored, along with metadata describing the media, what codecs are used to encode its channels, and so forth.

- -

A WebM file containing a movie which has a main video track and one alternate angle track, plus audio for both English and Spanish, in addition to audio for an English commentary track can be conceptualized as shown in the diagram below. Also included are text tracks containing closed captions for the feature film, Spanish subtitles for the film, and English captions for the commentary.

- -

Diagram conceptualizing the contents of a media file at the track level.

- -

The audio and video tracks within the container hold data in the appropriate format for the codec used to encode that media. Different formats are used for audio tracks versus video tracks. Each audio track is encoded using an audio codec, while video tracks are encoded using (as you probably have guessed) a video codec. As we talked about before, different browsers support different video and audio formats, and different container formats (like MP3, MP4, and WebM, which in turn can contain different types of video and audio).

- -

For example:

- - - -

There are some special cases. For example, for some types of audio, a codec's data is often stored without a container, or with a simplified container. One such instance is the FLAC codec, which is stored most commonly in FLAC files, which are just raw FLAC tracks.

- -

Another such situation is the always-popular MP3 file. An "MP3 file" is actually an MPEG-1 Audio Layer III (MP3) audio track stored within an MPEG or MPEG-2 container. This is especially interesting since while most browsers don't support using MPEG media in the {{HTMLElement("video")}} and {{HTMLElement("audio")}} elements, they may still support MP3 due to its popularity.

- -

An audio player will tend to play an audio track directly, e.g. an MP3 or Ogg file. These don't need containers.

- -

Media file support in browsers

- -
-

Why do we have this problem? It turns out that several popular formats, such as MP3 and MP4/H.264, are excellent but are encumbered by patents; that is, there are patents covering some or all of the technology that they're based upon. In the United States, patents covered MP3 until 2017, and H.264 is encumbered by patents through at least 2027.

- -

Because of those patents, browsers that wish to implement support for those codecs must pay typically enormous license fees. In addition, some people simply prefer to avoid restricted software and prefer to use only open formats. Due to these legal and preferential reasons, web developers find themselves having to support multiple formats to capture their entire audience.

-
- -

The codecs described in the previous section exist to compress video and audio into manageable files, since raw audio and video are both exceedingly large. Each web browser supports an assortment of {{Glossary("Codec","codecs")}}, like Vorbis or H.264, which are used to convert the compressed audio and video into binary data and back. Each codec offers its own advantages and drawbacks, and each container may also offer its own positive and negative features affecting your decisions about which to use.

- -

Things become slightly more complicated because not only does each browser support a different set of container file formats, they also each support a different selection of codecs. In order to maximize the likelihood that your web site or app will work on a user's browser, you may need to provide each media file you use in multiple formats. If your site and the user's browser don't share a media format in common, your media simply won't play.

- -

Due to the intricacies of ensuring your app's media is viewable across every combination of browsers, platforms, and devices you wish to reach, choosing the best combination of codecs and container can be a complicated task. See {{SectionOnPage("/en-US/docs/Web/Media/Formats/Containers", "Choosing the right container")}} for help selecting the container file format best suited for your needs; similarly, see {{SectionOnPage("/en-US/docs/Web/Media/Formats/Video_codecs", "Choosing a video codec")}} and {{SectionOnPage("/en-US/docs/Web/Media/Formats/Audio_codecs", "Choosing an audio codec")}} for help selecting the first media codecs to use for your content and your target audience.

- -

One additional thing to keep in mind: mobile browsers may support additional formats not supported by their desktop equivalents, just like they may not support all the same formats the desktop version does. On top of that, both desktop and mobile browsers may be designed to offload handling of media playback (either for all media or only for specific types it can't handle internally). This means media support is partly dependent on what software the user has installed.

- -

So how do we do this? Take a look at the following updated example (try it live here, also):

- -
<video controls>
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
-</video>
- -

Here we've taken the src attribute out of the actual {{HTMLElement("video")}} tag, and instead included separate {{htmlelement("source")}} elements that point to their own sources. In this case the browser will go through the {{HTMLElement("source")}} elements and play the first one that it has the codec to support. Including WebM and MP4 sources should be enough to play your video on most platforms and browsers these days.

- -

Each <source> element also has a {{htmlattrxref("type", "source")}} attribute. This is optional, but it is advised that you include it. The type attribute contains the {{glossary("MIME type")}} of the file specified by the <source>, and browsers can use the type to immediately skip videos they don't understand. Iftype isn't included, browsers will load and try to play each file until they find one that works, which obviously takes time and is an unnecessary use of resources.

- -

Refer to our guide to media types and formats for help selecting the best containers and codecs for your needs, as well as to look up the right MIME types to specify for each.

- -

Other <video> features

- -

There are a number of other features you can include when displaying an HTML video. Take a look at our next example:

- -
<video controls width="400" height="400"
-       autoplay loop muted
-       poster="poster.png">
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
-</video>
-
- -

The resulting UI looks something like this:

- -

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!

- -

The new features are:

- -
-
{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}
-
You can control the video size either with these attributes or with {{Glossary("CSS")}}. In both cases, videos maintain their native width-height ratio — known as the aspect ratio. If the aspect ratio is not maintained by the sizes you set, the video will grow to fill the space horizontally, and the unfilled space will just be given a solid background color by default.
-
{{htmlattrxref("autoplay","video")}}
-
Makes the audio or video start playing right away, while the rest of the page is loading. You are advised not to use autoplaying video (or audio) on your sites, because users can find it really annoying.
-
{{htmlattrxref("loop","video")}}
-
Makes the video (or audio) start playing again whenever it finishes. This can also be annoying, so only use if really necessary.
-
{{htmlattrxref("muted","video")}}
-
Causes the media to play with the sound turned off by default.
-
{{htmlattrxref("poster","video")}}
-
The URL of an image which will be displayed before the video is played. It is intended to be used for a splash screen or advertising screen.
-
{{htmlattrxref("preload","video")}}
-
-

Used for buffering large files; it can take one of three values:

- -
    -
  • "none" does not buffer the file
    • -
  • "auto" buffers the media file
    • -
  • "metadata" buffers only the metadata for the file
    • -
-
-
- -

You can find the above example available to play live on Github (also see the source code.) Note that we haven't included the autoplay attribute in the live version — if the video starts to play as soon as the page loads, you don't get to see the poster!

- -

The <audio> element

- -

The {{htmlelement("audio")}} element works just like the {{htmlelement("video")}} element, with a few small differences as outlined below. A typical example might look like so:

- -
<audio controls>
-  <source src="viper.mp3" type="audio/mp3">
-  <source src="viper.ogg" type="audio/ogg">
-  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
-</audio>
- -

This produces something like the following in a browser:

- -

A simple audio player with a play button, timer, volume control, and progress bar

- -
-

Note: You can run the audio demo live on Github (also see the audio player source code.)

-
- -

This takes up less space than a video player, as there is no visual component — you just need to display controls to play the audio. Other differences from HTML video are as follows:

- - - -

Other than this, <audio> supports all the same features as <video> — review the above sections for more information about them.

- -

Restarting media playback

- -

At any time, you can reset the media to the beginning—including the process of selecting the best media source, if more than one is specified using {{HTMLElement("source")}} elements—by calling the element's {{domxref("HTMLMediaElement.load", "load()")}} method:

- -
const mediaElem = document.getElementById("my-media-element");
-mediaElem.load();
- -

Detecting track addition and removal

- -

You can monitor the track lists within a media element to detect when tracks are added to or removed from the element's media. For example, you can watch for the {{event("addtrack")}} event being fired on the associated {{domxref("AudioTrackList")}} object (retrieved via {{domxref("HTMLMediaElement.audioTracks")}}) to be informed when audio tracks are added to the media:

- -
const mediaElem = document.querySelector("video");
-mediaElem.audioTracks.onaddtrack = function(event) {
-  audioTrackAdded(event.track);
-}
-
- -

You'll find more information about this in our {{domxref("TrackEvent")}} documentation.

- -

Displaying video text tracks

- -

Now we'll discuss a slightly more advanced concept that is really useful to know about. Many people can't or don't want to hear the audio/video content they find on the Web, at least at certain times. For example:

- - - -

Wouldn't it be nice to be able to provide these people with a transcript of the words being spoken in the audio/video? Well, thanks to HTML video, you can. To do so we use the WebVTT file format and the {{htmlelement("track")}} element.

- -
-

Note: "Transcribe" means "to write down spoken words as text." The resulting text is a "transcript."

-
- -

WebVTT is a format for writing text files containing multiple strings of text along with metadata such as the time in the video at which each text string should be displayed, and even limited styling/positioning information. These text strings are called cues, and there are several kinds of cues which are used for different purposes. The most common cues are:

- -
-
subtitles
-
Translations of foreign material, for people who don't understand the words spoken in the audio.
-
captions
-
Synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can't hear the audio understand what is going on.
-
timed descriptions
-
Text which should be spoken by the media player in order to describe important visuals to blind or otherwise visually impaired users.
-
- -

A typical WebVTT file will look something like this:

- -
WEBVTT
-
-1
-00:00:22.230 --> 00:00:24.606
-This is the first subtitle.
-
-2
-00:00:30.739 --> 00:00:34.074
-This is the second.
-
-  ...
-
- -

To get this displayed along with the HTML media playback, you need to:

- -
    -
  1. Save it as a .vtt file in a sensible place.
    2. -
  2. Link to the .vtt file with the {{htmlelement("track")}} element. <track> should be placed within <audio> or <video>, but after all <source> elements. Use the {{htmlattrxref("kind","track")}} attribute to specify whether the cues are subtitles, captions, or descriptions. Further, use {{htmlattrxref("srclang","track")}} to tell the browser what language you have written the subtitles in.
    3. -
- -

Here's an example:

- -
<video controls>
-    <source src="example.mp4" type="video/mp4">
-    <source src="example.webm" type="video/webm">
-    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
-</video>
- -

This will result in a video that has subtitles displayed, kind of like this:

- -

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

- -

For more details, please read Adding captions and subtitles to HTML5 video. You can find the example that goes along with this article on Github, written by Ian Devlin (see the source code too.) This example uses some JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option — English, Deutsch, or Español.

- -
-

Note: Text tracks also help you with {{glossary("SEO")}}, since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.

-
- -

Active learning: Embedding your own audio and video

- -

For this active learning, we'd (ideally) like you to go out into the world and record some of your own video and audio — most phones these days allow you to record audio and video very easily, and provided you can transfer it on to your computer, you can use it. You may have to do some conversion to end up with a WebM and MP4 in the case of video, and an MP3 and Ogg in the case of audio, but there are enough programs out there to allow you to do this without too much trouble, such as Miro Video Converter and Audacity. We'd like you to have a go!

- -

If you are unable to source any video or audio, then you can feel free to use our sample audio and video files to carry out this exercise. You can also use our sample code for reference.

- -

We would like you to:

- -
    -
  1. Save your audio and video files in a new directory on your computer.
    2. -
  2. Create a new HTML file in the same directory, called index.html.
    3. -
  3. Add {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements to the page; make them display the default browser controls.
    4. -
  4. Give both of them {{HTMLElement("source")}} elements so that browsers will find the audio format they support best and load it. These should include {{htmlattrxref("type", "source")}} attributes.
    5. -
  5. Give the <video> element a poster that will be displayed before the video starts to be played. Have fun creating your own poster graphic.
    6. -
- -

For an added bonus, you could try researching text tracks, and work out how to add some captions to your video.

- -

Test your skills!

- -

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Multimedia and embedding. Note that the third assessment question in this test assumes knowledge of some of the techniques covered in the next article, so you may want to read that before attempting it.

- -

Summary

- -

And that's a wrap; we hope you had fun playing with video and audio in web pages! In the next article, we'll look at other ways of embedding content on the Web, using technologies like {{htmlelement("iframe")}} and {{htmlelement("object")}}.

- -

See also

- - - -

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

- -

In this module

- - diff --git a/files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html new file mode 100644 index 0000000000..d6930ac381 --- /dev/null +++ b/files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -0,0 +1,327 @@ +--- +title: 비디오 그리고 오디오 컨텐츠 +slug: Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
+ +

이제 우리는 웹페이지에 간단한 이미지를 추가하는 것에 익숙해졌으므로, 다음 단계는 HTML 문서에 비디오와 오디오 플레이어를 추가하는 것이다! 이 기사에서는 {{htmlelement("video")}}와 {{htmlelement("audio")}}  요소들로 그렇게 하는 것에 대해 살펴보고, 동영상에 캡션/자막을 추가하는 방법을 살펴봄으로써 마무리하겠다.

+ + + + + + + + + + + + +
사전 지식:기본 컴퓨터 사용능력, 기본 소프트웨어 설치, 파일 작업에 대한 기본 지식, HTML 기본 원리(HTML 시작에서 다룬 내용) 및 HTML의 이미지
목표:비디오 및 오디오 컨텐츠를 웹 페이지에 포함시키고 비디오에 캡션/자막을 추가하는 방법을 배웁니다.
+ +

웹 상에서 비디오 그리고 오디오

+ +

Web developers have wanted to use video and audio on the Web for a long time, ever since the early 2000s when we started to have bandwidth fast enough to support any kind of video (video files are much larger than text or even images.) In the early days, native web technologies such as HTML didn't have the ability to embed video and audio on the Web, so proprietary (or plugin-based) technologies like Flash (and later, Silverlight) became popular for handling such content. This kind of technology worked ok, but it had a number of problems, including not working well with HTML/CSS features, security issues, and accessibility issues.

+ +

A native solution would solve much of this if implemented correctly. Fortunately, a few years later the {{glossary("HTML5")}} specification had such features added, with the {{htmlelement("video")}} and {{htmlelement("audio")}} elements, and some shiny new {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} for controlling them. We'll not be looking at JavaScript here — just the basic foundations that can be achieved with HTML.

+ +

We won't be teaching you how to produce audio and video files — that requires a completely different skillset. We have provided you with sample audio and video files and example code for your own experimentation, in case you are unable to get hold of your own.

+ +
+

Note: Before you begin here, you should also know that there are quite a few OVPs (online video providers) like YouTube, Dailymotion, and Vimeo, and online audio providers like Soundcloud. Such companies offer a convenient, easy way to host and consume videos, so you don't have to worry about the enormous bandwidth consumption. OVPs even usually offer ready-made code for embedding video/audio in your webpages; if you use that route, you can avoid some of the difficulties we discuss in this article. We'll be discussing this kind of service a bit more in the next article.

+
+ +

The <video> element

+ +

The {{htmlelement("video")}} element allows you to embed a video very easily. A really simple example looks like this:

+ +
<video src="rabbit320.webm" controls>
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
+</video>
+ +

The features of note are:

+ +
+
{{htmlattrxref("src","video")}}
+
In the same way as for the {{htmlelement("img")}} element, the src (source) attribute contains a path to the video you want to embed. It works in exactly the same way.
+
{{htmlattrxref("controls","video")}}
+
Users must be able to control video and audio playback (it's especially critical for people who have epilepsy.) You must either use the controls attribute to include the browser's own control interface, or build your interface using the appropriate JavaScript API. At a minimum, the interface must include a way to start and stop the media, and to adjust the volume.
+
The paragraph inside the <video> tags
+
This is called fallback content — this will be displayed if the browser accessing the page doesn't support the <video> element, allowing us to provide a fallback for older browsers. This can be anything you like; in this case, we've provided a direct link to the video file, so the user can at least access it some way regardless of what browser they are using.
+
+ +

The embedded video will look something like this:

+ +

A simple video player showing a video of a small white rabbit

+ +

You can try the example live here (see also the source code.)

+ +

Using multiple source formats to improve compatibility

+ +

There's a problem with the above example, which you may have noticed already if you've tried to access the live link above with an older browser like Internet Explorer or even an older version of Safari. The video won't play, because different browsers support different video (and audio) formats. Fortunately, there are things you can do to help prevent this from being a problem.

+ +

Contents of a media file

+ +

First, let's go through the terminology quickly. Formats like MP3, MP4 and WebM are called container formats. They define a structure in which the audio and/or video tracks that make up the media are stored, along with metadata describing the media, what codecs are used to encode its channels, and so forth.

+ +

A WebM file containing a movie which has a main video track and one alternate angle track, plus audio for both English and Spanish, in addition to audio for an English commentary track can be conceptualized as shown in the diagram below. Also included are text tracks containing closed captions for the feature film, Spanish subtitles for the film, and English captions for the commentary.

+ +

Diagram conceptualizing the contents of a media file at the track level.

+ +

The audio and video tracks within the container hold data in the appropriate format for the codec used to encode that media. Different formats are used for audio tracks versus video tracks. Each audio track is encoded using an audio codec, while video tracks are encoded using (as you probably have guessed) a video codec. As we talked about before, different browsers support different video and audio formats, and different container formats (like MP3, MP4, and WebM, which in turn can contain different types of video and audio).

+ +

For example:

+ + + +

There are some special cases. For example, for some types of audio, a codec's data is often stored without a container, or with a simplified container. One such instance is the FLAC codec, which is stored most commonly in FLAC files, which are just raw FLAC tracks.

+ +

Another such situation is the always-popular MP3 file. An "MP3 file" is actually an MPEG-1 Audio Layer III (MP3) audio track stored within an MPEG or MPEG-2 container. This is especially interesting since while most browsers don't support using MPEG media in the {{HTMLElement("video")}} and {{HTMLElement("audio")}} elements, they may still support MP3 due to its popularity.

+ +

An audio player will tend to play an audio track directly, e.g. an MP3 or Ogg file. These don't need containers.

+ +

Media file support in browsers

+ +
+

Why do we have this problem? It turns out that several popular formats, such as MP3 and MP4/H.264, are excellent but are encumbered by patents; that is, there are patents covering some or all of the technology that they're based upon. In the United States, patents covered MP3 until 2017, and H.264 is encumbered by patents through at least 2027.

+ +

Because of those patents, browsers that wish to implement support for those codecs must pay typically enormous license fees. In addition, some people simply prefer to avoid restricted software and prefer to use only open formats. Due to these legal and preferential reasons, web developers find themselves having to support multiple formats to capture their entire audience.

+
+ +

The codecs described in the previous section exist to compress video and audio into manageable files, since raw audio and video are both exceedingly large. Each web browser supports an assortment of {{Glossary("Codec","codecs")}}, like Vorbis or H.264, which are used to convert the compressed audio and video into binary data and back. Each codec offers its own advantages and drawbacks, and each container may also offer its own positive and negative features affecting your decisions about which to use.

+ +

Things become slightly more complicated because not only does each browser support a different set of container file formats, they also each support a different selection of codecs. In order to maximize the likelihood that your web site or app will work on a user's browser, you may need to provide each media file you use in multiple formats. If your site and the user's browser don't share a media format in common, your media simply won't play.

+ +

Due to the intricacies of ensuring your app's media is viewable across every combination of browsers, platforms, and devices you wish to reach, choosing the best combination of codecs and container can be a complicated task. See {{SectionOnPage("/en-US/docs/Web/Media/Formats/Containers", "Choosing the right container")}} for help selecting the container file format best suited for your needs; similarly, see {{SectionOnPage("/en-US/docs/Web/Media/Formats/Video_codecs", "Choosing a video codec")}} and {{SectionOnPage("/en-US/docs/Web/Media/Formats/Audio_codecs", "Choosing an audio codec")}} for help selecting the first media codecs to use for your content and your target audience.

+ +

One additional thing to keep in mind: mobile browsers may support additional formats not supported by their desktop equivalents, just like they may not support all the same formats the desktop version does. On top of that, both desktop and mobile browsers may be designed to offload handling of media playback (either for all media or only for specific types it can't handle internally). This means media support is partly dependent on what software the user has installed.

+ +

So how do we do this? Take a look at the following updated example (try it live here, also):

+ +
<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+ +

Here we've taken the src attribute out of the actual {{HTMLElement("video")}} tag, and instead included separate {{htmlelement("source")}} elements that point to their own sources. In this case the browser will go through the {{HTMLElement("source")}} elements and play the first one that it has the codec to support. Including WebM and MP4 sources should be enough to play your video on most platforms and browsers these days.

+ +

Each <source> element also has a {{htmlattrxref("type", "source")}} attribute. This is optional, but it is advised that you include it. The type attribute contains the {{glossary("MIME type")}} of the file specified by the <source>, and browsers can use the type to immediately skip videos they don't understand. Iftype isn't included, browsers will load and try to play each file until they find one that works, which obviously takes time and is an unnecessary use of resources.

+ +

Refer to our guide to media types and formats for help selecting the best containers and codecs for your needs, as well as to look up the right MIME types to specify for each.

+ +

Other <video> features

+ +

There are a number of other features you can include when displaying an HTML video. Take a look at our next example:

+ +
<video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png">
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+
+ +

The resulting UI looks something like this:

+ +

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!

+ +

The new features are:

+ +
+
{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}
+
You can control the video size either with these attributes or with {{Glossary("CSS")}}. In both cases, videos maintain their native width-height ratio — known as the aspect ratio. If the aspect ratio is not maintained by the sizes you set, the video will grow to fill the space horizontally, and the unfilled space will just be given a solid background color by default.
+
{{htmlattrxref("autoplay","video")}}
+
Makes the audio or video start playing right away, while the rest of the page is loading. You are advised not to use autoplaying video (or audio) on your sites, because users can find it really annoying.
+
{{htmlattrxref("loop","video")}}
+
Makes the video (or audio) start playing again whenever it finishes. This can also be annoying, so only use if really necessary.
+
{{htmlattrxref("muted","video")}}
+
Causes the media to play with the sound turned off by default.
+
{{htmlattrxref("poster","video")}}
+
The URL of an image which will be displayed before the video is played. It is intended to be used for a splash screen or advertising screen.
+
{{htmlattrxref("preload","video")}}
+
+

Used for buffering large files; it can take one of three values:

+ +
    +
  • "none" does not buffer the file
    • +
  • "auto" buffers the media file
    • +
  • "metadata" buffers only the metadata for the file
    • +
+
+
+ +

You can find the above example available to play live on Github (also see the source code.) Note that we haven't included the autoplay attribute in the live version — if the video starts to play as soon as the page loads, you don't get to see the poster!

+ +

The <audio> element

+ +

The {{htmlelement("audio")}} element works just like the {{htmlelement("video")}} element, with a few small differences as outlined below. A typical example might look like so:

+ +
<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
+</audio>
+ +

This produces something like the following in a browser:

+ +

A simple audio player with a play button, timer, volume control, and progress bar

+ +
+

Note: You can run the audio demo live on Github (also see the audio player source code.)

+
+ +

This takes up less space than a video player, as there is no visual component — you just need to display controls to play the audio. Other differences from HTML video are as follows:

+ + + +

Other than this, <audio> supports all the same features as <video> — review the above sections for more information about them.

+ +

Restarting media playback

+ +

At any time, you can reset the media to the beginning—including the process of selecting the best media source, if more than one is specified using {{HTMLElement("source")}} elements—by calling the element's {{domxref("HTMLMediaElement.load", "load()")}} method:

+ +
const mediaElem = document.getElementById("my-media-element");
+mediaElem.load();
+ +

Detecting track addition and removal

+ +

You can monitor the track lists within a media element to detect when tracks are added to or removed from the element's media. For example, you can watch for the {{event("addtrack")}} event being fired on the associated {{domxref("AudioTrackList")}} object (retrieved via {{domxref("HTMLMediaElement.audioTracks")}}) to be informed when audio tracks are added to the media:

+ +
const mediaElem = document.querySelector("video");
+mediaElem.audioTracks.onaddtrack = function(event) {
+  audioTrackAdded(event.track);
+}
+
+ +

You'll find more information about this in our {{domxref("TrackEvent")}} documentation.

+ +

Displaying video text tracks

+ +

Now we'll discuss a slightly more advanced concept that is really useful to know about. Many people can't or don't want to hear the audio/video content they find on the Web, at least at certain times. For example:

+ + + +

Wouldn't it be nice to be able to provide these people with a transcript of the words being spoken in the audio/video? Well, thanks to HTML video, you can. To do so we use the WebVTT file format and the {{htmlelement("track")}} element.

+ +
+

Note: "Transcribe" means "to write down spoken words as text." The resulting text is a "transcript."

+
+ +

WebVTT is a format for writing text files containing multiple strings of text along with metadata such as the time in the video at which each text string should be displayed, and even limited styling/positioning information. These text strings are called cues, and there are several kinds of cues which are used for different purposes. The most common cues are:

+ +
+
subtitles
+
Translations of foreign material, for people who don't understand the words spoken in the audio.
+
captions
+
Synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can't hear the audio understand what is going on.
+
timed descriptions
+
Text which should be spoken by the media player in order to describe important visuals to blind or otherwise visually impaired users.
+
+ +

A typical WebVTT file will look something like this:

+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --> 00:00:34.074
+This is the second.
+
+  ...
+
+ +

To get this displayed along with the HTML media playback, you need to:

+ +
    +
  1. Save it as a .vtt file in a sensible place.
    2. +
  2. Link to the .vtt file with the {{htmlelement("track")}} element. <track> should be placed within <audio> or <video>, but after all <source> elements. Use the {{htmlattrxref("kind","track")}} attribute to specify whether the cues are subtitles, captions, or descriptions. Further, use {{htmlattrxref("srclang","track")}} to tell the browser what language you have written the subtitles in.
    3. +
+ +

Here's an example:

+ +
<video controls>
+    <source src="example.mp4" type="video/mp4">
+    <source src="example.webm" type="video/webm">
+    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
+</video>
+ +

This will result in a video that has subtitles displayed, kind of like this:

+ +

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

+ +

For more details, please read Adding captions and subtitles to HTML5 video. You can find the example that goes along with this article on Github, written by Ian Devlin (see the source code too.) This example uses some JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option — English, Deutsch, or Español.

+ +
+

Note: Text tracks also help you with {{glossary("SEO")}}, since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.

+
+ +

Active learning: Embedding your own audio and video

+ +

For this active learning, we'd (ideally) like you to go out into the world and record some of your own video and audio — most phones these days allow you to record audio and video very easily, and provided you can transfer it on to your computer, you can use it. You may have to do some conversion to end up with a WebM and MP4 in the case of video, and an MP3 and Ogg in the case of audio, but there are enough programs out there to allow you to do this without too much trouble, such as Miro Video Converter and Audacity. We'd like you to have a go!

+ +

If you are unable to source any video or audio, then you can feel free to use our sample audio and video files to carry out this exercise. You can also use our sample code for reference.

+ +

We would like you to:

+ +
    +
  1. Save your audio and video files in a new directory on your computer.
    2. +
  2. Create a new HTML file in the same directory, called index.html.
    3. +
  3. Add {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements to the page; make them display the default browser controls.
    4. +
  4. Give both of them {{HTMLElement("source")}} elements so that browsers will find the audio format they support best and load it. These should include {{htmlattrxref("type", "source")}} attributes.
    5. +
  5. Give the <video> element a poster that will be displayed before the video starts to be played. Have fun creating your own poster graphic.
    6. +
+ +

For an added bonus, you could try researching text tracks, and work out how to add some captions to your video.

+ +

Test your skills!

+ +

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Multimedia and embedding. Note that the third assessment question in this test assumes knowledge of some of the techniques covered in the next article, so you may want to read that before attempting it.

+ +

Summary

+ +

And that's a wrap; we hope you had fun playing with video and audio in web pages! In the next article, we'll look at other ways of embedding content on the Web, using technologies like {{htmlelement("iframe")}} and {{htmlelement("object")}}.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

+ +

In this module

+ + diff --git a/files/ko/learn/infrastructure/index.html b/files/ko/learn/infrastructure/index.html deleted file mode 100644 index 3752c49274..0000000000 --- a/files/ko/learn/infrastructure/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Infrastructure -slug: Learn/Infrastructure -translation_of: Learn/Common_questions -translation_of_original: Learn/Infrastructure ---- -

이 능력은 인터넷 기술 스택에 대해  잘 이해할 수 있도록 해줍니다. 알아야 할 것들을 작고, 세부적 기술들로 나누었습니다:

- -

기본 스킬

- -

웹에 익숙하지 않으시다면 여기서부터 시작하세요. 웹에 관련된 전문용어를 이해하기위해서 용어사전을 참고하는 것을 추천합니다.

- -

중급 스킬

- -

웹에 익숙해지셨다면, 여기에 더 자세한 것들이 있습니다:

- -

고급 스킬

- -

경험있는 웹 저자라면, 특정 주제나 특별한 기술들에 흥미를 느끼실 것입니다.

diff --git a/files/ko/learn/javascript/building_blocks/conditionals/index.html b/files/ko/learn/javascript/building_blocks/conditionals/index.html new file mode 100644 index 0000000000..858d6f9116 --- /dev/null +++ b/files/ko/learn/javascript/building_blocks/conditionals/index.html @@ -0,0 +1,770 @@ +--- +title: Making decisions in your code — 조건문 +slug: Learn/JavaScript/Building_blocks/조건문 +translation_of: Learn/JavaScript/Building_blocks/conditionals +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}
+ +

어떤 프로그래밍 언어든 코드는 의사 결정을 내리고 입력 내용에 따라 작업을 수행해야합니다. 예를 들어 게임에서 플레이어의 생명 수치가 0이면 게임이 종료됩니다. 날씨 앱에서는 아침에 해가 뜬 그림을 보여주고 밤에는 달과 별을 보여줍니다. 이 문서에서는 JavaScript에서 조건문이 작동하는 방법을 살펴 보겠습니다.

+ + + + + + + + + + + + +
선행 조건: +

기본적인 컴퓨터 활용 능력, HTML, CSS, Javascript 첫 걸음

+
목표: +

자바스크립트에서 조건문의 사용법을 이해합니다.

+
+ +

당신은 하나의 조건을 가질 수 있습니다.

+ +

사람(과 동물)은 작은 것(과자를 하나 먹을까? 두개 먹을까?)부터 큰 것(고향에 머물면서 아버지의 농장에서 일해야 할까? 아니면 천체물리학을 공부하러 미국으로 유학을 갈까?)까지 자신의 경험을 바탕으로 결정합니다.

+ +

조건문은 결정해야 하는 선택(예를 들면, "과자 하나? 두 개?)부터 선택의 결과(과자를 하나 먹으면 여전히 배고플 수 있고, 두 개를 먹으면 배는 부르지만, 엄마한테 과자를 다 먹었다고 혼날 수 있다)까지 자바스크립트에서 의사 결정을 내릴 수 있습니다. 

+ +

+ +

if ... else 문

+ +

자바스크립트에서 사용하는 조건문 중에서 가장 일반적인 유형을 봅시다. — the humble if ... else statement.

+ +

if ... else 문법

+ +

if...else 문법은 {{glossary("pseudocode")}} 다음과 같습니다:

+ +
if (condition) {
+  code to run if condition is true
+} else {
+  run some other code instead
+}
+ +

Here we've got:

+ +
    +
  1. 키워드 if 뒤에 괄호가 옵니다.
    2. +
  2. 시험할 조건은 괄호 안에 위치합니다. (전형적으로 "이 값이 다른 값보다 큰지", "이 값이 존재하는지") 이 조건은 마지막 모듈에서 논의했던 비교연산자(comparison operators)를 사용할 것이고 true 나  false를 리턴합니다.
    3. +
  3. 내부의 중괄호 안에 코드가 있습니다. — 이것은 우리가 좋아하는 코드일 수 있고, 조건이 true를 반환하는 경우에만 실행됩니다.
    4. +
  4. 키워드 else.
    5. +
  5. 또 다른 중괄호 안에 더 많은 코드가 있습니다. — 이것은 우리가 좋아하는 코드 일 수 있고, 조건이 true가 아닌 경우에만 실행됩니다.
    6. +
+ +

이 코드는 사람이 읽을 수 있습니다. — "만약 조건이 true면, 코드 A를 실행하고, 아니면 코드 B를 실행한다." 라고 말합니다.

+ +

반드시 else와 두 번째 중괄호를 포함하지 않아도 된다는 것을 주목해야 합니다. — 다음은 또한 완벽한 코드입니다.:

+ +
if (condition) {
+  code to run if condition is true
+}
+
+run some other code
+ +

하지만, 여기서 조심 해야 할 점— 위의 경우, 코드의 두 번째 블록은 조건문에 의해서 제어되지 않습니다. 그래서 조건이 true나 false를 리턴하는 것에 관계없이 항상 동작합니다. 이것이 반드시 나쁜 것은 아니지만, 원하는 대로 되지 않을 수도 있습니다. — 코드의 한 블록이나 다른 블록이 실행되거나 둘 다 실행되지 않는 것을 원할 것입니다.

+ +

마지막으로, 다음과 같이 짧은 스타일로 중괄호 없이 쓰여진 if...else를  볼 수 있었을 것입니다.:

+ +
if (condition) code to run if condition is true
+else run some other code instead
+ +

이것은 완벽하게 유효한 코드이지만, 사용하는 것을 추천하지 않습니다. — 중괄호를 사용하여 코드를 구분하고, 여러 줄과 들여쓰기를 사용한다면, 코드를 쉽게 읽고, 진행되는 작업을 훨씬 쉽게 처리할 수 있습니다.

+ +

실제 예시

+ +

문법을 잘 이해하기 위해서 실제 예시를 알아봅시다. 어머니나 아버지가 아이에게 집안일을 도와달라고 요청한다고 상상해 봅시다. 부모님께서 "우리 애기, 만약에 쇼핑 하고 가는 걸 도와주면, 용돈을 더 줄게! 그럼 네가 원하는 걸 살 수 있을거야"라고 말씀 하신다면, 자바스크립트에서 이것을 다음과 같이 표현할 수 있습니다.

+ +
var shoppingDone = false;
+
+if (shoppingDone === true) {
+  var childsAllowance = 10;
+} else {
+  var childsAllowance = 5;
+}
+ +

위 코드에는 항상 false를 리턴하는 shoppingDone변수를 결과로 얻을 것입니다. 아이에게 실망을 안겨주겠죠. 아이가 부모님과 함께 쇼핑을 간다면 우리가 부모님을 위해 shoppingDone변수를 true로 설정하는 메커니즘을 만들 수 있겠죠.

+ +
+

Note: GitHub에서 예시를 더 볼 수 있습니다.  complete version of this example on GitHub (also see it running live.)

+
+ +

else if

+ +

지난 예시에서는  두 가지 선택과 결과가 있었죠. — 하지만 우리가 두 가지보다 더 많은 선택과 결과를 원한다면?

+ +

추가로 선택/결과를 if...else에 연결하는 방법이 있습니다. — else if를 사용하여. 각 추가 선택은 if() { ... }와 else { ... }사이에 추가적인 블록이 필요합니다. 간단한 날씨 예보 어플리케이션의 일부가 될 수 있는 다음의 예시를 확인하세요. 

+ +
<label for="weather">Select the weather type today: </label>
+<select id="weather">
+  <option value="">--Make a choice--</option>
+  <option value="sunny">Sunny</option>
+  <option value="rainy">Rainy</option>
+  <option value="snowing">Snowing</option>
+  <option value="overcast">Overcast</option>
+</select>
+
+<p></p>
+ +
var select = document.querySelector('select');
+var para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+function setWeather() {
+  var choice = select.value;
+
+  if (choice === 'sunny') {
+    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+  } else if (choice === 'rainy') {
+    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+  } else if (choice === 'snowing') {
+    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+  } else if (choice === 'overcast') {
+    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+  } else {
+    para.textContent = '';
+  }
+}
+
+
+ +

{{ EmbedLiveSample('else_if', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

+ +
    +
  1. 여기서 우리는 HTML {{htmlelement("select")}} 엘리먼트를 사용하여 다른 날씨 선택과 간단한 문단을 만들 수 있습니다. 
    2. +
  2. 자바스크립트에서 {{htmlelement("select")}} 와 {{htmlelement("p")}} 엘리먼트를 모두 저장하고 있고,  <select> 엘리먼트에 이벤트 리스너를 추가하고, 값이 변할 때 setWeather()함수가 동작합니다.
    3. +
  3. 함수가 동작했을 때, 현재 <select> 에서 선택된 값을 choice라는 변수에 설정합니다. 그런 다음 조건문을 사용하여 choice값에 따라 문단 안에 다른 텍스트를 표시합니다. if() {...} block에서 테스트된 첫 번째를 제외하고, else if() {...}에서 조건은 테스트되는 방법에 유의하세요.
    4. +
  4. else {...}안의 가장 마지막 선택은 기본적으로 "최후의 수단" 옵션입니다. — true인 조건이 없으면 코드가 실행됩니다. 이 경우 아무것도 선택되지 않으면 예를 들어, 사용자가 처음에 표시한 "Make a choice" placeholder 옵션에서 다시 선택하기로 한다면, 문단의 텍스트를 비우는 역할을 합니다.
    5. +
+ +
+

Note: You can also find this example on GitHub (see it running live on there also.)

+
+ +

비교 연산자

+ +

비교 연산자는 우리의 조건문 안에 조건을 테스트하는데 사용된다. 우리는 먼저 Basic math in JavaScript — numbers and operators 에서 비교 연산자를 봤습니다. 

+ + + +
+

Note: Review the material at the previous link if you want to refresh your memories on these.

+
+ +

boolean(true/false)값과 몇 번이고 다시 만날 일반적인 패턴을 테스트하는 것의 특별한 언급을 하고 싶었습니다.. false, undefined, null, 0, NaN이나 빈 문자열('')이 아닌 어떤 값은 조건문이 테스트 되었을 때, true를 리턴합니다.. 그러므로 우리는 변수가 참인지 값이 존재하는지 간단하게 변수 이름을 사용할 수 있습니다.. 예를 들어,

+ +
var cheese = 'Cheddar';
+
+if (cheese) {
+  console.log('Yay! Cheese available for making cheese on toast.');
+} else {
+  console.log('No cheese on toast for you today.');
+}
+ +

그리고 부모님을 위해 집안일을 하는 아이에 대한 이전 예시에서 리턴하는 것을 다음과 같이 작성할 수 있었습니다.

+ +
var shoppingDone = false;
+
+if (shoppingDone) { // don't need to explicitly specify '=== true'
+  var childsAllowance = 10;
+} else {
+  var childsAllowance = 5;
+}
+ +

if ... else 중첩

+ +

if...else문을 다른 문 앞에 넣는 것(중첩하여)은 완벽하게 가능합니다.. 예를 들어, 온도가 무엇인지에 따라 더 많은 선택의 옵션을 보여주기위해 우리의 날씨 예보 어플리케이션에서 업데이트 할 수 있습니다..

+ +
if (choice === 'sunny') {
+  if (temperature < 86) {
+    para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
+  } else if (temperature >= 86) {
+    para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
+  }
+}
+ +

비록 코드가 모두 동작하더라도, 각 if...else문은 다른 문과 완전히 독립적으로 동작합니다..

+ +

논리 연산자: AND, OR and NOT

+ +

만약 중첩된 if...else문을 작성하는 것 없이 다양한 조건을 테스트하길 원한다면 logical operators 이 당신을 도와줄 수 있습니다. 조건 내에서 사용될 때, 처음 두 가지는 다음과 같이 합니다.

+ + + +

AND 예시를 위해서 앞의 예제 코드 중에서 다음과 같이 작성할 수 있습니다.

+ +
if (choice === 'sunny' && temperature < 86) {
+  para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
+} else if (choice === 'sunny' && temperature >= 86) {
+  para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
+}
+ +

위 예시에서, 첫 번째 코드 블록은 choice === 'sunny'와 temperature < 86가 true를 리턴한다면 실행될 것입니다.

+ +

빠르게 OR 예시를 봅시다.

+ +
if (iceCreamVanOutside || houseStatus === 'on fire') {
+  console.log('You should leave the house quickly.');
+} else {
+  console.log('Probably should just stay in then.');
+}
+ +

논리 연산자의 마지막 유형인 ! 연산자로 표현되는 NOT은 표현식을 무효화할 수 있습니다. 위 OR 예시와 함께 봅시다.

+ +
if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
+  console.log('Probably should just stay in then.');
+} else {
+  console.log('You should leave the house quickly.');
+}
+ +

위 예시에서, OR 문이 true를 리턴한다면, NOT 연산자는 전체 표현식이 false를 리턴하도록 무효화할 것입니다.

+ +

어떤 구조든지 당신이 원하는 만큼 많은 논리 문을 결합할 수 있습니다. 다음 예시는 두 가지 OR 문 모두 true를 리턴하면, 전체 AND문은 true를 리턴한다는 것을 의미하는 코드를 실행합니다.

+ +
if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
+  // run the code
+}
+ +

조건 문에서 논리적 OR 연산자를 사용할 때 일반적인 실수는 값을 한번 체크하는 변수를 명시한 다음, || (OR) 연산로 분리하여 true를 리턴될 수 있는 변수의 리스트를 사용한다는 것입니다. 예를 들어: 

+ +
if (x === 5 || 7 || 10 || 20) {
+  // run my code
+}
+ +

이 경우에 if(...) 내부 조건은 7(또는 다른 0이 아닌 값)이 항상 true가 되므로, 항상 true를 계산할 것입니다. 조건은 "x가 5와 같거나 7이 true면, 항상 그렇다"라고 분명하게 말하고 있습니다. 이것은 논리적으로 우리가 원하는 것이 아닙니다! 이를 동작하게 하기 위해 우리는 각 OR 연산자를 완전하게 명시해야 합니다.

+ +
if (x === 5 || x === 7 || x === 10 ||x === 20) {
+  // run my code
+}
+ +

switch 문

+ +

if...else 문은 조건문 코드가 잘 동작되는 일을 하지만, 단점이 없지 않습니다. 그 문은 두 가지 선택을 가지고 있는 경우에 주로 유용합니다. 그리고 각각은 실행되기 위한 합리적인 양의 코드가 필요하고, AND/OR 조건은 복잡합니다.(e.g. 다수의 논리 연산자) 어떤 값의 선택으로 변수를 설정하거나 조건에 따라서 특정 문을 출력하는 경우 구문이 약간 번거로울 수 있습니다. 특히 많은 선택 항목이 있는 경우에 특히 그렇습니다.

+ +

switch statements 은 당신의 친구입니다. 이는 입력으로 하나의 표현식/값을 받고, 값과 일치하는 하나를 찾을 때까지 여러 항목을 살펴보고 그에 맞는 코드를 실행합니다. 여기 몇몇 많은 수도코드가 있습니다.

+ +
switch (expression) {
+  case choice1:
+    run this code
+    break;
+
+  case choice2:
+    run this code instead
+    break;
+
+  // include as many cases as you like
+
+  default:
+    actually, just run this code
+}
+ +

여기에서: 

+ +
    +
  1. 뒤에 괄호가 오는 키워드 switch.
    2. +
  2. 괄오 내부에는 표현식이나 값을 입력합니다.
    3. +
  3. 표현식이나 값이 될 수 있는 선택이 따라 오는 키워드 case는 콜론이 뒤에 옵니다.
    4. +
  4. break문은 뒤에 세미콜론이 옵니다. 이전의 선택이 표현식이나 값과 일치한다면 해당 코드 블록에서 실행을 멉추고, switch 문 아래에 있는 어떤 코드로 이동합니다.
    5. +
  5. 원하는 많은 다른 케이스를 입력할 수 있습니다. 
    6. +
  6. 키워드 default는 case들과 같은 코드를 입력하고, 일치하는 항목이 없으면 실행되는 기본 옵션입니다. case와 일치하지 않고, 예외가 필요하지 않는 경우 제외할 수 있습니다.
    7. +
+ +
+

Note: default를 반드시 포함하지 않고 생략가능합니다. 다만 필요하다면 미지의 경우를 처리하기 위해 포함해야 합니다.

+
+ +

A switch example

+ +

실전 예제를 해봅시다.switch문을 활용해 일기예보 애플리케이션을 작성하세요.

+ +
<label for="weather">Select the weather type today: </label>
+<select id="weather">
+  <option value="">--Make a choice--</option>
+  <option value="sunny">Sunny</option>
+  <option value="rainy">Rainy</option>
+  <option value="snowing">Snowing</option>
+  <option value="overcast">Overcast</option>
+</select>
+
+<p></p>
+ +
var select = document.querySelector('select');
+var para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+
+function setWeather() {
+  var choice = select.value;
+
+  switch (choice) {
+    case 'sunny':
+      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+      break;
+    case 'rainy':
+      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+      break;
+    case 'snowing':
+      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+      break;
+    case 'overcast':
+      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+      break;
+    default:
+      para.textContent = '';
+  }
+}
+ +

{{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Note: You can also find this example on GitHub (see it running live on there also.)

+
+ +

삼항연산자 

+ +

다른 예제로 들어가기 전에 소개하고 싶은 마지막 구문이 있다.삼항(조건)연산자( ternary or conditional operator)는 조건이 참이면 한 값/표현식을 반환하고 조건이 거짓이면 다른  값/표현식을 반환하는 구문이다.— 이것은 어떤 상황에 유용할 수 있으며, 참/거짓 조건을 간단히 선택할 수 있는 상황이라면 if...else 블록문보다 코드를 훨씬 적게 사용할수 있다. 이 pseudocode는 아래와 같다:

+ +
( condition ) ? run this code : run this code instead
+ +

그러면 간단한 예를 보자:

+ +
var greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';
+ +

isBirthday 라는 변수명이 여기 있다— 게스트가 생일이면 '해피버스데이' 메세지를 보내고, 생일이 아니라면  일반적인 '인사' 메세지를 보내는 경우에 해당된다..

+ +

삼항 연산자 예제

+ +

삼항연산자로 변수값을 정할 필요가 없다; 단지  좋아하는 함수나 코드를 사용하면 된다. — . 이 예제는 삼항연산자를 사용하여 사이트의 스타일링 테마를 선택할  수 있는 것을 보여준다

+ +
<label for="theme">Select theme: </label>
+<select id="theme">
+  <option value="white">White</option>
+  <option value="black">Black</option>
+</select>
+
+<h1>This is my website</h1>
+ +
var select = document.querySelector('select');
+var html = document.querySelector('html');
+document.body.style.padding = '10px';
+
+function update(bgColor, textColor) {
+  html.style.backgroundColor = bgColor;
+  html.style.color = textColor;
+}
+
+select.onchange = function() {
+  ( select.value === 'black' ) ? update('black','white') : update('white','black');
+}
+
+ +

{{ EmbedLiveSample('Ternary_operator_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +

여기에는  black이나 white의 테마를 고르기 위한 '{{htmlelement('select')}}' 엘리먼트가 있고, 여기에 더하여 웹사이트 제목을 보여주는 '{{htmlelement('h1')}}" 엘리먼트가 있다.  update() 함수를 덧붙이면 두 칼라를 입력 인수(parameter)로 선택할 수 있다. 웹사이트 배경 칼라가 첫 번째 칼라로 지정되고, 텍스트 칼라가 두 번째로 정해진다.

+ +

끝으로,  'onchange' 이벤트 리스너는 삼중연산자를 포함하는 함수를 움직('run')이게 합니다. select.value === 'black' 조건을 테스트는 하는 것으로 시작하는데, 이 조건이 참이면  update() 함수가 배경색은 black으로 텍스트 색은  white로 동작하게 합니다. 이와는 반대로 select theme이  white로 선택되면(조건이 거짓이면) , update() 함수는  배경색은 white으로 텍스트 색은  black로 동작하게 합니다.

+ +
+

Note: You can also find this example on GitHub (see it running live on there also.)

+
+ +

Active learning: 간단한 달력 만들기

+ +

이 예제에서는 간단한 달력 어플리케이션을 만들어 볼겁니다. 코드에는 다음과 같은 것들이 들어 있습니다.

+ + + +

onchange 핸들러 함수내에 조건문을 작성해야 합니다. 위치는 // ADD CONDITIONAL HERE 주석 바로 아래입니다. 조건문은 다음을 만족해야 합니다:

+ +
    +
  1. 선택한 달 보기(이것은 값이 변경된 후의 요소 값이 됨.) 
    2. +
  2. days 란 변수를 선택한 달의 일 수와 같게 하기. 다만 윤년은 무시할 수 있다.
    3. +
+ +

Hints:

+ + + +

만약 실수를 하더라도 'Reset' 버튼으로 초기화 할 수 있습니다. 해답을 모르겠다면 "Show solution" 으로 해결방법을 확인하세요.

+ + + +

{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}

+ +

Active learning: 색깔 고르기

+ +

In this example you are going to take the ternary operator example we saw earlier and convert the ternary operator into a switch statement that will allow us to apply more choices to the simple website. Look at the {{htmlelement("select")}} — this time you'll see that it has not two theme options, but five. You need to add a switch statement just underneath the // ADD SWITCH STATEMENT comment:

+ + + +

If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.

+ + + +

{{ EmbedLiveSample('Playable_code_2', '100%', 950, "", "", "hide-codepen-jsfiddle") }}

+ +

Conclusion

+ +

And that's all you really need to know about conditional structures in JavaScript right now! I'm sure you'll have understood these concepts and worked through the examples with ease; if there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.

+ +

See also

+ + + +

{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}

+ +

In this module

+ + diff --git "a/files/ko/learn/javascript/building_blocks/\354\241\260\352\261\264\353\254\270/index.html" "b/files/ko/learn/javascript/building_blocks/\354\241\260\352\261\264\353\254\270/index.html" deleted file mode 100644 index 858d6f9116..0000000000 --- "a/files/ko/learn/javascript/building_blocks/\354\241\260\352\261\264\353\254\270/index.html" +++ /dev/null @@ -1,770 +0,0 @@ ---- -title: Making decisions in your code — 조건문 -slug: Learn/JavaScript/Building_blocks/조건문 -translation_of: Learn/JavaScript/Building_blocks/conditionals ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}
- -

어떤 프로그래밍 언어든 코드는 의사 결정을 내리고 입력 내용에 따라 작업을 수행해야합니다. 예를 들어 게임에서 플레이어의 생명 수치가 0이면 게임이 종료됩니다. 날씨 앱에서는 아침에 해가 뜬 그림을 보여주고 밤에는 달과 별을 보여줍니다. 이 문서에서는 JavaScript에서 조건문이 작동하는 방법을 살펴 보겠습니다.

- - - - - - - - - - - - -
선행 조건: -

기본적인 컴퓨터 활용 능력, HTML, CSS, Javascript 첫 걸음

-
목표: -

자바스크립트에서 조건문의 사용법을 이해합니다.

-
- -

당신은 하나의 조건을 가질 수 있습니다.

- -

사람(과 동물)은 작은 것(과자를 하나 먹을까? 두개 먹을까?)부터 큰 것(고향에 머물면서 아버지의 농장에서 일해야 할까? 아니면 천체물리학을 공부하러 미국으로 유학을 갈까?)까지 자신의 경험을 바탕으로 결정합니다.

- -

조건문은 결정해야 하는 선택(예를 들면, "과자 하나? 두 개?)부터 선택의 결과(과자를 하나 먹으면 여전히 배고플 수 있고, 두 개를 먹으면 배는 부르지만, 엄마한테 과자를 다 먹었다고 혼날 수 있다)까지 자바스크립트에서 의사 결정을 내릴 수 있습니다. 

- -

- -

if ... else 문

- -

자바스크립트에서 사용하는 조건문 중에서 가장 일반적인 유형을 봅시다. — the humble if ... else statement.

- -

if ... else 문법

- -

if...else 문법은 {{glossary("pseudocode")}} 다음과 같습니다:

- -
if (condition) {
-  code to run if condition is true
-} else {
-  run some other code instead
-}
- -

Here we've got:

- -
    -
  1. 키워드 if 뒤에 괄호가 옵니다.
    2. -
  2. 시험할 조건은 괄호 안에 위치합니다. (전형적으로 "이 값이 다른 값보다 큰지", "이 값이 존재하는지") 이 조건은 마지막 모듈에서 논의했던 비교연산자(comparison operators)를 사용할 것이고 true 나  false를 리턴합니다.
    3. -
  3. 내부의 중괄호 안에 코드가 있습니다. — 이것은 우리가 좋아하는 코드일 수 있고, 조건이 true를 반환하는 경우에만 실행됩니다.
    4. -
  4. 키워드 else.
    5. -
  5. 또 다른 중괄호 안에 더 많은 코드가 있습니다. — 이것은 우리가 좋아하는 코드 일 수 있고, 조건이 true가 아닌 경우에만 실행됩니다.
    6. -
- -

이 코드는 사람이 읽을 수 있습니다. — "만약 조건이 true면, 코드 A를 실행하고, 아니면 코드 B를 실행한다." 라고 말합니다.

- -

반드시 else와 두 번째 중괄호를 포함하지 않아도 된다는 것을 주목해야 합니다. — 다음은 또한 완벽한 코드입니다.:

- -
if (condition) {
-  code to run if condition is true
-}
-
-run some other code
- -

하지만, 여기서 조심 해야 할 점— 위의 경우, 코드의 두 번째 블록은 조건문에 의해서 제어되지 않습니다. 그래서 조건이 true나 false를 리턴하는 것에 관계없이 항상 동작합니다. 이것이 반드시 나쁜 것은 아니지만, 원하는 대로 되지 않을 수도 있습니다. — 코드의 한 블록이나 다른 블록이 실행되거나 둘 다 실행되지 않는 것을 원할 것입니다.

- -

마지막으로, 다음과 같이 짧은 스타일로 중괄호 없이 쓰여진 if...else를  볼 수 있었을 것입니다.:

- -
if (condition) code to run if condition is true
-else run some other code instead
- -

이것은 완벽하게 유효한 코드이지만, 사용하는 것을 추천하지 않습니다. — 중괄호를 사용하여 코드를 구분하고, 여러 줄과 들여쓰기를 사용한다면, 코드를 쉽게 읽고, 진행되는 작업을 훨씬 쉽게 처리할 수 있습니다.

- -

실제 예시

- -

문법을 잘 이해하기 위해서 실제 예시를 알아봅시다. 어머니나 아버지가 아이에게 집안일을 도와달라고 요청한다고 상상해 봅시다. 부모님께서 "우리 애기, 만약에 쇼핑 하고 가는 걸 도와주면, 용돈을 더 줄게! 그럼 네가 원하는 걸 살 수 있을거야"라고 말씀 하신다면, 자바스크립트에서 이것을 다음과 같이 표현할 수 있습니다.

- -
var shoppingDone = false;
-
-if (shoppingDone === true) {
-  var childsAllowance = 10;
-} else {
-  var childsAllowance = 5;
-}
- -

위 코드에는 항상 false를 리턴하는 shoppingDone변수를 결과로 얻을 것입니다. 아이에게 실망을 안겨주겠죠. 아이가 부모님과 함께 쇼핑을 간다면 우리가 부모님을 위해 shoppingDone변수를 true로 설정하는 메커니즘을 만들 수 있겠죠.

- -
-

Note: GitHub에서 예시를 더 볼 수 있습니다.  complete version of this example on GitHub (also see it running live.)

-
- -

else if

- -

지난 예시에서는  두 가지 선택과 결과가 있었죠. — 하지만 우리가 두 가지보다 더 많은 선택과 결과를 원한다면?

- -

추가로 선택/결과를 if...else에 연결하는 방법이 있습니다. — else if를 사용하여. 각 추가 선택은 if() { ... }와 else { ... }사이에 추가적인 블록이 필요합니다. 간단한 날씨 예보 어플리케이션의 일부가 될 수 있는 다음의 예시를 확인하세요. 

- -
<label for="weather">Select the weather type today: </label>
-<select id="weather">
-  <option value="">--Make a choice--</option>
-  <option value="sunny">Sunny</option>
-  <option value="rainy">Rainy</option>
-  <option value="snowing">Snowing</option>
-  <option value="overcast">Overcast</option>
-</select>
-
-<p></p>
- -
var select = document.querySelector('select');
-var para = document.querySelector('p');
-
-select.addEventListener('change', setWeather);
-
-function setWeather() {
-  var choice = select.value;
-
-  if (choice === 'sunny') {
-    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
-  } else if (choice === 'rainy') {
-    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
-  } else if (choice === 'snowing') {
-    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
-  } else if (choice === 'overcast') {
-    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
-  } else {
-    para.textContent = '';
-  }
-}
-
-
- -

{{ EmbedLiveSample('else_if', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

- -
    -
  1. 여기서 우리는 HTML {{htmlelement("select")}} 엘리먼트를 사용하여 다른 날씨 선택과 간단한 문단을 만들 수 있습니다. 
    2. -
  2. 자바스크립트에서 {{htmlelement("select")}} 와 {{htmlelement("p")}} 엘리먼트를 모두 저장하고 있고,  <select> 엘리먼트에 이벤트 리스너를 추가하고, 값이 변할 때 setWeather()함수가 동작합니다.
    3. -
  3. 함수가 동작했을 때, 현재 <select> 에서 선택된 값을 choice라는 변수에 설정합니다. 그런 다음 조건문을 사용하여 choice값에 따라 문단 안에 다른 텍스트를 표시합니다. if() {...} block에서 테스트된 첫 번째를 제외하고, else if() {...}에서 조건은 테스트되는 방법에 유의하세요.
    4. -
  4. else {...}안의 가장 마지막 선택은 기본적으로 "최후의 수단" 옵션입니다. — true인 조건이 없으면 코드가 실행됩니다. 이 경우 아무것도 선택되지 않으면 예를 들어, 사용자가 처음에 표시한 "Make a choice" placeholder 옵션에서 다시 선택하기로 한다면, 문단의 텍스트를 비우는 역할을 합니다.
    5. -
- -
-

Note: You can also find this example on GitHub (see it running live on there also.)

-
- -

비교 연산자

- -

비교 연산자는 우리의 조건문 안에 조건을 테스트하는데 사용된다. 우리는 먼저 Basic math in JavaScript — numbers and operators 에서 비교 연산자를 봤습니다. 

- - - -
-

Note: Review the material at the previous link if you want to refresh your memories on these.

-
- -

boolean(true/false)값과 몇 번이고 다시 만날 일반적인 패턴을 테스트하는 것의 특별한 언급을 하고 싶었습니다.. false, undefined, null, 0, NaN이나 빈 문자열('')이 아닌 어떤 값은 조건문이 테스트 되었을 때, true를 리턴합니다.. 그러므로 우리는 변수가 참인지 값이 존재하는지 간단하게 변수 이름을 사용할 수 있습니다.. 예를 들어,

- -
var cheese = 'Cheddar';
-
-if (cheese) {
-  console.log('Yay! Cheese available for making cheese on toast.');
-} else {
-  console.log('No cheese on toast for you today.');
-}
- -

그리고 부모님을 위해 집안일을 하는 아이에 대한 이전 예시에서 리턴하는 것을 다음과 같이 작성할 수 있었습니다.

- -
var shoppingDone = false;
-
-if (shoppingDone) { // don't need to explicitly specify '=== true'
-  var childsAllowance = 10;
-} else {
-  var childsAllowance = 5;
-}
- -

if ... else 중첩

- -

if...else문을 다른 문 앞에 넣는 것(중첩하여)은 완벽하게 가능합니다.. 예를 들어, 온도가 무엇인지에 따라 더 많은 선택의 옵션을 보여주기위해 우리의 날씨 예보 어플리케이션에서 업데이트 할 수 있습니다..

- -
if (choice === 'sunny') {
-  if (temperature < 86) {
-    para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
-  } else if (temperature >= 86) {
-    para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
-  }
-}
- -

비록 코드가 모두 동작하더라도, 각 if...else문은 다른 문과 완전히 독립적으로 동작합니다..

- -

논리 연산자: AND, OR and NOT

- -

만약 중첩된 if...else문을 작성하는 것 없이 다양한 조건을 테스트하길 원한다면 logical operators 이 당신을 도와줄 수 있습니다. 조건 내에서 사용될 때, 처음 두 가지는 다음과 같이 합니다.

- - - -

AND 예시를 위해서 앞의 예제 코드 중에서 다음과 같이 작성할 수 있습니다.

- -
if (choice === 'sunny' && temperature < 86) {
-  para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
-} else if (choice === 'sunny' && temperature >= 86) {
-  para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
-}
- -

위 예시에서, 첫 번째 코드 블록은 choice === 'sunny'와 temperature < 86가 true를 리턴한다면 실행될 것입니다.

- -

빠르게 OR 예시를 봅시다.

- -
if (iceCreamVanOutside || houseStatus === 'on fire') {
-  console.log('You should leave the house quickly.');
-} else {
-  console.log('Probably should just stay in then.');
-}
- -

논리 연산자의 마지막 유형인 ! 연산자로 표현되는 NOT은 표현식을 무효화할 수 있습니다. 위 OR 예시와 함께 봅시다.

- -
if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
-  console.log('Probably should just stay in then.');
-} else {
-  console.log('You should leave the house quickly.');
-}
- -

위 예시에서, OR 문이 true를 리턴한다면, NOT 연산자는 전체 표현식이 false를 리턴하도록 무효화할 것입니다.

- -

어떤 구조든지 당신이 원하는 만큼 많은 논리 문을 결합할 수 있습니다. 다음 예시는 두 가지 OR 문 모두 true를 리턴하면, 전체 AND문은 true를 리턴한다는 것을 의미하는 코드를 실행합니다.

- -
if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
-  // run the code
-}
- -

조건 문에서 논리적 OR 연산자를 사용할 때 일반적인 실수는 값을 한번 체크하는 변수를 명시한 다음, || (OR) 연산로 분리하여 true를 리턴될 수 있는 변수의 리스트를 사용한다는 것입니다. 예를 들어: 

- -
if (x === 5 || 7 || 10 || 20) {
-  // run my code
-}
- -

이 경우에 if(...) 내부 조건은 7(또는 다른 0이 아닌 값)이 항상 true가 되므로, 항상 true를 계산할 것입니다. 조건은 "x가 5와 같거나 7이 true면, 항상 그렇다"라고 분명하게 말하고 있습니다. 이것은 논리적으로 우리가 원하는 것이 아닙니다! 이를 동작하게 하기 위해 우리는 각 OR 연산자를 완전하게 명시해야 합니다.

- -
if (x === 5 || x === 7 || x === 10 ||x === 20) {
-  // run my code
-}
- -

switch 문

- -

if...else 문은 조건문 코드가 잘 동작되는 일을 하지만, 단점이 없지 않습니다. 그 문은 두 가지 선택을 가지고 있는 경우에 주로 유용합니다. 그리고 각각은 실행되기 위한 합리적인 양의 코드가 필요하고, AND/OR 조건은 복잡합니다.(e.g. 다수의 논리 연산자) 어떤 값의 선택으로 변수를 설정하거나 조건에 따라서 특정 문을 출력하는 경우 구문이 약간 번거로울 수 있습니다. 특히 많은 선택 항목이 있는 경우에 특히 그렇습니다.

- -

switch statements 은 당신의 친구입니다. 이는 입력으로 하나의 표현식/값을 받고, 값과 일치하는 하나를 찾을 때까지 여러 항목을 살펴보고 그에 맞는 코드를 실행합니다. 여기 몇몇 많은 수도코드가 있습니다.

- -
switch (expression) {
-  case choice1:
-    run this code
-    break;
-
-  case choice2:
-    run this code instead
-    break;
-
-  // include as many cases as you like
-
-  default:
-    actually, just run this code
-}
- -

여기에서: 

- -
    -
  1. 뒤에 괄호가 오는 키워드 switch.
    2. -
  2. 괄오 내부에는 표현식이나 값을 입력합니다.
    3. -
  3. 표현식이나 값이 될 수 있는 선택이 따라 오는 키워드 case는 콜론이 뒤에 옵니다.
    4. -
  4. break문은 뒤에 세미콜론이 옵니다. 이전의 선택이 표현식이나 값과 일치한다면 해당 코드 블록에서 실행을 멉추고, switch 문 아래에 있는 어떤 코드로 이동합니다.
    5. -
  5. 원하는 많은 다른 케이스를 입력할 수 있습니다. 
    6. -
  6. 키워드 default는 case들과 같은 코드를 입력하고, 일치하는 항목이 없으면 실행되는 기본 옵션입니다. case와 일치하지 않고, 예외가 필요하지 않는 경우 제외할 수 있습니다.
    7. -
- -
-

Note: default를 반드시 포함하지 않고 생략가능합니다. 다만 필요하다면 미지의 경우를 처리하기 위해 포함해야 합니다.

-
- -

A switch example

- -

실전 예제를 해봅시다.switch문을 활용해 일기예보 애플리케이션을 작성하세요.

- -
<label for="weather">Select the weather type today: </label>
-<select id="weather">
-  <option value="">--Make a choice--</option>
-  <option value="sunny">Sunny</option>
-  <option value="rainy">Rainy</option>
-  <option value="snowing">Snowing</option>
-  <option value="overcast">Overcast</option>
-</select>
-
-<p></p>
- -
var select = document.querySelector('select');
-var para = document.querySelector('p');
-
-select.addEventListener('change', setWeather);
-
-
-function setWeather() {
-  var choice = select.value;
-
-  switch (choice) {
-    case 'sunny':
-      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
-      break;
-    case 'rainy':
-      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
-      break;
-    case 'snowing':
-      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
-      break;
-    case 'overcast':
-      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
-      break;
-    default:
-      para.textContent = '';
-  }
-}
- -

{{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

- -
-

Note: You can also find this example on GitHub (see it running live on there also.)

-
- -

삼항연산자 

- -

다른 예제로 들어가기 전에 소개하고 싶은 마지막 구문이 있다.삼항(조건)연산자( ternary or conditional operator)는 조건이 참이면 한 값/표현식을 반환하고 조건이 거짓이면 다른  값/표현식을 반환하는 구문이다.— 이것은 어떤 상황에 유용할 수 있으며, 참/거짓 조건을 간단히 선택할 수 있는 상황이라면 if...else 블록문보다 코드를 훨씬 적게 사용할수 있다. 이 pseudocode는 아래와 같다:

- -
( condition ) ? run this code : run this code instead
- -

그러면 간단한 예를 보자:

- -
var greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';
- -

isBirthday 라는 변수명이 여기 있다— 게스트가 생일이면 '해피버스데이' 메세지를 보내고, 생일이 아니라면  일반적인 '인사' 메세지를 보내는 경우에 해당된다..

- -

삼항 연산자 예제

- -

삼항연산자로 변수값을 정할 필요가 없다; 단지  좋아하는 함수나 코드를 사용하면 된다. — . 이 예제는 삼항연산자를 사용하여 사이트의 스타일링 테마를 선택할  수 있는 것을 보여준다

- -
<label for="theme">Select theme: </label>
-<select id="theme">
-  <option value="white">White</option>
-  <option value="black">Black</option>
-</select>
-
-<h1>This is my website</h1>
- -
var select = document.querySelector('select');
-var html = document.querySelector('html');
-document.body.style.padding = '10px';
-
-function update(bgColor, textColor) {
-  html.style.backgroundColor = bgColor;
-  html.style.color = textColor;
-}
-
-select.onchange = function() {
-  ( select.value === 'black' ) ? update('black','white') : update('white','black');
-}
-
- -

{{ EmbedLiveSample('Ternary_operator_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

- -

여기에는  black이나 white의 테마를 고르기 위한 '{{htmlelement('select')}}' 엘리먼트가 있고, 여기에 더하여 웹사이트 제목을 보여주는 '{{htmlelement('h1')}}" 엘리먼트가 있다.  update() 함수를 덧붙이면 두 칼라를 입력 인수(parameter)로 선택할 수 있다. 웹사이트 배경 칼라가 첫 번째 칼라로 지정되고, 텍스트 칼라가 두 번째로 정해진다.

- -

끝으로,  'onchange' 이벤트 리스너는 삼중연산자를 포함하는 함수를 움직('run')이게 합니다. select.value === 'black' 조건을 테스트는 하는 것으로 시작하는데, 이 조건이 참이면  update() 함수가 배경색은 black으로 텍스트 색은  white로 동작하게 합니다. 이와는 반대로 select theme이  white로 선택되면(조건이 거짓이면) , update() 함수는  배경색은 white으로 텍스트 색은  black로 동작하게 합니다.

- -
-

Note: You can also find this example on GitHub (see it running live on there also.)

-
- -

Active learning: 간단한 달력 만들기

- -

이 예제에서는 간단한 달력 어플리케이션을 만들어 볼겁니다. 코드에는 다음과 같은 것들이 들어 있습니다.

- - - -

onchange 핸들러 함수내에 조건문을 작성해야 합니다. 위치는 // ADD CONDITIONAL HERE 주석 바로 아래입니다. 조건문은 다음을 만족해야 합니다:

- -
    -
  1. 선택한 달 보기(이것은 값이 변경된 후의 요소 값이 됨.) 
    2. -
  2. days 란 변수를 선택한 달의 일 수와 같게 하기. 다만 윤년은 무시할 수 있다.
    3. -
- -

Hints:

- - - -

만약 실수를 하더라도 'Reset' 버튼으로 초기화 할 수 있습니다. 해답을 모르겠다면 "Show solution" 으로 해결방법을 확인하세요.

- - - -

{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}

- -

Active learning: 색깔 고르기

- -

In this example you are going to take the ternary operator example we saw earlier and convert the ternary operator into a switch statement that will allow us to apply more choices to the simple website. Look at the {{htmlelement("select")}} — this time you'll see that it has not two theme options, but five. You need to add a switch statement just underneath the // ADD SWITCH STATEMENT comment:

- - - -

If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.

- - - -

{{ EmbedLiveSample('Playable_code_2', '100%', 950, "", "", "hide-codepen-jsfiddle") }}

- -

Conclusion

- -

And that's all you really need to know about conditional structures in JavaScript right now! I'm sure you'll have understood these concepts and worked through the examples with ease; if there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.

- -

See also

- - - -

{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}

- -

In this module

- - diff --git a/files/ko/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/ko/learn/javascript/client-side_web_apis/manipulating_documents/index.html new file mode 100644 index 0000000000..94759e21bf --- /dev/null +++ b/files/ko/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -0,0 +1,145 @@ +--- +title: JavaScript +slug: Web/CSS/Getting_Started/JavaScript +tags: + - 'CSS:Getting_Started' +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +translation_of_original: Web/Guide/CSS/Getting_started/JavaScript +--- +

이 페이지는 입문서의 II 부입니다. II 부는 모질라에서의 CSS의 범위(scope)를 보여주는 예제들을 포함하고 있습니다.

+

II 부의 각 페이지는 CSS 가 다른 기술(technologies)들과 어떻게 상호작용하는지 설명하고 있습니다. 이 페이지들은 이들 다른 기술들을 사용하는 방법들을 가르치기위해서 디자인 되지는 않았습니다. 이 들 기술들을 자세히 배우려면 다른 입문서를 보세요.

+

대신 이 페이지들은 CSS의 다양한 사용법을 설명하기 위해서 디자인되었습니다. 이들 페이지들을 사용하려면, CSS에 대해 좀 알고 있어야만 합니다, 그러나, 다른 분야 기술들에대한 어떤 지식을 필요로하지는 않습니다.

+

정보: 자바스크립트(JavaScript)

+

자바스크립트(JavaScript)는 + + 프로그래밍 언어 + 입니다. 모질라 애플리케이션( 예를 들면, 모질라 브라우저) 사용할 때, 컴퓨터가 실행시키는 코드의 많은 부분이 자바스크립트로 쓰여져 있습니다.

+

자바스크립트는 스타일 시트와 상호작용하여, 문서 스타일을 동적으로 변화시키는 프로그램을 쓸 수 있게 해줍니다.

+

이렇게 하는데 세가지 방법이 있습니다:

+ + + + + + + + +
+ More details
모질라에서의 자바스트립트에 대해 더 많은 정보를 원하시면, 이 위키(wiki)에 있는 JavaScript페이지를 보세요.
+

액션: 자바스크립트 예제(demonstration)

+

새로은 HTML 문서 doc5.html를 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:

+
+ 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+
+<HEAD>
+<TITLE>Mozilla CSS Getting Started - JavaScript demonstration</TITLE>
+<LINK rel="stylesheet" type="text/css" href="style5.css">
+<SCRIPT type="text/javascript" src="script5.js"></SCRIPT>
+</HEAD>
+
+<BODY>
+<H1>JavaScript sample</H1>
+
+<DIV id="square"></DIV>
+
+<BUTTON type="button" onclick="doDemo(this);">Click Me</BUTTON>
+
+</BODY>
+</HTML>
+
+
+

새로운 CSS 파일 style5.css을 만드세요. 아래의 내용물을 복사해서 붙여넣으세요:

+
+ 
/*** JavaScript demonstration ***/
+#square {
+  width: 20em;
+  height: 20em;
+  border: 2px inset gray;
+  margin-bottom: 1em;
+  }
+
+button {
+  padding: .5em 2em;
+  }
+
+
+

새로운 텍스트 파일 script5.js을 만드세요. 아래의 내용물을 복사해서 붙여넣으세요:

+
+ 
// JavaScript demonstration
+function doDemo (button) {
+  var square = document.getElementById("square")
+  square.style.backgroundColor = "#fa4"
+  button.setAttribute("disabled", "true")
+  setTimeout(clearDemo, 2000, button)
+  }
+
+function clearDemo (button) {
+  var square = document.getElementById("square")
+  square.style.backgroundColor = "transparent"
+  button.removeAttribute("disabled")
+  }
+
+
+

브라우저에서 문서을 열고 버튼을 누르세요.

+

이 위키페이지는 자바스크립트를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다. 버튼을 누른 전과 후가 대략 다음과 같이 보입니다:

+ + + + + + + +
+ + + + + + +
+

JavaScript demonstration

+
+
+  
+
+
+ 		+ + + + + + +
+

JavaScript demonstration

+
+
+  
+
+
+
+

이 예제에서 주의할 점:

+ + + + + + + + +
+ Challenge
스크립트를 변경해서 사각형(square)이 색이 변할 때 오른쪽으로 20em 점프했다가 이후 되 돌아오게 만드세요.
+

그럼 다음은?

+

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

+

이 예제에서 HTML 문서가 단지 버튼 엘리먼트만이 스크립트를 사용함에도 불구하고 스크립트에 링크를 가지고 있었습니다. 모질라는 CSS를 확장해서 자바스크립트 코드를 (내용물과 다른 스타일 시트들도) 선택된 엘리먼트에 링크할 수 있게 합니다. 다음 페이지에서는 다음을 실행해 봅니다: XBL bindings

diff --git a/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.html b/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.html new file mode 100644 index 0000000000..526779b577 --- /dev/null +++ b/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.html @@ -0,0 +1,65 @@ +--- +title: '얼마나 이해했는지 확인해보자: JSON' +slug: 'Learn/JavaScript/Objects/얼마나_이해했는지_확인해보자:_JSON' +translation_of: 'Learn/JavaScript/Objects/Test_your_skills:_JSON' +--- +
{{learnsidebar}}
+ +

이 테스트의 목표는 JSON으로 작업하기를 잘 이해했는지 평가해보는 것입니다.

+ +
+

Note: 아래에 있는 편집기를 사용해보세요. 테스트 중 막히면, 도움을 요청할 수 있습니다. 페이지 하단의 "평가 또는 추가 도움말" 을 참고하세요.

+
+ +
+

Note: 작성한 코드에 오류가 발생하는 경우, 결과창에서 정답을 알아낼 수 있도록 돕기 위해 결과값을 보여줄 것입니다. (또는 브라우저의 자바스크립트 콘솔로도 확인 가능합니다.)

+
+ +

JSON 1

+ +

이번에 수행할 유일한 과제는 JSON 데이터에 접근하고 사용해보는 것입니다. 어미 고양이들과 그들의 새끼 고양이에 관한 JSON 데이터는 sample.json에서 확인할 수 있습니다. 이 JSON은 텍스트 문자열로 호출되며, 제시된 프로미스 체인(JSON 데이터를 가져오는 것으로 시작)의 조건을 만족시킬 때 displayCatInfo() 함수의 catString 파라미터로 사용될 수 있습니다.

+ + + + + +

변수들의 값은 문단 내부의 화면에 출력됩니다.

+ +

몇 가지 힌트/질문:

+ + + +

완료된 예제를 다시 만드려면, 아래 코드를 변경해보세요:

+ +

{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/json/json1.html", '100%', 400)}}

+ +
+

Warning:  이번 테스트를 치를 때 코드를 위에 있는 편집기에 작성하세요. 로컬환경이나 CodePen 또는 JSFiddle 에서는 이 예제가 작동하지 않을 수 있는데, cross-origin 라고 불리는 보안정책 때문일 것입니다. 이는 현재 환경과 다른 출처의 리소스의 요청을 제한하는 정책입니다. 위 편집기는 자바스크립트 코드와 요청된 JSON 파일을 모두 동일한 출처에서 요청하고 있습니다. (Github 저장소의 <iframe>에 내장되어 있습니다.)  하지만 예를 들어 CodePen에 기입하는 코드는 JSON을 호출하는 출처와는 다르기 때문에 오류가 발생할 수 있습니다. CORS를 사용하여 이런 제약사항을 해결할 수 있지만, 이번 장에서 가르치는 범위에는 해당하지 않습니다.

+
+ +

평가 또는 추가 도움말

+ +

위에 있는 편집기를 이용해 예제를 연습해볼 수 있습니다.

+ +

만일 작업을 평가하고나, 막혀서 도움을 요청하고 싶다면:

+ +
    +
  1. MDN 학습 토론 카테고리에 평가 또는 도움을 요청하는 글을 작성하세요. 글에는 다음 사항이 포함되어야 합니다 : + +
      +
    • "Assessment wanted for JSON skill test (JSON 기술 테스트에 대한 평가를 요청드립니다)" 와 같은 제목을 사용하세요.
      • +
    • 이미 시도해보았거나, 원하는 것(예를 들어, 막혀서 도움이 필요하다거나 평가가 필요하다는 것과 같은)에 대한 세부사항을 기입해주세요.
      • +
    • 작성한 코드를 삽입하세요.
      • +
    • 실제 작업 또는 평가 페이지에 대한 링크를 삽입하세요. 그래야 도움받고자 하는 질문을 확인할 수 있습니다.
      • +
    +
    2. +
diff --git "a/files/ko/learn/javascript/objects/\354\226\274\353\247\210\353\202\230_\354\235\264\355\225\264\355\226\210\353\212\224\354\247\200_\355\231\225\354\235\270\355\225\264\353\263\264\354\236\220_colon__json/index.html" "b/files/ko/learn/javascript/objects/\354\226\274\353\247\210\353\202\230_\354\235\264\355\225\264\355\226\210\353\212\224\354\247\200_\355\231\225\354\235\270\355\225\264\353\263\264\354\236\220_colon__json/index.html" deleted file mode 100644 index 526779b577..0000000000 --- "a/files/ko/learn/javascript/objects/\354\226\274\353\247\210\353\202\230_\354\235\264\355\225\264\355\226\210\353\212\224\354\247\200_\355\231\225\354\235\270\355\225\264\353\263\264\354\236\220_colon__json/index.html" +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: '얼마나 이해했는지 확인해보자: JSON' -slug: 'Learn/JavaScript/Objects/얼마나_이해했는지_확인해보자:_JSON' -translation_of: 'Learn/JavaScript/Objects/Test_your_skills:_JSON' ---- -
{{learnsidebar}}
- -

이 테스트의 목표는 JSON으로 작업하기를 잘 이해했는지 평가해보는 것입니다.

- -
-

Note: 아래에 있는 편집기를 사용해보세요. 테스트 중 막히면, 도움을 요청할 수 있습니다. 페이지 하단의 "평가 또는 추가 도움말" 을 참고하세요.

-
- -
-

Note: 작성한 코드에 오류가 발생하는 경우, 결과창에서 정답을 알아낼 수 있도록 돕기 위해 결과값을 보여줄 것입니다. (또는 브라우저의 자바스크립트 콘솔로도 확인 가능합니다.)

-
- -

JSON 1

- -

이번에 수행할 유일한 과제는 JSON 데이터에 접근하고 사용해보는 것입니다. 어미 고양이들과 그들의 새끼 고양이에 관한 JSON 데이터는 sample.json에서 확인할 수 있습니다. 이 JSON은 텍스트 문자열로 호출되며, 제시된 프로미스 체인(JSON 데이터를 가져오는 것으로 시작)의 조건을 만족시킬 때 displayCatInfo() 함수의 catString 파라미터로 사용될 수 있습니다.

- - - - - -

변수들의 값은 문단 내부의 화면에 출력됩니다.

- -

몇 가지 힌트/질문:

- - - -

완료된 예제를 다시 만드려면, 아래 코드를 변경해보세요:

- -

{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/json/json1.html", '100%', 400)}}

- -
-

Warning:  이번 테스트를 치를 때 코드를 위에 있는 편집기에 작성하세요. 로컬환경이나 CodePen 또는 JSFiddle 에서는 이 예제가 작동하지 않을 수 있는데, cross-origin 라고 불리는 보안정책 때문일 것입니다. 이는 현재 환경과 다른 출처의 리소스의 요청을 제한하는 정책입니다. 위 편집기는 자바스크립트 코드와 요청된 JSON 파일을 모두 동일한 출처에서 요청하고 있습니다. (Github 저장소의 <iframe>에 내장되어 있습니다.)  하지만 예를 들어 CodePen에 기입하는 코드는 JSON을 호출하는 출처와는 다르기 때문에 오류가 발생할 수 있습니다. CORS를 사용하여 이런 제약사항을 해결할 수 있지만, 이번 장에서 가르치는 범위에는 해당하지 않습니다.

-
- -

평가 또는 추가 도움말

- -

위에 있는 편집기를 이용해 예제를 연습해볼 수 있습니다.

- -

만일 작업을 평가하고나, 막혀서 도움을 요청하고 싶다면:

- -
    -
  1. MDN 학습 토론 카테고리에 평가 또는 도움을 요청하는 글을 작성하세요. 글에는 다음 사항이 포함되어야 합니다 : - -
      -
    • "Assessment wanted for JSON skill test (JSON 기술 테스트에 대한 평가를 요청드립니다)" 와 같은 제목을 사용하세요.
      • -
    • 이미 시도해보았거나, 원하는 것(예를 들어, 막혀서 도움이 필요하다거나 평가가 필요하다는 것과 같은)에 대한 세부사항을 기입해주세요.
      • -
    • 작성한 코드를 삽입하세요.
      • -
    • 실제 작업 또는 평가 페이지에 대한 링크를 삽입하세요. 그래야 도움받고자 하는 질문을 확인할 수 있습니다.
      • -
    -
    2. -
diff --git a/files/ko/learn/server-side/express_nodejs/development_environment/index.html b/files/ko/learn/server-side/express_nodejs/development_environment/index.html new file mode 100644 index 0000000000..f3ab1846f6 --- /dev/null +++ b/files/ko/learn/server-side/express_nodejs/development_environment/index.html @@ -0,0 +1,399 @@ +--- +title: Node 개발 환경을 설치하기 +slug: Learn/Server-side/Express_Nodejs/개발_환경 +tags: + - CodingScripting + - Express + - Node + - nodejs + - npm + - 개발 환경 + - 배움 + - 서버-사이드 + - 인트로 + - 초보자 +translation_of: Learn/Server-side/Express_Nodejs/development_environment +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}
+ +

이제 Express에 관한 내용을 알았으니, Windows, Linux (Ubuntu), 그리고 macOS 에서의 Node/Express 개발 환경을 설정하고 테스트하는 법을 보여드리겠습니다. 사용중인 운영 체제가 무엇이든 간에, 이 글은 당신에게 Express 앱 개발을 시작할 수 있도록 필요한 내용을 제공합니다.

+ + + + + + + + + + + + +
전제 조건:터미널 혹은 명령어 창을 여는 방법. 당신의 개발 컴퓨터의 운영 체제에 소프트웨어 패키지를 설치하는 방법을 알고 있어야 합니다.
목표:당신의 컴퓨터에 Express (X.XX) 을 위한 개발 환경을 설치하는 것.
+ +

Express 개발 환경 개요

+ +

Node와 Express를 통해 웹앱 개발을 한결 수월하게 할 수 있습니다. 이 섹션에서는 어떤 도구들이 필요한지, Ubuntu, macOS, 그리고 Windows에서 어떻게 Node와 Express를 설치하는지, 마지막으로, 설치 후 어떻게 테스트해볼 수 있는지 살펴볼 것입니다.

+ +

Express 개발 환경이란 무엇입니까?

+ +

Express개발환경은 Nodejs의 설치, NPM 패키지 매니저, 그리고 (선택적) 로컬 컴퓨터의 Express Application Generator를 포함합니다.

+ +

Node and the NPM package manager are installed together from prepared binary packages, installers, operating system package managers or from source (as shown in the following sections). Express is then installed by NPM as a dependency of your individual Express web applications (along with other libraries like template engines, database drivers, authentication middleware, middleware to serve static files, etc.)

+ +

NPM can also be used to (globally) install the Express Application Generator, a handy tool for creating skeleton Express web apps that follow the MVC pattern. The application generator is optional because you don't need to use this tool to create apps that use Express, or construct Express apps that have the same architectural layout or dependencies. We'll be using it though, because it makes getting started a lot easier, and promotes a modular application structure.

+ +
+

Note: Unlike for some other web frameworks, the development environment does not include a separate development web server. In Node/Express a web application creates and runs its own web server!

+
+ +

There are other peripheral tools that are part of a typical development environment, including text editors or IDEs for editing code, and source control management tools like Git for safely managing different versions of your code. We are assuming that you've already got these sorts of tools installed (in particular a text editor).

+ +

What operating systems are supported?

+ +

Node can be run on Windows, macOS, many "flavours" of Linux, Docker, etc. (there is a full list on the nodejs Downloads page). Almost any personal computer should have the necessary performance to run Node during development. Express is run in a Node environment, and hence can run on any platform that runs Node.

+ +

이 기사에서는 Windows, macOS, 그리고 Ubuntu Linux에서의 설치방법을 안내해드리고 있습니다.

+ +

What version of Node/Express should you use?

+ +

There are many releases of Node — newer releases contain bug fixes, support for more recent versions of ECMAScript (JavaScript) standards, and improvements to the Node APIs. 

+ +

Generally you should use the most recent LTS (long-term supported) release as this will be more stable than the "current" release while still having relatively recent features (and is still being actively maintained). You should use the Current release if you need a feature that is not present in the LTS version.

+ +

For Express you should always use the latest version.

+ +

What about databases and other dependencies?

+ +

Other dependencies, such as database drivers, template engines, authentication engines, etc. are part of the application, and are imported into the application environment using the NPM package manager.  We'll discuss them in later app-specific articles.

+ +

Node 설치하기

+ +

Express 를 사용하기 위해서 우선 운영체제에 Nodejs와 Node Package Manager (NPM)를 설치해야 합니다. The following sections explain the easiest way to install the Long Term Supported (LTS) version of Nodejs on Ubuntu Linux 16.04, macOS, and Windows 10.

+ +
+

Tip: The sections below show the easiest way to install Node and NPM on our target OS platforms. If you're using another OS or just want to see some of the other approaches for the current platforms then see Installing Node.js via package manager (nodejs.org).

+
+ +

Windows and macOS

+ +

Node와 NPM을 설치하는 것은 간단합니다:

+ +
    +
  1. Installer를 다운받읍시다: +
      +
    1. https://nodejs.org/en/
      2. +
    2. "안정적이고 신뢰도가 높은" LTS버튼을 클릭해 다운로드를 시작합니다. .
      3. +
    +
    2. +
  2. 다운로드된 파일을 더블클릭해 Node를 설치합니다.
    3. +
+ +

The easiest way to install the most recent LTS version of Node 10.x is to use the package manager to get it from the Ubuntu binary distributions repository. This can be done very simply by running the following two commands on your terminal:

+ +
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
+sudo apt-get install -y nodejs
+
+ +
+

Warning: Don't install directly from the normal Ubuntu repositories because they contain very old versions of node.

+
+ +
    +
+ +

Nodejs와 NPM 테스팅

+ +

The easiest way to test that node is installed is to run the "version" command in your terminal/command prompt and check that a version string is returned:

+ +
>node -v
+v10.15.1
+ +

The Nodejs package manager NPM should also have been installed, and can be tested in the same way:

+ +
>npm -v
+6.4.1
+ +

As a slightly more exciting test let's create a very basic "pure node" server that simply prints out "Hello World" in the browser when you visit the correct URL in your browser:

+ +
    +
  1. Copy the following text into a file named hellonode.js. This uses pure Node features (nothing from Express) and some ES6 syntax: + + 
    //Load HTTP module
+const http = require("http");
+const hostname = '127.0.0.1';
+const port = 3000;
+
+//Create HTTP server and listen on port 3000 for requests
+const server = http.createServer((req, res) => {
+
+  //Set the response HTTP header with HTTP status and Content type
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'text/plain');
+  res.end('Hello World\n');
+});
+
+//listen for request on port 3000, and as a callback function have the port listened on logged
+server.listen(port, hostname, () => {
+  console.log(`Server running at http://${hostname}:${port}/`);
+});
+
    + +

    The code imports the "http" module and uses it to create a server (createServer()) that listens for HTTP requests on port 3000. The script then prints a message to the console about what browser URL you can use to test the server. The createServer() function takes as an argument a callback function that will be invoked when an HTTP request is received — this simply returns a response with an HTTP status code of 200 ("OK") and the plain text "Hello World".

    + +
    +

    Note:  Don't worry if you don't understand exactly what this code is doing yet! We'll explain our code in greater detail once we start using Express!

    +
    +
    2. +
  2. Start the server by navigating into the same directory as your hellonode.js file in your command prompt, and calling node along with the script name, like so: + 
    >node hellonode.js
+Server running at http://127.0.0.1:3000/
+
    +
    3. +
  3. Navigate to the URL http://127.0.0.1:3000 . If everything is working, the browser should simply display the string "Hello World".
    4. +
+ +

Using NPM

+ +

Next to Node itself, NPM is the most important tool for working with Node applications. NPM is used to fetch any packages (JavaScript libraries) that an application needs for development, testing, and/or production, and may also be used to run tests and tools used in the development process. 

+ +
+

Note: From Node's perspective, Express is just another package that you need to install using NPM and then require in your own code.

+
+ +

You can manually use NPM to separately fetch each needed package. Typically we instead manage dependencies using a plain-text definition file named package.json. This file lists all the dependencies for a specific JavaScript "package", including the package's name, version, description, initial file to execute, production dependencies, development dependencies, versions of Node it can work with, etc. The package.json file should contain everything NPM needs to fetch and run your application (if you were writing a reusable library you could use this definition to upload your package to the npm respository and make it available for other users).

+ +

dependencies 추가

+ +

The following steps show how you can use NPM to download a package, save it into the project dependencies, and then require it in a Node application.

+ +
+

Note: Here we show the instructions to fetch and install the Express package. Later on we'll show how this package, and others, are already specified for us using the Express Application Generator. This section is provided because it is useful to understand how NPM works and what is being created by the application generator.

+
+ +
    +
  1. First create a directory for your new application and navigate into it: + 
    mkdir myapp
+cd myapp
    +
    2. +
  2. Use the npm init command to create a package.json file for your application. This command prompts you for a number of things, including the name and version of your application and the name of the initial entry point file (by default this is index.js). For now, just accept the defaults: + 
    npm init
    + +

    If you display the package.json file (cat package.json), you will see the defaults that you accepted, ending with the license.

    + + 
    {
+  "name": "myapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}
+
    +
    3. +
  3. Now install Express in the myapp directory and save it in the dependencies list of your package.json file
    4. +
  4. + 
    npm install express
    + +

    The dependencies section of your package.json will now appear at the end of the package.json file and will include Express.

    + + 
    {
+  "name": "myapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.16.4"
+  }
+}
+
    +
    5. +
  5. To use the Express library you call the require() function in your index.js file to include it in your application. Create this file now, in the root of the "myapp" application directory, and give it the following contents: + 
    const express = require('express')
+const app = express();
+
+app.get('/', (req, res) => {
+  res.send('Hello World!')
+});
+
+app.listen(8000, () => {
+  console.log('Example app listening on port 8000!')
+});
+
    + +

    This code shows a minimal "HelloWorld" Express web application. This imports the "express" module using require() and uses it to create a server (app) that listens for HTTP requests on port 8000 and prints a message to the console explaining what browser URL you can use to test the server. The app.get() function only responds to HTTP GET requests with the specified URL path ('/'), in this case by calling a function to send our Hello World! message.

    +
    6. +
  6. You can start the server by calling node with the script in your command prompt: + 
    >node index.js
+Example app listening on port 8000
+
    +
    7. +
  7. Navigate to the URL (http://127.0.0.1:8000/). If everything is working, the browser should simply display the string "Hello World!".
    8. +
+ +

Development dependencies

+ +

If a dependency is only used during development, you should instead save it as a "development dependency" (so that your package users don't have to install it in production). For example, to use the popular JavaScript Linting tool eslint you would call NPM as shown:

+ +
npm install eslint --save-dev
+ +

The following entry would then be added to your application's package.json:

+ +
  "devDependencies": {
+    "eslint": "^4.12.1"
+  }
+
+ +
+

Note: "Linters" are tools that perform static analysis on software in order to recognise and report adherence/non-adherance to some set of coding best practice.

+
+ +

Running tasks

+ +

In addition to defining and fetching dependencies you can also define named scripts in your package.json files and call NPM to execute them with the run-script command. This approach is commonly used to automate running tests and parts of the development or build toolchain (e.g., running tools to minify JavaScript, shrink images, LINT/analyse your code, etc).

+ +
+

Note: Task runners like Gulp and Grunt can also be used to run tests and other external tools.

+
+ +

For example, to define a script to run the eslint development dependency that we specified in the previous section we might add the following script block to our package.json file (assuming that our application source is in a folder /src/js):

+ +
"scripts": {
+  ...
+  "lint": "eslint src/js"
+  ...
+}
+
+ +

To explain a little further, eslint src/js is a command that we could enter in our terminal/command line to run eslint on JavaScript files contained in the src/js directory inside our app directory. Including the above inside our app's package.json file provides a shortcut for this command — lint.

+ +

We would then be able to run eslint using NPM by calling:

+ +
npm run-script lint
+# OR (using the alias)
+npm run lint
+
+ +

This example may not look any shorter than the original command, but you can include much bigger commands inside your npm scripts, including chains of multiple commands. You could identify a single npm script that runs all your tests at once.

+ +

Installing the Express Application Generator

+ +

The Express Application Generator tool generates an Express application "skeleton". Install the generator using NPM as shown (the -g flag installs the tool globally so that you can call it from anywhere):

+ +
npm install express-generator -g
+ +

To create an Express app named "helloworld" with the default settings, navigate to where you want to create it and run the app as shown:

+ +
express helloworld
+ +
+

Note: You can also specify the template library to use and a number of other settings. Use the help command to see all the options:

+ +
express --help
+
+
+ +

NPM will create the new Express app in a sub folder of your current location, displaying build progress on the console. On completion, the tool will display the commands you need to enter to install the Node dependencies and start the app.

+ +
+

The new app will have a package.json file in its root directory. You can open this to see what dependencies are installed, including Express and the template library Jade:

+ +
{
+  "name": "helloworld",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www"
+  },
+  "dependencies": {
+    "cookie-parser": "~1.4.3",
+    "debug": "~2.6.9",
+    "express": "~4.16.0",
+    "http-errors": "~1.6.2",
+    "jade": "~1.11.0",
+    "morgan": "~1.9.0"
+  }
+}
+
+ + +
+ +

Install all the dependencies for the helloworld app using NPM as shown:

+ +
cd helloworld
+npm install
+
+ +

Then run the app (the commands are slightly different for Windows and Linux/macOS), as shown below:

+ +
# Run the helloworld on Windows with Command Prompt
+SET DEBUG=helloworld:* & npm start
+
+# Run the helloworld on Windows with PowerShell
+SET DEBUG=helloworld:* | npm start
+
+# Run helloworld on Linux/macOS
+DEBUG=helloworld:* npm start
+
+ +

The DEBUG command creates useful logging, resulting in an output like that shown below.

+ +
>SET DEBUG=helloworld:* & npm start
+
+> helloworld@0.0.0 start D:\Github\expresstests\helloworld
+> node ./bin/www
+
+  helloworld:server Listening on port 3000 +0ms
+ +

Open a browser and navigate to http://127.0.0.1:3000/ to see the default Express welcome page.

+ +

Express - Generated App Default Screen

+ +

We'll talk more about the generated app when we get to the article on generating a skeleton application.

+ + + +

Summary

+ +

You now have a Node development environment up and running on your computer that can be used for creating Express web applications. You've also seen how NPM can be used to import Express into an application, and also how you can create applications using the Express Application Generator tool and then run them.

+ +

In the next article we start working through a tutorial to build a complete web application using this environment and associated tools.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}

+ + + +

In this module

+ + diff --git a/files/ko/learn/server-side/express_nodejs/skeleton_website/index.html b/files/ko/learn/server-side/express_nodejs/skeleton_website/index.html new file mode 100644 index 0000000000..ca72e39124 --- /dev/null +++ b/files/ko/learn/server-side/express_nodejs/skeleton_website/index.html @@ -0,0 +1,512 @@ +--- +title: 'Express Tutorial Part 2: 스켈레톤 웹사이트 만들기' +slug: Learn/Server-side/Express_Nodejs/스켈레톤_웹사이트 +translation_of: Learn/Server-side/Express_Nodejs/skeleton_website +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}

+ +

This second article in our Express Tutorial shows how you can create a "skeleton" website project which you can then go on to populate with site-specific routes, templates/views, and database calls.

+ + + + + + + + + + + + +
Prerequisites:Set up a Node development environment. Review the Express Tutorial.
Objective:Express 앱 제너레이터를 사용하여 자신만의 새로운 웹사이트 프로젝트를 시작할 수 있다.
+ +

Overview

+ +

이 아티클은 당신이 Express Application Generator 도구를 이용하여 스켈레톤(최소한의 프레임 모형만 갖춘) 웹사이트를 만드는 방법을 보여줍니다. 이는 사이트에 맞춘 라우트, 뷰/템플릿 그리고 데이터 베이스를 사용할 수 있게 합니다. In this case, we'll use the tool to create the framework for our Local Library website, to which we'll later add all the other code needed by the site. The process is extremely simple, requiring only that you invoke the generator on the command line with a new project name, optionally also specifying the site's template engine and CSS generator.

+ +

The following sections show you how to call the application generator, and provides a little explanation about the different view/CSS options. We'll also explain how the skeleton website is structured. At the end, we'll show how you can run the website to verify that it works.

+ +
+

Note: The Express Application Generator is not the only generator for Express applications, and the generated project is not the only viable way to structure your files and directories. The generated site does however have a modular structure that is easy to extend and understand. For information about a minimal Express application, see Hello world example (Express docs).

+
+ +

Using the application generator

+ +

You should already have installed the generator as part of setting up a Node development environment. As a quick reminder, you install the generator tool site-wide using the NPM package manager, as shown:

+ +
npm install express-generator -g
+ +

The generator has a number of options, which you can view on the command line using the --help (or -h) command:

+ +
> express --help
+
+    Usage: express [options] [dir]
+
+
+  Options:
+
+        --version        output the version number
+    -e, --ejs            add ejs engine support
+        --pug            add pug engine support
+        --hbs            add handlebars engine support
+    -H, --hogan          add hogan.js engine support
+    -v, --view <engine>  add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
+        --no-view        use static html instead of view engine
+    -c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
+        --git            add .gitignore
+    -f, --force          force on non-empty directory
+    -h, --help           output usage information
+
+ +

You can simply specify express to create a project inside the current directory using the Jade view engine and plain CSS (if you specify a directory name then the project will be created in a sub-folder with that name).

+ +
express
+ +

You can also choose a view (template) engine using --view and/or a CSS generation engine using --css.

+ +
+

Note: The other options for choosing template engines (e.g. --hogan, --ejs, --hbs etc.) are deprecated. Use --view (or -v)!

+
+ +

What view engine should I use?

+ +

The Express Application Generator allows you to configure a number of popular view/templating engines, including EJS, Hbs, Pug (Jade), Twig, and Vash, although it chooses Jade by default if you don't specify a view option. Express itself can also support a large number of other templating languages out of the box.

+ +
+

Note: If you want to use a template engine that isn't supported by the generator then see Using template engines with Express (Express docs) and the documentation for your target view engine.

+
+ +

Generally speaking, you should select a templating engine that delivers all the functionality you need and allows you to be productive sooner — or in other words, in the same way that you choose any other component! Some of the things to consider when comparing template engines:

+ + + +
+

Tip: There are many resources on the Internet to help you compare the different options!

+
+ +

For this project, we'll use the Pug templating engine (this is the recently-renamed Jade engine), as this is one of the most popular Express/JavaScript templating languages and is supported out of the box by the generator.

+ +

What CSS stylesheet engine should I use?

+ +

The Express Application Generator allows you to create a project that is configured to use the most common CSS stylesheet engines: LESS, SASS, Compass, Stylus.

+ +
+

Note: CSS has some limitations that make certain tasks difficult. CSS stylesheet engines allow you to use more powerful syntax for defining your CSS and then compile the definition into plain-old CSS for browsers to use.

+
+ +

As with templating engines, you should use the stylesheet engine that will allow your team to be most productive. For this project, we'll use the ordinary CSS (the default) as our CSS requirements are not sufficiently complicated to justify using anything else.

+ +

What database should I use?

+ +

The generated code doesn't use/include any databases. Express apps can use any database mechanism supported by Node (Express itself doesn't define any specific additional behavior/requirements for database management).

+ +

We'll discuss how to integrate with a database in a later article.

+ +

Creating the project

+ +

Local Library 샘플 앱을 위해서 우리는 express-locallibrary-tutorial 라는 이름의 프로젝트를 생성할 것입니다. Pug 라는(jade의 후속격) 템플릿 라이브러리를 사용할 것이며, CSS stylesheet 엔진은 사용하지 않습니다.

+ +

First, navigate to where you want to create the project and then run the Express Application Generator in the command prompt as shown:

+ +
express express-locallibrary-tutorial --view=pug
+
+ +

The generator will create (and list) the project's files.

+ +
   create : express-locallibrary-tutorial\
+   create : express-locallibrary-tutorial\public\
+   create : express-locallibrary-tutorial\public\javascripts\
+   create : express-locallibrary-tutorial\public\images\
+   create : express-locallibrary-tutorial\public\stylesheets\
+   create : express-locallibrary-tutorial\public\stylesheets\style.css
+   create : express-locallibrary-tutorial\routes\
+   create : express-locallibrary-tutorial\routes\index.js
+   create : express-locallibrary-tutorial\routes\users.js
+   create : express-locallibrary-tutorial\views\
+   create : express-locallibrary-tutorial\views\error.pug
+   create : express-locallibrary-tutorial\views\index.pug
+   create : express-locallibrary-tutorial\views\layout.pug
+   create : express-locallibrary-tutorial\app.js
+   create : express-locallibrary-tutorial\package.json
+   create : express-locallibrary-tutorial\bin\
+   create : express-locallibrary-tutorial\bin\www
+
+   change directory:
+     > cd express-locallibrary-tutorial
+
+   install dependencies:
+     > npm install
+
+   run the app:
+     > SET DEBUG=express-locallibrary-tutorial:* & npm start
+ +

At the end of the output, the generator provides instructions on how you install the dependencies (as listed in the package.json file) and then how to run the application (the instructions above are for Windows; on Linux/macOS they will be slightly different).

+ +
+

Note: When using Windows, the && and & assumes you are using the Command Prompt. If you are using the new default PowerShell terminal do not concatenate the commands with && and &. Instead set the DEBUG environment variable with $ENV:DEBUG = "express-locallibrary-tutorial:*";. The npm start can be followed by the npm start. 

+
+ +

Running the skeleton website

+ +

At this point, we have a complete skeleton project. The website doesn't actually do very much yet, but it's worth running it to show how it works.

+ +
    +
  1. First, install the dependencies (the install command will fetch all the dependency packages listed in the project's package.json file). + + 
    cd express-locallibrary-tutorial
+npm install
    +
    2. +
  2. Then run the application. +
      +
    • On Windows, use this command: + 
      SET DEBUG=express-locallibrary-tutorial:* & npm start
      +
      • +
    • On macOS or Linux, use this command: + 
      DEBUG=express-locallibrary-tutorial:* npm start
+
      +
      • +
    +
    3. +
  3. Then load http://localhost:3000/ in your browser to access the app.
    4. +
+ +

You should see a browser page that looks like this:

+ +

Browser for default Express app generator website

+ +

You have a working Express application, serving itself to localhost:3000.

+ +
+

Note: You could also start the app just using the npm start command. Specifying the DEBUG variable as shown enables console logging/debugging. For example, when you visit the above page you'll see debug output like this:

+ +
>SET DEBUG=express-locallibrary-tutorial:* & npm start
+
+> express-locallibrary-tutorial@0.0.0 start D:\github\mdn\test\exprgen\express-locallibrary-tutorial
+> node ./bin/www
+
+  express-locallibrary-tutorial:server Listening on port 3000 +0ms
+GET / 304 490.296 ms - -
+GET /stylesheets/style.css 200 4.886 ms - 111
+
+
+ +

Enable server restart on file changes

+ +

Any changes you make to your Express website are currently not visible until you restart the server. It quickly becomes very irritating to have to stop and restart your server every time you make a change, so it is worth taking the time to automate restarting the server when needed.

+ +

One of the easiest such tools for this purpose is nodemon. This is usually installed globally (as it is a "tool"), but here we'll install and use it locally as a developer dependency, so that any developers working with the project get it automatically when they install the application. Use the following command in the root directory for the skeleton project:

+ +
npm install --save-dev nodemon
+ +

If you still choose to install nodemon globally to your machine, and not only to your project's package.json file:

+ +
npm install -g nodemon
+ +

If you open your project's package.json file you'll now see a new section with this dependency:

+ +
 "devDependencies": {
+    "nodemon": "^1.18.10"
+}
+
+ +

Because the tool isn't installed globally we can't launch it from the command line (unless we add it to the path) but we can call it from an NPM script because NPM knows all about the installed packages. Find the the scripts section of your package.json. Initially, it will contain one line, which begins with "start". Update it by putting a comma at the end of that line, and adding the "devstart" line seen below:

+ +
  "scripts": {
+    "start": "node ./bin/www",
+    "devstart": "nodemon ./bin/www",
+    "serverstart": "DEBUG=express-locallibrary-tutorial:* npm run devstart"
+  },
+
+ +

We can now start the server in almost exactly the same way as previously, but with the devstart command specified:

+ + + +
+

Note: Now if you edit any file in the project the server will restart (or you can restart it by typing rs on the command prompt at any time). You will still need to reload the browser to refresh the page.

+ +

We now have to call "npm run <scriptname>" rather than just npm start, because "start" is actually an NPM command that is mapped to the named script. We could have replaced the command in the start script but we only want to use nodemon during development, so it makes sense to create a new script command.

+ +

The serverstart command added to the scripts in the package.json above is a very good example. Using this approach means you no longer have to type a long command shown to start the server. Note that the particular command added to the script works for macOS or Linux only.

+
+ +

The generated project

+ +

Let's now take a look at the project we just created.

+ +

Directory structure

+ +

The generated project, now that you have installed dependencies, has the following file structure (files are the items not prefixed with "/"). The package.json file defines the application dependencies and other information. It also defines a startup script that will call the application entry point, the JavaScript file /bin/www. This sets up some of the application error handling and then loads app.js to do the rest of the work. The app routes are stored in separate modules under the routes/ directory. The templates are stored under the /views directory.

+ +
/express-locallibrary-tutorial
+    app.js
+    /bin
+        www
+    package.json
+    package-lock.json
+    /node_modules
+        [about 6700 subdirectories and files]
+    /public
+        /images
+        /javascripts
+        /stylesheets
+            style.css
+    /routes
+        index.js
+        users.js
+    /views
+        error.pug
+        index.pug
+        layout.pug
+
+
+ +

The following sections describe the files in a little more detail.

+ +

package.json

+ +

The package.json file defines the application dependencies and other information:

+ +
{
+  "name": "express-locallibrary-tutorial",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www",
+    "devstart": "nodemon ./bin/www"
+  },
+  "dependencies": {
+    "cookie-parser": "~1.4.3",
+    "debug": "~2.6.9",
+    "express": "~4.16.0",
+    "http-errors": "~1.6.2",
+    "morgan": "~1.9.0",
+    "pug": "2.0.0-beta11"
+  },
+  "devDependencies": {
+    "nodemon": "^1.18.10"
+  }
+}
+
+ +

The dependencies include the express package and the package for our selected view engine (pug). In addition, we have the following packages that are useful in many web applications:

+ + + +

The scripts section defines a "start" script, which is what we are invoking when we call npm start to start the server. From the script definition, you can see that this actually starts the JavaScript file ./bin/www with node. It also defines a "devstart" script, which we invoke when calling npm run devstart instead. This starts the same ./bin/www file, but with nodemon rather than node.

+ +
  "scripts": {
+    "start": "node ./bin/www",
+    "devstart": "nodemon ./bin/www"
+  },
+
+ +

www file

+ +

The file /bin/www is the application entry point! The very first thing this does is require() the "real" application entry point (app.js, in the project root) that sets up and returns the express() application object.

+ +
#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+var app = require('../app');
+
+ +
+

Note: require() is a global node function that is used to import modules into the current file. Here we specify app.js module using a relative path and omitting the optional (.js) file extension.

+
+ +

The remainder of the code in this file sets up a node HTTP server with app set to a specific port (defined in an environment variable or 3000 if the variable isn't defined), and starts listening and reporting server errors and connections. For now you don't really need to know anything else about the code (everything in this file is "boilerplate"), but feel free to review it if you're interested.

+ +

app.js

+ +

This file creates an express application object (named app, by convention), sets up the application with various settings and middleware, and then exports the app from the module. The code below shows just the parts of the file that create and export the app object:

+ +
var express = require('express');
+var app = express();
+...
+module.exports = app;
+
+ +

Back in the www entry point file above, it is this module.exports object that is supplied to the caller when this file is imported.

+ +

Let's work through the app.js file in detail. First, we import some useful node libraries into the file using require(), including http-errors, express, morgan and cookie-parser that we previously downloaded for our application using NPM; and path, which is a core Node library for parsing file and directory paths.

+ +
var createError = require('http-errors');
+var express = require('express');
+var path = require('path');
+var cookieParser = require('cookie-parser');
+var logger = require('morgan');
+
+ +

Then we require() modules from our routes directory. These modules/files contain code for handling particular sets of related "routes" (URL paths). When we extend the skeleton application, for example to list all books in the library, we will add a new file for dealing with book-related routes.

+ +
var indexRouter = require('./routes/index');
+var usersRouter = require('./routes/users');
+
+ +
+

Note: At this point, we have just imported the module; we haven't actually used its routes yet (this happens just a little bit further down the file).

+
+ +

Next, we create the app object using our imported express module, and then use it to set up the view (template) engine. There are two parts to setting up the engine. First, we set the 'views' value to specify the folder where the templates will be stored (in this case the subfolder /views). Then we set the 'view engine' value to specify the template library (in this case "pug").

+ +
var app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'pug');
+
+ +

The next set of functions call app.use() to add the middleware libraries into the request handling chain. In addition to the 3rd party libraries we imported previously, we use the express.static middleware to get Express to serve all the static files in the /public directory in the project root.

+ +
app.use(logger('dev'));
+app.use(express.json());
+app.use(express.urlencoded({ extended: false }));
+app.use(cookieParser());
+app.use(express.static(path.join(__dirname, 'public')));
+
+ +

Now that all the other middleware is set up, we add our (previously imported) route-handling code to the request handling chain. The imported code will define particular routes for the different parts of the site:

+ +
app.use('/', indexRouter);
+app.use('/users', usersRouter);
+
+ +
+

Note: The paths specified above ('/' and '/users') are treated as a prefix to routes defined in the imported files. So for example, if the imported users module defines a route for /profile, you would access that route at /users/profile. We'll talk more about routes in a later article.

+
+ +

The last middleware in the file adds handler methods for errors and HTTP 404 responses.

+ +
// catch 404 and forward to error handler
+app.use(function(req, res, next) {
+  next(createError(404));
+});
+
+// error handler
+app.use(function(err, req, res, next) {
+  // set locals, only providing error in development
+  res.locals.message = err.message;
+  res.locals.error = req.app.get('env') === 'development' ? err : {};
+
+  // render the error page
+  res.status(err.status || 500);
+  res.render('error');
+});
+
+ +

The Express application object (app) is now fully configured. The last step is to add it to the module exports (this is what allows it to be imported by /bin/www).

+ +
module.exports = app;
+ +

Routes

+ +

The route file /routes/users.js is shown below (route files share a similar structure, so we don't need to also show index.js). First, it loads the express module and uses it to get an express.Router object. Then it specifies a route on that object and lastly exports the router from the module (this is what allows the file to be imported into app.js).

+ +
var express = require('express');
+var router = express.Router();
+
+/* GET users listing. */
+router.get('/', function(req, res, next) {
+  res.send('respond with a resource');
+});
+
+module.exports = router;
+
+ +

The route defines a callback that will be invoked whenever an HTTP GET request with the correct pattern is detected. The matching pattern is the route specified when the module is imported ('/users') plus whatever is defined in this file ('/'). In other words, this route will be used when an URL of /users/ is received.

+ +
+

Tip: Try this out by running the server with node and visiting the URL in your browser: http://localhost:3000/users/. You should see a message: 'respond with a resource'.

+
+ +

One thing of interest above is that the callback function has the third argument 'next', and is hence a middleware function rather than a simple route callback. While the code doesn't currently use the next argument, it may be useful in the future if you want to add multiple route handlers to the '/' route path.

+ +

Views (templates)

+ +

The views (templates) are stored in the /views directory (as specified in app.js) and are given the file extension .pug. The method Response.render() is used to render a specified template along with the values of named variables passed in an object, and then send the result as a response. In the code below from /routes/index.js you can see how that route renders a response using the template "index" passing the template variable "title".

+ +
/* GET home page. */
+router.get('/', function(req, res, next) {
+  res.render('index', { title: 'Express' });
+});
+
+ +

The corresponding template for the above route is given below (index.pug). We'll talk more about the syntax later. All you need to know for now is that the title variable (with value 'Express') is inserted where specified in the template.

+ +
extends layout
+
+block content
+  h1= title
+  p Welcome to #{title}
+
+ +

Challenge yourself

+ +

Create a new route in /routes/users.js that will display the text "You're so cool" at URL /users/cool/. Test it by running the server and visiting http://localhost:3000/users/cool/ in your browser

+ + + +

Summary

+ +

You have now created a skeleton website project for the Local Library and verified that it runs using node. Most importantly, you also understand how the project is structured, so you have a good idea where we need to make changes to add routes and views for our local library.

+ +

Next, we'll start modifying the skeleton so that it works as a library website.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}

+ +

In this module

+ + diff --git "a/files/ko/learn/server-side/express_nodejs/\352\260\234\353\260\234_\355\231\230\352\262\275/index.html" "b/files/ko/learn/server-side/express_nodejs/\352\260\234\353\260\234_\355\231\230\352\262\275/index.html" deleted file mode 100644 index f3ab1846f6..0000000000 --- "a/files/ko/learn/server-side/express_nodejs/\352\260\234\353\260\234_\355\231\230\352\262\275/index.html" +++ /dev/null @@ -1,399 +0,0 @@ ---- -title: Node 개발 환경을 설치하기 -slug: Learn/Server-side/Express_Nodejs/개발_환경 -tags: - - CodingScripting - - Express - - Node - - nodejs - - npm - - 개발 환경 - - 배움 - - 서버-사이드 - - 인트로 - - 초보자 -translation_of: Learn/Server-side/Express_Nodejs/development_environment ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}
- -

이제 Express에 관한 내용을 알았으니, Windows, Linux (Ubuntu), 그리고 macOS 에서의 Node/Express 개발 환경을 설정하고 테스트하는 법을 보여드리겠습니다. 사용중인 운영 체제가 무엇이든 간에, 이 글은 당신에게 Express 앱 개발을 시작할 수 있도록 필요한 내용을 제공합니다.

- - - - - - - - - - - - -
전제 조건:터미널 혹은 명령어 창을 여는 방법. 당신의 개발 컴퓨터의 운영 체제에 소프트웨어 패키지를 설치하는 방법을 알고 있어야 합니다.
목표:당신의 컴퓨터에 Express (X.XX) 을 위한 개발 환경을 설치하는 것.
- -

Express 개발 환경 개요

- -

Node와 Express를 통해 웹앱 개발을 한결 수월하게 할 수 있습니다. 이 섹션에서는 어떤 도구들이 필요한지, Ubuntu, macOS, 그리고 Windows에서 어떻게 Node와 Express를 설치하는지, 마지막으로, 설치 후 어떻게 테스트해볼 수 있는지 살펴볼 것입니다.

- -

Express 개발 환경이란 무엇입니까?

- -

Express개발환경은 Nodejs의 설치, NPM 패키지 매니저, 그리고 (선택적) 로컬 컴퓨터의 Express Application Generator를 포함합니다.

- -

Node and the NPM package manager are installed together from prepared binary packages, installers, operating system package managers or from source (as shown in the following sections). Express is then installed by NPM as a dependency of your individual Express web applications (along with other libraries like template engines, database drivers, authentication middleware, middleware to serve static files, etc.)

- -

NPM can also be used to (globally) install the Express Application Generator, a handy tool for creating skeleton Express web apps that follow the MVC pattern. The application generator is optional because you don't need to use this tool to create apps that use Express, or construct Express apps that have the same architectural layout or dependencies. We'll be using it though, because it makes getting started a lot easier, and promotes a modular application structure.

- -
-

Note: Unlike for some other web frameworks, the development environment does not include a separate development web server. In Node/Express a web application creates and runs its own web server!

-
- -

There are other peripheral tools that are part of a typical development environment, including text editors or IDEs for editing code, and source control management tools like Git for safely managing different versions of your code. We are assuming that you've already got these sorts of tools installed (in particular a text editor).

- -

What operating systems are supported?

- -

Node can be run on Windows, macOS, many "flavours" of Linux, Docker, etc. (there is a full list on the nodejs Downloads page). Almost any personal computer should have the necessary performance to run Node during development. Express is run in a Node environment, and hence can run on any platform that runs Node.

- -

이 기사에서는 Windows, macOS, 그리고 Ubuntu Linux에서의 설치방법을 안내해드리고 있습니다.

- -

What version of Node/Express should you use?

- -

There are many releases of Node — newer releases contain bug fixes, support for more recent versions of ECMAScript (JavaScript) standards, and improvements to the Node APIs. 

- -

Generally you should use the most recent LTS (long-term supported) release as this will be more stable than the "current" release while still having relatively recent features (and is still being actively maintained). You should use the Current release if you need a feature that is not present in the LTS version.

- -

For Express you should always use the latest version.

- -

What about databases and other dependencies?

- -

Other dependencies, such as database drivers, template engines, authentication engines, etc. are part of the application, and are imported into the application environment using the NPM package manager.  We'll discuss them in later app-specific articles.

- -

Node 설치하기

- -

Express 를 사용하기 위해서 우선 운영체제에 Nodejs와 Node Package Manager (NPM)를 설치해야 합니다. The following sections explain the easiest way to install the Long Term Supported (LTS) version of Nodejs on Ubuntu Linux 16.04, macOS, and Windows 10.

- -
-

Tip: The sections below show the easiest way to install Node and NPM on our target OS platforms. If you're using another OS or just want to see some of the other approaches for the current platforms then see Installing Node.js via package manager (nodejs.org).

-
- -

Windows and macOS

- -

Node와 NPM을 설치하는 것은 간단합니다:

- -
    -
  1. Installer를 다운받읍시다: -
      -
    1. https://nodejs.org/en/
      2. -
    2. "안정적이고 신뢰도가 높은" LTS버튼을 클릭해 다운로드를 시작합니다. .
      3. -
    -
    2. -
  2. 다운로드된 파일을 더블클릭해 Node를 설치합니다.
    3. -
- -

The easiest way to install the most recent LTS version of Node 10.x is to use the package manager to get it from the Ubuntu binary distributions repository. This can be done very simply by running the following two commands on your terminal:

- -
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
-sudo apt-get install -y nodejs
-
- -
-

Warning: Don't install directly from the normal Ubuntu repositories because they contain very old versions of node.

-
- -
    -
- -

Nodejs와 NPM 테스팅

- -

The easiest way to test that node is installed is to run the "version" command in your terminal/command prompt and check that a version string is returned:

- -
>node -v
-v10.15.1
- -

The Nodejs package manager NPM should also have been installed, and can be tested in the same way:

- -
>npm -v
-6.4.1
- -

As a slightly more exciting test let's create a very basic "pure node" server that simply prints out "Hello World" in the browser when you visit the correct URL in your browser:

- -
    -
  1. Copy the following text into a file named hellonode.js. This uses pure Node features (nothing from Express) and some ES6 syntax: - - 
    //Load HTTP module
-const http = require("http");
-const hostname = '127.0.0.1';
-const port = 3000;
-
-//Create HTTP server and listen on port 3000 for requests
-const server = http.createServer((req, res) => {
-
-  //Set the response HTTP header with HTTP status and Content type
-  res.statusCode = 200;
-  res.setHeader('Content-Type', 'text/plain');
-  res.end('Hello World\n');
-});
-
-//listen for request on port 3000, and as a callback function have the port listened on logged
-server.listen(port, hostname, () => {
-  console.log(`Server running at http://${hostname}:${port}/`);
-});
-
    - -

    The code imports the "http" module and uses it to create a server (createServer()) that listens for HTTP requests on port 3000. The script then prints a message to the console about what browser URL you can use to test the server. The createServer() function takes as an argument a callback function that will be invoked when an HTTP request is received — this simply returns a response with an HTTP status code of 200 ("OK") and the plain text "Hello World".

    - -
    -

    Note:  Don't worry if you don't understand exactly what this code is doing yet! We'll explain our code in greater detail once we start using Express!

    -
    -
    2. -
  2. Start the server by navigating into the same directory as your hellonode.js file in your command prompt, and calling node along with the script name, like so: - 
    >node hellonode.js
-Server running at http://127.0.0.1:3000/
-
    -
    3. -
  3. Navigate to the URL http://127.0.0.1:3000 . If everything is working, the browser should simply display the string "Hello World".
    4. -
- -

Using NPM

- -

Next to Node itself, NPM is the most important tool for working with Node applications. NPM is used to fetch any packages (JavaScript libraries) that an application needs for development, testing, and/or production, and may also be used to run tests and tools used in the development process. 

- -
-

Note: From Node's perspective, Express is just another package that you need to install using NPM and then require in your own code.

-
- -

You can manually use NPM to separately fetch each needed package. Typically we instead manage dependencies using a plain-text definition file named package.json. This file lists all the dependencies for a specific JavaScript "package", including the package's name, version, description, initial file to execute, production dependencies, development dependencies, versions of Node it can work with, etc. The package.json file should contain everything NPM needs to fetch and run your application (if you were writing a reusable library you could use this definition to upload your package to the npm respository and make it available for other users).

- -

dependencies 추가

- -

The following steps show how you can use NPM to download a package, save it into the project dependencies, and then require it in a Node application.

- -
-

Note: Here we show the instructions to fetch and install the Express package. Later on we'll show how this package, and others, are already specified for us using the Express Application Generator. This section is provided because it is useful to understand how NPM works and what is being created by the application generator.

-
- -
    -
  1. First create a directory for your new application and navigate into it: - 
    mkdir myapp
-cd myapp
    -
    2. -
  2. Use the npm init command to create a package.json file for your application. This command prompts you for a number of things, including the name and version of your application and the name of the initial entry point file (by default this is index.js). For now, just accept the defaults: - 
    npm init
    - -

    If you display the package.json file (cat package.json), you will see the defaults that you accepted, ending with the license.

    - - 
    {
-  "name": "myapp",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "ISC"
-}
-
    -
    3. -
  3. Now install Express in the myapp directory and save it in the dependencies list of your package.json file
    4. -
  4. - 
    npm install express
    - -

    The dependencies section of your package.json will now appear at the end of the package.json file and will include Express.

    - - 
    {
-  "name": "myapp",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "express": "^4.16.4"
-  }
-}
-
    -
    5. -
  5. To use the Express library you call the require() function in your index.js file to include it in your application. Create this file now, in the root of the "myapp" application directory, and give it the following contents: - 
    const express = require('express')
-const app = express();
-
-app.get('/', (req, res) => {
-  res.send('Hello World!')
-});
-
-app.listen(8000, () => {
-  console.log('Example app listening on port 8000!')
-});
-
    - -

    This code shows a minimal "HelloWorld" Express web application. This imports the "express" module using require() and uses it to create a server (app) that listens for HTTP requests on port 8000 and prints a message to the console explaining what browser URL you can use to test the server. The app.get() function only responds to HTTP GET requests with the specified URL path ('/'), in this case by calling a function to send our Hello World! message.

    -
    6. -
  6. You can start the server by calling node with the script in your command prompt: - 
    >node index.js
-Example app listening on port 8000
-
    -
    7. -
  7. Navigate to the URL (http://127.0.0.1:8000/). If everything is working, the browser should simply display the string "Hello World!".
    8. -
- -

Development dependencies

- -

If a dependency is only used during development, you should instead save it as a "development dependency" (so that your package users don't have to install it in production). For example, to use the popular JavaScript Linting tool eslint you would call NPM as shown:

- -
npm install eslint --save-dev
- -

The following entry would then be added to your application's package.json:

- -
  "devDependencies": {
-    "eslint": "^4.12.1"
-  }
-
- -
-

Note: "Linters" are tools that perform static analysis on software in order to recognise and report adherence/non-adherance to some set of coding best practice.

-
- -

Running tasks

- -

In addition to defining and fetching dependencies you can also define named scripts in your package.json files and call NPM to execute them with the run-script command. This approach is commonly used to automate running tests and parts of the development or build toolchain (e.g., running tools to minify JavaScript, shrink images, LINT/analyse your code, etc).

- -
-

Note: Task runners like Gulp and Grunt can also be used to run tests and other external tools.

-
- -

For example, to define a script to run the eslint development dependency that we specified in the previous section we might add the following script block to our package.json file (assuming that our application source is in a folder /src/js):

- -
"scripts": {
-  ...
-  "lint": "eslint src/js"
-  ...
-}
-
- -

To explain a little further, eslint src/js is a command that we could enter in our terminal/command line to run eslint on JavaScript files contained in the src/js directory inside our app directory. Including the above inside our app's package.json file provides a shortcut for this command — lint.

- -

We would then be able to run eslint using NPM by calling:

- -
npm run-script lint
-# OR (using the alias)
-npm run lint
-
- -

This example may not look any shorter than the original command, but you can include much bigger commands inside your npm scripts, including chains of multiple commands. You could identify a single npm script that runs all your tests at once.

- -

Installing the Express Application Generator

- -

The Express Application Generator tool generates an Express application "skeleton". Install the generator using NPM as shown (the -g flag installs the tool globally so that you can call it from anywhere):

- -
npm install express-generator -g
- -

To create an Express app named "helloworld" with the default settings, navigate to where you want to create it and run the app as shown:

- -
express helloworld
- -
-

Note: You can also specify the template library to use and a number of other settings. Use the help command to see all the options:

- -
express --help
-
-
- -

NPM will create the new Express app in a sub folder of your current location, displaying build progress on the console. On completion, the tool will display the commands you need to enter to install the Node dependencies and start the app.

- -
-

The new app will have a package.json file in its root directory. You can open this to see what dependencies are installed, including Express and the template library Jade:

- -
{
-  "name": "helloworld",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "start": "node ./bin/www"
-  },
-  "dependencies": {
-    "cookie-parser": "~1.4.3",
-    "debug": "~2.6.9",
-    "express": "~4.16.0",
-    "http-errors": "~1.6.2",
-    "jade": "~1.11.0",
-    "morgan": "~1.9.0"
-  }
-}
-
- - -
- -

Install all the dependencies for the helloworld app using NPM as shown:

- -
cd helloworld
-npm install
-
- -

Then run the app (the commands are slightly different for Windows and Linux/macOS), as shown below:

- -
# Run the helloworld on Windows with Command Prompt
-SET DEBUG=helloworld:* & npm start
-
-# Run the helloworld on Windows with PowerShell
-SET DEBUG=helloworld:* | npm start
-
-# Run helloworld on Linux/macOS
-DEBUG=helloworld:* npm start
-
- -

The DEBUG command creates useful logging, resulting in an output like that shown below.

- -
>SET DEBUG=helloworld:* & npm start
-
-> helloworld@0.0.0 start D:\Github\expresstests\helloworld
-> node ./bin/www
-
-  helloworld:server Listening on port 3000 +0ms
- -

Open a browser and navigate to http://127.0.0.1:3000/ to see the default Express welcome page.

- -

Express - Generated App Default Screen

- -

We'll talk more about the generated app when we get to the article on generating a skeleton application.

- - - -

Summary

- -

You now have a Node development environment up and running on your computer that can be used for creating Express web applications. You've also seen how NPM can be used to import Express into an application, and also how you can create applications using the Express Application Generator tool and then run them.

- -

In the next article we start working through a tutorial to build a complete web application using this environment and associated tools.

- -

See also

- - - -

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}

- - - -

In this module

- - diff --git "a/files/ko/learn/server-side/express_nodejs/\354\212\244\354\274\210\353\240\210\355\206\244_\354\233\271\354\202\254\354\235\264\355\212\270/index.html" "b/files/ko/learn/server-side/express_nodejs/\354\212\244\354\274\210\353\240\210\355\206\244_\354\233\271\354\202\254\354\235\264\355\212\270/index.html" deleted file mode 100644 index ca72e39124..0000000000 --- "a/files/ko/learn/server-side/express_nodejs/\354\212\244\354\274\210\353\240\210\355\206\244_\354\233\271\354\202\254\354\235\264\355\212\270/index.html" +++ /dev/null @@ -1,512 +0,0 @@ ---- -title: 'Express Tutorial Part 2: 스켈레톤 웹사이트 만들기' -slug: Learn/Server-side/Express_Nodejs/스켈레톤_웹사이트 -translation_of: Learn/Server-side/Express_Nodejs/skeleton_website ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}

- -

This second article in our Express Tutorial shows how you can create a "skeleton" website project which you can then go on to populate with site-specific routes, templates/views, and database calls.

- - - - - - - - - - - - -
Prerequisites:Set up a Node development environment. Review the Express Tutorial.
Objective:Express 앱 제너레이터를 사용하여 자신만의 새로운 웹사이트 프로젝트를 시작할 수 있다.
- -

Overview

- -

이 아티클은 당신이 Express Application Generator 도구를 이용하여 스켈레톤(최소한의 프레임 모형만 갖춘) 웹사이트를 만드는 방법을 보여줍니다. 이는 사이트에 맞춘 라우트, 뷰/템플릿 그리고 데이터 베이스를 사용할 수 있게 합니다. In this case, we'll use the tool to create the framework for our Local Library website, to which we'll later add all the other code needed by the site. The process is extremely simple, requiring only that you invoke the generator on the command line with a new project name, optionally also specifying the site's template engine and CSS generator.

- -

The following sections show you how to call the application generator, and provides a little explanation about the different view/CSS options. We'll also explain how the skeleton website is structured. At the end, we'll show how you can run the website to verify that it works.

- -
-

Note: The Express Application Generator is not the only generator for Express applications, and the generated project is not the only viable way to structure your files and directories. The generated site does however have a modular structure that is easy to extend and understand. For information about a minimal Express application, see Hello world example (Express docs).

-
- -

Using the application generator

- -

You should already have installed the generator as part of setting up a Node development environment. As a quick reminder, you install the generator tool site-wide using the NPM package manager, as shown:

- -
npm install express-generator -g
- -

The generator has a number of options, which you can view on the command line using the --help (or -h) command:

- -
> express --help
-
-    Usage: express [options] [dir]
-
-
-  Options:
-
-        --version        output the version number
-    -e, --ejs            add ejs engine support
-        --pug            add pug engine support
-        --hbs            add handlebars engine support
-    -H, --hogan          add hogan.js engine support
-    -v, --view <engine>  add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
-        --no-view        use static html instead of view engine
-    -c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
-        --git            add .gitignore
-    -f, --force          force on non-empty directory
-    -h, --help           output usage information
-
- -

You can simply specify express to create a project inside the current directory using the Jade view engine and plain CSS (if you specify a directory name then the project will be created in a sub-folder with that name).

- -
express
- -

You can also choose a view (template) engine using --view and/or a CSS generation engine using --css.

- -
-

Note: The other options for choosing template engines (e.g. --hogan, --ejs, --hbs etc.) are deprecated. Use --view (or -v)!

-
- -

What view engine should I use?

- -

The Express Application Generator allows you to configure a number of popular view/templating engines, including EJS, Hbs, Pug (Jade), Twig, and Vash, although it chooses Jade by default if you don't specify a view option. Express itself can also support a large number of other templating languages out of the box.

- -
-

Note: If you want to use a template engine that isn't supported by the generator then see Using template engines with Express (Express docs) and the documentation for your target view engine.

-
- -

Generally speaking, you should select a templating engine that delivers all the functionality you need and allows you to be productive sooner — or in other words, in the same way that you choose any other component! Some of the things to consider when comparing template engines:

- - - -
-

Tip: There are many resources on the Internet to help you compare the different options!

-
- -

For this project, we'll use the Pug templating engine (this is the recently-renamed Jade engine), as this is one of the most popular Express/JavaScript templating languages and is supported out of the box by the generator.

- -

What CSS stylesheet engine should I use?

- -

The Express Application Generator allows you to create a project that is configured to use the most common CSS stylesheet engines: LESS, SASS, Compass, Stylus.

- -
-

Note: CSS has some limitations that make certain tasks difficult. CSS stylesheet engines allow you to use more powerful syntax for defining your CSS and then compile the definition into plain-old CSS for browsers to use.

-
- -

As with templating engines, you should use the stylesheet engine that will allow your team to be most productive. For this project, we'll use the ordinary CSS (the default) as our CSS requirements are not sufficiently complicated to justify using anything else.

- -

What database should I use?

- -

The generated code doesn't use/include any databases. Express apps can use any database mechanism supported by Node (Express itself doesn't define any specific additional behavior/requirements for database management).

- -

We'll discuss how to integrate with a database in a later article.

- -

Creating the project

- -

Local Library 샘플 앱을 위해서 우리는 express-locallibrary-tutorial 라는 이름의 프로젝트를 생성할 것입니다. Pug 라는(jade의 후속격) 템플릿 라이브러리를 사용할 것이며, CSS stylesheet 엔진은 사용하지 않습니다.

- -

First, navigate to where you want to create the project and then run the Express Application Generator in the command prompt as shown:

- -
express express-locallibrary-tutorial --view=pug
-
- -

The generator will create (and list) the project's files.

- -
   create : express-locallibrary-tutorial\
-   create : express-locallibrary-tutorial\public\
-   create : express-locallibrary-tutorial\public\javascripts\
-   create : express-locallibrary-tutorial\public\images\
-   create : express-locallibrary-tutorial\public\stylesheets\
-   create : express-locallibrary-tutorial\public\stylesheets\style.css
-   create : express-locallibrary-tutorial\routes\
-   create : express-locallibrary-tutorial\routes\index.js
-   create : express-locallibrary-tutorial\routes\users.js
-   create : express-locallibrary-tutorial\views\
-   create : express-locallibrary-tutorial\views\error.pug
-   create : express-locallibrary-tutorial\views\index.pug
-   create : express-locallibrary-tutorial\views\layout.pug
-   create : express-locallibrary-tutorial\app.js
-   create : express-locallibrary-tutorial\package.json
-   create : express-locallibrary-tutorial\bin\
-   create : express-locallibrary-tutorial\bin\www
-
-   change directory:
-     > cd express-locallibrary-tutorial
-
-   install dependencies:
-     > npm install
-
-   run the app:
-     > SET DEBUG=express-locallibrary-tutorial:* & npm start
- -

At the end of the output, the generator provides instructions on how you install the dependencies (as listed in the package.json file) and then how to run the application (the instructions above are for Windows; on Linux/macOS they will be slightly different).

- -
-

Note: When using Windows, the && and & assumes you are using the Command Prompt. If you are using the new default PowerShell terminal do not concatenate the commands with && and &. Instead set the DEBUG environment variable with $ENV:DEBUG = "express-locallibrary-tutorial:*";. The npm start can be followed by the npm start. 

-
- -

Running the skeleton website

- -

At this point, we have a complete skeleton project. The website doesn't actually do very much yet, but it's worth running it to show how it works.

- -
    -
  1. First, install the dependencies (the install command will fetch all the dependency packages listed in the project's package.json file). - - 
    cd express-locallibrary-tutorial
-npm install
    -
    2. -
  2. Then run the application. -
      -
    • On Windows, use this command: - 
      SET DEBUG=express-locallibrary-tutorial:* & npm start
      -
      • -
    • On macOS or Linux, use this command: - 
      DEBUG=express-locallibrary-tutorial:* npm start
-
      -
      • -
    -
    3. -
  3. Then load http://localhost:3000/ in your browser to access the app.
    4. -
- -

You should see a browser page that looks like this:

- -

Browser for default Express app generator website

- -

You have a working Express application, serving itself to localhost:3000.

- -
-

Note: You could also start the app just using the npm start command. Specifying the DEBUG variable as shown enables console logging/debugging. For example, when you visit the above page you'll see debug output like this:

- -
>SET DEBUG=express-locallibrary-tutorial:* & npm start
-
-> express-locallibrary-tutorial@0.0.0 start D:\github\mdn\test\exprgen\express-locallibrary-tutorial
-> node ./bin/www
-
-  express-locallibrary-tutorial:server Listening on port 3000 +0ms
-GET / 304 490.296 ms - -
-GET /stylesheets/style.css 200 4.886 ms - 111
-
-
- -

Enable server restart on file changes

- -

Any changes you make to your Express website are currently not visible until you restart the server. It quickly becomes very irritating to have to stop and restart your server every time you make a change, so it is worth taking the time to automate restarting the server when needed.

- -

One of the easiest such tools for this purpose is nodemon. This is usually installed globally (as it is a "tool"), but here we'll install and use it locally as a developer dependency, so that any developers working with the project get it automatically when they install the application. Use the following command in the root directory for the skeleton project:

- -
npm install --save-dev nodemon
- -

If you still choose to install nodemon globally to your machine, and not only to your project's package.json file:

- -
npm install -g nodemon
- -

If you open your project's package.json file you'll now see a new section with this dependency:

- -
 "devDependencies": {
-    "nodemon": "^1.18.10"
-}
-
- -

Because the tool isn't installed globally we can't launch it from the command line (unless we add it to the path) but we can call it from an NPM script because NPM knows all about the installed packages. Find the the scripts section of your package.json. Initially, it will contain one line, which begins with "start". Update it by putting a comma at the end of that line, and adding the "devstart" line seen below:

- -
  "scripts": {
-    "start": "node ./bin/www",
-    "devstart": "nodemon ./bin/www",
-    "serverstart": "DEBUG=express-locallibrary-tutorial:* npm run devstart"
-  },
-
- -

We can now start the server in almost exactly the same way as previously, but with the devstart command specified:

- - - -
-

Note: Now if you edit any file in the project the server will restart (or you can restart it by typing rs on the command prompt at any time). You will still need to reload the browser to refresh the page.

- -

We now have to call "npm run <scriptname>" rather than just npm start, because "start" is actually an NPM command that is mapped to the named script. We could have replaced the command in the start script but we only want to use nodemon during development, so it makes sense to create a new script command.

- -

The serverstart command added to the scripts in the package.json above is a very good example. Using this approach means you no longer have to type a long command shown to start the server. Note that the particular command added to the script works for macOS or Linux only.

-
- -

The generated project

- -

Let's now take a look at the project we just created.

- -

Directory structure

- -

The generated project, now that you have installed dependencies, has the following file structure (files are the items not prefixed with "/"). The package.json file defines the application dependencies and other information. It also defines a startup script that will call the application entry point, the JavaScript file /bin/www. This sets up some of the application error handling and then loads app.js to do the rest of the work. The app routes are stored in separate modules under the routes/ directory. The templates are stored under the /views directory.

- -
/express-locallibrary-tutorial
-    app.js
-    /bin
-        www
-    package.json
-    package-lock.json
-    /node_modules
-        [about 6700 subdirectories and files]
-    /public
-        /images
-        /javascripts
-        /stylesheets
-            style.css
-    /routes
-        index.js
-        users.js
-    /views
-        error.pug
-        index.pug
-        layout.pug
-
-
- -

The following sections describe the files in a little more detail.

- -

package.json

- -

The package.json file defines the application dependencies and other information:

- -
{
-  "name": "express-locallibrary-tutorial",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "start": "node ./bin/www",
-    "devstart": "nodemon ./bin/www"
-  },
-  "dependencies": {
-    "cookie-parser": "~1.4.3",
-    "debug": "~2.6.9",
-    "express": "~4.16.0",
-    "http-errors": "~1.6.2",
-    "morgan": "~1.9.0",
-    "pug": "2.0.0-beta11"
-  },
-  "devDependencies": {
-    "nodemon": "^1.18.10"
-  }
-}
-
- -

The dependencies include the express package and the package for our selected view engine (pug). In addition, we have the following packages that are useful in many web applications:

- - - -

The scripts section defines a "start" script, which is what we are invoking when we call npm start to start the server. From the script definition, you can see that this actually starts the JavaScript file ./bin/www with node. It also defines a "devstart" script, which we invoke when calling npm run devstart instead. This starts the same ./bin/www file, but with nodemon rather than node.

- -
  "scripts": {
-    "start": "node ./bin/www",
-    "devstart": "nodemon ./bin/www"
-  },
-
- -

www file

- -

The file /bin/www is the application entry point! The very first thing this does is require() the "real" application entry point (app.js, in the project root) that sets up and returns the express() application object.

- -
#!/usr/bin/env node
-
-/**
- * Module dependencies.
- */
-
-var app = require('../app');
-
- -
-

Note: require() is a global node function that is used to import modules into the current file. Here we specify app.js module using a relative path and omitting the optional (.js) file extension.

-
- -

The remainder of the code in this file sets up a node HTTP server with app set to a specific port (defined in an environment variable or 3000 if the variable isn't defined), and starts listening and reporting server errors and connections. For now you don't really need to know anything else about the code (everything in this file is "boilerplate"), but feel free to review it if you're interested.

- -

app.js

- -

This file creates an express application object (named app, by convention), sets up the application with various settings and middleware, and then exports the app from the module. The code below shows just the parts of the file that create and export the app object:

- -
var express = require('express');
-var app = express();
-...
-module.exports = app;
-
- -

Back in the www entry point file above, it is this module.exports object that is supplied to the caller when this file is imported.

- -

Let's work through the app.js file in detail. First, we import some useful node libraries into the file using require(), including http-errors, express, morgan and cookie-parser that we previously downloaded for our application using NPM; and path, which is a core Node library for parsing file and directory paths.

- -
var createError = require('http-errors');
-var express = require('express');
-var path = require('path');
-var cookieParser = require('cookie-parser');
-var logger = require('morgan');
-
- -

Then we require() modules from our routes directory. These modules/files contain code for handling particular sets of related "routes" (URL paths). When we extend the skeleton application, for example to list all books in the library, we will add a new file for dealing with book-related routes.

- -
var indexRouter = require('./routes/index');
-var usersRouter = require('./routes/users');
-
- -
-

Note: At this point, we have just imported the module; we haven't actually used its routes yet (this happens just a little bit further down the file).

-
- -

Next, we create the app object using our imported express module, and then use it to set up the view (template) engine. There are two parts to setting up the engine. First, we set the 'views' value to specify the folder where the templates will be stored (in this case the subfolder /views). Then we set the 'view engine' value to specify the template library (in this case "pug").

- -
var app = express();
-
-// view engine setup
-app.set('views', path.join(__dirname, 'views'));
-app.set('view engine', 'pug');
-
- -

The next set of functions call app.use() to add the middleware libraries into the request handling chain. In addition to the 3rd party libraries we imported previously, we use the express.static middleware to get Express to serve all the static files in the /public directory in the project root.

- -
app.use(logger('dev'));
-app.use(express.json());
-app.use(express.urlencoded({ extended: false }));
-app.use(cookieParser());
-app.use(express.static(path.join(__dirname, 'public')));
-
- -

Now that all the other middleware is set up, we add our (previously imported) route-handling code to the request handling chain. The imported code will define particular routes for the different parts of the site:

- -
app.use('/', indexRouter);
-app.use('/users', usersRouter);
-
- -
-

Note: The paths specified above ('/' and '/users') are treated as a prefix to routes defined in the imported files. So for example, if the imported users module defines a route for /profile, you would access that route at /users/profile. We'll talk more about routes in a later article.

-
- -

The last middleware in the file adds handler methods for errors and HTTP 404 responses.

- -
// catch 404 and forward to error handler
-app.use(function(req, res, next) {
-  next(createError(404));
-});
-
-// error handler
-app.use(function(err, req, res, next) {
-  // set locals, only providing error in development
-  res.locals.message = err.message;
-  res.locals.error = req.app.get('env') === 'development' ? err : {};
-
-  // render the error page
-  res.status(err.status || 500);
-  res.render('error');
-});
-
- -

The Express application object (app) is now fully configured. The last step is to add it to the module exports (this is what allows it to be imported by /bin/www).

- -
module.exports = app;
- -

Routes

- -

The route file /routes/users.js is shown below (route files share a similar structure, so we don't need to also show index.js). First, it loads the express module and uses it to get an express.Router object. Then it specifies a route on that object and lastly exports the router from the module (this is what allows the file to be imported into app.js).

- -
var express = require('express');
-var router = express.Router();
-
-/* GET users listing. */
-router.get('/', function(req, res, next) {
-  res.send('respond with a resource');
-});
-
-module.exports = router;
-
- -

The route defines a callback that will be invoked whenever an HTTP GET request with the correct pattern is detected. The matching pattern is the route specified when the module is imported ('/users') plus whatever is defined in this file ('/'). In other words, this route will be used when an URL of /users/ is received.

- -
-

Tip: Try this out by running the server with node and visiting the URL in your browser: http://localhost:3000/users/. You should see a message: 'respond with a resource'.

-
- -

One thing of interest above is that the callback function has the third argument 'next', and is hence a middleware function rather than a simple route callback. While the code doesn't currently use the next argument, it may be useful in the future if you want to add multiple route handlers to the '/' route path.

- -

Views (templates)

- -

The views (templates) are stored in the /views directory (as specified in app.js) and are given the file extension .pug. The method Response.render() is used to render a specified template along with the values of named variables passed in an object, and then send the result as a response. In the code below from /routes/index.js you can see how that route renders a response using the template "index" passing the template variable "title".

- -
/* GET home page. */
-router.get('/', function(req, res, next) {
-  res.render('index', { title: 'Express' });
-});
-
- -

The corresponding template for the above route is given below (index.pug). We'll talk more about the syntax later. All you need to know for now is that the title variable (with value 'Express') is inserted where specified in the template.

- -
extends layout
-
-block content
-  h1= title
-  p Welcome to #{title}
-
- -

Challenge yourself

- -

Create a new route in /routes/users.js that will display the text "You're so cool" at URL /users/cool/. Test it by running the server and visiting http://localhost:3000/users/cool/ in your browser

- - - -

Summary

- -

You have now created a skeleton website project for the Local Library and verified that it runs using node. Most importantly, you also understand how the project is structured, so you have a good idea where we need to make changes to add routes and views for our local library.

- -

Next, we'll start modifying the skeleton so that it works as a library website.

- -

See also

- - - -

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}

- -

In this module

- - diff --git a/files/ko/learn/server-side/node_server_without_framework/index.html b/files/ko/learn/server-side/node_server_without_framework/index.html new file mode 100644 index 0000000000..1050f6aafd --- /dev/null +++ b/files/ko/learn/server-side/node_server_without_framework/index.html @@ -0,0 +1,74 @@ +--- +title: Node server without framework +slug: Node_server_without_framework +translation_of: Learn/Server-side/Node_server_without_framework +--- +

소개

+ +

물론 Node 는 서버를 만들고 실행하는데 도움을 주는 많은 프레임워크가 있습니다, 예를 들면:

+ + + +

하지만, 모든 것에 꼭 맞는 사이즈가 없듯이, 개발자들은 어떤 다른 의존성 없이 스스로 서버를 만들어야 할 때가 있습니다.

+ +

예제

+ +

다음은 짧고 간단한 정적 파일 nodejs 서버입니다.

+ +
var http = require('http');
+var fs = require('fs');
+var path = require('path');
+
+http.createServer(function (request, response) {
+    console.log('request ', request.url);
+
+    var filePath = '.' + request.url;
+    if (filePath == './')
+        filePath = './index.html';
+
+    var extname = String(path.extname(filePath)).toLowerCase();
+    var contentType = 'text/html';
+    var mimeTypes = {
+        '.html': 'text/html',
+        '.js': 'text/javascript',
+        '.css': 'text/css',
+        '.json': 'application/json',
+        '.png': 'image/png',
+        '.jpg': 'image/jpg',
+        '.gif': 'image/gif',
+        '.wav': 'audio/wav',
+        '.mp4': 'video/mp4',
+        '.woff': 'application/font-woff',
+        '.ttf': 'application/font-ttf',
+        '.eot': 'application/vnd.ms-fontobject',
+        '.otf': 'application/font-otf',
+        '.svg': 'application/image/svg+xml'
+    };
+
+    contentType = mimeTypes[extname] || 'application/octet-stream';
+
+    fs.readFile(filePath, function(error, content) {
+        if (error) {
+            if(error.code == 'ENOENT'){
+                fs.readFile('./404.html', function(error, content) {
+                    response.writeHead(200, { 'Content-Type': contentType });
+                    response.end(content, 'utf-8');
+                });
+            }
+            else {
+                response.writeHead(500);
+                response.end('Sorry, check with the site admin for error: '+error.code+' ..\n');
+                response.end();
+            }
+        }
+        else {
+            response.writeHead(200, { 'Content-Type': contentType });
+            response.end(content, 'utf-8');
+        }
+    });
+
+}).listen(8125);
+console.log('Server running at http://127.0.0.1:8125/');
diff --git a/files/ko/learn/skills/index.html b/files/ko/learn/skills/index.html deleted file mode 100644 index 582bd0d275..0000000000 --- a/files/ko/learn/skills/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: 스킬 -slug: Learn/Skills -tags: - - Index -translation_of: Learn -translation_of_original: Learn/Skills ---- -

여러분은 웹에 대하여 학습할 때 수 많은 스킬들을 선택해야 합니다. WebMaker는 초심자들이 기초를 학습하는 로드맵인 Web Literacy Map이라는 기본 스킬들의 목록을 정의합니다.  여기 MDN에서는 웹사이트를 제작하는데 필요한 역량에 초점을 맞추고, 모든 스킬 레벨에 대한 학습을 제공합니다:

- -
-
Web Mechanics
-
웹 생태계를 이해한다
-
Infrastructure
-
웹의 기술적 스택을 이해한다
-
Coding/Scripting
-
상호적인 웹 경험(Web experience)를 만든다.
-
Design and Accessibility
-
웹 리소스를 이용하여 모두와 효과적으로 의사소통한다
-
Composing for the web
-
웹 콘텐츠를 만들고 관장한다
-
diff --git "a/files/ko/learn/web_\352\270\260\354\210\240/index.html" "b/files/ko/learn/web_\352\270\260\354\210\240/index.html" deleted file mode 100644 index 1f04d35fe1..0000000000 --- "a/files/ko/learn/web_\352\270\260\354\210\240/index.html" +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Web 기술 -slug: Learn/Web_기술 -tags: - - Beginner - - WebMechanics -translation_of: Learn/Common_questions -translation_of_original: Learn/Web_Mechanics ---- -

이것은 여러분이 웹 생태계를 이해할 수 있도록 충분히 설명해줍니다. 저희는 여러분이 필요한 정보를 작고, 세분화된 기술로 나누었습니다.

- -

{{NoteStart}}Web 기술 은 웹 생태계의 기술적인 측명이 아니라, Infrastructure 범위의 기능에 집중합니다.{{NoteEnd}}

- -

기본 스킬

- -

만약 웹이 익숙하지 않다면 여기서 시작하세요. 웹 용어의 이해를 돕기 위한 우리의 glossary 에 의지하는것도 제안합니다.

- -

중급 스킬

- -

일단 웹이 익숙해지셨다면, 여러분이 탐구할 몇 가지 세부적인 것이 여기 있습니다:

- -

고급 스킬

- -

만약 웹 제작을 경험해보셨다면, 여러분은 몇 가지 특수하거나 일반적이지 않은 기술들에 흥미를 가지실 것입니다.

diff --git "a/files/ko/learn/\354\240\221\352\267\274\354\204\261/html/index.html" "b/files/ko/learn/\354\240\221\352\267\274\354\204\261/html/index.html" deleted file mode 100644 index dae842fc92..0000000000 --- "a/files/ko/learn/\354\240\221\352\267\274\354\204\261/html/index.html" +++ /dev/null @@ -1,537 +0,0 @@ ---- -title: 'HTML: 접근성을 위한 기초' -slug: Learn/접근성/HTML -tags: - - HTML - - HTML 접근성 - - 스크린리더 - - 시멘틱 - - 시멘틱 웹 - - 시멘틱웹 - - 웹 접근성 - - 접근성 향상 -translation_of: Learn/Accessibility/HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}
- -

HTML 요소가 늘 올바른 목적을 가지고 쓰이는지 확인하는 것만으로도, 수많은 웹 콘텐츠는 접근성이 향상됩니다. 이 문서에는 접근성을 최대한으로 보장하기 위해 HTML을 어떻게 사용해야 하는지 자세히 설명합니다.

- - - - - - - - - - - - -
Prerequisites:Basic computer literacy, a basic understanding of HTML (see Introduction to HTML), and understanding of what accessibility is.
Objective:To gain familiarity with what features of HTML have accessibility benefits, and how to use them appropriately in your web documents.
- -

HTML과 접근성

- -

 

- -

HTML에 대해 더 많은 자료와 예제를 접하고, 더 많이 배우면 배울수록 당신은 의미론적 HTML(시멘틱 HTML, POSH 또는 Plain Old Semantic HTML라고 부르기도 합니다)을 사용하는 것이 중요하다는 공통 주제를 계속해서 접하게 될 것입니다. 이것은 가능한 올바른 목적으로 올바른 HTML 요소를 사용하는 것을 의미합니다.

- -

당신은 아마 이것이 왜 중요한지 의문을 가질 수 있을 것입니다. 당신은 CSS와 JavaScript 조합을 사용해 원하는 방식으로 HTML 요소들을 동작시킬 수 있기 때문입니다. 예를 들어 사이트에서 동영상을 제어하기 위한 버튼을 당신은 이렇게 마크업 할 수 있습니다.

- -
<div>Play video</div>
- -

그러나 당신이 나중에 더 자세하게 배울수록, 작업에 올바른 HTML 요소를 사용하는 것이 많은 의미를 내포하고 있음을 깨닫게 될 것입니다.

- -
<button>Play video</button>
- -

Not only do HTML <button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — they can be tabbed between, and activated using Return/Enter.

- -

Semantic HTML doesn't take longer to write than non-semantic (bad) markup if you do it consistently from the start of your project, and it also has other benefits beyond accessibility:

- -
    -
  1. Easier to develop with — as mentioned above, you get some functionality for free, plus it is arguably easier to understand.
    2. -
  2. Better on mobile — semantic HTML is arguably lighter in file size than non-semantic spaghetti code, and easier to make responsive.
    3. -
  3. Good for SEO — search engines give more importance to keywords inside headings, links, etc., than keywords included in non-semantic <div>s, etc., so your documents will be more findable by customers.
    4. -
- -

Let's get on and look at accessible HTML in more detail.

- -
-

Note: It is a good idea to have a screenreader set up on your local computer, so you can do some testing of the examples shown below. See our Screenreaders guide for more details.

-
- -

Good semantics

- -

We've already talked about the importance of good semantics, and why we should use the right HTML element for the right job. This cannot be ignored, as it is one of the main places that accessibility is badly broken if not handled properly.

- -

Out there on the web, the truth is that people do some very strange things with HTML markup. Some abuses of HTML are due to legacy practices that have not been completely forgotten, and some are just plain ignorance. Whatever the case, you should replace such bad code wherever you see it, whenever you can.

- -

Sometimes you are not always in the position to get rid of bad markup — your pages might be generated by some kind of server-side framework that you don't have full control over, or you might have third party content on your page (such as ad banners) that you don't have control over.

- -

The goal isn't "all or nothing", however — every improvement you are able to make will help the cause of accessibility.

- -

Text content

- -

One of the best accessibility aids a screenreader user can have is a good content structure of headings, paragraphs, lists, etc. A good semantic example might look something like the following:

- -
<h1>My heading</h1>
-
-<p>This is the first section of my document.</p>
-
-<p>I'll add another paragraph here too.</p>
-
-<ol>
-  <li>Here is</li>
-  <li>a list for</li>
-  <li>you to read</li>
-</ol>
-
-<h2>My subheading</h2>
-
-<p>This is the first subsection of my document. I'd love people to be able to find this content!</p>
-
-<h2>My 2nd subheading</h2>
-
-<p>This is the second subsection of my content. I think is more interesting than the last one.</p>
- -

We've prepared a version with longer text for you to try out with a screenreader (see good-semantics.html). If you try navigating through this, you'll see that this is pretty easy to navigate:

- -
    -
  1. The screenreader reads each header out as you progress through the content, notifying you what is a heading, what is a paragraph, etc.
    2. -
  2. It stops after each element, letting you go at whatever pace is comfortable for you.
    3. -
  3. You can jump to next/previous heading in many screenreaders.
    4. -
  4. You can also bring up a list of all headings in many screenreaders, allowing you to use them like a handy table of contents to find specific content.
    5. -
- -

People sometimes write headings, paragraphs, etc. using presentational HTML and line breaks, something like the following:

- -
<font size="7">My heading</font>
-<br><br>
-This is the first section of my document.
-<br><br>
-I'll add another paragraph here too.
-<br><br>
-1. Here is
-<br><br>
-2. a list for
-<br><br>
-3. you to read
-<br><br>
-<font size="5">My subheading</font>
-<br><br>
-This is the first subsection of my document. I'd love people to be able to find this content!
-<br><br>
-<font size="5">My 2nd subheading</font>
-<br><br>
-This is the second subsection of my content. I think is more interesting than the last one.
- -

If you try our longer version out with a screenreader (see bad-semantics.html), you'll not have a very good experience — the screenreader hasn't got anything to use as signposts, so you can't retrieve a useful table of contents, and the whole page is seen as a single giant block, so it is just read out in one go, all at once.

- -

There are other issues too beyond accessibility — it is harder to style the content using CSS, or manipulate it with JavaScript for example, because there are no elements to use as selectors.

- -

Using clear language

- -

The language you use can also affect accessibility. In general you should use clear language that is not overly complex, and doesn't use unnecessary jargon or slang terms. This not only benefits people with cognitive or other disabilities; it benefits readers for whom the text is not written in their first language, younger people ... everyone in fact! Apart from this, you should try to avoid using language and characters that don't get read out clearly by the screenreader. For example:

- - - -

Page layouts

- -

In the bad old days, people used to create page layouts using HTML tables — using different table cells to contain the header, footer, side bar, main content column, etc. This is not a good idea because a screenreader will likely give out confusing readouts, especially if the layout is complex and has many nested tables.

- -

Try our example table-layout.html example, which looks something like this:

- -
<table width="1200">
-      <!-- main heading row -->
-      <tr id="heading">
-        <td colspan="6">
-
-          <h1 align="center">Header</h1>
-
-        </td>
-      </tr>
-      <!-- nav menu row  -->
-      <tr id="nav" bgcolor="#ffffff">
-        <td width="200">
-          <a href="#" align="center">Home</a>
-        </td>
-        <td width="200">
-          <a href="#" align="center">Our team</a>
-        </td>
-        <td width="200">
-          <a href="#" align="center">Projects</a>
-        </td>
-        <td width="200">
-          <a href="#" align="center">Contact</a>
-        </td>
-        <td width="300">
-          <form width="300">
-            <input type="search" name="q" placeholder="Search query" width="300">
-          </form>
-        </td>
-        <td width="100">
-          <button width="100">Go!</button>
-        </td>
-      </tr>
-      <!-- spacer row -->
-      <tr id="spacer" height="10">
-        <td>
-
-        </td>
-      </tr>
-      <!-- main content and aside row -->
-      <tr id="main">
-        <td id="content" colspan="4" bgcolor="#ffffff">
-
-          <!-- main content goes here -->
-        </td>
-        <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top">
-          <h2>Related</h2>
-
-          <!-- aside content goes here -->
-
-        </td>
-      </tr>
-      <!-- spacer row -->
-      <tr id="spacer" height="10">
-        <td>
-
-        </td>
-      </tr>
-      <!-- footer row -->
-      <tr id="footer" bgcolor="#ffffff">
-        <td colspan="6">
-          <p>©Copyright 2050 by nobody. All rights reversed.</p>
-        </td>
-      </tr>
-    </table>
- -

If you try to navigate this using a screenreader, it will probably tell you that there's a table to be looked at (although some screenreaders can guess the difference between table layouts and data tables). You'll then likely (depending on which screenreader you're using) have to go down into the table as an object and look at its features separately, then get out of the table again to carry on navigating the content.

- -

Table layouts are a relic of the past — they made sense back when CSS support was not widespread in browsers, but they create confusion for screenreader users, as well as being bad for many other reasons (abuse of tables, arguably requires more markup, make designs more inflexible). Don't do it!

- -

You can verify these claims by comparing your previous experience with a more modern website structure example, which could look something like this:

- -
<header>
-  <h1>Header</h1>
-</header>
-
-<nav>
-  <!-- main navigation in here -->
-</nav>
-
-<!-- Here is our page's main content -->
-<main>
-
-  <!-- It contains an article -->
-  <article>
-    <h2>Article heading</h2>
-
-    <!-- article content in here -->
-  </article>
-
-  <aside>
-    <h2>Related</h2>
-
-    <!-- aside content in here -->
-  </aside>
-
-</main>
-
-<!-- And here is our main footer that is used across all the pages of our website -->
-
-<footer>
-  <!-- footer content in here -->
-</footer>
- -

If you try our more modern structure example with a screenreader, you'll see that the layout markup no longer gets in the way and confuses the content readout. It is also much leaner and smaller in terms of code size, which means easier to maintain code, and less bandwidth for the user to download (particularly prevalent for those on slow connections).

- -

Another consideration when creating layouts is using HTML5 semantic elements as seen in the above example (see content sectioning) — you can create a layout using only nested {{htmlelement("div")}} elements, but it is better to use appropriate sectioning elements to wrap your main navigation ({{htmlelement("nav")}}), footer ({{htmlelement("footer")}}), repeating content units ({{htmlelement("article")}}), etc. These provide extra semantics for screenreaders (and other tools) to give user extra clues about the content they are navigating (see Screen Reader Support for new HTML5 Section Elements for an idea of what screen reader support is like).

- -
-

Note: As well as your content having good semantics and an attractive layout, it should make logical sense in its source order — you can always place it where you want using CSS later on, but you should get the source order right to start with, so what screenreader users get read out to them will make sense.

-
- -

UI controls

- -

By UI controls, we mean the main parts of web documents that users interact with — most commonly buttons, links, and form controls. In this section we'll look at the basic accessibility concerns to be aware of when creating such controls. Later articles on WAI-ARIA and multimedia will look at other aspects of UI accessibility.

- -

One key aspect to the accessibility of UI controls is that by default, browsers allow them to be manipulated by the keyboard. You can try this out using our native-keyboard-accessibility.html example (see the source code) — open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements; the focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused.

- -

- -

You can then press Enter/Return to follow a focused link or press a button (we've included some JavaScript to make the buttons alert a message), or start typing to enter text in a text input (other form elements have different controls, for example the {{htmlelement("select")}} element can have its options displayed and cycled between using the up and down arrow keys).

- -
-

Note: Different browsers may have different keyboard control options available. See Using native keyboard accessibility for more details.

-
- -

You essentially get this behavior for free, just by using the appropriate elements, e.g.

- -
<h1>Links</h1>
-
-<p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p>
-
-<p>Another link, to the <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
-
-<h2>Buttons</h2>
-
-<p>
-  <button data-message="This is from the first button">Click me!</button>
-  <button data-message="This is from the second button">Click me too!</button>
-  <button data-message="This is from the third button">And me!</button>
-</p>
-
-<h2>Form</h2>
-
-<form>
-  <div>
-    <label for="name">Fill in your name:</label>
-    <input type="text" id="name" name="name">
-  </div>
-  <div>
-    <label for="age">Enter your age:</label>
-    <input type="text" id="age" name="age">
-  </div>
-  <div>
-    <label for="mood">Choose your mood:</label>
-    <select id="mood" name="mood">
-      <option>Happy</option>
-      <option>Sad</option>
-      <option>Angry</option>
-      <option>Worried</option>
-    </select>
-  </div>
-</form>
- -

This means using links, buttons, form elements, and labels appropriately (including the {{htmlelement("label")}} element for form controls).

- -

However, it is again the case that people sometimes do strange things with HTML. For example, you sometimes see buttons marked up using {{htmlelement("div")}}s, for example:

- -
<div data-message="This is from the first button">Click me!</div>
-<div data-message="This is from the second button">Click me too!</div>
-<div data-message="This is from the third button">And me!</div>
- -

But using such code is not advised — you immediately lose the native keyboard accessibility you would have had if you'd just used {{htmlelement("button")}} elements, plus you don't get any of the default CSS styling that buttons get.

- -

Building keyboard accessibility back in

- -

Adding such advantages back in takes a bit of work (you can an example code in our fake-div-buttons.html example — also see the source code). Here we've given our fake <div> buttons the ability to be focused (including via tab) by giving each one the attribute tabindex="0":

- -
<div data-message="This is from the first button" tabindex="0">Click me!</div>
-<div data-message="This is from the second button" tabindex="0">Click me too!</div>
-<div data-message="This is from the third button" tabindex="0">And me!</div>
- -

Basically, the {{htmlattrxref("tabindex")}} attribute is primarily intended to allow tabbable elements to have a custom tab order (specified in positive numerical order), instead of just being tabbed through in their default source order. This is nearly always a bad idea, as it can cause major confusion. Use it only if you really need to, for example if the layout shows things in a very different visual order to the source code, and you want to make things work more logically. There are two other options for tabindex:

- - - -

Whilst the above addition allows us to tab to the buttons, it does not allow us to activate them via the Enter/Return key. To do that, we had to add the following bit of JavaScript trickery:

- -
document.onkeydown = function(e) {
-  if(e.keyCode === 13) { // The Enter/Return key
-    document.activeElement.click();
-  }
-};
- -

Here we add a listener to the document object to detect when a button has been pressed on the keyboard. We check what button was pressed via the event object's keyCode property; if it is the keycode that matches Return/Enter, we run the function stored in the button's onclick handler using document.activeElement.click(). activeElement gives us the element that is currently focused on the page.

- -

This is a lot of extra hassle to build the functionality back in. And there's bound to be other problems with it. Better to just use the right element for the right job in the first place.

- -

Meaningful text labels

- -

UI control text labels are very useful to all users, but getting them right is particularly important to users with disabilities.

- -

You should make sure that your button and link text labels are understandable and distinctive. Don't just use "Click here" for your labels, as screenreader users sometimes get up a list of buttons and form controls. The following screenshot shows our controls being listed by VoiceOver on Mac.

- -

- -

Make sure your labels make sense out of context, read on their own, as well as in the context of the paragraph they are in. For example, the following shows an example of good link text:

- -
<p>Whales are really awesome creatures. <a href="whales.html">Find out more about whales</a>.</p>
- -

but this is bad link text:

- -
<p>Whales are really awesome creatures. To find more out about whales, <a href="whales.html">click here</a>.</p>
- -
-

Note: You can find a lot more about link implementation and best practices in our Creating hyperlinks article. You can also see some good and bad examples at good-links.html and bad-links.html.

-
- -

Form labels are also important, for giving you a clue what you need to enter into each form input. The following seems like a reasonable enough example:

- -
Fill in your name: <input type="text" id="name" name="name">
- -

However, this is not so useful for disabled users. There is nothing in the above example to associate the label unambiguously with the form input, and make it clear how to fill it in if you cannot see it. If you access this with some screenreaders, you may only be given a description along the lines of "edit text".

- -

The following is a much better example:

- -
<div>
-  <label for="name">Fill in your name:</label>
-  <input type="text" id="name" name="name">
-</div>
- -

With the code like this, the label will be clearly associated with the input; the description will be more like "Fill in your name: edit text".

- -

- -

As an added bonus, in most browsers associating a label with a form input means that you can click the label to select/activate the form element. This gives the input a bigger hit area, making it easier to select.

- -
-

Note: you can see some good and bad form examples in good-form.html and bad-form.html.

-
- -

Accessible data tables

- -

A basic data table can be written with very simple markup, for example:

- -
<table>
-  <tr>
-    <td>Name</td>
-    <td>Age</td>
-    <td>Gender</td>
-  </tr>
-  <tr>
-    <td>Gabriel</td>
-    <td>13</td>
-    <td>Male</td>
-  </tr>
-  <tr>
-    <td>Elva</td>
-    <td>8</td>
-    <td>Female</td>
-  </tr>
-  <tr>
-    <td>Freida</td>
-    <td>5</td>
-    <td>Female</td>
-  </tr>
-</table>
- -

But this has problems — there is no way for a screenreader user to associate rows or columns together as groupings of data. To do this you need to know what the header rows are, and if they are heading up rows, columns, etc. This can only be done visually for the above table (see bad-table.html and try the example out yourself).

- -

Now have a look at our punk bands table example — you can see a few accessibility aids at work here:

- - - -
-

Note: See our HTML table advanced features and accessibility article for some more details around accessible data tables.

-
- -

Text alternatives

- -

Whereas textual content is inherently accessible, the same cannot necessarily be said for multimedia content — image/video content cannot be seen by visually-impaired people, and audio content cannot be heard by hearing-impaired people. We'll cover video and audio content in detail in the Accessible multimedia article later on, but for this article we'll look accessibility for the humble {{htmlelement("img")}} element.

- -

We have a simple example written up, accessible-image.html, which features four copies of the same image:

- -
<img src="dinosaur.png">
-
-<img src="dinosaur.png"
-     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
-
-<img src="dinosaur.png"
-     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."
-     title="The Mozilla red dinosaur">
-
-
-<img src="dinosaur.png" aria-labelledby="dino-label">
-
-<p id="dino-label">The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p>
-
- -

The first image, when viewed by a screen reader, doesn't really offer the user much help — VoiceOver for example reads out "/dinosaur.png, image". It reads out the filename to try to provide some help. In this example the user will at least know it is a dinosaur of some kind, but often files may be uploaded with machine generated file names (e.g. from a digital camera) and these file names would likely provide no context to the image's content.

- -
-

Note: This is why you should never include text content inside an image — screen readers simply can't access it. There are other disadvantages too — you can't select it and copy/paste it. Just don't do it!

-
- -

When a screen reader encounters the second image, it reads out the full alt attribute — "A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.".

- -

This highlights the importance of not only using meaningful file names in case so-called alt text is not available, but also making sure that alt text is provided in alt attributes wherever possible. Note that the contents of the alt attribute should always provide a direct representation of the image and what it conveys visually. Any personal knowledge or extra description shouldn't be included here, as it is not useful for people who have not come across the image before.

- -

One thing to consider is whether your images have meaning inside your content, or whether they are purely for visual decoration, so have no meaning. If they are decorational, it is better to just include them in the page as CSS background images.

- -
-

Note: Read Images in HTML and Responsive images for a lot more information about image implementation and best practices.

-
- -

If you do want to provide extra contextual information, you should put it in the text surrounding the image, or inside a title attribute, as shown above. In this case, most screenreaders will read out the alt text, the title attribute, and the filename. In addition, browsers display title text as tooltips when moused over.

- -

- -

Let's have another quick look at the fourth method:

- -
<img src="dinosaur.png" aria-labelledby="dino-label">
-
-<p id="dino-label">The Mozilla red Tyrannosaurus ... </p>
- -

In this case, we are not using the alt attribute at all — instead, we have presented our description of the image as a regular text paragraph, given it an id, and then used the aria-labelledby attribute to refer to that id, which causes screenreaders to use that paragraph as the alt text/label for that image. This is especially useful if you want to use the same text as a label for multiple images — something that isn't possible with alt.

- -
-

Note: aria-labelledby is part of the WAI-ARIA spec, which allows developers to add in extra semantics to their markup to improve screenreader accessibility where needed. To find out more about how it works, read our WAI-ARIA Basics article.

-
- -

Other text alternative mechanisms

- -

Images also have another mechanisms available for providing descriptive text. For example, there is a longdesc attribute that is meant to point to a separate web document containing an extended description of the image, for example:

- -
<img src="dinosaur.png" longdesc="dino-info.html">
- -

This sounds like a good idea, especially for infographics like big charts with lots of information on that could perhaps be represented as an accessible data table instead (see previous section). However, longdesc is not supported consistently by screenreaders, and the content is completely inaccessible to non-screenreader users. It is arguably much better to include the long description on the same page as the image, or link to it with a regular link.

- -

HTML5 includes two new elements — {{htmlelement("figure")}} and {{htmlelement("figcaption")}} — which are supposed to associate a figure of some kind (it could be anything, not necessarily an image) with a figure caption:

- -
<figure>
-  <img src="dinosaur.png" alt="The Mozilla Tyrannosaurus">
-  <figcaption>A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</figcaption>
-</figure>
- -

Unfortunately, most screenreaders don't seem to associate figure captions with their figures yet, but the element structure is useful for CSS styling, plus it provides a way to place a description of the image next to it in the source.

- -

Empty alt attributes

- -
<h3>
-  <img src="article-icon.png" alt="">
-  Tyrannosaurus Rex: the king of the dinosaurs
-</h3>
- -

There may be times where an image is included in a page's design, but its primary purpose is for visual decoration. You'll notice in the code example above that the image's alt attribute is empty — this is to make screen readers recognize the image, but not attempt to describe the image (instead they'd just say "image", or similar).

- -

The reason to use an empty alt instead of not including it is because many screen readers announce the whole image URL if no alt is provided.  In the above example, the image is acting as a visual decoration to the heading its associated with. In cases like this, and in cases where an image is only decoration and has no content value, you should put an empty alt on your images. Another alternative is to use the aria role attribute role="presentation" — this also stops screens readers from reading out alternative text.

- -
-

Note: if possible you should use CSS to display images that are only decoration.

-
- -

Summary

- -

You should now be well-versed in writing accessible HTML for most occasions. Our WAI-ARIA basics article will also fill in some gaps in this knowledge, but this article has taken care of the basics. Next up we'll explore CSS and JavaScript, and how accessibility is affected by their good or bad use.

- -

{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}

- -

 

- -

In this module

- - - -

 

diff --git "a/files/ko/learn/\354\240\221\352\267\274\354\204\261/index.html" "b/files/ko/learn/\354\240\221\352\267\274\354\204\261/index.html" deleted file mode 100644 index 01c9c2e2bb..0000000000 --- "a/files/ko/learn/\354\240\221\352\267\274\354\204\261/index.html" +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: 접근성 -slug: Learn/접근성 -tags: - - ARIA - - CSS - - HTML - - JavaScript - - 랜딩 - - 모듈 - - 문서 - - 배우기 - - 비기너 - - 접근성 -translation_of: Learn/Accessibility ---- -
{{LearnSidebar}}
- -

웹 개발자가 되기위해서 HTML, CSS 및 JavaScript를 배우는 것이 필요하지만 배운 지식을 효과적으로 사용하기위해서는 지식이상의 기술이 필요로 합니다. 이 기술을 사용해서 웹사이트에 접근하려는 모든 사용자를 차별없이 접근할수 있도록 해야합니다.  이를 위하여 모범 사례(HTML, CSS 및 JavaScript 항목에서 설명) 를 준수하고 브라우저 호환성 테스트를 거치며 처음부터 접근성을 고려해야합니다. 이 문서에서는 후자에 대해 자세히 다룰 것입니다.

- -

선결조건

- -

이 문서를 최대한 활용하려면 최소한 HTML, CSS 및 JavaScript 항목 중 처음 두 문서를 통해 작업하거나 또는 접근성 문서와 관련된 기술을 통해 개선해 나가는것이 좋습니다. 

- -
-

Note: 참고 : 당신은 당신이 당신의 자신의 파일을 생성 할 수있는 기능이없는 컴퓨터 / 태블릿 / 다른 장치에서 작업하는 경우, 당신은  JSBin 또는 Thimble 같은 온라인 코딩 프로그램에서 코드 예제의 대부분을 테스트 할수 있습니다.

-
- -

가이드

- -
-
접근성이란?
-
이 문서에서는 접근성이 실제로 무엇인지 자세히 살펴보는 것으로 모듈을 시작합니다. 여기에는 고려해야 할 사람의 그룹, 웹과 상호 작용하는 데 사용하는 서로 다른 도구 및 접근성 워크 플로우를 개발하는 방법이 포함됩니다.
-
HTML: 접근성을 위한 좋은기초
-
항상 올바른 HTML요소를 올바른 용도로 사용하는 것만으로 수많은 웹 콘텐츠에 접근 할 수 있습니다. 이 문서는 접근성을 극대화하기 위해 HTML을 사용하는 방법을 자세히 살펴봅니다.
-
CSS 와 JavaScript의 접근성 모범 사례
-
또한, CSS 와 JavaScript를 적절히 사용하면 접근성 높은 웹 경험을 줄수도 있지만 , 만약 잘못 사용될 경우 접근성을 크게 해칠 수 있다. 이 문서에서는 복잡한 컨텐츠도 가능한 액세스 할 수 있도록 하기 위해 고려해야 할 몇가지 CSS 및 JavaScript모범 사례를 간략히 설명합니다.
-
WAI-ARIA 기초
-
이전 문서에 이어, 시맨틱하지 못한 HTML과 동적 자바 스크립트로 업데이트되는  컨텐츠를 포함하는 복잡한 UI를 제어 하는 것은 어려울 수 있습니다. WAI-ARIA는 브라우저와 보조 기술이 사용자에게 상황을 알려 주는 데 사용할 수 있는 시맨틱한 요소를 추가하여 이러한 문제를 해결하는 기술이다. 여기서는 접근성을 향상시키기 위해 기본적인 수준에서 이 기능을 사용하는 방법을 보여 줍니다.
-
멀티미디어 접근성
-
접근성 문제를 야기할 수 있는 또 다른 범주의 콘텐츠 즉 멀티 미디어 . 비디오, 오디오 및 이미지 콘텐츠에 적절한 대체텍스트를 제공해서 보조 기술과 사용자가 이해할 수 있도록 해야 한다. 이 글은 그 방법을 보여 준다.
-
모바일 접근성
-
모바일 기기를 이용한 웹 접근이 매우 널리 사용되고 있고 iOS및 Android와 같은 유명한 플랫폼에서 액세스가 가능한 툴을 사용하는 경우, 이러한 플랫폼에서 웹 콘텐츠를 접근 할 수 있는지를 고려해야 합니다. 이 자료에서는 모바일 접근성 고려 사항에 대해 살펴봅니다.
-
- -

평가

- -
-
접근성 문제 해결 
-
평가에서는 진단 및 해결해야 하는 다양한 접근성 문제가 포함된 간단한 사이트를 제공합니다.
-
- -

참고 항목

- - diff --git "a/files/ko/learn/\354\240\221\352\267\274\354\204\261/what_is_accessibility/index.html" "b/files/ko/learn/\354\240\221\352\267\274\354\204\261/what_is_accessibility/index.html" deleted file mode 100644 index 67f4b6d302..0000000000 --- "a/files/ko/learn/\354\240\221\352\267\274\354\204\261/what_is_accessibility/index.html" +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: What is accessibility? -slug: Learn/접근성/What_is_accessibility -translation_of: Learn/Accessibility/What_is_accessibility ---- -

{{LearnSidebar}}

- -

{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}

- -

이 글에서는 접근성이 실제로 무엇인지 자세히 살펴보기로 합니다. 이 글에는 웹에서 고려해야 할 사람의 그룹, 웹과 상호 작용하는 데 사용하는 서로 다른 도구 및 접근성 개발 워크 플로우를 포함됩니다.

- - - - - - - - - - - - -
선행지식:기본적인 컴퓨터 사용 능력, HTML과 CSS에 대한 기본적인 이해.
목표:접근성과 친해지기. 웹 개발자로서 접근성에어떻게 영향을 미치는지 알아보기
- -

그렇다면 접근성이란 무엇일까요?

- -

접근성은 가능한 한 많은 사람이 웹 사이트를 사용할 수 있도록 하는 방법으로, 통상적으로 장애인만을 대상으로 한다고 생각하지만 실제로는 모바일 장치를 사용하는 사람이나 느린 네트워크 연결을 사용하는 사람들도 포함하고 있습니다.

- -

접근성을 모든 사람을 동일하게 대하고, 그들의 능력이나 상황에 상관 없이 그들에게 같은 기회를 주는 것으로 생각할 수도 있습니다. 휠체어에 있기 때문에 누군가를 물리적 건물에서 제외시키는 것이 옳지 않은 것과 같은 방식으로(공공 건물에는 일반적으로 휠체어 경사로나 엘리베이터가 있기 때문에), 휴대 전화를 사용하지 않는 사람을 웹 사이트에서 제외시키는 것도 옳지 않다. 우리는 모두 다르지만, 모두 인간이기 때문에, 동일한 권리를 갖고 있다.

- -

접근성은 당연히 지켜져야 할 일이지만 일부 국가에서는 법의 일부이기도 하며,  서비스 사용이나 제품 구매가 불가능했던 사람들을 불러모아 중요한 소비자들로 만들수도 있습니다.

- -

접근성 및 이에 따른 모범 사례는 다음과 같은 모든 사람에게 도움이 될 수 있습니다.

- - - -

어떤 종류의 장애를 본 적이 있습니까?

- -

장애가 있는 사람들도 장애가 없는 사람들만큼이나 다양하고, 그만큰 그들의 장애유형도 다양합니다. 여기서 중요한 교훈은 자신이 컴퓨터와 웹을 어떻게 사용하는 지에 대해 생각하고 다른 사람들이 웹을 어떻게 사용하는 지에 대해 배우는 것이다.

- -

장애의 주요 유형은 웹 콘텐츠에 액세스 하는 데 사용하는 전문 도구와 함께 아래에 설명되어 있습니다.(흔히 보조공학기기또는 보조기술 이라고 알려진).

- -
-

Note: 세계 보건 기구(WHO)의 장애 및 보건 현황 보고서에 따르면 전 세계 인구의 약 15%에 해당하는 십억명 이상의 사람들이 장애를 갖고 있으며 1억 1천만명에서 1억 9천만명의 성인들이 심각한 장애를 갖고 있다.

- -

 

-
- -

시각장애인

- -

여기에는 전맹, 저시력 장애인 색각장애인등이 포함되며 이런 많은 사람들이 화면확대경(물리적 확대경 또는 소프트웨어 줌 기능 - 대부분의 브라우저와 운영 체제에는 최근 확대 / 축소 기능이 있음)과 디지털 글자를 큰소리로 읽어주는 소프트웨어인 화면낭독기를 사용한다.

- - - -

 

- -

스크린 리더들과 친숙해 지는 것은 좋은 생각이다; 당신은 또한 스크린 리더를 설치하고 그것을 가지고 노는 것이 어떻게 작동하는 지에 대한 아이디어를 얻기 위해서 필요하다. 사용에 대한 자세한 내용은 크로스 브라우저 테스트 화면 판독기 가이드( cross browser testing screen readers guide)를 참조하십시오. 아래의 비디오는 또한 경험이 어떠한지에 대한 간단한 예를 제공한다.

- -

{{EmbedYouTube("IK97XMibEws")}}

- -

 

- -

In terms of statistics, the World Health Organization estimates that "285 million people are estimated to be visually impaired worldwide: 39 million are blind and 246 have low vision." (see Visual impairment and blindness). That's a large and significant population of users to just miss out on because your site isn't coded properly — almost the same size as the population of the United States of America.

- -

People with hearing impairments

- -

Otherwise known as people with auditory impairments, or deaf people, this group of people have either low hearing levels or no hearing at all. Hearing-impaired people do use ATs (see Assistive Devices for People with Hearing, Voice, Speech, or Language Disorders), but there are not really special ATs specific for computer/web use.

- -

There are, however, specific techniques to bear in mind for providing text alternatives to audio content that they can read, from simple text transcripts, to text tracks (i.e. captions) that can be displayed along with video. An article later on will discuss these.

- -

Hearing-impaired people also represent a significant userbase — "360 million people worldwide have disabling hearing loss", says the World Health Organization's Deafness and hearing loss fact sheet.

- -

People with mobility impairments

- -

These people have disabilities concerning movement, which might involve purely physical issues (such as loss of limb or paralysis), or neurological/genetic disorders that lead to weakness or loss of control in limbs. Some people might have difficulty making the exact hand movements required to use a mouse, while others might be more severely affected, perhaps being significantly paralysed to the point where they need to use a head pointer to interact with computers.

- -

This kind of disability can also be a result of old age, rather than any specific trauma or condition, and it could also result from hardware limitations — some users might not have a mouse.

- -

The way this usually affects web development work is the requirement that controls be accessible by the keyboard — we'll discuss keyboard accessibility in later articles in the module, but it is a good idea to try out some websites using just the keyboard to see how you get on. Can you use the tab key to move between the different controls of a web form, for example? You can find more details about keyboard controls in our Cross browser testing Using native keyboard accessibility section.

- -

In terms of statistics, a significant number of people have mobility impairments. The U.S. Centers for Disease Control and Prevention Disability and Functioning (Noninstitutionalized Adults 18 Years and Over) reports the USA "Percent of adults with any physical functioning difficulty: 15.1%".

- -

People with cognitive impairments

- -

Probably the widest range of disabilities can be seen in this last category — cognitive impairment can broadly refer to disabilities from mental illnesses to learning difficulties, difficulties in comprehension and concentration like ADHD (attention deficit hyperactivity disorder), to people on the autistic spectrum, to people with schizophrenia, and many other types of disorder besides. Such disabilities can affect many parts of everyday life, due to problems with memory, problem solving, comprehension, attention, etc.

- -

The most common ways that such disabilities might affect website usage is difficulty in understanding how to complete a task, remembering how to do something that was previously accomplished, or increased frustration at confusing workflows or inconsistent layouts/navigation/other page features.

- -

Unlike other web accessibility issues, it is impossible to prescribe quick fixes to many web accessibility issues arising from cognitive disabilities; the best chance you've got is to design your websites to be as logical, consistent, and usable as possible, so for example making sure that:

- - - -

These are not "accessibility techniques" as such — they are good design practices. They will benefit everyone using your sites and should be a standard part of your work.

- -

In terms of statistics, again the numbers are significant. Cornell University's 2014 Disability Status Report (PDF, 511KB) indicates that in 2014, 4.5% of people in the USA aged 21–64 had some form of cognitive disability.

- -
-

Note: WebAIM's Cognitive page provides a useful expansion of these ideas, and is certainly worth reading.

-
- -

Implementing accessibility into your project

- -

A common accessibility myth is that accessibility is an expensive "added extra" to implement on a project. This myth actually can be true if either:

- - - -

If however you consider accessibility from the start of a project, the cost of making most content accessible should be fairly minimal.

- -

When planning your project, factor accessibility testing into your testing regime, just like testing for any other important target audience segment (e.g. target desktop or mobile browsers). Test early and often, ideally running automated tests to pick up on programmatically detectable missing features (such as missing image alternative text or bad link text — see Element relationships and context), and doing some testing with disabled user groups to see how well more complex site features work for them. For example:

- - - -

You can and should keep a note of potential problem areas in your content that will need work to make it accessible, make sure it is tested thoroughly, and think about solutions/alternatives. Text content (as you'll see in the next article) is easy, but what about your multimedia content, and your whizzy 3D graphics? You should look at your project budget and realistically think about what solutions you have available to make such content accessible? You could pay to have all your multimedia content transcribed, which can be expensive, but can be done.

- -

Also, be realistic. "100% accessibility" is an unobtainable ideal — you will always come across some kind of edge case that results in a certain user finding certain content difficult to use — but you should do as much as you can. If you are planning to include a whizzy 3D pie chart graphic made using WebGL, you might want to include a data table as an accessible alternative representation of the data. Or, you might want to just include the table and get rid of the 3D pie chart — the table is accessible by everyone, quicker to code, less CPU-intensive, and easier to maintain.

- -

On the other hand, if you are working on a gallery website showing interesting 3D art, it would be unreasonable to expect every piece of art to be perfectly accessible to visually impaired people, given that it is an entirely visual medium.

- -

To show that you care and have thought about accessibility, publish an accessibility statement on your site that details what your policy is toward accessibility, and what steps you have taken toward making the site accessible. If someone does complain that your site has an accessibility problem, start a dialog with them, be empathic, and take reasonable steps to try to fix the problem.

- -
-

Note: Our Handling common accessibility problems article covers accessibility specifics that should be tested in more detail.

-
- -

To summarize:

- - - -

Accessibility guidelines and the law

- -

There are numerous checklists and sets of guidelines available for basing accessibility tests on, which might seem overwhelming at first glance. Our advice is to familiarize yourself with the basic areas in which you need to take care, as well as understanding the high level structures of the guidelines that are most relevant to you.

- - - -

So while the WCAG is a set of guidelines, your country will probably have laws governing web accessibility, or at least the accessibility of services available to the public (which could include websites, television, physical spaces, etc.) It is a good idea to find out what your laws are. If you make no effort to check that your content is accessible, you could possibly get in trouble with the law if people with diabilities complain about it.

- -

This sounds serious, but really you just need to consider accessibility as a main priority of your web development practices, as outlined above. If in doubt, get advice from a qualified lawyer. We're not going to offer any more advice than this, because we're not lawyers.

- -

Accessibility APIs

- -

Web browsers make use of special accessibility APIs (provided by the underlying operating system) that expose information useful for assistive technologies (ATs) — ATs mostly tend to make use of semantic information, so this information doesn't include things like styling information, or JavaScript. This information is structured in a tree of information called the accessibility tree.

- -

Different operating systems have different accessibility APIs available :

- - - -

Where the native semantic information provided by the HTML elements in your web apps falls down, you can supplement it with features from the WAI-ARIA specification, which add semantic information to the accessibility tree to improve accessibility. You can learn a lot more about WAI-ARIA in our WAI-ARIA basics article.

- -

Summary

- -

This article should have given you a useful high level overview of accessibility, shown you why it's important, and looked at how you can fit it into your workflow. You should now also have a thirst to learn about the implementation details that can make sites accessible, and we'll start on that in the next section, looking at why HTML is a good basis for accessibility.

- -

{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}

- -

In this module

- - diff --git "a/files/ko/learn/\354\240\221\352\267\274\354\204\261/\353\252\250\353\260\224\354\235\274/index.html" "b/files/ko/learn/\354\240\221\352\267\274\354\204\261/\353\252\250\353\260\224\354\235\274/index.html" deleted file mode 100644 index a64c0eaa88..0000000000 --- "a/files/ko/learn/\354\240\221\352\267\274\354\204\261/\353\252\250\353\260\224\354\235\274/index.html" +++ /dev/null @@ -1,315 +0,0 @@ ---- -title: 모바일 접근성 -slug: Learn/접근성/모바일 -translation_of: Learn/Accessibility/Mobile ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
- -

모바일 기기에서 웹 접근이 매우 자주 발생하고 iOS와 안드로이드와 같은 유명 플랫폼들은 전문적인 접근성 점검도구들이 있기 때문에 웹콘텐츠의 접근성을 고려하는 것이 더욱 중요하다. 여기서는 모바일환경을 중심으로 접근성 고려사항을 살펴본다.

- - - - - - - - - - - - -
사전지식: -

기본적인 컴퓨터 사용능력, HTML, CSS, JavaScript에 대한 기본적인 이해, 그리고 이전 내용들에 대한 이해.

-
목표: -

모바일 기기의 접근성에 어떤 문제가 있는지, 그리고 이를 극복하는 방법을 이해한다.

-
- -

모바일 장치에서의 접근성

- -

접근성 상태(일반적으로 웹 표준에 대한 지원)는 최근의 모바일 장치에서 좋다. 모바일 기기가 데스크톱 브라우저에 전혀 다른 웹 기술을 실행하면서 개발자들이 브라우저 코웃음을 치며 완전히 별개의 사이트에 서비스를 제공하도록 강요하던 시대는 이미 오래 전에 지났다(아직도 상당수의 회사가 모바일 장치의 사용을 감지하여 별도의 모바일 도메인을 서비스하고 있다).

- - - -

The state of accessibility — and support for web standards in general — is good in modern mobile devices. Long gone are the days when mobile devices ran completely different web technologies to desktop browsers, forcing developers to use browser sniffing and serve them completely separate sites (although quite a few companies still detect usage of mobile devices and serve them a separate mobile domain).

- -

These days, mobile devices can usually handle fully-featured websites, and the main platforms even have screenreaders built in to enable visually impaired users to use them successfully. Modern mobile browsers tend to have good support for WAI-ARIA, too.

- -

To make a website accessible and usable on mobile, you just need to follow general good web design and accessibility best practices.

- -

There are some exceptions that need special consideration for mobile; the main ones are:

- - - -

Summary of screenreader testing on Android and iOS

- -

The most common mobile platforms have fully functional screen readers. These function in much the same way as desktop screenreaders, except they are largely operated using touch gestures rather than key combinations.

- -

Let's look at the main two: TalkBack on Android and VoiceOver on iOS.

- -

Android TalkBack

- -

The TalkBack screen reader is built into the Android operating system.

- -

To turn it on, look up what phone model and Android version you have, and then look up where the TalkBack menu is. It tends to differ widely between Android versions and even between different phone models. Some phone manufacturers (e.g. Samsung) don't even have TalkBack in newer phones, and instead opted for their own screen reader.

- -

When you've found the TalkBack menu, press the slider switch to turn TalkBack on. Follow any additional on-screen prompts that you are presented with.

- -

When TalkBack is turned on, your Android device's basic controls will be a bit different. For example:

- -
    -
  1. Single-tapping an app will select it, and the device will read out what the app is.
    2. -
  2. Swiping left and right will move between apps, or buttons/controls if you are in a control bar. The device will read out each option.
    3. -
  3. Double-tapping anywhere will open the app/select the option.
    4. -
  4. You can also "explore by touch" — hold your finger down on the screen and drag it around, and your device will read out the different apps/items you move across.
    5. -
- -

If you want to turn TalkBack off:

- -
    -
  1. Navigate back to the TalkBack menu screen (using the different gestures that are currently enabled.)
    2. -
  2. Navigate to the slider switch and activate it to turn it off.
    3. -
- -
-

Note: You can get to your home screen at any time by swiping up and left in a smooth motion. If you have more than one home screen, you can move between them by swiping two fingers left and right.

-
- -

For a more complete list of TalkBack gestures, see Use TalkBack gestures.

- -

Unlocking the phone

- -

When TalkBack is turned on, unlocking the phone is a bit different.

- -

You can do a two-finger swipe up from the bottom of the lock screen. If you've set a passcode or pattern for unlocking your device, you will then be taken to the relevant entry screen to enter it.

- -

You can also explore by touch to find the Unlock button at the bottom middle of the screen, and then double-tap.

- -

Global and local menus

- -

TalkBack allows you to access global and local context menus, wherever you have navigated to on the device. The former provides global options relating to the device as a whole, and the latter provides options relating just to the current app/screen you are in.

- -

To get to these menus:

- -
    -
  1. Access the global menu by quickly swiping down, and then right.
    2. -
  2. Access the local menu by quickly swiping up, and then right.
    3. -
  3. Swipe left and right to cycle between the different options.
    4. -
  4. Once you've selected the option you want, double-click to choose that option.
    5. -
- -

For details on all the options available under the global and local context menus, see Use global and local context menus.

- -

Browsing web pages

- -

You can use the local context menu while in a web browser to find options to navigate web pages using just the headings, form controls, or links, or navigate line by line, etc.

- -

For example, with TalkBack turned on:

- -
    -
  1. Open your web browser.
    2. -
  2. Activate the URL bar.
    3. -
  3. Enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. To enter the text of the URL: -
      -
    • Select the URL bar by swiping left/right till you get to it, and then double-tapping.
      • -
    • Hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to type it. Repeat for each character.
      • -
    • Once you've finished, find the Enter key and press it.
      • -
    -
    4. -
  4. Swipe left and right to move between different items on the page.
    5. -
  5. Swipe up and right with a smooth motion to enter the local content menu.
    6. -
  6. Swipe right until you find the "Headings and Landmarks" option.
    7. -
  7. Double-tap to select it. Now you'll be able to swipe left and right to move between headings and ARIA landmarks.
    8. -
  8. To go back to the default mode, enter the local context menu again by swiping up and right, select "Default", and then double-tap to activate.
    9. -
- -

Note: See Get started on Android with TalkBack for more complete documentation.

- -

iOS VoiceOver

- -

A mobile version of VoiceOver is built into the iOS operating system.

- -

To turn it on, go to Your Settings app and select Accessibility > VoiceOver. Press the VoiceOver slider to enable it (you'll also see a number of other options related to VoiceOver on this page).

- -
-

Note: Some older iOS devices have the VoiceOver menu at Settings app > General > Accessibility > VoiceOver.

-
- -

Once VoiceOver is enabled, iOS's basic control gestures will be a bit different:

- -
    -
  1. A single tap will cause the item you tap on to be selected; your device will speak the item you've tapped on.
    2. -
  2. You can also navigate the items on the screen by swiping left and right to move between them, or by sliding your finger around on the screen to move between different items (when you find the item you want, you can remove your finger to select it).
    3. -
  3. To activate the selected item (e.g., open a selected app), double-tap anywhere on the screen.
    4. -
  4. Swipe with three fingers to scroll through a page.
    5. -
  5. Tap with two fingers to perform a context-relevant action — for example, taking a photo while in the camera app.
    6. -
- -

To turn it off again, navigate back to Settings > General > Accessibility > VoiceOver using the above gestures, and toggle the VoiceOver slider back to off.

- -

Unlock phone

- -

To unlock the phone, you need to press the home button (or swipe) as normal. If you have a passcode set, you can select each number by swiping/sliding (as explained above) and then double-tapping to enter each number when you've found the right one.

- -

Using the Rotor

- -

When VoiceOver is turned on, you have a navigation feature called the Rotor available to you, which allows you to quickly choose from a number of common useful options. To use it:

- -
    -
  1. Twist two fingers around on the screen like you are turning a dial. Each option will be read aloud as you twist further around. You can go back and forth to cycle through the options.
    2. -
  2. Once you've found the option you want: -
      -
    • Release your fingers to select it.
      • -
    • If it is an option you can iterate the value of (such as Volume or Speaking Rate), you can do a swipe up or down to increase or decrease the value of the selected item.
      • -
    -
    3. -
- -

The options available under the Rotor are context-sensitive — they will differ depending on what app or view you are in (see below for an example).

- -

Browsing web pages

- -

Let's have a go at web browsing with VoiceOver:

- -
    -
  1. Open your web browser.
    2. -
  2. Activate the URL bar.
    3. -
  3. Enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. To enter the text of the URL: -
      -
    • Select the URL bar by swiping left/right until you get to it, and then double-tapping.
      • -
    • For each character, hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to select it. Double-tap to type it.
      • -
    • Once you've finished, find the Enter key and press it.
      • -
    -
    4. -
  4. Swipe left and right to move between items on the page. You can double-tap an item to select it (e.g., follow a link).
    5. -
  5. By default, the selected Rotor option will be Speaking Rate; you can currently swipe up and down to increase or decrease the speaking rate.
    6. -
  6. Now turn two fingers around the screen like a dial to show the rotor and move between its options. Here are a few examples of the options available: -
      -
    • Speaking Rate: Change the speaking rate.
      • -
    • Containers: Move between different semantic containers on the page.
      • -
    • Headings: Move between headings on the page.
      • -
    • Links: Move between links on the page.
      • -
    • Form Controls: Move between form controls on the page.
      • -
    • Language: Move between different translations, if they are available.
      • -
    -
    7. -
  7. Select Headings. Now you'll be able to swipe up and down to move between headings on the page.
    8. -
- -

Note: For a more complete reference covering the VoiceOver gestures available and other hints on accessibility testing on iOS, see Test Accessibility on Your Device with VoiceOver.

- -

Control mechanisms

- -

In our CSS and JavaScript accessibility article, we looked at the idea of events that are specific to a certain type of control mechanism (see Mouse-specific events). To recap, these cause accessibility issues because other control mechanisms can't activate the associated functionality.

- -

As an example, the click event is good in terms of accessibility — an associated event handler can be invoked by clicking the element the handler is set on, tabbing to it and pressing Enter/Return, or tapping it on a touchscreen device. Try our simple-button-example.html example (see it running live) to see what we mean.

- -

Alternatively, mouse-specific events such as mousedown and mouseup create problems — their event handlers cannot be invoked using non-mouse controls.

- -

If you try to control our simple-box-drag.html (see example live) example with a keyboard or touch, you'll see the problem. This occurs because we are using code such as the following:

- -
div.onmousedown = function() {
-  initialBoxX = div.offsetLeft;
-  initialBoxY = div.offsetTop;
-  movePanel();
-}
-
-document.onmouseup = stopMove;
- -

To enable other forms of control, you need to use different, yet equivalent events — for example, touch events work on touchscreen devices:

- -
div.ontouchstart = function(e) {
-  initialBoxX = div.offsetLeft;
-  initialBoxY = div.offsetTop;
-  positionHandler(e);
-  movePanel();
-}
-
-panel.ontouchend = stopMove;
- -

We've provided a simple example that shows how to use the mouse and touch events together — see multi-control-box-drag.html (see the example live also).

- -
-

Note: You can also see fully functional examples showing how to implement different control mechanisms at Implementing game control mechanisms.

-
- -

Responsive design

- -

Responsive design is the practice of making your layouts and other features of your apps dynamically change depending on factors such as screen size and resolution, so they are usable and accessible to users of different device types.

- -

In particular, the most common problems that need to be addressed for mobile are:

- - - -

Note: We won't provide a full discussion of responsive design techniques here, as they are covered in other places around MDN (see above links).

- -

Specific mobile considerations

- -

There are other important issues to consider when making sites more accessible on mobile. We have listed a couple here, but we will add more when we think of them.

- -

Not disabling zoom

- -

Using viewport, it is possible to disable zoom. Always ensure resizing is enabled, and set the width to the device's width in the {{htmlelement("head")}}:

- -
<meta name="viewport" content="width=device-width; user-scalable=yes">
- -

You should never set user-scalable=no if at all possible — many people rely on zoom to be able to see the content of your website, so taking this functionality away is a really bad idea. There are certain situations where zooming might break the UI; in such cases, if you feel that you absolutely need to disable zoom, you should provide some other kind of equivalent, such as a control for increasing the text size in a way that doesn't break your UI.

- -

Keeping menus accessible

- -

Because the screen is so much narrower on mobile devices, it is very common to use media queries and other technologies to make the navigation menu shrink down to a tiny icon at the top of the display — which can be pressed to reveal the menu only if it's needed — when the site is viewed on mobile. This is commonly represented by a "three horizontal lines" icon, and the design pattern is consequently known as a "hamburger menu".

- -

When implementing such a menu, you need to make sure that the control to reveal it is accessible by appropriate control mechanisms (normally touch for mobile), as discussed in {{anch("Control mechanisms")}} above, and that the rest of the page is moved out of the way or hidden in some way while the menu is being accessed, to avoid confusion with navigating it.

- -

Click here for a good hamburger menu example.

- -

User input

- -

On mobile devices, inputting data tends to be more annoying for users than the equivalent experience on desktop computers. It is more convenient to type text into form inputs using a desktop or laptop keyboard than a touchscreen virtual keyboard or a tiny mobile physical keyboard.

- -

For this reason, it is worth trying to minimize the amount of typing needed. As an example, instead of getting users to fill out their job title each time using a regular text input, you could instead offer a {{htmlelement("select")}} menu containing the most common options (which also helps with consistency in data entry), and offer an "Other" option that displays a text field to type any outliers into. You can see a simple example of this idea in action in common-job-types.html (see the common jobs example live).

- -

It is also worth considering the use of HTML5 form input types such as the date on mobile platforms as they handle them well — both Android and iOS, for example, display usable widgets that fit well with the device experience. See html5-form-examples.html for some examples (see the HTML5 form examples live) — try loading these and manipulating them on mobile devices. For example:

- - - -

If you want to provide a different solution for desktops, you could always serve different markup to your mobile devices using feature detection. See input types for raw information on detecting different input types, and also check out our feature detection article for much more information.

- -

Summary

- -

In this article, we have provided you with some details about common mobile accessibility-specific issues and how to overcome them. We also took you through the usage of the most common screenreaders to aid you in accessibility testing.

- -

See also

- - - -
{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
- -
-

In this module

- - -
-- cgit v1.2.3-54-g00ecf From f2db11d0be377464daa06807f993a562c7dc10ac Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:48:25 +0100 Subject: unslug ko: modify --- files/ko/_redirects.txt | 923 +- files/ko/_wikihistory.json | 10642 +++++++++---------- .../conflicting/learn/common_questions/index.html | 3 +- .../index.html | 3 +- .../cascade_and_inheritance/index.html | 3 +- .../learn/css/building_blocks/index.html | 3 +- .../css/building_blocks/styling_tables/index.html | 3 +- .../ko/conflicting/learn/css/css_layout/index.html | 3 +- .../learn/css/css_layout/introduction/index.html | 3 +- .../learn/css/styling_text/fundamentals/index.html | 3 +- .../css/styling_text/styling_lists/index.html | 3 +- .../javascript_basics/index.html | 3 +- .../advanced_text_formatting/index.html | 3 +- files/ko/conflicting/learn/index.html | 3 +- .../learn/javascript/objects/index.html | 3 +- files/ko/conflicting/mdn/tools/index.html | 3 +- files/ko/conflicting/mozilla/add-ons/index.html | 3 +- .../web/api/document_object_model/index.html | 3 +- files/ko/conflicting/web/api/index.html | 3 +- .../tutorial/using_textures_in_webgl/index.html | 3 +- files/ko/conflicting/web/css/@viewport/index.html | 3 +- .../index.html | 3 +- .../index.html | 3 +- .../using_multiple_backgrounds/index.html | 3 +- files/ko/conflicting/web/guide/index.html | 3 +- .../guide/expressions_and_operators/index.html | 5 +- .../index.html | 4 +- .../index.html | 4 +- .../index.html | 4 +- .../index.html | 4 +- .../javascript/guide/grammar_and_types/index.html | 3 +- .../index.html | 4 +- .../index.html | 4 +- .../index.html | 4 +- .../index.html | 4 +- .../ko/conflicting/web/javascript/guide/index.html | 5 +- .../javascript_technologies_overview/index.html | 3 +- .../reference/global_objects/boolean/index.html | 3 +- .../reference/global_objects/date/index.html | 3 +- .../global_objects/internalerror/index.html | 3 +- .../global_objects/intl/datetimeformat/index.html | 3 +- .../global_objects/intl/numberformat/index.html | 3 +- .../reference/global_objects/map/index.html | 3 +- .../reference/global_objects/number/index.html | 3 +- .../reference/global_objects/object/index.html | 3 +- .../reference/global_objects/promise/index.html | 3 +- .../reference/global_objects/set/index.html | 3 +- .../global_objects/sharedarraybuffer/index.html | 3 +- .../reference/global_objects/string/index.html | 3 +- .../global_objects/syntaxerror/index.html | 3 +- .../reference/global_objects/typedarray/index.html | 3 +- .../reference/global_objects/weakmap/index.html | 3 +- .../reference/global_objects/weakset/index.html | 3 +- .../global_objects/webassembly/global/index.html | 3 +- .../web/javascript/reference/operators/index.html | 3 +- .../index.html | 4 +- .../index.html | 4 +- .../index.html | 4 +- .../index.html | 4 +- .../reference/statements/switch/index.html | 3 +- .../index.html | 3 +- .../2d_breakout_game_phaser/the_score/index.html | 3 +- .../bounce_off_the_walls/index.html | 3 +- .../build_the_brick_field/index.html | 3 +- .../collision_detection/index.html | 3 +- .../create_the_canvas_and_draw_on_it/index.html | 4 +- .../finishing_up/index.html | 3 +- .../game_over/index.html | 3 +- .../2d_breakout_game_pure_javascript/index.html | 3 +- .../mouse_controls/index.html | 3 +- .../move_the_ball/index.html | 3 +- .../paddle_and_keyboard_controls/index.html | 3 +- .../track_the_score_and_win/index.html | 3 +- files/ko/glossary/array/index.html | 3 +- files/ko/glossary/boolean/index.html | 3 +- files/ko/glossary/browsing_context/index.html | 3 +- files/ko/glossary/cache/index.html | 3 +- files/ko/glossary/dhtml/index.html | 3 +- .../dynamic_programming_language/index.html | 3 +- files/ko/glossary/http_header/index.html | 3 +- files/ko/glossary/identifier/index.html | 3 +- files/ko/glossary/localization/index.html | 3 +- files/ko/glossary/scope/index.html | 3 +- .../transmission_control_protocol_(tcp)/index.html | 3 +- files/ko/glossary/xhtml/index.html | 3 +- files/ko/learn/accessibility/html/index.html | 3 +- files/ko/learn/accessibility/index.html | 3 +- files/ko/learn/accessibility/mobile/index.html | 3 +- .../accessibility/what_is_accessibility/index.html | 3 +- .../index.html | 3 +- .../thinking_before_coding/index.html | 3 +- .../fundamental_css_comprehension/index.html | 3 +- .../learn/css/building_blocks/selectors/index.html | 3 +- .../css/building_blocks/the_box_model/index.html | 3 +- .../learn/css/css_layout/media_queries/index.html | 3 +- .../ko/learn/css/css_layout/normal_flow/index.html | 3 +- .../ko/learn/css/css_layout/positioning/index.html | 3 +- .../css/css_layout/responsive_design/index.html | 3 +- .../supporting_older_browsers/index.html | 3 +- files/ko/learn/css/howto/css_faq/index.html | 3 +- .../forms/how_to_structure_a_web_form/index.html | 3 +- files/ko/learn/forms/index.html | 3 +- .../sending_and_retrieving_form_data/index.html | 3 +- files/ko/learn/forms/your_first_form/index.html | 3 +- .../css_basics/index.html | 5 +- .../dealing_with_files/index.html | 5 +- .../how_the_web_works/index.html | 3 +- .../html_basics/index.html | 5 +- .../installing_basic_software/index.html | 5 +- .../publishing_your_website/index.html | 3 +- .../author_fast-loading_html_pages/index.html | 3 +- .../html/howto/use_data_attributes/index.html | 3 +- .../video_and_audio_content/index.html | 3 +- .../building_blocks/conditionals/index.html | 3 +- .../manipulating_documents/index.html | 5 +- .../test_your_skills_colon__json/index.html | 5 +- .../development_environment/index.html | 3 +- .../express_nodejs/skeleton_website/index.html | 3 +- .../node_server_without_framework/index.html | 3 +- files/ko/mdn/at_ten/index.html | 3 +- .../convert_code_samples_to_be_live/index.html | 3 +- .../howto/create_and_edit_pages/index.html | 3 +- .../write_an_api_reference/sidebars/index.html | 3 +- .../guidelines/code_guidelines/general/index.html | 3 +- .../guidelines/conventions_definitions/index.html | 3 +- .../guidelines/does_this_belong_on_mdn/index.html | 3 +- .../mdn/guidelines/writing_style_guide/index.html | 3 +- files/ko/mdn/yari/index.html | 3 +- .../webextensions/api/menus/contexttype/index.html | 3 +- .../webextensions/api/menus/create/index.html | 3 +- .../api/menus/gettargetelement/index.html | 3 +- .../add-ons/webextensions/api/menus/index.html | 3 +- .../webextensions/api/menus/onshown/index.html | 3 +- .../developer_guide/source_code/cvs/index.html | 3 +- .../index.html | 3 +- files/ko/mozilla/firefox/releases/1.5/index.html | 3 +- files/ko/mozilla/firefox/releases/2/index.html | 3 +- .../releases/2/updating_extensions/index.html | 3 +- files/ko/mozilla/firefox/releases/3.5/index.html | 3 +- files/ko/mozilla/firefox/releases/3.6/index.html | 3 +- .../firefox/releases/3/dom_improvements/index.html | 3 +- .../firefox/releases/3/full_page_zoom/index.html | 3 +- .../releases/3/notable_bugs_fixed/index.html | 3 +- .../firefox/releases/3/svg_improvements/index.html | 3 +- .../releases/3/updating_extensions/index.html | 3 +- .../3/updating_web_applications/index.html | 3 +- .../index.html | 3 +- .../index.html | 3 +- .../ko/orphaned/learn/how_to_contribute/index.html | 5 +- .../ko/orphaned/mdn/about/mdn_services/index.html | 3 +- .../mdn/community/conversations/index.html | 3 +- files/ko/orphaned/mdn/community/index.html | 3 +- .../mdn/community/working_in_community/index.html | 3 +- .../howto/create_an_mdn_account/index.html | 3 +- .../howto/do_a_technical_review/index.html | 3 +- .../howto/do_an_editorial_review/index.html | 3 +- .../property_template/index.html | 3 +- .../howto/set_the_summary_for_a_page/index.html | 3 +- .../howto/tag_javascript_pages/index.html | 3 +- .../index.html | 3 +- files/ko/orphaned/mdn/editor/index.html | 3 +- files/ko/orphaned/mdn/editor/links/index.html | 3 +- .../mdn/structures/api_references/index.html | 3 +- .../mdn/tools/page_regeneration/index.html | 3 +- .../orphaned/places/custom_containers/index.html | 3 +- .../orphaned/places/instantiating_views/index.html | 3 +- files/ko/orphaned/places/query_system/index.html | 3 +- files/ko/orphaned/places/views/index.html | 3 +- files/ko/orphaned/theme_packaging/index.html | 3 +- .../tools/add-ons/dom_inspector/index.html | 13 +- files/ko/orphaned/tools/add-ons/index.html | 5 +- .../index.html | 3 +- files/ko/orphaned/web/css/index/index.html | 3 +- .../orphaned/web/html/element/command/index.html | 3 +- .../orphaned/web/html/element/element/index.html | 3 +- .../web/html/global_attributes/dropzone/index.html | 3 +- .../index.html | 3 +- .../core_javascript_1.5_guide/about/index.html | 3 +- .../index.html | 2 + .../creating_a_regular_expression/index.html | 2 + .../defining_getters_and_setters/index.html | 2 + .../defining_methods/index.html | 2 + .../index.html | 2 + .../deleting_properties/index.html | 2 + .../creating_new_objects/index.html | 2 + .../indexing_object_properties/index.html | 2 + .../using_a_constructor_function/index.html | 2 + .../using_this_for_object_references/index.html | 2 + .../expressions/index.html | 4 +- .../javascript_overview/index.html | 2 + .../objects_and_properties/index.html | 2 + .../operators/assignment_operators/index.html | 2 + .../core_javascript_1.5_guide/operators/index.html | 4 +- .../array_object/index.html | 2 + .../global_objects/bigint/prototype/index.html | 3 +- .../information_security_basics/index.html | 3 +- .../windows_and_menus_in_xulrunner/index.html | 3 +- .../index.html" | 3 +- .../index.html" | 3 +- .../ko/plugins/guide/scripting_plugins/index.html | 3 +- files/ko/tools/debugger/how_to/index.html | 3 +- .../debugger/how_to/open_the_debugger/index.html | 3 +- files/ko/tools/debugger/how_to/search/index.html | 3 +- .../debugger/how_to/set_a_breakpoint/index.html | 3 +- .../tools/debugger/keyboard_shortcuts/index.html | 3 +- files/ko/web/api/ambient_light_events/index.html | 3 +- files/ko/web/api/battery_status_api/index.html | 3 +- .../api/broadcastchannel/message_event/index.html | 3 +- .../api/canvas_api/a_basic_ray-caster/index.html | 3 +- files/ko/web/api/canvas_api/index.html | 3 +- .../manipulating_video_using_canvas/index.html | 3 +- .../tutorial/advanced_animations/index.html | 3 +- .../tutorial/applying_styles_and_colors/index.html | 3 +- .../tutorial/basic_animations/index.html | 3 +- .../api/canvas_api/tutorial/basic_usage/index.html | 3 +- .../tutorial/compositing/example/index.html | 3 +- .../api/canvas_api/tutorial/compositing/index.html | 3 +- .../canvas_api/tutorial/drawing_shapes/index.html | 3 +- .../canvas_api/tutorial/drawing_text/index.html | 5 +- .../web/api/canvas_api/tutorial/finale/index.html | 3 +- .../hit_regions_and_accessibility/index.html | 3 +- files/ko/web/api/canvas_api/tutorial/index.html | 3 +- .../tutorial/optimizing_canvas/index.html | 3 +- .../canvas_api/tutorial/transformations/index.html | 3 +- .../canvas_api/tutorial/using_images/index.html | 3 +- .../index.html | 3 +- .../managing_screen_orientation/index.html | 3 +- .../api/detecting_device_orientation/index.html | 3 +- files/ko/web/api/document/createevent/index.html | 3 +- .../document_object_model/introduction/index.html | 3 +- .../documentorshadowroot/getselection/index.html | 3 +- files/ko/web/api/element/blur_event/index.html | 3 +- .../web/api/elementcssinlinestyle/style/index.html | 3 +- files/ko/web/api/fetch_api/using_fetch/index.html | 3 +- files/ko/web/api/fullscreen_api/index.html | 3 +- .../using_the_geolocation_api/index.html | 3 +- .../drag_operations/index.html | 3 +- files/ko/web/api/html_drag_and_drop_api/index.html | 3 +- files/ko/web/api/htmlelement/accesskey/index.html | 3 +- files/ko/web/api/htmlelement/innertext/index.html | 3 +- .../api/htmlmediaelement/abort_event/index.html | 3 +- .../api/htmlorforeignelement/dataset/index.html | 3 +- .../api/htmlorforeignelement/tabindex/index.html | 3 +- files/ko/web/api/navigation_timing_api/index.html | 3 +- files/ko/web/api/navigator/connection/index.html | 3 +- .../ko/web/api/network_information_api/index.html | 3 +- .../using_the_notifications_api/index.html | 3 +- files/ko/web/api/proximity_events/index.html | 3 +- .../web/api/screen/onorientationchange/index.html | 3 +- files/ko/web/api/streams_api/concepts/index.html | 3 +- files/ko/web/api/vibration_api/index.html | 3 +- .../web_workers_api/using_web_workers/index.html | 3 +- files/ko/web/api/websockets_api/index.html | 3 +- .../index.html | 3 +- .../writing_websocket_servers/index.html | 3 +- .../api/window/domcontentloaded_event/index.html | 3 +- files/ko/web/api/window/load_event/index.html | 3 +- .../settimeout/index.html | 3 +- .../api/xmlhttprequest/timeout_event/index.html | 3 +- .../web/api/xsltprocessor/basic_example/index.html | 3 +- .../xsltprocessor/browser_differences/index.html | 3 +- .../api/xsltprocessor/generating_html/index.html | 3 +- files/ko/web/api/xsltprocessor/index.html | 3 +- .../web/api/xsltprocessor/introduction/index.html | 3 +- .../ko/web/api/xsltprocessor/resources/index.html | 3 +- .../web/css/adjacent_sibling_combinator/index.html | 3 +- files/ko/web/css/containing_block/index.html | 3 +- .../resizing_background_images/index.html | 3 +- .../index.html | 3 +- .../using_multi-column_layouts/index.html | 3 +- .../basic_concepts_of_flexbox/index.html | 3 +- .../typical_use_cases_of_flexbox/index.html | 3 +- .../index.html | 3 +- .../flow_layout_and_overflow/index.html | 3 +- .../flow_layout_and_writing_modes/index.html | 3 +- .../in_flow_and_out_of_flow/index.html | 3 +- .../consistent_list_indentation/index.html | 3 +- files/ko/web/css/css_masking/index.html | 3 +- files/ko/web/css/css_values_and_units/index.html | 3 +- .../media_queries/using_media_queries/index.html | 3 +- files/ko/web/css/url()/index.html | 3 +- .../ko/web/css/visual_formatting_model/index.html | 3 +- files/ko/web/guide/graphics/index.html | 3 +- .../ko/web/guide/html/editable_content/index.html | 3 +- files/ko/web/guide/html/html5/index.html | 3 +- .../html/html5/introduction_to_html5/index.html | 3 +- .../using_html_sections_and_outlines/index.html | 3 +- .../guide/parsing_and_serializing_xml/index.html | 3 +- .../ko/web/html/global_attributes/class/index.html | 3 +- .../index.html | 3 +- .../a_re-introduction_to_javascript/index.html | 3 +- .../ko/web/javascript/about_javascript/index.html | 3 +- files/ko/web/javascript/closures/index.html | 3 +- .../guide/details_of_the_object_model/index.html | 3 +- files/ko/web/javascript/guide/functions/index.html | 3 +- .../javascript/guide/grammar_and_types/index.html | 5 +- .../web/javascript/guide/introduction/index.html | 3 +- .../javascript/guide/meta_programming/index.html | 3 +- .../regular_expressions/assertions/index.html | 3 +- .../groups_and_ranges/index.html | 3 +- .../guide/regular_expressions/index.html | 3 +- .../inheritance_and_the_prototype_chain/index.html | 3 +- .../web/javascript/language_resources/index.html | 3 +- .../classes/public_class_fields/index.html | 3 +- .../reference/functions/arrow_functions/index.html | 3 +- .../global_objects/proxy/proxy/apply/index.html | 3 +- .../global_objects/proxy/proxy/index.html | 3 +- .../operators/operator_precedence/index.html | 3 +- files/ko/web/javascript/shells/index.html | 3 +- .../web/media/formats/codecs_parameter/index.html | 3 +- files/ko/web/media/formats/containers/index.html | 3 +- files/ko/web/media/formats/video_codecs/index.html | 3 +- .../performance/critical_rendering_path/index.html | 3 +- .../web/performance/how_browsers_work/index.html | 3 +- .../progressive_web_apps/introduction/index.html | 3 +- .../responsive/media_types/index.html | 3 +- files/ko/web/reference/api/index.html | 3 +- files/ko/web/reference/index.html | 3 +- files/ko/web/svg/element/rect/index.html | 3 +- .../web/svg/svg_1.1_support_in_firefox/index.html | 3 +- files/ko/web/svg/tutorial/basic_shapes/index.html | 3 +- .../ko/web/svg/tutorial/getting_started/index.html | 5 +- files/ko/web/svg/tutorial/positions/index.html | 3 +- files/ko/web/svg/tutorial/svg_and_css/index.html | 5 +- .../index.html | 3 +- files/ko/web/xslt/element/apply-imports/index.html | 3 +- .../ko/web/xslt/element/apply-templates/index.html | 3 +- files/ko/web/xslt/element/attribute-set/index.html | 3 +- files/ko/web/xslt/element/attribute/index.html | 3 +- files/ko/web/xslt/element/call-template/index.html | 3 +- files/ko/web/xslt/element/choose/index.html | 3 +- files/ko/web/xslt/element/comment/index.html | 3 +- files/ko/web/xslt/element/copy-of/index.html | 3 +- files/ko/web/xslt/element/copy/index.html | 3 +- .../ko/web/xslt/element/decimal-format/index.html | 3 +- files/ko/web/xslt/element/fallback/index.html | 3 +- files/ko/web/xslt/element/for-each/index.html | 3 +- files/ko/web/xslt/element/if/index.html | 3 +- files/ko/web/xslt/element/import/index.html | 3 +- files/ko/web/xslt/element/include/index.html | 3 +- files/ko/web/xslt/element/key/index.html | 3 +- files/ko/web/xslt/element/message/index.html | 3 +- .../ko/web/xslt/element/namespace-alias/index.html | 3 +- files/ko/web/xslt/element/number/index.html | 3 +- files/ko/web/xslt/element/otherwise/index.html | 3 +- files/ko/web/xslt/element/output/index.html | 3 +- files/ko/web/xslt/element/param/index.html | 3 +- .../ko/web/xslt/element/preserve-space/index.html | 3 +- .../xslt/element/processing-instruction/index.html | 3 +- files/ko/web/xslt/element/sort/index.html | 3 +- files/ko/web/xslt/element/strip-space/index.html | 3 +- files/ko/web/xslt/element/stylesheet/index.html | 3 +- files/ko/web/xslt/element/template/index.html | 3 +- files/ko/web/xslt/element/text/index.html | 3 +- files/ko/web/xslt/element/transform/index.html | 3 +- files/ko/web/xslt/element/value-of/index.html | 3 +- files/ko/web/xslt/element/variable/index.html | 3 +- files/ko/web/xslt/element/when/index.html | 3 +- files/ko/web/xslt/element/with-param/index.html | 3 +- .../web/xslt/xslt_js_interface_in_gecko/index.html | 3 +- .../introduction/index.html | 3 +- .../setting_parameters/index.html | 3 +- 362 files changed, 6714 insertions(+), 5970 deletions(-) (limited to 'files/ko/learn') diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index 7f30c9d013..332b346200 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -2,11 +2,14 @@ /ko/docs/AJAX /ko/docs/Web/Guide/AJAX /ko/docs/AJAX/Getting_Started /ko/docs/Web/Guide/AJAX/Getting_Started /ko/docs/AJAX:Getting_Started /ko/docs/Web/Guide/AJAX/Getting_Started -/ko/docs/About_JavaScript /ko/docs/Web/JavaScript/About +/ko/docs/A_Basic_RayCaster /ko/docs/Web/API/Canvas_API/A_basic_ray-caster +/ko/docs/A_re-introduction_to_JavaScript /ko/docs/Web/JavaScript/A_re-introduction_to_JavaScript +/ko/docs/About_JavaScript /ko/docs/Web/JavaScript/About_JavaScript /ko/docs/About_the_Document_Object_Model /ko/docs/Web/API/Document_Object_Model /ko/docs/Accessibility /ko/docs/Web/Accessibility /ko/docs/Accessibility/ARIA /ko/docs/Web/Accessibility/ARIA /ko/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets /ko/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +/ko/docs/Adapting_XUL_Applications_for_Firefox_1.5 /ko/docs/Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5 /ko/docs/Alternative_style_sheets /ko/docs/Web/CSS/Alternative_style_sheets /ko/docs/Apps/Progressive /ko/docs/Web/Progressive_web_apps /ko/docs/Apps/Progressive/Add_to_home_screen /ko/docs/Web/Progressive_web_apps/Add_to_home_screen @@ -14,29 +17,30 @@ /ko/docs/Apps/Progressive/Installable_PWAs /ko/docs/Web/Progressive_web_apps/Installable_PWAs /ko/docs/Apps/Progressive/Offline_Service_workers /ko/docs/Web/Progressive_web_apps/Offline_Service_workers /ko/docs/Apps/Progressive/Re-engageable_Notifications_Push /ko/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push -/ko/docs/Apps/Progressive/소개 /ko/docs/Web/Progressive_web_apps/소개 +/ko/docs/Apps/Progressive/소개 /ko/docs/Web/Progressive_web_apps/Introduction +/ko/docs/Building_an_Extension /ko/docs/conflicting/Mozilla/Add-ons /ko/docs/CSS /ko/docs/Web/CSS /ko/docs/CSS/@font-face /ko/docs/Web/CSS/@font-face /ko/docs/CSS/Getting_Started /en-US/docs/Learn/CSS/First_steps -/ko/docs/CSS/Getting_Started/Boxes /ko/docs/Web/CSS/시작하기/상자 -/ko/docs/CSS/Getting_Started/Cascading_and_inheritance /ko/docs/Web/CSS/시작하기/종속과_상속 +/ko/docs/CSS/Getting_Started/Boxes /ko/docs/conflicting/Learn/CSS/Building_blocks +/ko/docs/CSS/Getting_Started/Cascading_and_inheritance /ko/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance /ko/docs/CSS/Getting_Started/Color /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /ko/docs/CSS/Getting_Started/Content /ko/docs/Learn/CSS/Howto/Generated_content /ko/docs/CSS/Getting_Started/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ko/docs/CSS/Getting_Started/JavaScript /ko/docs/Web/CSS/Getting_Started/JavaScript -/ko/docs/CSS/Getting_Started/Layout /ko/docs/Web/CSS/시작하기/배치 -/ko/docs/CSS/Getting_Started/Lists /ko/docs/Web/CSS/시작하기/리스트 -/ko/docs/CSS/Getting_Started/Media /ko/docs/Web/CSS/시작하기/미디어 -/ko/docs/CSS/Getting_Started/SVG_graphics /ko/docs/Web/CSS/Getting_Started/SVG_graphics +/ko/docs/CSS/Getting_Started/JavaScript /ko/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +/ko/docs/CSS/Getting_Started/Layout /ko/docs/conflicting/Learn/CSS/CSS_layout +/ko/docs/CSS/Getting_Started/Lists /ko/docs/conflicting/Learn/CSS/Styling_text/Styling_lists +/ko/docs/CSS/Getting_Started/Media /ko/docs/Web/Progressive_web_apps/Responsive/Media_types +/ko/docs/CSS/Getting_Started/SVG_graphics /ko/docs/Web/SVG/Tutorial/SVG_and_CSS /ko/docs/CSS/Getting_Started/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors -/ko/docs/CSS/Getting_Started/Tables /ko/docs/Web/CSS/시작하기/테이블 -/ko/docs/CSS/Getting_Started/Text_styles /ko/docs/Web/CSS/시작하기/텍스트_스타일 +/ko/docs/CSS/Getting_Started/Tables /ko/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables +/ko/docs/CSS/Getting_Started/Text_styles /ko/docs/conflicting/Learn/CSS/Styling_text/Fundamentals /ko/docs/CSS/Getting_Started/What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS/Getting_Started/Why_use_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS/Getting_Started/XBL_bindings /ko/docs/Web/CSS/Getting_Started/XBL_bindings /ko/docs/CSS/Getting_Started/XML_data /ko/docs/Web/CSS/Getting_Started/XML_data /ko/docs/CSS/Getting_Started/XUL_user_interfaces /ko/docs/Web/CSS/Getting_Started/XUL_user_interfaces -/ko/docs/CSS/Scaling_background_images /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +/ko/docs/CSS/Scaling_background_images /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images /ko/docs/CSS/Understanding_z-index /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index /ko/docs/CSS/Understanding_z-index-redirect-1 /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index /ko/docs/CSS/Understanding_z-index/Adding_z-index /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index @@ -50,7 +54,7 @@ /ko/docs/CSS/Understanding_z-index/Stacking_without_z-index-redirect-1 /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index /ko/docs/CSS/Understanding_z-index/The_stacking_context /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context /ko/docs/CSS/Using_CSS_animations /ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations -/ko/docs/CSS/Using_CSS_multiple_backgrounds /ko/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +/ko/docs/CSS/Using_CSS_multiple_backgrounds /ko/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds /ko/docs/CSS/Using_CSS_transforms /ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms /ko/docs/CSS/animation /ko/docs/Web/CSS/animation /ko/docs/CSS/background /ko/docs/Web/CSS/background @@ -59,7 +63,7 @@ /ko/docs/CSS/border-radius /ko/docs/Web/CSS/border-radius /ko/docs/CSS/box-shadow /ko/docs/Web/CSS/box-shadow /ko/docs/CSS/cursor /ko/docs/Web/CSS/cursor -/ko/docs/CSS/cursor/Using_URL_values_for_the_cursor_property /ko/docs/Web/CSS/cursor/Using_URL_values_for_the_cursor_property +/ko/docs/CSS/cursor/Using_URL_values_for_the_cursor_property /ko/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property /ko/docs/CSS/initial_value /ko/docs/Web/CSS/initial_value /ko/docs/CSS/linear-gradient /ko/docs/Web/CSS/linear-gradient() /ko/docs/CSS/text-shadow /ko/docs/Web/CSS/text-shadow @@ -69,30 +73,31 @@ /ko/docs/CSS/시작하기/CSS_동작_원리 /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS/시작하기/CSS란 /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS/시작하기/내용물 /ko/docs/Learn/CSS/Howto/Generated_content -/ko/docs/CSS/시작하기/리스트 /ko/docs/Web/CSS/시작하기/리스트 -/ko/docs/CSS/시작하기/미디어 /ko/docs/Web/CSS/시작하기/미디어 -/ko/docs/CSS/시작하기/배치 /ko/docs/Web/CSS/시작하기/배치 -/ko/docs/CSS/시작하기/상자 /ko/docs/Web/CSS/시작하기/상자 +/ko/docs/CSS/시작하기/리스트 /ko/docs/conflicting/Learn/CSS/Styling_text/Styling_lists +/ko/docs/CSS/시작하기/미디어 /ko/docs/Web/Progressive_web_apps/Responsive/Media_types +/ko/docs/CSS/시작하기/배치 /ko/docs/conflicting/Learn/CSS/CSS_layout +/ko/docs/CSS/시작하기/상자 /ko/docs/conflicting/Learn/CSS/Building_blocks /ko/docs/CSS/시작하기/색상 /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /ko/docs/CSS/시작하기/설렉터 /en-US/docs/Learn/CSS/Building_blocks/Selectors /ko/docs/CSS/시작하기/왜_CSS를_사용하나 /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ko/docs/CSS/시작하기/종속과_상속 /ko/docs/Web/CSS/시작하기/종속과_상속 -/ko/docs/CSS/시작하기/테이블 /ko/docs/Web/CSS/시작하기/테이블 -/ko/docs/CSS/시작하기/텍스트_스타일 /ko/docs/Web/CSS/시작하기/텍스트_스타일 +/ko/docs/CSS/시작하기/종속과_상속 /ko/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance +/ko/docs/CSS/시작하기/테이블 /ko/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables +/ko/docs/CSS/시작하기/텍스트_스타일 /ko/docs/conflicting/Learn/CSS/Styling_text/Fundamentals +/ko/docs/CSS3_Columns /ko/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts /ko/docs/CSS:Getting_Started /en-US/docs/Learn/CSS/First_steps -/ko/docs/CSS:Getting_Started:Boxes /ko/docs/Web/CSS/시작하기/상자 -/ko/docs/CSS:Getting_Started:Cascading_and_inheritance /ko/docs/Web/CSS/시작하기/종속과_상속 +/ko/docs/CSS:Getting_Started:Boxes /ko/docs/conflicting/Learn/CSS/Building_blocks +/ko/docs/CSS:Getting_Started:Cascading_and_inheritance /ko/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance /ko/docs/CSS:Getting_Started:Color /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /ko/docs/CSS:Getting_Started:Content /ko/docs/Learn/CSS/Howto/Generated_content /ko/docs/CSS:Getting_Started:How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ko/docs/CSS:Getting_Started:JavaScript /ko/docs/Web/CSS/Getting_Started/JavaScript -/ko/docs/CSS:Getting_Started:Layout /ko/docs/Web/CSS/시작하기/배치 -/ko/docs/CSS:Getting_Started:Lists /ko/docs/Web/CSS/시작하기/리스트 -/ko/docs/CSS:Getting_Started:Media /ko/docs/Web/CSS/시작하기/미디어 -/ko/docs/CSS:Getting_Started:SVG_graphics /ko/docs/Web/CSS/Getting_Started/SVG_graphics +/ko/docs/CSS:Getting_Started:JavaScript /ko/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +/ko/docs/CSS:Getting_Started:Layout /ko/docs/conflicting/Learn/CSS/CSS_layout +/ko/docs/CSS:Getting_Started:Lists /ko/docs/conflicting/Learn/CSS/Styling_text/Styling_lists +/ko/docs/CSS:Getting_Started:Media /ko/docs/Web/Progressive_web_apps/Responsive/Media_types +/ko/docs/CSS:Getting_Started:SVG_graphics /ko/docs/Web/SVG/Tutorial/SVG_and_CSS /ko/docs/CSS:Getting_Started:Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors -/ko/docs/CSS:Getting_Started:Tables /ko/docs/Web/CSS/시작하기/테이블 -/ko/docs/CSS:Getting_Started:Text_styles /ko/docs/Web/CSS/시작하기/텍스트_스타일 +/ko/docs/CSS:Getting_Started:Tables /ko/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables +/ko/docs/CSS:Getting_Started:Text_styles /ko/docs/conflicting/Learn/CSS/Styling_text/Fundamentals /ko/docs/CSS:Getting_Started:What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS:Getting_Started:Why_use_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS:Getting_Started:XBL_bindings /ko/docs/Web/CSS/Getting_Started/XBL_bindings @@ -101,63 +106,64 @@ /ko/docs/CSS:background /ko/docs/Web/CSS/background /ko/docs/CSS:initial_value /ko/docs/Web/CSS/initial_value /ko/docs/CSS_Reference /ko/docs/Web/CSS/Reference -/ko/docs/CSS_Reference/Property_Template /ko/docs/Web/CSS/Reference/Property_Template -/ko/docs/CSS_Reference:Property_Template /ko/docs/Web/CSS/Reference/Property_Template +/ko/docs/CSS_Reference/Property_Template /ko/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template +/ko/docs/CSS_Reference:Property_Template /ko/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template +/ko/docs/Consistent_List_Indentation /ko/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation /ko/docs/Core_JavaScript_1.5_Guide /ko/docs/Web/JavaScript/Guide -/ko/docs/Core_JavaScript_1.5_Guide/About /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About -/ko/docs/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages -/ko/docs/Core_JavaScript_1.5_Guide/Constants /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function -/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References -/ko/docs/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression -/ko/docs/Core_JavaScript_1.5_Guide/Expressions /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions -/ko/docs/Core_JavaScript_1.5_Guide/JavaScript_Overview /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview -/ko/docs/Core_JavaScript_1.5_Guide/Literals /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals -/ko/docs/Core_JavaScript_1.5_Guide/Objects_and_Properties /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties -/ko/docs/Core_JavaScript_1.5_Guide/Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators -/ko/docs/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators -/ko/docs/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators -/ko/docs/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators -/ko/docs/Core_JavaScript_1.5_Guide/Operators/Logical_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators -/ko/docs/Core_JavaScript_1.5_Guide/Operators/Special_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators -/ko/docs/Core_JavaScript_1.5_Guide/Operators/String_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators -/ko/docs/Core_JavaScript_1.5_Guide/Predefined_Core_Objects /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects -/ko/docs/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object -/ko/docs/Core_JavaScript_1.5_Guide/Unicode /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode -/ko/docs/Core_JavaScript_1.5_Guide/Values /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values -/ko/docs/Core_JavaScript_1.5_Guide/Variables /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables -/ko/docs/Core_JavaScript_1.5_Guide:About /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About -/ko/docs/Core_JavaScript_1.5_Guide:Constants /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants -/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Getters_and_Setters /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters -/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Methods /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods -/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Properties_for_an_Object_Type /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type -/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Deleting_Properties /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties -/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Indexing_Object_Properties /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties -/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_a_Constructor_Function /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function -/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_this_for_Object_References /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References -/ko/docs/Core_JavaScript_1.5_Guide:Creating_a_Regular_Expression /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression -/ko/docs/Core_JavaScript_1.5_Guide:Expressions /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions -/ko/docs/Core_JavaScript_1.5_Guide:JavaScript_Overview /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview -/ko/docs/Core_JavaScript_1.5_Guide:Literals /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals -/ko/docs/Core_JavaScript_1.5_Guide:Objects_and_Properties /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties -/ko/docs/Core_JavaScript_1.5_Guide:Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators -/ko/docs/Core_JavaScript_1.5_Guide:Operators:Arithmetic_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators -/ko/docs/Core_JavaScript_1.5_Guide:Operators:Assignment_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators -/ko/docs/Core_JavaScript_1.5_Guide:Operators:Bitwise_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators -/ko/docs/Core_JavaScript_1.5_Guide:Operators:Logical_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators -/ko/docs/Core_JavaScript_1.5_Guide:Operators:Special_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators -/ko/docs/Core_JavaScript_1.5_Guide:Operators:String_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators -/ko/docs/Core_JavaScript_1.5_Guide:Predefined_Core_Objects /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects -/ko/docs/Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Array_Object /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object -/ko/docs/Core_JavaScript_1.5_Guide:Unicode /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode -/ko/docs/Core_JavaScript_1.5_Guide:Values /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values -/ko/docs/Core_JavaScript_1.5_Guide:Variables /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables +/ko/docs/Core_JavaScript_1.5_Guide/About /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About +/ko/docs/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages +/ko/docs/Core_JavaScript_1.5_Guide/Constants /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types +/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects +/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters +/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods +/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type +/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties +/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties +/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function +/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References +/ko/docs/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression +/ko/docs/Core_JavaScript_1.5_Guide/Expressions /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions +/ko/docs/Core_JavaScript_1.5_Guide/JavaScript_Overview /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview +/ko/docs/Core_JavaScript_1.5_Guide/Literals /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece +/ko/docs/Core_JavaScript_1.5_Guide/Objects_and_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties +/ko/docs/Core_JavaScript_1.5_Guide/Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators +/ko/docs/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators +/ko/docs/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators +/ko/docs/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_da1ab2546bd5e84ac81f952de51d5d40 +/ko/docs/Core_JavaScript_1.5_Guide/Operators/Logical_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_2285d0ecb7e20b6a4ac3cb462794e916 +/ko/docs/Core_JavaScript_1.5_Guide/Operators/Special_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915 +/ko/docs/Core_JavaScript_1.5_Guide/Operators/String_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_337b8dbe817777e70cc8002308284a74 +/ko/docs/Core_JavaScript_1.5_Guide/Predefined_Core_Objects /ko/docs/conflicting/Web/JavaScript/Guide +/ko/docs/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object +/ko/docs/Core_JavaScript_1.5_Guide/Unicode /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f +/ko/docs/Core_JavaScript_1.5_Guide/Values /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3 +/ko/docs/Core_JavaScript_1.5_Guide/Variables /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_3f037ba1fa5775d153289787ec51042f +/ko/docs/Core_JavaScript_1.5_Guide:About /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About +/ko/docs/Core_JavaScript_1.5_Guide:Constants /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types +/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Getters_and_Setters /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters +/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Methods /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods +/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Properties_for_an_Object_Type /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type +/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Deleting_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties +/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Indexing_Object_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties +/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_a_Constructor_Function /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function +/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_this_for_Object_References /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References +/ko/docs/Core_JavaScript_1.5_Guide:Creating_a_Regular_Expression /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression +/ko/docs/Core_JavaScript_1.5_Guide:Expressions /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions +/ko/docs/Core_JavaScript_1.5_Guide:JavaScript_Overview /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview +/ko/docs/Core_JavaScript_1.5_Guide:Literals /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece +/ko/docs/Core_JavaScript_1.5_Guide:Objects_and_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties +/ko/docs/Core_JavaScript_1.5_Guide:Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators +/ko/docs/Core_JavaScript_1.5_Guide:Operators:Arithmetic_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators +/ko/docs/Core_JavaScript_1.5_Guide:Operators:Assignment_Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators +/ko/docs/Core_JavaScript_1.5_Guide:Operators:Bitwise_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_da1ab2546bd5e84ac81f952de51d5d40 +/ko/docs/Core_JavaScript_1.5_Guide:Operators:Logical_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_2285d0ecb7e20b6a4ac3cb462794e916 +/ko/docs/Core_JavaScript_1.5_Guide:Operators:Special_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915 +/ko/docs/Core_JavaScript_1.5_Guide:Operators:String_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_337b8dbe817777e70cc8002308284a74 +/ko/docs/Core_JavaScript_1.5_Guide:Predefined_Core_Objects /ko/docs/conflicting/Web/JavaScript/Guide +/ko/docs/Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Array_Object /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object +/ko/docs/Core_JavaScript_1.5_Guide:Unicode /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f +/ko/docs/Core_JavaScript_1.5_Guide:Values /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3 +/ko/docs/Core_JavaScript_1.5_Guide:Variables /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_3f037ba1fa5775d153289787ec51042f /ko/docs/Core_JavaScript_1.5_Reference /ko/docs/Web/JavaScript/Reference /ko/docs/Core_JavaScript_1.5_Reference/About /ko/docs/Web/JavaScript/Reference/About /ko/docs/Core_JavaScript_1.5_Reference/About/Formatting_Conventions /ko/docs/Web/JavaScript/Reference/About @@ -173,14 +179,14 @@ /ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/NaN /ko/docs/Web/JavaScript/Reference/Global_Objects/NaN /ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/Object /ko/docs/Web/JavaScript/Reference/Global_Objects/Object /ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/String /ko/docs/Web/JavaScript/Reference/Global_Objects/String -/ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/String/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/String/prototype +/ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/String/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String /ko/docs/Core_JavaScript_1.5_Reference/Global_Properties /ko/docs/Web/JavaScript/Reference/Global_Objects /ko/docs/Core_JavaScript_1.5_Reference/Global_Properties/NaN /ko/docs/Web/JavaScript/Reference/Global_Objects/NaN /ko/docs/Core_JavaScript_1.5_Reference/LiveConnect /ko/docs/Web/JavaScript/Reference/LiveConnect /ko/docs/Core_JavaScript_1.5_Reference/Objects /ko/docs/Web/JavaScript/Reference/Global_Objects /ko/docs/Core_JavaScript_1.5_Reference/Objects/Function /ko/docs/Web/JavaScript/Reference/Global_Objects/Function /ko/docs/Core_JavaScript_1.5_Reference/Operators /ko/docs/Web/JavaScript/Reference/Operators -/ko/docs/Core_JavaScript_1.5_Reference/Operators/Bitwise_Operators /ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators +/ko/docs/Core_JavaScript_1.5_Reference/Operators/Bitwise_Operators /ko/docs/conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 /ko/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators /ko/docs/Web/JavaScript/Reference/Operators /ko/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator /ko/docs/Web/JavaScript/Reference/Operators/this /ko/docs/Core_JavaScript_1.5_Reference/Operators/this /ko/docs/Web/JavaScript/Reference/Operators/this @@ -203,6 +209,7 @@ /ko/docs/Core_JavaScript_1.5_Reference:Reserved_Words /ko/docs/Web/JavaScript/Reference/Lexical_grammar#키워드 /ko/docs/Creating_XPCOM_Components:An_Overview_of_XPCOM /ko/docs/Creating_XPCOM_Components/An_Overview_of_XPCOM /ko/docs/Creating_XPCOM_Components:Preface /ko/docs/Creating_XPCOM_Components/Preface +/ko/docs/DHTML /ko/docs/Glossary/DHTML /ko/docs/DOM /ko/docs/Web/API/Document_Object_Model /ko/docs/DOM/Notification.permission /ko/docs/Web/API/Notification/permission /ko/docs/DOM/document /ko/docs/Web/API/Document @@ -222,8 +229,8 @@ /ko/docs/DOM/element.lastChild /ko/docs/Web/API/Node/lastChild /ko/docs/DOM/element.length /ko/docs/Web/API/NodeList/length /ko/docs/DOM/element.scrollIntoView /ko/docs/Web/API/Element/scrollIntoView -/ko/docs/DOM/element.style /ko/docs/Web/API/HTMLElement/style -/ko/docs/DOM/element.tabIndex /ko/docs/Web/API/HTMLElement/tabIndex +/ko/docs/DOM/element.style /ko/docs/Web/API/ElementCSSInlineStyle/style +/ko/docs/DOM/element.tabIndex /ko/docs/Web/API/HTMLOrForeignElement/tabIndex /ko/docs/DOM/event /ko/docs/Web/API/Event /ko/docs/DOM/event.cancelable /ko/docs/Web/API/Event/cancelable /ko/docs/DOM/event.preventDefault /ko/docs/Web/API/Event/preventDefault @@ -252,8 +259,8 @@ /ko/docs/DOM:element.firstChild /ko/docs/Web/API/Node/firstChild /ko/docs/DOM:element.lastChild /ko/docs/Web/API/Node/lastChild /ko/docs/DOM:element.length /ko/docs/Web/API/NodeList/length -/ko/docs/DOM:element.style /ko/docs/Web/API/HTMLElement/style -/ko/docs/DOM:element.tabIndex /ko/docs/Web/API/HTMLElement/tabIndex +/ko/docs/DOM:element.style /ko/docs/Web/API/ElementCSSInlineStyle/style +/ko/docs/DOM:element.tabIndex /ko/docs/Web/API/HTMLOrForeignElement/tabIndex /ko/docs/DOM:event /ko/docs/Web/API/Event /ko/docs/DOM:form /ko/docs/Web/API/HTMLFormElement /ko/docs/DOM:range /ko/docs/Web/API/Range @@ -262,83 +269,113 @@ /ko/docs/DOM:table.width /ko/docs/Web/API/HTMLTableElement/width /ko/docs/DOM:window /ko/docs/Web/API/Window /ko/docs/DOM:window.navigator.registerProtocolHandler /ko/docs/Web/API/Navigator/registerProtocolHandler -/ko/docs/DOM_Inspector /ko/docs/Tools/Add-ons/DOM_Inspector +/ko/docs/DOM_Inspector /ko/docs/orphaned/Tools/Add-ons/DOM_Inspector +/ko/docs/DOM_improvements_in_Firefox_3 /ko/docs/Mozilla/Firefox/Releases/3/DOM_improvements +/ko/docs/Determining_the_dimensions_of_elements /ko/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements /ko/docs/Developer_Guide /ko/docs/Mozilla/Developer_guide /ko/docs/Developer_Guide/Source_Code /ko/docs/Mozilla/Developer_guide/Source_Code /ko/docs/Developer_guide/Eclipse /ko/docs/Mozilla/Developer_guide/Eclipse /ko/docs/Developer_guide/Eclipse/Eclipse_CDT /ko/docs/Mozilla/Developer_guide/Eclipse/Eclipse_CDT /ko/docs/Developing_Mozilla /ko/docs/Mozilla/Developer_guide -/ko/docs/Drawing_Graphics_with_Canvas /ko/docs/Web/HTML/Canvas/Tutorial +/ko/docs/Drawing_Graphics_with_Canvas /ko/docs/Web/API/Canvas_API/Tutorial +/ko/docs/Drawing_text_using_a_canvas /ko/docs/Web/API/Canvas_API/Tutorial/Drawing_text /ko/docs/ECMAScript /ko/docs/Web/JavaScript /ko/docs/EXSLT /ko/docs/Web/EXSLT /ko/docs/Eclipse /ko/docs/Mozilla/Developer_guide/Eclipse -/ko/docs/Firefox_1.5 /ko/docs/Firefox_1.5_for_developers -/ko/docs/Firefox_2 /ko/docs/Firefox_2_for_developers -/ko/docs/Firefox_3.1_for_developers /ko/docs/Firefox_3.5_for_developers +/ko/docs/Firefox_1.5 /ko/docs/Mozilla/Firefox/Releases/1.5 +/ko/docs/Firefox_1.5_for_developers /ko/docs/Mozilla/Firefox/Releases/1.5 +/ko/docs/Firefox_2 /ko/docs/Mozilla/Firefox/Releases/2 +/ko/docs/Firefox_2_for_developers /ko/docs/Mozilla/Firefox/Releases/2 +/ko/docs/Firefox_3.1_for_developers /ko/docs/Mozilla/Firefox/Releases/3.5 +/ko/docs/Firefox_3.5_for_developers /ko/docs/Mozilla/Firefox/Releases/3.5 /ko/docs/Firefox_3_for_developers /ko/docs/Mozilla/Firefox/Releases/3 /ko/docs/Focus_management_in_HTML /ko/docs/Web/API/Document/hasFocus +/ko/docs/Full_page_zoom /ko/docs/Mozilla/Firefox/Releases/3/Full_page_zoom +/ko/docs/Games/Tutorials/2D_breakout_game_Phaser/득점 /ko/docs/Games/Tutorials/2D_breakout_game_Phaser/The_score +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임 /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Collision_detection /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Finishing_up /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Mouse_controls /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Track_the_score_and_win /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기 /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball +/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기 /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it +/ko/docs/Glossary/Header /ko/docs/Glossary/HTTP_header +/ko/docs/Glossary/동적_프로그래밍_언어 /ko/docs/Glossary/Dynamic_programming_language +/ko/docs/Glossary/배열 /ko/docs/Glossary/array +/ko/docs/Glossary/불린 /ko/docs/Glossary/Boolean +/ko/docs/Glossary/브라우저-컨텍스트 /ko/docs/Glossary/Browsing_context +/ko/docs/Glossary/스코프 /ko/docs/Glossary/Scope +/ko/docs/Glossary/식별자 /ko/docs/Glossary/Identifier +/ko/docs/Glossary/전송_제어_프로토콜_(TCP) /ko/docs/Glossary/Transmission_Control_Protocol_(TCP) +/ko/docs/Glossary/캐시 /ko/docs/Glossary/Cache /ko/docs/HTML /ko/docs/Web/HTML /ko/docs/HTML/Block-level_elements /ko/docs/Web/HTML/Block-level_elements -/ko/docs/HTML/Canvas /ko/docs/Web/HTML/Canvas +/ko/docs/HTML/Canvas /ko/docs/Web/API/Canvas_API /ko/docs/HTML/Element /ko/docs/Web/HTML/Element /ko/docs/HTML/Element/Video /ko/docs/Web/HTML/Element/Video /ko/docs/HTML/Element/a /ko/docs/Web/HTML/Element/a /ko/docs/HTML/Focus_management_in_HTML /ko/docs/Web/API/Document/hasFocus -/ko/docs/HTML/HTML5 /ko/docs/Web/HTML/HTML5 +/ko/docs/HTML/HTML5 /ko/docs/Web/Guide/HTML/HTML5 /ko/docs/HTML/HTML5/HTML5_element_list /ko/docs/Web/HTML/Element -/ko/docs/HTML/HTML5/Introduction_to_HTML5 /ko/docs/Web/HTML/HTML5/Introduction_to_HTML5 -/ko/docs/HTML/HTML에서_폼 /ko/docs/Learn/HTML/Forms +/ko/docs/HTML/HTML5/Introduction_to_HTML5 /ko/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/ko/docs/HTML/HTML에서_폼 /ko/docs/Learn/Forms /ko/docs/HTML/Inline_elements /ko/docs/Web/HTML/Inline_elements /ko/docs/HTML/Introduction /ko/docs/Learn/HTML/Introduction_to_HTML /ko/docs/HTML/Using_the_application_cache /ko/docs/Web/HTML/Using_the_application_cache -/ko/docs/HTML:Canvas /ko/docs/Web/HTML/Canvas +/ko/docs/HTML:Canvas /ko/docs/Web/API/Canvas_API /ko/docs/HTML:Element /ko/docs/Web/HTML/Element /ko/docs/HTML:Element:a /ko/docs/Web/HTML/Element/a /ko/docs/HTML:Inline_elements /ko/docs/Web/HTML/Inline_elements +/ko/docs/How_to_Build_an_XPCOM_Component_in_Javascript /ko/docs/orphaned/How_to_Build_an_XPCOM_Component_in_Javascript /ko/docs/IndexedDB /ko/docs/Web/API/IndexedDB_API /ko/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB /ko/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /ko/docs/IndexedDB/Using_IndexedDB /ko/docs/Web/API/IndexedDB_API/Using_IndexedDB +/ko/docs/Introduction_to_using_XPath_in_JavaScript /ko/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript /ko/docs/JSAPI_Reference/Alphabetical_List /ko/docs/JSAPI_Reference /ko/docs/JSAPI_Reference:Alphabetical_List /ko/docs/JSAPI_Reference /ko/docs/JSCLASS_NEW_ENUMERATE /ko/docs/JSAPI_Reference/JSClass.flags /ko/docs/JavaScript /ko/docs/Web/JavaScript /ko/docs/JavaScript/Data_structures /ko/docs/Web/JavaScript/Data_structures /ko/docs/JavaScript/Guide /ko/docs/Web/JavaScript/Guide -/ko/docs/JavaScript/Guide/About /ko/docs/Web/JavaScript/Guide/소개 -/ko/docs/JavaScript/Guide/Closures /ko/docs/Web/JavaScript/Guide/Closures -/ko/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain /ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain +/ko/docs/JavaScript/Guide/About /ko/docs/Web/JavaScript/Guide/Introduction +/ko/docs/JavaScript/Guide/Closures /ko/docs/Web/JavaScript/Closures +/ko/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain /ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /ko/docs/JavaScript/Guide/Obsolete_Pages /ko/docs/Web/JavaScript/Guide /ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide /ko/docs/Web/JavaScript/Guide -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values -/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables -/ko/docs/JavaScript/Guide/Values,_variables,_and_literals /ko/docs/Web/JavaScript/Guide/Values,_variables,_and_literals -/ko/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript /ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_da1ab2546bd5e84ac81f952de51d5d40 +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_2285d0ecb7e20b6a4ac3cb462794e916 +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915 +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_337b8dbe817777e70cc8002308284a74 +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects /ko/docs/conflicting/Web/JavaScript/Guide +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3 +/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_3f037ba1fa5775d153289787ec51042f +/ko/docs/JavaScript/Guide/Values,_variables,_and_literals /ko/docs/Web/JavaScript/Guide/Grammar_and_types +/ko/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript /ko/docs/conflicting/Learn/JavaScript/Objects /ko/docs/JavaScript/Memory_Management /ko/docs/Web/JavaScript/Memory_Management /ko/docs/JavaScript/New_in_JavaScript /ko/docs/Web/JavaScript/New_in_JavaScript /ko/docs/JavaScript/New_in_JavaScript/New_in_JavaScript_1.8 /ko/docs/Web/JavaScript/New_in_JavaScript/1.8 @@ -357,25 +394,34 @@ /ko/docs/JavaScript/Reference/Global_Objects/NaN /ko/docs/Web/JavaScript/Reference/Global_Objects/NaN /ko/docs/JavaScript/Reference/Global_Objects/Object /ko/docs/Web/JavaScript/Reference/Global_Objects/Object /ko/docs/JavaScript/Reference/Global_Objects/String /ko/docs/Web/JavaScript/Reference/Global_Objects/String -/ko/docs/JavaScript/Reference/Global_Objects/String/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/String/prototype +/ko/docs/JavaScript/Reference/Global_Objects/String/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String /ko/docs/JavaScript/Reference/Global_Properties /ko/docs/Web/JavaScript/Reference/Global_Objects /ko/docs/JavaScript/Reference/LiveConnect /ko/docs/Web/JavaScript/Reference/LiveConnect /ko/docs/JavaScript/Reference/Objects /ko/docs/Web/JavaScript/Reference/Global_Objects /ko/docs/JavaScript/Reference/Objects/Function /ko/docs/Web/JavaScript/Reference/Global_Objects/Function /ko/docs/JavaScript/Reference/Operators /ko/docs/Web/JavaScript/Reference/Operators -/ko/docs/JavaScript/Reference/Operators/Bitwise_Operators /ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators +/ko/docs/JavaScript/Reference/Operators/Bitwise_Operators /ko/docs/conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 /ko/docs/JavaScript/Reference/Operators/Special_Operators /ko/docs/Web/JavaScript/Reference/Operators /ko/docs/JavaScript/Reference/Operators/this /ko/docs/Web/JavaScript/Reference/Operators/this /ko/docs/JavaScript/Reference/Operators/void /ko/docs/Web/JavaScript/Reference/Operators/void /ko/docs/JavaScript/Reference/Reserved_Words /ko/docs/Web/JavaScript/Reference/Lexical_grammar#키워드 /ko/docs/JavaScript/Reference/Statements /ko/docs/Web/JavaScript/Reference/Statements /ko/docs/JavaScript/Reference/Statements/for...in /ko/docs/Web/JavaScript/Reference/Statements/for...in -/ko/docs/JavaScript/시작하기 /ko/docs/Web/JavaScript/시작하기 -/ko/docs/JavaScript/언어_리소스 /ko/docs/Web/JavaScript/언어_리소스 +/ko/docs/JavaScript/시작하기 /ko/docs/conflicting/Learn/Getting_started_with_the_web/JavaScript_basics +/ko/docs/JavaScript/언어_리소스 /ko/docs/Web/JavaScript/Language_Resources +/ko/docs/JavaScript_C_Engine_Embedder's_Guide /ko/docs/orphaned/JavaScript_C_Engine_Embedder's_Guide /ko/docs/JavaScript_modules /ko/docs/Web/JavaScript/Guide/Modules /ko/docs/JavaScript_technologies_overview /ko/docs/Web/JavaScript/JavaScript_technologies_overview /ko/docs/JavaScript_technologies_overview-redirect-1 /ko/docs/Web/JavaScript/JavaScript_technologies_overview /ko/docs/Learn/CSS/Basics /en-US/docs/Learn/CSS/First_steps +/ko/docs/Learn/CSS/Basics/Layout /ko/docs/conflicting/Learn/CSS/CSS_layout/Introduction +/ko/docs/Learn/CSS/Building_blocks/상자_모델 /ko/docs/Learn/CSS/Building_blocks/The_box_model +/ko/docs/Learn/CSS/Building_blocks/선택자 /ko/docs/Learn/CSS/Building_blocks/Selectors +/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서 /ko/docs/Learn/CSS/CSS_layout/Media_queries +/ko/docs/Learn/CSS/CSS_layout/반응형_디자인 /ko/docs/Learn/CSS/CSS_layout/Responsive_Design +/ko/docs/Learn/CSS/CSS_layout/위치잡기 /ko/docs/Learn/CSS/CSS_layout/Positioning +/ko/docs/Learn/CSS/CSS_layout/이전_브라우저_지원 /ko/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers +/ko/docs/Learn/CSS/CSS_layout/일반_흐름 /ko/docs/Learn/CSS/CSS_layout/Normal_Flow /ko/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps /ko/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors /ko/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance @@ -385,11 +431,34 @@ /ko/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors /ko/docs/Learn/CSS/Introduction_to_CSS/Syntax /en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured /ko/docs/Learn/CSS/Introduction_to_CSS/Values_and_units /en-US/docs/Learn/CSS/Building_blocks/Values_and_units +/ko/docs/Learn/CSS/Introduction_to_CSS/기본적인_CSS_이해 /ko/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension /ko/docs/Learn/CSS/Introduction_to_CSS/선택자 /en-US/docs/Learn/CSS/Building_blocks/Selectors /ko/docs/Learn/CSS/Styling_boxes /en-US/docs/Learn/CSS/Building_blocks /ko/docs/Learn/CSS/Styling_boxes/Backgrounds /en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders +/ko/docs/Learn/Common_questions/웹_사이트가_제대로_동작하는지_확인 /ko/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly +/ko/docs/Learn/Common_questions/코딩하기_전에_생각하기 /ko/docs/Learn/Common_questions/Thinking_before_coding +/ko/docs/Learn/Getting_started_with_the_web/CSS_기본 /ko/docs/Learn/Getting_started_with_the_web/CSS_basics +/ko/docs/Learn/Getting_started_with_the_web/HTML_기본 /ko/docs/Learn/Getting_started_with_the_web/HTML_basics +/ko/docs/Learn/Getting_started_with_the_web/기본_소프트웨어_설치하기 /ko/docs/Learn/Getting_started_with_the_web/Installing_basic_software +/ko/docs/Learn/Getting_started_with_the_web/웹사이트_출판하기 /ko/docs/Learn/Getting_started_with_the_web/Publishing_your_website +/ko/docs/Learn/Getting_started_with_the_web/웹의_동작_방식 /ko/docs/Learn/Getting_started_with_the_web/How_the_Web_works +/ko/docs/Learn/Getting_started_with_the_web/파일들_다루기 /ko/docs/Learn/Getting_started_with_the_web/Dealing_with_files /ko/docs/Learn/GitHub /ko/docs/Learn/Tools_and_testing/GitHub -/ko/docs/Learn/HTML/Forms/My_first_HTML_form /ko/docs/Learn/HTML/Forms/Your_first_HTML_form +/ko/docs/Learn/HTML/Forms /ko/docs/Learn/Forms +/ko/docs/Learn/HTML/Forms/HTML_폼_구성_방법 /ko/docs/Learn/Forms/How_to_structure_a_web_form +/ko/docs/Learn/HTML/Forms/My_first_HTML_form /ko/docs/Learn/Forms/Your_first_form +/ko/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data /ko/docs/Learn/Forms/Sending_and_retrieving_form_data +/ko/docs/Learn/HTML/Forms/Your_first_HTML_form /ko/docs/Learn/Forms/Your_first_form +/ko/docs/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable /ko/docs/conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +/ko/docs/Learn/HTML/Howto/데이터_속성_사용하기 /ko/docs/Learn/HTML/Howto/Use_data_attributes +/ko/docs/Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content /ko/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +/ko/docs/Learn/How_to_contribute /ko/docs/orphaned/Learn/How_to_contribute +/ko/docs/Learn/Infrastructure /ko/docs/conflicting/Learn/Common_questions +/ko/docs/Learn/JavaScript/Building_blocks/조건문 /ko/docs/Learn/JavaScript/Building_blocks/conditionals +/ko/docs/Learn/JavaScript/Objects/얼마나_이해했는지_확인해보자:_JSON /ko/docs/Learn/JavaScript/Objects/Test_your_skills:_JSON +/ko/docs/Learn/Server-side/Express_Nodejs/개발_환경 /ko/docs/Learn/Server-side/Express_Nodejs/development_environment +/ko/docs/Learn/Server-side/Express_Nodejs/스켈레톤_웹사이트 /ko/docs/Learn/Server-side/Express_Nodejs/skeleton_website +/ko/docs/Learn/Skills /ko/docs/conflicting/Learn /ko/docs/Learn/WebGL/By_example /ko/docs/Web/API/WebGL_API/By_example /ko/docs/Learn/WebGL/By_example/Clearing_by_clicking /ko/docs/Web/API/WebGL_API/By_example/Clearing_by_clicking /ko/docs/Learn/WebGL/By_example/Detect_WebGL /ko/docs/Web/API/WebGL_API/By_example/Detect_WebGL @@ -398,29 +467,64 @@ /ko/docs/Learn/WebGL/By_example/Scissor_animation /ko/docs/Web/API/WebGL_API/By_example/Scissor_animation /ko/docs/Learn/WebGL/By_example/Simple_color_animation /ko/docs/Web/API/WebGL_API/By_example/Simple_color_animation /ko/docs/Learn/WebGL/By_example/Textures_from_code /ko/docs/Web/API/WebGL_API/By_example/Textures_from_code +/ko/docs/Learn/Web_기술 /ko/docs/conflicting/Learn/Common_questions_139278709439023a85d849385412271e +/ko/docs/Learn/접근성 /ko/docs/Learn/Accessibility +/ko/docs/Learn/접근성/HTML /ko/docs/Learn/Accessibility/HTML +/ko/docs/Learn/접근성/What_is_accessibility /ko/docs/Learn/Accessibility/What_is_accessibility +/ko/docs/Learn/접근성/모바일 /ko/docs/Learn/Accessibility/Mobile +/ko/docs/Localization /ko/docs/Glossary/Localization +/ko/docs/MDN/About/MDN_services /ko/docs/orphaned/MDN/About/MDN_services +/ko/docs/MDN/Community /ko/docs/orphaned/MDN/Community +/ko/docs/MDN/Community/Conversations /ko/docs/orphaned/MDN/Community/Conversations +/ko/docs/MDN/Community/Working_in_community /ko/docs/orphaned/MDN/Community/Working_in_community /ko/docs/MDN/Contribute/Content /ko/docs/MDN/Guidelines -/ko/docs/MDN/Contribute/Content/Best_practices /ko/docs/MDN/Guidelines/Best_practices -/ko/docs/MDN/Contribute/Content/Style_guide /ko/docs/MDN/Guidelines/Style_guide -/ko/docs/MDN/Contribute/Editor /ko/docs/MDN/Editor -/ko/docs/MDN/Contribute/Editor/Links /ko/docs/MDN/Editor/Links +/ko/docs/MDN/Contribute/Content/Best_practices /ko/docs/MDN/Guidelines/Conventions_definitions +/ko/docs/MDN/Contribute/Content/Style_guide /ko/docs/MDN/Guidelines/Writing_style_guide +/ko/docs/MDN/Contribute/Creating_and_editing_pages /ko/docs/MDN/Contribute/Howto/Create_and_edit_pages +/ko/docs/MDN/Contribute/Does_this_belong /ko/docs/MDN/Guidelines/Does_this_belong_on_MDN +/ko/docs/MDN/Contribute/Editor /ko/docs/orphaned/MDN/Editor +/ko/docs/MDN/Contribute/Editor/Links /ko/docs/orphaned/MDN/Editor/Links /ko/docs/MDN/Contribute/Guidelines/Code_guidelines /ko/docs/MDN/Guidelines/Code_guidelines /ko/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS /ko/docs/MDN/Guidelines/Code_guidelines/CSS -/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/Code_guidelines /ko/docs/MDN/Guidelines/Code_guidelines/Code_guidelines +/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/Code_guidelines /ko/docs/MDN/Guidelines/Code_guidelines/General +/ko/docs/MDN/Contribute/Howto/Do_a_technical_review /ko/docs/orphaned/MDN/Contribute/Howto/Do_a_technical_review +/ko/docs/MDN/Contribute/Howto/Do_an_editorial_review /ko/docs/orphaned/MDN/Contribute/Howto/Do_an_editorial_review +/ko/docs/MDN/Contribute/Howto/MDN_계정_생성하기 /ko/docs/orphaned/MDN/Contribute/Howto/Create_an_MDN_account +/ko/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page /ko/docs/orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page +/ko/docs/MDN/Contribute/Howto/Tag_JavaScript_pages /ko/docs/orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages +/ko/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web /ko/docs/orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +/ko/docs/MDN/Contribute/Howto/살아있는_코드_샘플로_변환하기 /ko/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live /ko/docs/MDN/Contribute/Structures /ko/docs/MDN/Structures -/ko/docs/MDN/Contribute/Structures/API_references /ko/docs/MDN/Structures/API_references -/ko/docs/MDN/Contribute/Structures/API_references/API_reference_sidebars /ko/docs/MDN/Structures/API_references/API_reference_sidebars +/ko/docs/MDN/Contribute/Structures/API_references /ko/docs/orphaned/MDN/Structures/API_references +/ko/docs/MDN/Contribute/Structures/API_references/API_reference_sidebars /ko/docs/MDN/Contribute/Howto/Write_an_API_reference/Sidebars /ko/docs/MDN/Contribute/Structures/Compatibility_tables /ko/docs/MDN/Structures/Compatibility_tables /ko/docs/MDN/Contribute/Structures/Macros /ko/docs/MDN/Structures/Macros /ko/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros /ko/docs/MDN/Structures/Macros/Commonly-used_macros /ko/docs/MDN/Contribute/Tools /ko/docs/MDN/Tools /ko/docs/MDN/Contribute/Tools/KumaScript /ko/docs/MDN/Tools/KumaScript /ko/docs/MDN/Contribute/Tools/KumaScript/Troubleshooting /ko/docs/MDN/Tools/KumaScript/Troubleshooting -/ko/docs/MDN/Contribute/Tools/페이지_재생성 /ko/docs/MDN/Tools/페이지_재생성 +/ko/docs/MDN/Contribute/Tools/페이지_재생성 /ko/docs/orphaned/MDN/Tools/Page_regeneration +/ko/docs/MDN/Editor /ko/docs/orphaned/MDN/Editor +/ko/docs/MDN/Editor/Links /ko/docs/orphaned/MDN/Editor/Links /ko/docs/MDN/Getting_started /ko/docs/MDN/Contribute/Getting_started -/ko/docs/MDN/커뮤니티 /ko/docs/MDN/Community -/ko/docs/MDN/커뮤니티/Conversations /ko/docs/MDN/Community/Conversations +/ko/docs/MDN/Guidelines/Best_practices /ko/docs/MDN/Guidelines/Conventions_definitions +/ko/docs/MDN/Guidelines/Code_guidelines/Code_guidelines /ko/docs/MDN/Guidelines/Code_guidelines/General +/ko/docs/MDN/Guidelines/Style_guide /ko/docs/MDN/Guidelines/Writing_style_guide +/ko/docs/MDN/Kuma /ko/docs/MDN/Yari +/ko/docs/MDN/Structures/API_references /ko/docs/orphaned/MDN/Structures/API_references +/ko/docs/MDN/Structures/API_references/API_reference_sidebars /ko/docs/MDN/Contribute/Howto/Write_an_API_reference/Sidebars +/ko/docs/MDN/Tools/페이지_재생성 /ko/docs/orphaned/MDN/Tools/Page_regeneration +/ko/docs/MDN/User_guide /ko/docs/conflicting/MDN/Tools +/ko/docs/MDN/커뮤니티 /ko/docs/orphaned/MDN/Community +/ko/docs/MDN/커뮤니티/Conversations /ko/docs/orphaned/MDN/Community/Conversations /ko/docs/MDN/피드백 /ko/docs/MDN/Contribute/Feedback +/ko/docs/MDN_at_ten /ko/docs/MDN/At_ten /ko/docs/MathML /ko/docs/Web/MathML +/ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus /ko/docs/Mozilla/Add-ons/WebExtensions/API/menus +/ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/ContextType /ko/docs/Mozilla/Add-ons/WebExtensions/API/menus/ContextType +/ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/create /ko/docs/Mozilla/Add-ons/WebExtensions/API/menus/create +/ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/getTargetElement /ko/docs/Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement +/ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/onShown /ko/docs/Mozilla/Add-ons/WebExtensions/API/menus/onShown /ko/docs/Mozilla/애드온들 /ko/docs/Mozilla/Add-ons /ko/docs/Mozilla/애드온들/AMO/Policy/Featured https://extensionworkshop.com/documentation/publish/recommended-extensions/ /ko/docs/Mozilla/애드온들/Listing https://extensionworkshop.com/documentation/develop/create-an-appealing-listing/ @@ -428,11 +532,11 @@ /ko/docs/Mozilla/애드온들/WebExtensions/API /ko/docs/Mozilla/Add-ons/WebExtensions/API /ko/docs/Mozilla/애드온들/WebExtensions/API/browsingData /ko/docs/Mozilla/Add-ons/WebExtensions/API/browsingData /ko/docs/Mozilla/애드온들/WebExtensions/API/contentScripts /ko/docs/Mozilla/Add-ons/WebExtensions/API/contentScripts -/ko/docs/Mozilla/애드온들/WebExtensions/API/contextMenus /ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus -/ko/docs/Mozilla/애드온들/WebExtensions/API/contextMenus/ContextType /ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/ContextType -/ko/docs/Mozilla/애드온들/WebExtensions/API/contextMenus/create /ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/create -/ko/docs/Mozilla/애드온들/WebExtensions/API/contextMenus/getTargetElement /ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/getTargetElement -/ko/docs/Mozilla/애드온들/WebExtensions/API/contextMenus/onShown /ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/onShown +/ko/docs/Mozilla/애드온들/WebExtensions/API/contextMenus /ko/docs/Mozilla/Add-ons/WebExtensions/API/menus +/ko/docs/Mozilla/애드온들/WebExtensions/API/contextMenus/ContextType /ko/docs/Mozilla/Add-ons/WebExtensions/API/menus/ContextType +/ko/docs/Mozilla/애드온들/WebExtensions/API/contextMenus/create /ko/docs/Mozilla/Add-ons/WebExtensions/API/menus/create +/ko/docs/Mozilla/애드온들/WebExtensions/API/contextMenus/getTargetElement /ko/docs/Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement +/ko/docs/Mozilla/애드온들/WebExtensions/API/contextMenus/onShown /ko/docs/Mozilla/Add-ons/WebExtensions/API/menus/onShown /ko/docs/Mozilla/애드온들/WebExtensions/API/pageAction /ko/docs/Mozilla/Add-ons/WebExtensions/API/pageAction /ko/docs/Mozilla/애드온들/WebExtensions/API/pageAction/show /ko/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/show /ko/docs/Mozilla/애드온들/WebExtensions/API/storage /ko/docs/Mozilla/Add-ons/WebExtensions/API/storage @@ -464,109 +568,167 @@ /ko/docs/Mozilla/애드온들/WebExtensions/user_interface/Page_actions /ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions /ko/docs/Mozilla_Build_FAQ /ko/docs/Mozilla/Developer_guide/Mozilla_Build_FAQ /ko/docs/Mozilla_Quirks_Mode_Behavior /ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode +/ko/docs/Mozilla_Source_Code_Via_CVS /ko/docs/Mozilla/Developer_guide/Source_Code/CVS +/ko/docs/Navigation_timing /ko/docs/Web/API/Navigation_timing_API /ko/docs/New_in_JavaScript_1.6 /ko/docs/Web/JavaScript/New_in_JavaScript/1.6 /ko/docs/New_in_JavaScript_1.8 /ko/docs/Web/JavaScript/New_in_JavaScript/1.8 +/ko/docs/Node_server_without_framework /ko/docs/Learn/Server-side/Node_server_without_framework +/ko/docs/Notable_bugs_fixed_in_Firefox_3 /ko/docs/Mozilla/Firefox/Releases/3/Notable_bugs_fixed /ko/docs/Online_and_offline_events /ko/docs/Web/API/NavigatorOnLine/Online_and_offline_events +/ko/docs/Places/Custom_Containers /ko/docs/orphaned/Places/Custom_Containers +/ko/docs/Places/Instantiating_Views /ko/docs/orphaned/Places/Instantiating_Views +/ko/docs/Places/Query_System /ko/docs/orphaned/Places/Query_System +/ko/docs/Places/Views /ko/docs/orphaned/Places/Views /ko/docs/Places:Accessing_Bookmarks /ko/docs/Places/Accessing_Bookmarks -/ko/docs/Places:Custom_Containers /ko/docs/Places/Custom_Containers -/ko/docs/Places:Instantiating_Views /ko/docs/Places/Instantiating_Views -/ko/docs/Places:Query_System /ko/docs/Places/Query_System -/ko/docs/Places:Views /ko/docs/Places/Views +/ko/docs/Places:Custom_Containers /ko/docs/orphaned/Places/Custom_Containers +/ko/docs/Places:Instantiating_Views /ko/docs/orphaned/Places/Instantiating_Views +/ko/docs/Places:Query_System /ko/docs/orphaned/Places/Query_System +/ko/docs/Places:Views /ko/docs/orphaned/Places/Views /ko/docs/SVG /ko/docs/Web/SVG /ko/docs/SVG/Tutorial /ko/docs/Web/SVG/Tutorial /ko/docs/SVG:Tutorial /ko/docs/Web/SVG/Tutorial /ko/docs/SVG_In_HTML_Introduction /ko/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction +/ko/docs/SVG_improvements_in_Firefox_3 /ko/docs/Mozilla/Firefox/Releases/3/SVG_improvements +/ko/docs/SVG_in_Firefox /ko/docs/Web/SVG/SVG_1.1_Support_in_Firefox +/ko/docs/Scripting_Plugins /ko/docs/Plugins/Guide/Scripting_plugins /ko/docs/Setting_HTTP_request_headers /ko/docs/XPCOM/Setting_HTTP_request_headers +/ko/docs/The_DOM_and_JavaScript /ko/docs/conflicting/Web/JavaScript/JavaScript_technologies_overview /ko/docs/The_Importance_of_Correct_HTML_Commenting /ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started#HTML_comments /ko/docs/The_Thread_Manager /ko/docs/XPCOM/The_Thread_Manager -/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko /ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko -/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko/Introduction /ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Introduction -/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters /ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters -/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko:Introduction /ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Introduction -/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko:Setting_Parameters /ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters -/ko/docs/Tools/Debugger/How_to /ko/docs/Tools/How_to -/ko/docs/Tools/Debugger/How_to/Open_the_debugger /ko/docs/Tools/How_to/Open_the_debugger -/ko/docs/Tools/Debugger/How_to/Search /ko/docs/Tools/How_to/Search -/ko/docs/Tools/Debugger/How_to/Set_a_breakpoint /ko/docs/Tools/How_to/Set_a_breakpoint +/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko /ko/docs/Web/XSLT/XSLT_JS_interface_in_Gecko +/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko/Introduction /ko/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Introduction +/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters /ko/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Setting_Parameters +/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko:Introduction /ko/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Introduction +/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko:Setting_Parameters /ko/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Setting_Parameters +/ko/docs/Theme_Packaging /ko/docs/orphaned/Theme_Packaging +/ko/docs/Tips_for_Authoring_Fast-loading_HTML_Pages /ko/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages +/ko/docs/Tools/Add-ons /ko/docs/orphaned/Tools/Add-ons +/ko/docs/Tools/Add-ons/DOM_Inspector /ko/docs/orphaned/Tools/Add-ons/DOM_Inspector +/ko/docs/Tools/Debugger/단축키 /ko/docs/Tools/Debugger/Keyboard_shortcuts +/ko/docs/Tools/How_to /ko/docs/Tools/Debugger/How_to +/ko/docs/Tools/How_to/Open_the_debugger /ko/docs/Tools/Debugger/How_to/Open_the_debugger +/ko/docs/Tools/How_to/Search /ko/docs/Tools/Debugger/How_to/Search +/ko/docs/Tools/How_to/Set_a_breakpoint /ko/docs/Tools/Debugger/How_to/Set_a_breakpoint /ko/docs/Transforming_XML_with_XSLT /ko/docs/Web/XSLT/Transforming_XML_with_XSLT /ko/docs/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference /ko/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference /ko/docs/Transforming_XML_with_XSLT:The_Netscape_XSLT_XPath_Reference /ko/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference +/ko/docs/Updating_extensions_for_Firefox_2 /ko/docs/Mozilla/Firefox/Releases/2/Updating_extensions +/ko/docs/Updating_extensions_for_Firefox_3 /ko/docs/Mozilla/Firefox/Releases/3/Updating_extensions +/ko/docs/Updating_web_applications_for_Firefox_3 /ko/docs/Mozilla/Firefox/Releases/3/Updating_web_applications /ko/docs/Using_JSON_in_Firefox /ko/docs/Web/JavaScript/Reference/Global_Objects/JSON -/ko/docs/Using_URL_values_for_the_cursor_property /ko/docs/Web/CSS/cursor/Using_URL_values_for_the_cursor_property -/ko/docs/Using_URL_values_for_the_cursor_property-redirect-1 /ko/docs/Web/CSS/cursor/Using_URL_values_for_the_cursor_property +/ko/docs/Using_Mozilla_in_Testing_and_Debugging_Web_Sites /ko/docs/orphaned/Using_Mozilla_in_Testing_and_Debugging_Web_Sites +/ko/docs/Using_URL_values_for_the_cursor_property /ko/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +/ko/docs/Using_URL_values_for_the_cursor_property-redirect-1 /ko/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +/ko/docs/Using_XPath /ko/docs/conflicting/Web/XPath/Introduction_to_using_XPath_in_JavaScript /ko/docs/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations /ko/docs/Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations /ko/docs/Web/API/Boolean /ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean -/ko/docs/Web/API/Canvas_API/캔버스_튜토리얼 /ko/docs/Web/HTML/Canvas/Tutorial +/ko/docs/Web/API/Canvas_API/캔버스_튜토리얼 /ko/docs/Web/API/Canvas_API/Tutorial /ko/docs/Web/API/Document/activeElement /ko/docs/Web/API/DocumentOrShadowRoot/activeElement /ko/docs/Web/API/Document/defaultView/popstate_event /ko/docs/Web/API/Window/popstate_event /ko/docs/Web/API/Document/defaultView/resize_event /ko/docs/Web/API/Window/resize_event /ko/docs/Web/API/Document/drag_이벤트 /ko/docs/Web/API/Document/drag_event -/ko/docs/Web/API/Document_Object_Model/Introduction /ko/docs/Web/API/Document_Object_Model/소개 +/ko/docs/Web/API/Document/getSelection /ko/docs/Web/API/DocumentOrShadowRoot/getSelection /ko/docs/Web/API/Document_Object_Model/Preface /ko/docs/Web/API/Document_Object_Model +/ko/docs/Web/API/Document_Object_Model/소개 /ko/docs/Web/API/Document_Object_Model/Introduction /ko/docs/Web/API/Document_Object_Model/예제 /ko/docs/Web/API/Document_Object_Model/Examples /ko/docs/Web/API/Element.clientHeight /ko/docs/Web/API/Element/clientHeight /ko/docs/Web/API/Element.getAttribute /ko/docs/Web/API/Element/getAttribute +/ko/docs/Web/API/Element/accessKey /ko/docs/Web/API/HTMLElement/accessKey /ko/docs/Web/API/Element/childNodes /ko/docs/Web/API/Node/childNodes /ko/docs/Web/API/Element/firstChild /ko/docs/Web/API/Node/firstChild +/ko/docs/Web/API/Event/createEvent /ko/docs/Web/API/Document/createEvent +/ko/docs/Web/API/Fetch_API/Fetch의_사용법 /ko/docs/Web/API/Fetch_API/Using_Fetch /ko/docs/Web/API/FileReader.result /ko/docs/Web/API/FileReader/result +/ko/docs/Web/API/HTMLElement/dataset /ko/docs/Web/API/HTMLOrForeignElement/dataset +/ko/docs/Web/API/HTMLElement/style /ko/docs/Web/API/ElementCSSInlineStyle/style +/ko/docs/Web/API/HTMLElement/tabIndex /ko/docs/Web/API/HTMLOrForeignElement/tabIndex +/ko/docs/Web/API/HTML_드래그_앤_드롭_API /ko/docs/Web/API/HTML_Drag_and_Drop_API +/ko/docs/Web/API/HTML_드래그_앤_드롭_API/Drag_operations /ko/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations /ko/docs/Web/API/Navigator.battery /ko/docs/Web/API/Navigator/battery /ko/docs/Web/API/Navigator.battery/window.navigator.battery /ko/docs/Web/API/Navigator/battery -/ko/docs/Web/API/Navigator.connection/window.navigator.connection /ko/docs/Web/API/NetworkInformation/connection -/ko/docs/Web/API/NetworkInformation.connection /ko/docs/Web/API/NetworkInformation/connection -/ko/docs/Web/API/NetworkInformation.connection/window.navigator.connection /ko/docs/Web/API/NetworkInformation/connection +/ko/docs/Web/API/Navigator.connection/window.navigator.connection /ko/docs/Web/API/Navigator/connection +/ko/docs/Web/API/NetworkInformation.connection /ko/docs/Web/API/Navigator/connection +/ko/docs/Web/API/NetworkInformation.connection/window.navigator.connection /ko/docs/Web/API/Navigator/connection +/ko/docs/Web/API/NetworkInformation/connection /ko/docs/Web/API/Navigator/connection +/ko/docs/Web/API/Node/innerText /ko/docs/Web/API/HTMLElement/innerText /ko/docs/Web/API/Notification.permission /ko/docs/Web/API/Notification/permission /ko/docs/Web/API/Position /ko/docs/Web/API/GeolocationPosition /ko/docs/Web/API/RandomSource /ko/docs/Web/API/Crypto/getRandomValues /ko/docs/Web/API/RandomSource/getRandomValues /ko/docs/Web/API/Crypto/getRandomValues /ko/docs/Web/API/Screen.lockOrientation /ko/docs/Web/API/Screen/lockOrientation /ko/docs/Web/API/Screen.lockOrientation/window.screen.lockOrientation /ko/docs/Web/API/Screen/lockOrientation -/ko/docs/Web/API/Screen.onorientationchange/window.screen.onorientationchange /ko/docs/Web/API/Screen.onorientationchange +/ko/docs/Web/API/Screen.onorientationchange /ko/docs/Web/API/Screen/onorientationchange +/ko/docs/Web/API/Screen.onorientationchange/window.screen.onorientationchange /ko/docs/Web/API/Screen/onorientationchange /ko/docs/Web/API/Screen.orientation /ko/docs/Web/API/Screen/orientation /ko/docs/Web/API/Screen.orientation/window.screen.orientation /ko/docs/Web/API/Screen/orientation +/ko/docs/Web/API/Streams_API/컨셉 /ko/docs/Web/API/Streams_API/Concepts /ko/docs/Web/API/WebGL_API/Adding_2D_content_to_a_WebGL_context /ko/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context /ko/docs/Web/API/WebGL_API/Animating_objects_with_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL /ko/docs/Web/API/WebGL_API/Animating_textures_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL /ko/docs/Web/API/WebGL_API/Creating_3D_objects_using_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL +/ko/docs/Web/API/WebGL_API/Cross-Domain_Textures /ko/docs/conflicting/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL /ko/docs/Web/API/WebGL_API/Getting_started_with_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL /ko/docs/Web/API/WebGL_API/Lighting_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL /ko/docs/Web/API/WebGL_API/Using_shaders_to_apply_color_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL /ko/docs/Web/API/WebGL_API/Using_textures_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL +/ko/docs/Web/API/Web_Workers_API/basic_usage /ko/docs/Web/API/Web_Workers_API/Using_web_workers +/ko/docs/Web/API/WindowTimers/setTimeout /ko/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout +/ko/docs/Web/API/XMLHttpRequest/timeout /ko/docs/Web/API/XMLHttpRequest/timeout_event /ko/docs/Web/API/document.importNode /ko/docs/Web/API/Document/importNode /ko/docs/Web/API/element-temp /ko/docs/Web/API/Element /ko/docs/Web/API/window.navigator.battery /ko/docs/Web/API/Navigator/battery -/ko/docs/Web/API/window.navigator.connection /ko/docs/Web/API/NetworkInformation/connection +/ko/docs/Web/API/window.navigator.connection /ko/docs/Web/API/Navigator/connection /ko/docs/Web/API/window.navigator.mozMobileMessage /ko/docs/Web/API/Navigator/mozMobileMessage /ko/docs/Web/API/window.navigator.mozNotification /ko/docs/Web/API/Navigator/mozNotification /ko/docs/Web/API/window.navigator.mozSms /ko/docs/Web/API/Navigator/mozSms /ko/docs/Web/API/window.screen.lockOrientation /ko/docs/Web/API/Screen/lockOrientation -/ko/docs/Web/API/window.screen.onorientationchange /ko/docs/Web/API/Screen.onorientationchange +/ko/docs/Web/API/window.screen.onorientationchange /ko/docs/Web/API/Screen/onorientationchange /ko/docs/Web/API/window.screen.orientation /ko/docs/Web/API/Screen/orientation /ko/docs/Web/API/window.screen.unlockOrientation /ko/docs/Web/API/Screen/unlockOrientation +/ko/docs/Web/CSS/@viewport/height /ko/docs/conflicting/Web/CSS/@viewport +/ko/docs/Web/CSS/@viewport/viewport-fit /ko/docs/conflicting/Web/CSS/@viewport_a33ee59ffd8336ffb3336900dea02e9f +/ko/docs/Web/CSS/@viewport/zoom /ko/docs/conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518 +/ko/docs/Web/CSS/All_About_The_Containing_Block /ko/docs/Web/CSS/Containing_block /ko/docs/Web/CSS/CSS_Background_and_Borders /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders +/ko/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds /ko/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images /ko/docs/Web/CSS/CSS_Colors /ko/docs/Web/CSS/CSS_Color +/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox의_기본_개념 /ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/가변상자의_대표적인_사용례 /ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +/ko/docs/Web/CSS/CSS_Flow_Layout/대열과_탈대열 /ko/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow +/ko/docs/Web/CSS/CSS_Flow_Layout/일반_흐름_속_블록_및_인라인_레이아웃 /ko/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow +/ko/docs/Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_쓰기_모드 /ko/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes +/ko/docs/Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_오버플로 /ko/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow /ko/docs/Web/CSS/CSS_Grid_Layout/CSS_그리드의_라인을_기준으로_한_아이템_배치 /ko/docs/Web/CSS/CSS_Grid_Layout/Line-based_placement_with_CSS_grid /ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계 /ko/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_grid_layout /ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념 /ko/docs/Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout /ko/docs/Web/CSS/CSS_Grid_Layout/그리드_템플릿_영역 /ko/docs/Web/CSS/CSS_Grid_Layout/Grid_template_areas /ko/docs/Web/CSS/CSS_Grid_Layout/이름이_주어진_그리드_라인을_이용한_레이아웃 /ko/docs/Web/CSS/CSS_Grid_Layout/Layout_using_named_grid_lines +/ko/docs/Web/CSS/CSS_Masks /ko/docs/Web/CSS/CSS_Masking /ko/docs/Web/CSS/CSS_Reference /ko/docs/Web/CSS/Reference -/ko/docs/Web/CSS/CSS_Reference/Property_Template /ko/docs/Web/CSS/Reference/Property_Template +/ko/docs/Web/CSS/CSS_Reference/Property_Template /ko/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template /ko/docs/Web/CSS/CSS_User_Interface /ko/docs/Web/CSS/CSS_Basic_User_Interface +/ko/docs/Web/CSS/CSS_단위와_값 /ko/docs/Web/CSS/CSS_Values_and_Units +/ko/docs/Web/CSS/Common_CSS_Questions /ko/docs/Learn/CSS/Howto/CSS_FAQ /ko/docs/Web/CSS/Getting_Started /en-US/docs/Learn/CSS/First_steps -/ko/docs/Web/CSS/Getting_Started/Boxes /ko/docs/Web/CSS/시작하기/상자 -/ko/docs/Web/CSS/Getting_Started/Cascading_and_inheritance /ko/docs/Web/CSS/시작하기/종속과_상속 +/ko/docs/Web/CSS/Getting_Started/Boxes /ko/docs/conflicting/Learn/CSS/Building_blocks +/ko/docs/Web/CSS/Getting_Started/Cascading_and_inheritance /ko/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance /ko/docs/Web/CSS/Getting_Started/Color /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /ko/docs/Web/CSS/Getting_Started/Content /ko/docs/Learn/CSS/Howto/Generated_content /ko/docs/Web/CSS/Getting_Started/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ko/docs/Web/CSS/Getting_Started/Layout /ko/docs/Web/CSS/시작하기/배치 -/ko/docs/Web/CSS/Getting_Started/Lists /ko/docs/Web/CSS/시작하기/리스트 -/ko/docs/Web/CSS/Getting_Started/Media /ko/docs/Web/CSS/시작하기/미디어 +/ko/docs/Web/CSS/Getting_Started/JavaScript /ko/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +/ko/docs/Web/CSS/Getting_Started/Layout /ko/docs/conflicting/Learn/CSS/CSS_layout +/ko/docs/Web/CSS/Getting_Started/Lists /ko/docs/conflicting/Learn/CSS/Styling_text/Styling_lists +/ko/docs/Web/CSS/Getting_Started/Media /ko/docs/Web/Progressive_web_apps/Responsive/Media_types +/ko/docs/Web/CSS/Getting_Started/SVG_graphics /ko/docs/Web/SVG/Tutorial/SVG_and_CSS /ko/docs/Web/CSS/Getting_Started/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors -/ko/docs/Web/CSS/Getting_Started/Tables /ko/docs/Web/CSS/시작하기/테이블 -/ko/docs/Web/CSS/Getting_Started/Text_styles /ko/docs/Web/CSS/시작하기/텍스트_스타일 +/ko/docs/Web/CSS/Getting_Started/Tables /ko/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables +/ko/docs/Web/CSS/Getting_Started/Text_styles /ko/docs/conflicting/Learn/CSS/Styling_text/Fundamentals /ko/docs/Web/CSS/Getting_Started/What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/Web/CSS/Getting_Started/Why_use_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ko/docs/Web/CSS/Scaling_background_images /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +/ko/docs/Web/CSS/Index /ko/docs/orphaned/Web/CSS/Index +/ko/docs/Web/CSS/Reference/Property_Template /ko/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template +/ko/docs/Web/CSS/Scaling_background_images /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images /ko/docs/Web/CSS/Understanding_z-index /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index /ko/docs/Web/CSS/Understanding_z-index/Adding_z-index /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index /ko/docs/Web/CSS/Understanding_z-index/Stacking_and_float /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float @@ -576,47 +738,87 @@ /ko/docs/Web/CSS/Understanding_z-index/Stacking_without_z-index /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index /ko/docs/Web/CSS/Understanding_z-index/The_stacking_context /ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context /ko/docs/Web/CSS/Using_CSS_animations /ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations -/ko/docs/Web/CSS/Using_CSS_multiple_backgrounds /ko/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +/ko/docs/Web/CSS/Using_CSS_multiple_backgrounds /ko/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds /ko/docs/Web/CSS/Using_CSS_transforms /ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms /ko/docs/Web/CSS/Using_CSS_variables /ko/docs/Web/CSS/Using_CSS_custom_properties /ko/docs/Web/CSS/calc /ko/docs/Web/CSS/calc() /ko/docs/Web/CSS/currentcolor /ko/docs/Web/CSS/color_value#currentColor_키워드 +/ko/docs/Web/CSS/cursor/Using_URL_values_for_the_cursor_property /ko/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property /ko/docs/Web/CSS/filter-function/blur /ko/docs/Web/CSS/filter-function/blur() /ko/docs/Web/CSS/filter-function/brightness /ko/docs/Web/CSS/filter-function/brightness() /ko/docs/Web/CSS/filter-function/contrast /ko/docs/Web/CSS/filter-function/contrast() /ko/docs/Web/CSS/linear-gradient /ko/docs/Web/CSS/linear-gradient() /ko/docs/Web/CSS/transform-function/matrix /ko/docs/Web/CSS/transform-function/matrix() /ko/docs/Web/CSS/transform-function/scaleX /ko/docs/Web/CSS/transform-function/scaleX() +/ko/docs/Web/CSS/url /ko/docs/Web/CSS/url() /ko/docs/Web/CSS/var /ko/docs/Web/CSS/var() /ko/docs/Web/CSS/시작하기 /en-US/docs/Learn/CSS/First_steps /ko/docs/Web/CSS/시작하기/CSS_동작_원리 /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/Web/CSS/시작하기/CSS란 /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/Web/CSS/시작하기/내용물 /ko/docs/Learn/CSS/Howto/Generated_content +/ko/docs/Web/CSS/시작하기/리스트 /ko/docs/conflicting/Learn/CSS/Styling_text/Styling_lists +/ko/docs/Web/CSS/시작하기/미디어 /ko/docs/Web/Progressive_web_apps/Responsive/Media_types +/ko/docs/Web/CSS/시작하기/배치 /ko/docs/conflicting/Learn/CSS/CSS_layout +/ko/docs/Web/CSS/시작하기/상자 /ko/docs/conflicting/Learn/CSS/Building_blocks /ko/docs/Web/CSS/시작하기/색상 /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /ko/docs/Web/CSS/시작하기/설렉터 /en-US/docs/Learn/CSS/Building_blocks/Selectors /ko/docs/Web/CSS/시작하기/왜_CSS를_사용하나 /en-US/docs/Learn/CSS/First_steps/How_CSS_works +/ko/docs/Web/CSS/시작하기/종속과_상속 /ko/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance +/ko/docs/Web/CSS/시작하기/테이블 /ko/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables +/ko/docs/Web/CSS/시작하기/텍스트_스타일 /ko/docs/conflicting/Learn/CSS/Styling_text/Fundamentals +/ko/docs/Web/CSS/인접_형제_선택자 /ko/docs/Web/CSS/Adjacent_sibling_combinator +/ko/docs/Web/Events/DOMContentLoaded /ko/docs/Web/API/Window/DOMContentLoaded_event +/ko/docs/Web/Events/abort /ko/docs/Web/API/HTMLMediaElement/abort_event +/ko/docs/Web/Events/blur /ko/docs/Web/API/Element/blur_event /ko/docs/Web/Events/canplay /ko/docs/Web/API/HTMLMediaElement/canplay_event /ko/docs/Web/Events/canplaythrough /ko/docs/Web/API/HTMLMediaElement/canplaythrough_event /ko/docs/Web/Events/click /ko/docs/Web/API/Element/click_event /ko/docs/Web/Events/dragstart /ko/docs/Web/API/Document/dragstart_event /ko/docs/Web/Events/keydown /ko/docs/Web/API/Document/keydown_event +/ko/docs/Web/Events/load /ko/docs/Web/API/Window/load_event +/ko/docs/Web/Events/message /ko/docs/Web/API/BroadcastChannel/message_event /ko/docs/Web/Events/orientationchange /ko/docs/Web/API/Window/orientationchange_event /ko/docs/Web/Events/popstate /ko/docs/Web/API/Window/popstate_event /ko/docs/Web/Events/resize /ko/docs/Web/API/Window/resize_event /ko/docs/Web/Events/scroll /ko/docs/Web/API/Document/scroll_event -/ko/docs/Web/Events/timeout /ko/docs/Web/API/XMLHttpRequest/timeout +/ko/docs/Web/Events/timeout /ko/docs/Web/API/XMLHttpRequest/timeout_event /ko/docs/Web/Events/touchcancel /ko/docs/Web/API/Element/touchcancel_event /ko/docs/Web/Events/visibilitychange /ko/docs/Web/API/Document/visibilitychange_event +/ko/docs/Web/Guide/API/Vibration/Vibration /ko/docs/Web/API/Vibration_API /ko/docs/Web/Guide/CSS /ko/docs/Learn/CSS +/ko/docs/Web/Guide/CSS/Media_queries /ko/docs/Web/CSS/Media_Queries/Using_media_queries /ko/docs/Web/Guide/CSS/Using_CSS_transitions /ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions +/ko/docs/Web/Guide/CSS/Visual_formatting_model /ko/docs/Web/CSS/Visual_formatting_model +/ko/docs/Web/Guide/DOM /ko/docs/conflicting/Web/API/Document_Object_Model +/ko/docs/Web/Guide/DOM/Using_full_screen_mode /ko/docs/Web/API/Fullscreen_API /ko/docs/Web/Guide/HTML /ko/docs/Learn/HTML +/ko/docs/Web/Guide/HTML/Content_Editable /ko/docs/Web/Guide/HTML/Editable_content /ko/docs/Web/Guide/HTML/컨텐트_카테고리 /ko/docs/Web/Guide/HTML/Content_categories -/ko/docs/Web/Guide/HTML/폼 /ko/docs/Learn/HTML/Forms -/ko/docs/Web/Guide/HTML/폼/HTML_폼_구성_방법 /ko/docs/Learn/HTML/Forms/HTML_폼_구성_방법 -/ko/docs/Web/Guide/HTML/폼/My_first_HTML_form /ko/docs/Learn/HTML/Forms/Your_first_HTML_form -/ko/docs/Web/Guide/HTML/폼/Sending_and_retrieving_form_data /ko/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data +/ko/docs/Web/Guide/HTML/폼 /ko/docs/Learn/Forms +/ko/docs/Web/Guide/HTML/폼/HTML_폼_구성_방법 /ko/docs/Learn/Forms/How_to_structure_a_web_form +/ko/docs/Web/Guide/HTML/폼/My_first_HTML_form /ko/docs/Learn/Forms/Your_first_form +/ko/docs/Web/Guide/HTML/폼/Sending_and_retrieving_form_data /ko/docs/Learn/Forms/Sending_and_retrieving_form_data +/ko/docs/Web/Guide/XML_파싱_및_직렬화 /ko/docs/Web/Guide/Parsing_and_serializing_XML +/ko/docs/Web/Guide/그래픽 /ko/docs/Web/Guide/Graphics +/ko/docs/Web/HTML/Canvas /ko/docs/Web/API/Canvas_API +/ko/docs/Web/HTML/Canvas/Manipulating_video_using_canvas /ko/docs/Web/API/Canvas_API/Manipulating_video_using_canvas +/ko/docs/Web/HTML/Canvas/Tutorial /ko/docs/Web/API/Canvas_API/Tutorial +/ko/docs/Web/HTML/Canvas/Tutorial/Advanced_animations /ko/docs/Web/API/Canvas_API/Tutorial/Advanced_animations +/ko/docs/Web/HTML/Canvas/Tutorial/Applying_styles_and_colors /ko/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +/ko/docs/Web/HTML/Canvas/Tutorial/Basic_animations /ko/docs/Web/API/Canvas_API/Tutorial/Basic_animations +/ko/docs/Web/HTML/Canvas/Tutorial/Basic_usage /ko/docs/Web/API/Canvas_API/Tutorial/Basic_usage +/ko/docs/Web/HTML/Canvas/Tutorial/Compositing /ko/docs/Web/API/Canvas_API/Tutorial/Compositing +/ko/docs/Web/HTML/Canvas/Tutorial/Compositing/Example /ko/docs/Web/API/Canvas_API/Tutorial/Compositing/Example +/ko/docs/Web/HTML/Canvas/Tutorial/Drawing_shapes /ko/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes +/ko/docs/Web/HTML/Canvas/Tutorial/Finale /ko/docs/Web/API/Canvas_API/Tutorial/Finale +/ko/docs/Web/HTML/Canvas/Tutorial/Hit_regions_and_accessibility /ko/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility +/ko/docs/Web/HTML/Canvas/Tutorial/Optimizing_canvas /ko/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas +/ko/docs/Web/HTML/Canvas/Tutorial/Using_images /ko/docs/Web/API/Canvas_API/Tutorial/Using_images +/ko/docs/Web/HTML/Canvas/Tutorial/변형 /ko/docs/Web/API/Canvas_API/Tutorial/Transformations /ko/docs/Web/HTML/Element/Video/canplay_event /ko/docs/Web/API/HTMLMediaElement/canplay_event /ko/docs/Web/HTML/Element/Video/canplaythrough_event /ko/docs/Web/API/HTMLMediaElement/canplaythrough_event +/ko/docs/Web/HTML/Element/command /ko/docs/orphaned/Web/HTML/Element/command +/ko/docs/Web/HTML/Element/element /ko/docs/orphaned/Web/HTML/Element/element /ko/docs/Web/HTML/Element/h1 /ko/docs/Web/HTML/Element/Heading_Elements /ko/docs/Web/HTML/Element/h2 /ko/docs/Web/HTML/Element/Heading_Elements /ko/docs/Web/HTML/Element/h3 /ko/docs/Web/HTML/Element/Heading_Elements @@ -625,65 +827,155 @@ /ko/docs/Web/HTML/Element/h6 /ko/docs/Web/HTML/Element/Heading_Elements /ko/docs/Web/HTML/Element/캔버스 /ko/docs/Web/HTML/Element/canvas /ko/docs/Web/HTML/Focus_management_in_HTML /ko/docs/Web/API/Document/hasFocus +/ko/docs/Web/HTML/Global_attributes/dropzone /ko/docs/orphaned/Web/HTML/Global_attributes/dropzone +/ko/docs/Web/HTML/Global_attributes/클래스 /ko/docs/Web/HTML/Global_attributes/class +/ko/docs/Web/HTML/HTML5 /ko/docs/Web/Guide/HTML/HTML5 /ko/docs/Web/HTML/HTML5/HTML5_element_list /ko/docs/Web/HTML/Element -/ko/docs/Web/HTML/HTML에서_폼 /ko/docs/Learn/HTML/Forms +/ko/docs/Web/HTML/HTML5/Introduction_to_HTML5 /ko/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽 /ko/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/ko/docs/Web/HTML/HTML에서_폼 /ko/docs/Learn/Forms /ko/docs/Web/HTML/Introduction /ko/docs/Learn/HTML/Introduction_to_HTML /ko/docs/Web/HTTP/Access_control_CORS /ko/docs/Web/HTTP/CORS /ko/docs/Web/HTTP/Access_control_CORS/Errors /ko/docs/Web/HTTP/CORS/Errors /ko/docs/Web/HTTP/Access_control_CORS/Errors/CORSDidNotSucceed /ko/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed /ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types /ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types +/ko/docs/Web/HTTP/User_agent를_이용한_브라우저_감지 /ko/docs/Web/HTTP/Browser_detection_using_the_user_agent /ko/docs/Web/HTTP/상태_코드 /ko/docs/Web/HTTP/Status -/ko/docs/Web/JavaScript/Guide/About /ko/docs/Web/JavaScript/Guide/소개 +/ko/docs/Web/JavaScript/About /ko/docs/Web/JavaScript/About_JavaScript +/ko/docs/Web/JavaScript/Differential_inheritance_in_JavaScript /ko/docs/orphaned/Web/JavaScript/Differential_inheritance_in_JavaScript +/ko/docs/Web/JavaScript/Guide/About /ko/docs/Web/JavaScript/Guide/Introduction +/ko/docs/Web/JavaScript/Guide/Closures /ko/docs/Web/JavaScript/Closures +/ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain /ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /ko/docs/Web/JavaScript/Guide/Obsolete_Pages /ko/docs/Web/JavaScript/Guide /ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide /ko/docs/Web/JavaScript/Guide +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_da1ab2546bd5e84ac81f952de51d5d40 +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_2285d0ecb7e20b6a4ac3cb462794e916 +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915 +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators /ko/docs/conflicting/Web/JavaScript/Guide/Expressions_and_Operators_337b8dbe817777e70cc8002308284a74 +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects /ko/docs/conflicting/Web/JavaScript/Guide +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object /ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3 +/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables /ko/docs/conflicting/Web/JavaScript/Guide/Grammar_and_types_3f037ba1fa5775d153289787ec51042f /ko/docs/Web/JavaScript/Guide/Predefined_Core_Objects /ko/docs/Web/JavaScript/Guide +/ko/docs/Web/JavaScript/Guide/Values,_variables,_and_literals /ko/docs/Web/JavaScript/Guide/Grammar_and_types +/ko/docs/Web/JavaScript/Guide/객체_모델의_세부사항 /ko/docs/Web/JavaScript/Guide/Details_of_the_Object_Model +/ko/docs/Web/JavaScript/Guide/메타_프로그래밍 /ko/docs/Web/JavaScript/Guide/Meta_programming +/ko/docs/Web/JavaScript/Guide/소개 /ko/docs/Web/JavaScript/Guide/Introduction +/ko/docs/Web/JavaScript/Guide/정규식 /ko/docs/Web/JavaScript/Guide/Regular_Expressions +/ko/docs/Web/JavaScript/Guide/정규식/Assertions /ko/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions +/ko/docs/Web/JavaScript/Guide/정규식/Groups_and_Ranges /ko/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges +/ko/docs/Web/JavaScript/Guide/함수 /ko/docs/Web/JavaScript/Guide/Functions +/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript /ko/docs/conflicting/Learn/JavaScript/Objects /ko/docs/Web/JavaScript/New_in_JavaScript/New_in_JavaScript_1.8 /ko/docs/Web/JavaScript/New_in_JavaScript/1.8 /ko/docs/Web/JavaScript/Reference/About/Formatting_Conventions /ko/docs/Web/JavaScript/Reference/About +/ko/docs/Web/JavaScript/Reference/Classes/Class_fields /ko/docs/Web/JavaScript/Reference/Classes/Public_class_fields +/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션 /ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions /ko/docs/Web/JavaScript/Reference/Global_Functions /ko/docs/Web/JavaScript/Reference/Global_Objects /ko/docs/Web/JavaScript/Reference/Global_Objects/Array/constructor /ko/docs/Web/JavaScript/Reference/Global_Objects/Array /ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer +/ko/docs/Web/JavaScript/Reference/Global_Objects/BigInt/prototype /ko/docs/orphaned/Web/JavaScript/Reference/Global_Objects/BigInt/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean/constructor /ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean +/ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Boolean /ko/docs/Web/JavaScript/Reference/Global_Objects/Date/constructor /ko/docs/Web/JavaScript/Reference/Global_Objects/Date +/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Date /ko/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat /ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -/ko/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +/ko/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat /ko/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/Function +/ko/docs/Web/JavaScript/Reference/Global_Objects/InternalError/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/InternalError +/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat /ko/docs/Web/JavaScript/Reference/Global_Objects/Locale /ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale /ko/docs/Web/JavaScript/Reference/Global_Objects/Locale/language /ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/language +/ko/docs/Web/JavaScript/Reference/Global_Objects/Map/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Map +/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Number /ko/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat /ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -/ko/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype +/ko/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat +/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object +/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Promise +/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler /ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy +/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply /ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply +/ko/docs/Web/JavaScript/Reference/Global_Objects/Set/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Set +/ko/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer +/ko/docs/Web/JavaScript/Reference/Global_Objects/String/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String +/ko/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError /ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError +/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/TypedArray +/ko/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap +/ko/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WeakSet +/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype /ko/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global /ko/docs/Web/JavaScript/Reference/Global_Properties /ko/docs/Web/JavaScript/Reference/Global_Objects /ko/docs/Web/JavaScript/Reference/Methods_Index /ko/docs/Web/JavaScript/Reference /ko/docs/Web/JavaScript/Reference/Objects /ko/docs/Web/JavaScript/Reference/Global_Objects /ko/docs/Web/JavaScript/Reference/Objects/Function /ko/docs/Web/JavaScript/Reference/Global_Objects/Function +/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators /ko/docs/conflicting/Web/JavaScript/Reference/Operators +/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators /ko/docs/conflicting/Web/JavaScript/Reference/Operators_8d54701de06af40a7c984517cbe87b3e +/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators /ko/docs/conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 +/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators /ko/docs/conflicting/Web/JavaScript/Reference/Operators_310dc67549939233c3d18a8fa2cdbb23 /ko/docs/Web/JavaScript/Reference/Operators/Special_Operators /ko/docs/Web/JavaScript/Reference/Operators /ko/docs/Web/JavaScript/Reference/Operators/Spread_operator /ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax +/ko/docs/Web/JavaScript/Reference/Operators/논리_연산자(Logical_Operators) /ko/docs/conflicting/Web/JavaScript/Reference/Operators_13aeb53e31f9cec454ca631cb162449f +/ko/docs/Web/JavaScript/Reference/Operators/연산자_우선순위 /ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence /ko/docs/Web/JavaScript/Reference/Properties_Index /ko/docs/Web/JavaScript/Reference /ko/docs/Web/JavaScript/Reference/Reserved_Words /ko/docs/Web/JavaScript/Reference/Lexical_grammar#키워드 +/ko/docs/Web/JavaScript/Reference/Statements/default /ko/docs/conflicting/Web/JavaScript/Reference/Statements/switch /ko/docs/Web/JavaScript/Tutorials /ko/docs/Web/JavaScript +/ko/docs/Web/JavaScript/쉘 /ko/docs/Web/JavaScript/Shells +/ko/docs/Web/JavaScript/시작하기 /ko/docs/conflicting/Learn/Getting_started_with_the_web/JavaScript_basics +/ko/docs/Web/JavaScript/언어_리소스 /ko/docs/Web/JavaScript/Language_Resources +/ko/docs/Web/Media/Formats/비디오코덱 /ko/docs/Web/Media/Formats/Video_codecs +/ko/docs/Web/Media/Formats/컨테이너 /ko/docs/Web/Media/Formats/Containers +/ko/docs/Web/Media/Formats/코덱파라미터 /ko/docs/Web/Media/Formats/codecs_parameter +/ko/docs/Web/Performance/브라우저는_어떻게_동작하는가 /ko/docs/Web/Performance/How_browsers_work +/ko/docs/Web/Performance/중요_렌더링_경로 /ko/docs/Web/Performance/Critical_rendering_path +/ko/docs/Web/Progressive_web_apps/소개 /ko/docs/Web/Progressive_web_apps/Introduction /ko/docs/Web/Reference/Events /ko/docs/Web/Events -/ko/docs/Web/Reference/Events/DOMContentLoaded /ko/docs/Web/Events/DOMContentLoaded +/ko/docs/Web/Reference/Events/DOMContentLoaded /ko/docs/Web/API/Window/DOMContentLoaded_event /ko/docs/Web/Reference/Events/DOMSubtreeModified /ko/docs/Web/Events/DOMSubtreeModified -/ko/docs/Web/Reference/Events/blur /ko/docs/Web/Events/blur +/ko/docs/Web/Reference/Events/blur /ko/docs/Web/API/Element/blur_event /ko/docs/Web/Reference/Events/canplay /ko/docs/Web/API/HTMLMediaElement/canplay_event /ko/docs/Web/Reference/Events/canplaythrough /ko/docs/Web/API/HTMLMediaElement/canplaythrough_event /ko/docs/Web/Reference/Events/chargingchange /ko/docs/Web/Events/chargingchange /ko/docs/Web/Reference/Events/click /ko/docs/Web/API/Element/click_event /ko/docs/Web/Reference/Events/keydown /ko/docs/Web/API/Document/keydown_event -/ko/docs/Web/Reference/Events/load /ko/docs/Web/Events/load -/ko/docs/Web/Reference/Events/message /ko/docs/Web/Events/message +/ko/docs/Web/Reference/Events/load /ko/docs/Web/API/Window/load_event +/ko/docs/Web/Reference/Events/message /ko/docs/Web/API/BroadcastChannel/message_event /ko/docs/Web/Reference/Events/orientationchange /ko/docs/Web/API/Window/orientationchange_event /ko/docs/Web/Reference/Events/popstate /ko/docs/Web/API/Window/popstate_event /ko/docs/Web/Reference/Events/resize /ko/docs/Web/API/Window/resize_event -/ko/docs/Web/Reference/Events/timeout /ko/docs/Web/API/XMLHttpRequest/timeout +/ko/docs/Web/Reference/Events/timeout /ko/docs/Web/API/XMLHttpRequest/timeout_event /ko/docs/Web/Reference/Events/touchcancel /ko/docs/Web/API/Element/touchcancel_event /ko/docs/Web/Reference/Events/visibilitychange /ko/docs/Web/API/Document/visibilitychange_event +/ko/docs/Web/SVG/Element/사각형 /ko/docs/Web/SVG/Element/rect +/ko/docs/Web/SVG/Tutorial/기본_도형 /ko/docs/Web/SVG/Tutorial/Basic_Shapes +/ko/docs/Web/SVG/Tutorial/시작하기 /ko/docs/Web/SVG/Tutorial/Getting_Started +/ko/docs/Web/SVG/Tutorial/위치 /ko/docs/Web/SVG/Tutorial/Positions +/ko/docs/Web/Security/정보_보안_기본 /ko/docs/orphaned/Web/Security/Information_Security_Basics /ko/docs/Web/WebGL /ko/docs/Web/API/WebGL_API /ko/docs/Web/WebGL/Adding_2D_content_to_a_WebGL_context /ko/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context /ko/docs/Web/WebGL/Animating_objects_with_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL /ko/docs/Web/WebGL/Animating_textures_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL /ko/docs/Web/WebGL/Creating_3D_objects_using_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL -/ko/docs/Web/WebGL/Cross-Domain_Textures /ko/docs/Web/API/WebGL_API/Cross-Domain_Textures +/ko/docs/Web/WebGL/Cross-Domain_Textures /ko/docs/conflicting/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL /ko/docs/Web/WebGL/Getting_started_with_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL /ko/docs/Web/WebGL/Lighting_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL /ko/docs/Web/WebGL/Using_shaders_to_apply_color_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL @@ -692,8 +984,62 @@ /ko/docs/Web/Web_Components/Shadow_DOM /ko/docs/Web/Web_Components/Using_shadow_DOM /ko/docs/Web/XSLT/Elements /ko/docs/Web/XSLT/Element /ko/docs/Web/XSLT/Elements/element /ko/docs/Web/XSLT/Element/element -/ko/docs/WebAPI/Vibration /ko/docs/Web/Guide/API/Vibration/Vibration +/ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko /ko/docs/Web/XSLT/XSLT_JS_interface_in_Gecko +/ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Introduction /ko/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Introduction +/ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters /ko/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Setting_Parameters +/ko/docs/Web/XSLT/apply-imports /ko/docs/Web/XSLT/Element/apply-imports +/ko/docs/Web/XSLT/apply-templates /ko/docs/Web/XSLT/Element/apply-templates +/ko/docs/Web/XSLT/attribute /ko/docs/Web/XSLT/Element/attribute +/ko/docs/Web/XSLT/attribute-set /ko/docs/Web/XSLT/Element/attribute-set +/ko/docs/Web/XSLT/call-template /ko/docs/Web/XSLT/Element/call-template +/ko/docs/Web/XSLT/choose /ko/docs/Web/XSLT/Element/choose +/ko/docs/Web/XSLT/comment /ko/docs/Web/XSLT/Element/comment +/ko/docs/Web/XSLT/copy /ko/docs/Web/XSLT/Element/copy +/ko/docs/Web/XSLT/copy-of /ko/docs/Web/XSLT/Element/copy-of +/ko/docs/Web/XSLT/decimal-format /ko/docs/Web/XSLT/Element/decimal-format +/ko/docs/Web/XSLT/fallback /ko/docs/Web/XSLT/Element/fallback +/ko/docs/Web/XSLT/for-each /ko/docs/Web/XSLT/Element/for-each +/ko/docs/Web/XSLT/if /ko/docs/Web/XSLT/Element/if +/ko/docs/Web/XSLT/import /ko/docs/Web/XSLT/Element/import +/ko/docs/Web/XSLT/include /ko/docs/Web/XSLT/Element/include +/ko/docs/Web/XSLT/key /ko/docs/Web/XSLT/Element/key +/ko/docs/Web/XSLT/message /ko/docs/Web/XSLT/Element/message +/ko/docs/Web/XSLT/namespace-alias /ko/docs/Web/XSLT/Element/namespace-alias +/ko/docs/Web/XSLT/number /ko/docs/Web/XSLT/Element/number +/ko/docs/Web/XSLT/otherwise /ko/docs/Web/XSLT/Element/otherwise +/ko/docs/Web/XSLT/output /ko/docs/Web/XSLT/Element/output +/ko/docs/Web/XSLT/param /ko/docs/Web/XSLT/Element/param +/ko/docs/Web/XSLT/preserve-space /ko/docs/Web/XSLT/Element/preserve-space +/ko/docs/Web/XSLT/processing-instruction /ko/docs/Web/XSLT/Element/processing-instruction +/ko/docs/Web/XSLT/sort /ko/docs/Web/XSLT/Element/sort +/ko/docs/Web/XSLT/strip-space /ko/docs/Web/XSLT/Element/strip-space +/ko/docs/Web/XSLT/stylesheet /ko/docs/Web/XSLT/Element/stylesheet +/ko/docs/Web/XSLT/template /ko/docs/Web/XSLT/Element/template +/ko/docs/Web/XSLT/text /ko/docs/Web/XSLT/Element/text +/ko/docs/Web/XSLT/transform /ko/docs/Web/XSLT/Element/transform +/ko/docs/Web/XSLT/value-of /ko/docs/Web/XSLT/Element/value-of +/ko/docs/Web/XSLT/variable /ko/docs/Web/XSLT/Element/variable +/ko/docs/Web/XSLT/when /ko/docs/Web/XSLT/Element/when +/ko/docs/Web/XSLT/with-param /ko/docs/Web/XSLT/Element/with-param +/ko/docs/Web/참조 /ko/docs/Web/Reference +/ko/docs/Web/참조/API /ko/docs/Web/Reference/API +/ko/docs/WebAPI /ko/docs/conflicting/Web/API +/ko/docs/WebAPI/Battery_Status /ko/docs/Web/API/Battery_Status_API +/ko/docs/WebAPI/Detecting_device_orientation /ko/docs/Web/API/Detecting_device_orientation +/ko/docs/WebAPI/Managing_screen_orientation /ko/docs/Web/API/CSS_Object_Model/Managing_screen_orientation +/ko/docs/WebAPI/Network_Information /ko/docs/Web/API/Network_Information_API +/ko/docs/WebAPI/Proximity /ko/docs/Web/API/Proximity_Events +/ko/docs/WebAPI/Using_Light_Events /ko/docs/Web/API/Ambient_Light_Events +/ko/docs/WebAPI/Using_Web_Notifications /ko/docs/Web/API/Notifications_API/Using_the_Notifications_API +/ko/docs/WebAPI/Using_geolocation /ko/docs/Web/API/Geolocation_API/Using_the_Geolocation_API +/ko/docs/WebAPI/Vibration /ko/docs/Web/API/Vibration_API /ko/docs/WebAPI/WebSMS/Introduction_to_WebSMS /ko/docs/WebAPI/WebSMS/Introduction_to_Mobile_Message_API/Introduction_to_WebSMS +/ko/docs/WebSockets /ko/docs/Web/API/WebSockets_API +/ko/docs/WebSockets/Writing_WebSocket_client_applications /ko/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications +/ko/docs/WebSockets/Writing_WebSocket_servers /ko/docs/Web/API/WebSockets_API/Writing_WebSocket_servers +/ko/docs/Web_Development /ko/docs/conflicting/Web/Guide +/ko/docs/Windows_and_menus_in_XULRunner /ko/docs/orphaned/Windows_and_menus_in_XULRunner +/ko/docs/XHTML /ko/docs/Glossary/XHTML /ko/docs/XMLHttpRequest /ko/docs/Web/API/XMLHttpRequest /ko/docs/XMLHttpRequest/Synchronous_and_Asynchronous_Requests /ko/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests /ko/docs/XMLHttpRequest/setRequestHeader /ko/docs/Web/API/XMLHttpRequest/setRequestHeader @@ -806,95 +1152,102 @@ /ko/docs/XPath:Functions:unparsed-entity-url /ko/docs/Web/XPath/Functions/unparsed-entity-url /ko/docs/XSLT /ko/docs/Web/XSLT /ko/docs/XSLT/Elements /ko/docs/Web/XSLT/Element -/ko/docs/XSLT/apply-imports /ko/docs/Web/XSLT/apply-imports -/ko/docs/XSLT/apply-templates /ko/docs/Web/XSLT/apply-templates -/ko/docs/XSLT/attribute /ko/docs/Web/XSLT/attribute -/ko/docs/XSLT/attribute-set /ko/docs/Web/XSLT/attribute-set -/ko/docs/XSLT/call-template /ko/docs/Web/XSLT/call-template -/ko/docs/XSLT/choose /ko/docs/Web/XSLT/choose -/ko/docs/XSLT/comment /ko/docs/Web/XSLT/comment -/ko/docs/XSLT/copy /ko/docs/Web/XSLT/copy -/ko/docs/XSLT/copy-of /ko/docs/Web/XSLT/copy-of -/ko/docs/XSLT/decimal-format /ko/docs/Web/XSLT/decimal-format +/ko/docs/XSLT/apply-imports /ko/docs/Web/XSLT/Element/apply-imports +/ko/docs/XSLT/apply-templates /ko/docs/Web/XSLT/Element/apply-templates +/ko/docs/XSLT/attribute /ko/docs/Web/XSLT/Element/attribute +/ko/docs/XSLT/attribute-set /ko/docs/Web/XSLT/Element/attribute-set +/ko/docs/XSLT/call-template /ko/docs/Web/XSLT/Element/call-template +/ko/docs/XSLT/choose /ko/docs/Web/XSLT/Element/choose +/ko/docs/XSLT/comment /ko/docs/Web/XSLT/Element/comment +/ko/docs/XSLT/copy /ko/docs/Web/XSLT/Element/copy +/ko/docs/XSLT/copy-of /ko/docs/Web/XSLT/Element/copy-of +/ko/docs/XSLT/decimal-format /ko/docs/Web/XSLT/Element/decimal-format /ko/docs/XSLT/element /ko/docs/Web/XSLT/Element/element -/ko/docs/XSLT/fallback /ko/docs/Web/XSLT/fallback -/ko/docs/XSLT/for-each /ko/docs/Web/XSLT/for-each -/ko/docs/XSLT/if /ko/docs/Web/XSLT/if -/ko/docs/XSLT/import /ko/docs/Web/XSLT/import -/ko/docs/XSLT/include /ko/docs/Web/XSLT/include -/ko/docs/XSLT/key /ko/docs/Web/XSLT/key -/ko/docs/XSLT/message /ko/docs/Web/XSLT/message -/ko/docs/XSLT/namespace-alias /ko/docs/Web/XSLT/namespace-alias -/ko/docs/XSLT/number /ko/docs/Web/XSLT/number -/ko/docs/XSLT/otherwise /ko/docs/Web/XSLT/otherwise -/ko/docs/XSLT/output /ko/docs/Web/XSLT/output -/ko/docs/XSLT/param /ko/docs/Web/XSLT/param -/ko/docs/XSLT/preserve-space /ko/docs/Web/XSLT/preserve-space -/ko/docs/XSLT/processing-instruction /ko/docs/Web/XSLT/processing-instruction -/ko/docs/XSLT/sort /ko/docs/Web/XSLT/sort -/ko/docs/XSLT/strip-space /ko/docs/Web/XSLT/strip-space -/ko/docs/XSLT/stylesheet /ko/docs/Web/XSLT/stylesheet -/ko/docs/XSLT/template /ko/docs/Web/XSLT/template -/ko/docs/XSLT/text /ko/docs/Web/XSLT/text -/ko/docs/XSLT/transform /ko/docs/Web/XSLT/transform -/ko/docs/XSLT/value-of /ko/docs/Web/XSLT/value-of -/ko/docs/XSLT/variable /ko/docs/Web/XSLT/variable -/ko/docs/XSLT/when /ko/docs/Web/XSLT/when -/ko/docs/XSLT/with-param /ko/docs/Web/XSLT/with-param +/ko/docs/XSLT/fallback /ko/docs/Web/XSLT/Element/fallback +/ko/docs/XSLT/for-each /ko/docs/Web/XSLT/Element/for-each +/ko/docs/XSLT/if /ko/docs/Web/XSLT/Element/if +/ko/docs/XSLT/import /ko/docs/Web/XSLT/Element/import +/ko/docs/XSLT/include /ko/docs/Web/XSLT/Element/include +/ko/docs/XSLT/key /ko/docs/Web/XSLT/Element/key +/ko/docs/XSLT/message /ko/docs/Web/XSLT/Element/message +/ko/docs/XSLT/namespace-alias /ko/docs/Web/XSLT/Element/namespace-alias +/ko/docs/XSLT/number /ko/docs/Web/XSLT/Element/number +/ko/docs/XSLT/otherwise /ko/docs/Web/XSLT/Element/otherwise +/ko/docs/XSLT/output /ko/docs/Web/XSLT/Element/output +/ko/docs/XSLT/param /ko/docs/Web/XSLT/Element/param +/ko/docs/XSLT/preserve-space /ko/docs/Web/XSLT/Element/preserve-space +/ko/docs/XSLT/processing-instruction /ko/docs/Web/XSLT/Element/processing-instruction +/ko/docs/XSLT/sort /ko/docs/Web/XSLT/Element/sort +/ko/docs/XSLT/strip-space /ko/docs/Web/XSLT/Element/strip-space +/ko/docs/XSLT/stylesheet /ko/docs/Web/XSLT/Element/stylesheet +/ko/docs/XSLT/template /ko/docs/Web/XSLT/Element/template +/ko/docs/XSLT/text /ko/docs/Web/XSLT/Element/text +/ko/docs/XSLT/transform /ko/docs/Web/XSLT/Element/transform +/ko/docs/XSLT/value-of /ko/docs/Web/XSLT/Element/value-of +/ko/docs/XSLT/variable /ko/docs/Web/XSLT/Element/variable +/ko/docs/XSLT/when /ko/docs/Web/XSLT/Element/when +/ko/docs/XSLT/with-param /ko/docs/Web/XSLT/Element/with-param /ko/docs/XSLT:Elements /ko/docs/Web/XSLT/Element -/ko/docs/XSLT:apply-imports /ko/docs/Web/XSLT/apply-imports -/ko/docs/XSLT:apply-templates /ko/docs/Web/XSLT/apply-templates -/ko/docs/XSLT:attribute /ko/docs/Web/XSLT/attribute -/ko/docs/XSLT:attribute-set /ko/docs/Web/XSLT/attribute-set -/ko/docs/XSLT:call-template /ko/docs/Web/XSLT/call-template -/ko/docs/XSLT:choose /ko/docs/Web/XSLT/choose -/ko/docs/XSLT:comment /ko/docs/Web/XSLT/comment -/ko/docs/XSLT:copy /ko/docs/Web/XSLT/copy -/ko/docs/XSLT:copy-of /ko/docs/Web/XSLT/copy-of -/ko/docs/XSLT:decimal-format /ko/docs/Web/XSLT/decimal-format +/ko/docs/XSLT:apply-imports /ko/docs/Web/XSLT/Element/apply-imports +/ko/docs/XSLT:apply-templates /ko/docs/Web/XSLT/Element/apply-templates +/ko/docs/XSLT:attribute /ko/docs/Web/XSLT/Element/attribute +/ko/docs/XSLT:attribute-set /ko/docs/Web/XSLT/Element/attribute-set +/ko/docs/XSLT:call-template /ko/docs/Web/XSLT/Element/call-template +/ko/docs/XSLT:choose /ko/docs/Web/XSLT/Element/choose +/ko/docs/XSLT:comment /ko/docs/Web/XSLT/Element/comment +/ko/docs/XSLT:copy /ko/docs/Web/XSLT/Element/copy +/ko/docs/XSLT:copy-of /ko/docs/Web/XSLT/Element/copy-of +/ko/docs/XSLT:decimal-format /ko/docs/Web/XSLT/Element/decimal-format /ko/docs/XSLT:element /ko/docs/Web/XSLT/Element/element -/ko/docs/XSLT:fallback /ko/docs/Web/XSLT/fallback -/ko/docs/XSLT:for-each /ko/docs/Web/XSLT/for-each -/ko/docs/XSLT:if /ko/docs/Web/XSLT/if -/ko/docs/XSLT:import /ko/docs/Web/XSLT/import -/ko/docs/XSLT:include /ko/docs/Web/XSLT/include -/ko/docs/XSLT:key /ko/docs/Web/XSLT/key -/ko/docs/XSLT:message /ko/docs/Web/XSLT/message -/ko/docs/XSLT:namespace-alias /ko/docs/Web/XSLT/namespace-alias -/ko/docs/XSLT:number /ko/docs/Web/XSLT/number -/ko/docs/XSLT:otherwise /ko/docs/Web/XSLT/otherwise -/ko/docs/XSLT:output /ko/docs/Web/XSLT/output -/ko/docs/XSLT:param /ko/docs/Web/XSLT/param -/ko/docs/XSLT:preserve-space /ko/docs/Web/XSLT/preserve-space -/ko/docs/XSLT:processing-instruction /ko/docs/Web/XSLT/processing-instruction -/ko/docs/XSLT:sort /ko/docs/Web/XSLT/sort -/ko/docs/XSLT:strip-space /ko/docs/Web/XSLT/strip-space -/ko/docs/XSLT:stylesheet /ko/docs/Web/XSLT/stylesheet -/ko/docs/XSLT:template /ko/docs/Web/XSLT/template -/ko/docs/XSLT:text /ko/docs/Web/XSLT/text -/ko/docs/XSLT:transform /ko/docs/Web/XSLT/transform -/ko/docs/XSLT:value-of /ko/docs/Web/XSLT/value-of -/ko/docs/XSLT:variable /ko/docs/Web/XSLT/variable -/ko/docs/XSLT:when /ko/docs/Web/XSLT/when -/ko/docs/XSLT:with-param /ko/docs/Web/XSLT/with-param -/ko/docs/XSLT_in_Gecko:Basic_Example /ko/docs/XSLT_in_Gecko/Basic_Example -/ko/docs/XSLT_in_Gecko:Browser_Differences /ko/docs/XSLT_in_Gecko/Browser_Differences -/ko/docs/XSLT_in_Gecko:Generating_HTML /ko/docs/XSLT_in_Gecko/Generating_HTML -/ko/docs/XSLT_in_Gecko:Introduction /ko/docs/XSLT_in_Gecko/Introduction -/ko/docs/XSLT_in_Gecko:Resources /ko/docs/XSLT_in_Gecko/Resources +/ko/docs/XSLT:fallback /ko/docs/Web/XSLT/Element/fallback +/ko/docs/XSLT:for-each /ko/docs/Web/XSLT/Element/for-each +/ko/docs/XSLT:if /ko/docs/Web/XSLT/Element/if +/ko/docs/XSLT:import /ko/docs/Web/XSLT/Element/import +/ko/docs/XSLT:include /ko/docs/Web/XSLT/Element/include +/ko/docs/XSLT:key /ko/docs/Web/XSLT/Element/key +/ko/docs/XSLT:message /ko/docs/Web/XSLT/Element/message +/ko/docs/XSLT:namespace-alias /ko/docs/Web/XSLT/Element/namespace-alias +/ko/docs/XSLT:number /ko/docs/Web/XSLT/Element/number +/ko/docs/XSLT:otherwise /ko/docs/Web/XSLT/Element/otherwise +/ko/docs/XSLT:output /ko/docs/Web/XSLT/Element/output +/ko/docs/XSLT:param /ko/docs/Web/XSLT/Element/param +/ko/docs/XSLT:preserve-space /ko/docs/Web/XSLT/Element/preserve-space +/ko/docs/XSLT:processing-instruction /ko/docs/Web/XSLT/Element/processing-instruction +/ko/docs/XSLT:sort /ko/docs/Web/XSLT/Element/sort +/ko/docs/XSLT:strip-space /ko/docs/Web/XSLT/Element/strip-space +/ko/docs/XSLT:stylesheet /ko/docs/Web/XSLT/Element/stylesheet +/ko/docs/XSLT:template /ko/docs/Web/XSLT/Element/template +/ko/docs/XSLT:text /ko/docs/Web/XSLT/Element/text +/ko/docs/XSLT:transform /ko/docs/Web/XSLT/Element/transform +/ko/docs/XSLT:value-of /ko/docs/Web/XSLT/Element/value-of +/ko/docs/XSLT:variable /ko/docs/Web/XSLT/Element/variable +/ko/docs/XSLT:when /ko/docs/Web/XSLT/Element/when +/ko/docs/XSLT:with-param /ko/docs/Web/XSLT/Element/with-param +/ko/docs/XSLT_in_Gecko /ko/docs/Web/API/XSLTProcessor +/ko/docs/XSLT_in_Gecko/Basic_Example /ko/docs/Web/API/XSLTProcessor/Basic_Example +/ko/docs/XSLT_in_Gecko/Browser_Differences /ko/docs/Web/API/XSLTProcessor/Browser_Differences +/ko/docs/XSLT_in_Gecko/Generating_HTML /ko/docs/Web/API/XSLTProcessor/Generating_HTML +/ko/docs/XSLT_in_Gecko/Introduction /ko/docs/Web/API/XSLTProcessor/Introduction +/ko/docs/XSLT_in_Gecko/Resources /ko/docs/Web/API/XSLTProcessor/Resources +/ko/docs/XSLT_in_Gecko:Basic_Example /ko/docs/Web/API/XSLTProcessor/Basic_Example +/ko/docs/XSLT_in_Gecko:Browser_Differences /ko/docs/Web/API/XSLTProcessor/Browser_Differences +/ko/docs/XSLT_in_Gecko:Generating_HTML /ko/docs/Web/API/XSLTProcessor/Generating_HTML +/ko/docs/XSLT_in_Gecko:Introduction /ko/docs/Web/API/XSLTProcessor/Introduction +/ko/docs/XSLT_in_Gecko:Resources /ko/docs/Web/API/XSLTProcessor/Resources /ko/docs/XTech_2005_Presentations:Directions_of_the_Mozilla_RDF_engine /ko/docs/XTech_2005_Presentations/Directions_of_the_Mozilla_RDF_engine /ko/docs/en /en-US/ +/ko/docs/개발자를_위한_Firefox_3.6 /ko/docs/Mozilla/Firefox/Releases/3.6 /ko/docs/대문 /ko/docs/Web /ko/docs/도구들 /ko/docs/Tools -/ko/docs/도구들/Add-ons /ko/docs/Tools/Add-ons -/ko/docs/도구들/Add-ons/DOM_Inspector /ko/docs/Tools/Add-ons/DOM_Inspector +/ko/docs/도구들/Add-ons /ko/docs/orphaned/Tools/Add-ons +/ko/docs/도구들/Add-ons/DOM_Inspector /ko/docs/orphaned/Tools/Add-ons/DOM_Inspector /ko/docs/도구들/Debugger /ko/docs/Tools/Debugger /ko/docs/도구들/Debugger/UI_Tour /ko/docs/Tools/Debugger/UI_Tour -/ko/docs/도구들/Debugger/단축키 /ko/docs/Tools/Debugger/단축키 -/ko/docs/도구들/How_to /ko/docs/Tools/How_to -/ko/docs/도구들/How_to/Open_the_debugger /ko/docs/Tools/How_to/Open_the_debugger -/ko/docs/도구들/How_to/Search /ko/docs/Tools/How_to/Search -/ko/docs/도구들/How_to/Set_a_breakpoint /ko/docs/Tools/How_to/Set_a_breakpoint +/ko/docs/도구들/Debugger/단축키 /ko/docs/Tools/Debugger/Keyboard_shortcuts +/ko/docs/도구들/How_to /ko/docs/Tools/Debugger/How_to +/ko/docs/도구들/How_to/Open_the_debugger /ko/docs/Tools/Debugger/How_to/Open_the_debugger +/ko/docs/도구들/How_to/Search /ko/docs/Tools/Debugger/How_to/Search +/ko/docs/도구들/How_to/Set_a_breakpoint /ko/docs/Tools/Debugger/How_to/Set_a_breakpoint /ko/docs/도구들/Network_Monitor /ko/docs/Tools/Network_Monitor /ko/docs/도구들/Page_Inspector /ko/docs/Tools/Page_Inspector /ko/docs/도구들/Page_Inspector/UI_Tour /ko/docs/Tools/Page_Inspector/UI_Tour @@ -907,4 +1260,6 @@ /ko/docs/도구들/WebIDE/문제해결 /ko/docs/Tools/WebIDE/문제해결 /ko/docs/도구들/Web_Console /ko/docs/Tools/Web_Console /ko/docs/모질라_프로젝트_참여하기_(Participating_in_the_Mozilla_project) /ko/docs/Mozilla/Developer_guide +/ko/docs/지역의_코드를_씁니다. /ko/docs/orphaned/지역의_코드를_씁니다. /ko/docs/호환_모드와_표준_모드 /ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode +/ko/docs/확장기능_개발_환경_구축 /ko/docs/orphaned/확장기능_개발_환경_구축 diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json index eaafa423c3..e852b2db0a 100644 --- a/files/ko/_wikihistory.json +++ b/files/ko/_wikihistory.json @@ -1,148 +1,4 @@ { - "A_Basic_RayCaster": { - "modified": "2019-05-26T05:55:24.371Z", - "contributors": [ - "alattalatta", - "taggon" - ] - }, - "A_re-introduction_to_JavaScript": { - "modified": "2020-11-30T14:43:16.912Z", - "contributors": [ - "woochul2", - "honggaruy", - "jaeminche", - "eunjungleecub", - "Teperi", - "Violet-Bora-Lee", - "jjuun", - "JaeyiHong", - "juddammu", - "limkukhyun", - "hyunggoo", - "ChalkPE", - "loslch", - "Kimchoky", - "pineoc", - "fureweb", - "zeallat", - "gnujoow", - "softage", - "oox", - "Jsfumato", - "stephenjang", - "cafrii", - "teoli", - "zziuni", - "JaehaAhn", - "Joonwon", - "Dyhan81" - ] - }, - "Adapting_XUL_Applications_for_Firefox_1.5": { - "modified": "2019-03-23T23:42:04.353Z", - "contributors": [ - "teoli", - "Netaras" - ] - }, - "Building_an_Extension": { - "modified": "2019-03-24T00:04:35.955Z", - "contributors": [ - "teoli", - "ethertank", - "Gilchris", - "fscholz", - "Matthew,Lee", - "Amujung", - "Idodream", - "Jeongsw", - "Netaras" - ] - }, - "CSS3_Columns": { - "modified": "2019-10-11T18:26:42.559Z", - "contributors": [ - "escattone", - "Netaras", - "Sebuls", - "Ioseph" - ] - }, - "Consistent_List_Indentation": { - "modified": "2019-03-18T21:13:02.657Z", - "contributors": [ - "alattalatta", - "teoli", - "Ioseph" - ] - }, - "DHTML": { - "modified": "2019-03-23T23:41:48.331Z", - "contributors": [ - "Sebuls" - ] - }, - "DOM_improvements_in_Firefox_3": { - "modified": "2019-03-23T23:52:57.206Z", - "contributors": [ - "teoli", - "Suguni" - ] - }, - "Determining_the_dimensions_of_elements": { - "modified": "2019-03-18T20:58:47.001Z", - "contributors": [ - "SphinxKnight", - "teoli", - "taggon" - ] - }, - "Drawing_text_using_a_canvas": { - "modified": "2019-03-23T23:51:09.281Z", - "contributors": [ - "kbsbroad", - "peacekimjapan", - "tnRaro", - "teoli", - "Wladimir_Palant", - "Suguni" - ] - }, - "Firefox_1.5_for_developers": { - "modified": "2019-03-23T23:42:08.585Z", - "contributors": [ - "teoli", - "Sebuls", - "Netaras" - ] - }, - "Firefox_2_for_developers": { - "modified": "2019-01-16T16:12:14.974Z", - "contributors": [ - "CN", - "Netaras", - "Yh", - "C0d3h4ck", - "Ranio710", - "Channy" - ] - }, - "Firefox_3.5_for_developers": { - "modified": "2019-03-24T00:00:11.117Z", - "contributors": [ - "teoli", - "Gilchris" - ] - }, - "Full_page_zoom": { - "modified": "2019-03-23T23:51:11.591Z", - "contributors": [ - "teoli", - "Wladimir_Palant", - "Jeongkyu" - ] - }, "Games": { "modified": "2019-09-09T15:33:04.549Z", "contributors": [ @@ -190,107 +46,12 @@ "chrisdavidmills" ] }, - "Games/Tutorials/2D_breakout_game_Phaser/득점": { - "modified": "2019-01-16T22:56:11.870Z", - "contributors": [ - "wbamberg", - "Dragonholux" - ] - }, "Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation": { "modified": "2019-11-30T13:08:40.751Z", "contributors": [ "junghyeonsu" ] }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임": { - "modified": "2019-03-23T22:24:25.862Z", - "contributors": [ - "wbamberg", - "daesD", - "hoony", - "Byeolbit" - ] - }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls": { - "modified": "2019-03-23T22:20:49.480Z", - "contributors": [ - "wbamberg", - "sshplendid", - "daesD", - "hoony" - ] - }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field": { - "modified": "2019-01-17T03:04:25.798Z", - "contributors": [ - "wbamberg", - "sshplendid" - ] - }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Collision_detection": { - "modified": "2019-04-17T04:54:08.983Z", - "contributors": [ - "E.Chong_Ju_Noel", - "wbamberg", - "sshplendid" - ] - }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Finishing_up": { - "modified": "2019-04-17T06:26:16.714Z", - "contributors": [ - "E.Chong_Ju_Noel" - ] - }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over": { - "modified": "2019-01-17T03:02:48.219Z", - "contributors": [ - "wbamberg", - "sshplendid" - ] - }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Mouse_controls": { - "modified": "2019-04-17T05:33:54.686Z", - "contributors": [ - "E.Chong_Ju_Noel" - ] - }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls": { - "modified": "2019-01-17T02:41:51.426Z", - "contributors": [ - "wbamberg", - "sshplendid", - "egg-00" - ] - }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Track_the_score_and_win": { - "modified": "2019-04-17T05:34:33.735Z", - "contributors": [ - "E.Chong_Ju_Noel", - "wbamberg", - "awer000" - ] - }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기": { - "modified": "2019-03-23T22:23:23.704Z", - "contributors": [ - "wbamberg", - "sshplendid", - "hoony", - "Byeolbit" - ] - }, - "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기": { - "modified": "2019-01-17T00:09:33.787Z", - "contributors": [ - "wbamberg", - "sshplendid", - "daesD", - "hoony", - "HarrisLim", - "Byeolbit" - ] - }, "Glossary": { "modified": "2020-10-07T11:12:02.701Z", "contributors": [ @@ -637,12 +398,6 @@ "enfroze" ] }, - "Glossary/Header": { - "modified": "2019-04-30T11:26:53.285Z", - "contributors": [ - "cs09g" - ] - }, "Glossary/Hoisting": { "modified": "2019-07-11T11:32:59.609Z", "contributors": [ @@ -1194,122 +949,42 @@ "alattalatta" ] }, - "Glossary/동적_프로그래밍_언어": { - "modified": "2019-03-18T21:23:35.310Z", + "Learn": { + "modified": "2020-07-16T22:43:44.593Z", "contributors": [ - "flat81" + "SphinxKnight", + "hl5nyw", + "yeoncheol-kr", + "honggaruy", + "alattalatta", + "Silvermist", + "2kindsofcs", + "ehgus", + "svarlamov", + "daktwigim", + "MiscellaneousDictionary", + "dolmoon", + "moodcoding", + "Olivia_J", + "minwook-shin", + "daesD", + "kidkkr", + "haneri", + "kygn1998", + "Netaras", + "hoony", + "sunkibaek", + "cs09g", + "Donghyun_Lee", + "kscarfone" ] }, - "Glossary/배열": { - "modified": "2019-03-18T21:24:02.576Z", + "Learn/CSS": { + "modified": "2020-07-16T22:25:35.300Z", "contributors": [ - "Parcovia" - ] - }, - "Glossary/불린": { - "modified": "2019-03-23T22:13:53.303Z", - "contributors": [ - "Violet-Bora-Lee", - "BA-jhlee" - ] - }, - "Glossary/브라우저-컨텍스트": { - "modified": "2020-01-05T11:52:27.990Z", - "contributors": [ - "alattalatta", - "HyunSeob" - ] - }, - "Glossary/스코프": { - "modified": "2020-08-28T03:24:50.648Z", - "contributors": [ - "heejinlee07" - ] - }, - "Glossary/식별자": { - "modified": "2019-05-24T13:17:06.184Z", - "contributors": [ - "alattalatta", - "HyunSeob" - ] - }, - "Glossary/전송_제어_프로토콜_(TCP)": { - "modified": "2020-01-12T14:32:05.700Z", - "contributors": [ - "doong-jo" - ] - }, - "Glossary/캐시": { - "modified": "2019-10-28T01:10:08.788Z", - "contributors": [ - "JisooLee" - ] - }, - "How_to_Build_an_XPCOM_Component_in_Javascript": { - "modified": "2019-03-23T23:49:04.482Z", - "contributors": [ - "Channy", - "Yookh80" - ] - }, - "Introduction_to_using_XPath_in_JavaScript": { - "modified": "2020-08-06T04:38:40.599Z", - "contributors": [ - "alattalatta", - "Netaras", - "Sebuls" - ] - }, - "JavaScript_C_Engine_Embedder's_Guide": { - "modified": "2019-03-23T23:51:52.110Z", - "contributors": [ - "teoli", - "Comayjlee", - "Joone" - ] - }, - "Learn": { - "modified": "2020-07-16T22:43:44.593Z", - "contributors": [ - "SphinxKnight", - "hl5nyw", - "yeoncheol-kr", - "honggaruy", - "alattalatta", - "Silvermist", - "2kindsofcs", - "ehgus", - "svarlamov", - "daktwigim", - "MiscellaneousDictionary", - "dolmoon", - "moodcoding", - "Olivia_J", - "minwook-shin", - "daesD", - "kidkkr", - "haneri", - "kygn1998", - "Netaras", - "hoony", - "sunkibaek", - "cs09g", - "Donghyun_Lee", - "kscarfone" - ] - }, - "Learn/CSS": { - "modified": "2020-07-16T22:25:35.300Z", - "contributors": [ - "alattalatta", - "Narrativi", - "cs09g" - ] - }, - "Learn/CSS/Basics/Layout": { - "modified": "2020-07-16T22:25:40.836Z", - "contributors": [ - "yooonmi" + "alattalatta", + "Narrativi", + "cs09g" ] }, "Learn/CSS/Building_blocks": { @@ -1379,20 +1054,6 @@ "java2020007" ] }, - "Learn/CSS/Building_blocks/상자_모델": { - "modified": "2020-12-08T00:16:52.296Z", - "contributors": [ - "ihooi", - "Hwan-Woong-Lee" - ] - }, - "Learn/CSS/Building_blocks/선택자": { - "modified": "2020-12-07T23:12:49.927Z", - "contributors": [ - "ihooi", - "java2020007" - ] - }, "Learn/CSS/CSS_layout": { "modified": "2020-07-16T22:26:31.606Z", "contributors": [ @@ -1452,38 +1113,6 @@ "Hwan-Woong-Lee" ] }, - "Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서": { - "modified": "2020-07-16T22:27:32.744Z", - "contributors": [ - "Hwan-Woong-Lee" - ] - }, - "Learn/CSS/CSS_layout/반응형_디자인": { - "modified": "2020-07-16T22:27:29.107Z", - "contributors": [ - "Hwan-Woong-Lee" - ] - }, - "Learn/CSS/CSS_layout/위치잡기": { - "modified": "2020-07-16T22:26:44.211Z", - "contributors": [ - "Hwan-Woong-Lee" - ] - }, - "Learn/CSS/CSS_layout/이전_브라우저_지원": { - "modified": "2020-07-16T22:27:19.114Z", - "contributors": [ - "EricByHPHK", - "Hwan-Woong-Lee" - ] - }, - "Learn/CSS/CSS_layout/일반_흐름": { - "modified": "2020-07-16T22:27:22.113Z", - "contributors": [ - "EricByHPHK", - "Hwan-Woong-Lee" - ] - }, "Learn/CSS/First_steps": { "modified": "2020-07-16T22:27:39.876Z", "contributors": [ @@ -1534,12 +1163,6 @@ "SpikeYou" ] }, - "Learn/CSS/Introduction_to_CSS/기본적인_CSS_이해": { - "modified": "2020-07-16T22:28:12.763Z", - "contributors": [ - "ERTuringLee" - ] - }, "Learn/CSS/Styling_text": { "modified": "2020-07-16T22:25:59.083Z", "contributors": [ @@ -1646,20 +1269,6 @@ "dolmoon" ] }, - "Learn/Common_questions/웹_사이트가_제대로_동작하는지_확인": { - "modified": "2020-07-16T22:35:50.357Z", - "contributors": [ - "best8248" - ] - }, - "Learn/Common_questions/코딩하기_전에_생각하기": { - "modified": "2020-07-16T22:35:34.712Z", - "contributors": [ - "Silvermist", - "ssilb4", - "daebum-lee" - ] - }, "Learn/Front-end_web_developer": { "modified": "2020-09-26T16:42:10.726Z", "contributors": [ @@ -1680,37 +1289,6 @@ "chrisdavidmills" ] }, - "Learn/Getting_started_with_the_web/CSS_기본": { - "modified": "2020-07-16T22:35:01.206Z", - "contributors": [ - "java2020007", - "Silvermist", - "manmyung", - "jinah1000", - "dolmoon", - "limkukhyun", - "galcyurio", - "gobyoungil", - "stitchworkingonthecode", - "cs09g" - ] - }, - "Learn/Getting_started_with_the_web/HTML_기본": { - "modified": "2020-07-16T22:34:48.769Z", - "contributors": [ - "scl2589", - "hahehohoo", - "moseoridev", - "alattalatta", - "dolmoon", - "limkukhyun", - "galcyurio", - "gobyoungil", - "LovelyGom1218", - "stitchworkingonthecode", - "cs09g" - ] - }, "Learn/Getting_started_with_the_web/JavaScript_basics": { "modified": "2020-07-16T22:35:12.767Z", "contributors": [ @@ -1737,154 +1315,53 @@ "cs09g" ] }, - "Learn/Getting_started_with_the_web/기본_소프트웨어_설치하기": { - "modified": "2020-07-16T22:34:08.936Z", - "contributors": [ - "thornbirda", - "alattalatta", - "dolmoon", - "limkukhyun", - "takeU", - "galcyurio", - "stitchworkingonthecode", - "cs09g" - ] - }, - "Learn/Getting_started_with_the_web/웹사이트_출판하기": { - "modified": "2020-07-16T22:34:27.246Z", + "Learn/HTML": { + "modified": "2020-07-16T22:22:20.486Z", "contributors": [ - "Taehoon", - "limkukhyun", - "galcyurio", - "novelview9", + "naduhy2", "cs09g" ] }, - "Learn/Getting_started_with_the_web/웹의_동작_방식": { - "modified": "2020-07-16T22:34:01.419Z", + "Learn/HTML/Howto": { + "modified": "2020-07-16T22:22:29.667Z", "contributors": [ - "doong-jo", - "moseoridev", - "HoLlOlLoLlU", - "limkukhyun", - "LeeJunyeol", - "galcyurio", - "cs09g" + "Jeremie" ] }, - "Learn/Getting_started_with_the_web/파일들_다루기": { - "modified": "2020-10-09T05:21:10.101Z", + "Learn/HTML/Introduction_to_HTML": { + "modified": "2020-07-16T22:22:50.673Z", "contributors": [ - "anoncaco", - "moseoridev", "alattalatta", - "cs09g", - "dolmoon", - "limkukhyun", - "YJLeeGinter", - "galcyurio", - "BK-Yoo" + "naduhy2", + "knight2995" ] }, - "Learn/HTML": { - "modified": "2020-07-16T22:22:20.486Z", + "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting": { + "modified": "2020-11-18T02:41:42.097Z", "contributors": [ - "naduhy2", - "cs09g" + "sh0seo", + "Atercatus", + "dave1502", + "iloveek" ] }, - "Learn/HTML/Forms": { - "modified": "2020-07-16T22:20:59.522Z", + "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks": { + "modified": "2020-07-16T22:23:45.260Z", "contributors": [ - "ssj24", - "chrisdavidmills", - "moolow", - "JeongSeongDae" + "Xvezda", + "sangheon-kim", + "Tay_Kim", + "alattalatta", + "zDJKIMs", + "Han_jongbae" ] }, - "Learn/HTML/Forms/HTML_폼_구성_방법": { - "modified": "2020-09-29T02:01:00.293Z", + "Learn/HTML/Introduction_to_HTML/Debugging_HTML": { + "modified": "2020-11-18T21:39:06.803Z", "contributors": [ - "fscholz", - "sephiron99", - "chrisdavidmills", - "JeongSeongDae" - ] - }, - "Learn/HTML/Forms/Sending_and_retrieving_form_data": { - "modified": "2020-07-16T22:21:27.567Z", - "contributors": [ - "tldn0718", - "dev-dongwon", - "daesD", - "chrisdavidmills", - "Geun-Hyung_Kim", - "JeongSeongDae" - ] - }, - "Learn/HTML/Forms/Your_first_HTML_form": { - "modified": "2020-07-16T22:21:05.991Z", - "contributors": [ - "fscholz", - "sephiron99", - "chrisdavidmills", - "JeongSeongDae" - ] - }, - "Learn/HTML/Howto": { - "modified": "2020-07-16T22:22:29.667Z", - "contributors": [ - "Jeremie" - ] - }, - "Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable": { - "modified": "2020-07-16T22:22:37.951Z", - "contributors": [ - "Kaben" - ] - }, - "Learn/HTML/Howto/데이터_속성_사용하기": { - "modified": "2020-07-16T22:22:36.382Z", - "contributors": [ - "DDark", - "jyhwng", - "soulmatt" - ] - }, - "Learn/HTML/Introduction_to_HTML": { - "modified": "2020-07-16T22:22:50.673Z", - "contributors": [ - "alattalatta", - "naduhy2", - "knight2995" - ] - }, - "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting": { - "modified": "2020-11-18T02:41:42.097Z", - "contributors": [ - "sh0seo", - "Atercatus", - "dave1502", - "iloveek" - ] - }, - "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks": { - "modified": "2020-07-16T22:23:45.260Z", - "contributors": [ - "Xvezda", - "sangheon-kim", - "Tay_Kim", - "alattalatta", - "zDJKIMs", - "Han_jongbae" - ] - }, - "Learn/HTML/Introduction_to_HTML/Debugging_HTML": { - "modified": "2020-11-18T21:39:06.803Z", - "contributors": [ - "sh0seo", - "dave1502", - "limkukhyun" + "sh0seo", + "dave1502", + "limkukhyun" ] }, "Learn/HTML/Introduction_to_HTML/Document_and_website_structure": { @@ -1975,38 +1452,18 @@ "mytory" ] }, - "Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content": { - "modified": "2020-07-16T22:24:54.813Z", - "contributors": [ - "jinseobhong" - ] - }, "Learn/HTML/Tables": { "modified": "2020-07-16T22:25:13.523Z", "contributors": [ "byoung_hyun" ] }, - "Learn/How_to_contribute": { - "modified": "2020-07-16T22:33:45.510Z", - "contributors": [ - "SphinxKnight", - "2oosoo", - "JinSeungHo" - ] - }, "Learn/Index": { "modified": "2020-07-16T22:33:40.026Z", "contributors": [ "alattalatta" ] }, - "Learn/Infrastructure": { - "modified": "2020-07-16T22:22:13.682Z", - "contributors": [ - "KwanHong_Lee66" - ] - }, "Learn/JavaScript": { "modified": "2020-12-01T10:05:39.249Z", "contributors": [ @@ -2095,17 +1552,6 @@ "SphinxKnight" ] }, - "Learn/JavaScript/Building_blocks/조건문": { - "modified": "2020-08-19T22:28:52.853Z", - "contributors": [ - "ramgabi", - "ojongchul", - "JaeWorld", - "notypicalus", - "Jonnie-Lion", - "gsphyo91" - ] - }, "Learn/JavaScript/Client-side_web_APIs": { "modified": "2020-07-16T22:32:40.572Z", "contributors": [ @@ -2308,12 +1754,6 @@ "ahnzaz" ] }, - "Learn/JavaScript/Objects/얼마나_이해했는지_확인해보자:_JSON": { - "modified": "2020-12-11T06:49:49.006Z", - "contributors": [ - "constkey" - ] - }, "Learn/Server-side": { "modified": "2020-07-16T22:35:59.813Z", "contributors": [ @@ -2507,19 +1947,6 @@ "ByeongGi" ] }, - "Learn/Server-side/Express_Nodejs/개발_환경": { - "modified": "2020-12-14T05:06:35.489Z", - "contributors": [ - "junnapark", - "DDark" - ] - }, - "Learn/Server-side/Express_Nodejs/스켈레톤_웹사이트": { - "modified": "2020-07-16T22:38:05.117Z", - "contributors": [ - "SYCHOI" - ] - }, "Learn/Server-side/First_steps": { "modified": "2020-07-16T22:36:09.855Z", "contributors": [ @@ -2560,13 +1987,6 @@ "wafersroom" ] }, - "Learn/Skills": { - "modified": "2020-07-16T22:22:13.258Z", - "contributors": [ - "Netaras", - "KwanHong_Lee66" - ] - }, "Learn/Tools_and_testing": { "modified": "2020-07-16T22:38:56.112Z", "contributors": [ @@ -2599,49 +2019,6 @@ "04SeoHyun" ] }, - "Learn/Web_기술": { - "modified": "2020-07-16T22:22:13.488Z", - "contributors": [ - "zziuni", - "Netaras", - "teoli", - "cs09g" - ] - }, - "Learn/접근성": { - "modified": "2020-07-16T22:39:58.455Z", - "contributors": [ - "cs09g", - "seunghun" - ] - }, - "Learn/접근성/HTML": { - "modified": "2020-07-16T22:40:12.947Z", - "contributors": [ - "dev-dongwon" - ] - }, - "Learn/접근성/What_is_accessibility": { - "modified": "2020-07-16T22:40:05.805Z", - "contributors": [ - "seunghun" - ] - }, - "Learn/접근성/모바일": { - "modified": "2020-07-16T22:40:31.872Z", - "contributors": [ - "seunghun" - ] - }, - "Localization": { - "modified": "2019-03-23T23:49:35.627Z", - "contributors": [ - "teoli", - "Netaras", - "Unixcruiser", - "Gilchris" - ] - }, "MDN": { "modified": "2019-09-10T15:43:01.288Z", "contributors": [ @@ -2668,41 +2045,6 @@ "leosangwon" ] }, - "MDN/About/MDN_services": { - "modified": "2020-12-05T03:06:45.428Z", - "contributors": [ - "movegun1027" - ] - }, - "MDN/Community": { - "modified": "2020-03-03T01:53:44.470Z", - "contributors": [ - "SphinxKnight", - "alattalatta", - "wbamberg", - "gaucho1218", - "zziuni", - "unixforever", - "woojin.jo", - "cs09g" - ] - }, - "MDN/Community/Conversations": { - "modified": "2020-02-05T05:27:57.215Z", - "contributors": [ - "SphinxKnight", - "alattalatta", - "wbamberg", - "jswisher", - "woojin.jo" - ] - }, - "MDN/Community/Working_in_community": { - "modified": "2020-09-01T05:37:50.669Z", - "contributors": [ - "junnapark" - ] - }, "MDN/Contribute": { "modified": "2019-01-16T19:13:18.509Z", "contributors": [ @@ -2713,27 +2055,6 @@ "Sheppy" ] }, - "MDN/Contribute/Creating_and_editing_pages": { - "modified": "2019-03-23T23:13:39.002Z", - "contributors": [ - "wbamberg", - "kkokey", - "zziuni", - "naduhy2", - "nodejs", - "AlwaysOnce", - "KwanHong_Lee66" - ] - }, - "MDN/Contribute/Does_this_belong": { - "modified": "2019-01-16T19:22:53.277Z", - "contributors": [ - "wbamberg", - "zziuni", - "yssuh", - "leosangwon" - ] - }, "MDN/Contribute/Feedback": { "modified": "2020-09-30T17:51:50.022Z", "contributors": [ @@ -2777,35 +2098,6 @@ "Sheppy" ] }, - "MDN/Contribute/Howto/Do_a_technical_review": { - "modified": "2019-01-16T19:23:36.745Z", - "contributors": [ - "wbamberg", - "KwanHong_Lee66" - ] - }, - "MDN/Contribute/Howto/Do_an_editorial_review": { - "modified": "2019-03-23T22:50:43.806Z", - "contributors": [ - "wbamberg", - "Saru", - "peacekimjapan", - "sominlee", - "novelview9", - "woojin.jo", - "Epikem", - "misol" - ] - }, - "MDN/Contribute/Howto/MDN_계정_생성하기": { - "modified": "2019-01-16T19:16:28.756Z", - "contributors": [ - "wbamberg", - "chiyodad", - "Junbong", - "KwanHong_Lee66" - ] - }, "MDN/Contribute/Howto/Report_a_problem": { "modified": "2020-01-07T12:20:00.841Z", "contributors": [ @@ -2814,14 +2106,6 @@ "LimeClover" ] }, - "MDN/Contribute/Howto/Set_the_summary_for_a_page": { - "modified": "2019-03-23T23:14:13.204Z", - "contributors": [ - "zziuni", - "wbamberg", - "KwanHong_Lee66" - ] - }, "MDN/Contribute/Howto/Tag": { "modified": "2019-03-18T20:41:26.193Z", "contributors": [ @@ -2831,72 +2115,21 @@ "plzfday" ] }, - "MDN/Contribute/Howto/Tag_JavaScript_pages": { - "modified": "2019-01-17T00:11:42.268Z", + "MDN/Contribute/Processes": { + "modified": "2019-01-17T02:54:48.050Z", "contributors": [ "wbamberg", - "woojin.jo" + "zziuni" ] }, - "MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web": { - "modified": "2020-02-28T22:23:49.633Z", + "MDN/Guidelines": { + "modified": "2020-09-30T15:30:34.264Z", "contributors": [ + "chrisdavidmills", "wbamberg", - "Saru", - "2oosoo" - ] - }, - "MDN/Contribute/Howto/살아있는_코드_샘플로_변환하기": { - "modified": "2019-01-16T19:48:52.048Z", - "contributors": [ - "wbamberg", - "Junbong" - ] - }, - "MDN/Contribute/Processes": { - "modified": "2019-01-17T02:54:48.050Z", - "contributors": [ - "wbamberg", - "zziuni" - ] - }, - "MDN/Editor": { - "modified": "2020-09-30T15:42:29.661Z", - "contributors": [ - "chrisdavidmills", - "ehgus", - "wbamberg", - "zziuni", - "821065887131", - "sominlee", - "Netaras", - "Kaben", - "misol" - ] - }, - "MDN/Editor/Links": { - "modified": "2020-09-30T15:42:30.015Z", - "contributors": [ - "chrisdavidmills", - "honggaruy" - ] - }, - "MDN/Guidelines": { - "modified": "2020-09-30T15:30:34.264Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "zziuni", - "Netaras", - "Sheppy" - ] - }, - "MDN/Guidelines/Best_practices": { - "modified": "2020-09-30T15:30:34.436Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "Netaras" + "zziuni", + "Netaras", + "Sheppy" ] }, "MDN/Guidelines/Code_guidelines": { @@ -2912,35 +2145,6 @@ "java2020007" ] }, - "MDN/Guidelines/Code_guidelines/Code_guidelines": { - "modified": "2020-09-30T15:30:35.323Z", - "contributors": [ - "chrisdavidmills", - "honggaruy" - ] - }, - "MDN/Guidelines/Style_guide": { - "modified": "2020-09-30T15:30:35.279Z", - "contributors": [ - "chrisdavidmills", - "honggaruy", - "jswisher", - "alattalatta", - "wbamberg", - "sominlee", - "naduhy2", - "dale0713", - "epicsaga" - ] - }, - "MDN/Kuma": { - "modified": "2019-09-06T03:29:26.311Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "zziuni" - ] - }, "MDN/Structures": { "modified": "2020-09-30T12:56:35.534Z", "contributors": [ @@ -2951,20 +2155,6 @@ "hoony" ] }, - "MDN/Structures/API_references": { - "modified": "2020-09-30T12:56:35.705Z", - "contributors": [ - "chrisdavidmills", - "zziuni" - ] - }, - "MDN/Structures/API_references/API_reference_sidebars": { - "modified": "2020-09-30T12:56:35.846Z", - "contributors": [ - "chrisdavidmills", - "zziuni" - ] - }, "MDN/Structures/Compatibility_tables": { "modified": "2020-10-15T22:03:04.448Z", "contributors": [ @@ -3018,28 +2208,6 @@ "Silvermist" ] }, - "MDN/Tools/페이지_재생성": { - "modified": "2020-09-30T16:51:25.059Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "Netaras" - ] - }, - "MDN/User_guide": { - "modified": "2019-01-16T20:50:22.654Z", - "contributors": [ - "wbamberg", - "andrewJYjang" - ] - }, - "MDN_at_ten": { - "modified": "2019-03-23T22:41:30.825Z", - "contributors": [ - "LimeClover", - "jefflee0127" - ] - }, "Mozilla": { "modified": "2019-03-23T23:35:24.435Z", "contributors": [ @@ -3095,43 +2263,6 @@ "grizlupo" ] }, - "Mozilla/Add-ons/WebExtensions/API/contextMenus": { - "modified": "2020-10-15T21:53:39.975Z", - "contributors": [ - "SphinxKnight", - "grizlupo", - "wbamberg", - "hoony" - ] - }, - "Mozilla/Add-ons/WebExtensions/API/contextMenus/ContextType": { - "modified": "2020-10-15T22:14:46.556Z", - "contributors": [ - "SphinxKnight", - "grizlupo" - ] - }, - "Mozilla/Add-ons/WebExtensions/API/contextMenus/create": { - "modified": "2020-10-15T22:14:49.550Z", - "contributors": [ - "SphinxKnight", - "grizlupo" - ] - }, - "Mozilla/Add-ons/WebExtensions/API/contextMenus/getTargetElement": { - "modified": "2020-10-15T22:14:45.950Z", - "contributors": [ - "SphinxKnight", - "grizlupo" - ] - }, - "Mozilla/Add-ons/WebExtensions/API/contextMenus/onShown": { - "modified": "2020-10-15T22:14:49.769Z", - "contributors": [ - "SphinxKnight", - "grizlupo" - ] - }, "Mozilla/Add-ons/WebExtensions/API/pageAction": { "modified": "2020-10-15T22:14:47.058Z", "contributors": [ @@ -3404,319 +2535,123 @@ "niceman114" ] }, - "Mozilla_Source_Code_Via_CVS": { - "modified": "2019-03-23T23:42:11.059Z", + "Tools": { + "modified": "2020-07-16T22:44:16.209Z", "contributors": [ - "teoli", - "NoBrain" + "SphinxKnight", + "desty", + "hoony", + "devleoper", + "Junbong", + "Feb30th", + "JeongSeongDae", + "loslch", + "JHKinkorea" ] }, - "Navigation_timing": { - "modified": "2019-03-23T23:19:34.117Z", + "Tools/Debugger": { + "modified": "2020-07-16T22:35:05.164Z", "contributors": [ - "sbnet21" + "SphinxKnight", + "wbamberg", + "toyuq", + "nacyot", + "gblue1223" ] }, - "Node_server_without_framework": { - "modified": "2020-07-16T22:36:05.665Z", + "Tools/Debugger/UI_Tour": { + "modified": "2020-07-16T22:35:16.703Z", "contributors": [ - "kidkkr" + "SphinxKnight", + "wbamberg", + "toyuq" ] }, - "Notable_bugs_fixed_in_Firefox_3": { - "modified": "2019-03-23T23:51:11.073Z", + "Tools/Network_Monitor": { + "modified": "2020-07-16T22:35:30.711Z", "contributors": [ - "teoli", - "Jeongkyu" + "SphinxKnight", + "yeonjukim", + "wicksome" ] }, - "Places/Custom_Containers": { - "modified": "2020-01-12T05:08:34.067Z", + "Tools/Page_Inspector": { + "modified": "2020-07-16T22:34:28.500Z", "contributors": [ - "alattalatta", + "SphinxKnight", "wbamberg", - "Jeongkyu" + "stitchworkingonthecode" ] }, - "Places/Instantiating_Views": { - "modified": "2020-01-12T05:08:39.519Z", + "Tools/Page_Inspector/UI_Tour": { + "modified": "2020-07-16T22:34:49.329Z", "contributors": [ - "alattalatta", + "SphinxKnight", "wbamberg", - "Jeongkyu" + "stitchworkingonthecode" ] }, - "Places/Query_System": { - "modified": "2019-04-20T03:50:18.185Z", + "Tools/Performance": { + "modified": "2020-07-16T22:36:13.082Z", "contributors": [ + "SphinxKnight", "wbamberg", - "teoli", - "Jeongkyu" + "nacyot", + "gblue1223", + "roupkk", + "H-yun" ] }, - "Places/Views": { - "modified": "2020-01-12T05:08:46.290Z", + "Tools/Performance/UI_Tour": { + "modified": "2020-07-16T22:36:15.183Z", "contributors": [ - "alattalatta", + "SphinxKnight", "wbamberg", - "Jeongkyu" - ] - }, - "SVG_improvements_in_Firefox_3": { - "modified": "2019-03-23T23:51:12.606Z", - "contributors": [ - "teoli", - "Suguni" + "OhSeungHyeon" ] }, - "SVG_in_Firefox": { - "modified": "2019-03-23T23:41:45.344Z", + "Tools/Remote_Debugging": { + "modified": "2020-07-16T22:35:37.664Z", "contributors": [ - "teoli", - "Cliffet", - "taggon" + "SphinxKnight", + "wbamberg", + "nacyot", + "Zzpeehyun", + "Pinkminj", + "crankup78" ] }, - "Scripting_Plugins": { - "modified": "2019-01-16T15:11:14.478Z", + "Tools/Remote_Debugging/Firefox_for_Android": { + "modified": "2020-07-16T22:35:39.309Z", "contributors": [ - "teoli", - "Anonymous" + "SphinxKnight", + "wbamberg", + "thqkrdl502" ] }, - "The_DOM_and_JavaScript": { - "modified": "2019-12-13T21:09:57.295Z", + "Tools/Web_Console": { + "modified": "2020-07-16T22:34:06.575Z", "contributors": [ + "SphinxKnight", "wbamberg", - "Netaras", - "Sebuls" + "Blackcoffee" ] }, - "Theme_Packaging": { - "modified": "2019-03-23T23:42:36.273Z", + "Web": { + "modified": "2020-02-16T02:49:58.384Z", "contributors": [ - "teoli", - "애들아빠" - ] - }, - "Tips_for_Authoring_Fast-loading_HTML_Pages": { - "modified": "2020-07-16T22:22:33.009Z", - "contributors": [ - "ybin", - "teoli", - "Jeongsw", - "Sebuls" - ] - }, - "Tools": { - "modified": "2020-07-16T22:44:16.209Z", - "contributors": [ - "SphinxKnight", - "desty", - "hoony", - "devleoper", - "Junbong", - "Feb30th", - "JeongSeongDae", - "loslch", - "JHKinkorea" - ] - }, - "Tools/Add-ons": { - "modified": "2020-07-16T22:36:23.557Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "mfluehr" - ] - }, - "Tools/Add-ons/DOM_Inspector": { - "modified": "2020-07-16T22:36:24.511Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "Sebuls" - ] - }, - "Tools/Debugger": { - "modified": "2020-07-16T22:35:05.164Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "toyuq", - "nacyot", - "gblue1223" - ] - }, - "Tools/Debugger/UI_Tour": { - "modified": "2020-07-16T22:35:16.703Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "toyuq" - ] - }, - "Tools/Debugger/단축키": { - "modified": "2020-07-16T22:35:18.793Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "toyuq" - ] - }, - "Tools/How_to": { - "modified": "2020-07-16T22:35:07.978Z", - "contributors": [ - "SphinxKnight", - "wbamberg" - ] - }, - "Tools/How_to/Open_the_debugger": { - "modified": "2020-07-16T22:35:09.268Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "toyuq", - "galcyurio" - ] - }, - "Tools/How_to/Search": { - "modified": "2020-07-16T22:35:15.581Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "toyuq" - ] - }, - "Tools/How_to/Set_a_breakpoint": { - "modified": "2020-07-16T22:35:10.232Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "toyuq" - ] - }, - "Tools/Network_Monitor": { - "modified": "2020-07-16T22:35:30.711Z", - "contributors": [ - "SphinxKnight", - "yeonjukim", - "wicksome" - ] - }, - "Tools/Page_Inspector": { - "modified": "2020-07-16T22:34:28.500Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "stitchworkingonthecode" - ] - }, - "Tools/Page_Inspector/UI_Tour": { - "modified": "2020-07-16T22:34:49.329Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "stitchworkingonthecode" - ] - }, - "Tools/Performance": { - "modified": "2020-07-16T22:36:13.082Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "nacyot", - "gblue1223", - "roupkk", - "H-yun" - ] - }, - "Tools/Performance/UI_Tour": { - "modified": "2020-07-16T22:36:15.183Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "OhSeungHyeon" - ] - }, - "Tools/Remote_Debugging": { - "modified": "2020-07-16T22:35:37.664Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "nacyot", - "Zzpeehyun", - "Pinkminj", - "crankup78" - ] - }, - "Tools/Remote_Debugging/Firefox_for_Android": { - "modified": "2020-07-16T22:35:39.309Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "thqkrdl502" - ] - }, - "Tools/Web_Console": { - "modified": "2020-07-16T22:34:06.575Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "Blackcoffee" - ] - }, - "Updating_extensions_for_Firefox_2": { - "modified": "2019-03-23T23:47:28.581Z", - "contributors": [ - "Channy" - ] - }, - "Updating_extensions_for_Firefox_3": { - "modified": "2019-12-13T20:35:48.646Z", - "contributors": [ - "wbamberg", - "Sheppy", - "Suguni" - ] - }, - "Updating_web_applications_for_Firefox_3": { - "modified": "2019-03-23T23:50:12.740Z", - "contributors": [ - "wbamberg", - "teoli", - "Sheppy", - "Channy" - ] - }, - "Using_Mozilla_in_Testing_and_Debugging_Web_Sites": { - "modified": "2019-03-23T23:13:10.960Z", - "contributors": [ - "cap3618" - ] - }, - "Using_XPath": { - "modified": "2019-01-16T14:19:09.939Z", - "contributors": [ - "kmaglione", - "Gilchris" - ] - }, - "Web": { - "modified": "2020-02-16T02:49:58.384Z", - "contributors": [ - "lundella", - "alattalatta", - "ehgus", - "limkukhyun", - "project42da", - "zziuni", - "tamnajio", - "young-gratia", - "pjc0247", - "stephenjang", - "Channy", - "ethertank" + "lundella", + "alattalatta", + "ehgus", + "limkukhyun", + "project42da", + "zziuni", + "tamnajio", + "young-gratia", + "pjc0247", + "stephenjang", + "Channy", + "ethertank" ] }, "Web/API": { @@ -4523,12 +3458,6 @@ "cs09g" ] }, - "Web/API/Document/getSelection": { - "modified": "2019-03-23T22:51:22.015Z", - "contributors": [ - "x86kernel" - ] - }, "Web/API/Document/hasFocus": { "modified": "2020-10-15T21:16:21.345Z", "contributors": [ @@ -4758,16 +3687,6 @@ "kimploo" ] }, - "Web/API/Document_Object_Model/소개": { - "modified": "2020-02-10T04:12:58.179Z", - "contributors": [ - "sungik-choi", - "jswisher", - "cs09g", - "2circumflex", - "dakeshi" - ] - }, "Web/API/DragEvent": { "modified": "2020-10-15T22:02:04.580Z", "contributors": [ @@ -4786,12 +3705,6 @@ "junghyun_han" ] }, - "Web/API/Element/accessKey": { - "modified": "2020-10-15T22:14:28.158Z", - "contributors": [ - "cs09g" - ] - }, "Web/API/Element/attributes": { "modified": "2019-03-23T23:42:26.377Z", "contributors": [ @@ -4984,12 +3897,6 @@ "99corps" ] }, - "Web/API/Event/createEvent": { - "modified": "2019-03-23T22:23:08.290Z", - "contributors": [ - "agakt" - ] - }, "Web/API/Event/eventPhase": { "modified": "2019-03-23T22:03:57.060Z", "contributors": [ @@ -5118,21 +4025,6 @@ "BANIP" ] }, - "Web/API/Fetch_API/Fetch의_사용법": { - "modified": "2020-10-15T22:00:18.673Z", - "contributors": [ - "JINSUNG1048", - "CressZZ", - "LiamYong", - "ajy720", - "limkukhyun", - "briz", - "mukeunzi", - "real0131", - "2dubbing", - "BANIP" - ] - }, "Web/API/File": { "modified": "2020-10-15T22:10:43.496Z", "contributors": [ @@ -5487,15 +4379,6 @@ "alattalatta" ] }, - "Web/API/HTMLElement/dataset": { - "modified": "2020-10-15T21:56:46.705Z", - "contributors": [ - "Kaben", - "alattalatta", - "jyhwng", - "KimSejune" - ] - }, "Web/API/HTMLElement/input_event": { "modified": "2020-10-15T22:27:30.949Z", "contributors": [ @@ -5515,27 +4398,8 @@ "EugeneKim" ] }, - "Web/API/HTMLElement/style": { - "modified": "2020-10-15T21:18:22.703Z", - "contributors": [ - "alattalatta", - "fscholz", - "AshfaqHossain", - "teoli", - "Netaras" - ] - }, - "Web/API/HTMLElement/tabIndex": { - "modified": "2019-03-23T23:42:52.929Z", - "contributors": [ - "fscholz", - "jsx", - "teoli", - "Netaras" - ] - }, - "Web/API/HTMLFormElement": { - "modified": "2020-10-15T21:18:27.982Z", + "Web/API/HTMLFormElement": { + "modified": "2020-10-15T21:18:27.982Z", "contributors": [ "alattalatta", "fscholz", @@ -5653,22 +4517,6 @@ "ahnzaz" ] }, - "Web/API/HTML_드래그_앤_드롭_API": { - "modified": "2020-09-06T00:51:11.619Z", - "contributors": [ - "zzoPark", - "jinyoung", - "constmoon", - "lundella", - "jinhyukkim" - ] - }, - "Web/API/HTML_드래그_앤_드롭_API/Drag_operations": { - "modified": "2019-03-18T21:31:26.321Z", - "contributors": [ - "dolmoon" - ] - }, "Web/API/History": { "modified": "2020-10-15T21:46:21.001Z", "contributors": [ @@ -6127,15 +4975,6 @@ "fscholz" ] }, - "Web/API/NetworkInformation/connection": { - "modified": "2019-03-23T23:26:48.403Z", - "contributors": [ - "fscholz", - "khalid32", - "teoli", - "hyeonseok" - ] - }, "Web/API/Node": { "modified": "2020-10-15T21:33:01.643Z", "contributors": [ @@ -6191,13 +5030,6 @@ "simonseo" ] }, - "Web/API/Node/innerText": { - "modified": "2020-10-15T22:08:26.441Z", - "contributors": [ - "alattalatta", - "DeadIntegral" - ] - }, "Web/API/Node/insertBefore": { "modified": "2020-10-15T22:11:13.634Z", "contributors": [ @@ -6791,14 +5623,6 @@ "fscholz" ] }, - "Web/API/Screen.onorientationchange": { - "modified": "2019-03-23T23:26:53.977Z", - "contributors": [ - "jsx", - "teoli", - "junho85" - ] - }, "Web/API/Screen/lockOrientation": { "modified": "2020-10-15T21:24:21.814Z", "contributors": [ @@ -6978,12 +5802,6 @@ "CressZZ" ] }, - "Web/API/Streams_API/컨셉": { - "modified": "2019-03-18T21:23:57.078Z", - "contributors": [ - "jjangga0214" - ] - }, "Web/API/StyleSheet": { "modified": "2020-10-15T22:34:31.946Z", "contributors": [ @@ -7264,13 +6082,6 @@ "woojin.jo" ] }, - "Web/API/WebGL_API/Cross-Domain_Textures": { - "modified": "2019-03-23T22:54:05.275Z", - "contributors": [ - "fscholz", - "hanmomhanda" - ] - }, "Web/API/WebGL_API/Tutorial": { "modified": "2020-06-18T10:46:16.746Z", "contributors": [ @@ -7463,16 +6274,6 @@ "Konan" ] }, - "Web/API/Web_Workers_API/basic_usage": { - "modified": "2020-04-03T02:58:31.932Z", - "contributors": [ - "dh", - "roupkk", - "andrewsohn", - "NFM", - "epicsaga" - ] - }, "Web/API/Window": { "modified": "2020-10-15T21:17:36.416Z", "contributors": [ @@ -7835,13 +6636,6 @@ "alattalatta" ] }, - "Web/API/WindowTimers/setTimeout": { - "modified": "2019-03-23T22:22:22.449Z", - "contributors": [ - "DevJang", - "TroyTae" - ] - }, "Web/API/Worker": { "modified": "2020-10-15T21:47:12.252Z", "contributors": [ @@ -7891,15 +6685,6 @@ "kidkkr" ] }, - "Web/API/XMLHttpRequest/timeout": { - "modified": "2019-05-28T20:54:41.611Z", - "contributors": [ - "jswisher", - "wbamberg", - "ExE-Boss", - "DeadIntegral" - ] - }, "Web/API/XMLHttpRequest/upload": { "modified": "2020-10-15T22:30:03.395Z", "contributors": [ @@ -8259,34 +7044,6 @@ "cvrebert" ] }, - "Web/CSS/@viewport/height": { - "modified": "2020-10-15T21:46:24.032Z", - "contributors": [ - "alattalatta", - "Netaras" - ] - }, - "Web/CSS/@viewport/viewport-fit": { - "modified": "2020-10-15T22:22:51.969Z", - "contributors": [ - "chayeoi", - "SphinxKnight" - ] - }, - "Web/CSS/@viewport/zoom": { - "modified": "2020-10-15T21:46:22.320Z", - "contributors": [ - "alattalatta", - "Netaras" - ] - }, - "Web/CSS/All_About_The_Containing_Block": { - "modified": "2020-01-07T10:38:47.261Z", - "contributors": [ - "alattalatta", - "nyxchung" - ] - }, "Web/CSS/Alternative_style_sheets": { "modified": "2019-03-23T23:52:49.065Z", "contributors": [ @@ -8345,14 +7102,6 @@ "alattalatta" ] }, - "Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds": { - "modified": "2019-03-23T23:37:37.611Z", - "contributors": [ - "teoli", - "Inyoung", - "jaemin_jo" - ] - }, "Web/CSS/CSS_Backgrounds_and_Borders": { "modified": "2020-08-10T06:40:27.369Z", "contributors": [ @@ -8360,13 +7109,6 @@ "Sheppy" ] }, - "Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images": { - "modified": "2019-04-08T10:28:17.719Z", - "contributors": [ - "alattalatta", - "jyqry" - ] - }, "Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds": { "modified": "2019-05-02T02:39:15.426Z", "contributors": [ @@ -8469,24 +7211,6 @@ "beowolf9" ] }, - "Web/CSS/CSS_Flexible_Box_Layout/Flexbox의_기본_개념": { - "modified": "2019-03-18T20:55:20.567Z", - "contributors": [ - "5JJ", - "joeunha", - "beowolf9", - "silmari", - "soonoo", - "wankyu", - "Latera" - ] - }, - "Web/CSS/CSS_Flexible_Box_Layout/가변상자의_대표적인_사용례": { - "modified": "2019-10-04T18:40:14.389Z", - "contributors": [ - "Hwan-Woong-Lee" - ] - }, "Web/CSS/CSS_Flow_Layout": { "modified": "2020-10-25T09:14:50.404Z", "contributors": [ @@ -8502,31 +7226,6 @@ "cybaj" ] }, - "Web/CSS/CSS_Flow_Layout/대열과_탈대열": { - "modified": "2019-09-24T15:45:35.513Z", - "contributors": [ - "Hwan-Woong-Lee" - ] - }, - "Web/CSS/CSS_Flow_Layout/일반_흐름_속_블록_및_인라인_레이아웃": { - "modified": "2019-09-26T08:28:44.702Z", - "contributors": [ - "Hwan-Woong-Lee" - ] - }, - "Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_쓰기_모드": { - "modified": "2019-09-17T21:10:09.773Z", - "contributors": [ - "Hwan-Woong-Lee" - ] - }, - "Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_오버플로": { - "modified": "2020-03-10T09:52:12.477Z", - "contributors": [ - "EricByHPHK", - "Hwan-Woong-Lee" - ] - }, "Web/CSS/CSS_Fonts": { "modified": "2019-04-25T10:51:28.269Z", "contributors": [ @@ -8631,13 +7330,6 @@ "Netaras" ] }, - "Web/CSS/CSS_Masks": { - "modified": "2019-04-26T08:55:40.990Z", - "contributors": [ - "alattalatta", - "Netaras" - ] - }, "Web/CSS/CSS_Miscellaneous": { "modified": "2019-03-23T22:32:29.213Z", "contributors": [ @@ -8840,12 +7532,6 @@ "Netaras" ] }, - "Web/CSS/CSS_단위와_값": { - "modified": "2020-11-29T04:33:10.671Z", - "contributors": [ - "alanhchoi" - ] - }, "Web/CSS/Cascade": { "modified": "2019-03-23T22:13:24.690Z", "contributors": [ @@ -8871,12 +7557,6 @@ "alattalatta" ] }, - "Web/CSS/Common_CSS_Questions": { - "modified": "2020-07-16T22:25:45.337Z", - "contributors": [ - "miyunim" - ] - }, "Web/CSS/Descendant_combinator": { "modified": "2020-10-15T22:25:55.745Z", "contributors": [ @@ -8895,32 +7575,12 @@ "alattalatta" ] }, - "Web/CSS/Getting_Started/JavaScript": { - "modified": "2019-03-23T23:41:58.615Z", - "contributors": [ - "teoli", - "Ioseph" - ] - }, - "Web/CSS/Getting_Started/SVG_graphics": { - "modified": "2019-03-23T23:41:56.694Z", - "contributors": [ - "teoli", - "Ioseph" - ] - }, "Web/CSS/ID_selectors": { "modified": "2020-10-15T22:16:17.946Z", "contributors": [ "alattalatta" ] }, - "Web/CSS/Index": { - "modified": "2019-05-26T05:51:14.395Z", - "contributors": [ - "alattalatta" - ] - }, "Web/CSS/Layout_mode": { "modified": "2020-08-05T01:05:50.434Z", "contributors": [ @@ -8975,16 +7635,6 @@ "Pastelgrim" ] }, - "Web/CSS/Reference/Property_Template": { - "modified": "2020-10-15T21:16:53.027Z", - "contributors": [ - "alattalatta", - "wbamberg", - "chrisdavidmills", - "teoli", - "Pastelgrim" - ] - }, "Web/CSS/Replaced_element": { "modified": "2020-08-05T01:03:55.719Z", "contributors": [ @@ -9479,15 +8129,6 @@ "claudepache" ] }, - "Web/CSS/cursor/Using_URL_values_for_the_cursor_property": { - "modified": "2019-03-23T23:41:42.325Z", - "contributors": [ - "hjunshin", - "teoli", - "jaemin_jo", - "Ioseph" - ] - }, "Web/CSS/display": { "modified": "2020-10-15T22:17:25.714Z", "contributors": [ @@ -10085,12 +8726,6 @@ "Netaras" ] }, - "Web/CSS/url": { - "modified": "2020-10-15T22:10:55.121Z", - "contributors": [ - "alattalatta" - ] - }, "Web/CSS/used_value": { "modified": "2020-01-07T12:50:25.214Z", "contributors": [ @@ -10164,140 +8799,40 @@ "jaemin_jo" ] }, - "Web/CSS/시작하기/리스트": { - "modified": "2019-03-23T23:33:11.239Z", - "contributors": [ - "teoli", - "SpikeYou" - ] - }, - "Web/CSS/시작하기/미디어": { - "modified": "2019-03-23T23:33:02.082Z", + "Web/EXSLT": { + "modified": "2019-03-23T23:51:10.063Z", "contributors": [ + "ExE-Boss", "teoli", - "SpikeYou" + "Suguni" ] }, - "Web/CSS/시작하기/배치": { - "modified": "2019-03-23T23:33:01.592Z", + "Web/Events": { + "modified": "2020-06-19T02:46:52.355Z", "contributors": [ - "yooonmi", + "bumday", + "wbamberg", + "cs09g", + "ExE-Boss", + "alattalatta", + "nacyot", "teoli", - "SpikeYou" + "Jeremie" ] }, - "Web/CSS/시작하기/상자": { - "modified": "2019-03-23T23:33:01.323Z", + "Web/Guide": { + "modified": "2019-03-23T23:28:18.945Z", "contributors": [ - "yooonmi", - "teoli", - "SpikeYou" + "digimon1740", + "stephenjang", + "moolow", + "haruair", + "Sheppy", + "jjangsuhyun" ] }, - "Web/CSS/시작하기/종속과_상속": { - "modified": "2019-03-23T23:33:16.790Z", - "contributors": [ - "ElleXD", - "teoli", - "SpikeYou" - ] - }, - "Web/CSS/시작하기/테이블": { - "modified": "2019-03-23T23:33:00.475Z", - "contributors": [ - "teoli", - "SpikeYou" - ] - }, - "Web/CSS/시작하기/텍스트_스타일": { - "modified": "2019-03-23T23:33:09.659Z", - "contributors": [ - "yooonmi", - "teoli", - "SpikeYou" - ] - }, - "Web/CSS/인접_형제_선택자": { - "modified": "2020-10-15T21:53:17.801Z", - "contributors": [ - "alattalatta", - "neatnet" - ] - }, - "Web/EXSLT": { - "modified": "2019-03-23T23:51:10.063Z", - "contributors": [ - "ExE-Boss", - "teoli", - "Suguni" - ] - }, - "Web/Events": { - "modified": "2020-06-19T02:46:52.355Z", - "contributors": [ - "bumday", - "wbamberg", - "cs09g", - "ExE-Boss", - "alattalatta", - "nacyot", - "teoli", - "Jeremie" - ] - }, - "Web/Events/DOMContentLoaded": { - "modified": "2020-12-03T14:42:33.988Z", - "contributors": [ - "dink95", - "alattalatta", - "wbamberg", - "ExE-Boss", - "project42da" - ] - }, - "Web/Events/abort": { - "modified": "2019-04-30T14:12:00.284Z", - "contributors": [ - "wbamberg", - "guyeol" - ] - }, - "Web/Events/blur": { - "modified": "2019-03-18T21:27:20.806Z", - "contributors": [ - "ExE-Boss", - "whdckszxxx" - ] - }, - "Web/Events/load": { - "modified": "2019-04-30T14:18:11.441Z", - "contributors": [ - "wbamberg", - "ExE-Boss", - "SuminNoh" - ] - }, - "Web/Events/message": { - "modified": "2019-04-30T14:16:28.259Z", - "contributors": [ - "wbamberg", - "ExE-Boss", - "JinSeungHo" - ] - }, - "Web/Guide": { - "modified": "2019-03-23T23:28:18.945Z", - "contributors": [ - "digimon1740", - "stephenjang", - "moolow", - "haruair", - "Sheppy", - "jjangsuhyun" - ] - }, - "Web/Guide/AJAX": { - "modified": "2020-11-05T10:30:10.859Z", + "Web/Guide/AJAX": { + "modified": "2020-11-05T10:30:10.859Z", "contributors": [ "alattalatta", "duduindo", @@ -10339,15 +8874,6 @@ "Sheppy" ] }, - "Web/Guide/API/Vibration/Vibration": { - "modified": "2020-10-15T21:24:18.629Z", - "contributors": [ - "alattalatta", - "pjc0247", - "Sheppy", - "yunji_koh" - ] - }, "Web/Guide/Audio_and_video_delivery": { "modified": "2019-04-17T05:03:01.108Z" }, @@ -10365,49 +8891,6 @@ "corps99" ] }, - "Web/Guide/CSS/Media_queries": { - "modified": "2020-11-10T11:07:52.526Z", - "contributors": [ - "hKa2020", - "alattalatta", - "hwanseung", - "BANIP", - "seoyunho", - "Ground-Silver0903", - "Sebastianz", - "roupkk", - "mrstork", - "malayaleecoder", - "jooddang", - "jhonghee" - ] - }, - "Web/Guide/CSS/Visual_formatting_model": { - "modified": "2019-09-26T13:57:16.375Z", - "contributors": [ - "Hwan-Woong-Lee", - "nyxchung", - "cmygray", - "cheeee", - "dotorify", - "hotsummmer", - "JeongSeongDae" - ] - }, - "Web/Guide/DOM": { - "modified": "2019-03-23T23:26:56.400Z", - "contributors": [ - "Sheppy" - ] - }, - "Web/Guide/DOM/Using_full_screen_mode": { - "modified": "2020-10-15T21:24:24.180Z", - "contributors": [ - "DeadIntegral", - "wbamberg", - "junho85" - ] - }, "Web/Guide/Events": { "modified": "2019-03-23T23:03:35.888Z", "contributors": [ @@ -10426,12 +8909,6 @@ "PineMt" ] }, - "Web/Guide/HTML/Content_Editable": { - "modified": "2019-03-23T22:40:12.545Z", - "contributors": [ - "gblue1223" - ] - }, "Web/Guide/HTML/Content_categories": { "modified": "2020-07-29T11:16:44.120Z", "contributors": [ @@ -10467,20 +8944,6 @@ "jinah1000" ] }, - "Web/Guide/XML_파싱_및_직렬화": { - "modified": "2019-03-23T22:16:47.020Z", - "contributors": [ - "young-gratia" - ] - }, - "Web/Guide/그래픽": { - "modified": "2020-02-15T07:39:57.101Z", - "contributors": [ - "Netaras", - "hyeonseok", - "narae_lee" - ] - }, "Web/HTML": { "modified": "2020-02-08T07:58:05.821Z", "contributors": [ @@ -10544,214 +9007,97 @@ "proost" ] }, - "Web/HTML/Canvas": { - "modified": "2020-02-05T06:54:04.340Z", + "Web/HTML/Element": { + "modified": "2020-03-20T02:38:46.890Z", "contributors": [ "alattalatta", - "chungheepark", - "bluewings", - "cs09g", - "Netaras", + "jongin", + "sangwoo", + "azunyan3", "teoli", - "ethertank", - "dextra", - "Suguni" + "arkido82@gmail.com", + "Gilchris" ] }, - "Web/HTML/Canvas/Manipulating_video_using_canvas": { - "modified": "2019-06-05T03:56:50.784Z", + "Web/HTML/Element/Heading_Elements": { + "modified": "2020-10-15T21:34:54.387Z", "contributors": [ - "Yeri-Kim" + "alattalatta", + "Kaben", + "azunyan3" ] }, - "Web/HTML/Canvas/Tutorial": { - "modified": "2019-09-23T23:04:58.681Z", + "Web/HTML/Element/Input": { + "modified": "2020-12-02T21:46:52.605Z", "contributors": [ - "dbwodlf3", + "hKa2020", + "xkitchenkay", "alattalatta", - "danhojin", - "MuhunKim", - "donghyun", - "AlwaysOnce" + "JacieKim0", + "azunyan3" ] }, - "Web/HTML/Canvas/Tutorial/Advanced_animations": { - "modified": "2020-12-05T09:44:35.831Z", + "Web/HTML/Element/Input/button": { + "modified": "2020-10-15T22:09:45.262Z", "contributors": [ - "minthing" + "alattalatta", + "JaeWorld" ] }, - "Web/HTML/Canvas/Tutorial/Applying_styles_and_colors": { - "modified": "2019-10-10T16:32:24.689Z", + "Web/HTML/Element/Input/date": { + "modified": "2020-10-15T22:27:19.955Z", "contributors": [ - "kbsbroad", - "sujilee91", - "donghyun", - "Sebastianz", - "AlwaysOnce" + "alattalatta" ] }, - "Web/HTML/Canvas/Tutorial/Basic_animations": { - "modified": "2019-03-25T03:54:23.486Z", + "Web/HTML/Element/Input/file": { + "modified": "2020-10-15T21:55:47.622Z", "contributors": [ - "AlwaysOnce" + "alattalatta", + "onlydel", + "Neibce", + "Han_jongbae" ] }, - "Web/HTML/Canvas/Tutorial/Basic_usage": { - "modified": "2019-12-12T22:32:43.483Z", + "Web/HTML/Element/Input/radio": { + "modified": "2020-10-15T22:28:50.867Z", "contributors": [ - "kbsbroad", - "OkHyeon", - "sujilee91", - "MuhunKim" + "alattalatta" ] }, - "Web/HTML/Canvas/Tutorial/Compositing": { - "modified": "2019-03-23T23:08:47.571Z", + "Web/HTML/Element/Video": { + "modified": "2020-10-15T21:14:28.732Z", "contributors": [ - "EatChangmyeong", - "AlwaysOnce" + "alattalatta", + "wbamberg", + "pineoc", + "kw8799", + "Kaben", + "hyeonseok", + "teoli", + "Suguni" ] }, - "Web/HTML/Canvas/Tutorial/Compositing/Example": { - "modified": "2019-03-18T21:40:09.058Z", + "Web/HTML/Element/a": { + "modified": "2020-10-15T21:16:16.368Z", "contributors": [ - "EatChangmyeong" + "alattalatta", + "darongE", + "lovefield", + "pelly_ryu", + "Kaben", + "teoli", + "Basix", + "azunyan3", + "Jeongkyu" ] }, - "Web/HTML/Canvas/Tutorial/Drawing_shapes": { - "modified": "2019-03-25T03:42:34.299Z", + "Web/HTML/Element/abbr": { + "modified": "2020-10-15T21:35:00.433Z", "contributors": [ - "kbsbroad", - "sujilee91" - ] - }, - "Web/HTML/Canvas/Tutorial/Finale": { - "modified": "2020-12-02T07:47:45.530Z", - "contributors": [ - "chzhclq17" - ] - }, - "Web/HTML/Canvas/Tutorial/Hit_regions_and_accessibility": { - "modified": "2019-03-18T21:18:34.778Z", - "contributors": [ - "kbsbroad" - ] - }, - "Web/HTML/Canvas/Tutorial/Optimizing_canvas": { - "modified": "2020-06-04T04:24:50.578Z", - "contributors": [ - "composite", - "kbsbroad" - ] - }, - "Web/HTML/Canvas/Tutorial/Using_images": { - "modified": "2020-06-18T07:33:39.788Z", - "contributors": [ - "dooyou21", - "cs09g", - "kbsbroad", - "klight1994", - "sujilee91" - ] - }, - "Web/HTML/Canvas/Tutorial/변형": { - "modified": "2019-03-18T21:20:50.794Z", - "contributors": [ - "jinah1000" - ] - }, - "Web/HTML/Element": { - "modified": "2020-03-20T02:38:46.890Z", - "contributors": [ - "alattalatta", - "jongin", - "sangwoo", - "azunyan3", - "teoli", - "arkido82@gmail.com", - "Gilchris" - ] - }, - "Web/HTML/Element/Heading_Elements": { - "modified": "2020-10-15T21:34:54.387Z", - "contributors": [ - "alattalatta", - "Kaben", - "azunyan3" - ] - }, - "Web/HTML/Element/Input": { - "modified": "2020-12-02T21:46:52.605Z", - "contributors": [ - "hKa2020", - "xkitchenkay", - "alattalatta", - "JacieKim0", - "azunyan3" - ] - }, - "Web/HTML/Element/Input/button": { - "modified": "2020-10-15T22:09:45.262Z", - "contributors": [ - "alattalatta", - "JaeWorld" - ] - }, - "Web/HTML/Element/Input/date": { - "modified": "2020-10-15T22:27:19.955Z", - "contributors": [ - "alattalatta" - ] - }, - "Web/HTML/Element/Input/file": { - "modified": "2020-10-15T21:55:47.622Z", - "contributors": [ - "alattalatta", - "onlydel", - "Neibce", - "Han_jongbae" - ] - }, - "Web/HTML/Element/Input/radio": { - "modified": "2020-10-15T22:28:50.867Z", - "contributors": [ - "alattalatta" - ] - }, - "Web/HTML/Element/Video": { - "modified": "2020-10-15T21:14:28.732Z", - "contributors": [ - "alattalatta", - "wbamberg", - "pineoc", - "kw8799", - "Kaben", - "hyeonseok", - "teoli", - "Suguni" - ] - }, - "Web/HTML/Element/a": { - "modified": "2020-10-15T21:16:16.368Z", - "contributors": [ - "alattalatta", - "darongE", - "lovefield", - "pelly_ryu", - "Kaben", - "teoli", - "Basix", - "azunyan3", - "Jeongkyu" - ] - }, - "Web/HTML/Element/abbr": { - "modified": "2020-10-15T21:35:00.433Z", - "contributors": [ - "alattalatta", - "Kaben", - "azunyan3" + "alattalatta", + "Kaben", + "azunyan3" ] }, "Web/HTML/Element/address": { @@ -10907,13 +9253,6 @@ "azunyan3" ] }, - "Web/HTML/Element/command": { - "modified": "2020-10-15T21:44:01.823Z", - "contributors": [ - "alattalatta", - "Rich_Village" - ] - }, "Web/HTML/Element/content": { "modified": "2020-10-15T21:35:22.751Z", "contributors": [ @@ -10999,13 +9338,6 @@ "azunyan3" ] }, - "Web/HTML/Element/element": { - "modified": "2020-10-15T21:35:22.163Z", - "contributors": [ - "alattalatta", - "azunyan3" - ] - }, "Web/HTML/Element/em": { "modified": "2020-10-15T21:36:03.360Z", "contributors": [ @@ -11646,13 +9978,6 @@ "dolmoon" ] }, - "Web/HTML/Global_attributes/dropzone": { - "modified": "2020-10-15T22:06:26.786Z", - "contributors": [ - "alattalatta", - "dolmoon" - ] - }, "Web/HTML/Global_attributes/hidden": { "modified": "2020-10-15T22:06:24.774Z", "contributors": [ @@ -11761,46 +10086,6 @@ "alattalatta" ] }, - "Web/HTML/Global_attributes/클래스": { - "modified": "2020-10-15T21:51:13.209Z", - "contributors": [ - "alattalatta", - "dolmoon", - "woojin.jo" - ] - }, - "Web/HTML/HTML5": { - "modified": "2019-03-24T00:11:07.419Z", - "contributors": [ - "teoli", - "Channy", - "Dwchiang", - "vigia122", - "jisung", - "Joone" - ] - }, - "Web/HTML/HTML5/Introduction_to_HTML5": { - "modified": "2019-03-23T23:38:47.847Z", - "contributors": [ - "kybin", - "kuil09", - "juyoungbang", - "teoli", - "Channy" - ] - }, - "Web/HTML/HTML5_문서의_섹션과_윤곽": { - "modified": "2020-01-10T12:08:26.959Z", - "contributors": [ - "alattalatta", - "sudo0272", - "Kaben", - "bombinari", - "naduhy2", - "miname" - ] - }, "Web/HTML/Index": { "modified": "2020-01-19T02:45:39.384Z", "contributors": [ @@ -12771,17 +11056,6 @@ "junnapark" ] }, - "Web/HTTP/User_agent를_이용한_브라우저_감지": { - "modified": "2020-09-13T12:21:12.513Z", - "contributors": [ - "sephiron99", - "MyungsunLee", - "alattalatta", - "citrus.alice", - "seokju-na", - "wicksome" - ] - }, "Web/JavaScript": { "modified": "2020-03-23T04:53:28.173Z", "contributors": [ @@ -12817,22 +11091,6 @@ "JongChun" ] }, - "Web/JavaScript/About": { - "modified": "2020-03-12T19:36:55.143Z", - "contributors": [ - "JinKang", - "Parcovia", - "cs09g", - "imjang57", - "wayne-kim", - "desty", - "stephenjang", - "Luzi.kr", - "teoli", - "Zer0th", - "99corps" - ] - }, "Web/JavaScript/Data_structures": { "modified": "2020-07-30T02:41:19.847Z", "contributors": [ @@ -12846,12 +11104,6 @@ "jaemin_jo" ] }, - "Web/JavaScript/Differential_inheritance_in_JavaScript": { - "modified": "2020-09-14T22:22:46.677Z", - "contributors": [ - "limkukhyun" - ] - }, "Web/JavaScript/Enumerability_and_ownership_of_properties": { "modified": "2020-07-28T23:08:47.885Z", "contributors": [ @@ -12892,34 +11144,6 @@ "taggon" ] }, - "Web/JavaScript/Guide/Closures": { - "modified": "2020-03-12T19:37:58.819Z", - "contributors": [ - "chaewonkong", - "songdoing", - "RamiTae", - "Violet-Bora-Lee", - "alattalatta", - "henry_hwang", - "Seonghui", - "guyeol", - "limkukhyun", - "zziuni", - "Yoonjoo", - "KSH-code", - "afrontend", - "AlexMin", - "Jongmin", - "MyHyuny", - "joeunha", - "Kaben", - "noritersand", - "kdnmih", - "teoli", - "JaehwanLee", - "jaemin_jo" - ] - }, "Web/JavaScript/Guide/Control_flow_and_error_handling": { "modified": "2020-03-12T19:41:32.768Z", "contributors": [ @@ -12960,29 +11184,6 @@ "ryukato" ] }, - "Web/JavaScript/Guide/Inheritance_and_the_prototype_chain": { - "modified": "2020-04-04T00:50:18.045Z", - "contributors": [ - "peter1035k", - "jeongraeKim", - "dbwodlf3", - "project42da", - "quddnr153", - "ahnzaz", - "laranhee", - "daewooLeeNy", - "danhojin", - "shim.hw0810", - "faker007", - "juyonglee", - "epicsaga", - "sftblw", - "mixed80", - "teoli", - "JaehwanLee", - "jaemin_jo" - ] - }, "Web/JavaScript/Guide/Iterators_and_Generators": { "modified": "2020-07-15T01:15:38.167Z", "contributors": [ @@ -13039,5670 +11240,7469 @@ "SooYeonKim" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About": { - "modified": "2019-01-16T16:11:14.324Z", + "Web/JavaScript/Guide/Text_formatting": { + "modified": "2020-03-12T19:41:34.500Z", "contributors": [ - "teoli", - "Wafe", - "taggon" + "limkukhyun", + "jungpaeng", + "kr-leeteahoon", + "wertgw", + "SooYeonKim" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages": { - "modified": "2019-01-16T14:15:11.129Z", + "Web/JavaScript/Guide/Using_promises": { + "modified": "2020-09-07T02:53:40.286Z", "contributors": [ - "teoli", - "99corps" + "KimEJ", + "0131mj", + "mytory", + "eojina", + "limkukhyun", + "tw4204", + "Ken123777", + "coolcpu", + "SSJ-unclear", + "jadestern" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants": { - "modified": "2019-01-16T16:11:22.319Z", + "Web/JavaScript/Guide/Working_with_Objects": { + "modified": "2019-03-23T23:06:06.143Z", "contributors": [ - "teoli", - "Wafe" + "fscholz", + "khg0712", + "SphinxKnight", + "nacyot", + "KBGenie", + "jigs12", + "PineMt", + "ryukato", + "cafrii" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects": { - "modified": "2019-01-16T15:05:32.812Z", + "Web/JavaScript/JavaScript_technologies_overview": { + "modified": "2020-03-12T19:37:59.087Z", "contributors": [ + "alattalatta", "teoli", - "Anonymous" + "ethertank", + "jaemin_jo" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters": { - "modified": "2019-03-23T23:43:54.514Z", + "Web/JavaScript/Memory_Management": { + "modified": "2020-03-12T19:37:54.884Z", "contributors": [ - "jigs12", + "presentY1897", + "johngrib", + "KSH-code", "teoli", - "ethertank", - "Wafe" + "jaemin_jo" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods": { - "modified": "2019-03-23T23:43:58.661Z", + "Web/JavaScript/Reference": { + "modified": "2020-03-12T19:36:53.431Z", "contributors": [ + "limkukhyun", + "naduhy2", + "Netaras", + "epicsaga", "teoli", - "Wafe" + "Constantine Kim", + "MoGi", + "Dyhan81", + "Goldmund" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type": { - "modified": "2019-03-23T23:43:46.816Z", + "Web/JavaScript/Reference/About": { + "modified": "2020-03-12T19:37:02.761Z", "contributors": [ + "limkukhyun", "teoli", - "Wafe" + "Dyhan81", + "Netaras", + "taggon", + "Goldmund" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties": { - "modified": "2019-03-23T23:43:53.828Z", + "Web/JavaScript/Reference/Classes": { + "modified": "2020-12-02T08:06:01.229Z", "contributors": [ - "teoli", - "Wafe" + "woochul2", + "hjleesm", + "dsma73", + "HyunSangHan", + "seulgiyoon", + "kylajung", + "genzuby", + "fscholz", + "jyhwng", + "roupkk", + "hibiya", + "faker007", + "hwshim", + "preco21", + "maytree" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties": { - "modified": "2019-03-23T23:43:44.923Z", + "Web/JavaScript/Reference/Classes/Private_class_fields": { + "modified": "2020-11-08T09:14:41.975Z", "contributors": [ - "teoli", - "Wafe" + "seong7" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function": { - "modified": "2019-03-23T23:43:44.078Z", + "Web/JavaScript/Reference/Classes/constructor": { + "modified": "2020-10-15T21:42:34.132Z", "contributors": [ - "teoli", - "Wafe" + "alattalatta", + "hyoni0817", + "limkukhyun", + "jeonnoej" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References": { - "modified": "2019-03-23T23:43:58.264Z", + "Web/JavaScript/Reference/Classes/extends": { + "modified": "2020-10-15T21:43:47.995Z", "contributors": [ - "teoli", - "Wafe" + "limkukhyun", + "Netaras", + "jeonnoej" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression": { - "modified": "2019-03-23T23:43:48.309Z", + "Web/JavaScript/Reference/Classes/static": { + "modified": "2020-10-15T21:43:46.615Z", "contributors": [ - "teoli", - "디토" + "kimkyeseung", + "limkukhyun", + "jeonnoej", + "taihwayoun" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions": { - "modified": "2019-01-16T16:16:32.143Z", + "Web/JavaScript/Reference/Deprecated_and_obsolete_features": { + "modified": "2020-03-12T19:44:53.109Z", "contributors": [ - "teoli", - "taggon" + "alattalatta", + "imskojs" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview": { - "modified": "2019-01-16T14:15:11.648Z", + "Web/JavaScript/Reference/Errors": { + "modified": "2020-03-12T19:43:42.482Z", "contributors": [ - "teoli", - "S. Kang", - "jsnapz", - "Ape1126", - "Wafe", - "Huick", - "Gilchris" + "Netaras", + "fscholz" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals": { - "modified": "2019-03-23T23:43:37.505Z", + "Web/JavaScript/Reference/Errors/Bad_octal": { + "modified": "2020-03-12T19:44:24.834Z", "contributors": [ - "teoli", - "panda", - "Wafe" + "magnoliaa" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties": { - "modified": "2019-01-16T15:50:20.671Z", + "Web/JavaScript/Reference/Errors/Bad_radix": { + "modified": "2020-03-12T19:44:34.573Z", "contributors": [ - "teoli", - "Gilchris" + "magnoliaa" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators": { - "modified": "2019-03-23T23:41:51.754Z", + "Web/JavaScript/Reference/Errors/Bad_regexp_flag": { + "modified": "2020-03-12T19:48:27.405Z", "contributors": [ - "teoli", - "taggon" + "vividhee" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators": { - "modified": "2019-01-16T16:11:11.253Z", + "Web/JavaScript/Reference/Errors/Bad_return_or_yield": { + "modified": "2020-03-12T19:46:13.633Z", "contributors": [ - "teoli", - "Wafe" + "2oosoo", + "highdali" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators": { - "modified": "2019-03-23T23:41:53.669Z", + "Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init": { + "modified": "2020-03-12T19:47:46.720Z", "contributors": [ - "teoli", - "taggon" + "SSJ-unclear" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators": { - "modified": "2019-01-16T16:11:13.405Z", + "Web/JavaScript/Reference/Errors/Delete_in_strict_mode": { + "modified": "2020-03-12T19:48:24.242Z", "contributors": [ - "teoli", - "Wafe" + "vividhee" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators": { - "modified": "2019-01-16T16:11:11.411Z", + "Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage": { + "modified": "2020-03-12T19:44:32.792Z", "contributors": [ - "teoli", - "Wafe" + "magnoliaa" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators": { - "modified": "2019-01-16T16:11:17.876Z", + "Web/JavaScript/Reference/Errors/Deprecated_octal": { + "modified": "2020-03-12T19:48:30.330Z", "contributors": [ - "teoli", - "Wafe" + "magnoliaa" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators": { - "modified": "2019-01-16T16:11:17.176Z", + "Web/JavaScript/Reference/Errors/Identifier_after_number": { + "modified": "2020-03-12T19:48:24.600Z", "contributors": [ - "teoli", - "Wafe" + "vividhee" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects": { - "modified": "2019-01-16T16:10:38.273Z", + "Web/JavaScript/Reference/Errors/Illegal_character": { + "modified": "2020-03-12T19:48:28.614Z", "contributors": [ - "teoli", - "Wafe" + "vividhee" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object": { - "modified": "2019-03-23T23:43:56.661Z", + "Web/JavaScript/Reference/Errors/Invalid_array_length": { + "modified": "2020-03-12T19:43:37.920Z", "contributors": [ - "teoli", - "Wafe" + "epicsaga" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode": { - "modified": "2019-01-16T16:11:27.423Z", + "Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side": { + "modified": "2020-03-12T19:44:36.449Z", "contributors": [ - "teoli", - "Wafe" + "magnoliaa" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values": { - "modified": "2019-01-16T16:11:23.067Z", + "Web/JavaScript/Reference/Errors/Invalid_date": { + "modified": "2020-03-12T19:47:45.133Z", "contributors": [ - "teoli", - "Wafe" + "Olivia_J" ] }, - "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables": { - "modified": "2019-01-16T16:11:22.455Z", + "Web/JavaScript/Reference/Errors/Invalid_for-in_initializer": { + "modified": "2020-03-12T19:48:28.444Z", "contributors": [ - "teoli", - "Wafe" + "vividhee" ] }, - "Web/JavaScript/Guide/Text_formatting": { - "modified": "2020-03-12T19:41:34.500Z", + "Web/JavaScript/Reference/Errors/Invalid_for-of_initializer": { + "modified": "2020-03-12T19:48:24.879Z", "contributors": [ - "limkukhyun", - "jungpaeng", - "kr-leeteahoon", - "wertgw", - "SooYeonKim" + "vividhee" ] }, - "Web/JavaScript/Guide/Using_promises": { - "modified": "2020-09-07T02:53:40.286Z", + "Web/JavaScript/Reference/Errors/JSON_bad_parse": { + "modified": "2020-03-12T19:46:13.524Z", + "contributors": [ + "highdali" + ] + }, + "Web/JavaScript/Reference/Errors/Malformed_formal_parameter": { + "modified": "2020-03-12T19:48:03.882Z", + "contributors": [ + "SSJ-unclear" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_bracket_after_list": { + "modified": "2020-03-12T19:48:26.441Z", + "contributors": [ + "vividhee" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_colon_after_property_id": { + "modified": "2020-03-12T19:48:28.709Z", + "contributors": [ + "vividhee" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_curly_after_property_list": { + "modified": "2020-03-12T19:47:44.512Z", + "contributors": [ + "Olivia_J" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_initializer_in_const": { + "modified": "2020-03-12T19:48:10.711Z", + "contributors": [ + "rlaace423" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator": { + "modified": "2020-03-12T19:48:36.679Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list": { + "modified": "2020-03-12T19:47:15.700Z", + "contributors": [ + "nicekkong" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition": { + "modified": "2020-03-12T19:47:45.484Z", + "contributors": [ + "Olivia_J" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": { + "modified": "2020-03-12T19:46:46.133Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/More_arguments_needed": { + "modified": "2020-03-12T19:48:33.843Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Negative_repetition_count": { + "modified": "2020-03-12T19:44:34.819Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/No_variable_name": { + "modified": "2020-03-12T19:48:33.115Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Not_a_codepoint": { + "modified": "2020-03-12T19:44:27.869Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Not_a_constructor": { + "modified": "2020-03-12T19:46:59.075Z", + "contributors": [ + "Latera" + ] + }, + "Web/JavaScript/Reference/Errors/Not_defined": { + "modified": "2020-03-12T19:44:37.119Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Precision_range": { + "modified": "2020-03-12T19:44:32.328Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Property_access_denied": { + "modified": "2020-03-12T19:44:32.773Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Read-only": { + "modified": "2020-03-12T19:47:45.720Z", + "contributors": [ + "Olivia_J" + ] + }, + "Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value": { + "modified": "2020-03-12T19:49:30.091Z", + "contributors": [ + "WonWoongJang" + ] + }, + "Web/JavaScript/Reference/Errors/Reserved_identifier": { + "modified": "2020-03-12T19:48:28.133Z", + "contributors": [ + "vividhee" + ] + }, + "Web/JavaScript/Reference/Errors/Resulting_string_too_large": { + "modified": "2020-03-12T19:44:36.352Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params": { + "modified": "2020-03-12T19:47:43.886Z", + "contributors": [ + "SSJ-unclear" + ] + }, + "Web/JavaScript/Reference/Errors/Too_much_recursion": { + "modified": "2020-03-12T19:44:33.119Z", + "contributors": [ + "Kaben", + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Undeclared_var": { + "modified": "2020-03-12T19:44:33.741Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Undefined_prop": { + "modified": "2020-03-12T19:44:33.728Z", + "contributors": [ + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Errors/Unexpected_token": { + "modified": "2020-03-12T19:44:11.696Z", + "contributors": [ + "ChangSungsil" + ] + }, + "Web/JavaScript/Reference/Errors/Unexpected_type": { + "modified": "2020-03-12T19:45:33.484Z", + "contributors": [ + "yura-Choi" + ] + }, + "Web/JavaScript/Reference/Errors/Unnamed_function_statement": { + "modified": "2020-03-12T19:48:26.448Z", + "contributors": [ + "vividhee" + ] + }, + "Web/JavaScript/Reference/Errors/is_not_iterable": { + "modified": "2020-03-12T19:48:24.798Z", + "contributors": [ + "cs09g" + ] + }, + "Web/JavaScript/Reference/Functions": { + "modified": "2020-10-15T21:37:58.963Z", + "contributors": [ + "harryjjun", + "Dailyscat", + "limkukhyun", + "alattalatta", + "Netaras", + "sftblw" + ] + }, + "Web/JavaScript/Reference/Functions/Default_parameters": { + "modified": "2020-10-15T21:45:58.179Z", + "contributors": [ + "honggaruy", + "gbyman", + "kbsbroad", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Functions/Method_definitions": { + "modified": "2020-03-12T19:44:05.728Z", + "contributors": [ + "kdex", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Functions/arguments": { + "modified": "2020-10-15T21:38:47.452Z", + "contributors": [ + "alattalatta", + "Netaras", + "tmxkwkfgka" + ] + }, + "Web/JavaScript/Reference/Functions/arguments/@@iterator": { + "modified": "2020-10-15T22:12:01.387Z", + "contributors": [ + "alattalatta", + "vividhee" + ] + }, + "Web/JavaScript/Reference/Functions/arguments/callee": { + "modified": "2020-03-12T19:44:03.622Z", + "contributors": [ + "Netaras" + ] + }, + "Web/JavaScript/Reference/Functions/arguments/length": { + "modified": "2020-10-15T21:48:18.638Z", + "contributors": [ + "alattalatta", + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Functions/get": { + "modified": "2020-10-15T21:48:28.043Z", "contributors": [ - "KimEJ", - "0131mj", - "mytory", - "eojina", - "limkukhyun", - "tw4204", - "Ken123777", - "coolcpu", "SSJ-unclear", - "jadestern" + "DGURI", + "NessunKim" + ] + }, + "Web/JavaScript/Reference/Functions/rest_parameters": { + "modified": "2020-10-15T21:46:03.879Z", + "contributors": [ + "Geun-Hyung_Kim", + "cs09g", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Functions/set": { + "modified": "2020-03-12T19:44:54.074Z", + "contributors": [ + "daehyoung" + ] + }, + "Web/JavaScript/Reference/Global_Objects": { + "modified": "2020-08-05T00:51:40.442Z", + "contributors": [ + "alattalatta", + "loslch", + "skyfly33", + "Netaras", + "cs09g", + "Rachel0211", + "teoli" + ] + }, + "Web/JavaScript/Reference/Global_Objects/AggregateError": { + "modified": "2020-11-15T04:22:22.892Z", + "contributors": [ + "Donghoon" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array": { + "modified": "2020-10-15T21:18:12.731Z", + "contributors": [ + "kwangdosa", + "alattalatta", + "wbamberg", + "limkukhyun", + "sominlee", + "HanuLatte", + "joeunha", + "maytree", + "VBChunguk", + "JaegangLee", + "teoli", + "taggon", + "Aeuiop" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/@@iterator": { + "modified": "2020-10-15T21:43:02.789Z", + "contributors": [ + "alattalatta", + "KisukPark", + "hwangtan", + "." + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/@@species": { + "modified": "2020-10-15T21:50:41.909Z", + "contributors": [ + "alattalatta", + "KisukPark", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/@@unscopables": { + "modified": "2020-10-15T21:50:41.776Z", + "contributors": [ + "alattalatta", + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/Array": { + "modified": "2020-10-15T22:26:58.481Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/Reduce": { + "modified": "2020-10-15T21:41:30.424Z", + "contributors": [ + "alattalatta", + "dolmoon", + "KisukPark", + "ieay4a", + "Violetdusk", + "Netaras", + "preco21" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/ReduceRight": { + "modified": "2020-10-15T21:50:39.970Z", + "contributors": [ + "alattalatta", + "KisukPark", + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/concat": { + "modified": "2020-10-15T21:38:49.144Z", + "contributors": [ + "RamiTae", + "bohyun611kim", + "alattalatta", + "KisukPark", + "VBChunguk", + "tmxkwkfgka" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/copyWithin": { + "modified": "2020-10-15T21:50:40.123Z", + "contributors": [ + "alattalatta", + "KisukPark", + "withdude2", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/entries": { + "modified": "2020-10-15T21:41:29.970Z", + "contributors": [ + "honggaruy", + "alattalatta", + "KisukPark", + "SphinxKnight", + "keypointer", + "kdex", + "preco21" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/every": { + "modified": "2020-10-15T21:41:30.327Z", + "contributors": [ + "alattalatta", + "KisukPark", + "limkukhyun", + "Netaras", + "Kaben", + "preco21" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/fill": { + "modified": "2020-10-15T21:36:43.146Z", + "contributors": [ + "alattalatta", + "KisukPark", + "SphinxKnight", + "withdude2", + "ligeek" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/filter": { + "modified": "2020-10-15T21:41:17.863Z", + "contributors": [ + "RamiTae", + "alattalatta", + "bohyun611kim", + "pineoc", + "jewon", + "limkukhyun", + "KisukPark", + "Saem", + "Netaras", + "rageboom", + "Yunhong-Min", + "keypointer" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/find": { + "modified": "2020-10-15T21:48:55.826Z", + "contributors": [ + "alattalatta", + "QooQooDass", + "KisukPark", + "sonjh02", + "meganson", + "yuntaek", + "Jaysok" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/findIndex": { + "modified": "2020-10-15T21:50:40.640Z", + "contributors": [ + "hyoni0817", + "Hyeok_Jo", + "alattalatta", + "KisukPark", + "sonjh02", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/flat": { + "modified": "2020-10-15T22:08:27.831Z", + "contributors": [ + "alattalatta", + "moonformeli", + "cs09g" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/flatMap": { + "modified": "2020-10-15T22:08:28.496Z", + "contributors": [ + "DaegiKim", + "24seconds", + "moonformeli", + "alattalatta", + "cs09g" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/forEach": { + "modified": "2020-10-15T21:47:39.068Z", + "contributors": [ + "alattalatta", + "RootyJin", + "jeongchaeuk", + "Parcovia", + "limkukhyun", + "KisukPark", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/from": { + "modified": "2020-10-15T21:37:56.478Z", + "contributors": [ + "alattalatta", + "Violet-Bora-Lee", + "KisukPark", + "SphinxKnight", + "디토", + "ligeek" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/includes": { + "modified": "2020-10-15T21:50:39.977Z", + "contributors": [ + "IMHOJEONG", + "alattalatta", + "KisukPark", + "KlausLee", + "khsiea", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/indexOf": { + "modified": "2020-10-15T21:50:40.883Z", + "contributors": [ + "biniruu", + "naraeim", + "alattalatta", + "KisukPark", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/isArray": { + "modified": "2020-10-15T21:41:14.689Z", + "contributors": [ + "alattalatta", + "KisukPark", + "KaironMoon", + "keypointer", + "johngrib" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/join": { + "modified": "2020-10-15T21:41:15.362Z", + "contributors": [ + "shj9432", + "alattalatta", + "KisukPark", + "VBChunguk" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/keys": { + "modified": "2020-10-15T21:41:30.210Z", + "contributors": [ + "alattalatta", + "KisukPark", + "SphinxKnight", + "preco21" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf": { + "modified": "2020-10-15T21:50:40.016Z", + "contributors": [ + "alattalatta", + "KisukPark", + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/length": { + "modified": "2020-10-15T21:41:28.876Z", + "contributors": [ + "alattalatta", + "preco21" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/map": { + "modified": "2020-10-15T21:36:42.699Z", + "contributors": [ + "seulgiyoon", + "alattalatta", + "KisukPark", + "sshplendid", + "selfiens", + "the1900", + "reoim", + "Yunhong-Min", + "sominlee", + "Rokt33r", + "epicsaga" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/of": { + "modified": "2020-10-15T21:36:39.776Z", + "contributors": [ + "alattalatta", + "KisukPark", + "limkukhyun", + "ligeek" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/pop": { + "modified": "2020-10-15T21:47:37.008Z", + "contributors": [ + "alattalatta", + "KisukPark", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/push": { + "modified": "2020-10-15T21:39:22.145Z", + "contributors": [ + "alattalatta", + "KisukPark", + "dsma73", + "Hoto-Cocoa", + "nohsenc", + "dewey94esb" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/reverse": { + "modified": "2020-10-15T21:41:28.622Z", + "contributors": [ + "alattalatta", + "KisukPark", + "preco21" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/shift": { + "modified": "2020-10-15T21:38:19.399Z", + "contributors": [ + "alattalatta", + "KisukPark", + "DeusNonEst", + "FlowerCoing" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/slice": { + "modified": "2020-10-15T21:48:35.659Z", + "contributors": [ + "alattalatta", + "Georgee-lee", + "KisukPark", + "cs09g", + "AlexMin", + "imskojs", + "dale0713" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/some": { + "modified": "2020-10-15T21:47:53.706Z", + "contributors": [ + "kimkyeseung", + "alattalatta", + "KisukPark", + "kyunooh", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/sort": { + "modified": "2020-10-15T21:50:40.023Z", + "contributors": [ + "IvannKim", + "yami03", + "alattalatta", + "KisukPark", + "dsma73", + "seokju-na", + "apple77y", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/splice": { + "modified": "2020-10-15T21:37:48.347Z", + "contributors": [ + "alattalatta", + "selfiens", + "KisukPark", + "wonhoKim", + "laranhee", + "Jei", + "Rokt33r" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/toLocaleString": { + "modified": "2020-10-15T21:47:37.995Z", + "contributors": [ + "alattalatta", + "KisukPark", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/toSource": { + "modified": "2020-10-15T22:00:47.617Z", + "contributors": [ + "alattalatta", + "teoli", + "KisukPark", + "sonjh02" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/toString": { + "modified": "2020-10-15T21:47:38.270Z", + "contributors": [ + "alattalatta", + "KisukPark", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/unshift": { + "modified": "2020-10-15T21:41:30.420Z", + "contributors": [ + "alattalatta", + "ChanwheKim", + "KisukPark", + "jisooyu", + "maytree" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/values": { + "modified": "2020-10-15T21:41:31.189Z", + "contributors": [ + "alattalatta", + "KisukPark", + "SphinxKnight", + "preco21" + ] + }, + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": { + "modified": "2020-10-15T21:31:34.913Z", + "contributors": [ + "alattalatta", + "chaewonkong", + "niceilm", + "teoli", + "JiminP", + "yuby" + ] + }, + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/ArrayBuffer": { + "modified": "2020-10-15T22:27:33.561Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength": { + "modified": "2020-10-15T22:27:34.550Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView": { + "modified": "2020-10-15T22:27:32.623Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice": { + "modified": "2020-10-15T22:27:35.359Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/AsyncFunction": { + "modified": "2020-10-15T21:52:51.606Z", + "contributors": [ + "ibizcox", + "jooddang", + "limkukhyun", + "ChanghwaLee" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Atomics": { + "modified": "2019-03-23T22:18:58.236Z", + "contributors": [ + "RyuJin" + ] + }, + "Web/JavaScript/Reference/Global_Objects/BigInt": { + "modified": "2020-10-15T22:12:37.942Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/BigInt/BigInt": { + "modified": "2020-10-15T22:25:40.633Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Boolean": { + "modified": "2020-10-15T21:14:40.981Z", + "contributors": [ + "alattalatta", + "wbamberg", + "teoli", + "Gilchris" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Boolean/Boolean": { + "modified": "2020-10-15T22:27:46.206Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Boolean/toString": { + "modified": "2020-10-15T22:11:53.952Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Boolean/valueOf": { + "modified": "2020-10-15T22:11:54.035Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView": { + "modified": "2020-10-15T21:42:40.867Z", + "contributors": [ + "alattalatta", + "KKang", + "ksyeng" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/DataView": { + "modified": "2020-10-15T22:27:25.683Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date": { + "modified": "2020-10-15T21:18:35.817Z", + "contributors": [ + "alattalatta", + "wbamberg", + "dsma73", + "Shin-JaeHeon", + "seungha-kim", + "seokju-na", + "teoli", + "taggon" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/UTC": { + "modified": "2020-10-15T21:50:44.435Z", + "contributors": [ + "alattalatta", + "inpyoj", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getDate": { + "modified": "2020-10-15T21:50:41.680Z", + "contributors": [ + "alattalatta", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getDay": { + "modified": "2020-10-15T21:50:41.587Z", + "contributors": [ + "alattalatta", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getFullYear": { + "modified": "2020-10-15T21:50:41.498Z", + "contributors": [ + "alattalatta", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getHours": { + "modified": "2020-10-15T21:50:41.097Z", + "contributors": [ + "alattalatta", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds": { + "modified": "2020-10-15T21:50:43.734Z", + "contributors": [ + "alattalatta", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getMinutes": { + "modified": "2020-10-15T21:50:41.182Z", + "contributors": [ + "alattalatta", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getMonth": { + "modified": "2020-10-15T21:50:42.376Z", + "contributors": [ + "alattalatta", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getSeconds": { + "modified": "2020-10-15T21:50:44.137Z", + "contributors": [ + "alattalatta", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getTime": { + "modified": "2019-03-23T22:23:15.546Z", + "contributors": [ + "hyeonseok", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset": { + "modified": "2019-03-23T22:23:13.145Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCDate": { + "modified": "2019-03-23T22:23:20.825Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCDay": { + "modified": "2019-03-23T22:23:16.136Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear": { + "modified": "2019-03-23T22:23:15.265Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCHours": { + "modified": "2019-03-23T22:23:09.557Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds": { + "modified": "2019-03-23T22:23:07.710Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes": { + "modified": "2019-03-23T22:23:18.026Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth": { + "modified": "2019-03-23T22:23:10.004Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds": { + "modified": "2019-03-23T22:23:16.588Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/now": { + "modified": "2020-12-13T11:19:39.873Z", + "contributors": [ + "hansolpp", + "g6ling", + "dale0713" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/parse": { + "modified": "2019-03-23T22:23:12.000Z", + "contributors": [ + "sung-ugje", + "galcyurio", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setDate": { + "modified": "2019-03-23T22:23:20.668Z", + "contributors": [ + "swtpumpkin", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setFullYear": { + "modified": "2019-03-23T22:23:19.509Z", + "contributors": [ + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setHours": { + "modified": "2019-03-23T22:23:20.495Z", + "contributors": [ + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds": { + "modified": "2019-03-23T22:23:19.297Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setMinutes": { + "modified": "2019-03-23T22:23:09.852Z", + "contributors": [ + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setMonth": { + "modified": "2019-03-23T22:23:18.765Z", + "contributors": [ + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setSeconds": { + "modified": "2019-03-23T22:23:08.456Z", + "contributors": [ + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setTime": { + "modified": "2019-03-23T22:23:22.849Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setUTCDate": { + "modified": "2019-03-23T22:23:22.400Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear": { + "modified": "2019-03-23T22:23:12.168Z", + "contributors": [ + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setUTCHours": { + "modified": "2019-03-23T22:23:12.991Z", + "contributors": [ + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds": { + "modified": "2019-03-23T22:23:21.549Z", + "contributors": [ + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes": { + "modified": "2019-03-23T22:23:11.774Z", + "contributors": [ + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth": { + "modified": "2019-03-23T22:23:12.673Z", + "contributors": [ + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds": { + "modified": "2019-03-23T22:23:22.693Z", + "contributors": [ + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toDateString": { + "modified": "2020-10-15T21:50:42.628Z", + "contributors": [ + "alattalatta", + "inkyungkim", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toISOString": { + "modified": "2020-10-15T22:09:03.975Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toJSON": { + "modified": "2020-10-15T22:09:05.629Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toString": { + "modified": "2020-10-15T21:56:46.065Z", + "contributors": [ + "alattalatta", + "huseong" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/valueOf": { + "modified": "2020-10-15T22:22:09.213Z", + "contributors": [ + "Jihyun_LEE" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Error": { + "modified": "2020-10-15T21:23:09.336Z", + "contributors": [ + "alattalatta", + "sunhyung", + "teoli", + "john_jung" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Error/name": { + "modified": "2020-10-15T22:01:04.562Z", + "contributors": [ + "goeo1066" + ] + }, + "Web/JavaScript/Reference/Global_Objects/EvalError": { + "modified": "2020-10-15T21:50:41.406Z", + "contributors": [ + "alattalatta", + "zziuni", + "imskojs" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function": { + "modified": "2020-10-15T21:18:08.765Z", + "contributors": [ + "alattalatta", + "moolow", + "dolmoon", + "Netaras", + "teoli", + "HunminKim", + "Wafe" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/apply": { + "modified": "2020-10-15T21:36:42.231Z", + "contributors": [ + "limsungho02", + "cs09g", + "jeongchaeuk", + "alattalatta", + "jaewanC", + "bsidesoft" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/arguments": { + "modified": "2020-10-15T22:04:18.058Z", + "contributors": [ + "Seonghui", + "sunhyun" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/bind": { + "modified": "2020-10-15T21:38:38.554Z", + "contributors": [ + "dezcao", + "dae-hwa", + "alattalatta", + "limkukhyun", + "AlexMin", + "dale0713", + "joeunha", + "Netaras", + "sftblw", + "zuckay79", + "jjhangu" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/call": { + "modified": "2020-10-15T21:19:34.146Z", + "contributors": [ + "dasbeerboot", + "paikwiki", + "Netaras", + "stitchworkingonthecode", + "ligeek", + "jjhangu", + "teoli", + "ByungChangYoo", + "Jeado.Ko" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/length": { + "modified": "2020-10-15T21:36:48.277Z", + "contributors": [ + "alattalatta", + "Netaras", + "bsidesoft" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/name": { + "modified": "2019-03-23T22:54:09.088Z", + "contributors": [ + "Netaras", + "bsidesoft" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/toSource": { + "modified": "2020-10-15T22:15:36.685Z", + "contributors": [ + "cs09g" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Generator": { + "modified": "2019-10-07T03:49:08.925Z", + "contributors": [ + "stegano", + "Latera", + "loslch", + "kdex", + "preco21" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Generator/next": { + "modified": "2019-03-23T22:29:43.014Z", + "contributors": [ + "echo304" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Generator/return": { + "modified": "2019-03-23T22:29:41.659Z", + "contributors": [ + "echo304" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Generator/throw": { + "modified": "2020-10-15T21:47:52.236Z", + "contributors": [ + "alattalatta", + "echo304" + ] + }, + "Web/JavaScript/Reference/Global_Objects/GeneratorFunction": { + "modified": "2020-10-15T21:43:23.835Z", + "contributors": [ + "alattalatta", + "HyunMook", + "AHNJAEHA" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Infinity": { + "modified": "2020-10-15T21:44:39.467Z", + "contributors": [ + "alattalatta", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Global_Objects/InternalError": { + "modified": "2019-03-18T21:46:44.351Z", + "contributors": [ + "teoli", + "magnoliaa" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Intl": { + "modified": "2020-10-15T21:56:50.642Z", + "contributors": [ + "alattalatta", + "hrg921" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat": { + "modified": "2020-10-15T22:07:32.322Z", + "contributors": [ + "fscholz", + "alattalatta", + "SSJ-unclear" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Intl/Locale": { + "modified": "2020-10-15T22:25:03.900Z", + "contributors": [ + "fscholz", + "sffc" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Intl/Locale/language": { + "modified": "2020-10-15T22:25:02.965Z", + "contributors": [ + "fscholz", + "limkukhyun" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat": { + "modified": "2020-10-15T22:08:58.601Z", + "contributors": [ + "fscholz", + "alattalatta", + "SDSkyKlouD", + "SSJ-unclear" + ] + }, + "Web/JavaScript/Reference/Global_Objects/JSON": { + "modified": "2020-10-15T21:43:51.602Z", + "contributors": [ + "alattalatta", + "Parcovia", + "goeo1066", + "Netaras", + "MexieAndCo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/JSON/parse": { + "modified": "2020-10-15T21:44:14.822Z", + "contributors": [ + "alattalatta", + "Parcovia", + "subasuba" + ] + }, + "Web/JavaScript/Reference/Global_Objects/JSON/stringify": { + "modified": "2020-11-10T21:46:18.524Z", + "contributors": [ + "Ohora", + "alattalatta", + "churow", + "boyzgun", + "joshua1988", + "maytree", + "supermanWannaBe" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map": { + "modified": "2020-10-15T21:50:09.238Z", + "contributors": [ + "Chloe-HyunJoo", + "alattalatta", + "younghoh", + "KaironMoon", + "echo304", + "dragmove" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag": { + "modified": "2020-10-15T22:04:19.848Z", + "contributors": [ + "Seok.Heo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/Map": { + "modified": "2020-10-15T22:26:33.491Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/clear": { + "modified": "2020-10-15T22:09:01.449Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/delete": { + "modified": "2020-10-15T22:09:03.155Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/entries": { + "modified": "2020-10-15T22:09:02.936Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/forEach": { + "modified": "2020-10-15T22:20:31.940Z", + "contributors": [ + "JaeWorld" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/get": { + "modified": "2020-10-15T22:15:40.628Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/has": { + "modified": "2020-10-15T22:15:44.379Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/set": { + "modified": "2020-10-15T22:15:44.384Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/size": { + "modified": "2020-10-15T22:04:26.274Z", + "contributors": [ + "Gren", + "Seok.Heo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math": { + "modified": "2020-10-15T21:38:50.083Z", + "contributors": [ + "alattalatta", + "kimkyeseung", + "ejay0811", + "bombinari", + "imskojs", + "dale0713", + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/E": { + "modified": "2020-10-15T21:56:48.942Z", + "contributors": [ + "alattalatta", + "mantra78" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/LN10": { + "modified": "2020-10-15T22:12:27.389Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/LN2": { + "modified": "2020-10-15T22:12:33.707Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/LOG10E": { + "modified": "2020-10-15T21:45:43.847Z", + "contributors": [ + "alattalatta", + "SeungYeol", + "seung-yeol" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/LOG2E": { + "modified": "2020-10-15T22:12:28.658Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/PI": { + "modified": "2020-10-15T21:57:11.130Z", + "contributors": [ + "alattalatta", + "swtpumpkin" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2": { + "modified": "2020-10-15T22:28:40.942Z", + "contributors": [ + "129dot03" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/SQRT2": { + "modified": "2020-10-15T21:57:11.465Z", + "contributors": [ + "swtpumpkin" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/abs": { + "modified": "2020-10-15T21:57:04.759Z", + "contributors": [ + "alattalatta", + "mantra78" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/acos": { + "modified": "2020-10-15T21:52:08.736Z", + "contributors": [ + "alattalatta", + "keikeiem" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/cbrt": { + "modified": "2020-10-15T21:52:08.362Z", + "contributors": [ + "alattalatta", + "keikeiem" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/ceil": { + "modified": "2019-03-23T22:13:49.234Z", + "contributors": [ + "ironmanciti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/exp": { + "modified": "2020-10-15T22:07:23.655Z", + "contributors": [ + "qazxsw1240" ] }, - "Web/JavaScript/Guide/Values,_variables,_and_literals": { - "modified": "2020-06-03T11:11:26.830Z", + "Web/JavaScript/Reference/Global_Objects/Math/floor": { + "modified": "2020-10-15T21:38:48.166Z", + "contributors": [ + "alattalatta", + "EdwardBaek", + "laranhee", + "ChoeSul" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/fround": { + "modified": "2019-03-23T22:31:04.734Z", + "contributors": [ + "ingee.kim" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/imul": { + "modified": "2019-03-31T21:25:02.115Z", + "contributors": [ + "cameo-js", + "ingee.kim" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/log": { + "modified": "2020-10-15T21:55:33.977Z", + "contributors": [ + "Luna4D" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/log2": { + "modified": "2020-10-15T21:57:12.002Z", + "contributors": [ + "swtpumpkin" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/max": { + "modified": "2020-10-15T21:56:06.992Z", + "contributors": [ + "lanipark", + "swtpumpkin" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/min": { + "modified": "2020-10-15T21:56:53.960Z", + "contributors": [ + "mantra78" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/random": { + "modified": "2020-10-15T21:44:16.613Z", + "contributors": [ + "caianyuan", + "EatChangmyeong", + "kuroneko0441", + "lazygyu", + "gamzza", + "maytree" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/round": { + "modified": "2020-10-15T22:12:25.570Z", + "contributors": [ + "officialmansu" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/sign": { + "modified": "2020-10-15T21:59:54.584Z", + "contributors": [ + "yssgo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/sin": { + "modified": "2020-10-15T22:14:16.419Z", + "contributors": [ + "guyeol" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/sinh": { + "modified": "2020-10-15T22:23:26.235Z", + "contributors": [ + "Eumhongin" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/sqrt": { + "modified": "2020-10-15T21:57:12.700Z", + "contributors": [ + "swtpumpkin" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/tan": { + "modified": "2020-10-15T22:14:16.148Z", + "contributors": [ + "guyeol" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/tanh": { + "modified": "2020-10-15T22:27:51.653Z", + "contributors": [ + "FennecFoxSW" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/trunc": { + "modified": "2020-10-15T21:56:16.061Z", + "contributors": [ + "mantra78", + "hefaitos" + ] + }, + "Web/JavaScript/Reference/Global_Objects/NaN": { + "modified": "2020-10-15T21:15:15.113Z", "contributors": [ - "gksrlf2ek", - "sujinlee0616", "alattalatta", - "shj9432", - "dsma73", - "yhyim", - "hohoonlee", - "limkukhyun", - "yangtaeho", - "gudrl", - "jadestern", - "ddarkchu", "Netaras", - "HyunSeob", - "wikibook", - "VBChunguk", - "trazy", - "Donghyun_Lee", - "stephenjang", - "Rudy-Ahn", - "moolow", + "nacyot", "teoli", - "frog44" + "Gilchris" ] }, - "Web/JavaScript/Guide/Working_with_Objects": { - "modified": "2019-03-23T23:06:06.143Z", + "Web/JavaScript/Reference/Global_Objects/Number": { + "modified": "2020-10-15T21:38:20.966Z", "contributors": [ - "fscholz", - "khg0712", - "SphinxKnight", - "nacyot", - "KBGenie", - "jigs12", - "PineMt", - "ryukato", - "cafrii" + "soonsebii", + "alattalatta", + "DeadIntegral", + "taeunChoi", + "ChoeSul", + "fscholz" ] }, - "Web/JavaScript/Guide/객체_모델의_세부사항": { - "modified": "2020-03-12T19:42:17.394Z", + "Web/JavaScript/Reference/Global_Objects/Number/EPSILON": { + "modified": "2020-10-15T21:48:35.594Z", "contributors": [ - "doong-jo", - "nmsohn", - "DoublSB", - "limkukhyun", - "wbamberg", - "cmygray", - "khseok1060", - "ryukato" + "EntryDark", + "." ] }, - "Web/JavaScript/Guide/메타_프로그래밍": { - "modified": "2020-03-12T19:41:24.217Z", + "Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER": { + "modified": "2020-10-15T22:02:58.023Z", "contributors": [ - "limkukhyun", - "nodejs", - "stephenjang" + "alattalatta", + "kirrie" ] }, - "Web/JavaScript/Guide/소개": { - "modified": "2020-11-13T15:07:54.630Z", + "Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE": { + "modified": "2020-10-15T21:53:40.733Z", "contributors": [ - "FennecFoxSW", - "ldss3sang", - "limkukhyun", - "bluerainmaker", - "ahnzaz", - "BG.Choi", - "gudrl", - "gnujoow", - "stitchworkingonthecode", - "ShihwanKim", - "Netaras", - "cs09g", - "Jsfumato", - "hwani163", - "junoim", - "ByeongGi", - "stephenjang" + "alattalatta", + "kbsbroad" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER": { + "modified": "2020-10-15T22:14:25.785Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE": { + "modified": "2020-10-15T22:01:36.854Z", + "contributors": [ + "alattalatta", + "sshplendid" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY": { + "modified": "2020-10-15T22:15:09.850Z", + "contributors": [ + "alattalatta", + "yami03" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number/NaN": { + "modified": "2020-10-15T21:44:42.844Z", + "contributors": [ + "alattalatta", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY": { + "modified": "2020-10-15T22:15:10.597Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number/isFinite": { + "modified": "2020-10-15T21:44:34.313Z", + "contributors": [ + "alattalatta", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number/isInteger": { + "modified": "2020-10-15T21:50:46.841Z", + "contributors": [ + "alattalatta", + "Lutece" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number/isNaN": { + "modified": "2020-10-15T21:44:51.414Z", + "contributors": [ + "alattalatta", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger": { + "modified": "2020-10-15T21:53:40.478Z", + "contributors": [ + "alattalatta", + "preco21" ] }, - "Web/JavaScript/Guide/정규식": { - "modified": "2020-04-29T02:51:44.998Z", + "Web/JavaScript/Reference/Global_Objects/Number/parseFloat": { + "modified": "2020-10-15T22:14:24.810Z", "contributors": [ - "yami03", - "yeonjuan", - "Jung-Max", - "deltakor1234", - "idid0210", - "seungha-kim", - "limkukhyun", - "khg0712", - "nazuna1", - "kooljay82", - "fdevjm", - "coffeenjava", - "gaeun917", - "namhong2001", - "woochankim", - "JunBeom-Park", - "SooYeonKim" + "alattalatta" ] }, - "Web/JavaScript/Guide/정규식/Assertions": { - "modified": "2020-09-14T21:47:15.957Z", + "Web/JavaScript/Reference/Global_Objects/Number/parseInt": { + "modified": "2020-10-15T21:38:16.285Z", "contributors": [ - "limkukhyun" + "alattalatta", + "SphinxKnight", + "chro0611" ] }, - "Web/JavaScript/Guide/정규식/Groups_and_Ranges": { - "modified": "2020-03-12T19:49:33.624Z", + "Web/JavaScript/Reference/Global_Objects/Number/toExponential": { + "modified": "2020-10-15T22:16:46.694Z", "contributors": [ - "limkukhyun" + "lifeisnovel" ] }, - "Web/JavaScript/Guide/함수": { - "modified": "2020-03-12T19:41:24.935Z", + "Web/JavaScript/Reference/Global_Objects/Number/toFixed": { + "modified": "2020-10-15T21:50:45.262Z", "contributors": [ - "limkukhyun", - "01045972746", - "jeoyoho", - "bigsaigon333", - "creatijin", - "jungpaeng", - "gudrl", - "wafersroom", - "gaeun917", - "SSaMKJ", - "JunLee", - "woochankim", - "JunBeom-Park", - "SooYeonKim" + "alattalatta", + "Lutece" ] }, - "Web/JavaScript/Introduction_to_Object-Oriented_JavaScript": { - "modified": "2019-03-23T23:29:46.029Z", + "Web/JavaScript/Reference/Global_Objects/Number/toPrecision": { + "modified": "2020-10-15T22:02:15.943Z", "contributors": [ - "Parcovia", - "JayK95", - "rinuel", - "teoli", - "JaehaAhn" + "take0415" ] }, - "Web/JavaScript/JavaScript_technologies_overview": { - "modified": "2020-03-12T19:37:59.087Z", + "Web/JavaScript/Reference/Global_Objects/Number/toString": { + "modified": "2020-10-15T21:48:38.962Z", "contributors": [ "alattalatta", - "teoli", - "ethertank", - "jaemin_jo" + "magnoliaa" ] }, - "Web/JavaScript/Memory_Management": { - "modified": "2020-03-12T19:37:54.884Z", + "Web/JavaScript/Reference/Global_Objects/Number/valueOf": { + "modified": "2020-10-15T22:10:14.373Z", "contributors": [ - "presentY1897", - "johngrib", - "KSH-code", - "teoli", - "jaemin_jo" + "alattalatta", + "DeadIntegral" ] }, - "Web/JavaScript/Reference": { - "modified": "2020-03-12T19:36:53.431Z", + "Web/JavaScript/Reference/Global_Objects/Object": { + "modified": "2020-10-15T21:19:43.435Z", "contributors": [ - "limkukhyun", - "naduhy2", - "Netaras", - "epicsaga", + "alattalatta", + "Parcovia", + "palindrom615", + "callin2", + "StrongStoone", + "maytree", + "keikeiem", "teoli", - "Constantine Kim", - "MoGi", - "Dyhan81", - "Goldmund" + "Jeado.Ko" ] }, - "Web/JavaScript/Reference/About": { - "modified": "2020-03-12T19:37:02.761Z", + "Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__": { + "modified": "2020-10-15T22:08:32.403Z", "contributors": [ - "limkukhyun", - "teoli", - "Dyhan81", - "Netaras", - "taggon", - "Goldmund" + "LeeDDHH" ] }, - "Web/JavaScript/Reference/Classes": { - "modified": "2020-12-02T08:06:01.229Z", + "Web/JavaScript/Reference/Global_Objects/Object/assign": { + "modified": "2020-10-15T21:49:34.841Z", "contributors": [ - "woochul2", - "hjleesm", - "dsma73", - "HyunSangHan", - "seulgiyoon", - "kylajung", - "genzuby", - "fscholz", - "jyhwng", - "roupkk", - "hibiya", + "cs09g", + "limkukhyun", + "TK-one", + "alattalatta", + "LOG91", + "kikas", "faker007", - "hwshim", - "preco21", - "maytree" - ] - }, - "Web/JavaScript/Reference/Classes/Class_fields": { - "modified": "2020-10-15T22:29:50.457Z", - "contributors": [ - "dooyou21" + "dale0713" ] }, - "Web/JavaScript/Reference/Classes/Private_class_fields": { - "modified": "2020-11-08T09:14:41.975Z", + "Web/JavaScript/Reference/Global_Objects/Object/constructor": { + "modified": "2020-10-15T21:47:07.109Z", "contributors": [ - "seong7" + "alattalatta", + "Netaras" ] }, - "Web/JavaScript/Reference/Classes/constructor": { - "modified": "2020-10-15T21:42:34.132Z", + "Web/JavaScript/Reference/Global_Objects/Object/create": { + "modified": "2019-10-02T03:34:36.779Z", "contributors": [ - "alattalatta", - "hyoni0817", - "limkukhyun", - "jeonnoej" + "ibizcox", + "Netaras" ] }, - "Web/JavaScript/Reference/Classes/extends": { - "modified": "2020-10-15T21:43:47.995Z", + "Web/JavaScript/Reference/Global_Objects/Object/defineProperties": { + "modified": "2020-10-15T21:54:36.990Z", "contributors": [ - "limkukhyun", - "Netaras", - "jeonnoej" + "EatChangmyeong", + "KangHyeongMin", + "DevJang", + "BANIP" ] }, - "Web/JavaScript/Reference/Classes/static": { - "modified": "2020-10-15T21:43:46.615Z", + "Web/JavaScript/Reference/Global_Objects/Object/defineProperty": { + "modified": "2020-10-15T21:37:24.444Z", "contributors": [ + "alattalatta", "kimkyeseung", - "limkukhyun", - "jeonnoej", - "taihwayoun" + "mixed", + "bsidesoft" ] }, - "Web/JavaScript/Reference/Deprecated_and_obsolete_features": { - "modified": "2020-03-12T19:44:53.109Z", + "Web/JavaScript/Reference/Global_Objects/Object/entries": { + "modified": "2020-10-15T22:08:09.257Z", "contributors": [ - "alattalatta", - "imskojs" + "honggaruy", + "limkukhyun" ] }, - "Web/JavaScript/Reference/Errors": { - "modified": "2020-03-12T19:43:42.482Z", + "Web/JavaScript/Reference/Global_Objects/Object/freeze": { + "modified": "2020-10-15T21:37:04.618Z", "contributors": [ - "Netaras", - "fscholz" + "alattalatta", + "cs09g", + "gatherKnowledge", + "roupkk", + "hanmomhanda" ] }, - "Web/JavaScript/Reference/Errors/Bad_octal": { - "modified": "2020-03-12T19:44:24.834Z", + "Web/JavaScript/Reference/Global_Objects/Object/fromEntries": { + "modified": "2020-10-15T22:10:27.914Z", "contributors": [ - "magnoliaa" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Bad_radix": { - "modified": "2020-03-12T19:44:34.573Z", + "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor": { + "modified": "2020-10-15T21:47:07.447Z", "contributors": [ - "magnoliaa" + "fscholz", + "Netaras" ] }, - "Web/JavaScript/Reference/Errors/Bad_regexp_flag": { - "modified": "2020-03-12T19:48:27.405Z", + "Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf": { + "modified": "2019-03-23T22:31:23.968Z", "contributors": [ - "vividhee" + "Netaras" ] }, - "Web/JavaScript/Reference/Errors/Bad_return_or_yield": { - "modified": "2020-03-12T19:46:13.633Z", + "Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty": { + "modified": "2020-10-15T21:39:57.262Z", "contributors": [ - "2oosoo", - "highdali" + "Chloe-HyunJoo", + "alattalatta", + "epicsaga" ] }, - "Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init": { - "modified": "2020-03-12T19:47:46.720Z", + "Web/JavaScript/Reference/Global_Objects/Object/is": { + "modified": "2020-10-15T21:31:34.796Z", "contributors": [ - "SSJ-unclear" + "alattalatta", + "Netaras", + "nacyot", + "ligeek", + "lv0gun9" ] }, - "Web/JavaScript/Reference/Errors/Delete_in_strict_mode": { - "modified": "2020-03-12T19:48:24.242Z", + "Web/JavaScript/Reference/Global_Objects/Object/isExtensible": { + "modified": "2020-10-15T21:47:08.415Z", "contributors": [ - "vividhee" + "alattalatta", + "Netaras" ] }, - "Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage": { - "modified": "2020-03-12T19:44:32.792Z", + "Web/JavaScript/Reference/Global_Objects/Object/isFrozen": { + "modified": "2020-10-15T21:47:09.610Z", "contributors": [ - "magnoliaa" + "alattalatta", + "Netaras" ] }, - "Web/JavaScript/Reference/Errors/Deprecated_octal": { - "modified": "2020-03-12T19:48:30.330Z", + "Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf": { + "modified": "2020-10-15T21:37:04.091Z", "contributors": [ - "magnoliaa" + "alattalatta", + "BrandenYoon", + "bsidesoft" ] }, - "Web/JavaScript/Reference/Errors/Identifier_after_number": { - "modified": "2020-03-12T19:48:24.600Z", + "Web/JavaScript/Reference/Global_Objects/Object/isSealed": { + "modified": "2020-10-15T21:47:09.579Z", "contributors": [ - "vividhee" + "alattalatta", + "Netaras" ] }, - "Web/JavaScript/Reference/Errors/Illegal_character": { - "modified": "2020-03-12T19:48:28.614Z", + "Web/JavaScript/Reference/Global_Objects/Object/preventExtensions": { + "modified": "2020-10-15T21:47:09.416Z", "contributors": [ - "vividhee" + "alattalatta", + "Netaras" ] }, - "Web/JavaScript/Reference/Errors/Invalid_array_length": { - "modified": "2020-03-12T19:43:37.920Z", + "Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable": { + "modified": "2020-10-15T21:52:42.061Z", "contributors": [ - "epicsaga" + "deltakor1234", + "alattalatta", + "dotorify" ] }, - "Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side": { - "modified": "2020-03-12T19:44:36.449Z", + "Web/JavaScript/Reference/Global_Objects/Object/seal": { + "modified": "2020-10-15T21:37:04.586Z", "contributors": [ - "magnoliaa" + "alattalatta", + "hanmomhanda" ] }, - "Web/JavaScript/Reference/Errors/Invalid_date": { - "modified": "2020-03-12T19:47:45.133Z", + "Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf": { + "modified": "2020-11-04T03:29:23.911Z", "contributors": [ - "Olivia_J" + "psk810", + "DevJang", + "kingsae1" ] }, - "Web/JavaScript/Reference/Errors/Invalid_for-in_initializer": { - "modified": "2020-03-12T19:48:28.444Z", + "Web/JavaScript/Reference/Global_Objects/Object/toLocaleString": { + "modified": "2020-10-15T22:08:09.241Z", "contributors": [ - "vividhee" + "alattalatta", + "limkukhyun" ] }, - "Web/JavaScript/Reference/Errors/Invalid_for-of_initializer": { - "modified": "2020-03-12T19:48:24.879Z", + "Web/JavaScript/Reference/Global_Objects/Object/toString": { + "modified": "2020-10-15T21:46:52.765Z", "contributors": [ - "vividhee" + "ESnark", + "alattalatta", + "limkukhyun", + "kennen", + "sandArtChip" ] }, - "Web/JavaScript/Reference/Errors/JSON_bad_parse": { - "modified": "2020-03-12T19:46:13.524Z", + "Web/JavaScript/Reference/Global_Objects/Object/valueOf": { + "modified": "2020-10-15T21:49:29.419Z", "contributors": [ - "highdali" + "honggaruy", + "alattalatta", + "stitchworkingonthecode" ] }, - "Web/JavaScript/Reference/Errors/Malformed_formal_parameter": { - "modified": "2020-03-12T19:48:03.882Z", + "Web/JavaScript/Reference/Global_Objects/Object/values": { + "modified": "2020-10-15T22:01:47.626Z", "contributors": [ - "SSJ-unclear" + "OhSeungHyeon", + "KIMSEONGSEOB" ] }, - "Web/JavaScript/Reference/Errors/Missing_bracket_after_list": { - "modified": "2020-03-12T19:48:26.441Z", + "Web/JavaScript/Reference/Global_Objects/Promise": { + "modified": "2020-10-15T21:37:31.734Z", "contributors": [ - "vividhee" + "Vimming", + "alattalatta", + "khg0712", + "limkukhyun", + "samee", + "fscholz", + "NessunKim", + "ahnjungho", + "Netaras", + "redcamel", + "EunwooCho", + "akic4op4", + "0xABCDEF" ] }, - "Web/JavaScript/Reference/Errors/Missing_colon_after_property_id": { - "modified": "2020-03-12T19:48:28.709Z", + "Web/JavaScript/Reference/Global_Objects/Promise/Promise": { + "modified": "2020-10-15T22:27:11.901Z", "contributors": [ - "vividhee" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Missing_curly_after_property_list": { - "modified": "2020-03-12T19:47:44.512Z", + "Web/JavaScript/Reference/Global_Objects/Promise/all": { + "modified": "2020-10-15T21:45:48.976Z", "contributors": [ - "Olivia_J" + "EatChangmyeong", + "alattalatta", + "DeadIntegral", + "limkukhyun", + "fscholz", + "hoony" ] }, - "Web/JavaScript/Reference/Errors/Missing_initializer_in_const": { - "modified": "2020-03-12T19:48:10.711Z", + "Web/JavaScript/Reference/Global_Objects/Promise/allSettled": { + "modified": "2020-10-15T22:24:05.512Z", "contributors": [ - "rlaace423" + "composite" ] }, - "Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator": { - "modified": "2020-03-12T19:48:36.679Z", + "Web/JavaScript/Reference/Global_Objects/Promise/finally": { + "modified": "2020-10-15T22:04:25.149Z", "contributors": [ - "magnoliaa" + "ditto572", + "Seok.Heo" ] }, - "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list": { - "modified": "2020-03-12T19:47:15.700Z", + "Web/JavaScript/Reference/Global_Objects/Promise/race": { + "modified": "2020-10-15T21:47:12.859Z", "contributors": [ - "nicekkong" + "EatChangmyeong", + "alattalatta", + "seungha-kim", + "fscholz", + "Netaras" ] }, - "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition": { - "modified": "2020-03-12T19:47:45.484Z", + "Web/JavaScript/Reference/Global_Objects/Promise/reject": { + "modified": "2020-10-15T21:47:12.472Z", "contributors": [ - "Olivia_J" + "fscholz", + "Netaras" ] }, - "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": { - "modified": "2020-03-12T19:46:46.133Z", + "Web/JavaScript/Reference/Global_Objects/Promise/resolve": { + "modified": "2020-10-15T21:47:20.702Z", "contributors": [ - "magnoliaa" + "cs09g", + "fscholz", + "QooQooDass", + "Netaras" ] }, - "Web/JavaScript/Reference/Errors/More_arguments_needed": { - "modified": "2020-03-12T19:48:33.843Z", + "Web/JavaScript/Reference/Global_Objects/Promise/then": { + "modified": "2020-10-15T21:47:12.138Z", "contributors": [ - "magnoliaa" + "EatChangmyeong", + "fscholz", + "KisukPark", + "Netaras" ] }, - "Web/JavaScript/Reference/Errors/Negative_repetition_count": { - "modified": "2020-03-12T19:44:34.819Z", + "Web/JavaScript/Reference/Global_Objects/Proxy": { + "modified": "2020-10-15T21:50:18.794Z", "contributors": [ - "magnoliaa" + "alattalatta", + "callin2", + "heejunghwang" ] }, - "Web/JavaScript/Reference/Errors/No_variable_name": { - "modified": "2020-03-12T19:48:33.115Z", + "Web/JavaScript/Reference/Global_Objects/RangeError": { + "modified": "2019-03-23T22:28:44.569Z", "contributors": [ "magnoliaa" ] }, - "Web/JavaScript/Reference/Errors/Not_a_codepoint": { - "modified": "2020-03-12T19:44:27.869Z", + "Web/JavaScript/Reference/Global_Objects/ReferenceError": { + "modified": "2020-10-15T22:01:04.430Z", "contributors": [ - "magnoliaa" + "goeo1066" ] }, - "Web/JavaScript/Reference/Errors/Not_a_constructor": { - "modified": "2020-03-12T19:46:59.075Z", + "Web/JavaScript/Reference/Global_Objects/Reflect": { + "modified": "2020-10-15T21:53:08.377Z", "contributors": [ - "Latera" + "alattalatta", + "undefcat" ] }, - "Web/JavaScript/Reference/Errors/Not_defined": { - "modified": "2020-03-12T19:44:37.119Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/apply": { + "modified": "2020-10-15T21:53:07.400Z", "contributors": [ - "magnoliaa" + "alattalatta", + "undefcat" ] }, - "Web/JavaScript/Reference/Errors/Precision_range": { - "modified": "2020-03-12T19:44:32.328Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/construct": { + "modified": "2020-10-15T22:19:07.053Z", "contributors": [ - "magnoliaa" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Property_access_denied": { - "modified": "2020-03-12T19:44:32.773Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/defineProperty": { + "modified": "2020-10-15T22:19:08.726Z", "contributors": [ - "magnoliaa" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Read-only": { - "modified": "2020-03-12T19:47:45.720Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty": { + "modified": "2020-10-15T22:19:07.741Z", "contributors": [ - "Olivia_J" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value": { - "modified": "2020-03-12T19:49:30.091Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/get": { + "modified": "2020-10-15T22:19:16.367Z", "contributors": [ - "WonWoongJang" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Reserved_identifier": { - "modified": "2020-03-12T19:48:28.133Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/getOwnPropertyDescriptor": { + "modified": "2020-10-15T22:19:17.438Z", "contributors": [ - "vividhee" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Resulting_string_too_large": { - "modified": "2020-03-12T19:44:36.352Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/getPrototypeOf": { + "modified": "2020-10-15T22:19:16.737Z", "contributors": [ - "magnoliaa" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params": { - "modified": "2020-03-12T19:47:43.886Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/has": { + "modified": "2020-10-15T22:19:16.455Z", "contributors": [ - "SSJ-unclear" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Too_much_recursion": { - "modified": "2020-03-12T19:44:33.119Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible": { + "modified": "2020-10-15T22:19:18.378Z", "contributors": [ - "Kaben", - "magnoliaa" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Undeclared_var": { - "modified": "2020-03-12T19:44:33.741Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys": { + "modified": "2020-10-15T22:19:19.765Z", "contributors": [ - "magnoliaa" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Undefined_prop": { - "modified": "2020-03-12T19:44:33.728Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/preventExtensions": { + "modified": "2020-10-15T22:19:30.244Z", "contributors": [ - "magnoliaa" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Unexpected_token": { - "modified": "2020-03-12T19:44:11.696Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/set": { + "modified": "2020-10-15T22:19:35.877Z", "contributors": [ - "ChangSungsil" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Unexpected_type": { - "modified": "2020-03-12T19:45:33.484Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/setPrototypeOf": { + "modified": "2020-10-15T22:19:38.264Z", "contributors": [ - "yura-Choi" + "alattalatta" ] }, - "Web/JavaScript/Reference/Errors/Unnamed_function_statement": { - "modified": "2020-03-12T19:48:26.448Z", + "Web/JavaScript/Reference/Global_Objects/RegExp": { + "modified": "2020-10-15T21:38:50.461Z", "contributors": [ - "vividhee" + "alattalatta", + "EatChangmyeong", + "zerodice0", + "momoci99", + "hanabiai", + "Latera", + "tmxkwkfgka" ] }, - "Web/JavaScript/Reference/Errors/is_not_iterable": { - "modified": "2020-03-12T19:48:24.798Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/RegExp": { + "modified": "2020-10-15T22:32:38.454Z", "contributors": [ - "cs09g" + "alattalatta" ] }, - "Web/JavaScript/Reference/Functions": { - "modified": "2020-10-15T21:37:58.963Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/exec": { + "modified": "2020-10-15T21:47:37.584Z", "contributors": [ - "harryjjun", - "Dailyscat", - "limkukhyun", "alattalatta", - "Netaras", - "sftblw" + "yumi2011", + "dale0713" ] }, - "Web/JavaScript/Reference/Functions/Default_parameters": { - "modified": "2020-10-15T21:45:58.179Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/n": { + "modified": "2020-10-15T22:18:51.448Z", "contributors": [ - "honggaruy", - "gbyman", - "kbsbroad", - "Netaras" + "dragmove" ] }, - "Web/JavaScript/Reference/Functions/Method_definitions": { - "modified": "2020-03-12T19:44:05.728Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/test": { + "modified": "2020-10-15T22:32:39.804Z", "contributors": [ - "kdex", - "Netaras" + "alattalatta" ] }, - "Web/JavaScript/Reference/Functions/arguments": { - "modified": "2020-10-15T21:38:47.452Z", + "Web/JavaScript/Reference/Global_Objects/Set": { + "modified": "2020-10-15T21:48:48.879Z", "contributors": [ "alattalatta", + "RingoKim", + "loslch", + "dale0713", + "NessunKim", "Netaras", - "tmxkwkfgka" + "vsemozhetbyt" ] }, - "Web/JavaScript/Reference/Functions/arguments/@@iterator": { - "modified": "2020-10-15T22:12:01.387Z", + "Web/JavaScript/Reference/Global_Objects/Set/add": { + "modified": "2020-10-15T22:11:36.093Z", "contributors": [ "alattalatta", - "vividhee" + "chan337337" ] }, - "Web/JavaScript/Reference/Functions/arguments/callee": { - "modified": "2020-03-12T19:44:03.622Z", + "Web/JavaScript/Reference/Global_Objects/Set/clear": { + "modified": "2020-10-15T22:15:10.272Z", "contributors": [ - "Netaras" + "alattalatta" ] }, - "Web/JavaScript/Reference/Functions/arguments/length": { - "modified": "2020-10-15T21:48:18.638Z", + "Web/JavaScript/Reference/Global_Objects/Set/delete": { + "modified": "2020-10-15T22:15:14.997Z", "contributors": [ - "alattalatta", - "magnoliaa" + "alattalatta" ] }, - "Web/JavaScript/Reference/Functions/get": { - "modified": "2020-10-15T21:48:28.043Z", + "Web/JavaScript/Reference/Global_Objects/Set/forEach": { + "modified": "2020-10-15T22:15:19.403Z", "contributors": [ - "SSJ-unclear", - "DGURI", - "NessunKim" + "alattalatta" ] }, - "Web/JavaScript/Reference/Functions/rest_parameters": { - "modified": "2020-10-15T21:46:03.879Z", + "Web/JavaScript/Reference/Global_Objects/Set/has": { + "modified": "2020-10-15T22:15:10.010Z", "contributors": [ - "Geun-Hyung_Kim", - "cs09g", - "Netaras" + "alattalatta" ] }, - "Web/JavaScript/Reference/Functions/set": { - "modified": "2020-03-12T19:44:54.074Z", + "Web/JavaScript/Reference/Global_Objects/Set/size": { + "modified": "2020-10-15T22:15:09.484Z", "contributors": [ - "daehyoung" + "alattalatta" ] }, - "Web/JavaScript/Reference/Functions/애로우_펑션": { - "modified": "2020-10-15T21:39:57.499Z", + "Web/JavaScript/Reference/Global_Objects/Set/values": { + "modified": "2020-10-15T22:18:44.617Z", "contributors": [ - "honggaruy", - "Vimming", - "songdoing", - "gbyman", - "yonggoo.noh", - "jjangga0214", - "geunhyung", - "limkukhyun", - "kangsan_Chang", - "nyaawlsh", - "daehyoung", - "Geun-Hyung_Kim", - "Netaras", - "preco21", - "chiyodad", - "Jeeeyul" + "VictorTaekLim" ] }, - "Web/JavaScript/Reference/Global_Objects": { - "modified": "2020-08-05T00:51:40.442Z", + "Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer": { + "modified": "2020-10-15T21:58:45.362Z", "contributors": [ - "alattalatta", - "loslch", - "skyfly33", - "Netaras", "cs09g", - "Rachel0211", - "teoli" + "ENvironmentSet" ] }, - "Web/JavaScript/Reference/Global_Objects/AggregateError": { - "modified": "2020-11-15T04:22:22.892Z", + "Web/JavaScript/Reference/Global_Objects/String": { + "modified": "2020-10-15T21:22:11.475Z", "contributors": [ - "Donghoon" + "alattalatta", + "seungha-kim", + "pusanbear", + "teoli", + "MoGi" ] }, - "Web/JavaScript/Reference/Global_Objects/Array": { - "modified": "2020-10-15T21:18:12.731Z", + "Web/JavaScript/Reference/Global_Objects/String/Trim": { + "modified": "2020-10-15T21:58:30.718Z", "contributors": [ - "kwangdosa", "alattalatta", - "wbamberg", - "limkukhyun", - "sominlee", - "HanuLatte", - "joeunha", - "maytree", - "VBChunguk", - "JaegangLee", - "teoli", - "taggon", - "Aeuiop" + "dasebee" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/@@iterator": { - "modified": "2020-10-15T21:43:02.789Z", + "Web/JavaScript/Reference/Global_Objects/String/charAt": { + "modified": "2020-10-15T21:45:37.005Z", "contributors": [ + "bohyun611kim", "alattalatta", - "KisukPark", - "hwangtan", - "." + "pusanbear" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/@@species": { - "modified": "2020-10-15T21:50:41.909Z", + "Web/JavaScript/Reference/Global_Objects/String/charCodeAt": { + "modified": "2020-10-15T21:48:27.284Z", "contributors": [ "alattalatta", - "KisukPark", - "imskojs" + "dale0713" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/@@unscopables": { - "modified": "2020-10-15T21:50:41.776Z", + "Web/JavaScript/Reference/Global_Objects/String/concat": { + "modified": "2020-10-15T21:45:37.865Z", "contributors": [ + "yami03", + "seulgiyoon", "alattalatta", - "zziuni", - "imskojs" + "pusanbear" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/Array": { - "modified": "2020-10-15T22:26:58.481Z", + "Web/JavaScript/Reference/Global_Objects/String/endsWith": { + "modified": "2020-04-21T05:33:31.555Z", + "contributors": [ + "yami03", + "pusanbear" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/fromCharCode": { + "modified": "2020-10-15T22:13:58.437Z", "contributors": [ "alattalatta" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/Reduce": { - "modified": "2020-10-15T21:41:30.424Z", + "Web/JavaScript/Reference/Global_Objects/String/includes": { + "modified": "2020-10-15T21:45:37.765Z", "contributors": [ "alattalatta", - "dolmoon", - "KisukPark", - "ieay4a", - "Violetdusk", - "Netaras", - "preco21" + "pusanbear" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/ReduceRight": { - "modified": "2020-10-15T21:50:39.970Z", + "Web/JavaScript/Reference/Global_Objects/String/indexOf": { + "modified": "2020-10-15T21:45:49.888Z", "contributors": [ "alattalatta", - "KisukPark", - "zziuni", - "imskojs" + "pusanbear" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/concat": { - "modified": "2020-10-15T21:38:49.144Z", + "Web/JavaScript/Reference/Global_Objects/String/lastIndexOf": { + "modified": "2020-10-15T21:45:54.942Z", "contributors": [ - "RamiTae", - "bohyun611kim", "alattalatta", - "KisukPark", - "VBChunguk", - "tmxkwkfgka" + "jihunsuh", + "pusanbear" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/copyWithin": { - "modified": "2020-10-15T21:50:40.123Z", + "Web/JavaScript/Reference/Global_Objects/String/length": { + "modified": "2020-10-15T21:45:30.378Z", "contributors": [ "alattalatta", - "KisukPark", - "withdude2", - "imskojs" + "pusanbear" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/entries": { - "modified": "2020-10-15T21:41:29.970Z", + "Web/JavaScript/Reference/Global_Objects/String/localeCompare": { + "modified": "2020-10-15T21:57:59.121Z", "contributors": [ - "honggaruy", - "alattalatta", - "KisukPark", - "SphinxKnight", - "keypointer", - "kdex", - "preco21" + "bboding", + "s2s2kim" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/every": { - "modified": "2020-10-15T21:41:30.327Z", + "Web/JavaScript/Reference/Global_Objects/String/match": { + "modified": "2020-10-15T22:06:19.802Z", "contributors": [ - "alattalatta", - "KisukPark", - "limkukhyun", - "Netaras", - "Kaben", - "preco21" + "Donghoon", + "chaewonkong", + "Yonnani" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/fill": { - "modified": "2020-10-15T21:36:43.146Z", + "Web/JavaScript/Reference/Global_Objects/String/normalize": { + "modified": "2020-10-15T22:16:57.680Z", "contributors": [ - "alattalatta", - "KisukPark", - "SphinxKnight", - "withdude2", - "ligeek" + "lifeisnovel" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/filter": { - "modified": "2020-10-15T21:41:17.863Z", + "Web/JavaScript/Reference/Global_Objects/String/padEnd": { + "modified": "2020-10-15T22:08:41.887Z", "contributors": [ - "RamiTae", - "alattalatta", - "bohyun611kim", - "pineoc", - "jewon", - "limkukhyun", - "KisukPark", - "Saem", - "Netaras", - "rageboom", - "Yunhong-Min", - "keypointer" + "alattalatta" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/find": { - "modified": "2020-10-15T21:48:55.826Z", + "Web/JavaScript/Reference/Global_Objects/String/padStart": { + "modified": "2020-10-15T22:08:41.615Z", "contributors": [ - "alattalatta", - "QooQooDass", - "KisukPark", - "sonjh02", - "meganson", - "yuntaek", - "Jaysok" + "alattalatta" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/findIndex": { - "modified": "2020-10-15T21:50:40.640Z", + "Web/JavaScript/Reference/Global_Objects/String/repeat": { + "modified": "2020-10-15T21:56:14.890Z", "contributors": [ - "hyoni0817", - "Hyeok_Jo", "alattalatta", - "KisukPark", - "sonjh02", - "imskojs" + "wicksome" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/flat": { - "modified": "2020-10-15T22:08:27.831Z", + "Web/JavaScript/Reference/Global_Objects/String/replace": { + "modified": "2020-10-15T21:48:26.744Z", "contributors": [ + "limkukhyun", + "yonggoo.noh", "alattalatta", - "moonformeli", - "cs09g" + "ejay0811", + "rlaxognsk", + "dale0713" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/flatMap": { - "modified": "2020-10-15T22:08:28.496Z", + "Web/JavaScript/Reference/Global_Objects/String/search": { + "modified": "2020-10-15T22:10:00.509Z", "contributors": [ - "DaegiKim", - "24seconds", - "moonformeli", - "alattalatta", - "cs09g" + "Parcovia" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/forEach": { - "modified": "2020-10-15T21:47:39.068Z", + "Web/JavaScript/Reference/Global_Objects/String/slice": { + "modified": "2020-10-15T21:53:59.719Z", "contributors": [ - "alattalatta", - "RootyJin", - "jeongchaeuk", - "Parcovia", + "bigsaigon333", "limkukhyun", - "KisukPark", - "Netaras" + "KaylaKwon", + "enchantor", + "REDO", + "laranhee", + "AlexMin" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/from": { - "modified": "2020-10-15T21:37:56.478Z", + "Web/JavaScript/Reference/Global_Objects/String/split": { + "modified": "2020-10-15T22:14:46.442Z", "contributors": [ + "EatChangmyeong", "alattalatta", - "Violet-Bora-Lee", - "KisukPark", - "SphinxKnight", - "디토", - "ligeek" + "yuntaek" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/includes": { - "modified": "2020-10-15T21:50:39.977Z", + "Web/JavaScript/Reference/Global_Objects/String/startsWith": { + "modified": "2020-10-15T21:47:53.784Z", "contributors": [ - "IMHOJEONG", "alattalatta", - "KisukPark", - "KlausLee", - "khsiea", - "imskojs" + "skylar.kim" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/indexOf": { - "modified": "2020-10-15T21:50:40.883Z", + "Web/JavaScript/Reference/Global_Objects/String/substr": { + "modified": "2020-10-15T21:47:08.634Z", "contributors": [ - "biniruu", - "naraeim", "alattalatta", - "KisukPark", - "imskojs" + "pusanbear" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/isArray": { - "modified": "2020-10-15T21:41:14.689Z", + "Web/JavaScript/Reference/Global_Objects/String/substring": { + "modified": "2020-10-15T22:18:53.078Z", "contributors": [ - "alattalatta", - "KisukPark", - "KaironMoon", - "keypointer", - "johngrib" + "Saem", + "bohyun611kim" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/join": { - "modified": "2020-10-15T21:41:15.362Z", + "Web/JavaScript/Reference/Global_Objects/String/toLowerCase": { + "modified": "2020-10-15T21:57:11.550Z", "contributors": [ - "shj9432", "alattalatta", - "KisukPark", - "VBChunguk" + "swtpumpkin" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/keys": { - "modified": "2020-10-15T21:41:30.210Z", + "Web/JavaScript/Reference/Global_Objects/String/toSource": { + "modified": "2020-10-15T22:02:06.022Z", "contributors": [ - "alattalatta", - "KisukPark", - "SphinxKnight", - "preco21" + "teoli", + "ejay0811" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf": { - "modified": "2020-10-15T21:50:40.016Z", + "Web/JavaScript/Reference/Global_Objects/String/toString": { + "modified": "2020-10-15T22:27:29.788Z", "contributors": [ - "alattalatta", - "KisukPark", - "zziuni", - "imskojs" + "rjsdnql123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/length": { - "modified": "2020-10-15T21:41:28.876Z", + "Web/JavaScript/Reference/Global_Objects/String/toUpperCase": { + "modified": "2020-10-15T21:55:16.088Z", "contributors": [ "alattalatta", - "preco21" + "swtpumpkin", + "seokju-na" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/map": { - "modified": "2020-10-15T21:36:42.699Z", + "Web/JavaScript/Reference/Global_Objects/String/valueOf": { + "modified": "2020-10-15T22:25:44.637Z", "contributors": [ - "seulgiyoon", - "alattalatta", - "KisukPark", - "sshplendid", - "selfiens", - "the1900", - "reoim", - "Yunhong-Min", - "sominlee", - "Rokt33r", - "epicsaga" + "hyoni0817" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/of": { - "modified": "2020-10-15T21:36:39.776Z", + "Web/JavaScript/Reference/Global_Objects/Symbol": { + "modified": "2020-10-15T21:40:09.882Z", "contributors": [ - "alattalatta", - "KisukPark", - "limkukhyun", - "ligeek" + "dolmoon", + "SphinxKnight", + "HyunSeob", + "maytree" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/pop": { - "modified": "2020-10-15T21:47:37.008Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/for": { + "modified": "2019-03-23T22:16:10.868Z", "contributors": [ - "alattalatta", - "KisukPark", - "Netaras" + "Hou" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/push": { - "modified": "2020-10-15T21:39:22.145Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/iterator": { + "modified": "2020-10-15T22:00:39.078Z", "contributors": [ - "alattalatta", - "KisukPark", - "dsma73", - "Hoto-Cocoa", - "nohsenc", - "dewey94esb" + "limkukhyun", + "BANIP" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/reverse": { - "modified": "2020-10-15T21:41:28.622Z", + "Web/JavaScript/Reference/Global_Objects/SyntaxError": { + "modified": "2020-10-15T21:48:16.048Z", "contributors": [ "alattalatta", - "KisukPark", - "preco21" + "2oosoo", + "magnoliaa" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/shift": { - "modified": "2020-10-15T21:38:19.399Z", + "Web/JavaScript/Reference/Global_Objects/TypeError": { + "modified": "2020-10-15T21:38:37.821Z", "contributors": [ "alattalatta", - "KisukPark", - "DeusNonEst", - "FlowerCoing" + "kirrie", + "JiminP" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/slice": { - "modified": "2020-10-15T21:48:35.659Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray": { + "modified": "2019-06-18T04:56:00.166Z", "contributors": [ - "alattalatta", - "Georgee-lee", - "KisukPark", - "cs09g", - "AlexMin", - "imskojs", - "dale0713" + "kooljay82", + "Netaras", + "Khai96_" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/some": { - "modified": "2020-10-15T21:47:53.706Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator": { + "modified": "2019-03-23T22:30:48.269Z", "contributors": [ - "kimkyeseung", - "alattalatta", - "KisukPark", - "kyunooh", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/sort": { - "modified": "2020-10-15T21:50:40.023Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT": { + "modified": "2020-10-15T21:47:35.788Z", + "contributors": [ + "alattalatta", + "Netaras" + ] + }, + "Web/JavaScript/Reference/Global_Objects/TypedArray/buffer": { + "modified": "2019-03-23T22:30:15.273Z", "contributors": [ - "IvannKim", - "yami03", - "alattalatta", - "KisukPark", - "dsma73", - "seokju-na", - "apple77y", - "imskojs" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/splice": { - "modified": "2020-10-15T21:37:48.347Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength": { + "modified": "2020-10-15T21:47:38.660Z", "contributors": [ "alattalatta", - "selfiens", - "KisukPark", - "wonhoKim", - "laranhee", - "Jei", - "Rokt33r" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/toLocaleString": { - "modified": "2020-10-15T21:47:37.995Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset": { + "modified": "2020-10-15T21:47:35.902Z", "contributors": [ "alattalatta", - "KisukPark", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/toSource": { - "modified": "2020-10-15T22:00:47.617Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/fill": { + "modified": "2020-10-15T21:39:40.326Z", "contributors": [ "alattalatta", - "teoli", - "KisukPark", - "sonjh02" + "Hmmim" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/toString": { - "modified": "2020-10-15T21:47:38.270Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf": { + "modified": "2020-10-15T22:21:44.673Z", "contributors": [ - "alattalatta", - "KisukPark", - "Netaras" + "naraeim", + "SphinxKnight" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/unshift": { - "modified": "2020-10-15T21:41:30.420Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/length": { + "modified": "2020-10-15T21:47:35.796Z", "contributors": [ "alattalatta", - "ChanwheKim", - "KisukPark", - "jisooyu", - "maytree" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/values": { - "modified": "2020-10-15T21:41:31.189Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/name": { + "modified": "2020-10-15T21:47:34.390Z", "contributors": [ "alattalatta", - "KisukPark", - "SphinxKnight", - "preco21" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": { - "modified": "2020-10-15T21:31:34.913Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/of": { + "modified": "2020-10-15T22:03:56.631Z", "contributors": [ - "alattalatta", - "chaewonkong", - "niceilm", - "teoli", - "JiminP", - "yuby" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/ArrayBuffer": { - "modified": "2020-10-15T22:27:33.561Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/reverse": { + "modified": "2020-10-15T21:47:33.171Z", "contributors": [ - "alattalatta" + "alattalatta", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength": { - "modified": "2020-10-15T22:27:34.550Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/set": { + "modified": "2020-10-15T21:47:35.773Z", "contributors": [ - "alattalatta" + "alattalatta", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView": { - "modified": "2020-10-15T22:27:32.623Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/slice": { + "modified": "2019-03-23T22:30:24.203Z", "contributors": [ - "alattalatta" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice": { - "modified": "2020-10-15T22:27:35.359Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/some": { + "modified": "2020-10-15T21:47:37.645Z", "contributors": [ - "alattalatta" + "alattalatta", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/AsyncFunction": { - "modified": "2020-10-15T21:52:51.606Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/sort": { + "modified": "2019-03-23T22:30:47.108Z", "contributors": [ - "ibizcox", - "jooddang", - "limkukhyun", - "ChanghwaLee" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics": { - "modified": "2019-03-23T22:18:58.236Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/values": { + "modified": "2019-03-23T22:30:45.463Z", "contributors": [ - "RyuJin" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/BigInt": { - "modified": "2020-10-15T22:12:37.942Z", + "Web/JavaScript/Reference/Global_Objects/WeakMap": { + "modified": "2019-03-23T22:27:55.353Z", "contributors": [ - "alattalatta" + "Netaras", + "billybraga" ] }, - "Web/JavaScript/Reference/Global_Objects/BigInt/BigInt": { - "modified": "2020-10-15T22:25:40.633Z", + "Web/JavaScript/Reference/Global_Objects/WeakMap/delete": { + "modified": "2020-10-15T22:04:27.439Z", "contributors": [ - "alattalatta" + "alattalatta", + "limkukhyun", + "Seok.Heo" ] }, - "Web/JavaScript/Reference/Global_Objects/BigInt/prototype": { - "modified": "2020-10-15T22:12:31.982Z", + "Web/JavaScript/Reference/Global_Objects/WeakSet": { + "modified": "2020-10-15T21:48:47.357Z", "contributors": [ - "alattalatta" + "alattalatta", + "Netaras", + "fscholz" ] }, - "Web/JavaScript/Reference/Global_Objects/Boolean": { - "modified": "2020-10-15T21:14:40.981Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly": { + "modified": "2020-10-15T21:53:02.555Z", "contributors": [ - "alattalatta", - "wbamberg", - "teoli", - "Gilchris" + "limkukhyun", + "0xABCDEF" ] }, - "Web/JavaScript/Reference/Global_Objects/Boolean/Boolean": { - "modified": "2020-10-15T22:27:46.206Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError": { + "modified": "2020-10-15T22:07:58.077Z", "contributors": [ - "alattalatta" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Boolean/prototype": { - "modified": "2020-10-15T21:43:28.882Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/Global": { + "modified": "2020-10-15T22:08:05.155Z", "contributors": [ - "alattalatta", - "noritersand" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Boolean/toString": { - "modified": "2020-10-15T22:11:53.952Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance": { + "modified": "2020-10-15T22:07:55.815Z", "contributors": [ + "limkukhyun", "alattalatta" ] }, - "Web/JavaScript/Reference/Global_Objects/Boolean/valueOf": { - "modified": "2020-10-15T22:11:54.035Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError": { + "modified": "2020-10-15T22:08:04.793Z", "contributors": [ - "alattalatta" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView": { - "modified": "2020-10-15T21:42:40.867Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory": { + "modified": "2020-10-15T22:08:00.915Z", "contributors": [ - "alattalatta", - "KKang", - "ksyeng" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/DataView": { - "modified": "2020-10-15T22:27:25.683Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/Module": { + "modified": "2020-10-15T22:07:56.280Z", "contributors": [ + "limkukhyun", "alattalatta" ] }, - "Web/JavaScript/Reference/Global_Objects/Date": { - "modified": "2020-10-15T21:18:35.817Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError": { + "modified": "2020-10-15T22:08:08.186Z", "contributors": [ - "alattalatta", - "wbamberg", - "dsma73", - "Shin-JaeHeon", - "seungha-kim", - "seokju-na", - "teoli", - "taggon" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/UTC": { - "modified": "2020-10-15T21:50:44.435Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/Table": { + "modified": "2020-10-15T22:07:58.705Z", "contributors": [ - "alattalatta", - "inpyoj", - "imskojs" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getDate": { - "modified": "2020-10-15T21:50:41.680Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/compile": { + "modified": "2020-10-15T22:07:56.654Z", "contributors": [ - "alattalatta", - "imskojs" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getDay": { - "modified": "2020-10-15T21:50:41.587Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming": { + "modified": "2020-10-15T22:07:56.654Z", "contributors": [ - "alattalatta", - "imskojs" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getFullYear": { - "modified": "2020-10-15T21:50:41.498Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate": { + "modified": "2020-10-15T22:07:57.168Z", "contributors": [ - "alattalatta", - "imskojs" + "fnwinter", + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getHours": { - "modified": "2020-10-15T21:50:41.097Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming": { + "modified": "2020-10-15T22:08:08.189Z", "contributors": [ - "alattalatta", - "imskojs" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds": { - "modified": "2020-10-15T21:50:43.734Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/validate": { + "modified": "2020-10-15T22:08:00.982Z", "contributors": [ - "alattalatta", - "imskojs" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getMinutes": { - "modified": "2020-10-15T21:50:41.182Z", + "Web/JavaScript/Reference/Global_Objects/decodeURI": { + "modified": "2020-10-15T22:01:55.624Z", "contributors": [ - "alattalatta", - "imskojs" + "jeoyoho" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getMonth": { - "modified": "2020-10-15T21:50:42.376Z", + "Web/JavaScript/Reference/Global_Objects/decodeURIComponent": { + "modified": "2020-10-15T21:48:49.294Z", "contributors": [ "alattalatta", - "imskojs" + "jeoyoho", + "magnoliaa" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getSeconds": { - "modified": "2020-10-15T21:50:44.137Z", + "Web/JavaScript/Reference/Global_Objects/encodeURI": { + "modified": "2020-10-15T22:02:01.889Z", "contributors": [ "alattalatta", - "imskojs" + "jeoyoho" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getTime": { - "modified": "2019-03-23T22:23:15.546Z", + "Web/JavaScript/Reference/Global_Objects/encodeURIComponent": { + "modified": "2020-10-15T21:29:14.784Z", "contributors": [ - "hyeonseok", - "imskojs" + "alattalatta", + "SphinxKnight", + "under_09" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset": { - "modified": "2019-03-23T22:23:13.145Z", + "Web/JavaScript/Reference/Global_Objects/eval": { + "modified": "2020-11-14T12:46:31.739Z", "contributors": [ - "imskojs" + "cog25", + "EatChangmyeong", + "alattalatta", + "LOG91", + "goeo1066", + "desty", + "nicesh" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCDate": { - "modified": "2019-03-23T22:23:20.825Z", + "Web/JavaScript/Reference/Global_Objects/globalThis": { + "modified": "2020-10-15T22:14:31.677Z", "contributors": [ - "imskojs" + "alattalatta" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCDay": { - "modified": "2019-03-23T22:23:16.136Z", + "Web/JavaScript/Reference/Global_Objects/isFinite": { + "modified": "2020-10-15T21:44:39.927Z", "contributors": [ - "imskojs" + "alattalatta", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear": { - "modified": "2019-03-23T22:23:15.265Z", + "Web/JavaScript/Reference/Global_Objects/isNaN": { + "modified": "2020-10-15T21:46:27.577Z", "contributors": [ - "imskojs" + "alattalatta", + "Parcovia", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCHours": { - "modified": "2019-03-23T22:23:09.557Z", + "Web/JavaScript/Reference/Global_Objects/null": { + "modified": "2020-10-15T21:40:32.117Z", "contributors": [ - "imskojs" + "alattalatta", + "nicesh" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds": { - "modified": "2019-03-23T22:23:07.710Z", + "Web/JavaScript/Reference/Global_Objects/parseFloat": { + "modified": "2020-10-15T21:58:14.258Z", "contributors": [ - "imskojs" + "alattalatta", + "inkyungkim" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes": { - "modified": "2019-03-23T22:23:18.026Z", + "Web/JavaScript/Reference/Global_Objects/parseInt": { + "modified": "2020-10-15T21:48:49.061Z", "contributors": [ - "imskojs" + "bigsaigon333", + "alattalatta", + "magnoliaa" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth": { - "modified": "2019-03-23T22:23:10.004Z", + "Web/JavaScript/Reference/Global_Objects/undefined": { + "modified": "2020-10-15T21:40:31.421Z", "contributors": [ - "imskojs" + "alattalatta", + "nicesh" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds": { - "modified": "2019-03-23T22:23:16.588Z", + "Web/JavaScript/Reference/Global_Objects/uneval": { + "modified": "2020-10-15T21:52:46.647Z", "contributors": [ - "imskojs" + "alattalatta", + "teoli", + "Perlmint" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/now": { - "modified": "2020-12-13T11:19:39.873Z", + "Web/JavaScript/Reference/Iteration_protocols": { + "modified": "2020-03-12T19:44:08.276Z", "contributors": [ - "hansolpp", - "g6ling", - "dale0713" + "Snark", + "dragmove", + "echo304" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/parse": { - "modified": "2019-03-23T22:23:12.000Z", + "Web/JavaScript/Reference/Lexical_grammar": { + "modified": "2020-10-15T21:47:17.603Z", "contributors": [ - "sung-ugje", - "galcyurio", - "imskojs" + "honggaruy", + "alattalatta", + "softweaver", + "Roomination", + "paranbaram" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/prototype": { - "modified": "2020-10-15T21:34:44.080Z", + "Web/JavaScript/Reference/Operators": { + "modified": "2020-10-15T21:15:29.282Z", "contributors": [ + "limkukhyun", + "Violet-Bora-Lee", "alattalatta", - "Cho.Eun", - "ByungChangCha", - "teoli" + "haeguri", + "Netaras", + "teoli", + "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setDate": { - "modified": "2019-03-23T22:23:20.668Z", + "Web/JavaScript/Reference/Operators/Addition": { + "modified": "2020-10-15T22:34:18.983Z", "contributors": [ - "swtpumpkin", - "imskojs" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setFullYear": { - "modified": "2019-03-23T22:23:19.509Z", + "Web/JavaScript/Reference/Operators/Comma_Operator": { + "modified": "2020-10-15T21:48:31.441Z", "contributors": [ - "zziuni", - "imskojs" + "alattalatta", + "hoony" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setHours": { - "modified": "2019-03-23T22:23:20.495Z", + "Web/JavaScript/Reference/Operators/Conditional_Operator": { + "modified": "2020-10-15T21:39:25.018Z", "contributors": [ - "zziuni", - "imskojs" + "pyjun01", + "alattalatta", + "limkukhyun", + "taisuk", + "reoim", + "epicsaga" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds": { - "modified": "2019-03-23T22:23:19.297Z", + "Web/JavaScript/Reference/Operators/Destructuring_assignment": { + "modified": "2020-10-15T21:45:50.516Z", "contributors": [ - "imskojs" + "alattalatta", + "corund", + "dolmoon", + "NessunKim", + "kdex", + "faker007", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setMinutes": { - "modified": "2019-03-23T22:23:09.852Z", + "Web/JavaScript/Reference/Operators/Equality": { + "modified": "2020-10-15T22:35:05.143Z", "contributors": [ - "zziuni", - "imskojs" + "junnapark" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setMonth": { - "modified": "2019-03-23T22:23:18.765Z", + "Web/JavaScript/Reference/Operators/Grouping": { + "modified": "2020-10-15T21:45:49.973Z", "contributors": [ - "zziuni", - "imskojs" + "alattalatta", + "SeungYeol", + "seung-yeol" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setSeconds": { - "modified": "2019-03-23T22:23:08.456Z", + "Web/JavaScript/Reference/Operators/Nullish_coalescing_operator": { + "modified": "2020-10-15T22:25:44.809Z", "contributors": [ - "zziuni", - "imskojs" + "ssohymind", + "Jung.Kyu-Hyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setTime": { - "modified": "2019-03-23T22:23:22.849Z", + "Web/JavaScript/Reference/Operators/Object_initializer": { + "modified": "2020-10-15T21:47:08.402Z", "contributors": [ - "imskojs" + "honggaruy", + "callin2", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCDate": { - "modified": "2019-03-23T22:23:22.400Z", + "Web/JavaScript/Reference/Operators/Optional_chaining": { + "modified": "2020-10-15T22:25:42.843Z", "contributors": [ - "imskojs" + "Jung.Kyu-Hyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear": { - "modified": "2019-03-23T22:23:12.168Z", + "Web/JavaScript/Reference/Operators/Pipeline_operator": { + "modified": "2020-10-15T22:15:31.566Z", "contributors": [ - "zziuni", - "imskojs" + "alattalatta" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCHours": { - "modified": "2019-03-23T22:23:12.991Z", + "Web/JavaScript/Reference/Operators/Property_Accessors": { + "modified": "2020-10-15T21:46:18.602Z", "contributors": [ - "zziuni", - "imskojs" + "alattalatta", + "Violet-Bora-Lee", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds": { - "modified": "2019-03-23T22:23:21.549Z", + "Web/JavaScript/Reference/Operators/Remainder": { + "modified": "2020-10-15T22:35:04.854Z", "contributors": [ - "imskojs" + "junnapark" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes": { - "modified": "2019-03-23T22:23:11.774Z", + "Web/JavaScript/Reference/Operators/Spread_syntax": { + "modified": "2020-10-15T22:03:25.315Z", "contributors": [ - "zziuni", - "imskojs" + "alattalatta", + "cs09g", + "cnaa97", + "ageofsys" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth": { - "modified": "2019-03-23T22:23:12.673Z", + "Web/JavaScript/Reference/Operators/async_function": { + "modified": "2020-10-15T21:53:15.087Z", "contributors": [ - "zziuni", - "imskojs" + "ibizcox", + "alattalatta", + "undefcat" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds": { - "modified": "2019-03-23T22:23:22.693Z", + "Web/JavaScript/Reference/Operators/await": { + "modified": "2020-10-15T21:53:13.195Z", "contributors": [ - "zziuni", - "imskojs" + "rmfpdlxmtidl", + "limkukhyun", + "NessunKim", + "HomoEfficio", + "undefcat" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toDateString": { - "modified": "2020-10-15T21:50:42.628Z", + "Web/JavaScript/Reference/Operators/class": { + "modified": "2020-10-15T21:46:02.874Z", "contributors": [ + "dsma73", "alattalatta", - "inkyungkim", - "imskojs" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toISOString": { - "modified": "2020-10-15T22:09:03.975Z", + "Web/JavaScript/Reference/Operators/delete": { + "modified": "2020-10-15T21:56:50.911Z", "contributors": [ - "alattalatta" + "alattalatta", + "itsjiwonpark", + "Hou" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toJSON": { - "modified": "2020-10-15T22:09:05.629Z", + "Web/JavaScript/Reference/Operators/function": { + "modified": "2020-10-15T21:45:42.250Z", "contributors": [ - "alattalatta" + "dolmoon", + "limkukhyun", + "laranhee", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toString": { - "modified": "2020-10-15T21:56:46.065Z", + "Web/JavaScript/Reference/Operators/function*": { + "modified": "2020-10-15T21:38:18.382Z", "contributors": [ - "alattalatta", - "huseong" + "limkukhyun", + "KSH-code", + "JaehaAhn" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/valueOf": { - "modified": "2020-10-15T22:22:09.213Z", + "Web/JavaScript/Reference/Operators/in": { + "modified": "2020-03-12T19:42:49.608Z", "contributors": [ - "Jihyun_LEE" + "." ] }, - "Web/JavaScript/Reference/Global_Objects/Error": { - "modified": "2020-10-15T21:23:09.336Z", + "Web/JavaScript/Reference/Operators/instanceof": { + "modified": "2020-10-15T21:48:46.760Z", "contributors": [ "alattalatta", - "sunhyung", - "teoli", - "john_jung" + "tg0825", + "dooyou21", + "moolow", + "magnoliaa" ] }, - "Web/JavaScript/Reference/Global_Objects/Error/name": { - "modified": "2020-10-15T22:01:04.562Z", + "Web/JavaScript/Reference/Operators/new": { + "modified": "2020-10-15T21:50:30.370Z", "contributors": [ - "goeo1066" + "alattalatta", + "luke.bae", + "KSH-code", + "daehyoung" ] }, - "Web/JavaScript/Reference/Global_Objects/EvalError": { - "modified": "2020-10-15T21:50:41.406Z", + "Web/JavaScript/Reference/Operators/new.target": { + "modified": "2020-10-15T21:48:09.333Z", "contributors": [ "alattalatta", - "zziuni", - "imskojs" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Function": { - "modified": "2020-10-15T21:18:08.765Z", + "Web/JavaScript/Reference/Operators/super": { + "modified": "2020-10-15T21:43:46.088Z", "contributors": [ "alattalatta", - "moolow", - "dolmoon", - "Netaras", - "teoli", - "HunminKim", - "Wafe" + "jeonnoej" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/apply": { - "modified": "2020-10-15T21:36:42.231Z", + "Web/JavaScript/Reference/Operators/this": { + "modified": "2020-10-15T21:16:21.207Z", "contributors": [ - "limsungho02", + "StolenMoments", "cs09g", - "jeongchaeuk", "alattalatta", - "jaewanC", - "bsidesoft" + "utatti", + "huusz", + "teoli", + "eros21c", + "Channy" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/arguments": { - "modified": "2020-10-15T22:04:18.058Z", + "Web/JavaScript/Reference/Operators/typeof": { + "modified": "2020-10-15T21:47:39.354Z", "contributors": [ "Seonghui", - "sunhyun" + "alattalatta", + "dale0713" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/bind": { - "modified": "2020-10-15T21:38:38.554Z", + "Web/JavaScript/Reference/Operators/void": { + "modified": "2020-10-15T21:24:25.804Z", "contributors": [ - "dezcao", - "dae-hwa", "alattalatta", - "limkukhyun", - "AlexMin", - "dale0713", - "joeunha", - "Netaras", - "sftblw", - "zuckay79", - "jjhangu" + "teoli", + "siriz" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/call": { - "modified": "2020-10-15T21:19:34.146Z", + "Web/JavaScript/Reference/Operators/yield": { + "modified": "2020-03-12T19:43:03.959Z", "contributors": [ - "dasbeerboot", - "paikwiki", - "Netaras", - "stitchworkingonthecode", - "ligeek", - "jjhangu", - "teoli", - "ByungChangYoo", - "Jeado.Ko" + "coolengineer", + "ByeongGi", + "2oosoo", + "Yunhong-Min", + "preco21" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/length": { - "modified": "2020-10-15T21:36:48.277Z", + "Web/JavaScript/Reference/Operators/yield*": { + "modified": "2020-10-15T21:41:31.854Z", "contributors": [ "alattalatta", - "Netaras", - "bsidesoft" + "hanmomhanda", + "preco21" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/name": { - "modified": "2019-03-23T22:54:09.088Z", + "Web/JavaScript/Reference/Statements": { + "modified": "2020-10-15T21:26:12.348Z", "contributors": [ + "alattalatta", + "naduhy2", "Netaras", - "bsidesoft" + "teoli", + "Sheppy" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/toSource": { - "modified": "2020-10-15T22:15:36.685Z", + "Web/JavaScript/Reference/Statements/Empty": { + "modified": "2020-10-15T22:04:17.983Z", "contributors": [ - "cs09g" + "alattalatta", + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Generator": { - "modified": "2019-10-07T03:49:08.925Z", + "Web/JavaScript/Reference/Statements/async_function": { + "modified": "2020-10-15T21:51:55.526Z", "contributors": [ - "stegano", - "Latera", - "loslch", - "kdex", - "preco21" + "MoonHyuk", + "jhoijune", + "DeadIntegral", + "limkukhyun", + "Konan" ] }, - "Web/JavaScript/Reference/Global_Objects/Generator/next": { - "modified": "2019-03-23T22:29:43.014Z", + "Web/JavaScript/Reference/Statements/block": { + "modified": "2020-10-15T21:50:27.290Z", "contributors": [ - "echo304" + "alattalatta", + "daehyoung" ] }, - "Web/JavaScript/Reference/Global_Objects/Generator/return": { - "modified": "2019-03-23T22:29:41.659Z", + "Web/JavaScript/Reference/Statements/break": { + "modified": "2020-10-15T21:44:31.572Z", "contributors": [ - "echo304" + "alattalatta", + "jeehyukwon", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Generator/throw": { - "modified": "2020-10-15T21:47:52.236Z", + "Web/JavaScript/Reference/Statements/class": { + "modified": "2020-10-15T21:46:03.105Z", "contributors": [ "alattalatta", - "echo304" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/GeneratorFunction": { - "modified": "2020-10-15T21:43:23.835Z", + "Web/JavaScript/Reference/Statements/const": { + "modified": "2020-10-15T21:38:50.829Z", "contributors": [ "alattalatta", - "HyunMook", - "AHNJAEHA" + "warnee", + "maxtortime", + "kdex", + "Netaras", + "kuil09" ] }, - "Web/JavaScript/Reference/Global_Objects/Infinity": { - "modified": "2020-10-15T21:44:39.467Z", + "Web/JavaScript/Reference/Statements/continue": { + "modified": "2020-10-15T22:04:27.151Z", "contributors": [ "alattalatta", - "Netaras" + "SSJ-unclear", + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/InternalError": { - "modified": "2019-03-18T21:46:44.351Z", + "Web/JavaScript/Reference/Statements/debugger": { + "modified": "2020-10-15T22:04:18.665Z", "contributors": [ - "teoli", - "magnoliaa" + "alattalatta", + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/InternalError/prototype": { - "modified": "2019-03-23T22:28:33.047Z", + "Web/JavaScript/Reference/Statements/do...while": { + "modified": "2020-10-15T22:30:37.801Z", "contributors": [ - "teoli", - "magnoliaa" + "jyman7811" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl": { - "modified": "2020-10-15T21:56:50.642Z", + "Web/JavaScript/Reference/Statements/export": { + "modified": "2020-10-15T21:41:49.561Z", "contributors": [ + "copyx", "alattalatta", - "hrg921" + "yonggoo.noh", + "LeeJunyeol", + "umbria", + "haydnhkim" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat": { - "modified": "2020-10-15T22:07:32.322Z", + "Web/JavaScript/Reference/Statements/for": { + "modified": "2020-10-15T21:46:03.615Z", "contributors": [ - "fscholz", "alattalatta", - "SSJ-unclear" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype": { - "modified": "2020-10-15T22:22:06.369Z", - "contributors": [ - "fscholz", - "alattalatta" + "SeungYeol" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/Locale": { - "modified": "2020-10-15T22:25:03.900Z", + "Web/JavaScript/Reference/Statements/for-await...of": { + "modified": "2020-10-15T22:27:58.512Z", "contributors": [ - "fscholz", - "sffc" + "composite" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/Locale/language": { - "modified": "2020-10-15T22:25:02.965Z", + "Web/JavaScript/Reference/Statements/for...in": { + "modified": "2020-10-15T21:26:08.013Z", "contributors": [ - "fscholz", - "limkukhyun" + "Sunmin0520", + "limkukhyun", + "teoli", + "Androidbee" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat": { - "modified": "2020-10-15T22:08:58.601Z", + "Web/JavaScript/Reference/Statements/for...of": { + "modified": "2020-10-15T21:36:35.059Z", "contributors": [ - "fscholz", + "jacob17", "alattalatta", - "SDSkyKlouD", - "SSJ-unclear" + "Netaras", + "ligeek" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype": { - "modified": "2020-10-15T22:21:51.361Z", + "Web/JavaScript/Reference/Statements/function": { + "modified": "2020-10-15T21:45:43.150Z", "contributors": [ - "fscholz", - "alattalatta" + "alattalatta", + "dolmoon", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/JSON": { - "modified": "2020-10-15T21:43:51.602Z", + "Web/JavaScript/Reference/Statements/function*": { + "modified": "2020-10-15T21:38:18.568Z", "contributors": [ "alattalatta", - "Parcovia", - "goeo1066", - "Netaras", - "MexieAndCo" + "SphinxKnight", + "silmari", + "kdex", + "resoliwan", + "KisukPark", + "AHNJAEHA", + "preco21", + "JaehaAhn" ] }, - "Web/JavaScript/Reference/Global_Objects/JSON/parse": { - "modified": "2020-10-15T21:44:14.822Z", + "Web/JavaScript/Reference/Statements/if...else": { + "modified": "2020-10-15T21:46:05.432Z", "contributors": [ + "yami03", "alattalatta", "Parcovia", - "subasuba" + "Jungmin" ] }, - "Web/JavaScript/Reference/Global_Objects/JSON/stringify": { - "modified": "2020-11-10T21:46:18.524Z", + "Web/JavaScript/Reference/Statements/import": { + "modified": "2020-10-15T21:39:54.342Z", "contributors": [ - "Ohora", "alattalatta", - "churow", - "boyzgun", - "joshua1988", - "maytree", - "supermanWannaBe" + "hwshim", + "haydnhkim" ] }, - "Web/JavaScript/Reference/Global_Objects/Map": { - "modified": "2020-10-15T21:50:09.238Z", + "Web/JavaScript/Reference/Statements/label": { + "modified": "2020-03-12T19:45:32.505Z", "contributors": [ - "Chloe-HyunJoo", - "alattalatta", - "younghoh", - "KaironMoon", - "echo304", - "dragmove" + "wafersroom" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag": { - "modified": "2020-10-15T22:04:19.848Z", + "Web/JavaScript/Reference/Statements/let": { + "modified": "2020-10-15T21:40:35.318Z", "contributors": [ - "Seok.Heo" + "cjacking3", + "SeonHyungJo", + "Isitea", + "RingoKim" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/Map": { - "modified": "2020-10-15T22:26:33.491Z", + "Web/JavaScript/Reference/Statements/return": { + "modified": "2020-10-15T21:50:13.127Z", "contributors": [ - "alattalatta" + "alattalatta", + "2oosoo", + "Diana_" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/clear": { - "modified": "2020-10-15T22:09:01.449Z", + "Web/JavaScript/Reference/Statements/switch": { + "modified": "2020-10-15T21:49:53.296Z", "contributors": [ - "alattalatta" + "chimimode", + "ByeongGi", + "nidev" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/delete": { - "modified": "2020-10-15T22:09:03.155Z", + "Web/JavaScript/Reference/Statements/throw": { + "modified": "2020-10-15T22:04:25.321Z", "contributors": [ - "alattalatta" + "SSJ-unclear", + "hongnakyung" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/entries": { - "modified": "2020-10-15T22:09:02.936Z", + "Web/JavaScript/Reference/Statements/try...catch": { + "modified": "2020-10-15T21:40:10.256Z", "contributors": [ - "alattalatta" + "limkukhyun", + "deltakor1234", + "SSJ-unclear", + "pianorange", + "epicsaga" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/forEach": { - "modified": "2020-10-15T22:20:31.940Z", + "Web/JavaScript/Reference/Statements/var": { + "modified": "2020-10-15T21:42:33.307Z", "contributors": [ - "JaeWorld" + "alattalatta", + "naduhy2", + "jaeminkim87", + "teoli" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/get": { - "modified": "2020-10-15T22:15:40.628Z", + "Web/JavaScript/Reference/Statements/while": { + "modified": "2020-03-12T19:45:49.250Z", "contributors": [ - "alattalatta" + "galcyurio", + "ChanghwaLee" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/has": { - "modified": "2020-10-15T22:15:44.379Z", + "Web/JavaScript/Reference/Statements/with": { + "modified": "2020-10-15T22:07:40.562Z", "contributors": [ - "alattalatta" + "SSJ-unclear" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/prototype": { - "modified": "2020-10-15T21:55:20.178Z", + "Web/JavaScript/Reference/Strict_mode": { + "modified": "2020-06-29T00:30:58.676Z", "contributors": [ + "ranhyegg", + "genzuby", + "Kim1Jun", + "cs09g", "alattalatta", - "echo304" + "geunhyung", + "limkukhyun", + "dsma73", + "cecilia.cho", + "Minsoo_Kim", + "laranhee", + "KSH-code", + "imskojs", + "magnoliaa" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/set": { - "modified": "2020-10-15T22:15:44.384Z", + "Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode": { + "modified": "2020-03-12T19:48:28.686Z", "contributors": [ - "alattalatta" + "SeonHyungJo" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/size": { - "modified": "2020-10-15T22:04:26.274Z", + "Web/JavaScript/Reference/Template_literals": { + "modified": "2020-10-15T21:47:14.004Z", "contributors": [ - "Gren", - "Seok.Heo" + "hjleesm", + "rev1c0sm0s", + "limkukhyun", + "springday1023", + "kbsbroad", + "rlaxognsk", + "dragmove" ] }, - "Web/JavaScript/Reference/Global_Objects/Math": { - "modified": "2020-10-15T21:38:50.083Z", + "Web/JavaScript/Reference/Trailing_commas": { + "modified": "2020-11-24T03:08:45.215Z", "contributors": [ - "alattalatta", - "kimkyeseung", - "ejay0811", - "bombinari", - "imskojs", - "dale0713", - "fscholz" + "bckim9489", + "EatChangmyeong", + "samee" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/E": { - "modified": "2020-10-15T21:56:48.942Z", + "Web/JavaScript/Typed_arrays": { + "modified": "2020-03-12T19:44:00.798Z", "contributors": [ - "alattalatta", - "mantra78" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/LN10": { - "modified": "2020-10-15T22:12:27.389Z", + "Web/Manifest": { + "modified": "2020-10-15T22:32:27.672Z", "contributors": [ "alattalatta" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/LN2": { - "modified": "2020-10-15T22:12:33.707Z", + "Web/MathML": { + "modified": "2020-10-15T21:24:14.563Z", "contributors": [ - "alattalatta" + "alattalatta", + "fred.wang", + "hyeonseok", + "narae_lee" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/LOG10E": { - "modified": "2020-10-15T21:45:43.847Z", + "Web/Media": { + "modified": "2019-07-04T01:00:37.497Z", "contributors": [ - "alattalatta", - "SeungYeol", - "seung-yeol" + "developer19899" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/LOG2E": { - "modified": "2020-10-15T22:12:28.658Z", + "Web/Media/Autoplay_guide": { + "modified": "2019-09-17T06:49:59.371Z", "contributors": [ - "alattalatta" + "ahnzaz" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/PI": { - "modified": "2020-10-15T21:57:11.130Z", + "Web/Media/Formats": { + "modified": "2019-09-17T02:15:54.155Z", "contributors": [ - "alattalatta", - "swtpumpkin" + "Havi Hoffman" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2": { - "modified": "2020-10-15T22:28:40.942Z", + "Web/Performance": { + "modified": "2020-01-12T15:28:31.330Z", "contributors": [ - "129dot03" + "chrisdavidmills" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/SQRT2": { - "modified": "2020-10-15T21:57:11.465Z", + "Web/Progressive_web_apps": { + "modified": "2019-03-23T22:00:19.382Z", "contributors": [ - "swtpumpkin" + "chrisdavidmills", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/abs": { - "modified": "2020-10-15T21:57:04.759Z", + "Web/Progressive_web_apps/Add_to_home_screen": { + "modified": "2020-01-26T15:58:32.379Z", "contributors": [ "alattalatta", - "mantra78" + "chrisdavidmills", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/acos": { - "modified": "2020-10-15T21:52:08.736Z", + "Web/Progressive_web_apps/App_structure": { + "modified": "2020-05-31T18:37:47.885Z", "contributors": [ - "alattalatta", - "keikeiem" + "chrisdavidmills", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/cbrt": { - "modified": "2020-10-15T21:52:08.362Z", + "Web/Progressive_web_apps/Installable_PWAs": { + "modified": "2020-05-31T18:37:46.514Z", + "contributors": [ + "chrisdavidmills", + "cs09g" + ] + }, + "Web/Progressive_web_apps/Offline_Service_workers": { + "modified": "2020-05-31T18:37:49.321Z", "contributors": [ - "alattalatta", - "keikeiem" + "chrisdavidmills", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/ceil": { - "modified": "2019-03-23T22:13:49.234Z", + "Web/Progressive_web_apps/Re-engageable_Notifications_Push": { + "modified": "2019-03-18T20:52:11.625Z", "contributors": [ - "ironmanciti" + "chrisdavidmills", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/exp": { - "modified": "2020-10-15T22:07:23.655Z", + "Web/SVG": { + "modified": "2019-11-05T05:19:15.768Z", "contributors": [ - "qazxsw1240" + "dbwodlf3", + "u4bi", + "kybin", + "nacyot", + "hoony", + "dewey94esb", + "Delapouite" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/floor": { - "modified": "2020-10-15T21:38:48.166Z", + "Web/SVG/Applying_SVG_effects_to_HTML_content": { + "modified": "2019-03-23T22:44:07.191Z", "contributors": [ - "alattalatta", - "EdwardBaek", - "laranhee", - "ChoeSul" + "Narrativi", + "hoony" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/fround": { - "modified": "2019-03-23T22:31:04.734Z", + "Web/SVG/Attribute": { + "modified": "2019-03-23T22:32:34.072Z", "contributors": [ - "ingee.kim" + "Ninjapolian" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/imul": { - "modified": "2019-03-31T21:25:02.115Z", + "Web/SVG/Attribute/calcMode": { + "modified": "2019-03-23T22:11:02.860Z", "contributors": [ - "cameo-js", - "ingee.kim" + "tadkim" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/log": { - "modified": "2020-10-15T21:55:33.977Z", + "Web/SVG/Attribute/cx": { + "modified": "2019-03-23T22:32:29.630Z", "contributors": [ - "Luna4D" + "se0kjun" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/log2": { - "modified": "2020-10-15T21:57:12.002Z", + "Web/SVG/Attribute/d": { + "modified": "2019-03-18T21:21:40.969Z", "contributors": [ - "swtpumpkin" + "officialmansu" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/max": { - "modified": "2020-10-15T21:56:06.992Z", + "Web/SVG/Attribute/keyTimes": { + "modified": "2019-03-23T22:11:05.080Z", "contributors": [ - "lanipark", - "swtpumpkin" + "tadkim" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/min": { - "modified": "2020-10-15T21:56:53.960Z", + "Web/SVG/Attribute/values": { + "modified": "2019-03-23T22:11:11.110Z", "contributors": [ - "mantra78" + "tadkim" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/random": { - "modified": "2020-10-15T21:44:16.613Z", + "Web/SVG/Attribute/version": { + "modified": "2019-03-18T21:41:36.785Z", "contributors": [ - "caianyuan", - "EatChangmyeong", - "kuroneko0441", - "lazygyu", - "gamzza", - "maytree" + "MyeonghwanCho" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/round": { - "modified": "2020-10-15T22:12:25.570Z", + "Web/SVG/Attribute/viewBox": { + "modified": "2019-03-23T22:28:50.142Z", "contributors": [ - "officialmansu" + "dragmove" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/sign": { - "modified": "2020-10-15T21:59:54.584Z", + "Web/SVG/Element": { + "modified": "2019-03-23T23:17:31.660Z", "contributors": [ - "yssgo" + "dewey94esb", + "kscarfone" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/sin": { - "modified": "2020-10-15T22:14:16.419Z", + "Web/SVG/Element/a": { + "modified": "2020-10-15T21:40:12.249Z", "contributors": [ - "guyeol" + "alattalatta", + "Sebastianz", + "dewey94esb" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/sinh": { - "modified": "2020-10-15T22:23:26.235Z", + "Web/SVG/Element/altGlyph": { + "modified": "2020-10-15T21:40:13.413Z", "contributors": [ - "Eumhongin" + "alattalatta", + "Sebastianz", + "dewey94esb" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/sqrt": { - "modified": "2020-10-15T21:57:12.700Z", + "Web/SVG/Element/circle": { + "modified": "2020-10-15T21:40:18.375Z", "contributors": [ - "swtpumpkin" + "alattalatta", + "wbamberg", + "Sebastianz", + "dewey94esb" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/tan": { - "modified": "2020-10-15T22:14:16.148Z", + "Web/SVG/Element/ellipse": { + "modified": "2020-10-15T21:46:51.498Z", "contributors": [ - "guyeol" + "alattalatta", + "wbamberg", + "Sebastianz", + "se0kjun" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/tanh": { - "modified": "2020-10-15T22:27:51.653Z", + "Web/SVG/Tutorial": { + "modified": "2019-09-02T22:37:58.598Z", "contributors": [ - "FennecFoxSW" + "jwoo0122", + "EatChangmyeong", + "nacyot", + "epicsaga", + "teoli", + "이선영" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/trunc": { - "modified": "2020-10-15T21:56:16.061Z", + "Web/SVG/Tutorial/Introduction": { + "modified": "2019-03-23T22:40:12.666Z", "contributors": [ - "mantra78", - "hefaitos" + "EatChangmyeong", + "nacyot" ] }, - "Web/JavaScript/Reference/Global_Objects/NaN": { - "modified": "2020-10-15T21:15:15.113Z", + "Web/SVG/Tutorial/Paths": { + "modified": "2019-03-23T22:21:33.428Z", "contributors": [ - "alattalatta", - "Netaras", - "nacyot", - "teoli", - "Gilchris" + "EatChangmyeong", + "grizlupo", + "newmsz", + "cnaa97" ] }, - "Web/JavaScript/Reference/Global_Objects/Number": { - "modified": "2020-10-15T21:38:20.966Z", + "Web/SVG/Tutorial/Patterns": { + "modified": "2019-03-18T21:46:02.102Z", "contributors": [ - "soonsebii", - "alattalatta", - "DeadIntegral", - "taeunChoi", - "ChoeSul", - "fscholz" + "grizlupo" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/EPSILON": { - "modified": "2020-10-15T21:48:35.594Z", + "Web/SVG/Tutorial/SVG_Image_Tag": { + "modified": "2019-03-18T21:46:01.401Z", "contributors": [ - "EntryDark", - "." + "grizlupo" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER": { - "modified": "2020-10-15T22:02:58.023Z", + "Web/SVG/Tutorial/SVG_In_HTML_Introduction": { + "modified": "2019-03-23T23:41:45.629Z", "contributors": [ - "alattalatta", - "kirrie" + "chrisdavidmills", + "teoli", + "Cliffet" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE": { - "modified": "2020-10-15T21:53:40.733Z", + "Web/Security": { + "modified": "2020-02-18T07:36:24.047Z", "contributors": [ - "alattalatta", - "kbsbroad" + "DeadIntegral", + "wbamberg", + "SphinxKnight", + "2pylab", + "Sheppy" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER": { - "modified": "2020-10-15T22:14:25.785Z", + "Web/Security/Insecure_passwords": { + "modified": "2019-07-20T05:09:42.530Z", "contributors": [ - "alattalatta" + "shefollowme" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE": { - "modified": "2020-10-15T22:01:36.854Z", + "Web/Security/Same-origin_policy": { + "modified": "2020-08-22T13:54:54.667Z", "contributors": [ "alattalatta", - "sshplendid" + "jongidal", + "TroyTae", + "midistour", + "seungha-kim", + "ryuan.choi", + "manascue", + "Vermond", + "behumble" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY": { - "modified": "2020-10-15T22:15:09.850Z", + "Web/Security/Transport_Layer_Security": { + "modified": "2020-09-21T00:10:58.229Z", "contributors": [ - "alattalatta", - "yami03" + "junnapark", + "haeguri" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/NaN": { - "modified": "2020-10-15T21:44:42.844Z", + "Web/Tutorials": { + "modified": "2019-03-23T23:28:14.827Z", "contributors": [ - "alattalatta", - "Netaras" + "featherlikeg", + "nacyot", + "pjc0247", + "tamnajio", + "KyunH" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY": { - "modified": "2020-10-15T22:15:10.597Z", + "Web/Web_Components": { + "modified": "2019-03-18T21:01:19.898Z", "contributors": [ - "alattalatta" + "adrenalinee", + "cs09g", + "ByeongGi", + "namkwon", + "maybe" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/isFinite": { - "modified": "2020-10-15T21:44:34.313Z", + "Web/Web_Components/Using_custom_elements": { + "modified": "2020-10-15T22:25:18.797Z", "contributors": [ + "cutelee", + "chdaud1995", "alattalatta", - "Netaras" + "atomDevelop", + "nerdrun", + "ByeongGi" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/isInteger": { - "modified": "2020-10-15T21:50:46.841Z", + "Web/Web_Components/Using_shadow_DOM": { + "modified": "2020-07-07T00:49:27.609Z", "contributors": [ - "alattalatta", - "Lutece" + "ne2030", + "ByeongGi" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/isNaN": { - "modified": "2020-10-15T21:44:51.414Z", + "Web/XML": { + "modified": "2019-08-24T00:48:34.627Z", "contributors": [ - "alattalatta", - "Netaras" + "oinochoe", + "ExE-Boss" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger": { - "modified": "2020-10-15T21:53:40.478Z", + "Web/XML/XML_Introduction": { + "modified": "2019-05-01T21:53:36.067Z", "contributors": [ - "alattalatta", - "preco21" + "ExE-Boss", + "teoli", + "Sebuls" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/parseFloat": { - "modified": "2020-10-15T22:14:24.810Z", + "Web/XPath": { + "modified": "2019-01-16T14:32:58.218Z", "contributors": [ - "alattalatta" + "ExE-Boss", + "fscholz", + "Gilchris", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/parseInt": { - "modified": "2020-10-15T21:38:16.285Z", + "Web/XPath/Axes": { + "modified": "2019-03-23T23:41:54.185Z", "contributors": [ - "alattalatta", - "SphinxKnight", - "chro0611" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/prototype": { - "modified": "2020-10-15T22:10:14.861Z", + "Web/XPath/Axes/ancestor": { + "modified": "2019-03-23T23:41:51.868Z", "contributors": [ - "alattalatta", - "DeadIntegral" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/toExponential": { - "modified": "2020-10-15T22:16:46.694Z", + "Web/XPath/Axes/ancestor-or-self": { + "modified": "2019-03-23T23:41:53.193Z", "contributors": [ - "lifeisnovel" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/toFixed": { - "modified": "2020-10-15T21:50:45.262Z", + "Web/XPath/Axes/attribute": { + "modified": "2019-01-16T16:16:10.374Z", "contributors": [ - "alattalatta", - "Lutece" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/toPrecision": { - "modified": "2020-10-15T22:02:15.943Z", + "Web/XPath/Axes/child": { + "modified": "2019-01-16T16:16:18.107Z", "contributors": [ - "take0415" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/toString": { - "modified": "2020-10-15T21:48:38.962Z", + "Web/XPath/Axes/descendant": { + "modified": "2019-01-16T16:16:11.286Z", "contributors": [ - "alattalatta", - "magnoliaa" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/valueOf": { - "modified": "2020-10-15T22:10:14.373Z", + "Web/XPath/Axes/descendant-or-self": { + "modified": "2019-01-16T16:16:11.121Z", "contributors": [ - "alattalatta", - "DeadIntegral" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object": { - "modified": "2020-10-15T21:19:43.435Z", + "Web/XPath/Axes/following": { + "modified": "2019-01-16T16:16:17.035Z", "contributors": [ - "alattalatta", - "Parcovia", - "palindrom615", - "callin2", - "StrongStoone", - "maytree", - "keikeiem", + "ExE-Boss", "teoli", - "Jeado.Ko" + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__": { - "modified": "2020-10-15T22:08:32.403Z", + "Web/XPath/Axes/following-sibling": { + "modified": "2019-01-16T16:16:13.970Z", "contributors": [ - "LeeDDHH" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/assign": { - "modified": "2020-10-15T21:49:34.841Z", + "Web/XPath/Axes/namespace": { + "modified": "2019-03-23T23:41:52.884Z", "contributors": [ - "cs09g", - "limkukhyun", - "TK-one", - "alattalatta", - "LOG91", - "kikas", - "faker007", - "dale0713" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/constructor": { - "modified": "2020-10-15T21:47:07.109Z", + "Web/XPath/Axes/parent": { + "modified": "2019-01-16T16:16:10.076Z", "contributors": [ - "alattalatta", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/create": { - "modified": "2019-10-02T03:34:36.779Z", + "Web/XPath/Axes/preceding": { + "modified": "2019-01-16T16:16:13.085Z", "contributors": [ - "ibizcox", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/defineProperties": { - "modified": "2020-10-15T21:54:36.990Z", + "Web/XPath/Axes/preceding-sibling": { + "modified": "2019-01-16T16:16:15.097Z", "contributors": [ - "EatChangmyeong", - "KangHyeongMin", - "DevJang", - "BANIP" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/defineProperty": { - "modified": "2020-10-15T21:37:24.444Z", + "Web/XPath/Axes/self": { + "modified": "2019-01-16T16:16:15.156Z", "contributors": [ - "alattalatta", - "kimkyeseung", - "mixed", - "bsidesoft" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/entries": { - "modified": "2020-10-15T22:08:09.257Z", + "Web/XPath/Functions": { + "modified": "2019-03-23T23:41:49.260Z", "contributors": [ - "honggaruy", - "limkukhyun" + "ExE-Boss", + "teoli", + "mete0r", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/freeze": { - "modified": "2020-10-15T21:37:04.618Z", + "Web/XPath/Functions/boolean": { + "modified": "2019-03-23T23:41:56.082Z", "contributors": [ - "alattalatta", - "cs09g", - "gatherKnowledge", - "roupkk", - "hanmomhanda" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/fromEntries": { - "modified": "2020-10-15T22:10:27.914Z", + "Web/XPath/Functions/ceiling": { + "modified": "2019-03-23T23:42:00.420Z", "contributors": [ - "alattalatta" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor": { - "modified": "2020-10-15T21:47:07.447Z", + "Web/XPath/Functions/concat": { + "modified": "2019-03-23T23:41:58.810Z", "contributors": [ - "fscholz", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf": { - "modified": "2019-03-23T22:31:23.968Z", + "Web/XPath/Functions/contains": { + "modified": "2019-03-23T23:41:59.602Z", "contributors": [ + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty": { - "modified": "2020-10-15T21:39:57.262Z", + "Web/XPath/Functions/count": { + "modified": "2019-03-23T23:41:58.125Z", "contributors": [ - "Chloe-HyunJoo", - "alattalatta", - "epicsaga" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/is": { - "modified": "2020-10-15T21:31:34.796Z", + "Web/XPath/Functions/current": { + "modified": "2019-03-23T23:41:57.241Z", "contributors": [ - "alattalatta", - "Netaras", - "nacyot", - "ligeek", - "lv0gun9" + "ExE-Boss", + "limkukhyun", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/isExtensible": { - "modified": "2020-10-15T21:47:08.415Z", + "Web/XPath/Functions/document": { + "modified": "2019-03-23T23:42:02.300Z", "contributors": [ - "alattalatta", + "ExE-Boss", + "teoli", + "토끼군", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/isFrozen": { - "modified": "2020-10-15T21:47:09.610Z", + "Web/XPath/Functions/element-available": { + "modified": "2019-03-23T23:42:19.012Z", "contributors": [ - "alattalatta", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf": { - "modified": "2020-10-15T21:37:04.091Z", + "Web/XPath/Functions/false": { + "modified": "2019-03-23T23:42:21.547Z", "contributors": [ - "alattalatta", - "BrandenYoon", - "bsidesoft" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/isSealed": { - "modified": "2020-10-15T21:47:09.579Z", + "Web/XPath/Functions/floor": { + "modified": "2019-03-23T23:42:21.115Z", "contributors": [ - "alattalatta", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/preventExtensions": { - "modified": "2020-10-15T21:47:09.416Z", + "Web/XPath/Functions/format-number": { + "modified": "2019-03-23T23:42:15.373Z", "contributors": [ - "alattalatta", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable": { - "modified": "2020-10-15T21:52:42.061Z", + "Web/XPath/Functions/function-available": { + "modified": "2019-03-23T23:42:21.463Z", "contributors": [ - "deltakor1234", - "alattalatta", - "dotorify" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/prototype": { - "modified": "2020-10-15T21:34:43.084Z", + "Web/XPath/Functions/generate-id": { + "modified": "2019-03-23T23:42:13.517Z", "contributors": [ - "zero0yes", - "noritersand", - "alattalatta", - "Parcovia", - "Netaras", - "DavidSunny", - "teoli" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/seal": { - "modified": "2020-10-15T21:37:04.586Z", + "Web/XPath/Functions/id": { + "modified": "2019-03-23T23:42:21.368Z", "contributors": [ - "alattalatta", - "hanmomhanda" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf": { - "modified": "2020-11-04T03:29:23.911Z", + "Web/XPath/Functions/key": { + "modified": "2019-03-23T23:42:10.516Z", "contributors": [ - "psk810", - "DevJang", - "kingsae1" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/toLocaleString": { - "modified": "2020-10-15T22:08:09.241Z", + "Web/XPath/Functions/lang": { + "modified": "2019-03-23T23:42:22.431Z", "contributors": [ - "alattalatta", - "limkukhyun" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/toString": { - "modified": "2020-10-15T21:46:52.765Z", + "Web/XPath/Functions/last": { + "modified": "2019-03-23T23:42:23.803Z", "contributors": [ - "ESnark", - "alattalatta", - "limkukhyun", - "kennen", - "sandArtChip" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/valueOf": { - "modified": "2020-10-15T21:49:29.419Z", + "Web/XPath/Functions/local-name": { + "modified": "2019-03-23T23:42:19.324Z", "contributors": [ - "honggaruy", - "alattalatta", - "stitchworkingonthecode" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/values": { - "modified": "2020-10-15T22:01:47.626Z", + "Web/XPath/Functions/name": { + "modified": "2019-03-23T23:42:53.708Z", "contributors": [ - "OhSeungHyeon", - "KIMSEONGSEOB" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise": { - "modified": "2020-10-15T21:37:31.734Z", + "Web/XPath/Functions/namespace-uri": { + "modified": "2019-03-23T23:42:22.064Z", "contributors": [ - "Vimming", - "alattalatta", - "khg0712", - "limkukhyun", - "samee", - "fscholz", - "NessunKim", - "ahnjungho", - "Netaras", - "redcamel", - "EunwooCho", - "akic4op4", - "0xABCDEF" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/Promise": { - "modified": "2020-10-15T22:27:11.901Z", + "Web/XPath/Functions/normalize-space": { + "modified": "2019-03-23T23:42:24.081Z", "contributors": [ - "alattalatta" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/all": { - "modified": "2020-10-15T21:45:48.976Z", + "Web/XPath/Functions/not": { + "modified": "2019-03-23T23:42:13.806Z", "contributors": [ - "EatChangmyeong", - "alattalatta", - "DeadIntegral", - "limkukhyun", - "fscholz", - "hoony" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/allSettled": { - "modified": "2020-10-15T22:24:05.512Z", + "Web/XPath/Functions/number": { + "modified": "2019-03-23T23:42:20.456Z", "contributors": [ - "composite" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/finally": { - "modified": "2020-10-15T22:04:25.149Z", + "Web/XPath/Functions/position": { + "modified": "2019-03-23T23:42:19.791Z", "contributors": [ - "ditto572", - "Seok.Heo" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/prototype": { - "modified": "2020-10-15T21:47:20.685Z", + "Web/XPath/Functions/round": { + "modified": "2019-03-23T23:42:16.877Z", "contributors": [ - "alattalatta", - "fscholz", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/race": { - "modified": "2020-10-15T21:47:12.859Z", + "Web/XPath/Functions/starts-with": { + "modified": "2019-03-23T23:42:20.127Z", "contributors": [ - "EatChangmyeong", - "alattalatta", - "seungha-kim", - "fscholz", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/reject": { - "modified": "2020-10-15T21:47:12.472Z", + "Web/XPath/Functions/string": { + "modified": "2019-03-23T23:42:22.208Z", "contributors": [ - "fscholz", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/resolve": { - "modified": "2020-10-15T21:47:20.702Z", + "Web/XPath/Functions/string-length": { + "modified": "2019-03-23T23:42:16.696Z", "contributors": [ - "cs09g", - "fscholz", - "QooQooDass", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/then": { - "modified": "2020-10-15T21:47:12.138Z", + "Web/XPath/Functions/substring": { + "modified": "2019-03-23T23:42:17.746Z", "contributors": [ - "EatChangmyeong", - "fscholz", - "KisukPark", + "ExE-Boss", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy": { - "modified": "2020-10-15T21:50:18.794Z", + "Web/XPath/Functions/substring-after": { + "modified": "2019-03-23T23:42:23.050Z", "contributors": [ - "alattalatta", - "callin2", - "heejunghwang" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler": { - "modified": "2020-10-15T21:55:35.789Z", + "Web/XPath/Functions/substring-before": { + "modified": "2019-03-23T23:42:22.325Z", "contributors": [ - "alattalatta", - "SphinxKnight" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply": { - "modified": "2019-03-23T22:09:25.839Z", + "Web/XPath/Functions/sum": { + "modified": "2019-03-23T23:42:16.787Z", "contributors": [ - "bsidesoft" + "ExE-Boss", + "arrrggghhh", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/RangeError": { - "modified": "2019-03-23T22:28:44.569Z", + "Web/XPath/Functions/system-property": { + "modified": "2019-03-23T23:42:12.729Z", "contributors": [ - "magnoliaa" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/ReferenceError": { - "modified": "2020-10-15T22:01:04.430Z", + "Web/XPath/Functions/translate": { + "modified": "2019-03-23T23:42:23.927Z", "contributors": [ - "goeo1066" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect": { - "modified": "2020-10-15T21:53:08.377Z", + "Web/XPath/Functions/true": { + "modified": "2019-03-23T23:42:14.932Z", "contributors": [ - "alattalatta", - "undefcat" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/apply": { - "modified": "2020-10-15T21:53:07.400Z", + "Web/XPath/Functions/unparsed-entity-url": { + "modified": "2019-03-23T23:42:10.421Z", "contributors": [ - "alattalatta", - "undefcat" + "ExE-Boss", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/construct": { - "modified": "2020-10-15T22:19:07.053Z", + "Web/XSLT": { + "modified": "2019-03-23T23:44:24.859Z", "contributors": [ - "alattalatta" + "chrisdavidmills", + "Verruckt", + "Sebuls", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/defineProperty": { - "modified": "2020-10-15T22:19:08.726Z", + "Web/XSLT/Element": { + "modified": "2019-03-23T23:41:46.436Z", "contributors": [ - "alattalatta" + "ExE-Boss", + "chrisdavidmills", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty": { - "modified": "2020-10-15T22:19:07.741Z", + "Web/XSLT/Element/element": { + "modified": "2019-03-23T23:42:14.305Z", "contributors": [ - "alattalatta" + "ExE-Boss", + "chrisdavidmills", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/get": { - "modified": "2020-10-15T22:19:16.367Z", + "Web/XSLT/Transforming_XML_with_XSLT": { + "modified": "2019-01-16T16:15:56.433Z", "contributors": [ - "alattalatta" + "chrisdavidmills", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/getOwnPropertyDescriptor": { - "modified": "2020-10-15T22:19:17.438Z", + "Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference": { + "modified": "2019-03-23T23:41:43.827Z", "contributors": [ - "alattalatta" + "chrisdavidmills", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/getPrototypeOf": { - "modified": "2020-10-15T22:19:16.737Z", + "Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations": { + "modified": "2019-11-21T00:57:37.403Z", "contributors": [ - "alattalatta" + "wbamberg", + "chrisdavidmills", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/has": { - "modified": "2020-10-15T22:19:16.455Z", + "WebAssembly": { + "modified": "2020-10-15T21:52:54.017Z", "contributors": [ - "alattalatta" + "limkukhyun", + "lastmirage", + "kesuskim", + "0xABCDEF", + "lukewagner" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible": { - "modified": "2020-10-15T22:19:18.378Z", + "WebAssembly/C_to_wasm": { + "modified": "2020-10-29T08:46:10.367Z", "contributors": [ - "alattalatta" + "limkukhyun", + "jung-han", + "04SeoHyun", + "nakyong" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys": { - "modified": "2020-10-15T22:19:19.765Z", + "WebAssembly/Caching_modules": { + "modified": "2019-03-18T21:26:57.835Z", "contributors": [ - "alattalatta" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/preventExtensions": { - "modified": "2020-10-15T22:19:30.244Z", + "WebAssembly/Concepts": { + "modified": "2020-12-08T12:12:26.855Z", "contributors": [ - "alattalatta" + "dsma73", + "jung-han", + "kyhsa93", + "limkukhyun", + "Jungbin-Kim", + "mingrammer", + "kesuskim", + "0xABCDEF" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/set": { - "modified": "2020-10-15T22:19:35.877Z", + "WebAssembly/Exported_functions": { + "modified": "2019-03-18T21:27:58.372Z", "contributors": [ - "alattalatta" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/setPrototypeOf": { - "modified": "2020-10-15T22:19:38.264Z", + "WebAssembly/Loading_and_running": { + "modified": "2019-03-23T22:11:38.016Z", "contributors": [ - "alattalatta" + "limkukhyun", + "kesuskim" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp": { - "modified": "2020-10-15T21:38:50.461Z", + "WebAssembly/Rust_to_wasm": { + "modified": "2020-06-15T19:31:56.028Z", "contributors": [ - "alattalatta", - "EatChangmyeong", - "zerodice0", - "momoci99", - "hanabiai", - "Latera", - "tmxkwkfgka" + "fantajeon", + "04SeoHyun", + "piutranq", + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/RegExp": { - "modified": "2020-10-15T22:32:38.454Z", + "WebAssembly/Text_format_to_wasm": { + "modified": "2019-03-18T21:28:27.225Z", "contributors": [ - "alattalatta" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/exec": { - "modified": "2020-10-15T21:47:37.584Z", + "WebAssembly/Understanding_the_text_format": { + "modified": "2019-03-23T22:04:19.997Z", "contributors": [ - "alattalatta", - "yumi2011", - "dale0713" + "limkukhyun", + "a1p4ca", + "composite" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/n": { - "modified": "2020-10-15T22:18:51.448Z", + "WebAssembly/Using_the_JavaScript_API": { + "modified": "2019-12-26T10:33:44.717Z", "contributors": [ - "dragmove" + "04SeoHyun", + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/test": { - "modified": "2020-10-15T22:32:39.804Z", + "WebAssembly/existing_C_to_wasm": { + "modified": "2019-03-18T21:28:25.734Z", "contributors": [ - "alattalatta" + "limkukhyun" ] }, - "Web/JavaScript/Reference/Global_Objects/Set": { - "modified": "2020-10-15T21:48:48.879Z", + "Web/API/Canvas_API/A_basic_ray-caster": { + "modified": "2019-05-26T05:55:24.371Z", "contributors": [ "alattalatta", - "RingoKim", - "loslch", - "dale0713", - "NessunKim", - "Netaras", - "vsemozhetbyt" + "taggon" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/add": { - "modified": "2020-10-15T22:11:36.093Z", + "Web/JavaScript/A_re-introduction_to_JavaScript": { + "modified": "2020-11-30T14:43:16.912Z", "contributors": [ - "alattalatta", - "chan337337" + "woochul2", + "honggaruy", + "jaeminche", + "eunjungleecub", + "Teperi", + "Violet-Bora-Lee", + "jjuun", + "JaeyiHong", + "juddammu", + "limkukhyun", + "hyunggoo", + "ChalkPE", + "loslch", + "Kimchoky", + "pineoc", + "fureweb", + "zeallat", + "gnujoow", + "softage", + "oox", + "Jsfumato", + "stephenjang", + "cafrii", + "teoli", + "zziuni", + "JaehaAhn", + "Joonwon", + "Dyhan81" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/clear": { - "modified": "2020-10-15T22:15:10.272Z", + "Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5": { + "modified": "2019-03-23T23:42:04.353Z", "contributors": [ - "alattalatta" + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/delete": { - "modified": "2020-10-15T22:15:14.997Z", + "Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation": { + "modified": "2019-03-18T21:13:02.657Z", "contributors": [ - "alattalatta" + "alattalatta", + "teoli", + "Ioseph" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/forEach": { - "modified": "2020-10-15T22:15:19.403Z", + "Web/CSS/CSS_Columns/Using_multi-column_layouts": { + "modified": "2019-10-11T18:26:42.559Z", "contributors": [ - "alattalatta" + "escattone", + "Netaras", + "Sebuls", + "Ioseph" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/has": { - "modified": "2020-10-15T22:15:10.010Z", + "Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements": { + "modified": "2019-03-18T20:58:47.001Z", "contributors": [ - "alattalatta" + "SphinxKnight", + "teoli", + "taggon" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/prototype": { - "modified": "2020-10-15T21:48:56.464Z", + "Glossary/DHTML": { + "modified": "2019-03-23T23:41:48.331Z", "contributors": [ - "alattalatta", - "Netaras" + "Sebuls" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/size": { - "modified": "2020-10-15T22:15:09.484Z", + "Mozilla/Firefox/Releases/3/DOM_improvements": { + "modified": "2019-03-23T23:52:57.206Z", "contributors": [ - "alattalatta" + "teoli", + "Suguni" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/values": { - "modified": "2020-10-15T22:18:44.617Z", + "Web/API/Canvas_API/Tutorial/Drawing_text": { + "modified": "2019-03-23T23:51:09.281Z", "contributors": [ - "VictorTaekLim" + "kbsbroad", + "peacekimjapan", + "tnRaro", + "teoli", + "Wladimir_Palant", + "Suguni" ] }, - "Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer": { - "modified": "2020-10-15T21:58:45.362Z", + "Mozilla/Firefox/Releases/1.5": { + "modified": "2019-03-23T23:42:08.585Z", "contributors": [ - "cs09g", - "ENvironmentSet" + "teoli", + "Sebuls", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype": { - "modified": "2020-10-15T22:15:02.439Z", + "Mozilla/Firefox/Releases/2": { + "modified": "2019-01-16T16:12:14.974Z", "contributors": [ - "cs09g" + "CN", + "Netaras", + "Yh", + "C0d3h4ck", + "Ranio710", + "Channy" ] }, - "Web/JavaScript/Reference/Global_Objects/String": { - "modified": "2020-10-15T21:22:11.475Z", + "Mozilla/Firefox/Releases/3.5": { + "modified": "2019-03-24T00:00:11.117Z", "contributors": [ - "alattalatta", - "seungha-kim", - "pusanbear", "teoli", - "MoGi" + "Gilchris" ] }, - "Web/JavaScript/Reference/Global_Objects/String/Trim": { - "modified": "2020-10-15T21:58:30.718Z", + "Mozilla/Firefox/Releases/3/Full_page_zoom": { + "modified": "2019-03-23T23:51:11.591Z", "contributors": [ - "alattalatta", - "dasebee" + "teoli", + "Wladimir_Palant", + "Jeongkyu" ] }, - "Web/JavaScript/Reference/Global_Objects/String/charAt": { - "modified": "2020-10-15T21:45:37.005Z", + "Games/Tutorials/2D_breakout_game_Phaser/The_score": { + "modified": "2019-01-16T22:56:11.870Z", "contributors": [ - "bohyun611kim", - "alattalatta", - "pusanbear" + "wbamberg", + "Dragonholux" ] }, - "Web/JavaScript/Reference/Global_Objects/String/charCodeAt": { - "modified": "2020-10-15T21:48:27.284Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls": { + "modified": "2019-03-23T22:20:49.480Z", "contributors": [ - "alattalatta", - "dale0713" + "wbamberg", + "sshplendid", + "daesD", + "hoony" ] }, - "Web/JavaScript/Reference/Global_Objects/String/concat": { - "modified": "2020-10-15T21:45:37.865Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field": { + "modified": "2019-01-17T03:04:25.798Z", "contributors": [ - "yami03", - "seulgiyoon", - "alattalatta", - "pusanbear" + "wbamberg", + "sshplendid" ] }, - "Web/JavaScript/Reference/Global_Objects/String/endsWith": { - "modified": "2020-04-21T05:33:31.555Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection": { + "modified": "2019-04-17T04:54:08.983Z", "contributors": [ - "yami03", - "pusanbear" + "E.Chong_Ju_Noel", + "wbamberg", + "sshplendid" ] }, - "Web/JavaScript/Reference/Global_Objects/String/fromCharCode": { - "modified": "2020-10-15T22:13:58.437Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up": { + "modified": "2019-04-17T06:26:16.714Z", "contributors": [ - "alattalatta" + "E.Chong_Ju_Noel" ] }, - "Web/JavaScript/Reference/Global_Objects/String/includes": { - "modified": "2020-10-15T21:45:37.765Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over": { + "modified": "2019-01-17T03:02:48.219Z", "contributors": [ - "alattalatta", - "pusanbear" + "wbamberg", + "sshplendid" ] }, - "Web/JavaScript/Reference/Global_Objects/String/indexOf": { - "modified": "2020-10-15T21:45:49.888Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript": { + "modified": "2019-03-23T22:24:25.862Z", "contributors": [ - "alattalatta", - "pusanbear" + "wbamberg", + "daesD", + "hoony", + "Byeolbit" ] }, - "Web/JavaScript/Reference/Global_Objects/String/lastIndexOf": { - "modified": "2020-10-15T21:45:54.942Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls": { + "modified": "2019-04-17T05:33:54.686Z", "contributors": [ - "alattalatta", - "jihunsuh", - "pusanbear" + "E.Chong_Ju_Noel" ] }, - "Web/JavaScript/Reference/Global_Objects/String/length": { - "modified": "2020-10-15T21:45:30.378Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls": { + "modified": "2019-01-17T02:41:51.426Z", "contributors": [ - "alattalatta", - "pusanbear" + "wbamberg", + "sshplendid", + "egg-00" ] }, - "Web/JavaScript/Reference/Global_Objects/String/localeCompare": { - "modified": "2020-10-15T21:57:59.121Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win": { + "modified": "2019-04-17T05:34:33.735Z", "contributors": [ - "bboding", - "s2s2kim" + "E.Chong_Ju_Noel", + "wbamberg", + "awer000" ] }, - "Web/JavaScript/Reference/Global_Objects/String/match": { - "modified": "2020-10-15T22:06:19.802Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball": { + "modified": "2019-03-23T22:23:23.704Z", "contributors": [ - "Donghoon", - "chaewonkong", - "Yonnani" + "wbamberg", + "sshplendid", + "hoony", + "Byeolbit" ] }, - "Web/JavaScript/Reference/Global_Objects/String/normalize": { - "modified": "2020-10-15T22:16:57.680Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it": { + "modified": "2019-01-17T00:09:33.787Z", "contributors": [ - "lifeisnovel" + "wbamberg", + "sshplendid", + "daesD", + "hoony", + "HarrisLim", + "Byeolbit" ] }, - "Web/JavaScript/Reference/Global_Objects/String/padEnd": { - "modified": "2020-10-15T22:08:41.887Z", + "Glossary/HTTP_header": { + "modified": "2019-04-30T11:26:53.285Z", "contributors": [ - "alattalatta" + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/String/padStart": { - "modified": "2020-10-15T22:08:41.615Z", + "Glossary/Dynamic_programming_language": { + "modified": "2019-03-18T21:23:35.310Z", "contributors": [ - "alattalatta" + "flat81" ] }, - "Web/JavaScript/Reference/Global_Objects/String/prototype": { - "modified": "2019-09-19T03:24:36.691Z", + "Glossary/array": { + "modified": "2019-03-18T21:24:02.576Z", "contributors": [ - "dbs6339", - "pusanbear", - "teoli", - "MoGi" + "Parcovia" ] }, - "Web/JavaScript/Reference/Global_Objects/String/repeat": { - "modified": "2020-10-15T21:56:14.890Z", + "Glossary/Boolean": { + "modified": "2019-03-23T22:13:53.303Z", "contributors": [ - "alattalatta", - "wicksome" + "Violet-Bora-Lee", + "BA-jhlee" ] }, - "Web/JavaScript/Reference/Global_Objects/String/replace": { - "modified": "2020-10-15T21:48:26.744Z", + "Glossary/Browsing_context": { + "modified": "2020-01-05T11:52:27.990Z", "contributors": [ - "limkukhyun", - "yonggoo.noh", "alattalatta", - "ejay0811", - "rlaxognsk", - "dale0713" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/search": { - "modified": "2020-10-15T22:10:00.509Z", - "contributors": [ - "Parcovia" + "HyunSeob" ] }, - "Web/JavaScript/Reference/Global_Objects/String/slice": { - "modified": "2020-10-15T21:53:59.719Z", + "Glossary/Scope": { + "modified": "2020-08-28T03:24:50.648Z", "contributors": [ - "bigsaigon333", - "limkukhyun", - "KaylaKwon", - "enchantor", - "REDO", - "laranhee", - "AlexMin" + "heejinlee07" ] }, - "Web/JavaScript/Reference/Global_Objects/String/split": { - "modified": "2020-10-15T22:14:46.442Z", + "Glossary/Identifier": { + "modified": "2019-05-24T13:17:06.184Z", "contributors": [ - "EatChangmyeong", "alattalatta", - "yuntaek" + "HyunSeob" ] }, - "Web/JavaScript/Reference/Global_Objects/String/startsWith": { - "modified": "2020-10-15T21:47:53.784Z", + "Glossary/Transmission_Control_Protocol_(TCP)": { + "modified": "2020-01-12T14:32:05.700Z", "contributors": [ - "alattalatta", - "skylar.kim" + "doong-jo" ] }, - "Web/JavaScript/Reference/Global_Objects/String/substr": { - "modified": "2020-10-15T21:47:08.634Z", + "Glossary/Cache": { + "modified": "2019-10-28T01:10:08.788Z", "contributors": [ - "alattalatta", - "pusanbear" + "JisooLee" ] }, - "Web/JavaScript/Reference/Global_Objects/String/substring": { - "modified": "2020-10-15T22:18:53.078Z", + "orphaned/How_to_Build_an_XPCOM_Component_in_Javascript": { + "modified": "2019-03-23T23:49:04.482Z", "contributors": [ - "Saem", - "bohyun611kim" + "Channy", + "Yookh80" ] }, - "Web/JavaScript/Reference/Global_Objects/String/toLowerCase": { - "modified": "2020-10-15T21:57:11.550Z", + "Web/XPath/Introduction_to_using_XPath_in_JavaScript": { + "modified": "2020-08-06T04:38:40.599Z", "contributors": [ "alattalatta", - "swtpumpkin" + "Netaras", + "Sebuls" ] }, - "Web/JavaScript/Reference/Global_Objects/String/toSource": { - "modified": "2020-10-15T22:02:06.022Z", + "orphaned/JavaScript_C_Engine_Embedder's_Guide": { + "modified": "2019-03-23T23:51:52.110Z", "contributors": [ "teoli", - "ejay0811" + "Comayjlee", + "Joone" ] }, - "Web/JavaScript/Reference/Global_Objects/String/toString": { - "modified": "2020-10-15T22:27:29.788Z", + "Learn/Common_questions/Checking_that_your_web_site_is_working_properly": { + "modified": "2020-07-16T22:35:50.357Z", "contributors": [ - "rjsdnql123" + "best8248" ] }, - "Web/JavaScript/Reference/Global_Objects/String/toUpperCase": { - "modified": "2020-10-15T21:55:16.088Z", + "Learn/Common_questions/Thinking_before_coding": { + "modified": "2020-07-16T22:35:34.712Z", "contributors": [ - "alattalatta", - "swtpumpkin", - "seokju-na" + "Silvermist", + "ssilb4", + "daebum-lee" ] }, - "Web/JavaScript/Reference/Global_Objects/String/valueOf": { - "modified": "2020-10-15T22:25:44.637Z", + "Learn/CSS/Building_blocks/The_box_model": { + "modified": "2020-12-08T00:16:52.296Z", "contributors": [ - "hyoni0817" + "ihooi", + "Hwan-Woong-Lee" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol": { - "modified": "2020-10-15T21:40:09.882Z", + "Learn/CSS/Building_blocks/Selectors": { + "modified": "2020-12-07T23:12:49.927Z", "contributors": [ - "dolmoon", - "SphinxKnight", - "HyunSeob", - "maytree" + "ihooi", + "java2020007" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/for": { - "modified": "2019-03-23T22:16:10.868Z", + "Learn/CSS/CSS_layout/Media_queries": { + "modified": "2020-07-16T22:27:32.744Z", "contributors": [ - "Hou" + "Hwan-Woong-Lee" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/iterator": { - "modified": "2020-10-15T22:00:39.078Z", + "Learn/CSS/CSS_layout/Responsive_Design": { + "modified": "2020-07-16T22:27:29.107Z", "contributors": [ - "limkukhyun", - "BANIP" + "Hwan-Woong-Lee" ] }, - "Web/JavaScript/Reference/Global_Objects/SyntaxError": { - "modified": "2020-10-15T21:48:16.048Z", + "Learn/CSS/CSS_layout/Positioning": { + "modified": "2020-07-16T22:26:44.211Z", "contributors": [ - "alattalatta", - "2oosoo", - "magnoliaa" + "Hwan-Woong-Lee" + ] + }, + "Learn/CSS/CSS_layout/Supporting_Older_Browsers": { + "modified": "2020-07-16T22:27:19.114Z", + "contributors": [ + "EricByHPHK", + "Hwan-Woong-Lee" ] }, - "Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype": { - "modified": "2019-03-23T22:28:47.337Z", + "Learn/CSS/CSS_layout/Normal_Flow": { + "modified": "2020-07-16T22:27:22.113Z", "contributors": [ - "magnoliaa" + "EricByHPHK", + "Hwan-Woong-Lee" ] }, - "Web/JavaScript/Reference/Global_Objects/TypeError": { - "modified": "2020-10-15T21:38:37.821Z", + "Learn/CSS/Building_blocks/Fundamental_CSS_comprehension": { + "modified": "2020-07-16T22:28:12.763Z", "contributors": [ - "alattalatta", - "kirrie", - "JiminP" + "ERTuringLee" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray": { - "modified": "2019-06-18T04:56:00.166Z", + "Learn/Getting_started_with_the_web/CSS_basics": { + "modified": "2020-07-16T22:35:01.206Z", "contributors": [ - "kooljay82", - "Netaras", - "Khai96_" + "java2020007", + "Silvermist", + "manmyung", + "jinah1000", + "dolmoon", + "limkukhyun", + "galcyurio", + "gobyoungil", + "stitchworkingonthecode", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator": { - "modified": "2019-03-23T22:30:48.269Z", + "Learn/Getting_started_with_the_web/HTML_basics": { + "modified": "2020-07-16T22:34:48.769Z", "contributors": [ - "Netaras" + "scl2589", + "hahehohoo", + "moseoridev", + "alattalatta", + "dolmoon", + "limkukhyun", + "galcyurio", + "gobyoungil", + "LovelyGom1218", + "stitchworkingonthecode", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT": { - "modified": "2020-10-15T21:47:35.788Z", + "Learn/Getting_started_with_the_web/Installing_basic_software": { + "modified": "2020-07-16T22:34:08.936Z", "contributors": [ + "thornbirda", "alattalatta", - "Netaras" + "dolmoon", + "limkukhyun", + "takeU", + "galcyurio", + "stitchworkingonthecode", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/buffer": { - "modified": "2019-03-23T22:30:15.273Z", + "Learn/Getting_started_with_the_web/Publishing_your_website": { + "modified": "2020-07-16T22:34:27.246Z", "contributors": [ - "Netaras" + "Taehoon", + "limkukhyun", + "galcyurio", + "novelview9", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength": { - "modified": "2020-10-15T21:47:38.660Z", + "Learn/Getting_started_with_the_web/How_the_Web_works": { + "modified": "2020-07-16T22:34:01.419Z", "contributors": [ - "alattalatta", - "Netaras" + "doong-jo", + "moseoridev", + "HoLlOlLoLlU", + "limkukhyun", + "LeeJunyeol", + "galcyurio", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset": { - "modified": "2020-10-15T21:47:35.902Z", + "Learn/Getting_started_with_the_web/Dealing_with_files": { + "modified": "2020-10-09T05:21:10.101Z", "contributors": [ + "anoncaco", + "moseoridev", "alattalatta", - "Netaras" + "cs09g", + "dolmoon", + "limkukhyun", + "YJLeeGinter", + "galcyurio", + "BK-Yoo" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/fill": { - "modified": "2020-10-15T21:39:40.326Z", + "orphaned/Learn/How_to_contribute": { + "modified": "2020-07-16T22:33:45.510Z", "contributors": [ - "alattalatta", - "Hmmim" + "SphinxKnight", + "2oosoo", + "JinSeungHo" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf": { - "modified": "2020-10-15T22:21:44.673Z", + "Learn/Forms/How_to_structure_a_web_form": { + "modified": "2020-09-29T02:01:00.293Z", "contributors": [ - "naraeim", - "SphinxKnight" + "fscholz", + "sephiron99", + "chrisdavidmills", + "JeongSeongDae" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/length": { - "modified": "2020-10-15T21:47:35.796Z", + "Learn/Forms": { + "modified": "2020-07-16T22:20:59.522Z", "contributors": [ - "alattalatta", - "Netaras" + "ssj24", + "chrisdavidmills", + "moolow", + "JeongSeongDae" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/name": { - "modified": "2020-10-15T21:47:34.390Z", + "Learn/Forms/Sending_and_retrieving_form_data": { + "modified": "2020-07-16T22:21:27.567Z", "contributors": [ - "alattalatta", - "Netaras" + "tldn0718", + "dev-dongwon", + "daesD", + "chrisdavidmills", + "Geun-Hyung_Kim", + "JeongSeongDae" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/of": { - "modified": "2020-10-15T22:03:56.631Z", + "Learn/Forms/Your_first_form": { + "modified": "2020-07-16T22:21:05.991Z", "contributors": [ - "limkukhyun" + "fscholz", + "sephiron99", + "chrisdavidmills", + "JeongSeongDae" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/prototype": { - "modified": "2019-03-23T22:30:03.771Z", + "Learn/HTML/Howto/Use_data_attributes": { + "modified": "2020-07-16T22:22:36.382Z", "contributors": [ - "Netaras" + "DDark", + "jyhwng", + "soulmatt" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/reverse": { - "modified": "2020-10-15T21:47:33.171Z", + "Learn/HTML/Multimedia_and_embedding/Video_and_audio_content": { + "modified": "2020-07-16T22:24:54.813Z", "contributors": [ - "alattalatta", - "Netaras" + "jinseobhong" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/set": { - "modified": "2020-10-15T21:47:35.773Z", + "Learn/JavaScript/Building_blocks/conditionals": { + "modified": "2020-08-19T22:28:52.853Z", "contributors": [ - "alattalatta", - "Netaras" + "ramgabi", + "ojongchul", + "JaeWorld", + "notypicalus", + "Jonnie-Lion", + "gsphyo91" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/slice": { - "modified": "2019-03-23T22:30:24.203Z", + "Learn/JavaScript/Objects/Test_your_skills:_JSON": { + "modified": "2020-12-11T06:49:49.006Z", "contributors": [ - "Netaras" + "constkey" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/some": { - "modified": "2020-10-15T21:47:37.645Z", + "Learn/Server-side/Express_Nodejs/development_environment": { + "modified": "2020-12-14T05:06:35.489Z", "contributors": [ - "alattalatta", - "Netaras" + "junnapark", + "DDark" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/sort": { - "modified": "2019-03-23T22:30:47.108Z", + "Learn/Server-side/Express_Nodejs/skeleton_website": { + "modified": "2020-07-16T22:38:05.117Z", "contributors": [ - "Netaras" + "SYCHOI" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/values": { - "modified": "2019-03-23T22:30:45.463Z", + "Learn/Accessibility/HTML": { + "modified": "2020-07-16T22:40:12.947Z", "contributors": [ - "Netaras" + "dev-dongwon" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakMap": { - "modified": "2019-03-23T22:27:55.353Z", + "Learn/Accessibility": { + "modified": "2020-07-16T22:39:58.455Z", "contributors": [ - "Netaras", - "billybraga" + "cs09g", + "seunghun" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakMap/delete": { - "modified": "2020-10-15T22:04:27.439Z", + "Learn/Accessibility/What_is_accessibility": { + "modified": "2020-07-16T22:40:05.805Z", "contributors": [ - "alattalatta", - "limkukhyun", - "Seok.Heo" + "seunghun" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakMap/prototype": { - "modified": "2019-03-23T22:27:54.259Z", + "Learn/Accessibility/Mobile": { + "modified": "2020-07-16T22:40:31.872Z", "contributors": [ - "Netaras" + "seunghun" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakSet": { - "modified": "2020-10-15T21:48:47.357Z", + "Glossary/Localization": { + "modified": "2019-03-23T23:49:35.627Z", "contributors": [ - "alattalatta", + "teoli", "Netaras", - "fscholz" + "Unixcruiser", + "Gilchris" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakSet/prototype": { - "modified": "2019-03-23T22:28:07.290Z", + "MDN/At_ten": { + "modified": "2019-03-23T22:41:30.825Z", "contributors": [ - "Netaras" + "LimeClover", + "jefflee0127" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly": { - "modified": "2020-10-15T21:53:02.555Z", + "orphaned/MDN/About/MDN_services": { + "modified": "2020-12-05T03:06:45.428Z", "contributors": [ - "limkukhyun", - "0xABCDEF" + "movegun1027" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError": { - "modified": "2020-10-15T22:07:58.077Z", + "orphaned/MDN/Community/Conversations": { + "modified": "2020-02-05T05:27:57.215Z", "contributors": [ - "limkukhyun" + "SphinxKnight", + "alattalatta", + "wbamberg", + "jswisher", + "woojin.jo" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/Global": { - "modified": "2020-10-15T22:08:05.155Z", + "orphaned/MDN/Community": { + "modified": "2020-03-03T01:53:44.470Z", "contributors": [ - "limkukhyun" + "SphinxKnight", + "alattalatta", + "wbamberg", + "gaucho1218", + "zziuni", + "unixforever", + "woojin.jo", + "cs09g" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype": { - "modified": "2020-10-15T22:08:10.181Z", + "orphaned/MDN/Community/Working_in_community": { + "modified": "2020-09-01T05:37:50.669Z", "contributors": [ - "limkukhyun" + "junnapark" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance": { - "modified": "2020-10-15T22:07:55.815Z", + "MDN/Contribute/Howto/Create_and_edit_pages": { + "modified": "2019-03-23T23:13:39.002Z", "contributors": [ - "limkukhyun", - "alattalatta" + "wbamberg", + "kkokey", + "zziuni", + "naduhy2", + "nodejs", + "AlwaysOnce", + "KwanHong_Lee66" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError": { - "modified": "2020-10-15T22:08:04.793Z", + "MDN/Guidelines/Does_this_belong_on_MDN": { + "modified": "2019-01-16T19:22:53.277Z", "contributors": [ - "limkukhyun" + "wbamberg", + "zziuni", + "yssuh", + "leosangwon" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory": { - "modified": "2020-10-15T22:08:00.915Z", + "orphaned/MDN/Contribute/Howto/Do_a_technical_review": { + "modified": "2019-01-16T19:23:36.745Z", "contributors": [ - "limkukhyun" + "wbamberg", + "KwanHong_Lee66" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/Module": { - "modified": "2020-10-15T22:07:56.280Z", + "orphaned/MDN/Contribute/Howto/Do_an_editorial_review": { + "modified": "2019-03-23T22:50:43.806Z", "contributors": [ - "limkukhyun", - "alattalatta" + "wbamberg", + "Saru", + "peacekimjapan", + "sominlee", + "novelview9", + "woojin.jo", + "Epikem", + "misol" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError": { - "modified": "2020-10-15T22:08:08.186Z", + "orphaned/MDN/Contribute/Howto/Create_an_MDN_account": { + "modified": "2019-01-16T19:16:28.756Z", "contributors": [ - "limkukhyun" + "wbamberg", + "chiyodad", + "Junbong", + "KwanHong_Lee66" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/Table": { - "modified": "2020-10-15T22:07:58.705Z", + "orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page": { + "modified": "2019-03-23T23:14:13.204Z", "contributors": [ - "limkukhyun" + "zziuni", + "wbamberg", + "KwanHong_Lee66" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/compile": { - "modified": "2020-10-15T22:07:56.654Z", + "orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages": { + "modified": "2019-01-17T00:11:42.268Z", "contributors": [ - "limkukhyun" + "wbamberg", + "woojin.jo" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming": { - "modified": "2020-10-15T22:07:56.654Z", + "orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web": { + "modified": "2020-02-28T22:23:49.633Z", "contributors": [ - "limkukhyun" + "wbamberg", + "Saru", + "2oosoo" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate": { - "modified": "2020-10-15T22:07:57.168Z", + "MDN/Contribute/Howto/Convert_code_samples_to_be_live": { + "modified": "2019-01-16T19:48:52.048Z", "contributors": [ - "fnwinter", - "limkukhyun" + "wbamberg", + "Junbong" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming": { - "modified": "2020-10-15T22:08:08.189Z", + "orphaned/MDN/Editor": { + "modified": "2020-09-30T15:42:29.661Z", "contributors": [ - "limkukhyun" + "chrisdavidmills", + "ehgus", + "wbamberg", + "zziuni", + "821065887131", + "sominlee", + "Netaras", + "Kaben", + "misol" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/validate": { - "modified": "2020-10-15T22:08:00.982Z", + "orphaned/MDN/Editor/Links": { + "modified": "2020-09-30T15:42:30.015Z", "contributors": [ - "limkukhyun" + "chrisdavidmills", + "honggaruy" ] }, - "Web/JavaScript/Reference/Global_Objects/decodeURI": { - "modified": "2020-10-15T22:01:55.624Z", + "MDN/Guidelines/Conventions_definitions": { + "modified": "2020-09-30T15:30:34.436Z", "contributors": [ - "jeoyoho" + "chrisdavidmills", + "wbamberg", + "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/decodeURIComponent": { - "modified": "2020-10-15T21:48:49.294Z", + "MDN/Guidelines/Code_guidelines/General": { + "modified": "2020-09-30T15:30:35.323Z", "contributors": [ - "alattalatta", - "jeoyoho", - "magnoliaa" + "chrisdavidmills", + "honggaruy" ] }, - "Web/JavaScript/Reference/Global_Objects/encodeURI": { - "modified": "2020-10-15T22:02:01.889Z", + "MDN/Guidelines/Writing_style_guide": { + "modified": "2020-09-30T15:30:35.279Z", "contributors": [ + "chrisdavidmills", + "honggaruy", + "jswisher", "alattalatta", - "jeoyoho" + "wbamberg", + "sominlee", + "naduhy2", + "dale0713", + "epicsaga" ] }, - "Web/JavaScript/Reference/Global_Objects/encodeURIComponent": { - "modified": "2020-10-15T21:29:14.784Z", + "MDN/Yari": { + "modified": "2019-09-06T03:29:26.311Z", "contributors": [ - "alattalatta", "SphinxKnight", - "under_09" + "wbamberg", + "zziuni" ] }, - "Web/JavaScript/Reference/Global_Objects/eval": { - "modified": "2020-11-14T12:46:31.739Z", + "MDN/Contribute/Howto/Write_an_API_reference/Sidebars": { + "modified": "2020-09-30T12:56:35.846Z", "contributors": [ - "cog25", - "EatChangmyeong", - "alattalatta", - "LOG91", - "goeo1066", - "desty", - "nicesh" + "chrisdavidmills", + "zziuni" ] }, - "Web/JavaScript/Reference/Global_Objects/globalThis": { - "modified": "2020-10-15T22:14:31.677Z", + "orphaned/MDN/Structures/API_references": { + "modified": "2020-09-30T12:56:35.705Z", "contributors": [ - "alattalatta" + "chrisdavidmills", + "zziuni" ] }, - "Web/JavaScript/Reference/Global_Objects/isFinite": { - "modified": "2020-10-15T21:44:39.927Z", + "orphaned/MDN/Tools/Page_regeneration": { + "modified": "2020-09-30T16:51:25.059Z", "contributors": [ - "alattalatta", + "chrisdavidmills", + "wbamberg", "Netaras" ] }, - "Web/JavaScript/Reference/Global_Objects/isNaN": { - "modified": "2020-10-15T21:46:27.577Z", + "Mozilla/Developer_guide/Source_Code/CVS": { + "modified": "2019-03-23T23:42:11.059Z", "contributors": [ - "alattalatta", - "Parcovia", - "Netaras" + "teoli", + "NoBrain" ] }, - "Web/JavaScript/Reference/Global_Objects/null": { - "modified": "2020-10-15T21:40:32.117Z", + "Mozilla/Add-ons/WebExtensions/API/menus/ContextType": { + "modified": "2020-10-15T22:14:46.556Z", "contributors": [ - "alattalatta", - "nicesh" + "SphinxKnight", + "grizlupo" ] }, - "Web/JavaScript/Reference/Global_Objects/parseFloat": { - "modified": "2020-10-15T21:58:14.258Z", + "Mozilla/Add-ons/WebExtensions/API/menus/create": { + "modified": "2020-10-15T22:14:49.550Z", "contributors": [ - "alattalatta", - "inkyungkim" + "SphinxKnight", + "grizlupo" ] }, - "Web/JavaScript/Reference/Global_Objects/parseInt": { - "modified": "2020-10-15T21:48:49.061Z", + "Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement": { + "modified": "2020-10-15T22:14:45.950Z", "contributors": [ - "bigsaigon333", - "alattalatta", - "magnoliaa" + "SphinxKnight", + "grizlupo" ] }, - "Web/JavaScript/Reference/Global_Objects/undefined": { - "modified": "2020-10-15T21:40:31.421Z", + "Mozilla/Add-ons/WebExtensions/API/menus": { + "modified": "2020-10-15T21:53:39.975Z", "contributors": [ - "alattalatta", - "nicesh" + "SphinxKnight", + "grizlupo", + "wbamberg", + "hoony" ] }, - "Web/JavaScript/Reference/Global_Objects/uneval": { - "modified": "2020-10-15T21:52:46.647Z", + "Mozilla/Add-ons/WebExtensions/API/menus/onShown": { + "modified": "2020-10-15T22:14:49.769Z", "contributors": [ - "alattalatta", - "teoli", - "Perlmint" + "SphinxKnight", + "grizlupo" ] }, - "Web/JavaScript/Reference/Iteration_protocols": { - "modified": "2020-03-12T19:44:08.276Z", + "Web/API/Navigation_timing_API": { + "modified": "2019-03-23T23:19:34.117Z", "contributors": [ - "Snark", - "dragmove", - "echo304" + "sbnet21" ] }, - "Web/JavaScript/Reference/Lexical_grammar": { - "modified": "2020-10-15T21:47:17.603Z", + "Learn/Server-side/Node_server_without_framework": { + "modified": "2020-07-16T22:36:05.665Z", "contributors": [ - "honggaruy", - "alattalatta", - "softweaver", - "Roomination", - "paranbaram" + "kidkkr" ] }, - "Web/JavaScript/Reference/Operators": { - "modified": "2020-10-15T21:15:29.282Z", + "Mozilla/Firefox/Releases/3/Notable_bugs_fixed": { + "modified": "2019-03-23T23:51:11.073Z", "contributors": [ - "limkukhyun", - "Violet-Bora-Lee", - "alattalatta", - "haeguri", - "Netaras", "teoli", - "Anonymous" + "Jeongkyu" ] }, - "Web/JavaScript/Reference/Operators/Addition": { - "modified": "2020-10-15T22:34:18.983Z", + "orphaned/Places/Custom_Containers": { + "modified": "2020-01-12T05:08:34.067Z", "contributors": [ - "limkukhyun" + "alattalatta", + "wbamberg", + "Jeongkyu" ] }, - "Web/JavaScript/Reference/Operators/Arithmetic_Operators": { - "modified": "2020-10-15T21:50:08.581Z", + "orphaned/Places/Instantiating_Views": { + "modified": "2020-01-12T05:08:39.519Z", "contributors": [ "alattalatta", - "chimimode", - "fscholz", "wbamberg", - "KSH-code", - "siwoolee", - "ChanghwaLee", - "imskojs" + "Jeongkyu" ] }, - "Web/JavaScript/Reference/Operators/Assignment_Operators": { - "modified": "2020-10-15T21:50:31.036Z", + "orphaned/Places/Query_System": { + "modified": "2019-04-20T03:50:18.185Z", "contributors": [ - "alattalatta", "wbamberg", - "NessunKim", - "daehyoung" + "teoli", + "Jeongkyu" ] }, - "Web/JavaScript/Reference/Operators/Bitwise_Operators": { - "modified": "2020-10-15T21:25:50.021Z", + "orphaned/Places/Views": { + "modified": "2020-01-12T05:08:46.290Z", "contributors": [ "alattalatta", - "jghg2724", - "epicsaga", - "daewon", - "teoli", - "Cho.Eun" + "wbamberg", + "Jeongkyu" ] }, - "Web/JavaScript/Reference/Operators/Comma_Operator": { - "modified": "2020-10-15T21:48:31.441Z", + "Mozilla/Firefox/Releases/3/SVG_improvements": { + "modified": "2019-03-23T23:51:12.606Z", "contributors": [ - "alattalatta", - "hoony" + "teoli", + "Suguni" ] }, - "Web/JavaScript/Reference/Operators/Comparison_Operators": { - "modified": "2020-10-15T21:46:03.880Z", + "Web/SVG/SVG_1.1_Support_in_Firefox": { + "modified": "2019-03-23T23:41:45.344Z", "contributors": [ - "alattalatta", - "Parcovia", - "ohsory1324", - "LEGOLLAS" + "teoli", + "Cliffet", + "taggon" ] }, - "Web/JavaScript/Reference/Operators/Conditional_Operator": { - "modified": "2020-10-15T21:39:25.018Z", + "conflicting/Web/JavaScript/JavaScript_technologies_overview": { + "modified": "2019-12-13T21:09:57.295Z", "contributors": [ - "pyjun01", - "alattalatta", - "limkukhyun", - "taisuk", - "reoim", - "epicsaga" + "wbamberg", + "Netaras", + "Sebuls" ] }, - "Web/JavaScript/Reference/Operators/Destructuring_assignment": { - "modified": "2020-10-15T21:45:50.516Z", + "orphaned/Theme_Packaging": { + "modified": "2019-03-23T23:42:36.273Z", "contributors": [ - "alattalatta", - "corund", - "dolmoon", - "NessunKim", - "kdex", - "faker007", - "Netaras" + "teoli", + "애들아빠" ] }, - "Web/JavaScript/Reference/Operators/Equality": { - "modified": "2020-10-15T22:35:05.143Z", + "Learn/HTML/Howto/Author_fast-loading_HTML_pages": { + "modified": "2020-07-16T22:22:33.009Z", "contributors": [ - "junnapark" + "ybin", + "teoli", + "Jeongsw", + "Sebuls" ] }, - "Web/JavaScript/Reference/Operators/Grouping": { - "modified": "2020-10-15T21:45:49.973Z", + "orphaned/Tools/Add-ons/DOM_Inspector": { + "modified": "2020-07-16T22:36:24.511Z", "contributors": [ - "alattalatta", - "SeungYeol", - "seung-yeol" + "SphinxKnight", + "wbamberg", + "Sebuls" ] }, - "Web/JavaScript/Reference/Operators/Nullish_coalescing_operator": { - "modified": "2020-10-15T22:25:44.809Z", + "orphaned/Tools/Add-ons": { + "modified": "2020-07-16T22:36:23.557Z", "contributors": [ - "ssohymind", - "Jung.Kyu-Hyun" + "SphinxKnight", + "wbamberg", + "mfluehr" ] }, - "Web/JavaScript/Reference/Operators/Object_initializer": { - "modified": "2020-10-15T21:47:08.402Z", + "Tools/Debugger/Keyboard_shortcuts": { + "modified": "2020-07-16T22:35:18.793Z", "contributors": [ - "honggaruy", - "callin2", - "Netaras" + "SphinxKnight", + "wbamberg", + "toyuq" ] }, - "Web/JavaScript/Reference/Operators/Optional_chaining": { - "modified": "2020-10-15T22:25:42.843Z", + "Tools/Debugger/How_to": { + "modified": "2020-07-16T22:35:07.978Z", "contributors": [ - "Jung.Kyu-Hyun" + "SphinxKnight", + "wbamberg" ] }, - "Web/JavaScript/Reference/Operators/Pipeline_operator": { - "modified": "2020-10-15T22:15:31.566Z", + "Tools/Debugger/How_to/Open_the_debugger": { + "modified": "2020-07-16T22:35:09.268Z", "contributors": [ - "alattalatta" + "SphinxKnight", + "wbamberg", + "toyuq", + "galcyurio" ] }, - "Web/JavaScript/Reference/Operators/Property_Accessors": { - "modified": "2020-10-15T21:46:18.602Z", + "Tools/Debugger/How_to/Search": { + "modified": "2020-07-16T22:35:15.581Z", "contributors": [ - "alattalatta", - "Violet-Bora-Lee", - "Netaras" + "SphinxKnight", + "wbamberg", + "toyuq" ] }, - "Web/JavaScript/Reference/Operators/Remainder": { - "modified": "2020-10-15T22:35:04.854Z", + "Tools/Debugger/How_to/Set_a_breakpoint": { + "modified": "2020-07-16T22:35:10.232Z", "contributors": [ - "junnapark" + "SphinxKnight", + "wbamberg", + "toyuq" ] }, - "Web/JavaScript/Reference/Operators/Spread_syntax": { - "modified": "2020-10-15T22:03:25.315Z", + "Mozilla/Firefox/Releases/2/Updating_extensions": { + "modified": "2019-03-23T23:47:28.581Z", "contributors": [ - "alattalatta", - "cs09g", - "cnaa97", - "ageofsys" + "Channy" ] }, - "Web/JavaScript/Reference/Operators/async_function": { - "modified": "2020-10-15T21:53:15.087Z", + "Mozilla/Firefox/Releases/3/Updating_extensions": { + "modified": "2019-12-13T20:35:48.646Z", "contributors": [ - "ibizcox", - "alattalatta", - "undefcat" + "wbamberg", + "Sheppy", + "Suguni" ] }, - "Web/JavaScript/Reference/Operators/await": { - "modified": "2020-10-15T21:53:13.195Z", + "Mozilla/Firefox/Releases/3/Updating_web_applications": { + "modified": "2019-03-23T23:50:12.740Z", "contributors": [ - "rmfpdlxmtidl", - "limkukhyun", - "NessunKim", - "HomoEfficio", - "undefcat" + "wbamberg", + "teoli", + "Sheppy", + "Channy" ] }, - "Web/JavaScript/Reference/Operators/class": { - "modified": "2020-10-15T21:46:02.874Z", + "orphaned/Using_Mozilla_in_Testing_and_Debugging_Web_Sites": { + "modified": "2019-03-23T23:13:10.960Z", "contributors": [ - "dsma73", - "alattalatta", - "Netaras" + "cap3618" ] }, - "Web/JavaScript/Reference/Operators/delete": { - "modified": "2020-10-15T21:56:50.911Z", + "Web/API/Document_Object_Model/Introduction": { + "modified": "2020-02-10T04:12:58.179Z", "contributors": [ - "alattalatta", - "itsjiwonpark", - "Hou" + "sungik-choi", + "jswisher", + "cs09g", + "2circumflex", + "dakeshi" ] }, - "Web/JavaScript/Reference/Operators/function": { - "modified": "2020-10-15T21:45:42.250Z", + "Web/API/Fetch_API/Using_Fetch": { + "modified": "2020-10-15T22:00:18.673Z", "contributors": [ - "dolmoon", + "JINSUNG1048", + "CressZZ", + "LiamYong", + "ajy720", "limkukhyun", - "laranhee", - "Netaras" + "briz", + "mukeunzi", + "real0131", + "2dubbing", + "BANIP" ] }, - "Web/JavaScript/Reference/Operators/function*": { - "modified": "2020-10-15T21:38:18.382Z", + "Web/API/HTML_Drag_and_Drop_API/Drag_operations": { + "modified": "2019-03-18T21:31:26.321Z", "contributors": [ - "limkukhyun", - "KSH-code", - "JaehaAhn" + "dolmoon" ] }, - "Web/JavaScript/Reference/Operators/in": { - "modified": "2020-03-12T19:42:49.608Z", + "Web/API/HTML_Drag_and_Drop_API": { + "modified": "2020-09-06T00:51:11.619Z", "contributors": [ - "." + "zzoPark", + "jinyoung", + "constmoon", + "lundella", + "jinhyukkim" ] }, - "Web/JavaScript/Reference/Operators/instanceof": { - "modified": "2020-10-15T21:48:46.760Z", + "Web/API/HTMLOrForeignElement/dataset": { + "modified": "2020-10-15T21:56:46.705Z", "contributors": [ + "Kaben", "alattalatta", - "tg0825", - "dooyou21", - "moolow", - "magnoliaa" + "jyhwng", + "KimSejune" ] }, - "Web/JavaScript/Reference/Operators/new": { - "modified": "2020-10-15T21:50:30.370Z", + "Web/API/ElementCSSInlineStyle/style": { + "modified": "2020-10-15T21:18:22.703Z", "contributors": [ "alattalatta", - "luke.bae", - "KSH-code", - "daehyoung" + "fscholz", + "AshfaqHossain", + "teoli", + "Netaras" ] }, - "Web/JavaScript/Reference/Operators/new.target": { - "modified": "2020-10-15T21:48:09.333Z", + "Web/API/HTMLOrForeignElement/tabIndex": { + "modified": "2019-03-23T23:42:52.929Z", "contributors": [ - "alattalatta", + "fscholz", + "jsx", + "teoli", "Netaras" ] }, - "Web/JavaScript/Reference/Operators/super": { - "modified": "2020-10-15T21:43:46.088Z", + "Web/API/Navigator/connection": { + "modified": "2019-03-23T23:26:48.403Z", "contributors": [ - "alattalatta", - "jeonnoej" + "fscholz", + "khalid32", + "teoli", + "hyeonseok" ] }, - "Web/JavaScript/Reference/Operators/this": { - "modified": "2020-10-15T21:16:21.207Z", + "Web/API/HTMLElement/innerText": { + "modified": "2020-10-15T22:08:26.441Z", "contributors": [ - "StolenMoments", - "cs09g", "alattalatta", - "utatti", - "huusz", + "DeadIntegral" + ] + }, + "Web/API/Screen/onorientationchange": { + "modified": "2019-03-23T23:26:53.977Z", + "contributors": [ + "jsx", "teoli", - "eros21c", - "Channy" + "junho85" ] }, - "Web/JavaScript/Reference/Operators/typeof": { - "modified": "2020-10-15T21:47:39.354Z", + "Web/API/Streams_API/Concepts": { + "modified": "2019-03-18T21:23:57.078Z", "contributors": [ - "Seonghui", - "alattalatta", - "dale0713" + "jjangga0214" ] }, - "Web/JavaScript/Reference/Operators/void": { - "modified": "2020-10-15T21:24:25.804Z", + "Web/API/Web_Workers_API/Using_web_workers": { + "modified": "2020-04-03T02:58:31.932Z", "contributors": [ - "alattalatta", - "teoli", - "siriz" + "dh", + "roupkk", + "andrewsohn", + "NFM", + "epicsaga" ] }, - "Web/JavaScript/Reference/Operators/yield": { - "modified": "2020-03-12T19:43:03.959Z", + "Web/API/WindowOrWorkerGlobalScope/setTimeout": { + "modified": "2019-03-23T22:22:22.449Z", "contributors": [ - "coolengineer", - "ByeongGi", - "2oosoo", - "Yunhong-Min", - "preco21" + "DevJang", + "TroyTae" ] }, - "Web/JavaScript/Reference/Operators/yield*": { - "modified": "2020-10-15T21:41:31.854Z", + "Web/API/XMLHttpRequest/timeout_event": { + "modified": "2019-05-28T20:54:41.611Z", "contributors": [ - "alattalatta", - "hanmomhanda", - "preco21" + "jswisher", + "wbamberg", + "ExE-Boss", + "DeadIntegral" ] }, - "Web/JavaScript/Reference/Operators/논리_연산자(Logical_Operators)": { - "modified": "2020-10-15T21:47:31.347Z", + "Web/CSS/Containing_block": { + "modified": "2020-01-07T10:38:47.261Z", "contributors": [ "alattalatta", - "atomDevelop", - "r2fresh", - "Parcovia", - "gnujoow", - "helloheesu", - "imskojs" + "nyxchung" ] }, - "Web/JavaScript/Reference/Operators/연산자_우선순위": { - "modified": "2020-04-10T08:53:04.223Z", + "Learn/CSS/Howto/CSS_FAQ": { + "modified": "2020-07-16T22:25:45.337Z", "contributors": [ - "EatChangmyeong", - "alattalatta", - "." + "miyunim" ] }, - "Web/JavaScript/Reference/Statements": { - "modified": "2020-10-15T21:26:12.348Z", + "Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images": { + "modified": "2019-04-08T10:28:17.719Z", "contributors": [ "alattalatta", - "naduhy2", - "Netaras", - "teoli", - "Sheppy" + "jyqry" ] }, - "Web/JavaScript/Reference/Statements/Empty": { - "modified": "2020-10-15T22:04:17.983Z", + "Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox": { + "modified": "2019-03-18T20:55:20.567Z", "contributors": [ - "alattalatta", - "limkukhyun" + "5JJ", + "joeunha", + "beowolf9", + "silmari", + "soonoo", + "wankyu", + "Latera" ] }, - "Web/JavaScript/Reference/Statements/async_function": { - "modified": "2020-10-15T21:51:55.526Z", + "Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox": { + "modified": "2019-10-04T18:40:14.389Z", "contributors": [ - "MoonHyuk", - "jhoijune", - "DeadIntegral", - "limkukhyun", - "Konan" + "Hwan-Woong-Lee" ] }, - "Web/JavaScript/Reference/Statements/block": { - "modified": "2020-10-15T21:50:27.290Z", + "Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow": { + "modified": "2019-09-24T15:45:35.513Z", "contributors": [ - "alattalatta", - "daehyoung" + "Hwan-Woong-Lee" ] }, - "Web/JavaScript/Reference/Statements/break": { - "modified": "2020-10-15T21:44:31.572Z", + "Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow": { + "modified": "2019-09-26T08:28:44.702Z", "contributors": [ - "alattalatta", - "jeehyukwon", - "Netaras" + "Hwan-Woong-Lee" ] }, - "Web/JavaScript/Reference/Statements/class": { - "modified": "2020-10-15T21:46:03.105Z", + "Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes": { + "modified": "2019-09-17T21:10:09.773Z", "contributors": [ - "alattalatta", - "Netaras" + "Hwan-Woong-Lee" ] }, - "Web/JavaScript/Reference/Statements/const": { - "modified": "2020-10-15T21:38:50.829Z", + "Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow": { + "modified": "2020-03-10T09:52:12.477Z", "contributors": [ - "alattalatta", - "warnee", - "maxtortime", - "kdex", - "Netaras", - "kuil09" + "EricByHPHK", + "Hwan-Woong-Lee" ] }, - "Web/JavaScript/Reference/Statements/continue": { - "modified": "2020-10-15T22:04:27.151Z", + "Web/CSS/CSS_Masking": { + "modified": "2019-04-26T08:55:40.990Z", "contributors": [ "alattalatta", - "SSJ-unclear", - "limkukhyun" + "Netaras" ] }, - "Web/JavaScript/Reference/Statements/debugger": { - "modified": "2020-10-15T22:04:18.665Z", + "Web/CSS/CSS_Values_and_Units": { + "modified": "2020-11-29T04:33:10.671Z", "contributors": [ - "alattalatta", - "limkukhyun" + "alanhchoi" ] }, - "Web/JavaScript/Reference/Statements/default": { - "modified": "2020-10-15T22:07:33.273Z", + "Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property": { + "modified": "2019-03-23T23:41:42.325Z", "contributors": [ - "alattalatta", - "SSJ-unclear" + "hjunshin", + "teoli", + "jaemin_jo", + "Ioseph" ] }, - "Web/JavaScript/Reference/Statements/do...while": { - "modified": "2020-10-15T22:30:37.801Z", + "Web/SVG/Tutorial/SVG_and_CSS": { + "modified": "2019-03-23T23:41:56.694Z", "contributors": [ - "jyman7811" + "teoli", + "Ioseph" ] }, - "Web/JavaScript/Reference/Statements/export": { - "modified": "2020-10-15T21:41:49.561Z", + "orphaned/Web/CSS/Index": { + "modified": "2019-05-26T05:51:14.395Z", "contributors": [ - "copyx", - "alattalatta", - "yonggoo.noh", - "LeeJunyeol", - "umbria", - "haydnhkim" + "alattalatta" ] }, - "Web/JavaScript/Reference/Statements/for": { - "modified": "2020-10-15T21:46:03.615Z", + "orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template": { + "modified": "2020-10-15T21:16:53.027Z", "contributors": [ "alattalatta", - "SeungYeol" + "wbamberg", + "chrisdavidmills", + "teoli", + "Pastelgrim" ] }, - "Web/JavaScript/Reference/Statements/for-await...of": { - "modified": "2020-10-15T22:27:58.512Z", + "Web/Progressive_web_apps/Responsive/Media_types": { + "modified": "2019-03-23T23:33:02.082Z", "contributors": [ - "composite" + "teoli", + "SpikeYou" ] }, - "Web/JavaScript/Reference/Statements/for...in": { - "modified": "2020-10-15T21:26:08.013Z", + "Web/CSS/Adjacent_sibling_combinator": { + "modified": "2020-10-15T21:53:17.801Z", "contributors": [ - "Sunmin0520", - "limkukhyun", - "teoli", - "Androidbee" + "alattalatta", + "neatnet" ] }, - "Web/JavaScript/Reference/Statements/for...of": { - "modified": "2020-10-15T21:36:35.059Z", + "Web/API/Element/blur_event": { + "modified": "2019-03-18T21:27:20.806Z", "contributors": [ - "jacob17", - "alattalatta", - "Netaras", - "ligeek" + "ExE-Boss", + "whdckszxxx" ] }, - "Web/JavaScript/Reference/Statements/function": { - "modified": "2020-10-15T21:45:43.150Z", + "Web/API/Window/DOMContentLoaded_event": { + "modified": "2020-12-03T14:42:33.988Z", "contributors": [ + "dink95", "alattalatta", - "dolmoon", - "Netaras" + "wbamberg", + "ExE-Boss", + "project42da" ] }, - "Web/JavaScript/Reference/Statements/function*": { - "modified": "2020-10-15T21:38:18.568Z", + "Web/API/Window/load_event": { + "modified": "2019-04-30T14:18:11.441Z", "contributors": [ - "alattalatta", - "SphinxKnight", - "silmari", - "kdex", - "resoliwan", - "KisukPark", - "AHNJAEHA", - "preco21", - "JaehaAhn" + "wbamberg", + "ExE-Boss", + "SuminNoh" ] }, - "Web/JavaScript/Reference/Statements/if...else": { - "modified": "2020-10-15T21:46:05.432Z", + "Web/API/BroadcastChannel/message_event": { + "modified": "2019-04-30T14:16:28.259Z", "contributors": [ - "yami03", - "alattalatta", - "Parcovia", - "Jungmin" + "wbamberg", + "ExE-Boss", + "JinSeungHo" ] }, - "Web/JavaScript/Reference/Statements/import": { - "modified": "2020-10-15T21:39:54.342Z", + "Web/API/Vibration_API": { + "modified": "2020-10-15T21:24:18.629Z", "contributors": [ "alattalatta", - "hwshim", - "haydnhkim" + "pjc0247", + "Sheppy", + "yunji_koh" ] }, - "Web/JavaScript/Reference/Statements/label": { - "modified": "2020-03-12T19:45:32.505Z", + "Web/CSS/Media_Queries/Using_media_queries": { + "modified": "2020-11-10T11:07:52.526Z", "contributors": [ - "wafersroom" + "hKa2020", + "alattalatta", + "hwanseung", + "BANIP", + "seoyunho", + "Ground-Silver0903", + "Sebastianz", + "roupkk", + "mrstork", + "malayaleecoder", + "jooddang", + "jhonghee" ] }, - "Web/JavaScript/Reference/Statements/let": { - "modified": "2020-10-15T21:40:35.318Z", + "Web/CSS/Visual_formatting_model": { + "modified": "2019-09-26T13:57:16.375Z", "contributors": [ - "cjacking3", - "SeonHyungJo", - "Isitea", - "RingoKim" + "Hwan-Woong-Lee", + "nyxchung", + "cmygray", + "cheeee", + "dotorify", + "hotsummmer", + "JeongSeongDae" ] }, - "Web/JavaScript/Reference/Statements/return": { - "modified": "2020-10-15T21:50:13.127Z", + "Web/API/Fullscreen_API": { + "modified": "2020-10-15T21:24:24.180Z", "contributors": [ - "alattalatta", - "2oosoo", - "Diana_" + "DeadIntegral", + "wbamberg", + "junho85" ] }, - "Web/JavaScript/Reference/Statements/switch": { - "modified": "2020-10-15T21:49:53.296Z", + "Web/Guide/HTML/Editable_content": { + "modified": "2019-03-23T22:40:12.545Z", "contributors": [ - "chimimode", - "ByeongGi", - "nidev" + "gblue1223" ] }, - "Web/JavaScript/Reference/Statements/throw": { - "modified": "2020-10-15T22:04:25.321Z", + "Web/Guide/Parsing_and_serializing_XML": { + "modified": "2019-03-23T22:16:47.020Z", "contributors": [ - "SSJ-unclear", - "hongnakyung" + "young-gratia" ] }, - "Web/JavaScript/Reference/Statements/try...catch": { - "modified": "2020-10-15T21:40:10.256Z", + "Web/Guide/Graphics": { + "modified": "2020-02-15T07:39:57.101Z", "contributors": [ - "limkukhyun", - "deltakor1234", - "SSJ-unclear", - "pianorange", - "epicsaga" + "Netaras", + "hyeonseok", + "narae_lee" ] }, - "Web/JavaScript/Reference/Statements/var": { - "modified": "2020-10-15T21:42:33.307Z", + "Web/API/Canvas_API": { + "modified": "2020-02-05T06:54:04.340Z", "contributors": [ "alattalatta", - "naduhy2", - "jaeminkim87", - "teoli" + "chungheepark", + "bluewings", + "cs09g", + "Netaras", + "teoli", + "ethertank", + "dextra", + "Suguni" ] }, - "Web/JavaScript/Reference/Statements/while": { - "modified": "2020-03-12T19:45:49.250Z", + "Web/API/Canvas_API/Manipulating_video_using_canvas": { + "modified": "2019-06-05T03:56:50.784Z", "contributors": [ - "galcyurio", - "ChanghwaLee" + "Yeri-Kim" ] }, - "Web/JavaScript/Reference/Statements/with": { - "modified": "2020-10-15T22:07:40.562Z", + "Web/API/Canvas_API/Tutorial/Advanced_animations": { + "modified": "2020-12-05T09:44:35.831Z", "contributors": [ - "SSJ-unclear" + "minthing" ] }, - "Web/JavaScript/Reference/Strict_mode": { - "modified": "2020-06-29T00:30:58.676Z", + "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors": { + "modified": "2019-10-10T16:32:24.689Z", "contributors": [ - "ranhyegg", - "genzuby", - "Kim1Jun", - "cs09g", - "alattalatta", - "geunhyung", - "limkukhyun", - "dsma73", - "cecilia.cho", - "Minsoo_Kim", - "laranhee", - "KSH-code", - "imskojs", - "magnoliaa" + "kbsbroad", + "sujilee91", + "donghyun", + "Sebastianz", + "AlwaysOnce" ] }, - "Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode": { - "modified": "2020-03-12T19:48:28.686Z", + "Web/API/Canvas_API/Tutorial/Basic_animations": { + "modified": "2019-03-25T03:54:23.486Z", "contributors": [ - "SeonHyungJo" + "AlwaysOnce" ] }, - "Web/JavaScript/Reference/Template_literals": { - "modified": "2020-10-15T21:47:14.004Z", + "Web/API/Canvas_API/Tutorial/Basic_usage": { + "modified": "2019-12-12T22:32:43.483Z", "contributors": [ - "hjleesm", - "rev1c0sm0s", - "limkukhyun", - "springday1023", "kbsbroad", - "rlaxognsk", - "dragmove" + "OkHyeon", + "sujilee91", + "MuhunKim" ] }, - "Web/JavaScript/Reference/Trailing_commas": { - "modified": "2020-11-24T03:08:45.215Z", + "Web/API/Canvas_API/Tutorial/Compositing/Example": { + "modified": "2019-03-18T21:40:09.058Z", "contributors": [ - "bckim9489", - "EatChangmyeong", - "samee" + "EatChangmyeong" ] }, - "Web/JavaScript/Typed_arrays": { - "modified": "2020-03-12T19:44:00.798Z", + "Web/API/Canvas_API/Tutorial/Compositing": { + "modified": "2019-03-23T23:08:47.571Z", "contributors": [ - "Netaras" + "EatChangmyeong", + "AlwaysOnce" ] }, - "Web/JavaScript/쉘": { - "modified": "2020-03-12T19:44:13.687Z", + "Web/API/Canvas_API/Tutorial/Drawing_shapes": { + "modified": "2019-03-25T03:42:34.299Z", "contributors": [ - "limkukhyun", - "hoony" + "kbsbroad", + "sujilee91" ] }, - "Web/JavaScript/시작하기": { - "modified": "2019-03-23T23:14:43.699Z", + "Web/API/Canvas_API/Tutorial/Finale": { + "modified": "2020-12-02T07:47:45.530Z", "contributors": [ - "eunsuklee", - "teoli" + "chzhclq17" ] }, - "Web/JavaScript/언어_리소스": { - "modified": "2020-03-12T19:39:22.531Z", + "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility": { + "modified": "2019-03-18T21:18:34.778Z", "contributors": [ - "ahnzaz", - "KSH-code", - "Netaras", - "teoli", - "NFM" + "kbsbroad" ] }, - "Web/Manifest": { - "modified": "2020-10-15T22:32:27.672Z", + "Web/API/Canvas_API/Tutorial": { + "modified": "2019-09-23T23:04:58.681Z", "contributors": [ - "alattalatta" + "dbwodlf3", + "alattalatta", + "danhojin", + "MuhunKim", + "donghyun", + "AlwaysOnce" ] }, - "Web/MathML": { - "modified": "2020-10-15T21:24:14.563Z", + "Web/API/Canvas_API/Tutorial/Optimizing_canvas": { + "modified": "2020-06-04T04:24:50.578Z", "contributors": [ - "alattalatta", - "fred.wang", - "hyeonseok", - "narae_lee" + "composite", + "kbsbroad" ] }, - "Web/Media": { - "modified": "2019-07-04T01:00:37.497Z", + "Web/API/Canvas_API/Tutorial/Using_images": { + "modified": "2020-06-18T07:33:39.788Z", "contributors": [ - "developer19899" + "dooyou21", + "cs09g", + "kbsbroad", + "klight1994", + "sujilee91" ] }, - "Web/Media/Autoplay_guide": { - "modified": "2019-09-17T06:49:59.371Z", + "Web/API/Canvas_API/Tutorial/Transformations": { + "modified": "2019-03-18T21:20:50.794Z", "contributors": [ - "ahnzaz" + "jinah1000" ] }, - "Web/Media/Formats": { - "modified": "2019-09-17T02:15:54.155Z", + "orphaned/Web/HTML/Element/command": { + "modified": "2020-10-15T21:44:01.823Z", "contributors": [ - "Havi Hoffman" + "alattalatta", + "Rich_Village" ] }, - "Web/Media/Formats/비디오코덱": { - "modified": "2019-10-21T23:30:00.090Z", + "orphaned/Web/HTML/Element/element": { + "modified": "2020-10-15T21:35:22.163Z", "contributors": [ - "ahnzaz" + "alattalatta", + "azunyan3" ] }, - "Web/Media/Formats/컨테이너": { - "modified": "2019-09-19T00:05:45.367Z", + "orphaned/Web/HTML/Global_attributes/dropzone": { + "modified": "2020-10-15T22:06:26.786Z", "contributors": [ - "ahnzaz" + "alattalatta", + "dolmoon" ] }, - "Web/Media/Formats/코덱파라미터": { - "modified": "2020-06-10T22:11:12.156Z", + "Web/HTML/Global_attributes/class": { + "modified": "2020-10-15T21:51:13.209Z", "contributors": [ - "ahnzaz" + "alattalatta", + "dolmoon", + "woojin.jo" ] }, - "Web/Performance": { - "modified": "2020-01-12T15:28:31.330Z", + "Web/Guide/HTML/Using_HTML_sections_and_outlines": { + "modified": "2020-01-10T12:08:26.959Z", "contributors": [ - "chrisdavidmills" + "alattalatta", + "sudo0272", + "Kaben", + "bombinari", + "naduhy2", + "miname" ] }, - "Web/Performance/브라우저는_어떻게_동작하는가": { - "modified": "2020-12-09T08:24:42.107Z", + "Web/Guide/HTML/HTML5": { + "modified": "2019-03-24T00:11:07.419Z", "contributors": [ - "doong-jo" + "teoli", + "Channy", + "Dwchiang", + "vigia122", + "jisung", + "Joone" ] }, - "Web/Performance/중요_렌더링_경로": { - "modified": "2020-09-28T15:59:43.713Z", + "Web/Guide/HTML/HTML5/Introduction_to_HTML5": { + "modified": "2019-03-23T23:38:47.847Z", "contributors": [ - "Joontae-Kim" + "kybin", + "kuil09", + "juyoungbang", + "teoli", + "Channy" ] }, - "Web/Progressive_web_apps": { - "modified": "2019-03-23T22:00:19.382Z", + "Web/HTTP/Browser_detection_using_the_user_agent": { + "modified": "2020-09-13T12:21:12.513Z", "contributors": [ - "chrisdavidmills", - "cs09g" + "sephiron99", + "MyungsunLee", + "alattalatta", + "citrus.alice", + "seokju-na", + "wicksome" ] }, - "Web/Progressive_web_apps/Add_to_home_screen": { - "modified": "2020-01-26T15:58:32.379Z", + "Web/JavaScript/About_JavaScript": { + "modified": "2020-03-12T19:36:55.143Z", "contributors": [ - "alattalatta", - "chrisdavidmills", - "cs09g" + "JinKang", + "Parcovia", + "cs09g", + "imjang57", + "wayne-kim", + "desty", + "stephenjang", + "Luzi.kr", + "teoli", + "Zer0th", + "99corps" ] }, - "Web/Progressive_web_apps/App_structure": { - "modified": "2020-05-31T18:37:47.885Z", + "orphaned/Web/JavaScript/Differential_inheritance_in_JavaScript": { + "modified": "2020-09-14T22:22:46.677Z", "contributors": [ - "chrisdavidmills", - "cs09g" + "limkukhyun" ] }, - "Web/Progressive_web_apps/Installable_PWAs": { - "modified": "2020-05-31T18:37:46.514Z", + "Web/JavaScript/Closures": { + "modified": "2020-03-12T19:37:58.819Z", "contributors": [ - "chrisdavidmills", - "cs09g" + "chaewonkong", + "songdoing", + "RamiTae", + "Violet-Bora-Lee", + "alattalatta", + "henry_hwang", + "Seonghui", + "guyeol", + "limkukhyun", + "zziuni", + "Yoonjoo", + "KSH-code", + "afrontend", + "AlexMin", + "Jongmin", + "MyHyuny", + "joeunha", + "Kaben", + "noritersand", + "kdnmih", + "teoli", + "JaehwanLee", + "jaemin_jo" ] }, - "Web/Progressive_web_apps/Offline_Service_workers": { - "modified": "2020-05-31T18:37:49.321Z", + "Web/JavaScript/Inheritance_and_the_prototype_chain": { + "modified": "2020-04-04T00:50:18.045Z", "contributors": [ - "chrisdavidmills", - "cs09g" + "peter1035k", + "jeongraeKim", + "dbwodlf3", + "project42da", + "quddnr153", + "ahnzaz", + "laranhee", + "daewooLeeNy", + "danhojin", + "shim.hw0810", + "faker007", + "juyonglee", + "epicsaga", + "sftblw", + "mixed80", + "teoli", + "JaehwanLee", + "jaemin_jo" ] }, - "Web/Progressive_web_apps/Re-engageable_Notifications_Push": { - "modified": "2019-03-18T20:52:11.625Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About": { + "modified": "2019-01-16T16:11:14.324Z", "contributors": [ - "chrisdavidmills", - "cs09g" + "teoli", + "Wafe", + "taggon" ] }, - "Web/Progressive_web_apps/소개": { - "modified": "2019-03-18T20:52:13.104Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages": { + "modified": "2019-01-16T14:15:11.129Z", "contributors": [ - "chrisdavidmills", - "cs09g" + "teoli", + "99corps" ] }, - "Web/SVG": { - "modified": "2019-11-05T05:19:15.768Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression": { + "modified": "2019-03-23T23:43:48.309Z", "contributors": [ - "dbwodlf3", - "u4bi", - "kybin", - "nacyot", - "hoony", - "dewey94esb", - "Delapouite" + "teoli", + "디토" ] }, - "Web/SVG/Applying_SVG_effects_to_HTML_content": { - "modified": "2019-03-23T22:44:07.191Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters": { + "modified": "2019-03-23T23:43:54.514Z", "contributors": [ - "Narrativi", - "hoony" + "jigs12", + "teoli", + "ethertank", + "Wafe" ] }, - "Web/SVG/Attribute": { - "modified": "2019-03-23T22:32:34.072Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods": { + "modified": "2019-03-23T23:43:58.661Z", "contributors": [ - "Ninjapolian" + "teoli", + "Wafe" ] }, - "Web/SVG/Attribute/calcMode": { - "modified": "2019-03-23T22:11:02.860Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type": { + "modified": "2019-03-23T23:43:46.816Z", "contributors": [ - "tadkim" + "teoli", + "Wafe" ] }, - "Web/SVG/Attribute/cx": { - "modified": "2019-03-23T22:32:29.630Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties": { + "modified": "2019-03-23T23:43:53.828Z", "contributors": [ - "se0kjun" + "teoli", + "Wafe" ] }, - "Web/SVG/Attribute/d": { - "modified": "2019-03-18T21:21:40.969Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects": { + "modified": "2019-01-16T15:05:32.812Z", "contributors": [ - "officialmansu" + "teoli", + "Anonymous" ] }, - "Web/SVG/Attribute/keyTimes": { - "modified": "2019-03-23T22:11:05.080Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties": { + "modified": "2019-03-23T23:43:44.923Z", "contributors": [ - "tadkim" + "teoli", + "Wafe" ] }, - "Web/SVG/Attribute/values": { - "modified": "2019-03-23T22:11:11.110Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function": { + "modified": "2019-03-23T23:43:44.078Z", "contributors": [ - "tadkim" + "teoli", + "Wafe" ] }, - "Web/SVG/Attribute/version": { - "modified": "2019-03-18T21:41:36.785Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References": { + "modified": "2019-03-23T23:43:58.264Z", "contributors": [ - "MyeonghwanCho" + "teoli", + "Wafe" ] }, - "Web/SVG/Attribute/viewBox": { - "modified": "2019-03-23T22:28:50.142Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions": { + "modified": "2019-01-16T16:16:32.143Z", "contributors": [ - "dragmove" + "teoli", + "taggon" ] }, - "Web/SVG/Element": { - "modified": "2019-03-23T23:17:31.660Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview": { + "modified": "2019-01-16T14:15:11.648Z", "contributors": [ - "dewey94esb", - "kscarfone" + "teoli", + "S. Kang", + "jsnapz", + "Ape1126", + "Wafe", + "Huick", + "Gilchris" ] }, - "Web/SVG/Element/a": { - "modified": "2020-10-15T21:40:12.249Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties": { + "modified": "2019-01-16T15:50:20.671Z", "contributors": [ - "alattalatta", - "Sebastianz", - "dewey94esb" + "teoli", + "Gilchris" ] }, - "Web/SVG/Element/altGlyph": { - "modified": "2020-10-15T21:40:13.413Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators": { + "modified": "2019-03-23T23:41:53.669Z", "contributors": [ - "alattalatta", - "Sebastianz", - "dewey94esb" + "teoli", + "taggon" ] }, - "Web/SVG/Element/circle": { - "modified": "2020-10-15T21:40:18.375Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators": { + "modified": "2019-03-23T23:41:51.754Z", "contributors": [ - "alattalatta", - "wbamberg", - "Sebastianz", - "dewey94esb" + "teoli", + "taggon" ] }, - "Web/SVG/Element/ellipse": { - "modified": "2020-10-15T21:46:51.498Z", + "orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object": { + "modified": "2019-03-23T23:43:56.661Z", "contributors": [ - "alattalatta", - "wbamberg", - "Sebastianz", - "se0kjun" + "teoli", + "Wafe" ] }, - "Web/SVG/Element/사각형": { - "modified": "2020-10-15T21:27:38.577Z", + "Web/JavaScript/Guide/Grammar_and_types": { + "modified": "2020-06-03T11:11:26.830Z", "contributors": [ + "gksrlf2ek", + "sujinlee0616", "alattalatta", - "wbamberg", - "Sebastianz", - "JeongSeongDae" + "shj9432", + "dsma73", + "yhyim", + "hohoonlee", + "limkukhyun", + "yangtaeho", + "gudrl", + "jadestern", + "ddarkchu", + "Netaras", + "HyunSeob", + "wikibook", + "VBChunguk", + "trazy", + "Donghyun_Lee", + "stephenjang", + "Rudy-Ahn", + "moolow", + "teoli", + "frog44" ] }, - "Web/SVG/Tutorial": { - "modified": "2019-09-02T22:37:58.598Z", + "Web/JavaScript/Guide/Details_of_the_Object_Model": { + "modified": "2020-03-12T19:42:17.394Z", "contributors": [ - "jwoo0122", - "EatChangmyeong", - "nacyot", - "epicsaga", - "teoli", - "이선영" + "doong-jo", + "nmsohn", + "DoublSB", + "limkukhyun", + "wbamberg", + "cmygray", + "khseok1060", + "ryukato" ] }, - "Web/SVG/Tutorial/Introduction": { - "modified": "2019-03-23T22:40:12.666Z", + "Web/JavaScript/Guide/Meta_programming": { + "modified": "2020-03-12T19:41:24.217Z", "contributors": [ - "EatChangmyeong", - "nacyot" + "limkukhyun", + "nodejs", + "stephenjang" ] }, - "Web/SVG/Tutorial/Paths": { - "modified": "2019-03-23T22:21:33.428Z", + "Web/JavaScript/Guide/Introduction": { + "modified": "2020-11-13T15:07:54.630Z", "contributors": [ - "EatChangmyeong", - "grizlupo", - "newmsz", - "cnaa97" + "FennecFoxSW", + "ldss3sang", + "limkukhyun", + "bluerainmaker", + "ahnzaz", + "BG.Choi", + "gudrl", + "gnujoow", + "stitchworkingonthecode", + "ShihwanKim", + "Netaras", + "cs09g", + "Jsfumato", + "hwani163", + "junoim", + "ByeongGi", + "stephenjang" ] }, - "Web/SVG/Tutorial/Patterns": { - "modified": "2019-03-18T21:46:02.102Z", + "Web/JavaScript/Guide/Regular_Expressions/Assertions": { + "modified": "2020-09-14T21:47:15.957Z", "contributors": [ - "grizlupo" + "limkukhyun" ] }, - "Web/SVG/Tutorial/SVG_Image_Tag": { - "modified": "2019-03-18T21:46:01.401Z", + "Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges": { + "modified": "2020-03-12T19:49:33.624Z", "contributors": [ - "grizlupo" + "limkukhyun" ] }, - "Web/SVG/Tutorial/SVG_In_HTML_Introduction": { - "modified": "2019-03-23T23:41:45.629Z", + "Web/JavaScript/Guide/Regular_Expressions": { + "modified": "2020-04-29T02:51:44.998Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Cliffet" + "yami03", + "yeonjuan", + "Jung-Max", + "deltakor1234", + "idid0210", + "seungha-kim", + "limkukhyun", + "khg0712", + "nazuna1", + "kooljay82", + "fdevjm", + "coffeenjava", + "gaeun917", + "namhong2001", + "woochankim", + "JunBeom-Park", + "SooYeonKim" ] }, - "Web/SVG/Tutorial/기본_도형": { - "modified": "2019-03-23T22:13:37.061Z", + "Web/JavaScript/Guide/Functions": { + "modified": "2020-03-12T19:41:24.935Z", "contributors": [ - "irisHanb", - "officialmansu", - "JongChanLee" + "limkukhyun", + "01045972746", + "jeoyoho", + "bigsaigon333", + "creatijin", + "jungpaeng", + "gudrl", + "wafersroom", + "gaeun917", + "SSaMKJ", + "JunLee", + "woochankim", + "JunBeom-Park", + "SooYeonKim" ] }, - "Web/SVG/Tutorial/시작하기": { - "modified": "2019-03-23T22:20:15.918Z", + "Web/JavaScript/Reference/Classes/Public_class_fields": { + "modified": "2020-10-15T22:29:50.457Z", "contributors": [ - "Niklane" + "dooyou21" ] }, - "Web/SVG/Tutorial/위치": { - "modified": "2019-03-23T22:19:56.793Z", + "Web/JavaScript/Reference/Functions/Arrow_functions": { + "modified": "2020-10-15T21:39:57.499Z", "contributors": [ - "Niklane" + "honggaruy", + "Vimming", + "songdoing", + "gbyman", + "yonggoo.noh", + "jjangga0214", + "geunhyung", + "limkukhyun", + "kangsan_Chang", + "nyaawlsh", + "daehyoung", + "Geun-Hyung_Kim", + "Netaras", + "preco21", + "chiyodad", + "Jeeeyul" ] }, - "Web/Security": { - "modified": "2020-02-18T07:36:24.047Z", + "orphaned/Web/JavaScript/Reference/Global_Objects/BigInt/prototype": { + "modified": "2020-10-15T22:12:31.982Z", "contributors": [ - "DeadIntegral", - "wbamberg", - "SphinxKnight", - "2pylab", - "Sheppy" + "alattalatta" ] }, - "Web/Security/Insecure_passwords": { - "modified": "2019-07-20T05:09:42.530Z", + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply": { + "modified": "2019-03-23T22:09:25.839Z", "contributors": [ - "shefollowme" + "bsidesoft" ] }, - "Web/Security/Same-origin_policy": { - "modified": "2020-08-22T13:54:54.667Z", + "Web/JavaScript/Reference/Operators/Operator_Precedence": { + "modified": "2020-04-10T08:53:04.223Z", "contributors": [ + "EatChangmyeong", "alattalatta", - "jongidal", - "TroyTae", - "midistour", - "seungha-kim", - "ryuan.choi", - "manascue", - "Vermond", - "behumble" - ] - }, - "Web/Security/Transport_Layer_Security": { - "modified": "2020-09-21T00:10:58.229Z", - "contributors": [ - "junnapark", - "haeguri" + "." ] }, - "Web/Security/정보_보안_기본": { - "modified": "2019-03-23T22:05:46.762Z", + "Web/JavaScript/Shells": { + "modified": "2020-03-12T19:44:13.687Z", "contributors": [ - "daebum-lee" + "limkukhyun", + "hoony" ] }, - "Web/Tutorials": { - "modified": "2019-03-23T23:28:14.827Z", + "Web/JavaScript/Language_Resources": { + "modified": "2020-03-12T19:39:22.531Z", "contributors": [ - "featherlikeg", - "nacyot", - "pjc0247", - "tamnajio", - "KyunH" + "ahnzaz", + "KSH-code", + "Netaras", + "teoli", + "NFM" ] }, - "Web/Web_Components": { - "modified": "2019-03-18T21:01:19.898Z", + "Web/Media/Formats/Video_codecs": { + "modified": "2019-10-21T23:30:00.090Z", "contributors": [ - "adrenalinee", - "cs09g", - "ByeongGi", - "namkwon", - "maybe" + "ahnzaz" ] }, - "Web/Web_Components/Using_custom_elements": { - "modified": "2020-10-15T22:25:18.797Z", + "Web/Media/Formats/Containers": { + "modified": "2019-09-19T00:05:45.367Z", "contributors": [ - "cutelee", - "chdaud1995", - "alattalatta", - "atomDevelop", - "nerdrun", - "ByeongGi" + "ahnzaz" ] }, - "Web/Web_Components/Using_shadow_DOM": { - "modified": "2020-07-07T00:49:27.609Z", + "Web/Media/Formats/codecs_parameter": { + "modified": "2020-06-10T22:11:12.156Z", "contributors": [ - "ne2030", - "ByeongGi" + "ahnzaz" ] }, - "Web/XML": { - "modified": "2019-08-24T00:48:34.627Z", + "Web/Performance/How_browsers_work": { + "modified": "2020-12-09T08:24:42.107Z", "contributors": [ - "oinochoe", - "ExE-Boss" + "doong-jo" ] }, - "Web/XML/XML_Introduction": { - "modified": "2019-05-01T21:53:36.067Z", + "Web/Performance/Critical_rendering_path": { + "modified": "2020-09-28T15:59:43.713Z", "contributors": [ - "ExE-Boss", - "teoli", - "Sebuls" + "Joontae-Kim" ] }, - "Web/XPath": { - "modified": "2019-01-16T14:32:58.218Z", + "Web/Progressive_web_apps/Introduction": { + "modified": "2019-03-18T20:52:13.104Z", "contributors": [ - "ExE-Boss", - "fscholz", - "Gilchris", - "Netaras" + "chrisdavidmills", + "cs09g" ] }, - "Web/XPath/Axes": { - "modified": "2019-03-23T23:41:54.185Z", + "orphaned/Web/Security/Information_Security_Basics": { + "modified": "2019-03-23T22:05:46.762Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "daebum-lee" ] }, - "Web/XPath/Axes/ancestor": { - "modified": "2019-03-23T23:41:51.868Z", + "Web/SVG/Element/rect": { + "modified": "2020-10-15T21:27:38.577Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "alattalatta", + "wbamberg", + "Sebastianz", + "JeongSeongDae" ] }, - "Web/XPath/Axes/ancestor-or-self": { - "modified": "2019-03-23T23:41:53.193Z", + "Web/SVG/Tutorial/Basic_Shapes": { + "modified": "2019-03-23T22:13:37.061Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "irisHanb", + "officialmansu", + "JongChanLee" ] }, - "Web/XPath/Axes/attribute": { - "modified": "2019-01-16T16:16:10.374Z", + "Web/SVG/Tutorial/Getting_Started": { + "modified": "2019-03-23T22:20:15.918Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "Niklane" ] }, - "Web/XPath/Axes/child": { - "modified": "2019-01-16T16:16:18.107Z", + "Web/SVG/Tutorial/Positions": { + "modified": "2019-03-23T22:19:56.793Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "Niklane" ] }, - "Web/XPath/Axes/descendant": { - "modified": "2019-01-16T16:16:11.286Z", + "Web/XSLT/Element/apply-imports": { + "modified": "2019-03-23T23:42:12.617Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Axes/descendant-or-self": { - "modified": "2019-01-16T16:16:11.121Z", + "Web/XSLT/Element/apply-templates": { + "modified": "2019-03-23T23:42:10.628Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Axes/following": { - "modified": "2019-01-16T16:16:17.035Z", + "Web/XSLT/Element/attribute-set": { + "modified": "2019-03-23T23:42:15.702Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Axes/following-sibling": { - "modified": "2019-01-16T16:16:13.970Z", + "Web/XSLT/Element/attribute": { + "modified": "2019-03-23T23:42:16.289Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Axes/namespace": { - "modified": "2019-03-23T23:41:52.884Z", + "Web/XSLT/Element/call-template": { + "modified": "2019-03-23T23:42:16.020Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Axes/parent": { - "modified": "2019-01-16T16:16:10.076Z", + "Web/XSLT/Element/choose": { + "modified": "2019-03-23T23:42:15.795Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Axes/preceding": { - "modified": "2019-01-16T16:16:13.085Z", + "Web/XSLT/Element/comment": { + "modified": "2019-03-23T23:42:16.482Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Axes/preceding-sibling": { - "modified": "2019-01-16T16:16:15.097Z", + "Web/XSLT/Element/copy-of": { + "modified": "2019-03-23T23:42:16.376Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Axes/self": { - "modified": "2019-01-16T16:16:15.156Z", + "Web/XSLT/Element/copy": { + "modified": "2019-03-23T23:42:16.108Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions": { - "modified": "2019-03-23T23:41:49.260Z", + "Web/XSLT/Element/decimal-format": { + "modified": "2019-03-23T23:42:15.926Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", - "mete0r", "Netaras" ] }, - "Web/XPath/Functions/boolean": { - "modified": "2019-03-23T23:41:56.082Z", + "Web/XSLT/Element/fallback": { + "modified": "2019-03-23T23:42:16.195Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/ceiling": { - "modified": "2019-03-23T23:42:00.420Z", + "Web/XSLT/Element/for-each": { + "modified": "2019-03-23T23:42:20.628Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/concat": { - "modified": "2019-03-23T23:41:58.810Z", + "Web/XSLT/Element/if": { + "modified": "2019-03-23T23:42:21.027Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/contains": { - "modified": "2019-03-23T23:41:59.602Z", + "Web/XSLT/Element/import": { + "modified": "2019-03-23T23:42:22.794Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/count": { - "modified": "2019-03-23T23:41:58.125Z", + "Web/XSLT/Element/include": { + "modified": "2019-03-23T23:42:18.173Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/current": { - "modified": "2019-03-23T23:41:57.241Z", + "Web/XSLT/Element/key": { + "modified": "2019-03-23T23:42:17.165Z", "contributors": [ - "ExE-Boss", - "limkukhyun", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/document": { - "modified": "2019-03-23T23:42:02.300Z", + "Web/XSLT/Element/message": { + "modified": "2019-03-23T23:42:22.700Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", - "토끼군", "Netaras" ] }, - "Web/XPath/Functions/element-available": { - "modified": "2019-03-23T23:42:19.012Z", + "Web/XSLT/Element/namespace-alias": { + "modified": "2019-03-23T23:42:17.355Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/false": { - "modified": "2019-03-23T23:42:21.547Z", + "Web/XSLT/Element/number": { + "modified": "2019-03-23T23:42:19.706Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/floor": { - "modified": "2019-03-23T23:42:21.115Z", + "Web/XSLT/Element/otherwise": { + "modified": "2019-03-23T23:42:20.020Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/format-number": { - "modified": "2019-03-23T23:42:15.373Z", + "Web/XSLT/Element/output": { + "modified": "2019-03-23T23:42:18.564Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/function-available": { - "modified": "2019-03-23T23:42:21.463Z", + "Web/XSLT/Element/param": { + "modified": "2019-03-23T23:42:19.539Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/generate-id": { - "modified": "2019-03-23T23:42:13.517Z", + "Web/XSLT/Element/preserve-space": { + "modified": "2019-03-23T23:42:19.442Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/id": { - "modified": "2019-03-23T23:42:21.368Z", + "Web/XSLT/Element/processing-instruction": { + "modified": "2019-03-23T23:42:19.930Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/key": { - "modified": "2019-03-23T23:42:10.516Z", + "Web/XSLT/Element/sort": { + "modified": "2019-03-23T23:42:22.944Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/lang": { - "modified": "2019-03-23T23:42:22.431Z", + "Web/XSLT/Element/strip-space": { + "modified": "2019-03-23T23:42:17.260Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/last": { - "modified": "2019-03-23T23:42:23.803Z", + "Web/XSLT/Element/stylesheet": { + "modified": "2019-03-23T23:42:20.266Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/local-name": { - "modified": "2019-03-23T23:42:19.324Z", + "Web/XSLT/Element/template": { + "modified": "2019-03-23T23:42:17.631Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/name": { - "modified": "2019-03-23T23:42:53.708Z", + "Web/XSLT/Element/text": { + "modified": "2019-03-23T23:42:18.405Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/namespace-uri": { - "modified": "2019-03-23T23:42:22.064Z", + "Web/XSLT/XSLT_JS_interface_in_Gecko": { + "modified": "2019-03-23T23:42:13.222Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", - "Netaras" + "Sebuls" ] }, - "Web/XPath/Functions/normalize-space": { - "modified": "2019-03-23T23:42:24.081Z", + "Web/XSLT/XSLT_JS_interface_in_Gecko/Introduction": { + "modified": "2019-03-23T23:42:13.310Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", - "Netaras" + "Sebuls" ] }, - "Web/XPath/Functions/not": { - "modified": "2019-03-23T23:42:13.806Z", + "Web/XSLT/XSLT_JS_interface_in_Gecko/Setting_Parameters": { + "modified": "2019-03-23T23:42:32.566Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", - "Netaras" + "Sebuls" ] }, - "Web/XPath/Functions/number": { - "modified": "2019-03-23T23:42:20.456Z", + "Web/XSLT/Element/transform": { + "modified": "2019-03-23T23:41:43.222Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/position": { - "modified": "2019-03-23T23:42:19.791Z", + "Web/XSLT/Element/value-of": { + "modified": "2019-03-23T23:42:23.711Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/round": { - "modified": "2019-03-23T23:42:16.877Z", + "Web/XSLT/Element/variable": { + "modified": "2019-03-23T23:42:20.796Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/starts-with": { - "modified": "2019-03-23T23:42:20.127Z", + "Web/XSLT/Element/when": { + "modified": "2019-03-23T23:42:22.611Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/string": { - "modified": "2019-03-23T23:42:22.208Z", + "Web/XSLT/Element/with-param": { + "modified": "2019-03-23T23:42:24.179Z", "contributors": [ - "ExE-Boss", + "chrisdavidmills", "teoli", "Netaras" ] }, - "Web/XPath/Functions/string-length": { - "modified": "2019-03-23T23:42:16.696Z", + "Web/Reference/API": { + "modified": "2019-03-23T23:23:26.342Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "Netaras", + "tamnajio", + "Channy" ] }, - "Web/XPath/Functions/substring": { - "modified": "2019-03-23T23:42:17.746Z", + "Web/Reference": { + "modified": "2019-03-23T23:28:22.951Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "DeadIntegral", + "jarangseo", + "eyekorea", + "LimeClover", + "Channy", + "hyeonseok", + "narae_lee" ] }, - "Web/XPath/Functions/substring-after": { - "modified": "2019-03-23T23:42:23.050Z", + "Web/API/Battery_Status_API": { + "modified": "2020-11-26T10:20:08.081Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "dink95", + "alattalatta", + "oohii" ] }, - "Web/XPath/Functions/substring-before": { - "modified": "2019-03-23T23:42:22.325Z", + "Web/API/Detecting_device_orientation": { + "modified": "2019-03-23T23:27:06.270Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "ingpdw", + "PillarLee", + "junho85" ] }, - "Web/XPath/Functions/sum": { - "modified": "2019-03-23T23:42:16.787Z", + "Web/API/CSS_Object_Model/Managing_screen_orientation": { + "modified": "2019-03-23T23:27:05.980Z", "contributors": [ - "ExE-Boss", - "arrrggghhh", "teoli", - "Netaras" + "junho85" ] }, - "Web/XPath/Functions/system-property": { - "modified": "2019-03-23T23:42:12.729Z", + "Web/API/Network_Information_API": { + "modified": "2019-03-23T23:26:43.220Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "hyeonseok" ] }, - "Web/XPath/Functions/translate": { - "modified": "2019-03-23T23:42:23.927Z", + "Web/API/Proximity_Events": { + "modified": "2019-03-23T23:26:46.443Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "yunji_koh" ] }, - "Web/XPath/Functions/true": { - "modified": "2019-03-23T23:42:14.932Z", + "Web/API/Geolocation_API/Using_the_Geolocation_API": { + "modified": "2020-04-03T04:36:16.235Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "alattalatta", + "cs09g", + "chooco13", + "hallower", + "mmnmm", + "xcoda" ] }, - "Web/XPath/Functions/unparsed-entity-url": { - "modified": "2019-03-23T23:42:10.421Z", + "Web/API/Ambient_Light_Events": { + "modified": "2020-10-15T21:24:18.175Z", "contributors": [ - "ExE-Boss", - "teoli", - "Netaras" + "alattalatta", + "hyeonseok" ] }, - "Web/XSLT": { - "modified": "2019-03-23T23:44:24.859Z", + "Web/API/Notifications_API/Using_the_Notifications_API": { + "modified": "2020-03-08T01:03:17.759Z", "contributors": [ - "chrisdavidmills", - "Verruckt", - "Sebuls", - "Netaras" + "feeva", + "oohii", + "junho85" ] }, - "Web/XSLT/Element": { - "modified": "2019-03-23T23:41:46.436Z", + "Web/API/WebSockets_API": { + "modified": "2019-03-23T23:30:25.980Z", "contributors": [ - "ExE-Boss", - "chrisdavidmills", - "teoli", - "Netaras" + "d-wook", + "Geun-Hyung_Kim", + "pjc0247", + "ELem" ] }, - "Web/XSLT/Element/element": { - "modified": "2019-03-23T23:42:14.305Z", + "Web/API/WebSockets_API/Writing_WebSocket_client_applications": { + "modified": "2020-11-11T22:09:43.354Z", "contributors": [ - "ExE-Boss", - "chrisdavidmills", - "teoli", - "Netaras" + "CJ_Lee", + "VBChunguk", + "michellehuh", + "pjc0247", + "rutesun" ] }, - "Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko": { - "modified": "2019-03-23T23:42:13.222Z", + "Web/API/WebSockets_API/Writing_WebSocket_servers": { + "modified": "2020-11-26T05:53:45.381Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Sebuls" + "gdev219", + "soon0698", + "lpsgm63", + "zerunus", + "SQLGate", + "green-autumn", + "pjc0247" ] }, - "Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Introduction": { - "modified": "2019-03-23T23:42:13.310Z", + "orphaned/Windows_and_menus_in_XULRunner": { + "modified": "2019-01-16T15:50:48.799Z", "contributors": [ - "chrisdavidmills", + "Channy" + ] + }, + "Glossary/XHTML": { + "modified": "2019-12-26T10:45:10.722Z", + "contributors": [ + "04SeoHyun", + "jeonnoej", "teoli", "Sebuls" ] }, - "Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters": { - "modified": "2019-03-23T23:42:32.566Z", + "Web/API/XSLTProcessor/Basic_Example": { + "modified": "2019-01-16T16:14:48.906Z", "contributors": [ - "chrisdavidmills", - "teoli", "Sebuls" ] }, - "Web/XSLT/Transforming_XML_with_XSLT": { - "modified": "2019-01-16T16:15:56.433Z", + "Web/API/XSLTProcessor/Browser_Differences": { + "modified": "2019-01-16T16:15:11.615Z", "contributors": [ - "chrisdavidmills", - "Netaras" + "Sebuls" ] }, - "Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference": { - "modified": "2019-03-23T23:41:43.827Z", + "Web/API/XSLTProcessor/Generating_HTML": { + "modified": "2019-01-16T16:14:51.789Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "Sebuls" ] }, - "Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations": { - "modified": "2019-11-21T00:57:37.403Z", + "Web/API/XSLTProcessor/Introduction": { + "modified": "2019-01-16T16:14:50.568Z", "contributors": [ - "wbamberg", - "chrisdavidmills", - "teoli", - "Netaras" + "Sebuls" ] }, - "Web/XSLT/apply-imports": { - "modified": "2019-03-23T23:42:12.617Z", + "Web/API/XSLTProcessor/Resources": { + "modified": "2019-03-23T23:42:20.360Z", "contributors": [ - "chrisdavidmills", "teoli", - "Netaras" + "Sebuls" ] }, - "Web/XSLT/apply-templates": { - "modified": "2019-03-23T23:42:10.628Z", + "Mozilla/Firefox/Releases/3.6": { + "modified": "2019-12-13T20:33:13.788Z", "contributors": [ - "chrisdavidmills", + "wbamberg", + "SphinxKnight", "teoli", - "Netaras" + "kladess" ] }, - "Web/XSLT/attribute": { - "modified": "2019-03-23T23:42:16.289Z", + "orphaned/지역의_코드를_씁니다.": { + "modified": "2019-01-16T14:36:32.523Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "wkdqudso" ] }, - "Web/XSLT/attribute-set": { - "modified": "2019-03-23T23:42:15.702Z", + "orphaned/확장기능_개발_환경_구축": { + "modified": "2019-03-24T00:02:16.151Z", "contributors": [ - "chrisdavidmills", "teoli", - "Netaras" + "kladess" ] }, - "Web/XSLT/call-template": { - "modified": "2019-03-23T23:42:16.020Z", + "conflicting/Mozilla/Add-ons": { + "modified": "2019-03-24T00:04:35.955Z", "contributors": [ - "chrisdavidmills", "teoli", + "ethertank", + "Gilchris", + "fscholz", + "Matthew,Lee", + "Amujung", + "Idodream", + "Jeongsw", "Netaras" ] }, - "Web/XSLT/choose": { - "modified": "2019-03-23T23:42:15.795Z", + "conflicting/Learn/CSS/CSS_layout/Introduction": { + "modified": "2020-07-16T22:25:40.836Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "yooonmi" ] }, - "Web/XSLT/comment": { - "modified": "2019-03-23T23:42:16.482Z", + "conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting": { + "modified": "2020-07-16T22:22:37.951Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "Kaben" ] }, - "Web/XSLT/copy": { - "modified": "2019-03-23T23:42:16.108Z", + "conflicting/Learn/Common_questions": { + "modified": "2020-07-16T22:22:13.682Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "KwanHong_Lee66" ] }, - "Web/XSLT/copy-of": { - "modified": "2019-03-23T23:42:16.376Z", + "conflicting/Learn": { + "modified": "2020-07-16T22:22:13.258Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "Netaras", + "KwanHong_Lee66" ] }, - "Web/XSLT/decimal-format": { - "modified": "2019-03-23T23:42:15.926Z", + "conflicting/Learn/Common_questions_139278709439023a85d849385412271e": { + "modified": "2020-07-16T22:22:13.488Z", "contributors": [ - "chrisdavidmills", + "zziuni", + "Netaras", "teoli", - "Netaras" + "cs09g" ] }, - "Web/XSLT/fallback": { - "modified": "2019-03-23T23:42:16.195Z", + "conflicting/MDN/Tools": { + "modified": "2019-01-16T20:50:22.654Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "wbamberg", + "andrewJYjang" ] }, - "Web/XSLT/for-each": { - "modified": "2019-03-23T23:42:20.628Z", + "Plugins/Guide/Scripting_plugins": { + "modified": "2019-01-16T15:11:14.478Z", "contributors": [ - "chrisdavidmills", "teoli", - "Netaras" + "Anonymous" ] }, - "Web/XSLT/if": { - "modified": "2019-03-23T23:42:21.027Z", + "conflicting/Web/XPath/Introduction_to_using_XPath_in_JavaScript": { + "modified": "2019-01-16T14:19:09.939Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "kmaglione", + "Gilchris" ] }, - "Web/XSLT/import": { - "modified": "2019-03-23T23:42:22.794Z", + "conflicting/Web/Guide": { + "modified": "2019-03-23T23:41:47.329Z", "contributors": [ - "chrisdavidmills", "teoli", - "Netaras" + "Jiyoon", + "Unixcruiser", + "Netaras", + "Sebuls" ] }, - "Web/XSLT/include": { - "modified": "2019-03-23T23:42:18.173Z", + "Web/API/DocumentOrShadowRoot/getSelection": { + "modified": "2019-03-23T22:51:22.015Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "x86kernel" ] }, - "Web/XSLT/key": { - "modified": "2019-03-23T23:42:17.165Z", + "Web/API/HTMLElement/accessKey": { + "modified": "2020-10-15T22:14:28.158Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "cs09g" ] }, - "Web/XSLT/message": { - "modified": "2019-03-23T23:42:22.700Z", + "Web/API/Document/createEvent": { + "modified": "2019-03-23T22:23:08.290Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "agakt" ] }, - "Web/XSLT/namespace-alias": { - "modified": "2019-03-23T23:42:17.355Z", + "conflicting/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL": { + "modified": "2019-03-23T22:54:05.275Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "fscholz", + "hanmomhanda" ] }, - "Web/XSLT/number": { - "modified": "2019-03-23T23:42:19.706Z", + "conflicting/Web/CSS/@viewport": { + "modified": "2020-10-15T21:46:24.032Z", "contributors": [ - "chrisdavidmills", - "teoli", + "alattalatta", "Netaras" ] }, - "Web/XSLT/otherwise": { - "modified": "2019-03-23T23:42:20.020Z", + "conflicting/Web/CSS/@viewport_a33ee59ffd8336ffb3336900dea02e9f": { + "modified": "2020-10-15T22:22:51.969Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "chayeoi", + "SphinxKnight" ] }, - "Web/XSLT/output": { - "modified": "2019-03-23T23:42:18.564Z", + "conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518": { + "modified": "2020-10-15T21:46:22.320Z", "contributors": [ - "chrisdavidmills", - "teoli", + "alattalatta", "Netaras" ] }, - "Web/XSLT/param": { - "modified": "2019-03-23T23:42:19.539Z", + "conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds": { + "modified": "2019-03-23T23:37:37.611Z", "contributors": [ - "chrisdavidmills", "teoli", - "Netaras" + "Inyoung", + "jaemin_jo" ] }, - "Web/XSLT/preserve-space": { - "modified": "2019-03-23T23:42:19.442Z", + "Learn/JavaScript/Client-side_web_APIs/Manipulating_documents": { + "modified": "2019-03-23T23:41:58.615Z", "contributors": [ - "chrisdavidmills", "teoli", - "Netaras" + "Ioseph" ] }, - "Web/XSLT/processing-instruction": { - "modified": "2019-03-23T23:42:19.930Z", + "Web/CSS/url()": { + "modified": "2020-10-15T22:10:55.121Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "alattalatta" ] }, - "Web/XSLT/sort": { - "modified": "2019-03-23T23:42:22.944Z", + "conflicting/Learn/CSS/Styling_text/Styling_lists": { + "modified": "2019-03-23T23:33:11.239Z", "contributors": [ - "chrisdavidmills", "teoli", - "Netaras" + "SpikeYou" ] }, - "Web/XSLT/strip-space": { - "modified": "2019-03-23T23:42:17.260Z", + "conflicting/Learn/CSS/CSS_layout": { + "modified": "2019-03-23T23:33:01.592Z", "contributors": [ - "chrisdavidmills", + "yooonmi", "teoli", - "Netaras" + "SpikeYou" ] }, - "Web/XSLT/stylesheet": { - "modified": "2019-03-23T23:42:20.266Z", + "conflicting/Learn/CSS/Building_blocks": { + "modified": "2019-03-23T23:33:01.323Z", "contributors": [ - "chrisdavidmills", + "yooonmi", "teoli", - "Netaras" + "SpikeYou" ] }, - "Web/XSLT/template": { - "modified": "2019-03-23T23:42:17.631Z", + "conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance": { + "modified": "2019-03-23T23:33:16.790Z", "contributors": [ - "chrisdavidmills", + "ElleXD", "teoli", - "Netaras" + "SpikeYou" ] }, - "Web/XSLT/text": { - "modified": "2019-03-23T23:42:18.405Z", + "conflicting/Learn/CSS/Building_blocks/Styling_tables": { + "modified": "2019-03-23T23:33:00.475Z", "contributors": [ - "chrisdavidmills", "teoli", - "Netaras" + "SpikeYou" ] }, - "Web/XSLT/transform": { - "modified": "2019-03-23T23:41:43.222Z", + "conflicting/Learn/CSS/Styling_text/Fundamentals": { + "modified": "2019-03-23T23:33:09.659Z", "contributors": [ - "chrisdavidmills", + "yooonmi", "teoli", - "Netaras" + "SpikeYou" ] }, - "Web/XSLT/value-of": { - "modified": "2019-03-23T23:42:23.711Z", + "Web/API/HTMLMediaElement/abort_event": { + "modified": "2019-04-30T14:12:00.284Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "wbamberg", + "guyeol" ] }, - "Web/XSLT/variable": { - "modified": "2019-03-23T23:42:20.796Z", + "conflicting/Web/API/Document_Object_Model": { + "modified": "2019-03-23T23:26:56.400Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Netaras" + "Sheppy" ] }, - "Web/XSLT/when": { - "modified": "2019-03-23T23:42:22.611Z", + "conflicting/Web/JavaScript/Guide/Grammar_and_types": { + "modified": "2019-01-16T16:11:22.319Z", "contributors": [ - "chrisdavidmills", "teoli", - "Netaras" + "Wafe" ] }, - "Web/XSLT/with-param": { - "modified": "2019-03-23T23:42:24.179Z", + "conflicting/Web/JavaScript/Guide/Grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece": { + "modified": "2019-03-23T23:43:37.505Z", "contributors": [ - "chrisdavidmills", "teoli", - "Netaras" + "panda", + "Wafe" ] }, - "Web/참조": { - "modified": "2019-03-23T23:28:22.951Z", + "conflicting/Web/JavaScript/Guide/Expressions_and_Operators": { + "modified": "2019-01-16T16:11:11.253Z", "contributors": [ - "DeadIntegral", - "jarangseo", - "eyekorea", - "LimeClover", - "Channy", - "hyeonseok", - "narae_lee" + "teoli", + "Wafe" ] }, - "Web/참조/API": { - "modified": "2019-03-23T23:23:26.342Z", + "conflicting/Web/JavaScript/Guide/Expressions_and_Operators_da1ab2546bd5e84ac81f952de51d5d40": { + "modified": "2019-01-16T16:11:13.405Z", "contributors": [ - "Netaras", - "tamnajio", - "Channy" + "teoli", + "Wafe" ] }, - "WebAPI": { - "modified": "2019-03-23T23:30:26.179Z", + "conflicting/Web/JavaScript/Guide/Expressions_and_Operators_2285d0ecb7e20b6a4ac3cb462794e916": { + "modified": "2019-01-16T16:11:11.411Z", "contributors": [ - "wbamberg", - "fscholz", - "oohii", - "hyeonseok", - "PillarLee", - "junho85", - "francisco.jordano" + "teoli", + "Wafe" ] }, - "WebAPI/Battery_Status": { - "modified": "2020-11-26T10:20:08.081Z", + "conflicting/Web/JavaScript/Guide/Expressions_and_Operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915": { + "modified": "2019-01-16T16:11:17.876Z", "contributors": [ - "dink95", - "alattalatta", - "oohii" + "teoli", + "Wafe" ] }, - "WebAPI/Detecting_device_orientation": { - "modified": "2019-03-23T23:27:06.270Z", - "contributors": [ - "ingpdw", - "PillarLee", - "junho85" + "conflicting/Web/JavaScript/Guide/Expressions_and_Operators_337b8dbe817777e70cc8002308284a74": { + "modified": "2019-01-16T16:11:17.176Z", + "contributors": [ + "teoli", + "Wafe" ] }, - "WebAPI/Managing_screen_orientation": { - "modified": "2019-03-23T23:27:05.980Z", + "conflicting/Web/JavaScript/Guide": { + "modified": "2019-01-16T16:10:38.273Z", "contributors": [ "teoli", - "junho85" + "Wafe" ] }, - "WebAPI/Network_Information": { - "modified": "2019-03-23T23:26:43.220Z", + "conflicting/Web/JavaScript/Guide/Grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f": { + "modified": "2019-01-16T16:11:27.423Z", "contributors": [ - "hyeonseok" + "teoli", + "Wafe" ] }, - "WebAPI/Proximity": { - "modified": "2019-03-23T23:26:46.443Z", + "conflicting/Web/JavaScript/Guide/Grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3": { + "modified": "2019-01-16T16:11:23.067Z", "contributors": [ - "yunji_koh" + "teoli", + "Wafe" ] }, - "WebAPI/Using_Light_Events": { - "modified": "2020-10-15T21:24:18.175Z", + "conflicting/Web/JavaScript/Guide/Grammar_and_types_3f037ba1fa5775d153289787ec51042f": { + "modified": "2019-01-16T16:11:22.455Z", "contributors": [ - "alattalatta", - "hyeonseok" + "teoli", + "Wafe" ] }, - "WebAPI/Using_Web_Notifications": { - "modified": "2020-03-08T01:03:17.759Z", + "conflicting/Learn/JavaScript/Objects": { + "modified": "2019-03-23T23:29:46.029Z", "contributors": [ - "feeva", - "oohii", - "junho85" + "Parcovia", + "JayK95", + "rinuel", + "teoli", + "JaehaAhn" ] }, - "WebAPI/Using_geolocation": { - "modified": "2020-04-03T04:36:16.235Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Boolean": { + "modified": "2020-10-15T21:43:28.882Z", "contributors": [ "alattalatta", - "cs09g", - "chooco13", - "hallower", - "mmnmm", - "xcoda" + "noritersand" ] }, - "WebAssembly": { - "modified": "2020-10-15T21:52:54.017Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Date": { + "modified": "2020-10-15T21:34:44.080Z", "contributors": [ - "limkukhyun", - "lastmirage", - "kesuskim", - "0xABCDEF", - "lukewagner" + "alattalatta", + "Cho.Eun", + "ByungChangCha", + "teoli" ] }, - "WebAssembly/C_to_wasm": { - "modified": "2020-10-29T08:46:10.367Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/InternalError": { + "modified": "2019-03-23T22:28:33.047Z", "contributors": [ - "limkukhyun", - "jung-han", - "04SeoHyun", - "nakyong" + "teoli", + "magnoliaa" ] }, - "WebAssembly/Caching_modules": { - "modified": "2019-03-18T21:26:57.835Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat": { + "modified": "2020-10-15T22:22:06.369Z", "contributors": [ - "limkukhyun" + "fscholz", + "alattalatta" ] }, - "WebAssembly/Concepts": { - "modified": "2020-12-08T12:12:26.855Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat": { + "modified": "2020-10-15T22:21:51.361Z", "contributors": [ - "dsma73", - "jung-han", - "kyhsa93", - "limkukhyun", - "Jungbin-Kim", - "mingrammer", - "kesuskim", - "0xABCDEF" + "fscholz", + "alattalatta" ] }, - "WebAssembly/Exported_functions": { - "modified": "2019-03-18T21:27:58.372Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Map": { + "modified": "2020-10-15T21:55:20.178Z", "contributors": [ - "limkukhyun" + "alattalatta", + "echo304" ] }, - "WebAssembly/Loading_and_running": { - "modified": "2019-03-23T22:11:38.016Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Number": { + "modified": "2020-10-15T22:10:14.861Z", "contributors": [ - "limkukhyun", - "kesuskim" + "alattalatta", + "DeadIntegral" ] }, - "WebAssembly/Rust_to_wasm": { - "modified": "2020-06-15T19:31:56.028Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Object": { + "modified": "2020-10-15T21:34:43.084Z", "contributors": [ - "fantajeon", - "04SeoHyun", - "piutranq", - "limkukhyun" + "zero0yes", + "noritersand", + "alattalatta", + "Parcovia", + "Netaras", + "DavidSunny", + "teoli" ] }, - "WebAssembly/Text_format_to_wasm": { - "modified": "2019-03-18T21:28:27.225Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Promise": { + "modified": "2020-10-15T21:47:20.685Z", "contributors": [ - "limkukhyun" + "alattalatta", + "fscholz", + "Netaras" ] }, - "WebAssembly/Understanding_the_text_format": { - "modified": "2019-03-23T22:04:19.997Z", + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy": { + "modified": "2020-10-15T21:55:35.789Z", "contributors": [ - "limkukhyun", - "a1p4ca", - "composite" + "alattalatta", + "SphinxKnight" ] }, - "WebAssembly/Using_the_JavaScript_API": { - "modified": "2019-12-26T10:33:44.717Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Set": { + "modified": "2020-10-15T21:48:56.464Z", "contributors": [ - "04SeoHyun", - "limkukhyun" + "alattalatta", + "Netaras" ] }, - "WebAssembly/existing_C_to_wasm": { - "modified": "2019-03-18T21:28:25.734Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer": { + "modified": "2020-10-15T22:15:02.439Z", "contributors": [ - "limkukhyun" + "cs09g" ] }, - "WebSockets": { - "modified": "2019-03-23T23:30:25.980Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/String": { + "modified": "2019-09-19T03:24:36.691Z", "contributors": [ - "d-wook", - "Geun-Hyung_Kim", - "pjc0247", - "ELem" + "dbs6339", + "pusanbear", + "teoli", + "MoGi" ] }, - "WebSockets/Writing_WebSocket_client_applications": { - "modified": "2020-11-11T22:09:43.354Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError": { + "modified": "2019-03-23T22:28:47.337Z", "contributors": [ - "CJ_Lee", - "VBChunguk", - "michellehuh", - "pjc0247", - "rutesun" + "magnoliaa" ] }, - "WebSockets/Writing_WebSocket_servers": { - "modified": "2020-11-26T05:53:45.381Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/TypedArray": { + "modified": "2019-03-23T22:30:03.771Z", "contributors": [ - "gdev219", - "soon0698", - "lpsgm63", - "zerunus", - "SQLGate", - "green-autumn", - "pjc0247" + "Netaras" ] }, - "Web_Development": { - "modified": "2019-03-23T23:41:47.329Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap": { + "modified": "2019-03-23T22:27:54.259Z", "contributors": [ - "teoli", - "Jiyoon", - "Unixcruiser", - "Netaras", - "Sebuls" + "Netaras" ] }, - "Windows_and_menus_in_XULRunner": { - "modified": "2019-01-16T15:50:48.799Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/WeakSet": { + "modified": "2019-03-23T22:28:07.290Z", "contributors": [ - "Channy" + "Netaras" ] }, - "XHTML": { - "modified": "2019-12-26T10:45:10.722Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global": { + "modified": "2020-10-15T22:08:10.181Z", "contributors": [ - "04SeoHyun", - "jeonnoej", - "teoli", - "Sebuls" + "limkukhyun" ] }, - "XSLT_in_Gecko": { - "modified": "2019-01-16T16:14:51.504Z", + "conflicting/Web/JavaScript/Reference/Operators": { + "modified": "2020-10-15T21:50:08.581Z", "contributors": [ - "Sebuls" + "alattalatta", + "chimimode", + "fscholz", + "wbamberg", + "KSH-code", + "siwoolee", + "ChanghwaLee", + "imskojs" ] }, - "XSLT_in_Gecko/Basic_Example": { - "modified": "2019-01-16T16:14:48.906Z", + "conflicting/Web/JavaScript/Reference/Operators_8d54701de06af40a7c984517cbe87b3e": { + "modified": "2020-10-15T21:50:31.036Z", "contributors": [ - "Sebuls" + "alattalatta", + "wbamberg", + "NessunKim", + "daehyoung" ] }, - "XSLT_in_Gecko/Browser_Differences": { - "modified": "2019-01-16T16:15:11.615Z", + "conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560": { + "modified": "2020-10-15T21:25:50.021Z", "contributors": [ - "Sebuls" + "alattalatta", + "jghg2724", + "epicsaga", + "daewon", + "teoli", + "Cho.Eun" ] }, - "XSLT_in_Gecko/Generating_HTML": { - "modified": "2019-01-16T16:14:51.789Z", + "conflicting/Web/JavaScript/Reference/Operators_310dc67549939233c3d18a8fa2cdbb23": { + "modified": "2020-10-15T21:46:03.880Z", "contributors": [ - "Sebuls" + "alattalatta", + "Parcovia", + "ohsory1324", + "LEGOLLAS" ] }, - "XSLT_in_Gecko/Introduction": { - "modified": "2019-01-16T16:14:50.568Z", + "conflicting/Web/JavaScript/Reference/Operators_13aeb53e31f9cec454ca631cb162449f": { + "modified": "2020-10-15T21:47:31.347Z", "contributors": [ - "Sebuls" + "alattalatta", + "atomDevelop", + "r2fresh", + "Parcovia", + "gnujoow", + "helloheesu", + "imskojs" ] }, - "XSLT_in_Gecko/Resources": { - "modified": "2019-03-23T23:42:20.360Z", + "conflicting/Web/JavaScript/Reference/Statements/switch": { + "modified": "2020-10-15T22:07:33.273Z", "contributors": [ - "teoli", - "Sebuls" + "alattalatta", + "SSJ-unclear" ] }, - "개발자를_위한_Firefox_3.6": { - "modified": "2019-12-13T20:33:13.788Z", + "conflicting/Learn/Getting_started_with_the_web/JavaScript_basics": { + "modified": "2019-03-23T23:14:43.699Z", "contributors": [ - "wbamberg", - "SphinxKnight", - "teoli", - "kladess" + "eunsuklee", + "teoli" ] }, - "지역의_코드를_씁니다.": { - "modified": "2019-01-16T14:36:32.523Z", + "conflicting/Web/API": { + "modified": "2019-03-23T23:30:26.179Z", "contributors": [ - "wkdqudso" + "wbamberg", + "fscholz", + "oohii", + "hyeonseok", + "PillarLee", + "junho85", + "francisco.jordano" ] }, - "확장기능_개발_환경_구축": { - "modified": "2019-03-24T00:02:16.151Z", + "Web/API/XSLTProcessor": { + "modified": "2019-01-16T16:14:51.504Z", "contributors": [ - "teoli", - "kladess" + "Sebuls" ] } } \ No newline at end of file diff --git a/files/ko/conflicting/learn/common_questions/index.html b/files/ko/conflicting/learn/common_questions/index.html index 3752c49274..b31ee26f0d 100644 --- a/files/ko/conflicting/learn/common_questions/index.html +++ b/files/ko/conflicting/learn/common_questions/index.html @@ -1,8 +1,9 @@ --- title: Infrastructure -slug: Learn/Infrastructure +slug: conflicting/Learn/Common_questions translation_of: Learn/Common_questions translation_of_original: Learn/Infrastructure +original_slug: Learn/Infrastructure ---

이 능력은 인터넷 기술 스택에 대해  잘 이해할 수 있도록 해줍니다. 알아야 할 것들을 작고, 세부적 기술들로 나누었습니다:

diff --git a/files/ko/conflicting/learn/common_questions_139278709439023a85d849385412271e/index.html b/files/ko/conflicting/learn/common_questions_139278709439023a85d849385412271e/index.html index 1f04d35fe1..cfebc2d59c 100644 --- a/files/ko/conflicting/learn/common_questions_139278709439023a85d849385412271e/index.html +++ b/files/ko/conflicting/learn/common_questions_139278709439023a85d849385412271e/index.html @@ -1,11 +1,12 @@ --- title: Web 기술 -slug: Learn/Web_기술 +slug: conflicting/Learn/Common_questions_139278709439023a85d849385412271e tags: - Beginner - WebMechanics translation_of: Learn/Common_questions translation_of_original: Learn/Web_Mechanics +original_slug: Learn/Web_기술 ---

이것은 여러분이 웹 생태계를 이해할 수 있도록 충분히 설명해줍니다. 저희는 여러분이 필요한 정보를 작고, 세분화된 기술로 나누었습니다.

diff --git a/files/ko/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ko/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html index 5c58432ad2..73e1decd09 100644 --- a/files/ko/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html +++ b/files/ko/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -1,8 +1,9 @@ --- title: 종속과 상속 -slug: Web/CSS/시작하기/종속과_상속 +slug: conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +original_slug: Web/CSS/시작하기/종속과_상속 ---

{{ CSSTutorialTOC() }}

diff --git a/files/ko/conflicting/learn/css/building_blocks/index.html b/files/ko/conflicting/learn/css/building_blocks/index.html index cc6b499241..04c02d0efe 100644 --- a/files/ko/conflicting/learn/css/building_blocks/index.html +++ b/files/ko/conflicting/learn/css/building_blocks/index.html @@ -1,8 +1,9 @@ --- title: 상자 -slug: Web/CSS/시작하기/상자 +slug: conflicting/Learn/CSS/Building_blocks translation_of: Learn/CSS/Building_blocks translation_of_original: Web/Guide/CSS/Getting_started/Boxes +original_slug: Web/CSS/시작하기/상자 ---

{{ CSSTutorialTOC() }}

diff --git a/files/ko/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/ko/conflicting/learn/css/building_blocks/styling_tables/index.html index 17a57d49e9..68fe28a5f0 100644 --- a/files/ko/conflicting/learn/css/building_blocks/styling_tables/index.html +++ b/files/ko/conflicting/learn/css/building_blocks/styling_tables/index.html @@ -1,8 +1,9 @@ --- title: 테이블 -slug: Web/CSS/시작하기/테이블 +slug: conflicting/Learn/CSS/Building_blocks/Styling_tables translation_of: Learn/CSS/Building_blocks/Styling_tables translation_of_original: Web/Guide/CSS/Getting_started/Tables +original_slug: Web/CSS/시작하기/테이블 ---

{{ CSSTutorialTOC() }}

diff --git a/files/ko/conflicting/learn/css/css_layout/index.html b/files/ko/conflicting/learn/css/css_layout/index.html index 86ea912bb7..1b3c4a73ca 100644 --- a/files/ko/conflicting/learn/css/css_layout/index.html +++ b/files/ko/conflicting/learn/css/css_layout/index.html @@ -1,8 +1,9 @@ --- title: 배치 -slug: Web/CSS/시작하기/배치 +slug: conflicting/Learn/CSS/CSS_layout translation_of: Learn/CSS/CSS_layout translation_of_original: Web/Guide/CSS/Getting_started/Layout +original_slug: Web/CSS/시작하기/배치 ---

{{ CSSTutorialTOC() }}

diff --git a/files/ko/conflicting/learn/css/css_layout/introduction/index.html b/files/ko/conflicting/learn/css/css_layout/introduction/index.html index 5437902bf1..d8d0dc9b06 100644 --- a/files/ko/conflicting/learn/css/css_layout/introduction/index.html +++ b/files/ko/conflicting/learn/css/css_layout/introduction/index.html @@ -1,8 +1,9 @@ --- title: Introduction to CSS Layout -slug: Learn/CSS/Basics/Layout +slug: conflicting/Learn/CSS/CSS_layout/Introduction translation_of: Learn/CSS/CSS_layout/Introduction translation_of_original: Learn/CSS/Basics/Layout +original_slug: Learn/CSS/Basics/Layout ---

{{PreviousNext("Learn/CSS/Basics/Box_model","Learn/CSS/Howto/style_text")}}

diff --git a/files/ko/conflicting/learn/css/styling_text/fundamentals/index.html b/files/ko/conflicting/learn/css/styling_text/fundamentals/index.html index 8866132472..ac90109fc1 100644 --- a/files/ko/conflicting/learn/css/styling_text/fundamentals/index.html +++ b/files/ko/conflicting/learn/css/styling_text/fundamentals/index.html @@ -1,8 +1,9 @@ --- title: 텍스트 스타일 -slug: Web/CSS/시작하기/텍스트_스타일 +slug: conflicting/Learn/CSS/Styling_text/Fundamentals translation_of: Learn/CSS/Styling_text/Fundamentals translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +original_slug: Web/CSS/시작하기/텍스트_스타일 ---

{{ CSSTutorialTOC() }}

diff --git a/files/ko/conflicting/learn/css/styling_text/styling_lists/index.html b/files/ko/conflicting/learn/css/styling_text/styling_lists/index.html index 0e0e215006..b368adde4e 100644 --- a/files/ko/conflicting/learn/css/styling_text/styling_lists/index.html +++ b/files/ko/conflicting/learn/css/styling_text/styling_lists/index.html @@ -1,8 +1,9 @@ --- title: 리스트 -slug: Web/CSS/시작하기/리스트 +slug: conflicting/Learn/CSS/Styling_text/Styling_lists translation_of: Learn/CSS/Styling_text/Styling_lists translation_of_original: Web/Guide/CSS/Getting_started/Lists +original_slug: Web/CSS/시작하기/리스트 ---

{{ CSSTutorialTOC() }}

diff --git a/files/ko/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ko/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html index 4eeb42cae2..54ecdbf832 100644 --- a/files/ko/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html +++ b/files/ko/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html @@ -1,8 +1,9 @@ --- title: 시작하기 (자바스크립트 튜토리얼) -slug: Web/JavaScript/시작하기 +slug: conflicting/Learn/Getting_started_with_the_web/JavaScript_basics translation_of: Learn/Getting_started_with_the_web/JavaScript_basics translation_of_original: Web/JavaScript/Getting_Started +original_slug: Web/JavaScript/시작하기 ---

왜 자바스크립트인가?

자바스크립트는 종종 오해할 수 있는 강력하고 복잡한 컴퓨터 언어이다. 사용자가 쉽게 데이터를 입력하고 결과를 볼 수 있게 어플리케이션을 빠르게 개발 할 수 있다.

diff --git a/files/ko/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ko/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html index 8a1d0cb625..e67b78e192 100644 --- a/files/ko/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html +++ b/files/ko/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -1,11 +1,12 @@ --- title: 약자 표시 및 이해시키는 방법 -slug: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable +slug: conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting tags: - HTML - 초보 translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations translation_of_original: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable +original_slug: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable ---

HTML은 독자가 이해할 수 있도록 해주는 약자를 표시해주는 단순하고 직관적인 방법을 제공합니다.

diff --git a/files/ko/conflicting/learn/index.html b/files/ko/conflicting/learn/index.html index 582bd0d275..b3fa083bab 100644 --- a/files/ko/conflicting/learn/index.html +++ b/files/ko/conflicting/learn/index.html @@ -1,10 +1,11 @@ --- title: 스킬 -slug: Learn/Skills +slug: conflicting/Learn tags: - Index translation_of: Learn translation_of_original: Learn/Skills +original_slug: Learn/Skills ---

여러분은 웹에 대하여 학습할 때 수 많은 스킬들을 선택해야 합니다. WebMaker는 초심자들이 기초를 학습하는 로드맵인 Web Literacy Map이라는 기본 스킬들의 목록을 정의합니다.  여기 MDN에서는 웹사이트를 제작하는데 필요한 역량에 초점을 맞추고, 모든 스킬 레벨에 대한 학습을 제공합니다:

diff --git a/files/ko/conflicting/learn/javascript/objects/index.html b/files/ko/conflicting/learn/javascript/objects/index.html index 03015b1407..c0f51fe532 100644 --- a/files/ko/conflicting/learn/javascript/objects/index.html +++ b/files/ko/conflicting/learn/javascript/objects/index.html @@ -1,8 +1,9 @@ --- title: 객체지향 자바스크립트 개요 -slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +slug: conflicting/Learn/JavaScript/Objects translation_of: Learn/JavaScript/Objects translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +original_slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---

비록 다른 객체지향적인 언어들과의 차이점에 대한 논쟁들이 있긴 하지만, JavaScript는 강력한 객체지향 프로그래밍 능력들을 지니고 있다.

diff --git a/files/ko/conflicting/mdn/tools/index.html b/files/ko/conflicting/mdn/tools/index.html index eec139e803..0de69f5c0d 100644 --- a/files/ko/conflicting/mdn/tools/index.html +++ b/files/ko/conflicting/mdn/tools/index.html @@ -1,11 +1,12 @@ --- title: MDN 사용자 가이드 -slug: MDN/User_guide +slug: conflicting/MDN/Tools tags: - 모질라 개발자 네트워크 - 사용자 가이드 translation_of: MDN/Tools translation_of_original: MDN/User_guide +original_slug: MDN/User_guide ---
{{MDNSidebar}}

모질라 개발자 네트워크 (이하 MDN) 사이트는, (파이어폭스 및 파이어폭스 운영체제 개발자 뿐 아니라) 웹 개발자를 위한 문서 및 샘플 코드를 찾고, 읽고, 기여하는 고급 시스템입니다. MDN 사용자 가이드는 필요한 문서를 찾도록 MDN을 이용하는 방법을, 원한다면 좀 더 좋은, 더 광범위하고, 더 완전한 자료를 만들도록 돕는 방법을 열거하는 항목을 제공합니다.

diff --git a/files/ko/conflicting/mozilla/add-ons/index.html b/files/ko/conflicting/mozilla/add-ons/index.html index 133e0f8341..6c717110d5 100644 --- a/files/ko/conflicting/mozilla/add-ons/index.html +++ b/files/ko/conflicting/mozilla/add-ons/index.html @@ -1,11 +1,12 @@ --- title: Building an Extension -slug: Building_an_Extension +slug: conflicting/Mozilla/Add-ons tags: - Add-ons - Extensions translation_of: Mozilla/Add-ons translation_of_original: Building_an_Extension +original_slug: Building_an_Extension ---

시작하기

확장기능 마법사를 이용해서 웹으로 간단한 확장기능을 만들 수 있습니다.

diff --git a/files/ko/conflicting/web/api/document_object_model/index.html b/files/ko/conflicting/web/api/document_object_model/index.html index fc26bc0bee..b9d5d2fc30 100644 --- a/files/ko/conflicting/web/api/document_object_model/index.html +++ b/files/ko/conflicting/web/api/document_object_model/index.html @@ -1,6 +1,6 @@ --- title: DOM developer guide -slug: Web/Guide/DOM +slug: conflicting/Web/API/Document_Object_Model tags: - API - DOM @@ -9,6 +9,7 @@ tags: - TopicStub translation_of: Web/API/Document_Object_Model translation_of_original: Web/Guide/API/DOM +original_slug: Web/Guide/DOM ---

{{draft}}

The Document Object Model is an API for HTML and XML documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.

diff --git a/files/ko/conflicting/web/api/index.html b/files/ko/conflicting/web/api/index.html index 07c0c99acb..05ac8c1c05 100644 --- a/files/ko/conflicting/web/api/index.html +++ b/files/ko/conflicting/web/api/index.html @@ -1,6 +1,6 @@ --- title: WebAPI -slug: WebAPI +slug: conflicting/Web/API tags: - Apps - DOM @@ -10,6 +10,7 @@ tags: - TopicStub translation_of: Web/API translation_of_original: WebAPI +original_slug: WebAPI ---

WebAPI는 웹 앱과 웹 콘텐츠가 기기의 하드웨어에 접근(배터리 상태나 기기의 진동 하드웨어 등)하고 기기의 데이터 저장소에 접근(달력이나 주소록 목록 등)할 수 있도록 해주는 기기 호환과 접근 API의 모음을 나타내는 단어입니다. 이러한 API를 추가함으로써 오늘날 웹이 할 수 있는 일과 과거에 특정 플랫폼에서만 가능했던 일들이 확장되기를 희망합니다.

diff --git a/files/ko/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/ko/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html index 94e969e37a..7aa22576b3 100644 --- a/files/ko/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html +++ b/files/ko/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html @@ -1,6 +1,6 @@ --- title: 크로스-도메인 텍스쳐 -slug: Web/API/WebGL_API/Cross-Domain_Textures +slug: conflicting/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL tags: - WebGL - 웹지엘 @@ -8,6 +8,7 @@ tags: - 텍스쳐 translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL#Cross-domain_textures translation_of_original: Web/API/WebGL_API/Cross-Domain_Textures +original_slug: Web/API/WebGL_API/Cross-Domain_Textures ---

WebGL 텍스쳐 로딩은 크로스-도메인 접근 규칙에 따라 제약을 받습니다. 여러분이 만든 컨텐츠에서 다른 도메인의 텍스쳐, 즉, 크로스-도메인 텍스쳐를 로딩하려면 CORS 승인이 필요합니다. CORS에 대한 자세한 내용은 HTTP access control을 참고하시기 바랍니다.

diff --git a/files/ko/conflicting/web/css/@viewport/index.html b/files/ko/conflicting/web/css/@viewport/index.html index 96dd3182ad..899947b05f 100644 --- a/files/ko/conflicting/web/css/@viewport/index.html +++ b/files/ko/conflicting/web/css/@viewport/index.html @@ -1,6 +1,6 @@ --- title: height -slug: Web/CSS/@viewport/height +slug: conflicting/Web/CSS/@viewport tags: - '@viewport' - CSS @@ -8,6 +8,7 @@ tags: - Reference translation_of: Web/CSS/@viewport translation_of_original: Web/CSS/@viewport/height +original_slug: Web/CSS/@viewport/height ---
{{CSSRef}}
diff --git a/files/ko/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html b/files/ko/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html index 7dab19acbd..9af37b8be1 100644 --- a/files/ko/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html +++ b/files/ko/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html @@ -1,8 +1,9 @@ --- title: viewport-fit -slug: Web/CSS/@viewport/viewport-fit +slug: conflicting/Web/CSS/@viewport_a33ee59ffd8336ffb3336900dea02e9f translation_of: Web/CSS/@viewport translation_of_original: Web/CSS/@viewport/viewport-fit +original_slug: Web/CSS/@viewport/viewport-fit ---
{{CSSRef}}{{Draft}}{{SeeCompatTable}}
diff --git a/files/ko/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html b/files/ko/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html index 699b60921e..4d0a6a0247 100644 --- a/files/ko/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html +++ b/files/ko/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html @@ -1,6 +1,6 @@ --- title: zoom -slug: Web/CSS/@viewport/zoom +slug: conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518 tags: - CSS - CSS Descriptor @@ -10,6 +10,7 @@ tags: - Reference translation_of: Web/CSS/@viewport translation_of_original: Web/CSS/@viewport/zoom +original_slug: Web/CSS/@viewport/zoom ---
{{ CSSRef }}
diff --git a/files/ko/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/ko/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html index 69d4320e3c..1a8c900e9c 100644 --- a/files/ko/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html +++ b/files/ko/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -1,6 +1,6 @@ --- title: 여러개의 배경 지정하기 -slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +slug: conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds tags: - CSS - CSS Background @@ -9,6 +9,7 @@ tags: - Intermediate translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +original_slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds ---

{{CSSRef}}

diff --git a/files/ko/conflicting/web/guide/index.html b/files/ko/conflicting/web/guide/index.html index 6dc2104009..56a70887cf 100644 --- a/files/ko/conflicting/web/guide/index.html +++ b/files/ko/conflicting/web/guide/index.html @@ -1,10 +1,11 @@ --- title: Web Development -slug: Web_Development +slug: conflicting/Web/Guide tags: - Web Development translation_of: Web/Guide translation_of_original: Web_Development +original_slug: Web_Development ---
웹 개발은 웹 사이트 그리고 웹 응용프로그램 개발을 (양자를 포괄적으로) 포함하고 있습니다.
diff --git a/files/ko/conflicting/web/javascript/guide/expressions_and_operators/index.html b/files/ko/conflicting/web/javascript/guide/expressions_and_operators/index.html index f8793b4cbc..621a2cee51 100644 --- a/files/ko/conflicting/web/javascript/guide/expressions_and_operators/index.html +++ b/files/ko/conflicting/web/javascript/guide/expressions_and_operators/index.html @@ -1,9 +1,10 @@ --- title: Arithmetic Operators -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators +slug: conflicting/Web/JavaScript/Guide/Expressions_and_Operators translation_of: Web/JavaScript/Guide/Expressions_and_Operators translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Arithmetic_Operators +original_slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators ---

산술 연산자

산술 연산자는 수(상수값이든지 변수든지)를 받아서 하나의 수를 반환합니다. 표준 산술 연산자는 더하기(+), 빼기(-), 곱하기(*), 나누기(/)입니다. 이 연산자들은 대부분의 다른 프로그래밍 언어에서 처럼 동작합니다. 예외적으로 / 연산자는 JavaScript에서 소수를 반환합니다. C나 Java 같은 다른 언어에서는 / 연산자가 소수 부분은 잘라버립니다. 예를 들면 이렇습니다. diff --git a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_2285d0ecb7e20b6a4ac3cb462794e916/index.html b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_2285d0ecb7e20b6a4ac3cb462794e916/index.html index edf5f640a5..172de20c73 100644 --- a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_2285d0ecb7e20b6a4ac3cb462794e916/index.html +++ b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_2285d0ecb7e20b6a4ac3cb462794e916/index.html @@ -1,9 +1,11 @@ --- title: Logical Operators slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators + conflicting/Web/JavaScript/Guide/Expressions_and_Operators_2285d0ecb7e20b6a4ac3cb462794e916 translation_of: Web/JavaScript/Guide/Expressions_and_Operators translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Logical_Operators +original_slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators ---

논리 연산자

논리 연산자는 주로 불리언(논리적) 값과 함께 사용됩니다. 그때 논리 연산자는 불리언 값을 반환합니다. 그러나 &&와 || 연산자는 실제로는 피연산자 중에 하나의 값을 반환하기 때문에, 이 연산자가 불리언 값이 아닌 값과 함께 사용되면 불리언 값이 아닌 값을 반환할 것입니다. 다음 표에 논리 연산자에 대해서 설명했습니다. diff --git a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_337b8dbe817777e70cc8002308284a74/index.html b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_337b8dbe817777e70cc8002308284a74/index.html index fc39b5a34f..7da67ef78a 100644 --- a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_337b8dbe817777e70cc8002308284a74/index.html +++ b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_337b8dbe817777e70cc8002308284a74/index.html @@ -1,9 +1,11 @@ --- title: String Operators slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators + conflicting/Web/JavaScript/Guide/Expressions_and_Operators_337b8dbe817777e70cc8002308284a74 translation_of: Web/JavaScript/Guide/Expressions_and_Operators translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/String_Operators +original_slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators ---

문자열 연산자

문자열 값에 사용할 수 있는 비교 연산자 외에도 연결 연산자(+)가 있는데, 이 연산자는 두 문자열 값을 연결한 새로운 문자열 값을 반환합니다. 예를 들어, "my " + "string"는 "my string"라는 문자열을 반환합니다. diff --git a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915/index.html b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915/index.html index f238901cab..813470385b 100644 --- a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915/index.html +++ b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915/index.html @@ -1,9 +1,11 @@ --- title: Special Operators slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators + conflicting/Web/JavaScript/Guide/Expressions_and_Operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915 translation_of: Web/JavaScript/Guide/Expressions_and_Operators translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Special_Operators +original_slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators ---

특수 연산자

JavaScript 다음과 같은 특별한 연산자를 제공합니다. diff --git a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_da1ab2546bd5e84ac81f952de51d5d40/index.html b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_da1ab2546bd5e84ac81f952de51d5d40/index.html index 3aed13da65..82af3b32f7 100644 --- a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_da1ab2546bd5e84ac81f952de51d5d40/index.html +++ b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_da1ab2546bd5e84ac81f952de51d5d40/index.html @@ -1,9 +1,11 @@ --- title: Bitwise Operators slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators + conflicting/Web/JavaScript/Guide/Expressions_and_Operators_da1ab2546bd5e84ac81f952de51d5d40 translation_of: Web/JavaScript/Guide/Expressions_and_Operators translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Bitwise_Operators +original_slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators ---


diff --git a/files/ko/conflicting/web/javascript/guide/grammar_and_types/index.html b/files/ko/conflicting/web/javascript/guide/grammar_and_types/index.html index 7b5f5c577c..ece3da245d 100644 --- a/files/ko/conflicting/web/javascript/guide/grammar_and_types/index.html +++ b/files/ko/conflicting/web/javascript/guide/grammar_and_types/index.html @@ -1,8 +1,9 @@ --- title: Constants -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants +slug: conflicting/Web/JavaScript/Guide/Grammar_and_types translation_of: Web/JavaScript/Guide/Grammar_and_types translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Constants +original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants ---

상수

const 키워드를 이용하면 읽기 전용의 이름 있는 상수를 만들 수 있습니다. 상수 식별자(const identifier)는 변수의 식별자와 동일합니다. 문자나 밑줄로 시작해야 하고, 알파벳, 숫자, 밑줄 문자를 사용할 수 있습니다. diff --git a/files/ko/conflicting/web/javascript/guide/grammar_and_types_3f037ba1fa5775d153289787ec51042f/index.html b/files/ko/conflicting/web/javascript/guide/grammar_and_types_3f037ba1fa5775d153289787ec51042f/index.html index c9260414d3..014cc159ff 100644 --- a/files/ko/conflicting/web/javascript/guide/grammar_and_types_3f037ba1fa5775d153289787ec51042f/index.html +++ b/files/ko/conflicting/web/javascript/guide/grammar_and_types_3f037ba1fa5775d153289787ec51042f/index.html @@ -1,8 +1,10 @@ --- title: Variables -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables +slug: >- + conflicting/Web/JavaScript/Guide/Grammar_and_types_3f037ba1fa5775d153289787ec51042f translation_of: Web/JavaScript/Guide/Grammar_and_types translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Variables +original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables ---

변수

우리는 프로그램 내에서 값에 이름을 부여하기 위해서 변수를 사용할 수 있습니다. 변수의 이름은 "식별자(identifier)"라고 불리며, 몇 가지 규칙을 따라야 합니다. diff --git a/files/ko/conflicting/web/javascript/guide/grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f/index.html b/files/ko/conflicting/web/javascript/guide/grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f/index.html index 9c97d9cf82..4437362b39 100644 --- a/files/ko/conflicting/web/javascript/guide/grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f/index.html +++ b/files/ko/conflicting/web/javascript/guide/grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f/index.html @@ -1,8 +1,10 @@ --- title: Unicode -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode +slug: >- + conflicting/Web/JavaScript/Guide/Grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f translation_of: Web/JavaScript/Guide/Grammar_and_types translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Unicode +original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode ---

유니코드

유니코드는 세계의 주요한 문자 언어를 교환하고 표현하기 위한 문자-코딩 표준입니다. 유니코드는 아메리카, 유럽, 중동, 아프리카, 인도, 아시아, 태평양 지역(Pacifica)의 언어를 포함하며 고문자와 기술 분야 기호들도 포함합니다. 유니코드는 공통적인 기술 분야, 수학 분야 기호 뿐만 아니라 여러 언어를 포함한 텍스트의 교환, 처리, 표현을 지원합니다. 유니코드는 나라마다 서로 다른 문자 표준으로 인해서 여러 언어를 포함했을 때 발생하는 국제화 문제를 해결할 수 있기를 희망합니다. 하지만 아직은 모든 현대 문자, 고대 문자를 지원하지는 못합니다. diff --git a/files/ko/conflicting/web/javascript/guide/grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece/index.html b/files/ko/conflicting/web/javascript/guide/grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece/index.html index ee62d0cecf..fa1d8fe3d5 100644 --- a/files/ko/conflicting/web/javascript/guide/grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece/index.html +++ b/files/ko/conflicting/web/javascript/guide/grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece/index.html @@ -1,8 +1,10 @@ --- title: Literals -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals +slug: >- + conflicting/Web/JavaScript/Guide/Grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece translation_of: Web/JavaScript/Guide/Grammar_and_types translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Literals +original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals ---

상수값(Literal)

JavaScript에서 값을 표현하기 위해 상수값을 사용할 수 있습니다. 그것은 변수가 아니라 고정된 값으로서 "문자 그대로(literally)" 스크립트에 값을 제공하는 것입니다. 이 절에서 다음과 같은 상수값에 대해서 설명하겠습니다.

diff --git a/files/ko/conflicting/web/javascript/guide/grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3/index.html b/files/ko/conflicting/web/javascript/guide/grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3/index.html index e5c40d23bf..cb690bb9be 100644 --- a/files/ko/conflicting/web/javascript/guide/grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3/index.html +++ b/files/ko/conflicting/web/javascript/guide/grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3/index.html @@ -1,8 +1,10 @@ --- title: Values -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values +slug: >- + conflicting/Web/JavaScript/Guide/Grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3 translation_of: Web/JavaScript/Guide/Grammar_and_types translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Values +original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values ---

값

JavaScript는 다음과 같은 값 형식을 인식합니다. diff --git a/files/ko/conflicting/web/javascript/guide/index.html b/files/ko/conflicting/web/javascript/guide/index.html index d8d0156dc2..38ef567276 100644 --- a/files/ko/conflicting/web/javascript/guide/index.html +++ b/files/ko/conflicting/web/javascript/guide/index.html @@ -1,9 +1,10 @@ --- title: Predefined Core Objects -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects +slug: conflicting/Web/JavaScript/Guide translation_of: Web/JavaScript/Guide translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Predefined_Core_Objects +original_slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects ---

미리 정의된 기본 개체

이 절에서는 기본 JavaScrip에 미리 정의된 개체에 대해서 설명하겠습니다. diff --git a/files/ko/conflicting/web/javascript/javascript_technologies_overview/index.html b/files/ko/conflicting/web/javascript/javascript_technologies_overview/index.html index b7d3de85bf..ba17dea652 100644 --- a/files/ko/conflicting/web/javascript/javascript_technologies_overview/index.html +++ b/files/ko/conflicting/web/javascript/javascript_technologies_overview/index.html @@ -1,9 +1,10 @@ --- title: The DOM and JavaScript -slug: The_DOM_and_JavaScript +slug: conflicting/Web/JavaScript/JavaScript_technologies_overview tags: - DOM - JavaScript +original_slug: The_DOM_and_JavaScript ---

큰 그림

diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/boolean/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/boolean/index.html index 6e90207661..f49c3592b0 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/boolean/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/boolean/index.html @@ -1,6 +1,6 @@ --- title: Boolean.prototype -slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Boolean tags: - Boolean - JavaScript @@ -8,6 +8,7 @@ tags: - Prototype translation_of: Web/JavaScript/Reference/Global_Objects/Boolean translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/date/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/date/index.html index 06e1bba5f7..4b84cc87cf 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/date/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/date/index.html @@ -1,6 +1,6 @@ --- title: Date.prototype -slug: Web/JavaScript/Reference/Global_Objects/Date/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Date tags: - Date - JavaScript @@ -9,6 +9,7 @@ tags: - Reference translation_of: Web/JavaScript/Reference/Global_Objects/Date translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Date/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/internalerror/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/internalerror/index.html index 6e13afb6db..782fc3d9e2 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/internalerror/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/internalerror/index.html @@ -1,8 +1,9 @@ --- title: InternalError.prototype -slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/InternalError translation_of: Web/JavaScript/Reference/Global_Objects/InternalError translation_of_original: Web/JavaScript/Reference/Global_Objects/InternalError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype ---
{{JSRef}} {{non-standard_header}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html index 2f1b031b39..4b5b7f24b8 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html @@ -1,6 +1,6 @@ --- title: Intl.DateTimeFormat.prototype -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat tags: - DateTimeFormat - Internationalization @@ -11,6 +11,7 @@ tags: - Reference translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html index fcbaa6c247..ea9a8820fd 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html @@ -1,6 +1,6 @@ --- title: Intl.NumberFormat.prototype -slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat tags: - Internationalization - Intl @@ -10,6 +10,7 @@ tags: - Prototype translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/map/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/map/index.html index 3445bf2847..6fef19f59d 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/map/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/map/index.html @@ -1,6 +1,6 @@ --- title: Map.prototype -slug: Web/JavaScript/Reference/Global_Objects/Map/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Map tags: - ECMAScript 2015 - JavaScript @@ -9,6 +9,7 @@ tags: - Reference translation_of: Web/JavaScript/Reference/Global_Objects/Map translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Map/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/number/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/number/index.html index 2bf39d20f9..a6c46b27cc 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/number/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/number/index.html @@ -1,6 +1,6 @@ --- title: Number.prototype -slug: Web/JavaScript/Reference/Global_Objects/Number/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Number tags: - JavaScript - Number @@ -9,6 +9,7 @@ tags: - Reference translation_of: Web/JavaScript/Reference/Global_Objects/Number translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Number/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/object/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/object/index.html index 8f7b08793f..03786c2910 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/object/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/object/index.html @@ -1,6 +1,6 @@ --- title: Object.prototype -slug: Web/JavaScript/Reference/Global_Objects/Object/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Object tags: - JavaScript - Object @@ -9,6 +9,7 @@ tags: - 프로토타입 translation_of: Web/JavaScript/Reference/Global_Objects/Object translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Object/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/promise/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/promise/index.html index 2e393d68d3..6ac1c919ce 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/promise/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/promise/index.html @@ -1,6 +1,6 @@ --- title: Promise.prototype -slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Promise tags: - JavaScript - Promise @@ -8,6 +8,7 @@ tags: - Reference translation_of: Web/JavaScript/Reference/Global_Objects/Promise translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/set/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/set/index.html index 8183d348a9..173883769c 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/set/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/set/index.html @@ -1,6 +1,6 @@ --- title: Set.prototype -slug: Web/JavaScript/Reference/Global_Objects/Set/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Set tags: - ECMAScript 2015 - JavaScript @@ -9,6 +9,7 @@ tags: - set translation_of: Web/JavaScript/Reference/Global_Objects/Set translation_of_original: Web/JavaScript/Reference/Global_Objects/Set/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Set/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html index 849b70c1c6..b0d86cbb55 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html @@ -1,6 +1,6 @@ --- title: SharedArrayBuffer.prototype -slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer tags: - JavaScript - SharedArrayBuffer @@ -9,6 +9,7 @@ tags: - 속성 translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer translation_of_original: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/string/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/string/index.html index fa32999954..b8c4064d6c 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/string/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/string/index.html @@ -1,6 +1,6 @@ --- title: String.prototype -slug: Web/JavaScript/Reference/Global_Objects/String/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/String tags: - JavaScript - Property @@ -8,6 +8,7 @@ tags: - String translation_of: Web/JavaScript/Reference/Global_Objects/String translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/String/prototype ---
{{JSRef("Global_Objects", "String")}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html index aa38e80799..aaf73c5def 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html @@ -1,8 +1,9 @@ --- title: SyntaxError.prototype -slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/typedarray/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/typedarray/index.html index 75f63010bf..f100a49134 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/typedarray/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/typedarray/index.html @@ -1,12 +1,13 @@ --- title: TypedArray.prototype -slug: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/TypedArray tags: - JavaScript - Property - TypedArray translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray translation_of_original: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/weakmap/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/weakmap/index.html index fa2ad9691d..50ee3cd958 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/weakmap/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/weakmap/index.html @@ -1,6 +1,6 @@ --- title: WeakMap.prototype -slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap tags: - ECMAScript6 - JavaScript @@ -8,6 +8,7 @@ tags: - WeakMap translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/weakset/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/weakset/index.html index 0c75408df5..e479c2067c 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/weakset/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/weakset/index.html @@ -1,6 +1,6 @@ --- title: WeakSet.prototype -slug: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/WeakSet tags: - ECMAScript6 - JavaScript @@ -8,6 +8,7 @@ tags: - WeakSet translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html index c7c1c54bab..e647badb6a 100644 --- a/files/ko/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html +++ b/files/ko/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html @@ -1,8 +1,9 @@ --- title: WebAssembly.Global.prototype -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype ---
{{JSRef}}
diff --git a/files/ko/conflicting/web/javascript/reference/operators/index.html b/files/ko/conflicting/web/javascript/reference/operators/index.html index 3e61415550..71373078bf 100644 --- a/files/ko/conflicting/web/javascript/reference/operators/index.html +++ b/files/ko/conflicting/web/javascript/reference/operators/index.html @@ -1,12 +1,13 @@ --- title: 산술 연산자 -slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators +slug: conflicting/Web/JavaScript/Reference/Operators tags: - JavaScript - Operator - Reference translation_of: Web/JavaScript/Reference/Operators translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators +original_slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators ---
{{jsSidebar("Operators")}}
diff --git a/files/ko/conflicting/web/javascript/reference/operators_13aeb53e31f9cec454ca631cb162449f/index.html b/files/ko/conflicting/web/javascript/reference/operators_13aeb53e31f9cec454ca631cb162449f/index.html index b442b1d7bd..7220888794 100644 --- a/files/ko/conflicting/web/javascript/reference/operators_13aeb53e31f9cec454ca631cb162449f/index.html +++ b/files/ko/conflicting/web/javascript/reference/operators_13aeb53e31f9cec454ca631cb162449f/index.html @@ -1,6 +1,7 @@ --- title: 논리 연산자 -slug: Web/JavaScript/Reference/Operators/논리_연산자(Logical_Operators) +slug: >- + conflicting/Web/JavaScript/Reference/Operators_13aeb53e31f9cec454ca631cb162449f tags: - JavaScript - Logic @@ -12,6 +13,7 @@ tags: - 논리 translation_of: Web/JavaScript/Reference/Operators translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +original_slug: Web/JavaScript/Reference/Operators/논리_연산자(Logical_Operators) ---
{{jsSidebar("Operators")}}
diff --git a/files/ko/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html b/files/ko/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html index cf5ae3afa2..39a3c0c6c3 100644 --- a/files/ko/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html +++ b/files/ko/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html @@ -1,12 +1,14 @@ --- title: 비교 연산자 -slug: Web/JavaScript/Reference/Operators/Comparison_Operators +slug: >- + conflicting/Web/JavaScript/Reference/Operators_310dc67549939233c3d18a8fa2cdbb23 tags: - JavaScript - Operator - Reference translation_of: Web/JavaScript/Reference/Operators translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators +original_slug: Web/JavaScript/Reference/Operators/Comparison_Operators ---
{{jsSidebar("Operators")}}
diff --git a/files/ko/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html b/files/ko/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html index 4cc5ab7b5a..7f8b67dd78 100644 --- a/files/ko/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html +++ b/files/ko/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html @@ -1,12 +1,14 @@ --- title: 비트 연산자 -slug: Web/JavaScript/Reference/Operators/Bitwise_Operators +slug: >- + conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 tags: - JavaScript - Operator - Reference translation_of: Web/JavaScript/Reference/Operators translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators +original_slug: Web/JavaScript/Reference/Operators/Bitwise_Operators ---
{{jsSidebar("Operators")}}
diff --git a/files/ko/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html b/files/ko/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html index 93146d63cf..e0fee1dac4 100644 --- a/files/ko/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html +++ b/files/ko/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html @@ -1,12 +1,14 @@ --- title: 할당 연산자 -slug: Web/JavaScript/Reference/Operators/Assignment_Operators +slug: >- + conflicting/Web/JavaScript/Reference/Operators_8d54701de06af40a7c984517cbe87b3e tags: - JavaScript - Operator - Reference translation_of: Web/JavaScript/Reference/Operators#Assignment_operators translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators +original_slug: Web/JavaScript/Reference/Operators/Assignment_Operators ---
{{jsSidebar("Operators")}}
diff --git a/files/ko/conflicting/web/javascript/reference/statements/switch/index.html b/files/ko/conflicting/web/javascript/reference/statements/switch/index.html index 4fe127b7db..77a82304bd 100644 --- a/files/ko/conflicting/web/javascript/reference/statements/switch/index.html +++ b/files/ko/conflicting/web/javascript/reference/statements/switch/index.html @@ -1,12 +1,13 @@ --- title: default -slug: Web/JavaScript/Reference/Statements/default +slug: conflicting/Web/JavaScript/Reference/Statements/switch tags: - JavaScript - Keyword - Reference translation_of: Web/JavaScript/Reference/Statements/switch translation_of_original: Web/JavaScript/Reference/Statements/default +original_slug: Web/JavaScript/Reference/Statements/default ---
{{jsSidebar("Statements")}}
diff --git a/files/ko/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/ko/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html index e5e70ed9fa..efc1cc940e 100644 --- a/files/ko/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html +++ b/files/ko/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html @@ -1,6 +1,6 @@ --- title: Using XPath -slug: Using_XPath +slug: conflicting/Web/XPath/Introduction_to_using_XPath_in_JavaScript tags: - AJAX - Add-ons @@ -10,6 +10,7 @@ tags: - XPath translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript translation_of_original: Using_XPath +original_slug: Using_XPath ---

XPath은 XML 문서의 위치 정보를 위한 언어입니다.

이 문서는 자바스크립트 코드와 XPath의 관계를 위한 Mozilla 인터페이스에 대해 설명합니다. 이러한 것들은 (이 부분에 대해 W3C 작업 그룹에서 작성한) DOM Level 3 XPath에 설명되어 있습니다. diff --git a/files/ko/games/tutorials/2d_breakout_game_phaser/the_score/index.html b/files/ko/games/tutorials/2d_breakout_game_phaser/the_score/index.html index ca79e665a1..44355fca0d 100644 --- a/files/ko/games/tutorials/2d_breakout_game_phaser/the_score/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_phaser/the_score/index.html @@ -1,6 +1,6 @@ --- title: 득점 -slug: Games/Tutorials/2D_breakout_game_Phaser/득점 +slug: Games/Tutorials/2D_breakout_game_Phaser/The_score tags: - 게임 - 게임제작 @@ -8,6 +8,7 @@ tags: - 득점시스템 - 튜토리얼 translation_of: Games/Tutorials/2D_breakout_game_Phaser/The_score +original_slug: Games/Tutorials/2D_breakout_game_Phaser/득점 ---

{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html index 2df00b91b9..6c0d723b80 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html @@ -1,7 +1,8 @@ --- title: 공을 벽에 튕기기 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls ---
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games")}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html index 9560da25e9..ef96583521 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html @@ -1,7 +1,8 @@ --- title: 벽돌 만들기 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field ---
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임")}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html index f312374938..d214b49ae7 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html @@ -1,7 +1,8 @@ --- title: 충돌 감지 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Collision_detection +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Collision_detection ---
{{GamesSidebar}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html index a7f1ed4130..a32e03f5d9 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html @@ -1,6 +1,7 @@ --- title: 캔버스 생성과 그리기 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기 +slug: >- + Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it tags: - 2D - 게임 @@ -10,6 +11,7 @@ tags: - 튜토리얼 translation_of: >- Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기 ---
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games")}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html index b23a4b6b33..e0ef02994f 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html @@ -1,11 +1,12 @@ --- title: 개발 마무리 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Finishing_up +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up tags: - Canvas - Games - JavaScript translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Finishing_up ---
{{GamesSidebar}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html index d0c72fb8b3..6733d49fd5 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html @@ -1,6 +1,6 @@ --- title: 게임 오버 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over tags: - 게임 - 게임 오버 @@ -10,6 +10,7 @@ tags: - 캔버스 - 튜토리얼 translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over ---
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임")}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/index.html index 8b0e4da888..9b1a5fe86f 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/index.html @@ -1,6 +1,6 @@ --- title: 순수한 자바스크립트를 이용한 2D 벽돌깨기 게임 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임 +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript tags: - 2D - 게임 @@ -8,6 +8,7 @@ tags: - 캔버스 - 튜토리얼 translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임 ---
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games")}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html index e05faf32e8..0526df40d3 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html @@ -1,11 +1,12 @@ --- title: 마우스로 패들 조종하기 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Mouse_controls +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls tags: - Canvas - Games - JavaScript translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Mouse_controls ---
{{GamesSidebar}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html index 5a8b02904e..0f451908d9 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html @@ -1,6 +1,6 @@ --- title: 공 움직이기 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기 +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball tags: - 2D - 게임 @@ -11,6 +11,7 @@ tags: - 캔버스 - 튜토리얼 translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기 ---
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games")}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html index 47cde1be4e..2f4415bfc3 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html @@ -1,7 +1,8 @@ --- title: Paddle과 키보드 컨트롤 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls ---
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/")}}
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html index 76883a1655..b82e8be9bd 100644 --- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html @@ -1,11 +1,12 @@ --- title: Track the score and win -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Track_the_score_and_win +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win tags: - Canvas - Games - JavaScript translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win +original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Track_the_score_and_win ---
{{GamesSidebar}}
diff --git a/files/ko/glossary/array/index.html b/files/ko/glossary/array/index.html index b7f3f63957..9dc0173b1a 100644 --- a/files/ko/glossary/array/index.html +++ b/files/ko/glossary/array/index.html @@ -1,9 +1,10 @@ --- title: 배열 -slug: Glossary/배열 +slug: Glossary/array tags: - 배열 translation_of: Glossary/array +original_slug: Glossary/배열 ---

배열은 데이터의 순서가 있는 집합  (  언어어 따라 {{Glossary("primitive")}} 또는  {{Glossary("object")}}) 이다. 배열은 하나의 변수의 여러개의 값들을 저장하는데 사용된다.  이것은 단 하나의 값을 저장하는 변수와 비교된다. 

diff --git a/files/ko/glossary/boolean/index.html b/files/ko/glossary/boolean/index.html index 9d63373163..0cd9455dc2 100644 --- a/files/ko/glossary/boolean/index.html +++ b/files/ko/glossary/boolean/index.html @@ -1,6 +1,6 @@ --- title: 불린 -slug: Glossary/불린 +slug: Glossary/Boolean tags: - 데이터 타입 - 부울 @@ -9,6 +9,7 @@ tags: - 자바스크립트 - 프로그래밍 언어 translation_of: Glossary/Boolean +original_slug: Glossary/불린 ---

컴퓨터 과학에서, 불린(boolean)은 논리적인 데이터 유형이다. 불린은 참(true) 혹은 거짓(false) 값만을 가질 수 있다. 자바스크립트에서 불린 조건은 어떤 코드 부문이 실행되어야 할 지(예를 들어 if 절 안에서) 또는 어떤 코드 부문을 반복해야 할지(예를 들어 for 문 안에서) 결정하는 데 쓰인다.

diff --git a/files/ko/glossary/browsing_context/index.html b/files/ko/glossary/browsing_context/index.html index e4d5fab662..79c5af7e7b 100644 --- a/files/ko/glossary/browsing_context/index.html +++ b/files/ko/glossary/browsing_context/index.html @@ -1,10 +1,11 @@ --- title: 브라우징 맥락 -slug: Glossary/브라우저-컨텍스트 +slug: Glossary/Browsing_context tags: - CodingScripting - Glossary translation_of: Glossary/Browsing_context +original_slug: Glossary/브라우저-컨텍스트 ---
{{QuickLinksWithSubpages("/ko/docs/Glossary")}}
diff --git a/files/ko/glossary/cache/index.html b/files/ko/glossary/cache/index.html index 6d45b6772c..7f9fd0aa77 100644 --- a/files/ko/glossary/cache/index.html +++ b/files/ko/glossary/cache/index.html @@ -1,7 +1,8 @@ --- title: 캐시 -slug: Glossary/캐시 +slug: Glossary/Cache translation_of: Glossary/Cache +original_slug: Glossary/캐시 ---

캐시 (웹 캐시 또는 HTTP 캐시)는 HTTP 응답들(responses)을 일시적으로 저장하는 곳입니다. 이를 통해 그 다음 HTTP 요청들(requests)에서 특정 조건이 만족될 때까지 캐시에 저장한 리소스를 사용할 수 있습니다. 

diff --git a/files/ko/glossary/dhtml/index.html b/files/ko/glossary/dhtml/index.html index 1eada4d952..2ed3c1f82f 100644 --- a/files/ko/glossary/dhtml/index.html +++ b/files/ko/glossary/dhtml/index.html @@ -1,9 +1,10 @@ --- title: DHTML -slug: DHTML +slug: Glossary/DHTML tags: - DHTML translation_of: Glossary/DHTML +original_slug: DHTML ---
DHTML은 "dynamic HTML"을 줄인 것이다. DHTML은 일반적으로 Flash나Java 플러그인을 사용하여 다루어지지 않는 역동적 웹페이지 뒤의 코드를 참조하는데 사용된다. 복합 기능성을 모은 용어는 웹 개발자가 HTML, CSS, Document Object Model, 그리고 JavaScript를 사용하는 것을 가능하게 한다.
diff --git a/files/ko/glossary/dynamic_programming_language/index.html b/files/ko/glossary/dynamic_programming_language/index.html index dc17a46f18..b031c498fa 100644 --- a/files/ko/glossary/dynamic_programming_language/index.html +++ b/files/ko/glossary/dynamic_programming_language/index.html @@ -1,7 +1,8 @@ --- title: 동적 프로그래밍 언어 -slug: Glossary/동적_프로그래밍_언어 +slug: Glossary/Dynamic_programming_language translation_of: Glossary/Dynamic_programming_language +original_slug: Glossary/동적_프로그래밍_언어 ---

A dynamic programming language is a programming language in which operations otherwise done at compile-time can be done at run-time. For example, in JavaScript it is possible to change the type of a variable or add new properties or methods to an object while the program is running.

diff --git a/files/ko/glossary/http_header/index.html b/files/ko/glossary/http_header/index.html index 30a1051acf..50e0c68f04 100644 --- a/files/ko/glossary/http_header/index.html +++ b/files/ko/glossary/http_header/index.html @@ -1,10 +1,11 @@ --- title: 헤더 -slug: Glossary/Header +slug: Glossary/HTTP_header tags: - WebMechanics - 용어 translation_of: Glossary/HTTP_header +original_slug: Glossary/Header ---

HTTP 헤더는 부가적인 정보를 전달하는 HTTP 요청 또는 응답 필드로, 메시지나 바디의 의미를 변경하거나 미리 조정합니다. 헤더는 대소문자를 구별하지 않으며, 줄의 처음에서 시작하여 바로 다음에 ':'과 헤더에 해당하는 값이 따라옵니다. 값은 다음 CR 또는 메시지의 마지막에서 끝납니다.

diff --git a/files/ko/glossary/identifier/index.html b/files/ko/glossary/identifier/index.html index f306315b66..ca64dedab0 100644 --- a/files/ko/glossary/identifier/index.html +++ b/files/ko/glossary/identifier/index.html @@ -1,10 +1,11 @@ --- title: 식별자 -slug: Glossary/식별자 +slug: Glossary/Identifier tags: - Beginner - Glossary translation_of: Glossary/Identifier +original_slug: Glossary/식별자 ---

식별자는 코드 내의 {{glossary("variable", "변수")}}, {{glossary("function", "함수")}}, 혹은 {{glossary("property", "속성")}}을 식별하는 문자열입니다.

diff --git a/files/ko/glossary/localization/index.html b/files/ko/glossary/localization/index.html index d2f45a54e0..21d3a54702 100644 --- a/files/ko/glossary/localization/index.html +++ b/files/ko/glossary/localization/index.html @@ -1,9 +1,10 @@ --- title: Localization -slug: Localization +slug: Glossary/Localization tags: - Localization translation_of: Glossary/Localization +original_slug: Localization ---

지역화는 소프트웨어 사용자 인터페이스를 다른 언어로 번역하고 그 문화에 맞게 바꾸는 과정을 의미합니다. 지역화와 관련된 내용은 모질라 기반의 프로그램이나 확장기능을 지역화 할 수 있게 만드는 것에 관한 것입니다.

diff --git a/files/ko/glossary/scope/index.html b/files/ko/glossary/scope/index.html index 259cc6b9f4..db31f200a2 100644 --- a/files/ko/glossary/scope/index.html +++ b/files/ko/glossary/scope/index.html @@ -1,7 +1,8 @@ --- title: 스코프 -slug: Glossary/스코프 +slug: Glossary/Scope translation_of: Glossary/Scope +original_slug: Glossary/스코프 ---

현재 실행되는 컨텍스트를 말한다. 여기서 컨텍스트는  {{glossary("값","값")}}과 표현식이 "표현"되거나 참조 될 수 있음을 의미한다. 만약 {{glossary("변수")}} 또는 다른 표현식이 "해당 스코프"내에 있지 않다면 사용할 수 없다. 스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가하다.

diff --git a/files/ko/glossary/transmission_control_protocol_(tcp)/index.html b/files/ko/glossary/transmission_control_protocol_(tcp)/index.html index 6644b8772c..072c3ccbb9 100644 --- a/files/ko/glossary/transmission_control_protocol_(tcp)/index.html +++ b/files/ko/glossary/transmission_control_protocol_(tcp)/index.html @@ -1,9 +1,10 @@ --- title: 전송 제어 프로토콜 -slug: Glossary/전송_제어_프로토콜_(TCP) +slug: Glossary/Transmission_Control_Protocol_(TCP) tags: - 전송 제어 프로토콜 translation_of: Glossary/Transmission_Control_Protocol_(TCP) +original_slug: Glossary/전송_제어_프로토콜_(TCP) ---

TCP (Transmission Control Protocol)는 IP 네트워크의 두 컴퓨터 간의 연결 지향 통신을 위한 전송 계층 호스트 간 프로토콜입니다. TCP는 가상 포트를 사용하여 두 컴퓨터 간의 물리적 연결을 재사용 할 수 있는 가상 종단 간 연결을 만듭니다. TCP는 {{glossary ( 'HTTP')}} 및 {{glossary ( 'SMTP')}} (email)과 같은 상위 레벨 프로토콜 데이터를 캡슐화합니다.

diff --git a/files/ko/glossary/xhtml/index.html b/files/ko/glossary/xhtml/index.html index dfab34e19d..2c5191f49c 100644 --- a/files/ko/glossary/xhtml/index.html +++ b/files/ko/glossary/xhtml/index.html @@ -1,9 +1,10 @@ --- title: XHTML -slug: XHTML +slug: Glossary/XHTML tags: - XHTML translation_of: Glossary/XHTML +original_slug: XHTML ---

HTML은 HTML 또는 XHTML이라는 XML문법으로 브라우저를 통해 네트워크에 접속할 수 있습니다.

diff --git a/files/ko/learn/accessibility/html/index.html b/files/ko/learn/accessibility/html/index.html index dae842fc92..efc98a5735 100644 --- a/files/ko/learn/accessibility/html/index.html +++ b/files/ko/learn/accessibility/html/index.html @@ -1,6 +1,6 @@ --- title: 'HTML: 접근성을 위한 기초' -slug: Learn/접근성/HTML +slug: Learn/Accessibility/HTML tags: - HTML - HTML 접근성 @@ -11,6 +11,7 @@ tags: - 웹 접근성 - 접근성 향상 translation_of: Learn/Accessibility/HTML +original_slug: Learn/접근성/HTML ---
{{LearnSidebar}}
diff --git a/files/ko/learn/accessibility/index.html b/files/ko/learn/accessibility/index.html index 01c9c2e2bb..ba2981d06b 100644 --- a/files/ko/learn/accessibility/index.html +++ b/files/ko/learn/accessibility/index.html @@ -1,6 +1,6 @@ --- title: 접근성 -slug: Learn/접근성 +slug: Learn/Accessibility tags: - ARIA - CSS @@ -13,6 +13,7 @@ tags: - 비기너 - 접근성 translation_of: Learn/Accessibility +original_slug: Learn/접근성 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/accessibility/mobile/index.html b/files/ko/learn/accessibility/mobile/index.html index a64c0eaa88..d057d285e6 100644 --- a/files/ko/learn/accessibility/mobile/index.html +++ b/files/ko/learn/accessibility/mobile/index.html @@ -1,7 +1,8 @@ --- title: 모바일 접근성 -slug: Learn/접근성/모바일 +slug: Learn/Accessibility/Mobile translation_of: Learn/Accessibility/Mobile +original_slug: Learn/접근성/모바일 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/accessibility/what_is_accessibility/index.html b/files/ko/learn/accessibility/what_is_accessibility/index.html index 67f4b6d302..f7ab84a9ae 100644 --- a/files/ko/learn/accessibility/what_is_accessibility/index.html +++ b/files/ko/learn/accessibility/what_is_accessibility/index.html @@ -1,7 +1,8 @@ --- title: What is accessibility? -slug: Learn/접근성/What_is_accessibility +slug: Learn/Accessibility/What_is_accessibility translation_of: Learn/Accessibility/What_is_accessibility +original_slug: Learn/접근성/What_is_accessibility ---

{{LearnSidebar}}

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 d39ea4069f..3005d81a05 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 @@ -1,7 +1,8 @@ --- title: 웹 사이트가 제대로 동작하는지 확인하는 방법 -slug: Learn/Common_questions/웹_사이트가_제대로_동작하는지_확인 +slug: Learn/Common_questions/Checking_that_your_web_site_is_working_properly translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly +original_slug: Learn/Common_questions/웹_사이트가_제대로_동작하는지_확인 ---

이번에는 웹사이트 동작과 관련한 다양한 문제해결 단계와 그 문제들을 해결하기 위한 방법들을 알아보겠습니다.

diff --git a/files/ko/learn/common_questions/thinking_before_coding/index.html b/files/ko/learn/common_questions/thinking_before_coding/index.html index 8885c5999b..7923c8dadf 100644 --- a/files/ko/learn/common_questions/thinking_before_coding/index.html +++ b/files/ko/learn/common_questions/thinking_before_coding/index.html @@ -1,10 +1,11 @@ --- title: 나의 웹사이트를 설계하기 위해서는? -slug: Learn/Common_questions/코딩하기_전에_생각하기 +slug: Learn/Common_questions/Thinking_before_coding tags: - 능동학습필요 - 초보자 translation_of: Learn/Common_questions/Thinking_before_coding +original_slug: Learn/Common_questions/코딩하기_전에_생각하기 ---

이 글은 모든 프로젝트에서 중요한 첫 단계  - 프로젝트를 통해 달성하고 싶은 것을 정의하기 - 를 다룬다.

diff --git a/files/ko/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/ko/learn/css/building_blocks/fundamental_css_comprehension/index.html index d16df40221..61ef3af45d 100644 --- a/files/ko/learn/css/building_blocks/fundamental_css_comprehension/index.html +++ b/files/ko/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -1,7 +1,8 @@ --- title: 기본적인 CSS 이해 -slug: Learn/CSS/Introduction_to_CSS/기본적인_CSS_이해 +slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +original_slug: Learn/CSS/Introduction_to_CSS/기본적인_CSS_이해 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/css/building_blocks/selectors/index.html b/files/ko/learn/css/building_blocks/selectors/index.html index 274653da91..932912bcb8 100644 --- a/files/ko/learn/css/building_blocks/selectors/index.html +++ b/files/ko/learn/css/building_blocks/selectors/index.html @@ -1,7 +1,8 @@ --- title: CSS 선택자 -slug: Learn/CSS/Building_blocks/선택자 +slug: Learn/CSS/Building_blocks/Selectors translation_of: Learn/CSS/Building_blocks/Selectors +original_slug: Learn/CSS/Building_blocks/선택자 ---
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
diff --git a/files/ko/learn/css/building_blocks/the_box_model/index.html b/files/ko/learn/css/building_blocks/the_box_model/index.html index eec5f2b929..655db5171f 100644 --- a/files/ko/learn/css/building_blocks/the_box_model/index.html +++ b/files/ko/learn/css/building_blocks/the_box_model/index.html @@ -1,6 +1,6 @@ --- title: 상자 모델 -slug: Learn/CSS/Building_blocks/상자_모델 +slug: Learn/CSS/Building_blocks/The_box_model tags: - CSS - 디스플레이 @@ -11,6 +11,7 @@ tags: - 패딩 - 학습 translation_of: Learn/CSS/Building_blocks/The_box_model +original_slug: Learn/CSS/Building_blocks/상자_모델 ---
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
diff --git a/files/ko/learn/css/css_layout/media_queries/index.html b/files/ko/learn/css/css_layout/media_queries/index.html index cf13a1421c..4c2ba12014 100644 --- a/files/ko/learn/css/css_layout/media_queries/index.html +++ b/files/ko/learn/css/css_layout/media_queries/index.html @@ -1,6 +1,6 @@ --- title: 미디어 쿼리 초보자 안내서 -slug: Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서 +slug: Learn/CSS/CSS_layout/Media_queries tags: - 미디어 쿼리 - 씨에스에스 @@ -8,6 +8,7 @@ tags: - 초보자 - 학습 translation_of: Learn/CSS/CSS_layout/Media_queries +original_slug: Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서 ---

{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

diff --git a/files/ko/learn/css/css_layout/normal_flow/index.html b/files/ko/learn/css/css_layout/normal_flow/index.html index 43b4366c0e..13dc60e97e 100644 --- a/files/ko/learn/css/css_layout/normal_flow/index.html +++ b/files/ko/learn/css/css_layout/normal_flow/index.html @@ -1,6 +1,6 @@ --- title: 일반 대열 -slug: Learn/CSS/CSS_layout/일반_흐름 +slug: Learn/CSS/CSS_layout/Normal_Flow tags: - 격자형 - 부동 @@ -10,6 +10,7 @@ tags: - 초보자 - 학습 translation_of: Learn/CSS/CSS_layout/Normal_Flow +original_slug: Learn/CSS/CSS_layout/일반_흐름 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/css/css_layout/positioning/index.html b/files/ko/learn/css/css_layout/positioning/index.html index 76a491ae0e..f6c02bb762 100644 --- a/files/ko/learn/css/css_layout/positioning/index.html +++ b/files/ko/learn/css/css_layout/positioning/index.html @@ -1,6 +1,6 @@ --- title: 위치잡기 -slug: Learn/CSS/CSS_layout/위치잡기 +slug: Learn/CSS/CSS_layout/Positioning tags: - 고정 - 글 @@ -13,6 +13,7 @@ tags: - 초보자 - 코딩스크립팅 translation_of: Learn/CSS/CSS_layout/Positioning +original_slug: Learn/CSS/CSS_layout/위치잡기 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/css/css_layout/responsive_design/index.html b/files/ko/learn/css/css_layout/responsive_design/index.html index b1311448c7..c3f2064cc4 100644 --- a/files/ko/learn/css/css_layout/responsive_design/index.html +++ b/files/ko/learn/css/css_layout/responsive_design/index.html @@ -1,6 +1,6 @@ --- title: 반응형 디자인 -slug: Learn/CSS/CSS_layout/반응형_디자인 +slug: Learn/CSS/CSS_layout/Responsive_Design tags: - 가변상장 - 격자 @@ -11,6 +11,7 @@ tags: - 이미지 - 타이포크래피 translation_of: Learn/CSS/CSS_layout/Responsive_Design +original_slug: Learn/CSS/CSS_layout/반응형_디자인 ---
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
diff --git a/files/ko/learn/css/css_layout/supporting_older_browsers/index.html b/files/ko/learn/css/css_layout/supporting_older_browsers/index.html index 07910a4d26..456a59f385 100644 --- a/files/ko/learn/css/css_layout/supporting_older_browsers/index.html +++ b/files/ko/learn/css/css_layout/supporting_older_browsers/index.html @@ -1,6 +1,6 @@ --- title: 이전 브라우저 지원 -slug: Learn/CSS/CSS_layout/이전_브라우저_지원 +slug: Learn/CSS/CSS_layout/Supporting_Older_Browsers tags: - 가변상자 - 격자 @@ -13,6 +13,7 @@ tags: - 초보자 - 학습 translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers +original_slug: Learn/CSS/CSS_layout/이전_브라우저_지원 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/css/howto/css_faq/index.html b/files/ko/learn/css/howto/css_faq/index.html index 604448f6c3..c86d002d48 100644 --- a/files/ko/learn/css/howto/css_faq/index.html +++ b/files/ko/learn/css/howto/css_faq/index.html @@ -1,7 +1,8 @@ --- title: 공통된 CSS 질문들 -slug: Web/CSS/Common_CSS_Questions +slug: Learn/CSS/Howto/CSS_FAQ translation_of: Learn/CSS/Howto/CSS_FAQ +original_slug: Web/CSS/Common_CSS_Questions ---

왜 유효한 내 CSS가 왜 올바르게 그려지지 않는가?

diff --git a/files/ko/learn/forms/how_to_structure_a_web_form/index.html b/files/ko/learn/forms/how_to_structure_a_web_form/index.html index 37bfbb57ae..1702909e58 100644 --- a/files/ko/learn/forms/how_to_structure_a_web_form/index.html +++ b/files/ko/learn/forms/how_to_structure_a_web_form/index.html @@ -1,7 +1,8 @@ --- title: HTML_폼_구성_방법 -slug: Learn/HTML/Forms/HTML_폼_구성_방법 +slug: Learn/Forms/How_to_structure_a_web_form translation_of: Learn/Forms/How_to_structure_a_web_form +original_slug: Learn/HTML/Forms/HTML_폼_구성_방법 ---

HTML폼을 만들떄 구조화 하는것은 중요한 것이다. 이것은 두가지 이유로 중요하다. 폼이 사용 할수 있다는 것을 보장하고 접근성도 늘릴수 있기 떄문이다.(즉 장애인들도 쉽게 사용할 수 있다.) HTML 폼의 접근성은 중요한 점이고 어떻게 폼 접근성을 높일 수 있는지 볼것이다.

diff --git a/files/ko/learn/forms/index.html b/files/ko/learn/forms/index.html index f7244cbdc1..a133468144 100644 --- a/files/ko/learn/forms/index.html +++ b/files/ko/learn/forms/index.html @@ -1,7 +1,8 @@ --- title: HTML 폼 가이드 -slug: Learn/HTML/Forms +slug: Learn/Forms translation_of: Learn/Forms +original_slug: Learn/HTML/Forms ---

이 가이드는 HTML 폼을 숙달 시키는데 도움이 되는 문서입니다. HTML 폼은 사용자와 상호작용할 수 있는 매우 강력한 도구입니다. 그러나 역사적으로 나 기술적인 이유로 사용자에게 항상 명확하게 기능을 제공할 수 있는 것은 아닙니다. 이 가이드에서 HTML 폼 관점에서 스타일 구조, 사용자 위젯으로 데이터 다루기 등 모든 것을 다룰 것입니다. 이러한 강력한 기술들을 즐기길 바랍니다!

diff --git a/files/ko/learn/forms/sending_and_retrieving_form_data/index.html b/files/ko/learn/forms/sending_and_retrieving_form_data/index.html index f1d7c35437..69dbe42e3d 100644 --- a/files/ko/learn/forms/sending_and_retrieving_form_data/index.html +++ b/files/ko/learn/forms/sending_and_retrieving_form_data/index.html @@ -1,7 +1,8 @@ --- title: Sending and retrieving form data -slug: Learn/HTML/Forms/Sending_and_retrieving_form_data +slug: Learn/Forms/Sending_and_retrieving_form_data translation_of: Learn/Forms/Sending_and_retrieving_form_data +original_slug: Learn/HTML/Forms/Sending_and_retrieving_form_data ---

많은 경우 HTML 폼은 서버에 데이터를 전송할 목적으로 사용된다. 서버는 데이터를 처리하고 사용자에게 응답을 보낼 것이다. 간단한 것 처럼 보이지만 데이터가 서버나 사용자에게 피해를 입히지 않기 위해서는 몇가지를 명심해야한다.

diff --git a/files/ko/learn/forms/your_first_form/index.html b/files/ko/learn/forms/your_first_form/index.html index b997fc1f08..656600f2d5 100644 --- a/files/ko/learn/forms/your_first_form/index.html +++ b/files/ko/learn/forms/your_first_form/index.html @@ -1,7 +1,8 @@ --- title: 나의 첫 HTML 폼 -slug: Learn/HTML/Forms/Your_first_HTML_form +slug: Learn/Forms/Your_first_form translation_of: Learn/Forms/Your_first_form +original_slug: Learn/HTML/Forms/Your_first_HTML_form ---

이 문서는 HTML 폼 소개 문서입니다. 간단한 폼들을 살펴보면서 HTML 폼을 만들기에 대한 기본적인 필요 사항들을 볼 수 있을 것이다. 이 문서는 HTML폼에 대해서는 아무것도 몰라도 되지만 다음 문서에 나와 있는 기본적인 HTML이나 CSS를 알아야 한다. (the basics of HTML, CSS)

diff --git a/files/ko/learn/getting_started_with_the_web/css_basics/index.html b/files/ko/learn/getting_started_with_the_web/css_basics/index.html index a5e8e08648..a517978ee1 100644 --- a/files/ko/learn/getting_started_with_the_web/css_basics/index.html +++ b/files/ko/learn/getting_started_with_the_web/css_basics/index.html @@ -1,15 +1,16 @@ --- title: CSS 기초 -slug: Learn/Getting_started_with_the_web/CSS_기본 +slug: Learn/Getting_started_with_the_web/CSS_basics tags: - CSS - - 'l10n:priority' + - l10n:priority - 꾸미기 - 스크립트 코딩 - 웹 - 초보자 - 학습 translation_of: Learn/Getting_started_with_the_web/CSS_basics +original_slug: Learn/Getting_started_with_the_web/CSS_기본 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/ko/learn/getting_started_with_the_web/dealing_with_files/index.html index 1ed38e8cde..8493a63327 100644 --- a/files/ko/learn/getting_started_with_the_web/dealing_with_files/index.html +++ b/files/ko/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -1,14 +1,15 @@ --- title: 파일 다루기 -slug: Learn/Getting_started_with_the_web/파일들_다루기 +slug: Learn/Getting_started_with_the_web/Dealing_with_files tags: - Beginner - CodingScripting - Files - Guide - HTML - - 'l10n:priority' + - l10n:priority translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +original_slug: Learn/Getting_started_with_the_web/파일들_다루기 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/ko/learn/getting_started_with_the_web/how_the_web_works/index.html index 009b22ec8f..f244ed2c43 100644 --- a/files/ko/learn/getting_started_with_the_web/how_the_web_works/index.html +++ b/files/ko/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -1,7 +1,8 @@ --- title: 웹의 동작 방식 -slug: Learn/Getting_started_with_the_web/웹의_동작_방식 +slug: Learn/Getting_started_with_the_web/How_the_Web_works translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +original_slug: Learn/Getting_started_with_the_web/웹의_동작_방식 ---

{{LearnSidebar}}

diff --git a/files/ko/learn/getting_started_with_the_web/html_basics/index.html b/files/ko/learn/getting_started_with_the_web/html_basics/index.html index 530f3fe11f..895dd2241d 100644 --- a/files/ko/learn/getting_started_with_the_web/html_basics/index.html +++ b/files/ko/learn/getting_started_with_the_web/html_basics/index.html @@ -1,14 +1,15 @@ --- title: HTML 기본 -slug: Learn/Getting_started_with_the_web/HTML_기본 +slug: Learn/Getting_started_with_the_web/HTML_basics tags: - Beginner - HTML - Learn - Web - - 'l10n:priority' + - l10n:priority - 입문자 translation_of: Learn/Getting_started_with_the_web/HTML_basics +original_slug: Learn/Getting_started_with_the_web/HTML_기본 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/ko/learn/getting_started_with_the_web/installing_basic_software/index.html index 58ec16a8d9..db763035e3 100644 --- a/files/ko/learn/getting_started_with_the_web/installing_basic_software/index.html +++ b/files/ko/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -1,6 +1,6 @@ --- title: 기본 소프트웨어 설치하기 -slug: Learn/Getting_started_with_the_web/기본_소프트웨어_설치하기 +slug: Learn/Getting_started_with_the_web/Installing_basic_software tags: - Beginner - Browser @@ -8,8 +8,9 @@ tags: - Setup - Tools - WebMechanics - - 'l10n:priority' + - l10n:priority translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +original_slug: Learn/Getting_started_with_the_web/기본_소프트웨어_설치하기 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/ko/learn/getting_started_with_the_web/publishing_your_website/index.html index df2016e530..bc79f62cbd 100644 --- a/files/ko/learn/getting_started_with_the_web/publishing_your_website/index.html +++ b/files/ko/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -1,7 +1,8 @@ --- title: 웹사이트 출판하기 -slug: Learn/Getting_started_with_the_web/웹사이트_출판하기 +slug: Learn/Getting_started_with_the_web/Publishing_your_website translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +original_slug: Learn/Getting_started_with_the_web/웹사이트_출판하기 ---

{{LearnSidebar}}

diff --git a/files/ko/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ko/learn/html/howto/author_fast-loading_html_pages/index.html index 09ac7171e0..71d5a7517a 100644 --- a/files/ko/learn/html/howto/author_fast-loading_html_pages/index.html +++ b/files/ko/learn/html/howto/author_fast-loading_html_pages/index.html @@ -1,9 +1,10 @@ --- title: Tips for Authoring Fast-loading HTML Pages -slug: Tips_for_Authoring_Fast-loading_HTML_Pages +slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages tags: - HTML translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +original_slug: Tips_for_Authoring_Fast-loading_HTML_Pages ---

Summary: Learn common-sense tips for producing HTML pages which load quickly and provide visitor satisfaction. 여기에 나온 팁들은 상식과 실험에 바탕을 두고 있습니다. 만약 당신이 페이지 불러오기 성능을 향상시킬 수 있는 팁을 알고 있다면 이 글의 토론 페이지에 조언해 주시기 바랍니다.

최적화된 웹 페이지는 사이트 방문자들에게 즉각적인 응답을 해줄 뿐만 아니라, 웹 서버의 부담을 덜어주고 인터넷 연결의 부하를 줄여줍니다. 이것은 커다란 사이트나 뉴스 속보와 같은 특별한 상황에서 트래픽이 급격히 증가하는 사이트에 있어서 아주 중요합니다.

diff --git a/files/ko/learn/html/howto/use_data_attributes/index.html b/files/ko/learn/html/howto/use_data_attributes/index.html index d4abd5da57..a2f568d908 100644 --- a/files/ko/learn/html/howto/use_data_attributes/index.html +++ b/files/ko/learn/html/howto/use_data_attributes/index.html @@ -1,6 +1,6 @@ --- title: 데이터 속성 사용하기 -slug: Learn/HTML/Howto/데이터_속성_사용하기 +slug: Learn/HTML/Howto/Use_data_attributes tags: - HTML - HTML5 @@ -9,6 +9,7 @@ tags: - 웹 - 전용 데이터 속성 translation_of: Learn/HTML/Howto/Use_data_attributes +original_slug: Learn/HTML/Howto/데이터_속성_사용하기 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index d6930ac381..984a8d3479 100644 --- a/files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ b/files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -1,7 +1,8 @@ --- title: 비디오 그리고 오디오 컨텐츠 -slug: Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content +slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +original_slug: Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content ---
{{LearnSidebar}}
diff --git a/files/ko/learn/javascript/building_blocks/conditionals/index.html b/files/ko/learn/javascript/building_blocks/conditionals/index.html index 858d6f9116..379ad28fff 100644 --- a/files/ko/learn/javascript/building_blocks/conditionals/index.html +++ b/files/ko/learn/javascript/building_blocks/conditionals/index.html @@ -1,7 +1,8 @@ --- title: Making decisions in your code — 조건문 -slug: Learn/JavaScript/Building_blocks/조건문 +slug: Learn/JavaScript/Building_blocks/conditionals translation_of: Learn/JavaScript/Building_blocks/conditionals +original_slug: Learn/JavaScript/Building_blocks/조건문 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/ko/learn/javascript/client-side_web_apis/manipulating_documents/index.html index 94759e21bf..52a774c001 100644 --- a/files/ko/learn/javascript/client-side_web_apis/manipulating_documents/index.html +++ b/files/ko/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -1,10 +1,11 @@ --- title: JavaScript -slug: Web/CSS/Getting_Started/JavaScript +slug: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents tags: - - 'CSS:Getting_Started' + - CSS:Getting_Started translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents translation_of_original: Web/Guide/CSS/Getting_started/JavaScript +original_slug: Web/CSS/Getting_Started/JavaScript ---

이 페이지는 입문서의 II 부입니다. II 부는 모질라에서의 CSS의 범위(scope)를 보여주는 예제들을 포함하고 있습니다.

II 부의 각 페이지는 CSS 가 다른 기술(technologies)들과 어떻게 상호작용하는지 설명하고 있습니다. 이 페이지들은 이들 다른 기술들을 사용하는 방법들을 가르치기위해서 디자인 되지는 않았습니다. 이 들 기술들을 자세히 배우려면 다른 입문서를 보세요.

diff --git a/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.html b/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.html index 526779b577..eff0af8858 100644 --- a/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.html +++ b/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.html @@ -1,7 +1,8 @@ --- title: '얼마나 이해했는지 확인해보자: JSON' -slug: 'Learn/JavaScript/Objects/얼마나_이해했는지_확인해보자:_JSON' -translation_of: 'Learn/JavaScript/Objects/Test_your_skills:_JSON' +slug: Learn/JavaScript/Objects/Test_your_skills:_JSON +translation_of: Learn/JavaScript/Objects/Test_your_skills:_JSON +original_slug: Learn/JavaScript/Objects/얼마나_이해했는지_확인해보자:_JSON ---
{{learnsidebar}}
diff --git a/files/ko/learn/server-side/express_nodejs/development_environment/index.html b/files/ko/learn/server-side/express_nodejs/development_environment/index.html index f3ab1846f6..5cab9987ca 100644 --- a/files/ko/learn/server-side/express_nodejs/development_environment/index.html +++ b/files/ko/learn/server-side/express_nodejs/development_environment/index.html @@ -1,6 +1,6 @@ --- title: Node 개발 환경을 설치하기 -slug: Learn/Server-side/Express_Nodejs/개발_환경 +slug: Learn/Server-side/Express_Nodejs/development_environment tags: - CodingScripting - Express @@ -13,6 +13,7 @@ tags: - 인트로 - 초보자 translation_of: Learn/Server-side/Express_Nodejs/development_environment +original_slug: Learn/Server-side/Express_Nodejs/개발_환경 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/server-side/express_nodejs/skeleton_website/index.html b/files/ko/learn/server-side/express_nodejs/skeleton_website/index.html index ca72e39124..32dc64faa9 100644 --- a/files/ko/learn/server-side/express_nodejs/skeleton_website/index.html +++ b/files/ko/learn/server-side/express_nodejs/skeleton_website/index.html @@ -1,7 +1,8 @@ --- title: 'Express Tutorial Part 2: 스켈레톤 웹사이트 만들기' -slug: Learn/Server-side/Express_Nodejs/스켈레톤_웹사이트 +slug: Learn/Server-side/Express_Nodejs/skeleton_website translation_of: Learn/Server-side/Express_Nodejs/skeleton_website +original_slug: Learn/Server-side/Express_Nodejs/스켈레톤_웹사이트 ---
{{LearnSidebar}}
diff --git a/files/ko/learn/server-side/node_server_without_framework/index.html b/files/ko/learn/server-side/node_server_without_framework/index.html index 1050f6aafd..43380d7e1a 100644 --- a/files/ko/learn/server-side/node_server_without_framework/index.html +++ b/files/ko/learn/server-side/node_server_without_framework/index.html @@ -1,7 +1,8 @@ --- title: Node server without framework -slug: Node_server_without_framework +slug: Learn/Server-side/Node_server_without_framework translation_of: Learn/Server-side/Node_server_without_framework +original_slug: Node_server_without_framework ---

소개

diff --git a/files/ko/mdn/at_ten/index.html b/files/ko/mdn/at_ten/index.html index d4883ca7cd..3f2e11b37c 100644 --- a/files/ko/mdn/at_ten/index.html +++ b/files/ko/mdn/at_ten/index.html @@ -1,6 +1,6 @@ --- title: MDN at 10 -slug: MDN_at_ten +slug: MDN/At_ten tags: - MDN - MDN 메타 @@ -8,6 +8,7 @@ tags: - 역사 - 출발 translation_of: MDN_at_ten +original_slug: MDN_at_ten --- diff --git a/files/ko/mdn/contribute/howto/convert_code_samples_to_be_live/index.html b/files/ko/mdn/contribute/howto/convert_code_samples_to_be_live/index.html index 27ac6774f1..1468978832 100644 --- a/files/ko/mdn/contribute/howto/convert_code_samples_to_be_live/index.html +++ b/files/ko/mdn/contribute/howto/convert_code_samples_to_be_live/index.html @@ -1,11 +1,12 @@ --- title: '"살아있는" 코드 샘플로 변환하기' -slug: MDN/Contribute/Howto/살아있는_코드_샘플로_변환하기 +slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live tags: - 라이브샘플 - 살아있는 코드 - 샘플코드 translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live +original_slug: MDN/Contribute/Howto/살아있는_코드_샘플로_변환하기 ---
{{MDNSidebar}}

MDN의 라이브 샘플 시스템이란, 페이지에서 보여주는 샘플 코드를 수정하면 이 샘플 코드의 실행 결과도 달라지는 기능을 말합니다. 많은 문서에 샘플 코드들이 있지만 모든 샘플이 이 시스템을 사용하고 있지는 않으며, 생명력을 불어 넣어줘야 합니다.

diff --git a/files/ko/mdn/contribute/howto/create_and_edit_pages/index.html b/files/ko/mdn/contribute/howto/create_and_edit_pages/index.html index 6993674a4f..10f0b2a87c 100644 --- a/files/ko/mdn/contribute/howto/create_and_edit_pages/index.html +++ b/files/ko/mdn/contribute/howto/create_and_edit_pages/index.html @@ -1,12 +1,13 @@ --- title: 페이지 생성 및 수정 -slug: MDN/Contribute/Creating_and_editing_pages +slug: MDN/Contribute/Howto/Create_and_edit_pages tags: - 초보자 - 페이지생성 - 페이지수정 - 페이지편집 translation_of: MDN/Contribute/Howto/Create_and_edit_pages +original_slug: MDN/Contribute/Creating_and_editing_pages ---
{{MDNSidebar}}

신규 공헌자가 이미 있는 문서를 수정하거나 신규 문서를 생성하는 법에 대해 설명합니다. 

diff --git a/files/ko/mdn/contribute/howto/write_an_api_reference/sidebars/index.html b/files/ko/mdn/contribute/howto/write_an_api_reference/sidebars/index.html index fd8be5585d..8769e65a9e 100644 --- a/files/ko/mdn/contribute/howto/write_an_api_reference/sidebars/index.html +++ b/files/ko/mdn/contribute/howto/write_an_api_reference/sidebars/index.html @@ -1,7 +1,8 @@ --- title: API 레퍼런스의 사이드바 -slug: MDN/Structures/API_references/API_reference_sidebars +slug: MDN/Contribute/Howto/Write_an_API_reference/Sidebars translation_of: MDN/Structures/API_references/API_reference_sidebars +original_slug: MDN/Structures/API_references/API_reference_sidebars ---
{{MDNSidebar}}
diff --git a/files/ko/mdn/guidelines/code_guidelines/general/index.html b/files/ko/mdn/guidelines/code_guidelines/general/index.html index 093f50ae47..e35f30140d 100644 --- a/files/ko/mdn/guidelines/code_guidelines/general/index.html +++ b/files/ko/mdn/guidelines/code_guidelines/general/index.html @@ -1,6 +1,6 @@ --- title: 모든 코드에 대한 일반 가이드라인 -slug: MDN/Guidelines/Code_guidelines/Code_guidelines +slug: MDN/Guidelines/Code_guidelines/General tags: - Code - General @@ -12,6 +12,7 @@ tags: - 코드 블록 - 코드 스타일 translation_of: MDN/Guidelines/Code_guidelines/General +original_slug: MDN/Guidelines/Code_guidelines/Code_guidelines ---
{{MDNSidebar}}{{IncludeSubnav("/ko/docs/MDN")}}
diff --git a/files/ko/mdn/guidelines/conventions_definitions/index.html b/files/ko/mdn/guidelines/conventions_definitions/index.html index d8c5f2b247..1386fbe2f3 100644 --- a/files/ko/mdn/guidelines/conventions_definitions/index.html +++ b/files/ko/mdn/guidelines/conventions_definitions/index.html @@ -1,11 +1,12 @@ --- title: 모범 사례 -slug: MDN/Guidelines/Best_practices +slug: MDN/Guidelines/Conventions_definitions tags: - Guide - Guidelines - MDN Meta translation_of: MDN/Guidelines/Conventions_definitions +original_slug: MDN/Guidelines/Best_practices ---
{{MDNSidebar}}

이 글은 MDN에서 추천하는 콘텐츠 작업 법을 설명합니다. 이 가이드라인은 더 나은 결과로 이끌 선호하는 일하는 법을 설명하거나 비슷한 일을 하는 여러 방법 중에서 결정에 조언을 제공합니다.

diff --git a/files/ko/mdn/guidelines/does_this_belong_on_mdn/index.html b/files/ko/mdn/guidelines/does_this_belong_on_mdn/index.html index 46f6395a52..b623e5e594 100644 --- a/files/ko/mdn/guidelines/does_this_belong_on_mdn/index.html +++ b/files/ko/mdn/guidelines/does_this_belong_on_mdn/index.html @@ -1,7 +1,8 @@ --- title: 이건 MDN에 있나요? -slug: MDN/Contribute/Does_this_belong +slug: MDN/Guidelines/Does_this_belong_on_MDN translation_of: MDN/Guidelines/Does_this_belong_on_MDN +original_slug: MDN/Contribute/Does_this_belong ---
{{MDNSidebar}}
{{IncludeSubnav("/ko/docs/MDN")}}
diff --git a/files/ko/mdn/guidelines/writing_style_guide/index.html b/files/ko/mdn/guidelines/writing_style_guide/index.html index 507f30e228..89c12f6377 100644 --- a/files/ko/mdn/guidelines/writing_style_guide/index.html +++ b/files/ko/mdn/guidelines/writing_style_guide/index.html @@ -1,6 +1,6 @@ --- title: MDN 스타일 가이드 -slug: MDN/Guidelines/Style_guide +slug: MDN/Guidelines/Writing_style_guide tags: - Documentation - Guide @@ -10,6 +10,7 @@ tags: - 스타일 가이드 - 스타일 가이드 작성 translation_of: MDN/Guidelines/Writing_style_guide +original_slug: MDN/Guidelines/Style_guide ---
{{MDNSidebar}}
diff --git a/files/ko/mdn/yari/index.html b/files/ko/mdn/yari/index.html index becf84221a..2a4fa0fa6b 100644 --- a/files/ko/mdn/yari/index.html +++ b/files/ko/mdn/yari/index.html @@ -1,11 +1,12 @@ --- title: '쿠마(Kuma): MDN 위키 플랫폼' -slug: MDN/Kuma +slug: MDN/Yari tags: - MDN 메타 - 시작하기 - 쿠마 translation_of: MDN/Kuma +original_slug: MDN/Kuma ---
{{MDNSidebar}}
diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/contexttype/index.html b/files/ko/mozilla/add-ons/webextensions/api/menus/contexttype/index.html index d6d933b22e..9ec44aaf70 100644 --- a/files/ko/mozilla/add-ons/webextensions/api/menus/contexttype/index.html +++ b/files/ko/mozilla/add-ons/webextensions/api/menus/contexttype/index.html @@ -1,7 +1,8 @@ --- title: menus.ContextType -slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/ContextType +slug: Mozilla/Add-ons/WebExtensions/API/menus/ContextType translation_of: Mozilla/Add-ons/WebExtensions/API/menus/ContextType +original_slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/ContextType ---
{{AddonSidebar()}}
diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/create/index.html b/files/ko/mozilla/add-ons/webextensions/api/menus/create/index.html index 9a053e6639..75b4bb92d5 100644 --- a/files/ko/mozilla/add-ons/webextensions/api/menus/create/index.html +++ b/files/ko/mozilla/add-ons/webextensions/api/menus/create/index.html @@ -1,7 +1,8 @@ --- title: menus.create() -slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/create +slug: Mozilla/Add-ons/WebExtensions/API/menus/create translation_of: Mozilla/Add-ons/WebExtensions/API/menus/create +original_slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/create ---
{{AddonSidebar()}}
diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/gettargetelement/index.html b/files/ko/mozilla/add-ons/webextensions/api/menus/gettargetelement/index.html index 7cb70b5fa7..495e97d1f1 100644 --- a/files/ko/mozilla/add-ons/webextensions/api/menus/gettargetelement/index.html +++ b/files/ko/mozilla/add-ons/webextensions/api/menus/gettargetelement/index.html @@ -1,7 +1,8 @@ --- title: menus.getTargetElement() -slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/getTargetElement +slug: Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement translation_of: Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement +original_slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/getTargetElement ---
{{AddonSidebar}}{{Draft}}
diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/index.html b/files/ko/mozilla/add-ons/webextensions/api/menus/index.html index 58f5af938b..7718d3b866 100644 --- a/files/ko/mozilla/add-ons/webextensions/api/menus/index.html +++ b/files/ko/mozilla/add-ons/webextensions/api/menus/index.html @@ -1,7 +1,8 @@ --- title: contextMenus -slug: Mozilla/Add-ons/WebExtensions/API/contextMenus +slug: Mozilla/Add-ons/WebExtensions/API/menus translation_of: Mozilla/Add-ons/WebExtensions/API/menus +original_slug: Mozilla/Add-ons/WebExtensions/API/contextMenus ---
{{AddonSidebar}}
diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/onshown/index.html b/files/ko/mozilla/add-ons/webextensions/api/menus/onshown/index.html index 1fd716e3bb..035077de99 100644 --- a/files/ko/mozilla/add-ons/webextensions/api/menus/onshown/index.html +++ b/files/ko/mozilla/add-ons/webextensions/api/menus/onshown/index.html @@ -1,7 +1,8 @@ --- title: menus.onShown -slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/onShown +slug: Mozilla/Add-ons/WebExtensions/API/menus/onShown translation_of: Mozilla/Add-ons/WebExtensions/API/menus/onShown +original_slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/onShown ---
{{AddonSidebar()}}
diff --git a/files/ko/mozilla/developer_guide/source_code/cvs/index.html b/files/ko/mozilla/developer_guide/source_code/cvs/index.html index bcd46453fc..81325c1507 100644 --- a/files/ko/mozilla/developer_guide/source_code/cvs/index.html +++ b/files/ko/mozilla/developer_guide/source_code/cvs/index.html @@ -1,6 +1,7 @@ --- title: Mozilla Source Code Via CVS -slug: Mozilla_Source_Code_Via_CVS +slug: Mozilla/Developer_guide/Source_Code/CVS +original_slug: Mozilla_Source_Code_Via_CVS ---

Those doing active development can check out the latest source using CVS. This is the preferred method if you plan to provide patches and fix bugs, as it lets you get up-to-the-minute changes and merge them with your own.

If you want to compile a product for release, it is generally better to Download Mozilla Source Code tarballs.

diff --git a/files/ko/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html b/files/ko/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html index 363b27b75e..d710dac260 100644 --- a/files/ko/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html +++ b/files/ko/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html @@ -1,11 +1,12 @@ --- title: Adapting XUL Applications for Firefox 1.5 -slug: Adapting_XUL_Applications_for_Firefox_1.5 +slug: Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5 tags: - Add-ons - Extensions - XUL translation_of: Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5 +original_slug: Adapting_XUL_Applications_for_Firefox_1.5 ---

이 페이지는 XUL 개발자에 영향을 미치는 Firefox 1.5에서 바뀐 점 목록을 포함합니다.

특정 바뀐 점

diff --git a/files/ko/mozilla/firefox/releases/1.5/index.html b/files/ko/mozilla/firefox/releases/1.5/index.html index fa1dba1cc6..35fc73dc12 100644 --- a/files/ko/mozilla/firefox/releases/1.5/index.html +++ b/files/ko/mozilla/firefox/releases/1.5/index.html @@ -1,6 +1,6 @@ --- title: Firefox 1.5 for developers -slug: Firefox_1.5_for_developers +slug: Mozilla/Firefox/Releases/1.5 tags: - Add-ons - CSS @@ -17,6 +17,7 @@ tags: - XSLT - XUL translation_of: Mozilla/Firefox/Releases/1.5 +original_slug: Firefox_1.5_for_developers ---

Firefox 1.5

Firefox 1.5를 출시하여 내려 받기할 수 있습니다. Gecko 1.8 엔진에 기반을 둔 이 최신 버전은 이미 최고인 클래스 표준 지원 개선과 다음 세대 웹 어플리케이션에서 가능한 새 기능을 제공합니다. Firefox 1.5는 CSS2와 CSS3 지원 개선, 많은 DHTML, JavaScript, DOM 향상은 물론 SVG 1.1과 <canvas>, XForms, XML 이벤트를 통한 스크립팅과 프로그래밍이 가능한 2D 그래픽스 API를 크게 다룹니다.

diff --git a/files/ko/mozilla/firefox/releases/2/index.html b/files/ko/mozilla/firefox/releases/2/index.html index e39f256625..e5c0ce7af2 100644 --- a/files/ko/mozilla/firefox/releases/2/index.html +++ b/files/ko/mozilla/firefox/releases/2/index.html @@ -1,7 +1,8 @@ --- title: Firefox 2 for developers -slug: Firefox_2_for_developers +slug: Mozilla/Firefox/Releases/2 translation_of: Mozilla/Firefox/Releases/2 +original_slug: Firefox_2_for_developers ---

Firefox 2 새로운 기능

Firefox 2는 다양하고 새로운 기능들을 소개하고 있습니다. 이 문서는 이러한 새로운 기능들을 소개하고 자세한 정보를 제공하고 있습니다. diff --git a/files/ko/mozilla/firefox/releases/2/updating_extensions/index.html b/files/ko/mozilla/firefox/releases/2/updating_extensions/index.html index b8c6f9f648..36933502e7 100644 --- a/files/ko/mozilla/firefox/releases/2/updating_extensions/index.html +++ b/files/ko/mozilla/firefox/releases/2/updating_extensions/index.html @@ -1,7 +1,8 @@ --- title: Updating extensions for Firefox 2 -slug: Updating_extensions_for_Firefox_2 +slug: Mozilla/Firefox/Releases/2/Updating_extensions translation_of: Mozilla/Firefox/Releases/2/Updating_extensions +original_slug: Updating_extensions_for_Firefox_2 ---

이 문서는 Firefox 2에서 확장 기능이 동작하도록 개발자들에게 유용한 정보를 제공해 줍니다.

diff --git a/files/ko/mozilla/firefox/releases/3.5/index.html b/files/ko/mozilla/firefox/releases/3.5/index.html index 2431607551..a5f2a553c1 100644 --- a/files/ko/mozilla/firefox/releases/3.5/index.html +++ b/files/ko/mozilla/firefox/releases/3.5/index.html @@ -1,7 +1,8 @@ --- title: Firefox 3.5 for developers -slug: Firefox_3.5_for_developers +slug: Mozilla/Firefox/Releases/3.5 translation_of: Mozilla/Firefox/Releases/3.5 +original_slug: Firefox_3.5_for_developers ---

Firefox 3.5은 넓은 범위의 향상된 웹 표준을 지원하는 것을 포함한 새로운 여러 가지 기능을 보여줍니다. 이 문서에는 향상된 부분 중 주된 부분에 대한 문서의 링크를 제공합니다.

Firefox 3.5에서 개발자를 위한 새로운 부분

diff --git a/files/ko/mozilla/firefox/releases/3.6/index.html b/files/ko/mozilla/firefox/releases/3.6/index.html index d6b5b7521f..2f72d6d2a7 100644 --- a/files/ko/mozilla/firefox/releases/3.6/index.html +++ b/files/ko/mozilla/firefox/releases/3.6/index.html @@ -1,7 +1,8 @@ --- title: 개발자를 위한 Firefox 3.6 -slug: 개발자를_위한_Firefox_3.6 +slug: Mozilla/Firefox/Releases/3.6 translation_of: Mozilla/Firefox/Releases/3.6 +original_slug: 개발자를_위한_Firefox_3.6 ---

Firefox 3.6은 새로운 웹표준, 향상된 퍼포먼스, 그리고 전체적으로 개선된 사용자와 개발자 경험을 제공합니다. 이 페이지에서는 Firefox 3.6의 새로운 기능을 다루는 링크를 제공합니다.

diff --git a/files/ko/mozilla/firefox/releases/3/dom_improvements/index.html b/files/ko/mozilla/firefox/releases/3/dom_improvements/index.html index 800e5979df..8c33dfc0af 100644 --- a/files/ko/mozilla/firefox/releases/3/dom_improvements/index.html +++ b/files/ko/mozilla/firefox/releases/3/dom_improvements/index.html @@ -1,10 +1,11 @@ --- title: DOM improvements in Firefox 3 -slug: DOM_improvements_in_Firefox_3 +slug: Mozilla/Firefox/Releases/3/DOM_improvements tags: - DOM - Firefox 3 translation_of: Mozilla/Firefox/Releases/3/DOM_improvements +original_slug: DOM_improvements_in_Firefox_3 ---

{{ Fx_minversion_header(3) }}

Firefox 3에서는 Document Object Model (DOM)에 있어 다양한 개선이 있었으며, 특히 다른 브라우저들에서 제공되는 DOM의 확장을 지원한다는 면에서 특히 그러합니다. 본 글은 이러한 개선 사항들과 세부 문서에 대한 링크들로 구성되어 있습니다.

diff --git a/files/ko/mozilla/firefox/releases/3/full_page_zoom/index.html b/files/ko/mozilla/firefox/releases/3/full_page_zoom/index.html index 3051b40775..aced021100 100644 --- a/files/ko/mozilla/firefox/releases/3/full_page_zoom/index.html +++ b/files/ko/mozilla/firefox/releases/3/full_page_zoom/index.html @@ -1,7 +1,8 @@ --- title: Full page zoom -slug: Full_page_zoom +slug: Mozilla/Firefox/Releases/3/Full_page_zoom translation_of: Mozilla/Firefox/Releases/3/Full_page_zoom +original_slug: Full_page_zoom ---

{{ Gecko_minversion_header("1.9") }}

전체 페이지 확대(또는 그냥 전체 확대)는 Firefox 3에서 지원하게 될 새로운 기능입니다. Gecko 1.9a7 버전부터 트렁크 빌드에서 사용이 가능합니다. 지금은 사용자 인터페이스가 없지만 자바스크립트와 nsIMarkupDocumentViewer XPCOM 인터페이스를 사용할 수 있습니다.

diff --git a/files/ko/mozilla/firefox/releases/3/notable_bugs_fixed/index.html b/files/ko/mozilla/firefox/releases/3/notable_bugs_fixed/index.html index fa8b5ea99a..1463c8502a 100644 --- a/files/ko/mozilla/firefox/releases/3/notable_bugs_fixed/index.html +++ b/files/ko/mozilla/firefox/releases/3/notable_bugs_fixed/index.html @@ -1,7 +1,8 @@ --- title: Notable bugs fixed in Firefox 3 -slug: Notable_bugs_fixed_in_Firefox_3 +slug: Mozilla/Firefox/Releases/3/Notable_bugs_fixed translation_of: Mozilla/Firefox/Releases/3/Notable_bugs_fixed +original_slug: Notable_bugs_fixed_in_Firefox_3 ---

이 글은 문서에서는 명확하지 않을 수도 있는 Firefox 3의 중요한 버그 수정 목록을 제공합니다.

    diff --git a/files/ko/mozilla/firefox/releases/3/svg_improvements/index.html b/files/ko/mozilla/firefox/releases/3/svg_improvements/index.html index e64f1600bc..c48ba98724 100644 --- a/files/ko/mozilla/firefox/releases/3/svg_improvements/index.html +++ b/files/ko/mozilla/firefox/releases/3/svg_improvements/index.html @@ -1,10 +1,11 @@ --- title: SVG improvements in Firefox 3 -slug: SVG_improvements_in_Firefox_3 +slug: Mozilla/Firefox/Releases/3/SVG_improvements tags: - Firefox 3 - SVG translation_of: Mozilla/Firefox/Releases/3/SVG_improvements +original_slug: SVG_improvements_in_Firefox_3 ---

    {{ Fx_minversion_header(3) }}

    Firefox 3에서는 이전 버전에 비해 Scalable Vector Graphics (SVG)에 대한 향상된 지원을 제공합니다. 이러한 내용은 다른 곳에서도 문서화되어 있지만, Firefox 3에서 어떤 기능들이 추가되었는지 쉽게 찾아볼 수 있도록 본 글이 작성되었습니다.

    diff --git a/files/ko/mozilla/firefox/releases/3/updating_extensions/index.html b/files/ko/mozilla/firefox/releases/3/updating_extensions/index.html index 82531182f4..d698b8d8db 100644 --- a/files/ko/mozilla/firefox/releases/3/updating_extensions/index.html +++ b/files/ko/mozilla/firefox/releases/3/updating_extensions/index.html @@ -1,9 +1,10 @@ --- title: Updating extensions for Firefox 3 -slug: Updating_extensions_for_Firefox_3 +slug: Mozilla/Firefox/Releases/3/Updating_extensions tags: - Firefox 3 translation_of: Mozilla/Firefox/Releases/3/Updating_extensions +original_slug: Updating_extensions_for_Firefox_3 ---

    초안
    diff --git a/files/ko/mozilla/firefox/releases/3/updating_web_applications/index.html b/files/ko/mozilla/firefox/releases/3/updating_web_applications/index.html index 6598042587..dc1b800713 100644 --- a/files/ko/mozilla/firefox/releases/3/updating_web_applications/index.html +++ b/files/ko/mozilla/firefox/releases/3/updating_web_applications/index.html @@ -1,9 +1,10 @@ --- title: Updating web applications for Firefox 3 -slug: Updating_web_applications_for_Firefox_3 +slug: Mozilla/Firefox/Releases/3/Updating_web_applications tags: - Firefox 3 translation_of: Mozilla/Firefox/Releases/3/Updating_web_applications +original_slug: Updating_web_applications_for_Firefox_3 ---

    {{ Fx_minversion_header(3) }}{{ Draft() }} Firefox 3에는 웹 사이트와 웹 애플리케이션에 영향을 줄 수 있는 다수의 변경 사항과 잇점을 줄 수 있는 새로운 기능이 포함 되어 있습니다. 이 문서는 Firefox 3의 잇점을 최대한 이용 가능할 수 있도록 웹 사이트를 업데이트 하는 방법을 알려 줄 것입니다.

    diff --git a/files/ko/orphaned/how_to_build_an_xpcom_component_in_javascript/index.html b/files/ko/orphaned/how_to_build_an_xpcom_component_in_javascript/index.html index a2f6f18b0c..522b51b69f 100644 --- a/files/ko/orphaned/how_to_build_an_xpcom_component_in_javascript/index.html +++ b/files/ko/orphaned/how_to_build_an_xpcom_component_in_javascript/index.html @@ -1,10 +1,11 @@ --- title: How to Build an XPCOM Component in Javascript -slug: How_to_Build_an_XPCOM_Component_in_Javascript +slug: orphaned/How_to_Build_an_XPCOM_Component_in_Javascript tags: - Add-ons - Extensions - XPCOM +original_slug: How_to_Build_an_XPCOM_Component_in_Javascript ---

    본 문서는 자바스크립트에서 XPCOM 컴포넌트를 만드는 방법을 소개합니다. 이 문서에서는 XPCOM이 어떻게 움직이는지 혹은 그에 대한 코드는 다루지 않습니다. 자세한 사항은 XPCOM에서 아실 수 있습니다. 여기서는 실제로 이를 어떻게 움직이게하는 가에 달려 있습니다. diff --git a/files/ko/orphaned/javascript_c_engine_embedder's_guide/index.html b/files/ko/orphaned/javascript_c_engine_embedder's_guide/index.html index db46ed7fee..e01a0c9830 100644 --- a/files/ko/orphaned/javascript_c_engine_embedder's_guide/index.html +++ b/files/ko/orphaned/javascript_c_engine_embedder's_guide/index.html @@ -1,8 +1,9 @@ --- title: JavaScript C Engine Embedder's Guide -slug: JavaScript_C_Engine_Embedder's_Guide +slug: orphaned/JavaScript_C_Engine_Embedder's_Guide tags: - SpiderMonkey +original_slug: JavaScript_C_Engine_Embedder's_Guide ---

    이 문서는 C로 구현된 JavaScript 엔진인 SpiderMonkey를 전반적으로 소개하며, 애플리케이션이 JavaScript를 인식하도록 하기 위해 어떻게 엔진을 내장하는지에 대해 설명합니다. JavaScript엔진을 여러분의 애플리케이션에 내장하는데는 두가지 큰 이유가 있을 것입니다. 먼저, 스크립트를 사용하여 애플리케이션을 자동화하는 것이 있고, JavaScript엔진과 스크립트를 사용하여 특정 플랫폼에 의존적인 애플케이션 솔루션이 되지 않도록 크로스 플랫폼을 지원하는 것입니다.

    지원되는 자바스크립트 버전

    diff --git a/files/ko/orphaned/learn/how_to_contribute/index.html b/files/ko/orphaned/learn/how_to_contribute/index.html index 08ee091c24..14fa2761a3 100644 --- a/files/ko/orphaned/learn/how_to_contribute/index.html +++ b/files/ko/orphaned/learn/how_to_contribute/index.html @@ -1,15 +1,16 @@ --- title: MDN의 학습 영역에 기여하는 방법 -slug: Learn/How_to_contribute +slug: orphaned/Learn/How_to_contribute tags: - Documentation - MDN Meta - - 'l10n:priority' + - l10n:priority - 가이드 - 배우기 - 참여 - 초보자 translation_of: Learn/How_to_contribute +original_slug: Learn/How_to_contribute ---
    {{LearnSidebar}}
    diff --git a/files/ko/orphaned/mdn/about/mdn_services/index.html b/files/ko/orphaned/mdn/about/mdn_services/index.html index 1d04e3d468..ec7021b9c1 100644 --- a/files/ko/orphaned/mdn/about/mdn_services/index.html +++ b/files/ko/orphaned/mdn/about/mdn_services/index.html @@ -1,10 +1,11 @@ --- title: MDN Services -slug: MDN/About/MDN_services +slug: orphaned/MDN/About/MDN_services tags: - Landing - MDN Meta translation_of: MDN/About/MDN_services +original_slug: MDN/About/MDN_services ---
    {{MDNSidebar}}
    diff --git a/files/ko/orphaned/mdn/community/conversations/index.html b/files/ko/orphaned/mdn/community/conversations/index.html index 9d41e6c30c..16d0d9bacb 100644 --- a/files/ko/orphaned/mdn/community/conversations/index.html +++ b/files/ko/orphaned/mdn/community/conversations/index.html @@ -1,11 +1,12 @@ --- title: MDN community conversations -slug: MDN/Community/Conversations +slug: orphaned/MDN/Community/Conversations tags: - Community - Guide - MDN Meta translation_of: MDN/Community/Conversations +original_slug: MDN/Community/Conversations ---
    {{MDNSidebar}}
    diff --git a/files/ko/orphaned/mdn/community/index.html b/files/ko/orphaned/mdn/community/index.html index faff8c5f2e..ac179cda5b 100644 --- a/files/ko/orphaned/mdn/community/index.html +++ b/files/ko/orphaned/mdn/community/index.html @@ -1,12 +1,13 @@ --- title: MDN 커뮤니티 참여하기 -slug: MDN/Community +slug: orphaned/MDN/Community tags: - Community - Guide - Landing - MDN Meta translation_of: MDN/Community +original_slug: MDN/Community ---
    {{MDNSidebar}}
    diff --git a/files/ko/orphaned/mdn/community/working_in_community/index.html b/files/ko/orphaned/mdn/community/working_in_community/index.html index 0398e29823..c35f66fe9a 100644 --- a/files/ko/orphaned/mdn/community/working_in_community/index.html +++ b/files/ko/orphaned/mdn/community/working_in_community/index.html @@ -1,7 +1,8 @@ --- title: 커뮤니티에서의 활동 -slug: MDN/Community/Working_in_community +slug: orphaned/MDN/Community/Working_in_community translation_of: MDN/Community/Working_in_community +original_slug: MDN/Community/Working_in_community ---
    {{MDNSidebar}}
    diff --git a/files/ko/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/ko/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html index b3b84a92b1..ba43bdafe7 100644 --- a/files/ko/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html +++ b/files/ko/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html @@ -1,12 +1,13 @@ --- title: MDN 계정 생성 -slug: MDN/Contribute/Howto/MDN_계정_생성하기 +slug: orphaned/MDN/Contribute/Howto/Create_an_MDN_account tags: - 가입 - 계정 - 시작하기 - 인증 translation_of: MDN/Contribute/Howto/Create_an_MDN_account +original_slug: MDN/Contribute/Howto/MDN_계정_생성하기 ---
    {{MDNSidebar}}

    페이지를 수정하거나 데모에 기여하는 등 MDN의 컨텐츠를 변경하려면 MDN 프로필이 필요합니다. 단지 내용을 읽거나 검색하는 것에는 프로필이 필요없으니 걱정하지 마세요. 아래는 MDN 프로필을 설정하기 위한 가이드입니다.

    diff --git a/files/ko/orphaned/mdn/contribute/howto/do_a_technical_review/index.html b/files/ko/orphaned/mdn/contribute/howto/do_a_technical_review/index.html index 9b648a8d0c..9fbae8650b 100644 --- a/files/ko/orphaned/mdn/contribute/howto/do_a_technical_review/index.html +++ b/files/ko/orphaned/mdn/contribute/howto/do_a_technical_review/index.html @@ -1,7 +1,8 @@ --- title: 기술 리뷰를 하는 방법 -slug: MDN/Contribute/Howto/Do_a_technical_review +slug: orphaned/MDN/Contribute/Howto/Do_a_technical_review translation_of: MDN/Contribute/Howto/Do_a_technical_review +original_slug: MDN/Contribute/Howto/Do_a_technical_review ---
    {{MDNSidebar}}

    기술 리뷰는 기술적 정확성과 글의 완결성을 검토하는 것, 필요하다면 수정하는 것으로 이루어집니다. 글의 작성자가 다른 사람이 글의 기술적 내용을 확인하는 것을 바란다면, 작성자는 편집을 하는동안 "Technical review" 체크박스에 체크합니다. 작성자는 대개 기술 리뷰를 위해 특정한 엔지니어와 접촉하지만, 해당 주제에 대한 전문가라면 누구라도 가능합니다.

    이 글은 기술 리뷰를 어떻게 하는지에 대해 기술하고, 그에 따라서 MDN의 컨텐츠들이 정확하도록 도움을 줍니다.

    diff --git a/files/ko/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/ko/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html index 13b2f0d4a1..ebecb25a78 100644 --- a/files/ko/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html +++ b/files/ko/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html @@ -1,7 +1,8 @@ --- title: 편집 검토를 하는 방법 -slug: MDN/Contribute/Howto/Do_an_editorial_review +slug: orphaned/MDN/Contribute/Howto/Do_an_editorial_review translation_of: MDN/Contribute/Howto/Do_an_editorial_review +original_slug: MDN/Contribute/Howto/Do_an_editorial_review ---
    {{MDNSidebar}}
    {{IncludeSubnav("/ko-KR/docs/MDN")}}
    diff --git a/files/ko/orphaned/mdn/contribute/howto/document_a_css_property/property_template/index.html b/files/ko/orphaned/mdn/contribute/howto/document_a_css_property/property_template/index.html index 9df3680b49..fc939a2aca 100644 --- a/files/ko/orphaned/mdn/contribute/howto/document_a_css_property/property_template/index.html +++ b/files/ko/orphaned/mdn/contribute/howto/document_a_css_property/property_template/index.html @@ -1,10 +1,11 @@ --- title: Property Template -slug: Web/CSS/Reference/Property_Template +slug: orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template tags: - CSS - MDN Meta translation_of: MDN/Contribute/Howto/Document_a_CSS_property/Property_template +original_slug: Web/CSS/Reference/Property_Template ---

    {{MDNSidebar}}

    diff --git a/files/ko/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/ko/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html index e26a3d3a05..6ab33e31d4 100644 --- a/files/ko/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html +++ b/files/ko/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html @@ -1,7 +1,8 @@ --- title: 페이지에 대한 요약을 설정하는 방법 -slug: MDN/Contribute/Howto/Set_the_summary_for_a_page +slug: orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page +original_slug: MDN/Contribute/Howto/Set_the_summary_for_a_page ---
    {{MDNSidebar}}
    diff --git a/files/ko/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html b/files/ko/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html index 8825a20a62..a34ae695ef 100644 --- a/files/ko/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html +++ b/files/ko/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html @@ -1,7 +1,8 @@ --- title: JavaScript tag를 다는 방법 -slug: MDN/Contribute/Howto/Tag_JavaScript_pages +slug: orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages +original_slug: MDN/Contribute/Howto/Tag_JavaScript_pages ---
    {{MDNSidebar}}

    태그달기는 페이지에 메타 정보를 추가함을 통해 관련된 내용이 묶여질수 있도록 하는 작업을 포함합니다.

    diff --git a/files/ko/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/ko/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html index 1eddcc7383..72f5ebb56f 100644 --- a/files/ko/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html +++ b/files/ko/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html @@ -1,7 +1,8 @@ --- title: 사람들이 웹에 대해 알 수 있도록 기사를 작성하는 방법 -slug: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +slug: orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +original_slug: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web ---
    {{MDNSidebar}}
    diff --git a/files/ko/orphaned/mdn/editor/index.html b/files/ko/orphaned/mdn/editor/index.html index a327f0fd89..48abb52ed3 100644 --- a/files/ko/orphaned/mdn/editor/index.html +++ b/files/ko/orphaned/mdn/editor/index.html @@ -1,10 +1,11 @@ --- title: MDN 에디터 UI 가이드 -slug: MDN/Editor +slug: orphaned/MDN/Editor tags: - Landing - MDN translation_of: MDN/Editor +original_slug: MDN/Editor ---
    {{MDNSidebar}}
    diff --git a/files/ko/orphaned/mdn/editor/links/index.html b/files/ko/orphaned/mdn/editor/links/index.html index f6217db92c..ae7d0d7cc1 100644 --- a/files/ko/orphaned/mdn/editor/links/index.html +++ b/files/ko/orphaned/mdn/editor/links/index.html @@ -1,12 +1,13 @@ --- title: Links -slug: MDN/Editor/Links +slug: orphaned/MDN/Editor/Links tags: - MDN - 가이드 - 문서화 - 에디터 translation_of: MDN/Editor/Links +original_slug: MDN/Editor/Links ---
    {{MDNSidebar}}
    diff --git a/files/ko/orphaned/mdn/structures/api_references/index.html b/files/ko/orphaned/mdn/structures/api_references/index.html index c521b5f4ec..9218476c34 100644 --- a/files/ko/orphaned/mdn/structures/api_references/index.html +++ b/files/ko/orphaned/mdn/structures/api_references/index.html @@ -1,12 +1,13 @@ --- title: API 레퍼런스 -slug: MDN/Structures/API_references +slug: orphaned/MDN/Structures/API_references tags: - API - 가이드 - 레퍼런스 - 봉사 translation_of: MDN/Structures/API_references +original_slug: MDN/Structures/API_references ---
    {{MDNSidebar}}
    diff --git a/files/ko/orphaned/mdn/tools/page_regeneration/index.html b/files/ko/orphaned/mdn/tools/page_regeneration/index.html index 2b75d2508f..b6d26e63be 100644 --- a/files/ko/orphaned/mdn/tools/page_regeneration/index.html +++ b/files/ko/orphaned/mdn/tools/page_regeneration/index.html @@ -1,12 +1,13 @@ --- title: 페이지 재생성 -slug: MDN/Tools/페이지_재생성 +slug: orphaned/MDN/Tools/Page_regeneration tags: - Guide - MDN Meta - Page-level - Tools translation_of: MDN/Tools/Page_regeneration +original_slug: MDN/Tools/페이지_재생성 ---
    {{MDNSidebar}}

    MDN 사이트는 성능상의 이유로 페이지를 캐시합니다. 그 결과, 당신이 페이지에 저장한 변경 사항이 다음 번 페이지 새로 고침할 때 나타나지 않을 수 있습니다. 자주, 항상은 아니지만, 배너가 페이지 업데이트가 진행 중임을 알리는 페이지에 나타납니다. 당신은 서버에서 페이지를 새로 고침하기 위해 브라우저에 "강제 새로 고침"을 할 수 있지만, 이는 서버의 업데이트가 끝나지 않았다면 효과가 없을 지도 모릅니다.

    diff --git a/files/ko/orphaned/places/custom_containers/index.html b/files/ko/orphaned/places/custom_containers/index.html index 305255ee4d..695f57aea1 100644 --- a/files/ko/orphaned/places/custom_containers/index.html +++ b/files/ko/orphaned/places/custom_containers/index.html @@ -1,8 +1,9 @@ --- title: Custom Containers -slug: Places/Custom_Containers +slug: orphaned/Places/Custom_Containers tags: - Places +original_slug: Places/Custom_Containers ---

    사용자 정의 콘테이너는 확장이나 기타 서비스가 플레이스 폴더의 결과를 동적으로 제공하는 것을 가능하게 합니다. 이 문서를 읽기 전에 질의와 결과의 작동 방법에 대한 플레이스 질의 시스템을 숙지하는 것이 좋습니다.

    diff --git a/files/ko/orphaned/places/instantiating_views/index.html b/files/ko/orphaned/places/instantiating_views/index.html index 4fdcc5d1c9..2d7c0e0923 100644 --- a/files/ko/orphaned/places/instantiating_views/index.html +++ b/files/ko/orphaned/places/instantiating_views/index.html @@ -1,8 +1,9 @@ --- title: Instantiating Views -slug: Places/Instantiating_Views +slug: orphaned/Places/Instantiating_Views tags: - Places +original_slug: Places/Instantiating_Views ---

    여러분의 확장이나 애플리케이션에서 북마크나 히스토리의 내용을 보여주려면 내장 플레이스 뷰를 사용할 수 있습니다. 이는 포괄적이며, 기본 기능을 작성하는 시간을 많이 아껴주므로 여러분은 애플리케이션을 작성하는데 집중할 수 있습니다.

    diff --git a/files/ko/orphaned/places/query_system/index.html b/files/ko/orphaned/places/query_system/index.html index 1a3dccf574..9caeb1fe7f 100644 --- a/files/ko/orphaned/places/query_system/index.html +++ b/files/ko/orphaned/places/query_system/index.html @@ -1,9 +1,10 @@ --- title: Query System -slug: Places/Query_System +slug: orphaned/Places/Query_System tags: - Firefox 3 - Places +original_slug: Places/Query_System ---

    Firefox의 히스토리와 북마크 데이터는 "플레이스" 질의 API를 이용하여 접근할 수 있습니다. 이 API는 히스토리, 북마크, 그리고 두 가지 모두에 대하여 복잡한 질의를 실행할 수 있는 기능을 제공합니다. 질의의 결과는 조건에 맞는 데이터의 단순 목록이나 트리 구조를 포함한 개체입니다. 질의 API와 결과 데이터의 구조에 대한 정의는 toolkit/components/places/public/nsINavHistoryService.idl에 있습니다. 이 페이지는 일반적인 작업에 대한 소개와 핵심 API 사용법에 대한 예제를 제공합니다.

    diff --git a/files/ko/orphaned/places/views/index.html b/files/ko/orphaned/places/views/index.html index 7f4233cc5a..6678035a7b 100644 --- a/files/ko/orphaned/places/views/index.html +++ b/files/ko/orphaned/places/views/index.html @@ -1,8 +1,9 @@ --- title: Views -slug: Places/Views +slug: orphaned/Places/Views tags: - Places +original_slug: Places/Views ---

    뷰는 nsINavHistoryResult 개체를 사용자에게 표시하는 방법입니다. 뷰는 nsINavHistoryService.idl에 정의된 nsINavHistoryResultViewer 인터페이스를 구현합니다.

    diff --git a/files/ko/orphaned/theme_packaging/index.html b/files/ko/orphaned/theme_packaging/index.html index 0ff635c4aa..0e911afff3 100644 --- a/files/ko/orphaned/theme_packaging/index.html +++ b/files/ko/orphaned/theme_packaging/index.html @@ -1,10 +1,11 @@ --- title: Theme Packaging -slug: Theme_Packaging +slug: orphaned/Theme_Packaging tags: - Add-ons - Themes - Toolkit API +original_slug: Theme_Packaging ---

    이 문서는 파이어폭스나 썬더버드에서 테마를 포장하는 방법에 대해서 기술하고 있습니다.

    준비사항

    diff --git a/files/ko/orphaned/tools/add-ons/dom_inspector/index.html b/files/ko/orphaned/tools/add-ons/dom_inspector/index.html index d84e82b45e..bb57c113ea 100644 --- a/files/ko/orphaned/tools/add-ons/dom_inspector/index.html +++ b/files/ko/orphaned/tools/add-ons/dom_inspector/index.html @@ -1,13 +1,14 @@ --- title: DOM Inspector -slug: Tools/Add-ons/DOM_Inspector +slug: orphaned/Tools/Add-ons/DOM_Inspector tags: - - 'DOM:Tools' - - 'Extensions:Tools' - - 'Themes:Tools' - - 'Web Development:Tools' - - 'XUL:Tools' + - DOM:Tools + - Extensions:Tools + - Themes:Tools + - Web Development:Tools + - XUL:Tools translation_of: Tools/Add-ons/DOM_Inspector +original_slug: Tools/Add-ons/DOM_Inspector ---
    {{ToolsSidebar}}

    DOMi로도 알려진 DOM Inspector는 문서 - 보통 웹 페이지 또는 XUL windows - 의 Document Object Model을 검증, 검색, 편집하는데 사용되는 Mozilla 도구입니다.

    diff --git a/files/ko/orphaned/tools/add-ons/index.html b/files/ko/orphaned/tools/add-ons/index.html index 24ffbe79e9..05b25237f5 100644 --- a/files/ko/orphaned/tools/add-ons/index.html +++ b/files/ko/orphaned/tools/add-ons/index.html @@ -1,12 +1,13 @@ --- title: Add-ons -slug: Tools/Add-ons +slug: orphaned/Tools/Add-ons tags: - NeedsTranslation - TopicStub - Web Development - - 'Web Development:Tools' + - Web Development:Tools translation_of: Tools/Add-ons +original_slug: Tools/Add-ons ---
    {{ToolsSidebar}}

    Developer tools that are not built into Firefox, but ship as separate add-ons.

    diff --git a/files/ko/orphaned/using_mozilla_in_testing_and_debugging_web_sites/index.html b/files/ko/orphaned/using_mozilla_in_testing_and_debugging_web_sites/index.html index 194ca2c7b7..e315ea43dd 100644 --- a/files/ko/orphaned/using_mozilla_in_testing_and_debugging_web_sites/index.html +++ b/files/ko/orphaned/using_mozilla_in_testing_and_debugging_web_sites/index.html @@ -1,7 +1,8 @@ --- title: Using Mozilla in Testing and Debugging Web Sites -slug: Using_Mozilla_in_Testing_and_Debugging_Web_Sites +slug: orphaned/Using_Mozilla_in_Testing_and_Debugging_Web_Sites translation_of: Using_Mozilla_in_Testing_and_Debugging_Web_Sites +original_slug: Using_Mozilla_in_Testing_and_Debugging_Web_Sites ---

    Original Document Information

    diff --git a/files/ko/orphaned/web/css/index/index.html b/files/ko/orphaned/web/css/index/index.html index 953130cd26..52279781f5 100644 --- a/files/ko/orphaned/web/css/index/index.html +++ b/files/ko/orphaned/web/css/index/index.html @@ -1,10 +1,11 @@ --- title: CSS documentation index -slug: Web/CSS/Index +slug: orphaned/Web/CSS/Index tags: - CSS - Index - MDN Meta translation_of: Web/CSS/Index +original_slug: Web/CSS/Index ---

    {{Index("/ko/docs/Web/CSS")}}

    diff --git a/files/ko/orphaned/web/html/element/command/index.html b/files/ko/orphaned/web/html/element/command/index.html index 8353384f2a..458108784f 100644 --- a/files/ko/orphaned/web/html/element/command/index.html +++ b/files/ko/orphaned/web/html/element/command/index.html @@ -1,12 +1,13 @@ --- title: -slug: Web/HTML/Element/command +slug: orphaned/Web/HTML/Element/command tags: - HTML - Obsolete - Reference - Web translation_of: Web/HTML/Element/command +original_slug: Web/HTML/Element/command ---
    {{obsolete_header()}}
    diff --git a/files/ko/orphaned/web/html/element/element/index.html b/files/ko/orphaned/web/html/element/element/index.html index be045093a5..9f5f8e5190 100644 --- a/files/ko/orphaned/web/html/element/element/index.html +++ b/files/ko/orphaned/web/html/element/element/index.html @@ -1,7 +1,8 @@ --- title: -slug: Web/HTML/Element/element +slug: orphaned/Web/HTML/Element/element translation_of: Web/HTML/Element/element +original_slug: Web/HTML/Element/element ---
    {{HTMLRef}}{{obsolete_header}}
    diff --git a/files/ko/orphaned/web/html/global_attributes/dropzone/index.html b/files/ko/orphaned/web/html/global_attributes/dropzone/index.html index 15d26aad15..488b51cf46 100644 --- a/files/ko/orphaned/web/html/global_attributes/dropzone/index.html +++ b/files/ko/orphaned/web/html/global_attributes/dropzone/index.html @@ -1,12 +1,13 @@ --- title: dropzone -slug: Web/HTML/Global_attributes/dropzone +slug: orphaned/Web/HTML/Global_attributes/dropzone tags: - Deprecated - Global attributes - HTML - Reference translation_of: Web/HTML/Global_attributes/dropzone +original_slug: Web/HTML/Global_attributes/dropzone ---
    {{HTMLSidebar("Global_attributes")}}{{deprecated_header}}
    diff --git a/files/ko/orphaned/web/javascript/differential_inheritance_in_javascript/index.html b/files/ko/orphaned/web/javascript/differential_inheritance_in_javascript/index.html index 70fd4256c3..0d247bd7f8 100644 --- a/files/ko/orphaned/web/javascript/differential_inheritance_in_javascript/index.html +++ b/files/ko/orphaned/web/javascript/differential_inheritance_in_javascript/index.html @@ -1,7 +1,8 @@ --- title: Differential inheritance in JavaScript -slug: Web/JavaScript/Differential_inheritance_in_JavaScript +slug: orphaned/Web/JavaScript/Differential_inheritance_in_JavaScript translation_of: Web/JavaScript/Differential_inheritance_in_JavaScript +original_slug: Web/JavaScript/Differential_inheritance_in_JavaScript ---

    Introduction

    diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html index 05deb2017f..69e27ae450 100644 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html +++ b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html @@ -1,6 +1,7 @@ --- title: About -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About +slug: orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About +original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About ---

    이번 릴리즈의 새 기능

    JavaScript 버전 1.5는 다음과 같은 개선과 새 기능을 제공합니다: diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html index 20601a0e81..2ff86aff3c 100644 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html +++ b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html @@ -1,6 +1,8 @@ --- title: Class-Based vs. Prototype-Based Languages slug: >- + orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages +original_slug: >- Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages ---

    클래스 기반언어와 프로토타입 기반언어

    diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html index d969b378f4..ebebbdbb32 100644 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html +++ b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html @@ -1,6 +1,8 @@ --- title: Creating a Regular Expression slug: >- + orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression +original_slug: >- Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression ---

    정규표현식 만들기

    diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html index 3238e19b0f..760bf0d3a0 100644 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html +++ b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html @@ -1,6 +1,8 @@ --- title: Defining Getters and Setters slug: >- + orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters +original_slug: >- Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters ---

    getter/setter 정의하기

    diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html index 8e91a2007f..dd76945d49 100644 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html +++ b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html @@ -1,6 +1,8 @@ --- title: Defining Methods slug: >- + orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods +original_slug: >- Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods ---

    메소드 정의

    diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html index 17c2aa7de8..6b458144cc 100644 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html +++ b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html @@ -1,6 +1,8 @@ --- title: Defining Properties for an Object Type slug: >- + orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type +original_slug: >- Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type ---

    개체 형식에 속성 정의하기

    diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html index 1b6f50cc11..e5cf88cec9 100644 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html +++ b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html @@ -1,6 +1,8 @@ --- title: Deleting Properties slug: >- + orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties +original_slug: >- Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties ---

    속성 제거

    diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html index 8345ba1478..a1a24a41af 100644 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html +++ b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html @@ -1,6 +1,8 @@ --- title: Creating New Objects slug: >- + orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects +original_slug: >- Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects --- {{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html index 84b9df2c2d..6c96480b54 100644 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html +++ b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html @@ -1,6 +1,8 @@ --- title: Indexing Object Properties slug: >- + orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties +original_slug: >- Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties ---

    개체 속성 접근하기

    diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html index 552347b70e..0b2e514d4b 100644 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html +++ b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html @@ -1,6 +1,8 @@ --- title: Using a Constructor Function slug: >- + orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function +original_slug: >- Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function ---

    생성자 함수 사용하기

    diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html index 0ed663ae1f..2c67101057 100644 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html +++ b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html @@ -1,6 +1,8 @@ --- title: Using this for Object References slug: >- + orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References +original_slug: >- Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References ---

    this를 사용한 개체 참조

    diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html index d9f8bb0bf9..e1d0b7a8c9 100644 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html +++ b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html @@ -1,6 +1,8 @@ --- title: Expressions -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions +slug: >- + orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions +original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions ---

    표현식

    표현식은 상수(literals), 변수, 연산자 그리고 단일값을 반환하는 계산식(값은 숫자, 문자열, 논리값이 가능)이 알맞게 조합된 집합체다. diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html index 310ab25c67..8bd3674552 100644 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html +++ b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html @@ -1,6 +1,8 @@ --- title: JavaScript Overview slug: >- + orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview +original_slug: >- Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview ---

    JavaScript란 무엇인가?

    diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html index abe9ff83f4..0b40cb802d 100644 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html +++ b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html @@ -1,6 +1,8 @@ --- title: Objects and Properties slug: >- + orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties +original_slug: >- Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties ---

    객체와 속성

    diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html index dbc284f12f..e76f0b7653 100644 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html +++ b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html @@ -1,6 +1,8 @@ --- title: Assignment Operators slug: >- + orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators +original_slug: >- Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators ---

    할당 연산자

    diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html index 53b8e67492..a0c66afea2 100644 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html +++ b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html @@ -1,6 +1,8 @@ --- title: Operators -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators +slug: >- + orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators +original_slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators ---

    연산자

    JavaScript에는 다음과 같은 연산자 타입이 있습니다. 이 섹션은 연산자에 대해 기술하고 연산자 우선순위에 대한 정보를 제공합니다. diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html index 1f6ef48f3a..5d7d2e2892 100644 --- a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html +++ b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html @@ -1,6 +1,8 @@ --- title: Array Object slug: >- + orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object +original_slug: >- Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object ---

    Array 개체

    diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html index 6ba56eb37e..f68990df5e 100644 --- a/files/ko/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html +++ b/files/ko/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html @@ -1,6 +1,6 @@ --- title: BigInt.prototype -slug: Web/JavaScript/Reference/Global_Objects/BigInt/prototype +slug: orphaned/Web/JavaScript/Reference/Global_Objects/BigInt/prototype tags: - BigInt - JavaScript @@ -8,6 +8,7 @@ tags: - Prototype - Reference translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/BigInt/prototype ---
    {{JSRef}}
    diff --git a/files/ko/orphaned/web/security/information_security_basics/index.html b/files/ko/orphaned/web/security/information_security_basics/index.html index 48eeaed961..807a154611 100644 --- a/files/ko/orphaned/web/security/information_security_basics/index.html +++ b/files/ko/orphaned/web/security/information_security_basics/index.html @@ -1,7 +1,8 @@ --- title: Information Security Basics -slug: Web/Security/정보_보안_기본 +slug: orphaned/Web/Security/Information_Security_Basics translation_of: Web/Security/Information_Security_Basics +original_slug: Web/Security/정보_보안_기본 ---

     정보 보안에 대한 기본적인 이해는 불안전하거나 취약점으로 인해 생긴 약점이 악의적인 이유로 악용되지 않게 당신을 도와줄 것입니다. 이 기사는 당신이 알아야 할 것을 배우는데 도움을 줄 것 입니다. 이 정보를 이용하면, 웹 개발주기 및 콘텐츠 배포를 넘어 보안의 역할과 중요성을 알게될 것입니다.

    diff --git a/files/ko/orphaned/windows_and_menus_in_xulrunner/index.html b/files/ko/orphaned/windows_and_menus_in_xulrunner/index.html index 53fc6eea99..81613a499d 100644 --- a/files/ko/orphaned/windows_and_menus_in_xulrunner/index.html +++ b/files/ko/orphaned/windows_and_menus_in_xulrunner/index.html @@ -1,9 +1,10 @@ --- title: Windows and menus in XULRunner -slug: Windows_and_menus_in_XULRunner +slug: orphaned/Windows_and_menus_in_XULRunner tags: - XUL - XULRunner +original_slug: Windows_and_menus_in_XULRunner ---

    {{ PreviousNext("Getting started with XULRunner", "Dialogs in XULRunner") }} diff --git "a/files/ko/orphaned/\354\247\200\354\227\255\354\235\230_\354\275\224\353\223\234\353\245\274_\354\224\201\353\213\210\353\213\244/index.html" "b/files/ko/orphaned/\354\247\200\354\227\255\354\235\230_\354\275\224\353\223\234\353\245\274_\354\224\201\353\213\210\353\213\244/index.html" index 617dea4228..c7dfcac1f8 100644 --- "a/files/ko/orphaned/\354\247\200\354\227\255\354\235\230_\354\275\224\353\223\234\353\245\274_\354\224\201\353\213\210\353\213\244/index.html" +++ "b/files/ko/orphaned/\354\247\200\354\227\255\354\235\230_\354\275\224\353\223\234\353\245\274_\354\224\201\353\213\210\353\213\244/index.html" @@ -1,5 +1,6 @@ --- title: 지역의 코드를 씁니다. -slug: 지역의_코드를_씁니다. +slug: orphaned/지역의_코드를_씁니다. +original_slug: 지역의_코드를_씁니다. ---

    이 페이지는 연결되어 있지 않습니다.. 풍부한 MDC에 기여합니다.

    diff --git "a/files/ko/orphaned/\355\231\225\354\236\245\352\270\260\353\212\245_\352\260\234\353\260\234_\355\231\230\352\262\275_\352\265\254\354\266\225/index.html" "b/files/ko/orphaned/\355\231\225\354\236\245\352\270\260\353\212\245_\352\260\234\353\260\234_\355\231\230\352\262\275_\352\265\254\354\266\225/index.html" index 19bfdf3f81..e8a231a81b 100644 --- "a/files/ko/orphaned/\355\231\225\354\236\245\352\270\260\353\212\245_\352\260\234\353\260\234_\355\231\230\352\262\275_\352\265\254\354\266\225/index.html" +++ "b/files/ko/orphaned/\355\231\225\354\236\245\352\270\260\353\212\245_\352\260\234\353\260\234_\355\231\230\352\262\275_\352\265\254\354\266\225/index.html" @@ -1,6 +1,7 @@ --- title: 확장기능 개발 환경 구축 -slug: 확장기능_개발_환경_구축 +slug: orphaned/확장기능_개발_환경_구축 +original_slug: 확장기능_개발_환경_구축 ---

    이 글에는 확장기능 개발을 위한 Mozilla 응용프로그램 설정 방법을 제공합니다. 특별한 지정하지 않는 한 이 방법들은 Firefox와 Thunderbird 뿐만 아니라 SeaMonkey 버전 2.0 이상에서도 적용가능합니다.

    개요

    diff --git a/files/ko/plugins/guide/scripting_plugins/index.html b/files/ko/plugins/guide/scripting_plugins/index.html index cb761b44e4..23b14d7755 100644 --- a/files/ko/plugins/guide/scripting_plugins/index.html +++ b/files/ko/plugins/guide/scripting_plugins/index.html @@ -1,7 +1,8 @@ --- title: Scripting Plugins -slug: Scripting_Plugins +slug: Plugins/Guide/Scripting_plugins translation_of: Plugins/Guide/Scripting_plugins translation_of_original: Scripting_plugins +original_slug: Scripting_Plugins ---

    {{wiki.localize('System.API.page-generated-for-subpage')}}

    diff --git a/files/ko/tools/debugger/how_to/index.html b/files/ko/tools/debugger/how_to/index.html index 40f5269f45..9158bd5866 100644 --- a/files/ko/tools/debugger/how_to/index.html +++ b/files/ko/tools/debugger/how_to/index.html @@ -1,10 +1,11 @@ --- title: How to -slug: Tools/How_to +slug: Tools/Debugger/How_to tags: - NeedsTranslation - TopicStub translation_of: Tools/Debugger/How_to +original_slug: Tools/How_to ---
    {{ToolsSidebar}}

    These articles describe how to use the debugger.

    diff --git a/files/ko/tools/debugger/how_to/open_the_debugger/index.html b/files/ko/tools/debugger/how_to/open_the_debugger/index.html index 5b27e11b7a..6980986290 100644 --- a/files/ko/tools/debugger/how_to/open_the_debugger/index.html +++ b/files/ko/tools/debugger/how_to/open_the_debugger/index.html @@ -1,7 +1,8 @@ --- title: Open the debugger -slug: Tools/How_to/Open_the_debugger +slug: Tools/Debugger/How_to/Open_the_debugger translation_of: Tools/Debugger/How_to/Open_the_debugger +original_slug: Tools/How_to/Open_the_debugger ---
    {{ToolsSidebar}}

    이 페이지는 Firefox 52 이상, Firefox Nightly 및 Firefox Developer Edition 에 나타나는 JavaScript Debugger 에 대해 설명합니다.

    diff --git a/files/ko/tools/debugger/how_to/search/index.html b/files/ko/tools/debugger/how_to/search/index.html index 9971abcaae..a431812524 100644 --- a/files/ko/tools/debugger/how_to/search/index.html +++ b/files/ko/tools/debugger/how_to/search/index.html @@ -1,7 +1,8 @@ --- title: Search -slug: Tools/How_to/Search +slug: Tools/Debugger/How_to/Search translation_of: Tools/Debugger/How_to/Search +original_slug: Tools/How_to/Search ---
    {{ToolsSidebar}}

    이 페이지는 Firefox 52 이상, Firefox Nightly 및 Firefox Developer Edition에 나타나는 JavaScript 디버거에 대해 설명합니다.

    diff --git a/files/ko/tools/debugger/how_to/set_a_breakpoint/index.html b/files/ko/tools/debugger/how_to/set_a_breakpoint/index.html index f5d2af9e06..8d3f48d749 100644 --- a/files/ko/tools/debugger/how_to/set_a_breakpoint/index.html +++ b/files/ko/tools/debugger/how_to/set_a_breakpoint/index.html @@ -1,7 +1,8 @@ --- title: Set a breakpoint -slug: Tools/How_to/Set_a_breakpoint +slug: Tools/Debugger/How_to/Set_a_breakpoint translation_of: Tools/Debugger/How_to/Set_a_breakpoint +original_slug: Tools/How_to/Set_a_breakpoint ---
    {{ToolsSidebar}}

    이 페이지는 Firefox 52 이상, Firefox Nightly 및 Firefox Developer Edition에 나타나는 JavaScript 디버거에 대해 설명합니다.

    diff --git a/files/ko/tools/debugger/keyboard_shortcuts/index.html b/files/ko/tools/debugger/keyboard_shortcuts/index.html index d213621412..418361e48e 100644 --- a/files/ko/tools/debugger/keyboard_shortcuts/index.html +++ b/files/ko/tools/debugger/keyboard_shortcuts/index.html @@ -1,7 +1,8 @@ --- title: 디버거 단축키 -slug: Tools/Debugger/단축키 +slug: Tools/Debugger/Keyboard_shortcuts translation_of: Tools/Debugger/Keyboard_shortcuts +original_slug: Tools/Debugger/단축키 ---
    {{ToolsSidebar}}

    {{ Page ("ko/docs/tools/Keyboard_shortcuts", "debugger") }}

    diff --git a/files/ko/web/api/ambient_light_events/index.html b/files/ko/web/api/ambient_light_events/index.html index b033d4f80d..c192bad9c0 100644 --- a/files/ko/web/api/ambient_light_events/index.html +++ b/files/ko/web/api/ambient_light_events/index.html @@ -1,9 +1,10 @@ --- title: Using Light Events -slug: WebAPI/Using_Light_Events +slug: Web/API/Ambient_Light_Events tags: - Ambient Light translation_of: Web/API/Ambient_Light_Events +original_slug: WebAPI/Using_Light_Events ---
    {{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}
    diff --git a/files/ko/web/api/battery_status_api/index.html b/files/ko/web/api/battery_status_api/index.html index 12347b0f20..eb3811f226 100644 --- a/files/ko/web/api/battery_status_api/index.html +++ b/files/ko/web/api/battery_status_api/index.html @@ -1,6 +1,6 @@ --- title: Battery Status API -slug: WebAPI/Battery_Status +slug: Web/API/Battery_Status_API tags: - API - Apps @@ -13,6 +13,7 @@ tags: - 배터리 - 어플리케이션 translation_of: Web/API/Battery_Status_API +original_slug: WebAPI/Battery_Status ---
    {{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}}
    diff --git a/files/ko/web/api/broadcastchannel/message_event/index.html b/files/ko/web/api/broadcastchannel/message_event/index.html index 1796b8ee0c..c08ff98a17 100644 --- a/files/ko/web/api/broadcastchannel/message_event/index.html +++ b/files/ko/web/api/broadcastchannel/message_event/index.html @@ -1,7 +1,8 @@ --- title: message -slug: Web/Events/message +slug: Web/API/BroadcastChannel/message_event translation_of: Web/API/BroadcastChannel/message_event +original_slug: Web/Events/message ---

    메시지 이벤트는 메시지가 수신되었음을 알리는 메시지, {{domxref("WebSocket")}}, {{domxref("RTCDataConnection")}} 또는 {{domxref("BroadcastChannel")}} 개체를 알려 줍니다.

    diff --git a/files/ko/web/api/canvas_api/a_basic_ray-caster/index.html b/files/ko/web/api/canvas_api/a_basic_ray-caster/index.html index 950b0f5366..ca7552e76b 100644 --- a/files/ko/web/api/canvas_api/a_basic_ray-caster/index.html +++ b/files/ko/web/api/canvas_api/a_basic_ray-caster/index.html @@ -1,6 +1,6 @@ --- title: A basic ray-caster -slug: A_Basic_RayCaster +slug: Web/API/Canvas_API/A_basic_ray-caster tags: - Advanced - Canvas @@ -9,6 +9,7 @@ tags: - HTML - Web translation_of: Web/API/Canvas_API/A_basic_ray-caster +original_slug: A_Basic_RayCaster ---
    {{CanvasSidebar}}
    diff --git a/files/ko/web/api/canvas_api/index.html b/files/ko/web/api/canvas_api/index.html index bbe466e58d..2cf311cc8b 100644 --- a/files/ko/web/api/canvas_api/index.html +++ b/files/ko/web/api/canvas_api/index.html @@ -1,6 +1,6 @@ --- title: Canvas API -slug: Web/HTML/Canvas +slug: Web/API/Canvas_API tags: - API - Canvas @@ -8,6 +8,7 @@ tags: - 개요 - 레퍼런스 translation_of: Web/API/Canvas_API +original_slug: Web/HTML/Canvas ---
    {{CanvasSidebar}}
    diff --git a/files/ko/web/api/canvas_api/manipulating_video_using_canvas/index.html b/files/ko/web/api/canvas_api/manipulating_video_using_canvas/index.html index 7851f86154..bfbb86a771 100644 --- a/files/ko/web/api/canvas_api/manipulating_video_using_canvas/index.html +++ b/files/ko/web/api/canvas_api/manipulating_video_using_canvas/index.html @@ -1,12 +1,13 @@ --- title: 캔버스(canvas)를 이용한 비디오 조작하기 -slug: Web/HTML/Canvas/Manipulating_video_using_canvas +slug: Web/API/Canvas_API/Manipulating_video_using_canvas tags: - Canvas - Video - 비디오 - 캔버스 translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas +original_slug: Web/HTML/Canvas/Manipulating_video_using_canvas ---
    {{CanvasSidebar}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/ko/web/api/canvas_api/tutorial/advanced_animations/index.html index 1779e63b2c..00c4da27e9 100644 --- a/files/ko/web/api/canvas_api/tutorial/advanced_animations/index.html +++ b/files/ko/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -1,7 +1,8 @@ --- title: 발전된 애니메이션 -slug: Web/HTML/Canvas/Tutorial/Advanced_animations +slug: Web/API/Canvas_API/Tutorial/Advanced_animations translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations +original_slug: Web/HTML/Canvas/Tutorial/Advanced_animations ---
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/ko/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html index df094acb71..6c515e0f0d 100644 --- a/files/ko/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html +++ b/files/ko/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -1,11 +1,12 @@ --- title: 스타일과 색 적용하기 -slug: Web/HTML/Canvas/Tutorial/Applying_styles_and_colors +slug: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors tags: - HTML5 - 그래픽 - 캔버스 translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +original_slug: Web/HTML/Canvas/Tutorial/Applying_styles_and_colors ---
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/basic_animations/index.html b/files/ko/web/api/canvas_api/tutorial/basic_animations/index.html index 457d658172..e1deb1599a 100644 --- a/files/ko/web/api/canvas_api/tutorial/basic_animations/index.html +++ b/files/ko/web/api/canvas_api/tutorial/basic_animations/index.html @@ -1,11 +1,12 @@ --- title: 기본 애니메이션 -slug: Web/HTML/Canvas/Tutorial/Basic_animations +slug: Web/API/Canvas_API/Tutorial/Basic_animations tags: - HTML5 - 그래픽 - 캔버스 translation_of: Web/API/Canvas_API/Tutorial/Basic_animations +original_slug: Web/HTML/Canvas/Tutorial/Basic_animations ---

    {{HTMLElement("canvas")}} 요소는 자바스크립트로 제어하는 것이므로, 애니메이션도 쉽게 만들 수 있습니다. 복잡한 애니메이션을 만드는 것은 추가 작업이 더 필요하고, 앞으로 그에 대한 페이지도 머지 않아 추가되기를 기대합니다.

    도형은 한번 만들어 놓으면 그 모습 그대로 있다는 것이 애니메이션을 만들 때의 가장 큰 제약일 것입니다. 그 도형을 움직이고자 하면 그 도형뿐만이 아니라 그 도형이 그려지기 전에 그려진 모든 것을 다시 그려야 합니다. 복잡한 장면을 다시 그리는 것은 시간도 많이 걸리며, 코드를 실행하는 컴퓨터의 능력에 따라 달라집니다.

    diff --git a/files/ko/web/api/canvas_api/tutorial/basic_usage/index.html b/files/ko/web/api/canvas_api/tutorial/basic_usage/index.html index f455563e87..172aceed94 100644 --- a/files/ko/web/api/canvas_api/tutorial/basic_usage/index.html +++ b/files/ko/web/api/canvas_api/tutorial/basic_usage/index.html @@ -1,7 +1,8 @@ --- title: 캔버스(Canvas) 기본 사용법 -slug: Web/HTML/Canvas/Tutorial/Basic_usage +slug: Web/API/Canvas_API/Tutorial/Basic_usage translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +original_slug: Web/HTML/Canvas/Tutorial/Basic_usage ---
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/compositing/example/index.html b/files/ko/web/api/canvas_api/tutorial/compositing/example/index.html index e3d74f5220..30eee3d316 100644 --- a/files/ko/web/api/canvas_api/tutorial/compositing/example/index.html +++ b/files/ko/web/api/canvas_api/tutorial/compositing/example/index.html @@ -1,12 +1,13 @@ --- title: 도형 합성 예제 -slug: Web/HTML/Canvas/Tutorial/Compositing/Example +slug: Web/API/Canvas_API/Tutorial/Compositing/Example tags: - HTML5 - 그래픽 - 예제 - 캔버스 translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example +original_slug: Web/HTML/Canvas/Tutorial/Compositing/Example ---
    {{CanvasSidebar}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/compositing/index.html b/files/ko/web/api/canvas_api/tutorial/compositing/index.html index 108c493d9d..7c86f31582 100644 --- a/files/ko/web/api/canvas_api/tutorial/compositing/index.html +++ b/files/ko/web/api/canvas_api/tutorial/compositing/index.html @@ -1,11 +1,12 @@ --- title: 도형 합성 -slug: Web/HTML/Canvas/Tutorial/Compositing +slug: Web/API/Canvas_API/Tutorial/Compositing tags: - HTML5 - 그래픽 - 캔버스 translation_of: Web/API/Canvas_API/Tutorial/Compositing +original_slug: Web/HTML/Canvas/Tutorial/Compositing ---

    이전 페이지들에서 나온 모든 예제에서, 새로 그리는 도형은 언제나 이미 그려진 도형의 위에 그려졌습니다. 대부분의 상황에서는 이렇게 하는 것이 적절하지만, 도형을 합성하기 위한 순서를 제한하게 되는데,  globalCompositeOperation 속성을 설정함으로써 이러한 상태를 바꿀 수 있습니다.

    diff --git a/files/ko/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/ko/web/api/canvas_api/tutorial/drawing_shapes/index.html index 09df4b829d..312ed46347 100644 --- a/files/ko/web/api/canvas_api/tutorial/drawing_shapes/index.html +++ b/files/ko/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -1,6 +1,6 @@ --- title: 캔버스(canvas)를 이용한 도형 그리기 -slug: Web/HTML/Canvas/Tutorial/Drawing_shapes +slug: Web/API/Canvas_API/Tutorial/Drawing_shapes tags: - Canvas - 그래픽 @@ -8,6 +8,7 @@ tags: - 캔버스 - 튜토리얼 translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +original_slug: Web/HTML/Canvas/Tutorial/Drawing_shapes ---
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/drawing_text/index.html b/files/ko/web/api/canvas_api/tutorial/drawing_text/index.html index 2c789e85a4..e4bdca4564 100644 --- a/files/ko/web/api/canvas_api/tutorial/drawing_text/index.html +++ b/files/ko/web/api/canvas_api/tutorial/drawing_text/index.html @@ -1,11 +1,12 @@ --- title: 텍스트 그리기 -slug: Drawing_text_using_a_canvas +slug: Web/API/Canvas_API/Tutorial/Drawing_text tags: - HTML - - 'HTML:Canvas' + - HTML:Canvas - NeedsContent translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +original_slug: Drawing_text_using_a_canvas ---
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/finale/index.html b/files/ko/web/api/canvas_api/tutorial/finale/index.html index 1241680c5c..8a4ef4650e 100644 --- a/files/ko/web/api/canvas_api/tutorial/finale/index.html +++ b/files/ko/web/api/canvas_api/tutorial/finale/index.html @@ -1,11 +1,12 @@ --- title: Finale -slug: Web/HTML/Canvas/Tutorial/Finale +slug: Web/API/Canvas_API/Tutorial/Finale tags: - 그래픽 - 캔버스 - 튜토리얼 translation_of: Web/API/Canvas_API/Tutorial/Finale +original_slug: Web/HTML/Canvas/Tutorial/Finale ---
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html b/files/ko/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html index e720af3159..54c362deaa 100644 --- a/files/ko/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html +++ b/files/ko/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html @@ -1,7 +1,8 @@ --- title: 히트(Hit) 영역과 접근성 -slug: Web/HTML/Canvas/Tutorial/Hit_regions_and_accessibility +slug: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility +original_slug: Web/HTML/Canvas/Tutorial/Hit_regions_and_accessibility ---
    {{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
    diff --git a/files/ko/web/api/canvas_api/tutorial/index.html b/files/ko/web/api/canvas_api/tutorial/index.html index 03077163aa..3886ef9cf1 100644 --- a/files/ko/web/api/canvas_api/tutorial/index.html +++ b/files/ko/web/api/canvas_api/tutorial/index.html @@ -1,6 +1,6 @@ --- title: 캔버스 튜토리얼 -slug: Web/HTML/Canvas/Tutorial +slug: Web/API/Canvas_API/Tutorial tags: - Canvas - Graphic @@ -10,6 +10,7 @@ tags: - Intermediate - Web translation_of: Web/API/Canvas_API/Tutorial +original_slug: Web/HTML/Canvas/Tutorial ---
    {{CanvasSidebar}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/ko/web/api/canvas_api/tutorial/optimizing_canvas/index.html index 460b5e893f..5ac1efab0b 100644 --- a/files/ko/web/api/canvas_api/tutorial/optimizing_canvas/index.html +++ b/files/ko/web/api/canvas_api/tutorial/optimizing_canvas/index.html @@ -1,7 +1,8 @@ --- title: 캔버스 최적화 -slug: Web/HTML/Canvas/Tutorial/Optimizing_canvas +slug: Web/API/Canvas_API/Tutorial/Optimizing_canvas translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +original_slug: Web/HTML/Canvas/Tutorial/Optimizing_canvas ---
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/transformations/index.html b/files/ko/web/api/canvas_api/tutorial/transformations/index.html index b93747b581..4566e38e0c 100644 --- a/files/ko/web/api/canvas_api/tutorial/transformations/index.html +++ b/files/ko/web/api/canvas_api/tutorial/transformations/index.html @@ -1,6 +1,6 @@ --- title: 변형 (transformations) -slug: Web/HTML/Canvas/Tutorial/변형 +slug: Web/API/Canvas_API/Tutorial/Transformations tags: - CSS - HTML @@ -11,6 +11,7 @@ tags: - 트랜스폼 - 확대 translation_of: Web/API/Canvas_API/Tutorial/Transformations +original_slug: Web/HTML/Canvas/Tutorial/변형 ---
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}
    diff --git a/files/ko/web/api/canvas_api/tutorial/using_images/index.html b/files/ko/web/api/canvas_api/tutorial/using_images/index.html index d9aae1c993..15b25d820a 100644 --- a/files/ko/web/api/canvas_api/tutorial/using_images/index.html +++ b/files/ko/web/api/canvas_api/tutorial/using_images/index.html @@ -1,6 +1,6 @@ --- title: Using images -slug: Web/HTML/Canvas/Tutorial/Using_images +slug: Web/API/Canvas_API/Tutorial/Using_images tags: - Advanced - Canvas @@ -8,6 +8,7 @@ tags: - HTML - Tutorial translation_of: Web/API/Canvas_API/Tutorial/Using_images +original_slug: Web/HTML/Canvas/Tutorial/Using_images ---
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}
    diff --git a/files/ko/web/api/css_object_model/determining_the_dimensions_of_elements/index.html b/files/ko/web/api/css_object_model/determining_the_dimensions_of_elements/index.html index c9bb8b32ba..90a96302c0 100644 --- a/files/ko/web/api/css_object_model/determining_the_dimensions_of_elements/index.html +++ b/files/ko/web/api/css_object_model/determining_the_dimensions_of_elements/index.html @@ -1,7 +1,8 @@ --- title: Determining the dimensions of elements -slug: Determining_the_dimensions_of_elements +slug: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements +original_slug: Determining_the_dimensions_of_elements ---

    엘리먼트의 너비와 높이를 알기 위해 살펴볼 수 있는 여러 속성이 있습니다. 또한, 요구하는 사항에 딱 맞는 것을 고르기 다소 까다로울 수도 있습니다. 이 글은 여러분이 필요에 맞는 속성을 고르는데 도움을 주기 위해 작성했습니다.

    diff --git a/files/ko/web/api/css_object_model/managing_screen_orientation/index.html b/files/ko/web/api/css_object_model/managing_screen_orientation/index.html index 934384d0bf..974b5bb659 100644 --- a/files/ko/web/api/css_object_model/managing_screen_orientation/index.html +++ b/files/ko/web/api/css_object_model/managing_screen_orientation/index.html @@ -1,7 +1,8 @@ --- title: Managing screen orientation -slug: WebAPI/Managing_screen_orientation +slug: Web/API/CSS_Object_Model/Managing_screen_orientation translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation +original_slug: WebAPI/Managing_screen_orientation ---

    {{SeeCompatTable}}

    Summary

    diff --git a/files/ko/web/api/detecting_device_orientation/index.html b/files/ko/web/api/detecting_device_orientation/index.html index 664842f66d..995997b5ab 100644 --- a/files/ko/web/api/detecting_device_orientation/index.html +++ b/files/ko/web/api/detecting_device_orientation/index.html @@ -1,7 +1,8 @@ --- title: 기기 방향 감지하기 -slug: WebAPI/Detecting_device_orientation +slug: Web/API/Detecting_device_orientation translation_of: Web/API/Detecting_device_orientation +original_slug: WebAPI/Detecting_device_orientation ---
    {{SeeCompatTable}}
    diff --git a/files/ko/web/api/document/createevent/index.html b/files/ko/web/api/document/createevent/index.html index 549a51bfdc..c884693dc7 100644 --- a/files/ko/web/api/document/createevent/index.html +++ b/files/ko/web/api/document/createevent/index.html @@ -1,8 +1,9 @@ --- title: Event.createEvent() -slug: Web/API/Event/createEvent +slug: Web/API/Document/createEvent translation_of: Web/API/Document/createEvent translation_of_original: Web/API/Event/createEvent +original_slug: Web/API/Event/createEvent ---

    {{APIRef("DOM")}}

    diff --git a/files/ko/web/api/document_object_model/introduction/index.html b/files/ko/web/api/document_object_model/introduction/index.html index b31dbc43d9..4b82e96f80 100644 --- a/files/ko/web/api/document_object_model/introduction/index.html +++ b/files/ko/web/api/document_object_model/introduction/index.html @@ -1,11 +1,12 @@ --- title: DOM 소개 -slug: Web/API/Document_Object_Model/소개 +slug: Web/API/Document_Object_Model/Introduction tags: - DOM - 가이드 - 문서 translation_of: Web/API/Document_Object_Model/Introduction +original_slug: Web/API/Document_Object_Model/소개 ---

    이 문서는 {{glossary("DOM")}}에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 {{glossary("HTML")}}, {{glossary("XML")}} 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 참조 정보와 예제들을 제공한다. 

    diff --git a/files/ko/web/api/documentorshadowroot/getselection/index.html b/files/ko/web/api/documentorshadowroot/getselection/index.html index c4d219fbde..dee63369ab 100644 --- a/files/ko/web/api/documentorshadowroot/getselection/index.html +++ b/files/ko/web/api/documentorshadowroot/getselection/index.html @@ -1,8 +1,9 @@ --- title: Document.getSelection() -slug: Web/API/Document/getSelection +slug: Web/API/DocumentOrShadowRoot/getSelection translation_of: Web/API/DocumentOrShadowRoot/getSelection translation_of_original: Web/API/Document/getSelection +original_slug: Web/API/Document/getSelection ---

    {{APIRef("DOM")}}

    diff --git a/files/ko/web/api/element/blur_event/index.html b/files/ko/web/api/element/blur_event/index.html index 3bbcc6acb0..a6b52304d8 100644 --- a/files/ko/web/api/element/blur_event/index.html +++ b/files/ko/web/api/element/blur_event/index.html @@ -1,7 +1,8 @@ --- title: blur -slug: Web/Events/blur +slug: Web/API/Element/blur_event translation_of: Web/API/Element/blur_event +original_slug: Web/Events/blur ---

    blur 이벤트는 엘리먼트의 포커스가 해제되었을때 발생합니다. 이 이벤트와 focusout 이벤트의 가장 다른점은 focusout 은 이벤트 버블링이 발생합니다.

    diff --git a/files/ko/web/api/elementcssinlinestyle/style/index.html b/files/ko/web/api/elementcssinlinestyle/style/index.html index 5976dd66bc..14083b9d84 100644 --- a/files/ko/web/api/elementcssinlinestyle/style/index.html +++ b/files/ko/web/api/elementcssinlinestyle/style/index.html @@ -1,6 +1,6 @@ --- title: element.style -slug: Web/API/HTMLElement/style +slug: Web/API/ElementCSSInlineStyle/style tags: - API - HTML DOM @@ -9,6 +9,7 @@ tags: - Reference - Style translation_of: Web/API/ElementCSSInlineStyle/style +original_slug: Web/API/HTMLElement/style ---
    {{ APIRef("HTML DOM") }}
    diff --git a/files/ko/web/api/fetch_api/using_fetch/index.html b/files/ko/web/api/fetch_api/using_fetch/index.html index 403c340413..b28a982a16 100644 --- a/files/ko/web/api/fetch_api/using_fetch/index.html +++ b/files/ko/web/api/fetch_api/using_fetch/index.html @@ -1,7 +1,8 @@ --- title: Using Fetch -slug: Web/API/Fetch_API/Fetch의_사용법 +slug: Web/API/Fetch_API/Using_Fetch translation_of: Web/API/Fetch_API/Using_Fetch +original_slug: Web/API/Fetch_API/Fetch의_사용법 ---

    Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능합니다. 또한 {{domxref("GlobalFetch.fetch","fetch()")}} 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있습니다.

    diff --git a/files/ko/web/api/fullscreen_api/index.html b/files/ko/web/api/fullscreen_api/index.html index d7f561a95c..86546157a1 100644 --- a/files/ko/web/api/fullscreen_api/index.html +++ b/files/ko/web/api/fullscreen_api/index.html @@ -1,7 +1,8 @@ --- title: Using fullscreen mode -slug: Web/Guide/DOM/Using_full_screen_mode +slug: Web/API/Fullscreen_API translation_of: Web/API/Fullscreen_API +original_slug: Web/Guide/DOM/Using_full_screen_mode ---
    {{DefaultAPISidebar("Fullscreen API")}}
    diff --git a/files/ko/web/api/geolocation_api/using_the_geolocation_api/index.html b/files/ko/web/api/geolocation_api/using_the_geolocation_api/index.html index e5f9913376..44f644b5d5 100644 --- a/files/ko/web/api/geolocation_api/using_the_geolocation_api/index.html +++ b/files/ko/web/api/geolocation_api/using_the_geolocation_api/index.html @@ -1,11 +1,12 @@ --- title: Geolocation API 사용하기 -slug: WebAPI/Using_geolocation +slug: Web/API/Geolocation_API/Using_the_Geolocation_API tags: - Geolocation API - Guide - Intermediate translation_of: Web/API/Geolocation_API/Using_the_Geolocation_API +original_slug: WebAPI/Using_geolocation ---

    {{securecontext_header}}{{APIRef("Geolocation API")}}
    Geolocation API는 사용자의 현재 위치를 가져오는 API로, 지도에 사용자 위치를 표시하는 등 다양한 용도로 사용할 수 있습니다. 이 안내서는 Geolocation API의 기초적 사용법을 설명합니다.

    diff --git a/files/ko/web/api/html_drag_and_drop_api/drag_operations/index.html b/files/ko/web/api/html_drag_and_drop_api/drag_operations/index.html index 122e835b75..2e577ab60b 100644 --- a/files/ko/web/api/html_drag_and_drop_api/drag_operations/index.html +++ b/files/ko/web/api/html_drag_and_drop_api/drag_operations/index.html @@ -1,7 +1,8 @@ --- title: Drag Operations -slug: Web/API/HTML_드래그_앤_드롭_API/Drag_operations +slug: Web/API/HTML_Drag_and_Drop_API/Drag_operations translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations +original_slug: Web/API/HTML_드래그_앤_드롭_API/Drag_operations ---

    {{DefaultAPISidebar("HTML Drag and Drop API")}}

    diff --git a/files/ko/web/api/html_drag_and_drop_api/index.html b/files/ko/web/api/html_drag_and_drop_api/index.html index 70a4295284..0f91e7dc5a 100644 --- a/files/ko/web/api/html_drag_and_drop_api/index.html +++ b/files/ko/web/api/html_drag_and_drop_api/index.html @@ -1,6 +1,6 @@ --- title: HTML 드래그 앤 드롭 API -slug: Web/API/HTML_드래그_앤_드롭_API +slug: Web/API/HTML_Drag_and_Drop_API tags: - HTML5 - XUL @@ -10,6 +10,7 @@ tags: - 드래그 앤 드롭 - 이벤트 translation_of: Web/API/HTML_Drag_and_Drop_API +original_slug: Web/API/HTML_드래그_앤_드롭_API ---

    {{DefaultAPISidebar("HTML 드래그 앤 드롭 API")}}

    diff --git a/files/ko/web/api/htmlelement/accesskey/index.html b/files/ko/web/api/htmlelement/accesskey/index.html index 0fc48bd749..7ef2393b5d 100644 --- a/files/ko/web/api/htmlelement/accesskey/index.html +++ b/files/ko/web/api/htmlelement/accesskey/index.html @@ -1,6 +1,6 @@ --- title: Element.accessKey -slug: Web/API/Element/accessKey +slug: Web/API/HTMLElement/accessKey tags: - API - Access Keys @@ -13,6 +13,7 @@ tags: - 키보드 단축키 translation_of: Web/API/HTMLElement/accessKey translation_of_original: Web/API/Element/accessKey +original_slug: Web/API/Element/accessKey ---
    {{APIRef("DOM")}}
    diff --git a/files/ko/web/api/htmlelement/innertext/index.html b/files/ko/web/api/htmlelement/innertext/index.html index 414fab5c00..e15778f089 100644 --- a/files/ko/web/api/htmlelement/innertext/index.html +++ b/files/ko/web/api/htmlelement/innertext/index.html @@ -1,6 +1,6 @@ --- title: Node.innerText -slug: Web/API/Node/innerText +slug: Web/API/HTMLElement/innerText tags: - API - DOM @@ -8,6 +8,7 @@ tags: - Property - Reference translation_of: Web/API/HTMLElement/innerText +original_slug: Web/API/Node/innerText ---
    {{APIRef("HTML DOM")}}
    diff --git a/files/ko/web/api/htmlmediaelement/abort_event/index.html b/files/ko/web/api/htmlmediaelement/abort_event/index.html index 2278a24c24..fde61e96f4 100644 --- a/files/ko/web/api/htmlmediaelement/abort_event/index.html +++ b/files/ko/web/api/htmlmediaelement/abort_event/index.html @@ -1,6 +1,6 @@ --- title: abort -slug: Web/Events/abort +slug: Web/API/HTMLMediaElement/abort_event tags: - DOM - Event @@ -9,6 +9,7 @@ tags: - 이벤트 translation_of: Web/API/HTMLMediaElement/abort_event translation_of_original: Web/Events/abort +original_slug: Web/Events/abort ---

    abort 이벤트는 리소스의 로딩이 중단되었을 때, 발생합니다.

    diff --git a/files/ko/web/api/htmlorforeignelement/dataset/index.html b/files/ko/web/api/htmlorforeignelement/dataset/index.html index 2b2a891dca..82d9e484f2 100644 --- a/files/ko/web/api/htmlorforeignelement/dataset/index.html +++ b/files/ko/web/api/htmlorforeignelement/dataset/index.html @@ -1,6 +1,6 @@ --- title: HTMLElement.dataset -slug: Web/API/HTMLElement/dataset +slug: Web/API/HTMLOrForeignElement/dataset tags: - API - HTML DOM @@ -10,6 +10,7 @@ tags: - Read-only - Reference translation_of: Web/API/HTMLOrForeignElement/dataset +original_slug: Web/API/HTMLElement/dataset ---
    {{APIRef("HTML DOM")}}
    diff --git a/files/ko/web/api/htmlorforeignelement/tabindex/index.html b/files/ko/web/api/htmlorforeignelement/tabindex/index.html index 7cbb0fa1f0..e28ecb36c0 100644 --- a/files/ko/web/api/htmlorforeignelement/tabindex/index.html +++ b/files/ko/web/api/htmlorforeignelement/tabindex/index.html @@ -1,11 +1,12 @@ --- title: element.tabIndex -slug: Web/API/HTMLElement/tabIndex +slug: Web/API/HTMLOrForeignElement/tabIndex tags: - DOM - Gecko - Gecko DOM Reference translation_of: Web/API/HTMLOrForeignElement/tabIndex +original_slug: Web/API/HTMLElement/tabIndex ---

    {{ ApiRef() }}

    요약

    diff --git a/files/ko/web/api/navigation_timing_api/index.html b/files/ko/web/api/navigation_timing_api/index.html index c9a0c1465b..a387d3c50e 100644 --- a/files/ko/web/api/navigation_timing_api/index.html +++ b/files/ko/web/api/navigation_timing_api/index.html @@ -1,7 +1,8 @@ --- title: 내비게이션 타이밍(Navigation Timing) -slug: Navigation_timing +slug: Web/API/Navigation_timing_API translation_of: Web/API/Navigation_timing_API +original_slug: Navigation_timing ---

    Navigation Timing API는 웹 사이트의 성능을 측정하는 데 사용할 수 있는 데이터를 제공합니다. 같은 목적에 사용했던 다른 JavaScript 기반 메커니즘과 다르게 이 API는 더 유용하고 정확한 종단 간(end-to-end) 대기 시간(latency)을 제공할 수 있습니다.

    다음 예제는 지각하는(perceived) 로딩 시간을 측정하는 법을 보여줍니다.

    diff --git a/files/ko/web/api/navigator/connection/index.html b/files/ko/web/api/navigator/connection/index.html index 1afa39d9c1..2152c8ab3a 100644 --- a/files/ko/web/api/navigator/connection/index.html +++ b/files/ko/web/api/navigator/connection/index.html @@ -1,7 +1,8 @@ --- title: window.navigator.connection -slug: Web/API/NetworkInformation/connection +slug: Web/API/Navigator/connection translation_of: Web/API/Navigator/connection +original_slug: Web/API/NetworkInformation/connection ---

    {{ Apiref() }}

    {{ SeeCompatTable() }}

    diff --git a/files/ko/web/api/network_information_api/index.html b/files/ko/web/api/network_information_api/index.html index 9526bd2d5f..2dd356b86d 100644 --- a/files/ko/web/api/network_information_api/index.html +++ b/files/ko/web/api/network_information_api/index.html @@ -1,7 +1,8 @@ --- title: Network Information API -slug: WebAPI/Network_Information +slug: Web/API/Network_Information_API translation_of: Web/API/Network_Information_API +original_slug: WebAPI/Network_Information ---

    {{ SeeCompatTable() }}

    네트워크 정보 API는 사용자 기기의 현재 대역폭이나 과금이 되는 연결인지와 같은 시스템의 연결 정보를 알려줍니다. 이를 이용해서 사용자에게 높은 용량의 콘텐츠를 제공할지 낮은 용량의 콘텐츠를 제공할지 사용자의 연결 상태에 따라서 제공할 수 있습니다. 전체 API는 DOM에 추가된 단일한 객체로 구성되어 있습니다: {{domxref("window.navigator.connection")}}.

    diff --git a/files/ko/web/api/notifications_api/using_the_notifications_api/index.html b/files/ko/web/api/notifications_api/using_the_notifications_api/index.html index 351361d2af..d56373a529 100644 --- a/files/ko/web/api/notifications_api/using_the_notifications_api/index.html +++ b/files/ko/web/api/notifications_api/using_the_notifications_api/index.html @@ -1,7 +1,8 @@ --- title: 알림 API 사용하기 -slug: WebAPI/Using_Web_Notifications +slug: Web/API/Notifications_API/Using_the_Notifications_API translation_of: Web/API/Notifications_API/Using_the_Notifications_API +original_slug: WebAPI/Using_Web_Notifications ---

    {{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

    diff --git a/files/ko/web/api/proximity_events/index.html b/files/ko/web/api/proximity_events/index.html index ad1687ddd2..85fb728f86 100644 --- a/files/ko/web/api/proximity_events/index.html +++ b/files/ko/web/api/proximity_events/index.html @@ -1,7 +1,8 @@ --- title: Proximity -slug: WebAPI/Proximity +slug: Web/API/Proximity_Events translation_of: Web/API/Proximity_Events +original_slug: WebAPI/Proximity ---

    {{ SeeCompatTable }}

    Summary

    diff --git a/files/ko/web/api/screen/onorientationchange/index.html b/files/ko/web/api/screen/onorientationchange/index.html index dc1a76013f..9c55badab7 100644 --- a/files/ko/web/api/screen/onorientationchange/index.html +++ b/files/ko/web/api/screen/onorientationchange/index.html @@ -1,7 +1,8 @@ --- title: window.screen.onorientationchange -slug: Web/API/Screen.onorientationchange +slug: Web/API/Screen/onorientationchange translation_of: Web/API/Screen/onorientationchange +original_slug: Web/API/Screen.onorientationchange ---

    {{ ApiRef() }}

    {{SeeCompatTable}}

    diff --git a/files/ko/web/api/streams_api/concepts/index.html b/files/ko/web/api/streams_api/concepts/index.html index 9c993b81a3..3537318227 100644 --- a/files/ko/web/api/streams_api/concepts/index.html +++ b/files/ko/web/api/streams_api/concepts/index.html @@ -1,7 +1,8 @@ --- title: Streams API 컨셉 -slug: Web/API/Streams_API/컨셉 +slug: Web/API/Streams_API/Concepts translation_of: Web/API/Streams_API/Concepts +original_slug: Web/API/Streams_API/컨셉 ---
    {{apiref("Streams")}}
    diff --git a/files/ko/web/api/vibration_api/index.html b/files/ko/web/api/vibration_api/index.html index 16271ff248..a981773215 100644 --- a/files/ko/web/api/vibration_api/index.html +++ b/files/ko/web/api/vibration_api/index.html @@ -1,7 +1,8 @@ --- title: Vibration API -slug: Web/Guide/API/Vibration/Vibration +slug: Web/API/Vibration_API translation_of: Web/API/Vibration_API +original_slug: Web/Guide/API/Vibration/Vibration ---
    {{DefaultAPISidebar("Vibration API")}}
    diff --git a/files/ko/web/api/web_workers_api/using_web_workers/index.html b/files/ko/web/api/web_workers_api/using_web_workers/index.html index eb0e309e8e..5fda4804ce 100644 --- a/files/ko/web/api/web_workers_api/using_web_workers/index.html +++ b/files/ko/web/api/web_workers_api/using_web_workers/index.html @@ -1,7 +1,8 @@ --- title: 웹 워커 사용하기 -slug: Web/API/Web_Workers_API/basic_usage +slug: Web/API/Web_Workers_API/Using_web_workers translation_of: Web/API/Web_Workers_API/Using_web_workers +original_slug: Web/API/Web_Workers_API/basic_usage ---

    웹 워커는 웹 컨텐츠를 위해서 백그라운드 스레드에서 스크립트를 실행할 간편한 방법을 제공합니다. 워커 스레드는 사용자 인터페이스(UI)를 방해하지 않고 작업을 수행할 수 있습니다. 또한 워커는 ( responseXML 과 channel속성이 언제나 null이지만) XMLHttpRequest 를 사용하여 I/O작업을 수행할 수도 있습니다. 워커는 생성이 된 후에 생성자가 명시한 이벤트 핸들러로 메세지를 올려서 자신의 하위 작업(spawning task)에 메세지를 전달할 수 도 있습니다. 본 글에서 전용 워커와 공유 워커에 대하여 소개합니다.

    diff --git a/files/ko/web/api/websockets_api/index.html b/files/ko/web/api/websockets_api/index.html index 8b6fd20b1a..d4e1092ee3 100644 --- a/files/ko/web/api/websockets_api/index.html +++ b/files/ko/web/api/websockets_api/index.html @@ -1,7 +1,8 @@ --- title: 웹 소켓 -slug: WebSockets +slug: Web/API/WebSockets_API translation_of: Web/API/WebSockets_API +original_slug: WebSockets ---

    웹 소켓은 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술입니다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능합니다.

    diff --git a/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.html index e7826d8595..484a1bef26 100644 --- a/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.html +++ b/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -1,6 +1,6 @@ --- title: WebSocket을 이용하여 클라이언트 애플리케이션 작성하기 -slug: WebSockets/Writing_WebSocket_client_applications +slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications tags: - 가이드 - 네트워킹 @@ -9,6 +9,7 @@ tags: - 웹소켓API - 클라이언트 translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications +original_slug: WebSockets/Writing_WebSocket_client_applications ---

    WebSocket은 ws 프로토콜을 기반으로 클라이언트와 서버 사이에 지속적인 완전 양방향 연결 스트림을 만들어 주는 기술입니다. 일반적인 웹소켓 클라이언트는 사용자의 브라우저일 것이지만, 그렇다고 해서 이 프로토콜이 플랫폼에 종속적이지는 않습니다.

    diff --git a/files/ko/web/api/websockets_api/writing_websocket_servers/index.html b/files/ko/web/api/websockets_api/writing_websocket_servers/index.html index 24c3cbe6c0..79ed39021a 100644 --- a/files/ko/web/api/websockets_api/writing_websocket_servers/index.html +++ b/files/ko/web/api/websockets_api/writing_websocket_servers/index.html @@ -1,7 +1,8 @@ --- title: 웹소켓 서버 작성하기 -slug: WebSockets/Writing_WebSocket_servers +slug: Web/API/WebSockets_API/Writing_WebSocket_servers translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers +original_slug: WebSockets/Writing_WebSocket_servers ---

    {{gecko_minversion_header("2")}}

    diff --git a/files/ko/web/api/window/domcontentloaded_event/index.html b/files/ko/web/api/window/domcontentloaded_event/index.html index 24db56aa91..212d755171 100644 --- a/files/ko/web/api/window/domcontentloaded_event/index.html +++ b/files/ko/web/api/window/domcontentloaded_event/index.html @@ -1,12 +1,13 @@ --- title: DOMContentLoaded -slug: Web/Events/DOMContentLoaded +slug: Web/API/Window/DOMContentLoaded_event tags: - Event - Reference - Web - Window translation_of: Web/API/Window/DOMContentLoaded_event +original_slug: Web/Events/DOMContentLoaded ---
    {{APIRef}}
    diff --git a/files/ko/web/api/window/load_event/index.html b/files/ko/web/api/window/load_event/index.html index baef50af25..8bfa5a0dcd 100644 --- a/files/ko/web/api/window/load_event/index.html +++ b/files/ko/web/api/window/load_event/index.html @@ -1,10 +1,11 @@ --- title: load -slug: Web/Events/load +slug: Web/API/Window/load_event tags: - Event - 이벤트 translation_of: Web/API/Window/load_event +original_slug: Web/Events/load ---

    load 이벤트는 리소스와 그것에 의존하는 리소스들의 로딩이 완료되면 실행됩니다.

    diff --git a/files/ko/web/api/windoworworkerglobalscope/settimeout/index.html b/files/ko/web/api/windoworworkerglobalscope/settimeout/index.html index 7b338a83fa..a9d31000f3 100644 --- a/files/ko/web/api/windoworworkerglobalscope/settimeout/index.html +++ b/files/ko/web/api/windoworworkerglobalscope/settimeout/index.html @@ -1,9 +1,10 @@ --- title: WindowTimers.setTimeout() -slug: Web/API/WindowTimers/setTimeout +slug: Web/API/WindowOrWorkerGlobalScope/setTimeout tags: - setTimeout translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +original_slug: Web/API/WindowTimers/setTimeout ---
    {{APIRef("HTML DOM")}}
    diff --git a/files/ko/web/api/xmlhttprequest/timeout_event/index.html b/files/ko/web/api/xmlhttprequest/timeout_event/index.html index 4ecc599f9d..f426661dc5 100644 --- a/files/ko/web/api/xmlhttprequest/timeout_event/index.html +++ b/files/ko/web/api/xmlhttprequest/timeout_event/index.html @@ -1,7 +1,8 @@ --- title: timeout -slug: Web/API/XMLHttpRequest/timeout +slug: Web/API/XMLHttpRequest/timeout_event translation_of: Web/API/XMLHttpRequest/timeout_event +original_slug: Web/API/XMLHttpRequest/timeout ---

    timeout 이벤트는 미리 설정한 시간이 만료되어 진행이 종료되면 시작합니다.

    diff --git a/files/ko/web/api/xsltprocessor/basic_example/index.html b/files/ko/web/api/xsltprocessor/basic_example/index.html index cb96c52c55..a09cf8ed1d 100644 --- a/files/ko/web/api/xsltprocessor/basic_example/index.html +++ b/files/ko/web/api/xsltprocessor/basic_example/index.html @@ -1,7 +1,8 @@ --- title: Basic Example -slug: XSLT_in_Gecko/Basic_Example +slug: Web/API/XSLTProcessor/Basic_Example translation_of: Web/API/XSLTProcessor/Basic_Example +original_slug: XSLT_in_Gecko/Basic_Example ---

    기본 예

    이 첫 예는 브라우저에서 XSLT 변환 설정의 기본을 보여준다. 이 예는 Article에 대한 정보(Title, Author 목록과 Body 글)를 포함한 XML 문서를 얻어 그것을 사람이 읽을 수 있는 형식으로 나타낸다. diff --git a/files/ko/web/api/xsltprocessor/browser_differences/index.html b/files/ko/web/api/xsltprocessor/browser_differences/index.html index 0d22a5b825..d89378893c 100644 --- a/files/ko/web/api/xsltprocessor/browser_differences/index.html +++ b/files/ko/web/api/xsltprocessor/browser_differences/index.html @@ -1,7 +1,8 @@ --- title: Browser Differences -slug: XSLT_in_Gecko/Browser_Differences +slug: Web/API/XSLTProcessor/Browser_Differences translation_of: Web/API/XSLTProcessor/Browser_Differences +original_slug: XSLT_in_Gecko/Browser_Differences ---

    브라우저 차이

    Netscape 7.x (모든 플랫폼)과 Internet Explorer 6(윈도즈)는 W3C XSLT 1.0 표준( http://www.w3.org/TR/xslt )을 지원합니다. IE 5.0과 5.5 (둘 다 윈도즈)는 XSLT의 초안만 지원하므로 XSLT 1.0 스타일쉬트와는 호환하지 않습니다. Netscape 6.x는 XSLT 1.0을 부분적으로만 지원합니다. diff --git a/files/ko/web/api/xsltprocessor/generating_html/index.html b/files/ko/web/api/xsltprocessor/generating_html/index.html index 5bb284bdb8..bb855f18cc 100644 --- a/files/ko/web/api/xsltprocessor/generating_html/index.html +++ b/files/ko/web/api/xsltprocessor/generating_html/index.html @@ -1,7 +1,8 @@ --- title: Generating HTML -slug: XSLT_in_Gecko/Generating_HTML +slug: Web/API/XSLTProcessor/Generating_HTML translation_of: Web/API/XSLTProcessor/Generating_HTML +original_slug: XSLT_in_Gecko/Generating_HTML ---

    HTML 생성하기

    브라우저에서 XSLT의 공통 응용은 XML을 클라이언트의 안에 변환해 넣는 것이다. 두번째 예는 입력문서(example2.xml)를 변환하는데, 이것은 또 글의 정보를 포함하고 HTML문서 안에 들어간다. diff --git a/files/ko/web/api/xsltprocessor/index.html b/files/ko/web/api/xsltprocessor/index.html index 84d5198c58..e8938f4f88 100644 --- a/files/ko/web/api/xsltprocessor/index.html +++ b/files/ko/web/api/xsltprocessor/index.html @@ -1,10 +1,11 @@ --- title: XSLT in Gecko -slug: XSLT_in_Gecko +slug: Web/API/XSLTProcessor tags: - XSLT translation_of: Web/API/XSLTProcessor translation_of_original: XSLT_in_Gecko +original_slug: XSLT_in_Gecko ---

    1. 개요
    2. 기본 예제 diff --git a/files/ko/web/api/xsltprocessor/introduction/index.html b/files/ko/web/api/xsltprocessor/introduction/index.html index bfb103b98f..fd28421eaf 100644 --- a/files/ko/web/api/xsltprocessor/introduction/index.html +++ b/files/ko/web/api/xsltprocessor/introduction/index.html @@ -1,7 +1,8 @@ --- title: Introduction -slug: XSLT_in_Gecko/Introduction +slug: Web/API/XSLTProcessor/Introduction translation_of: Web/API/XSLTProcessor/Introduction +original_slug: XSLT_in_Gecko/Introduction ---

      개요

      W3표준 안에서 주목할만한 하나의 흐름은 스타일로부터 내용을 분리하려는 노력이다. diff --git a/files/ko/web/api/xsltprocessor/resources/index.html b/files/ko/web/api/xsltprocessor/resources/index.html index bcdb54116f..2d0d6dda69 100644 --- a/files/ko/web/api/xsltprocessor/resources/index.html +++ b/files/ko/web/api/xsltprocessor/resources/index.html @@ -1,7 +1,8 @@ --- title: Resources -slug: XSLT_in_Gecko/Resources +slug: Web/API/XSLTProcessor/Resources translation_of: Web/API/XSLTProcessor/Resources +original_slug: XSLT_in_Gecko/Resources ---

      자원

        diff --git a/files/ko/web/css/adjacent_sibling_combinator/index.html b/files/ko/web/css/adjacent_sibling_combinator/index.html index 4446172ab3..2d054e75f9 100644 --- a/files/ko/web/css/adjacent_sibling_combinator/index.html +++ b/files/ko/web/css/adjacent_sibling_combinator/index.html @@ -1,11 +1,12 @@ --- title: 인접 형제 결합자 -slug: Web/CSS/인접_형제_선택자 +slug: Web/CSS/Adjacent_sibling_combinator tags: - CSS - Reference - Selectors translation_of: Web/CSS/Adjacent_sibling_combinator +original_slug: Web/CSS/인접_형제_선택자 ---
        {{CSSRef("Selectors")}}
        diff --git a/files/ko/web/css/containing_block/index.html b/files/ko/web/css/containing_block/index.html index 35c6bf56cb..78bb5734d8 100644 --- a/files/ko/web/css/containing_block/index.html +++ b/files/ko/web/css/containing_block/index.html @@ -1,12 +1,13 @@ --- title: 컨테이닝 블록의 모든 것 -slug: Web/CSS/All_About_The_Containing_Block +slug: Web/CSS/Containing_block tags: - CSS - Guide - Layout - Position translation_of: Web/CSS/Containing_block +original_slug: Web/CSS/All_About_The_Containing_Block ---
        {{cssref}}
        diff --git a/files/ko/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/ko/web/css/css_backgrounds_and_borders/resizing_background_images/index.html index f3f0d6529b..09a00d46bc 100644 --- a/files/ko/web/css/css_backgrounds_and_borders/resizing_background_images/index.html +++ b/files/ko/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -1,6 +1,6 @@ --- title: 배경 이미지 크기 조정하기 -slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +slug: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images tags: - CSS - CSS Background @@ -10,6 +10,7 @@ tags: - Reference - Web translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images ---
        {{cssref}}
        diff --git a/files/ko/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/ko/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index 416718c17f..e8e6d447af 100644 --- a/files/ko/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html +++ b/files/ko/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -1,12 +1,13 @@ --- title: cursor 속성값에 URL 사용 -slug: Web/CSS/cursor/Using_URL_values_for_the_cursor_property +slug: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property tags: - CSS - CSS_2.1 - Cross-browser_Development - Web Development translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +original_slug: Web/CSS/cursor/Using_URL_values_for_the_cursor_property ---

        Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0)은 URL 값을 CSS2 커서 속성값으로 사용하는 것을 지원합니다. 이 기능은 마우스 커서 모양으로 임의의 이미지 를 지정할 수 있게 해줍니다 — Gecko가 지원하는 모든 이미지 포맷을 사용할 수 있습니다.

        diff --git a/files/ko/web/css/css_columns/using_multi-column_layouts/index.html b/files/ko/web/css/css_columns/using_multi-column_layouts/index.html index 47d363969c..1f860e087a 100644 --- a/files/ko/web/css/css_columns/using_multi-column_layouts/index.html +++ b/files/ko/web/css/css_columns/using_multi-column_layouts/index.html @@ -1,12 +1,13 @@ --- title: CSS 다단 레이아웃 사용 -slug: CSS3_Columns +slug: Web/CSS/CSS_Columns/Using_multi-column_layouts tags: - Advanced - CSS - Guide - Multi-columns translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +original_slug: CSS3_Columns ---

        {{CSSRef("CSS Multi-columns")}}

        diff --git a/files/ko/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/ko/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html index 1966114608..1a42e8635a 100644 --- a/files/ko/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ b/files/ko/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -1,7 +1,8 @@ --- title: flexbox의 기본 개념 -slug: Web/CSS/CSS_Flexible_Box_Layout/Flexbox의_기본_개념 +slug: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Flexbox의_기본_개념 ---
        {{CSSRef}}
        diff --git a/files/ko/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/ko/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html index a9f75246aa..6403678166 100644 --- a/files/ko/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html +++ b/files/ko/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -1,6 +1,6 @@ --- title: 가변상자의 대표적인 사용례 -slug: Web/CSS/CSS_Flexible_Box_Layout/가변상자의_대표적인_사용례 +slug: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox tags: - 가변상자 - 씨에스에스 @@ -8,6 +8,7 @@ tags: - 용례 - 패턴 translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +original_slug: Web/CSS/CSS_Flexible_Box_Layout/가변상자의_대표적인_사용례 ---

        {{CSSRef}}

        diff --git a/files/ko/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html b/files/ko/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html index cc7753cb70..b2a138ce3e 100644 --- a/files/ko/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html +++ b/files/ko/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html @@ -1,6 +1,6 @@ --- title: 일반 대열 속 블록 및 인라인 조판 -slug: Web/CSS/CSS_Flow_Layout/일반_흐름_속_블록_및_인라인_레이아웃 +slug: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow tags: - 대열 - 씨에스에스 @@ -10,6 +10,7 @@ tags: - 조판 - 중급 translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow +original_slug: Web/CSS/CSS_Flow_Layout/일반_흐름_속_블록_및_인라인_레이아웃 ---
        {{CSSRef}}
        diff --git a/files/ko/web/css/css_flow_layout/flow_layout_and_overflow/index.html b/files/ko/web/css/css_flow_layout/flow_layout_and_overflow/index.html index 697bdfacde..d99969965b 100644 --- a/files/ko/web/css/css_flow_layout/flow_layout_and_overflow/index.html +++ b/files/ko/web/css/css_flow_layout/flow_layout_and_overflow/index.html @@ -1,6 +1,6 @@ --- title: 대열 조판과 대열이탈 -slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_오버플로 +slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow tags: - 가시성 - 대열 조판 @@ -11,6 +11,7 @@ tags: - 중급 - 텍스트 대열이탈 translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow +original_slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_오버플로 ---

        컨테이너에 채울 수 없을 만큼 더 많은 내용물이 있을 때 오버플로 상황이 발생한다. CSS에서 크기 제한이 있는 요소를 다루려면 오버플로의 동작 방식을 이해하는 것이 중요하다. 이 안내서는 일반 플로우에 해당하는 작업 중에 오버플로이 작동하는 방식을 설명한다.

        diff --git a/files/ko/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html b/files/ko/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html index 4d35855ee5..0d932806c2 100644 --- a/files/ko/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html +++ b/files/ko/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html @@ -1,6 +1,6 @@ --- title: 대열 조판과 쓰기 모드 -slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_쓰기_모드 +slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes tags: - 대열 조판 - 쓰기모드 @@ -8,6 +8,7 @@ tags: - 안내서 - 지향 translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes +original_slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_쓰기_모드 ---

        어떻게 일반 대열이 동작하는지 자세히 설명하는 씨에스에스 2.1 규격은 가로쓰기 모드라고 가정한다. 조판 속성은 세로 쓰기 모드에서 동일한 방식으로 작동해야 한다. 이 안내서는 서로 다른 문서 작성 모드에서 사용될 때 대열 조판이 어떻게 작동하는지 살펴 봅니다.

        diff --git a/files/ko/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html b/files/ko/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html index 2b05d99f39..bdec8123f8 100644 --- a/files/ko/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html +++ b/files/ko/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html @@ -1,6 +1,6 @@ --- title: 대열과 탈대열 -slug: Web/CSS/CSS_Flow_Layout/대열과_탈대열 +slug: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow tags: - 대열 - 대열 조판 @@ -10,6 +10,7 @@ tags: - 조판 - 중급 translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow +original_slug: Web/CSS/CSS_Flow_Layout/대열과_탈대열 ---
        {{CSSRef}}
        diff --git a/files/ko/web/css/css_lists_and_counters/consistent_list_indentation/index.html b/files/ko/web/css/css_lists_and_counters/consistent_list_indentation/index.html index 675b5127f3..fc171f9b89 100644 --- a/files/ko/web/css/css_lists_and_counters/consistent_list_indentation/index.html +++ b/files/ko/web/css/css_lists_and_counters/consistent_list_indentation/index.html @@ -1,11 +1,12 @@ --- title: Consistent List Indentation -slug: Consistent_List_Indentation +slug: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation tags: - CSS - Guide - NeedsUpdate translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +original_slug: Consistent_List_Indentation ---
        {{CSSRef}}
        diff --git a/files/ko/web/css/css_masking/index.html b/files/ko/web/css/css_masking/index.html index 5a48e0af6e..ddf760bb02 100644 --- a/files/ko/web/css/css_masking/index.html +++ b/files/ko/web/css/css_masking/index.html @@ -1,12 +1,13 @@ --- title: CSS Masking -slug: Web/CSS/CSS_Masks +slug: Web/CSS/CSS_Masking tags: - CSS - CSS Masking - Overview - Reference translation_of: Web/CSS/CSS_Masking +original_slug: Web/CSS/CSS_Masks ---
        {{CSSRef}}
        diff --git a/files/ko/web/css/css_values_and_units/index.html b/files/ko/web/css/css_values_and_units/index.html index 94d8ceabd6..5f1f3831fb 100644 --- a/files/ko/web/css/css_values_and_units/index.html +++ b/files/ko/web/css/css_values_and_units/index.html @@ -1,12 +1,13 @@ --- title: CSS 단위와 값 -slug: Web/CSS/CSS_단위와_값 +slug: Web/CSS/CSS_Values_and_Units tags: - CSS - 값과 단위 - 안내서 - 참조 translation_of: Web/CSS/CSS_Values_and_Units +original_slug: Web/CSS/CSS_단위와_값 ---
        {{CSSRef}}
        diff --git a/files/ko/web/css/media_queries/using_media_queries/index.html b/files/ko/web/css/media_queries/using_media_queries/index.html index 559b5805c6..78061792a4 100644 --- a/files/ko/web/css/media_queries/using_media_queries/index.html +++ b/files/ko/web/css/media_queries/using_media_queries/index.html @@ -1,6 +1,6 @@ --- title: 미디어 쿼리 사용하기 -slug: Web/Guide/CSS/Media_queries +slug: Web/CSS/Media_Queries/Using_media_queries tags: - Advanced - CSS @@ -10,6 +10,7 @@ tags: - Responsive Design - Web translation_of: Web/CSS/Media_Queries/Using_media_queries +original_slug: Web/Guide/CSS/Media_queries ---
        {{cssref}}
        diff --git a/files/ko/web/css/url()/index.html b/files/ko/web/css/url()/index.html index 76904ccd73..ae4c05af7f 100644 --- a/files/ko/web/css/url()/index.html +++ b/files/ko/web/css/url()/index.html @@ -1,6 +1,6 @@ --- title: -slug: Web/CSS/url +slug: Web/CSS/url() tags: - CSS - CSS Data Type @@ -8,6 +8,7 @@ tags: - Reference translation_of: Web/CSS/url() translation_of_original: Web/CSS/url +original_slug: Web/CSS/url ---
        {{ CssRef() }}
        diff --git a/files/ko/web/css/visual_formatting_model/index.html b/files/ko/web/css/visual_formatting_model/index.html index 4b32d08a30..4f516071b3 100644 --- a/files/ko/web/css/visual_formatting_model/index.html +++ b/files/ko/web/css/visual_formatting_model/index.html @@ -1,11 +1,12 @@ --- title: 시각적 서식 모델 -slug: Web/Guide/CSS/Visual_formatting_model +slug: Web/CSS/Visual_formatting_model tags: - 씨에스에스 - 씨에스에스 상자 모델 - 참조 translation_of: Web/CSS/Visual_formatting_model +original_slug: Web/Guide/CSS/Visual_formatting_model ---
        {{CSSRef}}
        diff --git a/files/ko/web/guide/graphics/index.html b/files/ko/web/guide/graphics/index.html index cb7cd6f873..feb2816351 100644 --- a/files/ko/web/guide/graphics/index.html +++ b/files/ko/web/guide/graphics/index.html @@ -1,6 +1,6 @@ --- title: 웹 상 그래픽 -slug: Web/Guide/그래픽 +slug: Web/Guide/Graphics tags: - 2D - 3D @@ -11,6 +11,7 @@ tags: - WebGL - WebRTC translation_of: Web/Guide/Graphics +original_slug: Web/Guide/그래픽 ---

        웹 사이트 및 응용 프로그램은 종종 그래픽을 보일 필요가 있습니다. 정지 이미지는 {{HTMLElement("img")}} 요소 사용이나 {{cssxref("background-image")}} 속성을 사용한 HTML 요소의 배경 설정으로 쉽게 표시할 수 있습니다. 또한 그래픽을 그때그때 생성하거나 사후에 이미지를 조작할 수도 있습니다. 여기서는 이를 수행할 수 있는 법을 주의 깊게 살펴봅니다.

        diff --git a/files/ko/web/guide/html/editable_content/index.html b/files/ko/web/guide/html/editable_content/index.html index 2e039ea976..583783c87a 100644 --- a/files/ko/web/guide/html/editable_content/index.html +++ b/files/ko/web/guide/html/editable_content/index.html @@ -1,6 +1,6 @@ --- title: Content Editable -slug: Web/Guide/HTML/Content_Editable +slug: Web/Guide/HTML/Editable_content tags: - HTML - HTML5 @@ -10,6 +10,7 @@ tags: - 웹 - 필요컨텐트 translation_of: Web/Guide/HTML/Editable_content +original_slug: Web/Guide/HTML/Content_Editable ---

        HTML5 에서는 어떤 엘러먼트라도 수정이 가능하다. 약간의 JavaScript 이벤트 핸들러들을 사용하는 것만로 당신은 웹페이지를 완전하고 빠른 리치-텍스트 에디터로 변형할 수 있다. 이 문서는 이런 기능성에 대하여 대략의 정보를 제공 한다.

        diff --git a/files/ko/web/guide/html/html5/index.html b/files/ko/web/guide/html/html5/index.html index 2d64ce56d6..ff48740224 100644 --- a/files/ko/web/guide/html/html5/index.html +++ b/files/ko/web/guide/html/html5/index.html @@ -1,7 +1,8 @@ --- title: HTML5 -slug: Web/HTML/HTML5 +slug: Web/Guide/HTML/HTML5 translation_of: Web/Guide/HTML/HTML5 +original_slug: Web/HTML/HTML5 ---

        HTML5는 HTML를 정의하는 표준화에 있어서의 최신 표준 명세입니다. HTML5 명세는 아직도 표준 지정이 완료되지 않았고 변경이 계속 진행 중입니다. 하지만, Mozilla 및 다른 웹 브라우저 벤더는 이미 사양 중  많은 부분에 대한 구현을 시작하고 있습니다. 여기에 링크 하고 있는 문서에서는 Firefox 및 다른 많은 제품으로 사용되어 있는 Mozilla의 Gecko 엔진에 있어서 이미 기술 지원되어 있는 HTML5의 기능에 대해 설명하고 있습니다. 각각의 기능을 기술 지원하고 있는 Gecko 버전 및 다른 브라우저 엔진에 대해서는 지정된 페이지를 참조해 주십시오.

        diff --git a/files/ko/web/guide/html/html5/introduction_to_html5/index.html b/files/ko/web/guide/html/html5/introduction_to_html5/index.html index 8b9698dc53..f0bfebe0e7 100644 --- a/files/ko/web/guide/html/html5/introduction_to_html5/index.html +++ b/files/ko/web/guide/html/html5/introduction_to_html5/index.html @@ -1,10 +1,11 @@ --- title: HTML5 소개 -slug: Web/HTML/HTML5/Introduction_to_HTML5 +slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 tags: - HTML5 - 웹개발 translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +original_slug: Web/HTML/HTML5/Introduction_to_HTML5 ---

        HTML5는 HTML 표준의 가장 새로운 버전입니다. HTML5를 통해 리치 미디어의 기술 지원 뿐만이 아니라, 사용자 및 로컬 데이터를 웹 서버 사이에 보다 간편하면서도 효과적으로 교환할 수 있는 웹 애플리케이션을 개발하기 위한 확장 기술 지원를 제공하는 새로운 기능도 제공됩니다.

        diff --git a/files/ko/web/guide/html/using_html_sections_and_outlines/index.html b/files/ko/web/guide/html/using_html_sections_and_outlines/index.html index 87cae41ebd..2927a70a19 100644 --- a/files/ko/web/guide/html/using_html_sections_and_outlines/index.html +++ b/files/ko/web/guide/html/using_html_sections_and_outlines/index.html @@ -1,10 +1,11 @@ --- title: HTML 구획과 개요 사용하기 -slug: Web/HTML/HTML5_문서의_섹션과_윤곽 +slug: Web/Guide/HTML/Using_HTML_sections_and_outlines tags: - HTML - HTML5 translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +original_slug: Web/HTML/HTML5_문서의_섹션과_윤곽 ---
        {{HTMLSidebar}}
        diff --git a/files/ko/web/guide/parsing_and_serializing_xml/index.html b/files/ko/web/guide/parsing_and_serializing_xml/index.html index 872dfffaa3..7659099765 100644 --- a/files/ko/web/guide/parsing_and_serializing_xml/index.html +++ b/files/ko/web/guide/parsing_and_serializing_xml/index.html @@ -1,6 +1,6 @@ --- title: XML 파싱 및 직렬화 -slug: Web/Guide/XML_파싱_및_직렬화 +slug: Web/Guide/Parsing_and_serializing_XML tags: - AJAX - Add-ons @@ -12,6 +12,7 @@ tags: - XMLHttpRequest - 가이드 translation_of: Web/Guide/Parsing_and_serializing_XML +original_slug: Web/Guide/XML_파싱_및_직렬화 ---

        웹 상에서 XML을 파싱하고 직렬화할 때 사용할 수 있는 객체는 다음과 같습니다.

        diff --git a/files/ko/web/html/global_attributes/class/index.html b/files/ko/web/html/global_attributes/class/index.html index d0aa89b606..0e063c3f5d 100644 --- a/files/ko/web/html/global_attributes/class/index.html +++ b/files/ko/web/html/global_attributes/class/index.html @@ -1,11 +1,12 @@ --- title: class -slug: Web/HTML/Global_attributes/클래스 +slug: Web/HTML/Global_attributes/class tags: - Global attributes - HTML - Reference translation_of: Web/HTML/Global_attributes/class +original_slug: Web/HTML/Global_attributes/클래스 ---
        {{HTMLSidebar("Global_attributes")}}
        diff --git a/files/ko/web/http/browser_detection_using_the_user_agent/index.html b/files/ko/web/http/browser_detection_using_the_user_agent/index.html index 8ffc0ff0b5..27c3f6de3f 100644 --- a/files/ko/web/http/browser_detection_using_the_user_agent/index.html +++ b/files/ko/web/http/browser_detection_using_the_user_agent/index.html @@ -1,11 +1,12 @@ --- title: 사용자 에이전트를 이용한 브라우저 감지 -slug: Web/HTTP/User_agent를_이용한_브라우저_감지 +slug: Web/HTTP/Browser_detection_using_the_user_agent tags: - Compatibility - HTTP - Web Development translation_of: Web/HTTP/Browser_detection_using_the_user_agent +original_slug: Web/HTTP/User_agent를_이용한_브라우저_감지 ---
        {{HTTPSidebar}}
        diff --git a/files/ko/web/javascript/a_re-introduction_to_javascript/index.html b/files/ko/web/javascript/a_re-introduction_to_javascript/index.html index 7206716138..f8f301aa66 100644 --- a/files/ko/web/javascript/a_re-introduction_to_javascript/index.html +++ b/files/ko/web/javascript/a_re-introduction_to_javascript/index.html @@ -1,6 +1,6 @@ --- title: JavaScript 재입문하기 (JS ​튜토리얼) -slug: A_re-introduction_to_JavaScript +slug: Web/JavaScript/A_re-introduction_to_JavaScript tags: - CodingScripting - Intermediate @@ -9,6 +9,7 @@ tags: - Learn - Tutorial translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +original_slug: A_re-introduction_to_JavaScript ---
        {{jsSidebar}}
        diff --git a/files/ko/web/javascript/about_javascript/index.html b/files/ko/web/javascript/about_javascript/index.html index c7ec0f9f28..57120431b4 100644 --- a/files/ko/web/javascript/about_javascript/index.html +++ b/files/ko/web/javascript/about_javascript/index.html @@ -1,11 +1,12 @@ --- title: JavaScript에 대하여 -slug: Web/JavaScript/About +slug: Web/JavaScript/About_JavaScript tags: - 비기너 - 소개 - 자바스크립트 translation_of: Web/JavaScript/About_JavaScript +original_slug: Web/JavaScript/About ---

        {{JsSidebar}}

        diff --git a/files/ko/web/javascript/closures/index.html b/files/ko/web/javascript/closures/index.html index b56d843b2b..6a9b8554a8 100644 --- a/files/ko/web/javascript/closures/index.html +++ b/files/ko/web/javascript/closures/index.html @@ -1,6 +1,6 @@ --- title: 클로저 -slug: Web/JavaScript/Guide/Closures +slug: Web/JavaScript/Closures tags: - Closure - ES5 @@ -8,6 +8,7 @@ tags: - JavaScript - Reference translation_of: Web/JavaScript/Closures +original_slug: Web/JavaScript/Guide/Closures ---
        {{jsSidebar("Intermediate")}}
        diff --git a/files/ko/web/javascript/guide/details_of_the_object_model/index.html b/files/ko/web/javascript/guide/details_of_the_object_model/index.html index 230d5cb9e1..cacb978922 100644 --- a/files/ko/web/javascript/guide/details_of_the_object_model/index.html +++ b/files/ko/web/javascript/guide/details_of_the_object_model/index.html @@ -1,7 +1,8 @@ --- title: 객체 모델의 세부 사항 -slug: Web/JavaScript/Guide/객체_모델의_세부사항 +slug: Web/JavaScript/Guide/Details_of_the_Object_Model translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +original_slug: Web/JavaScript/Guide/객체_모델의_세부사항 ---
        {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}
        diff --git a/files/ko/web/javascript/guide/functions/index.html b/files/ko/web/javascript/guide/functions/index.html index cf9d928eb3..381beaefe4 100644 --- a/files/ko/web/javascript/guide/functions/index.html +++ b/files/ko/web/javascript/guide/functions/index.html @@ -1,7 +1,8 @@ --- title: 함수 -slug: Web/JavaScript/Guide/함수 +slug: Web/JavaScript/Guide/Functions translation_of: Web/JavaScript/Guide/Functions +original_slug: Web/JavaScript/Guide/함수 ---
        {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}
        diff --git a/files/ko/web/javascript/guide/grammar_and_types/index.html b/files/ko/web/javascript/guide/grammar_and_types/index.html index 629cbd069a..54d51091a9 100644 --- a/files/ko/web/javascript/guide/grammar_and_types/index.html +++ b/files/ko/web/javascript/guide/grammar_and_types/index.html @@ -1,11 +1,12 @@ --- title: 문법과 자료형 -slug: 'Web/JavaScript/Guide/Values,_variables,_and_literals' +slug: Web/JavaScript/Guide/Grammar_and_types tags: - Guide - JavaScript - - 'l10n:priority' + - l10n:priority translation_of: Web/JavaScript/Guide/Grammar_and_types +original_slug: Web/JavaScript/Guide/Values,_variables,_and_literals ---
        {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/소개", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}
        diff --git a/files/ko/web/javascript/guide/introduction/index.html b/files/ko/web/javascript/guide/introduction/index.html index cac0779ee0..cac6b40ed4 100644 --- a/files/ko/web/javascript/guide/introduction/index.html +++ b/files/ko/web/javascript/guide/introduction/index.html @@ -1,12 +1,13 @@ --- title: Introduction -slug: Web/JavaScript/Guide/소개 +slug: Web/JavaScript/Guide/Introduction tags: - JavaScript - 가이드 - 안내서 - 자바스크립트 translation_of: Web/JavaScript/Guide/Introduction +original_slug: Web/JavaScript/Guide/소개 ---
        {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
        diff --git a/files/ko/web/javascript/guide/meta_programming/index.html b/files/ko/web/javascript/guide/meta_programming/index.html index fe4fa13f83..9b84db0876 100644 --- a/files/ko/web/javascript/guide/meta_programming/index.html +++ b/files/ko/web/javascript/guide/meta_programming/index.html @@ -1,7 +1,8 @@ --- title: 메타 프로그래밍 -slug: Web/JavaScript/Guide/메타_프로그래밍 +slug: Web/JavaScript/Guide/Meta_programming translation_of: Web/JavaScript/Guide/Meta_programming +original_slug: Web/JavaScript/Guide/메타_프로그래밍 ---
        {{jsSidebar("JavaScript Guide")}} {{Previous("Web/JavaScript/Guide/Iterators_and_Generators")}}
        diff --git a/files/ko/web/javascript/guide/regular_expressions/assertions/index.html b/files/ko/web/javascript/guide/regular_expressions/assertions/index.html index 350c50f8f9..6a7cd8b8f1 100644 --- a/files/ko/web/javascript/guide/regular_expressions/assertions/index.html +++ b/files/ko/web/javascript/guide/regular_expressions/assertions/index.html @@ -1,7 +1,8 @@ --- title: Assertions -slug: Web/JavaScript/Guide/정규식/Assertions +slug: Web/JavaScript/Guide/Regular_Expressions/Assertions translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions +original_slug: Web/JavaScript/Guide/정규식/Assertions ---

        {{jsSidebar("JavaScript Guide")}}

        diff --git a/files/ko/web/javascript/guide/regular_expressions/groups_and_ranges/index.html b/files/ko/web/javascript/guide/regular_expressions/groups_and_ranges/index.html index 2e2109b4ed..75e8e65b9c 100644 --- a/files/ko/web/javascript/guide/regular_expressions/groups_and_ranges/index.html +++ b/files/ko/web/javascript/guide/regular_expressions/groups_and_ranges/index.html @@ -1,7 +1,8 @@ --- title: Groups and Ranges -slug: Web/JavaScript/Guide/정규식/Groups_and_Ranges +slug: Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges translation_of: Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges +original_slug: Web/JavaScript/Guide/정규식/Groups_and_Ranges ---

        {{jsSidebar("JavaScript Guide")}}{{draft}}

        diff --git a/files/ko/web/javascript/guide/regular_expressions/index.html b/files/ko/web/javascript/guide/regular_expressions/index.html index 5fbbcef0a0..84f1ce7bc4 100644 --- a/files/ko/web/javascript/guide/regular_expressions/index.html +++ b/files/ko/web/javascript/guide/regular_expressions/index.html @@ -1,10 +1,11 @@ --- title: 정규 표현식 -slug: Web/JavaScript/Guide/정규식 +slug: Web/JavaScript/Guide/Regular_Expressions tags: - 자바스크립트 - 정규식 translation_of: Web/JavaScript/Guide/Regular_Expressions +original_slug: Web/JavaScript/Guide/정규식 ---
        {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}
        diff --git a/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.html index e05bab3102..ae9edde4a0 100644 --- a/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.html +++ b/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.html @@ -1,12 +1,13 @@ --- title: 상속과 프로토타입 -slug: Web/JavaScript/Guide/Inheritance_and_the_prototype_chain +slug: Web/JavaScript/Inheritance_and_the_prototype_chain tags: - JavaScript - 객체지향 - 상속 - 중급 translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain +original_slug: Web/JavaScript/Guide/Inheritance_and_the_prototype_chain ---

        {{jsSidebar("Advanced")}}

        diff --git a/files/ko/web/javascript/language_resources/index.html b/files/ko/web/javascript/language_resources/index.html index 5743a54e24..c10436fe6e 100644 --- a/files/ko/web/javascript/language_resources/index.html +++ b/files/ko/web/javascript/language_resources/index.html @@ -1,10 +1,11 @@ --- title: 자바스크립트 언어 자료 -slug: Web/JavaScript/언어_리소스 +slug: Web/JavaScript/Language_Resources tags: - Advanced - 자바스크립트 translation_of: Web/JavaScript/Language_Resources +original_slug: Web/JavaScript/언어_리소스 ---
        {{JsSidebar}}
        diff --git a/files/ko/web/javascript/reference/classes/public_class_fields/index.html b/files/ko/web/javascript/reference/classes/public_class_fields/index.html index 959c65fada..c2c346cb63 100644 --- a/files/ko/web/javascript/reference/classes/public_class_fields/index.html +++ b/files/ko/web/javascript/reference/classes/public_class_fields/index.html @@ -1,7 +1,8 @@ --- title: Class fields -slug: Web/JavaScript/Reference/Classes/Class_fields +slug: Web/JavaScript/Reference/Classes/Public_class_fields translation_of: Web/JavaScript/Reference/Classes/Public_class_fields +original_slug: Web/JavaScript/Reference/Classes/Class_fields ---
        {{JsSidebar("Classes")}}
        diff --git a/files/ko/web/javascript/reference/functions/arrow_functions/index.html b/files/ko/web/javascript/reference/functions/arrow_functions/index.html index 02dc0d55e4..14c11cc7e8 100644 --- a/files/ko/web/javascript/reference/functions/arrow_functions/index.html +++ b/files/ko/web/javascript/reference/functions/arrow_functions/index.html @@ -1,6 +1,6 @@ --- title: 화살표 함수 -slug: Web/JavaScript/Reference/Functions/애로우_펑션 +slug: Web/JavaScript/Reference/Functions/Arrow_functions tags: - ECMAScript6 - Functions @@ -8,6 +8,7 @@ tags: - JavaScript - Reference translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +original_slug: Web/JavaScript/Reference/Functions/애로우_펑션 ---
        {{jsSidebar("Functions")}}
        diff --git a/files/ko/web/javascript/reference/global_objects/proxy/proxy/apply/index.html b/files/ko/web/javascript/reference/global_objects/proxy/proxy/apply/index.html index b4928da1d8..28be207090 100644 --- a/files/ko/web/javascript/reference/global_objects/proxy/proxy/apply/index.html +++ b/files/ko/web/javascript/reference/global_objects/proxy/proxy/apply/index.html @@ -1,11 +1,12 @@ --- title: handler.apply() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply tags: - apply트랩 - 트랩 - 프록시 translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply ---
        {{JSRef}}
        diff --git a/files/ko/web/javascript/reference/global_objects/proxy/proxy/index.html b/files/ko/web/javascript/reference/global_objects/proxy/proxy/index.html index d153c621c6..588a2e92e5 100644 --- a/files/ko/web/javascript/reference/global_objects/proxy/proxy/index.html +++ b/files/ko/web/javascript/reference/global_objects/proxy/proxy/index.html @@ -1,12 +1,13 @@ --- title: Proxy handler -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy tags: - ECMAScript 2015 - JavaScript - Proxy translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy translation_of_original: Web/JavaScript/Reference/Global_Objects/Proxy/handler +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler ---
        {{JSRef}}
        diff --git a/files/ko/web/javascript/reference/operators/operator_precedence/index.html b/files/ko/web/javascript/reference/operators/operator_precedence/index.html index 7a82346d09..d67711452b 100644 --- a/files/ko/web/javascript/reference/operators/operator_precedence/index.html +++ b/files/ko/web/javascript/reference/operators/operator_precedence/index.html @@ -1,12 +1,13 @@ --- title: 연산자 우선순위 -slug: Web/JavaScript/Reference/Operators/연산자_우선순위 +slug: Web/JavaScript/Reference/Operators/Operator_Precedence tags: - JavaScript - Operator - 연산자 - 우선순위 translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +original_slug: Web/JavaScript/Reference/Operators/연산자_우선순위 ---
        {{jsSidebar("Operators")}}
        diff --git a/files/ko/web/javascript/shells/index.html b/files/ko/web/javascript/shells/index.html index 718fa8bdc2..106b41621c 100644 --- a/files/ko/web/javascript/shells/index.html +++ b/files/ko/web/javascript/shells/index.html @@ -1,7 +1,8 @@ --- title: JavaScript 쉘 -slug: Web/JavaScript/쉘 +slug: Web/JavaScript/Shells translation_of: Web/JavaScript/Shells +original_slug: Web/JavaScript/쉘 ---
        {{JsSidebar}}
        diff --git a/files/ko/web/media/formats/codecs_parameter/index.html b/files/ko/web/media/formats/codecs_parameter/index.html index 43cce1aa1f..7958c6b652 100644 --- a/files/ko/web/media/formats/codecs_parameter/index.html +++ b/files/ko/web/media/formats/codecs_parameter/index.html @@ -1,7 +1,8 @@ --- title: 일반 미디어 타입에서 "codecs" 파라미터 사용하기 -slug: Web/Media/Formats/코덱파라미터 +slug: Web/Media/Formats/codecs_parameter translation_of: Web/Media/Formats/codecs_parameter +original_slug: Web/Media/Formats/코덱파라미터 ---
        {{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}
        diff --git a/files/ko/web/media/formats/containers/index.html b/files/ko/web/media/formats/containers/index.html index d4e45c294a..1af00ff513 100644 --- a/files/ko/web/media/formats/containers/index.html +++ b/files/ko/web/media/formats/containers/index.html @@ -1,7 +1,8 @@ --- title: 미디어 컨테이너 포맷 (파일 타입) -slug: Web/Media/Formats/컨테이너 +slug: Web/Media/Formats/Containers translation_of: Web/Media/Formats/Containers +original_slug: Web/Media/Formats/컨테이너 ---

        오디오와 비디오 파일 포맷은 두 파트에서 정의할 수 있습니다.(오디오 비디오가 한 파일에 있으면 물론 3 파트지요): 오디오/비디오 코덱와 미디어 컨테이너 포맷(도는 파일 타입)입니다. 이 가이드 문서는 웹에서 널리 쓰이는 컨테이너 포맷에 대해 알아보고 기본적인 스펙와 장단점 그리고 적절한 사용법을 설명하고 있습니다.

        diff --git a/files/ko/web/media/formats/video_codecs/index.html b/files/ko/web/media/formats/video_codecs/index.html index 5cccc89329..4e9701b342 100644 --- a/files/ko/web/media/formats/video_codecs/index.html +++ b/files/ko/web/media/formats/video_codecs/index.html @@ -1,7 +1,8 @@ --- title: 웹 비디오 코덱 가이드 -slug: Web/Media/Formats/비디오코덱 +slug: Web/Media/Formats/Video_codecs translation_of: Web/Media/Formats/Video_codecs +original_slug: Web/Media/Formats/비디오코덱 ---

        압축되지 않은 비디오 데이터는 그 크기가 엄청나기 때문에, 저장하거나 네트워크를 통해 전송하기 위해서는 아주 작게 압축해야 합니다. 압축되지 않은 비디오를 저장하는 과정을 상상해 봅시다:

        diff --git a/files/ko/web/performance/critical_rendering_path/index.html b/files/ko/web/performance/critical_rendering_path/index.html index 0dd28ed81c..010f6ecfa9 100644 --- a/files/ko/web/performance/critical_rendering_path/index.html +++ b/files/ko/web/performance/critical_rendering_path/index.html @@ -1,7 +1,8 @@ --- title: 중요 렌더링 경로 -slug: Web/Performance/중요_렌더링_경로 +slug: Web/Performance/Critical_rendering_path translation_of: Web/Performance/Critical_rendering_path +original_slug: Web/Performance/중요_렌더링_경로 ---

        {{draft}}

        diff --git a/files/ko/web/performance/how_browsers_work/index.html b/files/ko/web/performance/how_browsers_work/index.html index 473e30980d..346648524a 100644 --- a/files/ko/web/performance/how_browsers_work/index.html +++ b/files/ko/web/performance/how_browsers_work/index.html @@ -1,7 +1,8 @@ --- title: '웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가' -slug: Web/Performance/브라우저는_어떻게_동작하는가 +slug: Web/Performance/How_browsers_work translation_of: Web/Performance/How_browsers_work +original_slug: Web/Performance/브라우저는_어떻게_동작하는가 ---

        Users want web experiences with content that is fast to load and smooth to interact with. Therefore, a developer should strive to achieve these two goals.

        diff --git a/files/ko/web/progressive_web_apps/introduction/index.html b/files/ko/web/progressive_web_apps/introduction/index.html index e253c96ce9..9de0a22e10 100644 --- a/files/ko/web/progressive_web_apps/introduction/index.html +++ b/files/ko/web/progressive_web_apps/introduction/index.html @@ -1,6 +1,6 @@ --- title: 프로그레시브 웹 앱 소개 -slug: Web/Progressive_web_apps/소개 +slug: Web/Progressive_web_apps/Introduction tags: - PWA - js13kGames @@ -8,6 +8,7 @@ tags: - 프로그레시브 - 프로그레시브 웹 앱 translation_of: Web/Progressive_web_apps/Introduction +original_slug: Web/Progressive_web_apps/소개 ---
        {{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}
        diff --git a/files/ko/web/progressive_web_apps/responsive/media_types/index.html b/files/ko/web/progressive_web_apps/responsive/media_types/index.html index 2c9fceaca0..3c907f9c9b 100644 --- a/files/ko/web/progressive_web_apps/responsive/media_types/index.html +++ b/files/ko/web/progressive_web_apps/responsive/media_types/index.html @@ -1,7 +1,8 @@ --- title: 미디어 -slug: Web/CSS/시작하기/미디어 +slug: Web/Progressive_web_apps/Responsive/Media_types translation_of: Web/Progressive_web_apps/Responsive/Media_types +original_slug: Web/CSS/시작하기/미디어 ---

        {{ CSSTutorialTOC() }}

        diff --git a/files/ko/web/reference/api/index.html b/files/ko/web/reference/api/index.html index 363fa9d3e9..7ce64e1a32 100644 --- a/files/ko/web/reference/api/index.html +++ b/files/ko/web/reference/api/index.html @@ -1,12 +1,13 @@ --- title: Web API 설명집 -slug: Web/참조/API +slug: Web/Reference/API tags: - API - 대문 - 웹 - 편람 translation_of: Web/Reference/API +original_slug: Web/참조/API ---

        여러분이 알고 있는 웹에는 여러 유용한 작업을 수행할 수 있는 다양한 API가 제공됩니다. 이러한 API는 자바스크립트(JavaScript) 코드를 사용하여 접근할 수 있으며 {{domxref("window")}}나 {{domxref("element")}}에 대한 간단한 작업에서부터 WebGL이나 Web Audio와 같은 API를 사용해 복잡한 그래픽 및 오디오 효과를 만들어내는 것까지 가능합니다.

        diff --git a/files/ko/web/reference/index.html b/files/ko/web/reference/index.html index f8d1a1dc35..5918ed9c1a 100644 --- a/files/ko/web/reference/index.html +++ b/files/ko/web/reference/index.html @@ -1,11 +1,12 @@ --- title: 웹 기술 문서 목록 -slug: Web/참조 +slug: Web/Reference tags: - Landing - Reference - Web translation_of: Web/Reference +original_slug: Web/참조 ---

        {{draft()}}
        오픈 웹은 많은 기술을 사용하여 구축됩니다. 이 기술들을 사용하기 위해서는 적절한 지식이 필요합니다.
        diff --git a/files/ko/web/svg/element/rect/index.html b/files/ko/web/svg/element/rect/index.html index 90a3d08d24..0447978f9b 100644 --- a/files/ko/web/svg/element/rect/index.html +++ b/files/ko/web/svg/element/rect/index.html @@ -1,7 +1,8 @@ --- title: -slug: Web/SVG/Element/사각형 +slug: Web/SVG/Element/rect translation_of: Web/SVG/Element/rect +original_slug: Web/SVG/Element/사각형 ---

        {{SVGRef}}
        diff --git a/files/ko/web/svg/svg_1.1_support_in_firefox/index.html b/files/ko/web/svg/svg_1.1_support_in_firefox/index.html index f8c31a2a8c..95ecedba2c 100644 --- a/files/ko/web/svg/svg_1.1_support_in_firefox/index.html +++ b/files/ko/web/svg/svg_1.1_support_in_firefox/index.html @@ -1,9 +1,10 @@ --- title: SVG in Firefox -slug: SVG_in_Firefox +slug: Web/SVG/SVG_1.1_Support_in_Firefox tags: - SVG translation_of: Web/SVG/SVG_1.1_Support_in_Firefox +original_slug: SVG_in_Firefox ---

        Firefox 2는 더욱 폭넓은 Scalable Vector Graphics (SVG) 기능 구현을 위해서 계속해서 향상시켜 나가고 있습니다. 많은 스펙과 버그 수정들이 포함되었지만 Firefox 1.5이후 새로이 추가된 유일한 특징이 바로 <textPath>입니다. -- 아래 참조.

        Firefox SVG는 SVG 1.1의 부분집합이지만 그렇다고 공식 프로필(Tiny, Basic, Full)들중 어느 것도 아닙니다. 각 내용들과 그것들이 Firefox 2에서 구현되었는지 아닌지에 대한 전체 내용은 문서의 마지막에서 찾을 수 있습니다. 문서의 나머지 부분은 우리의 구현상 제약사항들에 대한 정보를 제공할 것입니다.

        diff --git a/files/ko/web/svg/tutorial/basic_shapes/index.html b/files/ko/web/svg/tutorial/basic_shapes/index.html index 8169e4c890..4d0307f57c 100644 --- a/files/ko/web/svg/tutorial/basic_shapes/index.html +++ b/files/ko/web/svg/tutorial/basic_shapes/index.html @@ -1,7 +1,8 @@ --- title: 기본 도형 -slug: Web/SVG/Tutorial/기본_도형 +slug: Web/SVG/Tutorial/Basic_Shapes translation_of: Web/SVG/Tutorial/Basic_Shapes +original_slug: Web/SVG/Tutorial/기본_도형 ---

        {{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}

        diff --git a/files/ko/web/svg/tutorial/getting_started/index.html b/files/ko/web/svg/tutorial/getting_started/index.html index 8a0b5c82b7..0e4bec9543 100644 --- a/files/ko/web/svg/tutorial/getting_started/index.html +++ b/files/ko/web/svg/tutorial/getting_started/index.html @@ -1,12 +1,13 @@ --- title: 시작하기 -slug: Web/SVG/Tutorial/시작하기 +slug: Web/SVG/Tutorial/Getting_Started tags: - SVG - - 'SVG:Tutorial' + - SVG:Tutorial - 초보자 - 튜토리얼 translation_of: Web/SVG/Tutorial/Getting_Started +original_slug: Web/SVG/Tutorial/시작하기 ---

        {{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}

        diff --git a/files/ko/web/svg/tutorial/positions/index.html b/files/ko/web/svg/tutorial/positions/index.html index 391765175c..9d2bd8cf0b 100644 --- a/files/ko/web/svg/tutorial/positions/index.html +++ b/files/ko/web/svg/tutorial/positions/index.html @@ -1,7 +1,8 @@ --- title: 위치 -slug: Web/SVG/Tutorial/위치 +slug: Web/SVG/Tutorial/Positions translation_of: Web/SVG/Tutorial/Positions +original_slug: Web/SVG/Tutorial/위치 ---

        {{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

        diff --git a/files/ko/web/svg/tutorial/svg_and_css/index.html b/files/ko/web/svg/tutorial/svg_and_css/index.html index d8ca001fb2..421cb46488 100644 --- a/files/ko/web/svg/tutorial/svg_and_css/index.html +++ b/files/ko/web/svg/tutorial/svg_and_css/index.html @@ -1,9 +1,10 @@ --- title: SVG graphics -slug: Web/CSS/Getting_Started/SVG_graphics +slug: Web/SVG/Tutorial/SVG_and_CSS tags: - - 'CSS:Getting_Started' + - CSS:Getting_Started translation_of: Web/SVG/Tutorial/SVG_and_CSS +original_slug: Web/CSS/Getting_Started/SVG_graphics ---

        이 페이지는 그래픽을 만들기 위한 특별한 언어 SVG를 설명합니다.

        SVG 기능이 있는 모질라 브라우저에서 작동하는 간단한 예제를 만듭니다.

        diff --git a/files/ko/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/ko/web/xpath/introduction_to_using_xpath_in_javascript/index.html index e15574b588..9ae214d84b 100644 --- a/files/ko/web/xpath/introduction_to_using_xpath_in_javascript/index.html +++ b/files/ko/web/xpath/introduction_to_using_xpath_in_javascript/index.html @@ -1,6 +1,6 @@ --- title: Introduction to using XPath in JavaScript -slug: Introduction_to_using_XPath_in_JavaScript +slug: Web/XPath/Introduction_to_using_XPath_in_JavaScript tags: - Add-ons - DOM @@ -9,6 +9,7 @@ tags: - Web Development - XPath translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript +original_slug: Introduction_to_using_XPath_in_JavaScript ---

        이 문서는 JavaScript 안, 확장기능, 웹사이트에서 XPath를 사용하기 위한 인터페이스를 설명합니다. Mozilla는 DOM 3 XPath를 상당량 구현합니다. 이것은 XPath 식이 HTML과 XML 문서 모두에서 잘 돌아간다는 것을 뜻합니다.

        diff --git a/files/ko/web/xslt/element/apply-imports/index.html b/files/ko/web/xslt/element/apply-imports/index.html index 9377bd2538..a3e2a34f57 100644 --- a/files/ko/web/xslt/element/apply-imports/index.html +++ b/files/ko/web/xslt/element/apply-imports/index.html @@ -1,9 +1,10 @@ --- title: apply-imports -slug: Web/XSLT/apply-imports +slug: Web/XSLT/Element/apply-imports tags: - XSLT_Reference translation_of: Web/XSLT/Element/apply-imports +original_slug: Web/XSLT/apply-imports ---

        {{ XsltRef() }}


        diff --git a/files/ko/web/xslt/element/apply-templates/index.html b/files/ko/web/xslt/element/apply-templates/index.html index fdb8662849..7e5a800932 100644 --- a/files/ko/web/xslt/element/apply-templates/index.html +++ b/files/ko/web/xslt/element/apply-templates/index.html @@ -1,9 +1,10 @@ --- title: apply-templates -slug: Web/XSLT/apply-templates +slug: Web/XSLT/Element/apply-templates tags: - XSLT_Reference translation_of: Web/XSLT/Element/apply-templates +original_slug: Web/XSLT/apply-templates ---

        {{ XsltRef() }}

        <xsl:apply-templates> 요소는 입력 트리 안 노드 집합을 선택하고 그 집합에 알맞은 템플릿을 적용하도록 처리기에게 지시합니다.

        diff --git a/files/ko/web/xslt/element/attribute-set/index.html b/files/ko/web/xslt/element/attribute-set/index.html index e4b34b6b21..9f9bb349fc 100644 --- a/files/ko/web/xslt/element/attribute-set/index.html +++ b/files/ko/web/xslt/element/attribute-set/index.html @@ -1,9 +1,10 @@ --- title: attribute-set -slug: Web/XSLT/attribute-set +slug: Web/XSLT/Element/attribute-set tags: - XSLT_Reference translation_of: Web/XSLT/Element/attribute-set +original_slug: Web/XSLT/attribute-set ---

        {{ XsltRef() }}

        <xsl:attribute-set> 요소는 CSS 안에 이름 붙인 스타일과 비슷한 방식으로 이름 붙인 속성 집합을 만듭니다. 그러면, 출력 문서에 전체로서 적용할 수 있습니다.

        diff --git a/files/ko/web/xslt/element/attribute/index.html b/files/ko/web/xslt/element/attribute/index.html index 1c348584f7..f4a75657d1 100644 --- a/files/ko/web/xslt/element/attribute/index.html +++ b/files/ko/web/xslt/element/attribute/index.html @@ -1,9 +1,10 @@ --- title: attribute -slug: Web/XSLT/attribute +slug: Web/XSLT/Element/attribute tags: - XSLT_Reference translation_of: Web/XSLT/Element/attribute +original_slug: Web/XSLT/attribute ---

        {{ XsltRef() }}

        <xsl:attribute> 요소는 스타일시트에서 접근할 수 있는 어떤 값을 써서 출력 문서에 속성을 만듭니다. 요소는 속성값을 자리 잡게 하는 출력 문서 요소 안에 정의한 것 가운데 처음이어야 합니다.

        diff --git a/files/ko/web/xslt/element/call-template/index.html b/files/ko/web/xslt/element/call-template/index.html index c5aa8c1a53..623ba72623 100644 --- a/files/ko/web/xslt/element/call-template/index.html +++ b/files/ko/web/xslt/element/call-template/index.html @@ -1,9 +1,10 @@ --- title: call-template -slug: Web/XSLT/call-template +slug: Web/XSLT/Element/call-template tags: - XSLT_Reference translation_of: Web/XSLT/Element/call-template +original_slug: Web/XSLT/call-template ---

        {{ XsltRef() }}

        <xsl:call-template> 요소는 이름 붙인 템플릿을 호출합니다.

        diff --git a/files/ko/web/xslt/element/choose/index.html b/files/ko/web/xslt/element/choose/index.html index ea615e7e15..cb8162c00a 100644 --- a/files/ko/web/xslt/element/choose/index.html +++ b/files/ko/web/xslt/element/choose/index.html @@ -1,9 +1,10 @@ --- title: choose -slug: Web/XSLT/choose +slug: Web/XSLT/Element/choose tags: - XSLT_Reference translation_of: Web/XSLT/Element/choose +original_slug: Web/XSLT/choose ---

        {{ XsltRef() }}

        <xsl:choose> 요소는 많은 선택 가운데 하나를 정의합니다. 그리고 절차형 언어(procedural language)의 스위치 문처럼 동작합니다.

        diff --git a/files/ko/web/xslt/element/comment/index.html b/files/ko/web/xslt/element/comment/index.html index 56b12a9968..33ab342b71 100644 --- a/files/ko/web/xslt/element/comment/index.html +++ b/files/ko/web/xslt/element/comment/index.html @@ -1,9 +1,10 @@ --- title: comment -slug: Web/XSLT/comment +slug: Web/XSLT/Element/comment tags: - XSLT_Reference translation_of: Web/XSLT/Element/comment +original_slug: Web/XSLT/comment ---

        {{ XsltRef() }}

        <xsl:comment> 요소는 출력 문서에 주석을 작성합니다. 오직 텍스트만 포함해야 합니다.

        diff --git a/files/ko/web/xslt/element/copy-of/index.html b/files/ko/web/xslt/element/copy-of/index.html index cfd00ae443..99619c2bba 100644 --- a/files/ko/web/xslt/element/copy-of/index.html +++ b/files/ko/web/xslt/element/copy-of/index.html @@ -1,9 +1,10 @@ --- title: copy-of -slug: Web/XSLT/copy-of +slug: Web/XSLT/Element/copy-of tags: - XSLT_Reference translation_of: Web/XSLT/Element/copy-of +original_slug: Web/XSLT/copy-of ---

        {{ XsltRef() }}

        <xsl:copy-of> 요소는 select 속성이 출력 문서에 무엇을 지정하든지 (자손 노드를 포함하여) 깊게 복사(deep copy)합니다.

        diff --git a/files/ko/web/xslt/element/copy/index.html b/files/ko/web/xslt/element/copy/index.html index 7d6e480167..9d88349f6f 100644 --- a/files/ko/web/xslt/element/copy/index.html +++ b/files/ko/web/xslt/element/copy/index.html @@ -1,9 +1,10 @@ --- title: copy -slug: Web/XSLT/copy +slug: Web/XSLT/Element/copy tags: - XSLT_Reference translation_of: Web/XSLT/Element/copy +original_slug: Web/XSLT/copy ---

        {{ XsltRef() }}

        <xsl:copy> 요소는 출력 문서에 현재 노드의 노드와 어떤 관련 이름공간 노드만을 얕게 복사(shallow copy) 전달합니다. 속성이나 자식은 복사하지 않습니다.

        diff --git a/files/ko/web/xslt/element/decimal-format/index.html b/files/ko/web/xslt/element/decimal-format/index.html index 83e51a2e90..3547ebce4f 100644 --- a/files/ko/web/xslt/element/decimal-format/index.html +++ b/files/ko/web/xslt/element/decimal-format/index.html @@ -1,9 +1,10 @@ --- title: decimal-format -slug: Web/XSLT/decimal-format +slug: Web/XSLT/Element/decimal-format tags: - XSLT_Reference translation_of: Web/XSLT/Element/decimal-format +original_slug: Web/XSLT/decimal-format ---

        {{ XsltRef() }}

        <xsl:decimal-format> 요소는 diff --git a/files/ko/web/xslt/element/fallback/index.html b/files/ko/web/xslt/element/fallback/index.html index af407f4512..df4ad29dc2 100644 --- a/files/ko/web/xslt/element/fallback/index.html +++ b/files/ko/web/xslt/element/fallback/index.html @@ -1,9 +1,10 @@ --- title: fallback -slug: Web/XSLT/fallback +slug: Web/XSLT/Element/fallback tags: - XSLT_Reference translation_of: Web/XSLT/Element/fallback +original_slug: Web/XSLT/fallback ---

        {{ XsltRef() }}

        <xsl:fallback> 요소는 주어진 확장(이나 결국에는 새 버전) 요소에서 지원하지 않으면 쓸 템플릿을 지정합니다.

        diff --git a/files/ko/web/xslt/element/for-each/index.html b/files/ko/web/xslt/element/for-each/index.html index 6beb713190..12e3c53000 100644 --- a/files/ko/web/xslt/element/for-each/index.html +++ b/files/ko/web/xslt/element/for-each/index.html @@ -1,9 +1,10 @@ --- title: for-each -slug: Web/XSLT/for-each +slug: Web/XSLT/Element/for-each tags: - XSLT_Reference translation_of: Web/XSLT/Element/for-each +original_slug: Web/XSLT/for-each ---

        {{ XsltRef() }}

        <xsl:for-each> 요소는 노드 집합을 선택하고 같은 방식으로 각 노드를 처리합니다. 노드 집합을 되풀이하(iterate)거나 현재 노드를 바꾸는데 자주 씁니다. 하나 이상의 <xsl:sort> 요소가 이 요소의 자식으로 나타나면, 처리에 앞서 정렬을 합니다. 그렇지 않으면, 노드는 문서 순으로 처리합니다.

        diff --git a/files/ko/web/xslt/element/if/index.html b/files/ko/web/xslt/element/if/index.html index 2c56b7d218..062d4b661a 100644 --- a/files/ko/web/xslt/element/if/index.html +++ b/files/ko/web/xslt/element/if/index.html @@ -1,9 +1,10 @@ --- title: if -slug: Web/XSLT/if +slug: Web/XSLT/Element/if tags: - XSLT_Reference translation_of: Web/XSLT/Element/if +original_slug: Web/XSLT/if ---

        {{ XsltRef() }}

        <xsl:if> 요소는 test 속성과 템플릿을 포함합니다. test 속성을 참으로 평가하면, 템플릿을 처리합니다. 이것은 다른 언어의 if 문과 비슷합니다. 그러나, <tt>if-then-else</tt> 문의 기능을 다하기 위해 <xsl:when>과 <xsl:otherwise> 자식이 하나씩 있는 <xsl:choose> 요소를 씁니다.

        diff --git a/files/ko/web/xslt/element/import/index.html b/files/ko/web/xslt/element/import/index.html index 5a469656cb..cc21696d56 100644 --- a/files/ko/web/xslt/element/import/index.html +++ b/files/ko/web/xslt/element/import/index.html @@ -1,9 +1,10 @@ --- title: import -slug: Web/XSLT/import +slug: Web/XSLT/Element/import tags: - XSLT_Reference translation_of: Web/XSLT/Element/import +original_slug: Web/XSLT/import ---

        {{ XsltRef() }}

        <xsl:import> 요소는 한 스타일시트의 컨텐트를 다른 스타일시트로 가져오는 역할을 하는 최상위 요소입니다. 대체로, 가져올 스타일시트의 컨텐트는 가져오는 스타일시트의 컨텐트보다 가져오기 우선순위가 낮습니다. 이는 포함되는 스타일시트의 컨텐트가 포함하는 스타일시트의 컨텐트와 우선순위가 정확히 같은 <xsl:include>와는 뚜렷이 다릅니다.

        diff --git a/files/ko/web/xslt/element/include/index.html b/files/ko/web/xslt/element/include/index.html index 965d03a15f..c630a24fa9 100644 --- a/files/ko/web/xslt/element/include/index.html +++ b/files/ko/web/xslt/element/include/index.html @@ -1,9 +1,10 @@ --- title: include -slug: Web/XSLT/include +slug: Web/XSLT/Element/include tags: - XSLT_Reference translation_of: Web/XSLT/Element/include +original_slug: Web/XSLT/include ---

        {{ XsltRef() }}

        <xsl:include> 요소는 한 스타일시트의 컨텐트를 다른 스타일시트에 합칩니다. <xsl:import>와는 달리, 포함되는 스타일시트의 컨텐트는 포함하는 스타일시트의 컨텐트와 우선순위가 정확히 같습니다.

        diff --git a/files/ko/web/xslt/element/key/index.html b/files/ko/web/xslt/element/key/index.html index 733196810d..b90dc027fb 100644 --- a/files/ko/web/xslt/element/key/index.html +++ b/files/ko/web/xslt/element/key/index.html @@ -1,9 +1,10 @@ --- title: key -slug: Web/XSLT/key +slug: Web/XSLT/Element/key tags: - XSLT_Reference translation_of: Web/XSLT/Element/key +original_slug: Web/XSLT/key ---

        {{ XsltRef() }}

        <xsl:key> 요소는 key( ) 함수가 있는 스타일시트 어디서나 쓸 수 있는 이름 붙은 키를 선언합니다.

        diff --git a/files/ko/web/xslt/element/message/index.html b/files/ko/web/xslt/element/message/index.html index d533a2d3c7..da7d0dc5e3 100644 --- a/files/ko/web/xslt/element/message/index.html +++ b/files/ko/web/xslt/element/message/index.html @@ -1,9 +1,10 @@ --- title: message -slug: Web/XSLT/message +slug: Web/XSLT/Element/message tags: - XSLT_Reference translation_of: Web/XSLT/Element/message +original_slug: Web/XSLT/message ---

        {{ XsltRef() }}

        <xsl:message> 요소는 (NS에서 자바스크립트 콘솔에) 메시지를 출력하고 선택에 따라 스타일시트 실행을 끝냅니다. 디버깅에 유용할 수 있습니다.

        diff --git a/files/ko/web/xslt/element/namespace-alias/index.html b/files/ko/web/xslt/element/namespace-alias/index.html index e085abc4e7..2eecc31677 100644 --- a/files/ko/web/xslt/element/namespace-alias/index.html +++ b/files/ko/web/xslt/element/namespace-alias/index.html @@ -1,9 +1,10 @@ --- title: namespace-alias -slug: Web/XSLT/namespace-alias +slug: Web/XSLT/Element/namespace-alias tags: - XSLT_Reference translation_of: Web/XSLT/Element/namespace-alias +original_slug: Web/XSLT/namespace-alias ---

        {{ XsltRef() }}

        <xsl:namespace-alias> 요소는 스타일시트 이름공간을 출력 트리의 다른 이름공간으로 매기는(map) 데 드물게 쓰는 방안(device)입니다. 이 요소의 가장 평범한 쓰임은 다른 스타일시트로부터 스타일시트를 만드는 것입니다. 보통 xsl:가 접두사로 붙은 (결과 트리에 단순히 복사해도 좋을) LRE(literal result element)를 처리기가 오해하는 것을 막기 위해, 결과 트리의 XSLT 이름공간에 적당하게 도로 다시 바꿀 임시 이름공간을 할당합니다.

        diff --git a/files/ko/web/xslt/element/number/index.html b/files/ko/web/xslt/element/number/index.html index b822625a0e..dee0854a78 100644 --- a/files/ko/web/xslt/element/number/index.html +++ b/files/ko/web/xslt/element/number/index.html @@ -1,9 +1,10 @@ --- title: number -slug: Web/XSLT/number +slug: Web/XSLT/Element/number tags: - XSLT_Reference translation_of: Web/XSLT/Element/number +original_slug: Web/XSLT/number ---

        {{ XsltRef() }}

        <xsl:number> 요소는 숫자를 연속으로 셉니다. 또한 숫자를 빠르게 구성하는(format) 데도 쓸 수 있습니다.

        diff --git a/files/ko/web/xslt/element/otherwise/index.html b/files/ko/web/xslt/element/otherwise/index.html index 50249dc0b4..166fccd78a 100644 --- a/files/ko/web/xslt/element/otherwise/index.html +++ b/files/ko/web/xslt/element/otherwise/index.html @@ -1,9 +1,10 @@ --- title: otherwise -slug: Web/XSLT/otherwise +slug: Web/XSLT/Element/otherwise tags: - XSLT_Reference translation_of: Web/XSLT/Element/otherwise +original_slug: Web/XSLT/otherwise ---

        {{ XsltRef() }}

        <xsl:otherwise> 요소는 아무런 <xsl:when> 조건도 적용하지 않았을 때 취하면 좋을 동작을 정의하는 데 씁니다. 다른 프로그래밍 언어의 else나 default 경우와 비슷합니다.

        diff --git a/files/ko/web/xslt/element/output/index.html b/files/ko/web/xslt/element/output/index.html index 97baf3f433..396209b19f 100644 --- a/files/ko/web/xslt/element/output/index.html +++ b/files/ko/web/xslt/element/output/index.html @@ -1,9 +1,10 @@ --- title: output -slug: Web/XSLT/output +slug: Web/XSLT/Element/output tags: - XSLT_Reference translation_of: Web/XSLT/Element/output +original_slug: Web/XSLT/output ---

        {{ XsltRef() }}

        <xsl:output> 요소는 출력 문서의 특성을 조절합니다. method 속성이 있는 이 요소가 Netscape에서 정확하게 기능하도록 쓸 수 있어야 합니다. 7.0 현재, method="text"는 기대한 대로 동작합니다.

        diff --git a/files/ko/web/xslt/element/param/index.html b/files/ko/web/xslt/element/param/index.html index e1bcf36e19..647bc6de91 100644 --- a/files/ko/web/xslt/element/param/index.html +++ b/files/ko/web/xslt/element/param/index.html @@ -1,9 +1,10 @@ --- title: param -slug: Web/XSLT/param +slug: Web/XSLT/Element/param tags: - XSLT_Reference translation_of: Web/XSLT/Element/param +original_slug: Web/XSLT/param ---

        {{ XsltRef() }}

        <xsl:param> 요소는 이름과 선택에 따라 기본값으로 매개변수를 설정합니다. 최상위 요소로 쓸 때, 매개변수는 전역입니다. <xsl:template> 요소 안에서 쓰면, 매개변수는 그 템플릿에 대해 지역입니다. 이 경우에 요소는 템플릿의 첫 자식 요소여야 합니다.

        diff --git a/files/ko/web/xslt/element/preserve-space/index.html b/files/ko/web/xslt/element/preserve-space/index.html index 771ffe81d6..d8f881ca93 100644 --- a/files/ko/web/xslt/element/preserve-space/index.html +++ b/files/ko/web/xslt/element/preserve-space/index.html @@ -1,9 +1,10 @@ --- title: preserve-space -slug: Web/XSLT/preserve-space +slug: Web/XSLT/Element/preserve-space tags: - XSLT_Reference translation_of: Web/XSLT/Element/preserve-space +original_slug: Web/XSLT/preserve-space ---

        {{ XsltRef() }}

        <xsl:preserve-space> 요소는 공백을 보존하면 좋을 소스 문서의 요소를 정의합니다. 하나 이상의 요소가 있으면, 공백 문자로 이름을 구분하세요. 공백 보존하기가 기본 설정이므로 이 요소는 오직 <xsl:strip-space> 요소와 거꾸로 동작하기 위해 쓸 필요가 있습니다.

        diff --git a/files/ko/web/xslt/element/processing-instruction/index.html b/files/ko/web/xslt/element/processing-instruction/index.html index ad1c6eaaf6..7050401821 100644 --- a/files/ko/web/xslt/element/processing-instruction/index.html +++ b/files/ko/web/xslt/element/processing-instruction/index.html @@ -1,9 +1,10 @@ --- title: processing-instruction -slug: Web/XSLT/processing-instruction +slug: Web/XSLT/Element/processing-instruction tags: - XSLT_Reference translation_of: Web/XSLT/Element/processing-instruction +original_slug: Web/XSLT/processing-instruction ---

        {{ XsltRef() }}

        <xsl:processing-instruction> 요소는 출력 문서에 처리 명령을 씁니다.

        diff --git a/files/ko/web/xslt/element/sort/index.html b/files/ko/web/xslt/element/sort/index.html index 22217ec61f..878933a511 100644 --- a/files/ko/web/xslt/element/sort/index.html +++ b/files/ko/web/xslt/element/sort/index.html @@ -1,9 +1,10 @@ --- title: sort -slug: Web/XSLT/sort +slug: Web/XSLT/Element/sort tags: - XSLT_Reference translation_of: Web/XSLT/Element/sort +original_slug: Web/XSLT/sort ---

        {{ XsltRef() }}

        <xsl:sort> 요소는 <xsl:apply-templates>나 <xsl:for-each>가 선택한 노드에 정렬키를 정의하고 노드를 처리할 순서를 결정합니다.

        diff --git a/files/ko/web/xslt/element/strip-space/index.html b/files/ko/web/xslt/element/strip-space/index.html index 7bbc485afd..3809c15ef1 100644 --- a/files/ko/web/xslt/element/strip-space/index.html +++ b/files/ko/web/xslt/element/strip-space/index.html @@ -1,9 +1,10 @@ --- title: strip-space -slug: Web/XSLT/strip-space +slug: Web/XSLT/Element/strip-space tags: - XSLT_Reference translation_of: Web/XSLT/Element/strip-space +original_slug: Web/XSLT/strip-space ---

        {{ XsltRef() }}

        <xsl:strip-space> 요소는 공백을 지웠으면 하는 소스 문서의 요소를 정의합니다.

        diff --git a/files/ko/web/xslt/element/stylesheet/index.html b/files/ko/web/xslt/element/stylesheet/index.html index 0119cec645..14357afada 100644 --- a/files/ko/web/xslt/element/stylesheet/index.html +++ b/files/ko/web/xslt/element/stylesheet/index.html @@ -1,9 +1,10 @@ --- title: stylesheet -slug: Web/XSLT/stylesheet +slug: Web/XSLT/Element/stylesheet tags: - XSLT_Reference translation_of: Web/XSLT/Element/stylesheet +original_slug: Web/XSLT/stylesheet ---

        {{ XsltRef() }}

        <xsl:stylesheet>(나 동등한 <xsl:transform>) 요소는 스타일시트의 최외곽 요소입니다.

        diff --git a/files/ko/web/xslt/element/template/index.html b/files/ko/web/xslt/element/template/index.html index 1ce4a66d2b..aef6bd013d 100644 --- a/files/ko/web/xslt/element/template/index.html +++ b/files/ko/web/xslt/element/template/index.html @@ -1,9 +1,10 @@ --- title: template -slug: Web/XSLT/template +slug: Web/XSLT/Element/template tags: - XSLT_Reference translation_of: Web/XSLT/Element/template +original_slug: Web/XSLT/template ---

        {{ XsltRef() }}

        <xsl:template> 요소는 출력 생성 템플릿을 정의합니다. 이 요소는 match 속성이나 name 속성 집합이 있어야 합니다.

        diff --git a/files/ko/web/xslt/element/text/index.html b/files/ko/web/xslt/element/text/index.html index 71bd6eceda..ce02fc6f17 100644 --- a/files/ko/web/xslt/element/text/index.html +++ b/files/ko/web/xslt/element/text/index.html @@ -1,9 +1,10 @@ --- title: text -slug: Web/XSLT/text +slug: Web/XSLT/Element/text tags: - XSLT_Reference translation_of: Web/XSLT/Element/text +original_slug: Web/XSLT/text ---

        {{ XsltRef() }}

        <xsl:text> 요소는 출력 트리에 리터럴(literal) 텍스트를 씁니다. #PCDATA, 리터럴 텍스트, 엔티티 참조를 포함할 지도 모릅니다.

        diff --git a/files/ko/web/xslt/element/transform/index.html b/files/ko/web/xslt/element/transform/index.html index 8071ebdad3..b1c398999c 100644 --- a/files/ko/web/xslt/element/transform/index.html +++ b/files/ko/web/xslt/element/transform/index.html @@ -1,9 +1,10 @@ --- title: transform -slug: Web/XSLT/transform +slug: Web/XSLT/Element/transform tags: - XSLT_Reference translation_of: Web/XSLT/Element/transform +original_slug: Web/XSLT/transform ---

        {{ XsltRef() }}

        <xsl:transform> 요소는 <xsl:stylesheet> 요소와 정확히 같습니다.

        diff --git a/files/ko/web/xslt/element/value-of/index.html b/files/ko/web/xslt/element/value-of/index.html index 90f1777bed..1020c96edb 100644 --- a/files/ko/web/xslt/element/value-of/index.html +++ b/files/ko/web/xslt/element/value-of/index.html @@ -1,9 +1,10 @@ --- title: value-of -slug: Web/XSLT/value-of +slug: Web/XSLT/Element/value-of tags: - XSLT_Reference translation_of: Web/XSLT/Element/value-of +original_slug: Web/XSLT/value-of ---

        {{ XsltRef() }}

        <xsl:value-of> 요소는 XPath 식을 평가하여 그것을 문자열로 바꾸고 문자열을 결과 트리에 씁니다.

        diff --git a/files/ko/web/xslt/element/variable/index.html b/files/ko/web/xslt/element/variable/index.html index 8568f70b20..ba1f44730a 100644 --- a/files/ko/web/xslt/element/variable/index.html +++ b/files/ko/web/xslt/element/variable/index.html @@ -1,9 +1,10 @@ --- title: variable -slug: Web/XSLT/variable +slug: Web/XSLT/Element/variable tags: - XSLT_Reference translation_of: Web/XSLT/Element/variable +original_slug: Web/XSLT/variable ---

        {{ XsltRef() }}

        <xsl:variable> 요소는 스타일시트에 전역 변수나 지역 변수를 선언하고 그 변수에 값을 줍니다. XSLT가 부작용(side-effect)을 허용하지 않기 때문에, 변수값을 한 번 주면 그 변수는 범위(scope)를 벗어날 때까지 같은 값입니다.

        diff --git a/files/ko/web/xslt/element/when/index.html b/files/ko/web/xslt/element/when/index.html index 4d5f52d9c3..7d1d5dcf0b 100644 --- a/files/ko/web/xslt/element/when/index.html +++ b/files/ko/web/xslt/element/when/index.html @@ -1,9 +1,10 @@ --- title: when -slug: Web/XSLT/when +slug: Web/XSLT/Element/when tags: - XSLT_Reference translation_of: Web/XSLT/Element/when +original_slug: Web/XSLT/when ---

        {{ XsltRef() }}

        <xsl:when> 요소는 항상 case 문처럼 동작하는 <xsl:choose> 요소 안에 나타납니다.

        diff --git a/files/ko/web/xslt/element/with-param/index.html b/files/ko/web/xslt/element/with-param/index.html index cd96049cc5..78e2dedd60 100644 --- a/files/ko/web/xslt/element/with-param/index.html +++ b/files/ko/web/xslt/element/with-param/index.html @@ -1,9 +1,10 @@ --- title: with-param -slug: Web/XSLT/with-param +slug: Web/XSLT/Element/with-param tags: - XSLT_Reference translation_of: Web/XSLT/Element/with-param +original_slug: Web/XSLT/with-param ---

        {{ XsltRef() }}

        <xsl:with-param> 요소는 템플릿에 건네는 매개변수 값을 지정합니다.

        diff --git a/files/ko/web/xslt/xslt_js_interface_in_gecko/index.html b/files/ko/web/xslt/xslt_js_interface_in_gecko/index.html index c3ee407348..18932af57d 100644 --- a/files/ko/web/xslt/xslt_js_interface_in_gecko/index.html +++ b/files/ko/web/xslt/xslt_js_interface_in_gecko/index.html @@ -1,10 +1,11 @@ --- title: The XSLT/JavaScript Interface in Gecko -slug: Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko +slug: Web/XSLT/XSLT_JS_interface_in_Gecko tags: - DOM - XSLT translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko +original_slug: Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko ---
        1. 개요
          2. diff --git a/files/ko/web/xslt/xslt_js_interface_in_gecko/introduction/index.html b/files/ko/web/xslt/xslt_js_interface_in_gecko/introduction/index.html index dd74a5998d..0c34b2bffb 100644 --- a/files/ko/web/xslt/xslt_js_interface_in_gecko/introduction/index.html +++ b/files/ko/web/xslt/xslt_js_interface_in_gecko/introduction/index.html @@ -1,7 +1,8 @@ --- title: Introduction -slug: Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Introduction +slug: Web/XSLT/XSLT_JS_interface_in_Gecko/Introduction translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Introduction +original_slug: Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Introduction ---

          개요

          XSLT를 지원하는 현대의 브라우저를 가지고, 개발자는 XSLT가 제공하는 힘에 접근하기 위해 자바스크립트를 지금 사용할 수 있다. 자바스크립트는 웹 프로그램이 XML자료를 로드하고, XSLT를 통해 표현가능한 형태로 처리하고 존재하는 문서안에 넣는 것을 가능하게 한다. XML자료는 아무런 표현자료 없이 오직 날 정보만을 포함하므로, 다이얼업에서도 빠르게 로드할 수 있다.

          diff --git a/files/ko/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.html b/files/ko/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.html index fb2f456e70..d4bad4d57f 100644 --- a/files/ko/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.html +++ b/files/ko/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.html @@ -1,7 +1,8 @@ --- title: Setting Parameters -slug: Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters +slug: Web/XSLT/XSLT_JS_interface_in_Gecko/Setting_Parameters translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Setting_Parameters +original_slug: Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters ---

          Parameter 설정

          이미 코딩된 .xsl과 .xml 파일을 이용하여 변환을 실행하는 것은 꽤 쓸모있는데, .xml파일을 JavaScript로부터 설정하는 것은 좀 더 쓸모있다.예로, JavaScript와 XSLT는 XML데이터를 정렬하여 표시하는 데 쓸 수 있다. 정렬은 오름차순과 내림차순을 바꿀 수 있어야 할 것이다. XSLT는 xsl:param 요소를 제공하는데, 그것은 xsl:stylesheet 요소의 자식이다. XSLTProcessor()는 이 파라메터와 상호작용하기 위해 3가지 JavaScript 메소드를 제공한다: setParameter, getParameter, removeParameter.

          -- cgit v1.2.3-54-g00ecf