diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:48:24 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:48:24 +0100 |
| commit | ee778d6eea54935fd05022e0ba8c49456003381a (patch) | |
| tree | 151a4cef804d8823cc8fc753b8edc693b7078241 /files/ko/learn | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-ee778d6eea54935fd05022e0ba8c49456003381a.tar.gz translated-content-ee778d6eea54935fd05022e0ba8c49456003381a.tar.bz2 translated-content-ee778d6eea54935fd05022e0ba8c49456003381a.zip | |
unslug ko: move
Diffstat (limited to 'files/ko/learn')
| -rw-r--r-- | files/ko/learn/accessibility/html/index.html (renamed from files/ko/learn/접근성/html/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/accessibility/index.html (renamed from files/ko/learn/접근성/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/accessibility/mobile/index.html (renamed from files/ko/learn/접근성/모바일/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/accessibility/what_is_accessibility/index.html (renamed from files/ko/learn/접근성/what_is_accessibility/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html (renamed from files/ko/learn/common_questions/웹_사이트가_제대로_동작하는지_확인/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/common_questions/thinking_before_coding/index.html (renamed from files/ko/learn/common_questions/코딩하기_전에_생각하기/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/css/basics/layout/index.html | 409 | ||||
| -rw-r--r-- | files/ko/learn/css/building_blocks/fundamental_css_comprehension/index.html (renamed from files/ko/learn/css/introduction_to_css/기본적인_css_이해/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/css/building_blocks/selectors/index.html (renamed from files/ko/learn/css/building_blocks/선택자/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/css/building_blocks/the_box_model/index.html (renamed from files/ko/learn/css/building_blocks/상자_모델/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/css/css_layout/media_queries/index.html (renamed from files/ko/learn/css/css_layout/미디어_쿼리_초보자_안내서/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/css/css_layout/normal_flow/index.html (renamed from files/ko/learn/css/css_layout/일반_흐름/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/css/css_layout/positioning/index.html (renamed from files/ko/learn/css/css_layout/위치잡기/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/css/css_layout/responsive_design/index.html (renamed from files/ko/learn/css/css_layout/반응형_디자인/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/css/css_layout/supporting_older_browsers/index.html (renamed from files/ko/learn/css/css_layout/이전_브라우저_지원/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/css/howto/css_faq/index.html | 199 | ||||
| -rw-r--r-- | files/ko/learn/forms/how_to_structure_a_web_form/index.html (renamed from files/ko/learn/html/forms/html_폼_구성_방법/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/forms/index.html (renamed from files/ko/learn/html/forms/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/forms/sending_and_retrieving_form_data/index.html (renamed from files/ko/learn/html/forms/sending_and_retrieving_form_data/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/forms/your_first_form/index.html (renamed from files/ko/learn/html/forms/your_first_html_form/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/getting_started_with_the_web/css_basics/index.html (renamed from files/ko/learn/getting_started_with_the_web/css_기본/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/getting_started_with_the_web/dealing_with_files/index.html (renamed from files/ko/learn/getting_started_with_the_web/파일들_다루기/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/getting_started_with_the_web/how_the_web_works/index.html (renamed from files/ko/learn/getting_started_with_the_web/웹의_동작_방식/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/getting_started_with_the_web/html_basics/index.html (renamed from files/ko/learn/getting_started_with_the_web/html_기본/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/getting_started_with_the_web/installing_basic_software/index.html (renamed from files/ko/learn/getting_started_with_the_web/기본_소프트웨어_설치하기/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/getting_started_with_the_web/publishing_your_website/index.html (renamed from files/ko/learn/getting_started_with_the_web/웹사이트_출판하기/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/how_to_contribute/index.html | 105 | ||||
| -rw-r--r-- | files/ko/learn/html/howto/author_fast-loading_html_pages/index.html | 132 | ||||
| -rw-r--r-- | files/ko/learn/html/howto/mark_abbreviations_and_make_them_understandable/index.html | 268 | ||||
| -rw-r--r-- | files/ko/learn/html/howto/use_data_attributes/index.html (renamed from files/ko/learn/html/howto/데이터_속성_사용하기/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html (renamed from files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/infrastructure/index.html | 19 | ||||
| -rw-r--r-- | files/ko/learn/javascript/building_blocks/conditionals/index.html (renamed from files/ko/learn/javascript/building_blocks/조건문/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/javascript/client-side_web_apis/manipulating_documents/index.html | 145 | ||||
| -rw-r--r-- | files/ko/learn/javascript/objects/test_your_skills_colon__json/index.html (renamed from files/ko/learn/javascript/objects/얼마나_이해했는지_확인해보자_colon__json/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/server-side/express_nodejs/development_environment/index.html (renamed from files/ko/learn/server-side/express_nodejs/개발_환경/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/server-side/express_nodejs/skeleton_website/index.html (renamed from files/ko/learn/server-side/express_nodejs/스켈레톤_웹사이트/index.html) | 0 | ||||
| -rw-r--r-- | files/ko/learn/server-side/node_server_without_framework/index.html | 74 | ||||
| -rw-r--r-- | files/ko/learn/skills/index.html | 22 | ||||
| -rw-r--r-- | files/ko/learn/web_기술/index.html | 24 |
40 files changed, 550 insertions, 847 deletions
diff --git a/files/ko/learn/접근성/html/index.html b/files/ko/learn/accessibility/html/index.html index dae842fc92..dae842fc92 100644 --- a/files/ko/learn/접근성/html/index.html +++ b/files/ko/learn/accessibility/html/index.html diff --git a/files/ko/learn/접근성/index.html b/files/ko/learn/accessibility/index.html index 01c9c2e2bb..01c9c2e2bb 100644 --- a/files/ko/learn/접근성/index.html +++ b/files/ko/learn/accessibility/index.html diff --git a/files/ko/learn/접근성/모바일/index.html b/files/ko/learn/accessibility/mobile/index.html index a64c0eaa88..a64c0eaa88 100644 --- a/files/ko/learn/접근성/모바일/index.html +++ b/files/ko/learn/accessibility/mobile/index.html diff --git a/files/ko/learn/접근성/what_is_accessibility/index.html b/files/ko/learn/accessibility/what_is_accessibility/index.html index 67f4b6d302..67f4b6d302 100644 --- a/files/ko/learn/접근성/what_is_accessibility/index.html +++ b/files/ko/learn/accessibility/what_is_accessibility/index.html diff --git a/files/ko/learn/common_questions/웹_사이트가_제대로_동작하는지_확인/index.html b/files/ko/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html index d39ea4069f..d39ea4069f 100644 --- a/files/ko/learn/common_questions/웹_사이트가_제대로_동작하는지_확인/index.html +++ b/files/ko/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html diff --git a/files/ko/learn/common_questions/코딩하기_전에_생각하기/index.html b/files/ko/learn/common_questions/thinking_before_coding/index.html index 8885c5999b..8885c5999b 100644 --- a/files/ko/learn/common_questions/코딩하기_전에_생각하기/index.html +++ b/files/ko/learn/common_questions/thinking_before_coding/index.html 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 ---- -<p>{{PreviousNext("Learn/CSS/Basics/Box_model","Learn/CSS/Howto/style_text")}}</p> - -<p class="summary"><span class="seoSummary">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.</span> 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.</p> - -<p>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.</p> - -<h2 id="The_flow">The flow</h2> - -<p>At its most basic level an HTML document is a text document structured with {{Glossary("tag","tags")}}. In such a document, the text <em>flows</em>. 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.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11955/line-break-flow.svg" style="height: auto; max-width: 450px;"></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11955/line-break-flow.svg#large" style="height: auto; max-width: 450px;"></p> - -<p>Each {{Glossary("element","elements")}} in the document alters the flow of text in various ways:</p> - -<ul> - <li>Some elements can simply follow the text flow as if they were non-existent.</li> - <li>Some elements can force a line break at any point in the flow whether it has reached the edge of the document or not.</li> - <li>Some elements can create a new text flow for their inner content independent from the main text flow.</li> -</ul> - -<h3 id="디스플레이_요소_(Elements_display_categories)">디스플레이 요소 (Elements display categories)</h3> - -<p>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:</p> - -<dl> - <dt>none</dt> - <dd>모든 요소를 제거 합니다.</dd> - <dt>inline</dt> - <dd>줄을 바꾸지 않고, 해당 위치에서 다른 요소들과 같은 선상에 위치하려는 성질을 말합니다. </dd> - <dt>block</dt> - <dd>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 <a href="/en-US/docs/Learn/CSS/Basics/Box_model">box model</a>.</dd> - <dt>inline-block</dt> - <dd>This value makes the element somewhat in between inline and block type display: like <code>inline</code> boxes it flows with the text normally but, like block boxes, it's content is no longer part of the global text.</dd> -</dl> - -<p>Let's see an example.</p> - -<p>HTML:</p> - -<pre class="brush: 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> -</pre> - -<p>CSS:</p> - -<pre class="brush: css">span { - width: 5em; - background: yellow; -} - -.none span { display: none; } -.inline span { display: inline; } -.block span { display: block; } -.inline-block span { display: inline-block; }</pre> - -<p>Results:</p> - -<p>{{EmbedLiveSample('Elements_display_categories', '100%', '300px')}}</p> - -<h2 id="Altering_the_flow">Altering the flow</h2> - -<p>By setting the display property you're already altering the flow, but you can go further.</p> - -<h3 id="Text_layout">Text layout</h3> - -<p>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.</p> - -<p>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")}}.</p> - -<p>Except for <code>text-align and<font face="Open Sans, Arial, sans-serif">, </font></code><code>text-indent </code>the other properties have subtle effects on the text and <code>vertical-align</code> is often used with inline-block boxes.</p> - -<p>An example will make things clearer.</p> - -<p>HTML:</p> - -<pre class="brush: 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> -</pre> - -<p>CSS:</p> - -<pre class="brush: 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; -}</pre> - -<div class="note"> -<p>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.</p> -</div> - -<p>Results:</p> - -<p>{{ EmbedLiveSample('Text_layout', '100%', '350') }}</p> - -<div class="note"> -<p>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.</p> -</div> - -<h3 id="Floating">Floating</h3> - -<p>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.</p> - -<h4 id="Simple_floating">Simple floating</h4> - -<p>HTML:</p> - -<pre class="brush: 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></pre> - -<p>CSS:</p> - -<pre class="brush: 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; -}</pre> - -<p>Results:</p> - -<p>{{ EmbedLiveSample('Simple_floating', '100%', '280') }}</p> - -<h4 id="Layout_with_floating">Layout with floating</h4> - -<p>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.</p> - -<p>Once again, an example will make things clearer.</p> - -<p>HTML:</p> - -<pre class="brush: 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></pre> - -<p>CSS:</p> - -<pre class="brush: 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 */</pre> - -<p>Results:</p> - -<p>{{ EmbedLiveSample('Layout_with_floating', '100%', '520') }}</p> - -<p>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 <a href="http://www.positioniseverything.net/articles/onetruelayout/">floating boxes has been studied for long</a> and they are among the most robust solutions for a simple layout that must be compatible with legacy browsers.</p> - -<p>If you want to better understand all the subtleties of floating boxes, we encourage you to read <em><a href="https://css-tricks.com/all-about-floats/">All about float</a></em> by Chris Coyer.</p> - -<h3 id="Positioning">Positioning</h3> - -<p>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.</p> - -<p>The {{cssxref("position")}} property can take on four different values:</p> - -<dl> - <dt>static</dt> - <dd>This is the default value for all elements: they are part of the flow and don't define any specific positioning context.</dd> - <dt>relative</dt> - <dd>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.</dd> - <dt>absolute</dt> - <dd>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 <em>static</em>. 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.</dd> - <dt>fixed</dt> - <dd>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")}}.</dd> -</dl> - -<p>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.</p> - -<p>Okay, let's see an example to visualize it at work.</p> - -<p>HTML:</p> - -<pre class="brush: 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></pre> - -<p>CSS:</p> - -<pre class="brush: css">p { - text-align: centre; - color: #fff; -} - - -/* Setting the position to relative -allows any child elements to be positioned -anywhere, in <em><strong>relation</strong> to its container. */ -</em> -.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; -} -</pre> - -<p>Results:</p> - -<p>{{ EmbedLiveSample('Positioning', '100%', '400') }}</p> - -<p>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 <em><a href="http://alistapart.com/article/css-positioning-101">CSS positioning 101</a></em> by Noah Stokes.</p> - -<h2 id="What's_next">What's next</h2> - -<p>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 <a href="/en-US/docs/Learn/CSS/Howto">practical usage of CSS</a>. 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, <a href="/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">multiple columns layout</a>, and <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">flexible box layout</a>.</p> - -<p>{{PreviousNext("Learn/CSS/Basics/Box_model","Learn/CSS/Howto/style_text")}}</p> - -<div class="grammarly-disable-indicator"> </div> diff --git a/files/ko/learn/css/introduction_to_css/기본적인_css_이해/index.html b/files/ko/learn/css/building_blocks/fundamental_css_comprehension/index.html index d16df40221..d16df40221 100644 --- a/files/ko/learn/css/introduction_to_css/기본적인_css_이해/index.html +++ b/files/ko/learn/css/building_blocks/fundamental_css_comprehension/index.html diff --git a/files/ko/learn/css/building_blocks/선택자/index.html b/files/ko/learn/css/building_blocks/selectors/index.html index 274653da91..274653da91 100644 --- a/files/ko/learn/css/building_blocks/선택자/index.html +++ b/files/ko/learn/css/building_blocks/selectors/index.html diff --git a/files/ko/learn/css/building_blocks/상자_모델/index.html b/files/ko/learn/css/building_blocks/the_box_model/index.html index eec5f2b929..eec5f2b929 100644 --- a/files/ko/learn/css/building_blocks/상자_모델/index.html +++ b/files/ko/learn/css/building_blocks/the_box_model/index.html diff --git a/files/ko/learn/css/css_layout/미디어_쿼리_초보자_안내서/index.html b/files/ko/learn/css/css_layout/media_queries/index.html index cf13a1421c..cf13a1421c 100644 --- a/files/ko/learn/css/css_layout/미디어_쿼리_초보자_안내서/index.html +++ b/files/ko/learn/css/css_layout/media_queries/index.html diff --git a/files/ko/learn/css/css_layout/일반_흐름/index.html b/files/ko/learn/css/css_layout/normal_flow/index.html index 43b4366c0e..43b4366c0e 100644 --- a/files/ko/learn/css/css_layout/일반_흐름/index.html +++ b/files/ko/learn/css/css_layout/normal_flow/index.html diff --git a/files/ko/learn/css/css_layout/위치잡기/index.html b/files/ko/learn/css/css_layout/positioning/index.html index 76a491ae0e..76a491ae0e 100644 --- a/files/ko/learn/css/css_layout/위치잡기/index.html +++ b/files/ko/learn/css/css_layout/positioning/index.html diff --git a/files/ko/learn/css/css_layout/반응형_디자인/index.html b/files/ko/learn/css/css_layout/responsive_design/index.html index b1311448c7..b1311448c7 100644 --- a/files/ko/learn/css/css_layout/반응형_디자인/index.html +++ b/files/ko/learn/css/css_layout/responsive_design/index.html diff --git a/files/ko/learn/css/css_layout/이전_브라우저_지원/index.html b/files/ko/learn/css/css_layout/supporting_older_browsers/index.html index 07910a4d26..07910a4d26 100644 --- a/files/ko/learn/css/css_layout/이전_브라우저_지원/index.html +++ b/files/ko/learn/css/css_layout/supporting_older_browsers/index.html 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 +--- +<h2 id="왜_유효한_내_CSS가_왜_올바르게_그려지지_않는가">왜 유효한 내 CSS가 왜 올바르게 그려지지 않는가?</h2> + +<p>Browsers use the <code>DOCTYPE</code> 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 <code>DOCTYPE</code> declaration at the start of your HTML will improve browser standards compliance.</p> + +<p>Modern browsers have two main rendering modes:</p> + +<ul> + <li><em>Quirks Mode</em>: also called backwards-compatibility mode, allows legacy webpages to be rendered as their authors intended, following the non-standard rendering rules used by older browsers. Documents with an incomplete, incorrect, or missing <code>DOCTYPE</code> declaration or a known <code>DOCTYPE</code> declaration in common use before 2001 will be rendered in Quirks Mode.</li> + <li><em>Standards Mode</em>: the browser attempts to follow the W3C standards strictly. New HTML pages are expected to be designed for standards-compliant browsers, and as a result, pages with a modern <code>DOCTYPE</code> declaration will be rendered with Standards Mode.</li> +</ul> + +<p>Gecko-based browsers, have a third <em><a href="/en-US/docs/Gecko's_"Almost_Standards"_Mode" title="Gecko's_"Almost_Standards"_Mode">Almost Standards Mode</a></em> that has only a few minor quirks.</p> + +<p>This is a list of the most commonly used <code>DOCTYPE</code> declarations that will trigger Standards or Almost Standards mode:</p> + +<pre><!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"> +</pre> + +<h2 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered">왜 유효한 내 CSS는 모두 랜더링 되지 않는가?</h2> + +<p>원인은 다음과 같다:</p> + +<ul> + <li>CSS 파일의 경로가 잘못되었다.</li> + <li>적용을 위해서는 CSS 파일은 반드시 <code>text/css</code> MIME type으로 전달되어야 한다. 만약 웹 서버가 이 타입을 지원하지 않는다면 적용할 수 없다.</li> +</ul> + +<h2 id="Difference_between_id_and_class" name="Difference_between_id_and_class">id 와 css는 무엇이 다른가?</h2> + +<p>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.<br> + <br> + 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.<br> + <br> + Use a class-specific style when you want to apply the styling rules to many blocks and elements within the page.</p> + +<p>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).</p> + +<p>See <a href="/en-US/docs/CSS/Getting_Started/Selectors" title="CSS/Getting_Started/Selectors"> CSS selectors</a></p> + +<h2 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value"> 프로퍼티(property)에 기본값(default value)으로 복귀 시키는 방법은?</h2> + +<p> </p> + +<p>본래 CSS는 "default" 키워드를 제공하지 않으며 속성의 기본값을 복원하는 유일한 방법은 해당 속성을 명시 적으로 다시 선언하는 것이다.</p> + +<pre><code>/* Heading default color is black */ +h1 { color: red; } +h1 { color: black; }</code></pre> + +<p>이것은 CSS 2에서 변경되었다. 키워드 <a href="https://developer.mozilla.org/es/CSS/initial" title="initial">initial</a>은 이제 CSS 속성에서 유효한 값이다. 지정된 속성의 CSS 사양에 정의 된 기본값으로 재설정된다.</p> + +<pre><code>/* Heading default color is black */ +h1 { color: red; } +h1 { color: initial; }</code></pre> + +<p> </p> + +<h2 id="Derived_styles" name="Derived_styles">어떻게 하면 한 스타일(style)로 부터 다른 스타일을 파생시킬 수 있는가?</h2> + +<p>CSS는 한 스타일 안에서 다른 조건을 정의하는 것을 허용하지 않는다. (See <a href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer's note about the Working Group's stance</a>). 그러나 여러개의 클래스(class)들을 한 엘리먼트(element)에 할당하면 같은 효과를 제공받을 수 있다.</p> + +<h2 id="Assigning_multiple_classes" name="Assigning_multiple_classes">어떻게 하면 한 요소(element)에 여러 클래스(class)를 할당할 수 있는가?</h2> + +<p>HTML elements can be assigned multiple classes by listing the classes in the <code>class</code> attribute, with a blank space to separate them.</p> + +<pre><style type="text/css"> +.news { background: black; color: white; } +.today { font-weight: bold; } +</style> + +<div class="news today"> +... content of today's news ... +</div> +</pre> + +<p>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 <code>class</code> attribute is not relevant.</p> + +<h2 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work">왜 내 스타일 룰(style rule)은 올바르게 동작하지 않는가?</h2> + +<p>Style rules that are syntactically correct may not apply in certain situations. You can use <a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a>'s <em>CSS Style Rules</em> view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.</p> + +<h3 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy">HTML 요소(element) 계층(hierarchy)</h3> + +<p>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.</p> + +<pre>.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> +</pre> + +<p>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.</p> + +<h3 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule">명확한 스타일 룰 재정의</h3> + +<p>CSS 스타일시트 안에서 순서가 중요하다. 만약 룰을 정의하고 같은 룰을 재정의 한다면 마지막 정의가 적용된다.</p> + +<pre>#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> +</pre> + +<p>위와 같은 종류의 오류를 방지하려면 특정 선택자에 대해 규칙을 한 번만 정의하고 해당 선택자에 속하는 모든 규칙을 그룹화 하는 것이 좋다.</p> + +<h3 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property">프로퍼티(property) 축약형의 사용</h3> + +<p>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.</p> + +<pre>#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> +</pre> + +<p>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 <strong>is</strong> important.</p> + +<pre>#stockTicker { + font-weight: bold; + font: 12px Verdana; /* font-weight is now normal */ +} +</pre> + +<h3 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector">* 셀렉터(selector)의 사용</h3> + +<p>* 와일드카드 셀렉터는 모든 엘리먼트에 적용되고, 이것은 특별히 주의를 기울여 사용해야 한다.</p> + +<pre>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> +</pre> + +<p>In this example the <code>body *</code> selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So <code>font-weight: bold;</code> applied to the .corpName class is overridden by <code>font-weight: normal;</code> applied to all elements in the body.</p> + +<p>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.</p> + +<h3 id="Specificity_in_CSS" name="Specificity_in_CSS">CSS의 특수성</h3> + +<p>When multiples rules apply to a certain element, the rule chosen depends on its style <a href="/en-US/docs/CSS/Specificity" title="Specificity">specificity</a>. Inline style (in HTML <code>style</code> attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.</p> + +<pre>div { color: black; } +#orange { color: orange; } +.green { color: green; } + +<div id="orange" class="green" style="color: red;">This is red</div> +</pre> + +<p>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 <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a>.</p> + +<h2 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F">-moz-*, -ms-*, -webkit-*, -o-* and -khtml-* 프로퍼티(property)들이 하는 것은?</h2> + +<p>These properties, called <em>prefixed properties</em>, 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.</p> + +<p>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.</p> + +<p>Please see the <a href="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions" title="CSS Reference/Mozilla Extensions">Mozilla CSS Extensions</a> page for more information on the Mozilla-prefixed CSS properties.</p> + +<h2 id="z-index는_어떻게_포지셔닝을_하는가">z-index는 어떻게 포지셔닝을 하는가?</h2> + +<p>The z-index property specifies the stack order of elements.</p> + +<p>An element with a higher z-index/stack order is always in front of an element with a lower z-index/stack order.</p> + +<p>Z-index will only work on elements that have a specified position (<code>position:absolute</code>, <code>position:relative</code>, or <code>position:fixed</code>).</p> diff --git a/files/ko/learn/html/forms/html_폼_구성_방법/index.html b/files/ko/learn/forms/how_to_structure_a_web_form/index.html index 37bfbb57ae..37bfbb57ae 100644 --- a/files/ko/learn/html/forms/html_폼_구성_방법/index.html +++ b/files/ko/learn/forms/how_to_structure_a_web_form/index.html diff --git a/files/ko/learn/html/forms/index.html b/files/ko/learn/forms/index.html index f7244cbdc1..f7244cbdc1 100644 --- a/files/ko/learn/html/forms/index.html +++ b/files/ko/learn/forms/index.html diff --git a/files/ko/learn/html/forms/sending_and_retrieving_form_data/index.html b/files/ko/learn/forms/sending_and_retrieving_form_data/index.html index f1d7c35437..f1d7c35437 100644 --- a/files/ko/learn/html/forms/sending_and_retrieving_form_data/index.html +++ b/files/ko/learn/forms/sending_and_retrieving_form_data/index.html diff --git a/files/ko/learn/html/forms/your_first_html_form/index.html b/files/ko/learn/forms/your_first_form/index.html index b997fc1f08..b997fc1f08 100644 --- a/files/ko/learn/html/forms/your_first_html_form/index.html +++ b/files/ko/learn/forms/your_first_form/index.html diff --git a/files/ko/learn/getting_started_with_the_web/css_기본/index.html b/files/ko/learn/getting_started_with_the_web/css_basics/index.html index a5e8e08648..a5e8e08648 100644 --- a/files/ko/learn/getting_started_with_the_web/css_기본/index.html +++ b/files/ko/learn/getting_started_with_the_web/css_basics/index.html diff --git a/files/ko/learn/getting_started_with_the_web/파일들_다루기/index.html b/files/ko/learn/getting_started_with_the_web/dealing_with_files/index.html index 1ed38e8cde..1ed38e8cde 100644 --- a/files/ko/learn/getting_started_with_the_web/파일들_다루기/index.html +++ b/files/ko/learn/getting_started_with_the_web/dealing_with_files/index.html diff --git a/files/ko/learn/getting_started_with_the_web/웹의_동작_방식/index.html b/files/ko/learn/getting_started_with_the_web/how_the_web_works/index.html index 009b22ec8f..009b22ec8f 100644 --- a/files/ko/learn/getting_started_with_the_web/웹의_동작_방식/index.html +++ b/files/ko/learn/getting_started_with_the_web/how_the_web_works/index.html diff --git a/files/ko/learn/getting_started_with_the_web/html_기본/index.html b/files/ko/learn/getting_started_with_the_web/html_basics/index.html index 530f3fe11f..530f3fe11f 100644 --- a/files/ko/learn/getting_started_with_the_web/html_기본/index.html +++ b/files/ko/learn/getting_started_with_the_web/html_basics/index.html diff --git a/files/ko/learn/getting_started_with_the_web/기본_소프트웨어_설치하기/index.html b/files/ko/learn/getting_started_with_the_web/installing_basic_software/index.html index 58ec16a8d9..58ec16a8d9 100644 --- a/files/ko/learn/getting_started_with_the_web/기본_소프트웨어_설치하기/index.html +++ b/files/ko/learn/getting_started_with_the_web/installing_basic_software/index.html diff --git a/files/ko/learn/getting_started_with_the_web/웹사이트_출판하기/index.html b/files/ko/learn/getting_started_with_the_web/publishing_your_website/index.html index df2016e530..df2016e530 100644 --- a/files/ko/learn/getting_started_with_the_web/웹사이트_출판하기/index.html +++ b/files/ko/learn/getting_started_with_the_web/publishing_your_website/index.html 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 ---- -<div>{{LearnSidebar}}</div> - -<p><span id="result_box" lang="ko"><span>처음으로 또는 심도 깊은 검색을 통해 오셨다면 MDN 학습 영역에 참여하는 데 관심이있는 것 같습니다.</span> 그건<span class="alt-edited"> 좋은 소식입니다!</span></span></p> - -<p><span id="result_box" lang="ko"><span>이 페이지에서는 MDN의 학습 콘텐츠를 개선하는 데 필요한 모든 것을 찾을 수 있습니다.</span> <span>얼마나 많은 시간을 가지고 있는지, 초보자이든</span></span><span lang="ko"><span>, 웹 개발자이든</span></span><span lang="ko"><span>, 교사이든</span></span><span lang="ko"><span>, 할 수있는 일이 많이 있습니다.</span></span></p> - -<div class="note"> -<p><strong>Note</strong>: <span id="result_box" lang="ko"><span>새로운 학습 영역 기사를 작성하는 방법에 대한 안내서는 사람들이 웹에 대해 알 수 있도록 기사를 작성하는 방법(</span></span><a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web"><u><font color="#0066cc">How to write an article to help people learn about the Web</font></u></a><span lang="ko"><span>)을 제공합니다.</span></span></p> -</div> - -<h2 id="특정_작업_찾기"><span class="short_text" id="result_box" lang="ko"><span class="alt-edited">특정 작업 찾기</span></span></h2> - -<p><span id="result_box" lang="ko"><span>참여자는 트</span></span>렐<span lang="ko"><span>로 보드(</span></span><a href="https://trello.com/b/LDggrYSV"><u><font color="#0066cc"><strong>Trello board</strong></font></u></a><span lang="ko"><span>)</span></span>를 사용하여 작업을 구성합니다. 이렇게 하면 프로젝트에서 수행할 특정 작업을 찾을 수 있습니다. 참여하려면 트렐로 계정을 만들고 <u><a href="https://developer.mozilla.org/en-US/profiles/chrisdavidmills">Chris Mills</a></u>에게 보드에 대한 쓰기 액세스 권한을 요청하면 됩니다.</p> - -<p>기여는 새로운 것을 즐겁게 배우는 좋은 방법입니다<span lang="ko"><span>. </span></span>만약 당신이 길을 잃거나 질문이 있으면<span lang="ko"><span> </span></span><a href="https://developer.mozilla.org/ko/docs/MDN/%EC%BB%A4%EB%AE%A4%EB%8B%88%ED%8B%B0"><u><font color="#0066cc">our mailing list</font></u></a> <span lang="ko"><span>또는 </span></span><a href="https://developer.mozilla.org/en-US/docs/MDN/Community#Get_into_IRC"><u><font color="#0066cc">IRC channel</font></u></a><span lang="ko"><span> (자세한 내용은 이 페이지 하단 참조)로 문의하십시오.</span> </span><a href="https://developer.mozilla.org/en-US/profiles/chrisdavidmills"><u><font color="#0066cc">Chris Mills</font></u></a><span lang="ko"><span>는 학습 영역의 핵심 드라이버입니다. 직접 디렉토리에 알림을 보내볼 수도 있습니다.</span></span></p> - -<p>다음 섹션에서는 할 수있는 작업 유형에 대한 일반적인 아이디어를 제공합니다.</p> - -<h2 id="초보자"><span class="short_text" id="result_box" lang="ko"><span>초보자</span></span></h2> - -<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr">좋습니다! 초보자는 학습 자료에 대한 피드백을 만들고 제공하는 데 매우 중요하고 가치가 있습니다. 이 기사에 대한 독자적인 시각을 잠재 고객의 구성원으로 확보하면 우리 팀의 소중한 구성원이 될 수 있습니다. 실제로, 만약 당신이 무언가를 배우기 위해 우리의 글 중 하나를 사용하여 곤경에 빠지거나 글을 약간 혼란스럽게 하는 것을 발견한다면, 문제를 해결하거나 문제에 대해 알려줌으로써 해결할 수 있습니다.</div> - -<div class="trans-verified-button-small" dir="ltr"></div> - -<p><span class="short_text" id="result_box" lang="ko"><span>다음은 </span></span>참여<span class="short_text" lang="ko"><span> 할 수있는 몇 가지 제안 방법입니다.</span></span></p> - -<dl> - <dt><span class="short_text" id="result_box" lang="ko"><span>기사에 태그 추가[</span></span><a href="/en-US/docs/MDN/Contribute/Howto/Tag">Add tags to our articles</a>] (<em>5 min</em>)</dt> - <dd><span id="result_box" lang="ko"><span>MDN 컨텐츠에 태그를 지정하는 것은 MDN에 기여하는 가장 쉬운 방법 중 하나입니다.</span> </span>많은 기능이 정보를 제공하기 위해 태그를 사용하므로 태그 지정을 돕는 것은 매우 가치가 있는 공헌입니다.<span lang="ko"> <span>시작하려면 태그가없는 용어집 항목(<u><a href="https://developer.mozilla.org/ko/docs/MDN/Doc_status/Glossary">glossary entries</a></u>) 및 학습 기사(<u><a href="https://developer.mozilla.org/ko/docs/MDN/Doc_status/Learn">learning articles</a></u>) 목록을 살펴보십시오.</span></span></dd> - <dt>용어 사전<span class="short_text" lang="ko"><span> 항목 읽기 및 검토</span></span>[<a href="https://developer.mozilla.org/ko/docs/Glossary">Read and review a glossary entry</a>] (<em>5 min</em>)</dt> - <dd><span id="result_box" lang="ko"><span>우리는 당신이 초보자로서 우리의 콘텐츠를 바라 보는 신선한 눈을 필요로 합니다.</span> <span>용어집을 쉽게 이해할 수 없다면 항목을 개선해야한다는 의미입니다.</span> <span>필요하다고 생각되는 부분은 자유롭게 변경하십시오.</span> <span>자신이 직접 항목을 편집 할 수있는 적절한 기술이 없다고 생각한다면 </span></span><u><a href="https://developer.mozilla.org/en-US/docs/MDN/Community#Join_our_mailing_lists">our mailing list</a></u>로 알려주십시오.</dd> - <dt>새로운 용어집 항목 작성[<a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Write a new glossary entry</a>] (<em>20 minutes</em>)</dt> - <dd> - <div id="gt-res-wrap"> - <div id="gt-res-content"> - <div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="ko"><span>이것은 새로운 것을 배우는 가장 효과적인 방법입니다.</span> <span>이해하려는 개념을 고르고, 그것에 대해 배울 때 그에 관한 용어집 항목을 작성하십시오.</span> <span>다른 사람들에게 무언가를 설명하는 것은 지식을 "시멘트"로 만들고 다른 사람들을 돕는 동안 자신이 이해할 수 있게 하는 훌륭한 방법입니다.</span> 모두에게 이득입니다<span>!</span></span></div> - </div> - </div> - </dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>학습 자료 읽기 및 검토</span></span>[<a href="/en-US/Learn/Index">Read and review a learning article</a>] (<em>2 hours</em>)</dt> - <dd> - <div class="g-unit" id="gt-res-c"> - <div id="gt-res-p"> - <div id="gt-res-data"> - <div id="gt-res-wrap"> - <div id="gt-res-content"> - <div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="ko"><span>이것은 </span></span>용어 사전 <span lang="ko"><span> 항목을 검토하는 것과 같습니다. (위 참조)</span> <span>이 기사는 일반적으로 꽤 길기 때문에 더 많은 시간이 걸립니다.</span></span></div> - </div> - </div> - </div> - </div> - </div> - </dd> -</dl> - -<h2 id="웹_개발자">웹 개발자</h2> - -<p><span id="result_box" lang="ko"><span>좋습니다!</span> 당신의 <span>기술 능력은 초보자에게 기술적으로 정확한 내용을 제공하기 위해 필요한 것입니다.</span> <span>MDN의 이 특정 부분은 웹 학습에만 전념하므로 유용한 설명이 아닌 단순하지 않은 설명을 가능한 간단하게 작성하십시오.</span> <span>지나치게 정확한 것보다 이해하는 것이 더 중요합니다.</span></span></p> - -<dl> - <dt><span class="short_text" id="result_box" lang="ko"><span>용어집 항목 읽기 및 검토</span></span>[<a href="https://developer.mozilla.org/ko/docs/Glossary">Read and review a glossary entry</a>] (<em>5 min</em>)</dt> - <dd>웹 개발자로서, 우리의 콘텐츠가 지나치게 규칙적이지 않으면서 기술적으로 정밀한 지 확인해 주길 바랍니다. 필요하다고 생각되는 부분을 자유롭게 변경하십시오. 콘텐츠를 편집하기 전에 논의하기를 원하시면 <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">our mailing list</a>나 <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>로 알림을 보내주십시오.</dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>새로운 용어집 항목 작성</span></span>[<a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Write a new glossary entry</a>] (<em>20 minutes</em>)</dt> - <dd>기술적인 전문 용어를 명확히 하는 것은 기술적으로 정확하고 간결하게 배우는 좋은 방법이다. 초보자들은 그에 감사할 것입니다. 당신의 도움이 필요한 정의되지 않은 용어(<a href="/en-US/docs/Glossary#Contribute">many undefined terms</a>)가 많이 있습니다. 선택해서 작성하실 수 있습니다. </dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>학습 자료 읽기 및 검토</span></span>[<a href="/en-US/Learn/Index">Read and review a learning article</a>] (<em>2 hours</em>)</dt> - <dd>이것은 용어집을 읽고 검토하는 것과 같습니다. (위 참조) 이 기사는 일반적으로 꽤 길기 때문에 더 많은 시간이 걸립니다.</dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>새로운 학습 기사 작성</span></span>[<a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Write a new learning article</a> ](<em>4 hours or more</em>)</dt> - <dd>MDN는 웹 기술사용에 관한 간단한 기사가 부족합니다. (<a href="/en-US/docs/Learn/CSS">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, 등)MDN은 다소 오래 된 콘텐츠들이 있고, 그를 검토하고 개정할 필요가 있습니다. 기술을 최대한 초보자에게도 웹 기술을 이용하기 쉽게 작성하십시오.</dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>연습, 코드 샘플 또는 대화식 학습 도구 만들기</span></span>[<a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Create exercises, code samples or interactive learning tools</a>](<em>? hours</em>)</dt> - <dd>우리의 모든 학습 기사는 “능동적 학습" 자료라고 부르는 것을 요구합니다.<span lang="ko"><span> 왜냐하면 사람들은 스스로 뭔가를 함으로써 최선을 다해 배우기 때문입니다.</span> <span>이러한 자료는 사용자가 기사에 설명 된 개념을 적용하고 조작하는 데 도움이 되는 연습이나 대화형 콘텐츠입니다. </span></span><a href="http://jsfiddle.net/" rel="external"><u><font color="#0066cc">JSFiddle</font></u></a> <span lang="ko"><span>또는 그와 유사한 코드 샘플을 만드는 것에서 </span></span><a href="https://thimble.mozilla.org/" rel="external"><u><font color="#0066cc">Thimble</font></u></a><span lang="ko"><span>을 사용하여 </span></span>완전히 공유된 대화형 콘텐츠를 만드는 것까지 능동적인 학습 콘텐츠를 만드는 방법은 다양합니다. 창의력을 발휘하십시오!</dd> -</dl> - -<h2 id="교육자">교육자</h2> - -<p><span id="result_box" lang="ko"><span>MDN은 기술적 우수성에 대한 오랜 역사를 가지고 있지만 새로 온 사람들에게 개념을 가르치는 가장 좋은 방법에 대한 깊이 있는 이해가 부족합니다.</span> <span>이것은 우리가 교사 또는 교육자로서 당신을 필요로 하는 이유입니다.</span> <span>자료를 통해 독자에게 훌륭한 교육 자료를 제공 할 수 있습니다.</span></span></p> - -<dl> - <dt><span class="short_text" id="result_box" lang="ko"><span>용어집 항목 읽기 및 검토</span></span>[<a href="https://developer.mozilla.org/ko/docs/Glossary">Read and review a glossary entry</a>] (<em>15 min</em>)</dt> - <dd><span id="result_box" lang="ko"><span>용어집 항목을 확인하고 필요하다고 생각되는 부분을 자유롭게 변경하십시오.</span> <span>편집하기 전에 내용을 토론하고 싶다면 </span></span><a href="https://developer.mozilla.org/en-US/docs/MDN/Community#Join_our_mailing_lists"><u><font color="#0066cc">our mailing list</font></u></a><span lang="ko"><span> 나 </span></span><a href="https://developer.mozilla.org/en-US/docs/MDN/Community#Get_into_IRC"><u><font color="#0066cc">IRC channel</font></u></a><span lang="ko"><span>로 알림을 보내주십시오.</span></span></dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>새로운 용어집 항목 작성</span></span>[<a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Write a new glossary entry</a>] (<em>1 hour</em>)</dt> - <dd><span id="result_box" lang="ko"><span>용어의 명확하고 간단한 정의와 용어집의 기본 개념은 초보자의 필요를 충족시키는 데 중요합니다.</span> <span>교육자로서의 경험은 훌륭한 용어집 항목을 만드는 데 도움이 될 수 있습니다.</span> <span>우리는 주의가 필요한 많은 정의되지 않은 용어(</span></span><a href="https://developer.mozilla.org/en-US/docs/Glossary#Contribute"><u><font color="#0066cc">many undefined terms</font></u></a><span lang="ko"><span>)를 가지고 있습니다.</span> </span>하나를 선택하고 작성하실 수 있습니다.</dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>기사에 삽화 또는 도식을 추가</span></span>[<a href="/en-US/docs/tag/needsSchema">Add illustrations and/or schematics to articles]</a> (<em>1 hour</em>)</dt> - <dd><span id="result_box" lang="ko"><span>아시다시피, 삽화는 모든 학습 콘텐츠의 중요한 부분입니다.</span> <span>이것은 종종 MDN에서 부족한 부분이며 당신의 기술이 해당 영역에서 변화를 가져올 수 있습니다.</span> <span>설명이 부족한 기사(</span></span><a href="https://developer.mozilla.org/en-US/docs/tag/needsSchema"><u><font color="#0066cc">articles that lack illustrative content</font></u></a><span lang="ko"><span>)를 확인하고 </span></span>삽화를 삽입하고 싶은 기사를 선택하십시오.</dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>학습 자료 읽기 및 검토</span></span>[<a href="/en-US/Learn/Index">Read and review a learning article</a>] (<em>2 hours</em>)</dt> - <dd><span id="result_box" lang="ko"><span>이것은 용어집 항목을 검토하는 것과 비슷하지만 (위 참조) 일반적으로 기사가 상당히 길기 때문에 더 많은 시간이 필요합니다.</span></span></dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>새로운 학습 기사 작성</span></span>[<a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Write a new learning article</a>] (<em>4 hours</em>)</dt> - <dd>우리는 웹 생태계와 그 주변의 다른 기능적 주제에 대한 간단하고 직접적인 기사가 필요합니다. 이 학습 기사는 말 그대로 문자 그대로 모두를 다루려고 하기 보다는 교육적일 필요가 있기 때문에 무엇을 알아야하고 어떻게 하면 훌륭한 자산이 될지를 아는 당신의 경험으로 도움을 줄 수 있습니다.</dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>연습 문제, 퀴즈 또는 대화식 학습 도구 만들기</span></span>[<a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Create exercises, <abbr title="Multiple Choice Tests">quizzes</abbr> or interactive learning tools</a>] (<em>? hours</em>)</dt> - <dd><span id="result_box" lang="ko"><span>우리의 모든 학습 기사에는 "능동적 학습" 자료가 필요합니다.</span> <span>이러한 자료는 사용자가 기사에서 설명하는 개념을 사용하고 확장하는 방법을 배우는 데 도움이 되는 연습 또는 대화형 콘텐츠입니다.</span> </span><a href="https://thimble.mozilla.org/" rel="external"><u><font color="#0066cc">Thimble</font></u></a><span lang="ko"><span>와 함께 </span></span>공유된 양방향 콘텐츠를 만드는 것부터 퀴즈 만들기에 이르기까지 여기에서 할 수 있는 많은 것들이 있습니다. 창의력을 발휘하십시오!</dd> - <dt><span class="short_text" id="result_box" lang="ko"><span>학습 경로 만들기</span></span>[<a href="/en-US/docs/MDN/Contribute/Howto/Create_learning_pathways">Create learning pathways</a> ](<em>? hours</em>)</dt> - <dd>진보적이고 이해하기 쉬운 자습서를 제공하려면 콘텐츠를 하나의 경로로 만들어야 합니다. 기존 콘텐츠를 수집하고 누락된 부분을 찾아서 작성할 학습 기사를 만들 수 있습니다.</dd> -</dl> 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 +--- +<p><span class="comment">Summary: Learn common-sense tips for producing HTML pages which load quickly and provide visitor satisfaction.</span> 여기에 나온 팁들은 상식과 실험에 바탕을 두고 있습니다. 만약 당신이 페이지 불러오기 성능을 향상시킬 수 있는 팁을 알고 있다면 <a>이 글의 토론 페이지</a>에 조언해 주시기 바랍니다.</p> +<p>최적화된 웹 페이지는 사이트 방문자들에게 즉각적인 응답을 해줄 뿐만 아니라, 웹 서버의 부담을 덜어주고 인터넷 연결의 부하를 줄여줍니다. 이것은 커다란 사이트나 뉴스 속보와 같은 특별한 상황에서 트래픽이 급격히 증가하는 사이트에 있어서 아주 중요합니다.</p> +<p>페이지 불러오기 성능을 최적화하는 것이 저대역폭 방문자를 위한 컨텐츠에만 해당하는 것은 아닙니다. 이것은 고대역폭 컨텐츠에도 똑같이 중요하며 고속 인터넷 사용자들에게도 상당한 성능 향상을 기대할 수 있습니다.</p> +<h3 id="Tips" name="Tips"><strong>Tips</strong></h3> +<h4 id=".ED.8E.98.EC.9D.B4.EC.A7.80_.EB.AC.B4.EA.B2.8C.EB.A5.BC_.EC.A4.84.EC.9D.B4.EB.9D.BC" name=".ED.8E.98.EC.9D.B4.EC.A7.80_.EB.AC.B4.EA.B2.8C.EB.A5.BC_.EC.A4.84.EC.9D.B4.EB.9D.BC"><strong>페이지 무게를 줄여라</strong></h4> +<p>페이지 무게는 지금까지 페이지 불러오기 성능의 가장 중요한 요소이다.</p> +<p>불필요한 공백, 주석을 없애고 인라인 스크립트와 CSS를 외부파일로 옮기면 페이지 구조의 변화를 최소화하면서 다운로드 성능을 향상시킬 수 있다</p> +<p><a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a>등의 도구를 사용, 바른 HTML 소스로부터 첫 공백과 여분의 빈라인을 자동으로 줄일 수 있다. 다른 도구는 재형식화하거나 긴 식별자를 짧은 버전으로 줄여 JavaScript를 압축할 수 있다.</p> +<h4 id=".ED.8C.8C.EC.9D.BC_.EC.88.98.EB.A5.BC_.EC.B5.9C.EC.86.8C.ED.99.94.ED.95.98.EB.9D.BC" name=".ED.8C.8C.EC.9D.BC_.EC.88.98.EB.A5.BC_.EC.B5.9C.EC.86.8C.ED.99.94.ED.95.98.EB.9D.BC"><strong>파일 수를 최소화하라</strong></h4> +<p>웹 페이지에서 참조하는 파일의 수를 줄이면 페이지를 다운로드하는데 필요한 HTTP 접속 횟수가 감소합니다.</p> +<p>브라우저의 캐시 설정에 따라서, 브라우저는 각각의 CSS와 JavaScript, 그림 파일에 대해서 마지막으로 다운로드한 이후로 해당 파일이 변경되었는지 확인하기 위해 <code>If-Modified-Since</code> 요청을 웹 서버로 보내게 됩니다.</p> +<p>웹 페이지에서 참조하는 파일의 수를 줄이면, 이러한 요청을 보내고 그에 해당하는 응답이 도착하는데 필요한 시간을 줄일 수 있습니다.</p> +<p>브라우저는 페이지를 표시하기 전에 각각의 CSS와 JavaScript 파일의 변경시간을 반드시 확인해야 합니다. 따라서 웹 페이지에서 참조하는 파일들에 대한 마지막 변경시간을 확인하는데 너무 많은 시간을 소비하면 웹 페이지의 초기 표시 시간이 오래 걸릴 수 있습니다.</p> +<h4 id=".EB.8F.84.EB.A9.94.EC.9D.B8_.EA.B2.80.EC.83.89.EC.9D.84_.EC.A4.84.EC.9D.B4.EB.9D.BC" name=".EB.8F.84.EB.A9.94.EC.9D.B8_.EA.B2.80.EC.83.89.EC.9D.84_.EC.A4.84.EC.9D.B4.EB.9D.BC"><strong>도메인 검색을 줄이라</strong></h4> +<p>각각의 도메인은 DNS 검색에 시간을 소비하기 때문에, CSS와 JavaScript 및 이미지를 참조하는데 사용되는 도메인 수를 줄이면 페이지를 불러오는 시간이 단축됩니다.</p> +<p>이것이 항상 실현가능한 것이 아닐지라도, 가능한한 최소한의 도메인을 사용하도록 주의해야 합니다.</p> +<h4 id=".EC.9E.AC.EC.82.AC.EC.9A.A9.EB.90.98.EB.8A.94_.EB.82.B4.EC.9A.A9.EC.9D.84_.EC.BA.90.EC.8B.9C.ED.95.98.EB.9D.BC" name=".EC.9E.AC.EC.82.AC.EC.9A.A9.EB.90.98.EB.8A.94_.EB.82.B4.EC.9A.A9.EC.9D.84_.EC.BA.90.EC.8B.9C.ED.95.98.EB.9D.BC"><strong>재사용되는 내용을 캐시하라</strong></h4> +<p>캐시가능한 내용이 적절한 만료시간으로 캐시되었는지 확인해야 합니다.</p> +<p>특히 <code>Last-Modified</code> 헤더에 신경써야 합니다. 이것은 페이지의 효율적인 캐싱을 가능케 합니다. 이것에 의해 브라우저가 읽어들이고자 하는 파일이 마지막으로 변경된 시간에 대한 정보가 전달됩니다. 정적인 페이지(예를 들면, <tt>.html</tt>, <tt>.css</tt>)는 대부분의 웹 서버가 파일 시스템에 저장된 마지막 변경시간을 토대로 자동적으로 <code>Last-Modified</code> 헤더를 추가합니다. 동적인 페이지(예를 들면, <tt>.php</tt>, <tt>.aspx</tt>)는 물론 불가능합니다.</p> +<p>그러므로, 특히 동적으로 생성되는 페이지들에 대한 이 부분의 연구가 중요합니다. 이것은 조금 복잡하지만, 정상적으로 캐시 불가능한 페이지들에 대한 페이지 요청을 대폭 줄일 수 있게 합니다.</p> +<p>추가 정보:</p> +<ol> + <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">RSS 해커들을 위한 HTTP 조건부 GET</a></li> + <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li> + <li><a class="external" href="http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html">On HTTP Last-Modified and ETag</a></li> +</ol> +<h4 id=".ED.8E.98.EC.9D.B4.EC.A7.80_.EC.BB.B4.ED.8F.AC.EB.84.8C.ED.8A.B8.EC.9D.98_.EC.88.9C.EC.84.9C.EB.A5.BC_.EC.B5.9C.EC.A0.81.ED.99.94" name=".ED.8E.98.EC.9D.B4.EC.A7.80_.EC.BB.B4.ED.8F.AC.EB.84.8C.ED.8A.B8.EC.9D.98_.EC.88.9C.EC.84.9C.EB.A5.BC_.EC.B5.9C.EC.A0.81.ED.99.94"><strong>페이지 컴포넌트의 순서를 최적화</strong></h4> +<p>사용자가 페이지를 읽어들일 때 페이지의 내용 요소를 가장 먼저 다운로드하면 가장 빠른 응답시간을 얻을 수 있습니다.</p> +<p>페이지의 내용 요소는 페이지의 표시를 위해 필요한 모든 CSS 및 JavaScript와 함께 가장 먼저 다운로드되어야 합니다. 이러한 내용 요소들은 일반적으로 텍스트로 되어 있고 모뎀상에서 텍스트 압축효과를 얻을 수 있기에 사용자에게 가장 빠른 응답 시간을 제공합니다.</p> +<p>페이지를 모두 읽어들인 후에야 사용가능한 모든 DHTML 기능들은 초기에는 사용하지 못하게 설정되어 있어야 하며 페이지 불러오기가 끝난 후에만 사용가능해야 합니다. 이것은 페이지의 내용 요소를 먼저 읽어들인 다음에 DHTML JavaScript를 읽어들이게 하여 전체적인 페이지 불러오기 성능을 향상시킵니다.</p> +<h4 id="inline_script_.EC.88.98.EB.A5.BC_.EC.B5.9C.EC.86.8C.ED.99.94" name="inline_script_.EC.88.98.EB.A5.BC_.EC.B5.9C.EC.86.8C.ED.99.94"><strong>inline script 수를 최소화</strong></h4> +<p>inline script는 페이지 구조를 바꿀 수 있다는 것을 파서가 가정해야 하므로 페이지 불러오기에 비용이 많이 들 수 있다. 일반적으로 inline script 사용을 줄이고 내용을 출력하기 위해 <code>document.write()</code>의 사용을 줄여 전체페이지의 불러오는 시간을 향상시킬 수 있다. <code>document.write()</code>에 기반한 오래된 방식 대신 현대의 W3C DOM방법을 사용하여 페이지 내용을 다루라.</p> +<h4 id=".EC.B5.9C.EC.8B.A0_CSS.EC.99.80_.EC.98.AC.EB.B0.94.EB.A5.B8_markup.EC.9D.84_.EC.82.AC.EC.9A.A9.ED.95.98.EB.9D.BC" name=".EC.B5.9C.EC.8B.A0_CSS.EC.99.80_.EC.98.AC.EB.B0.94.EB.A5.B8_markup.EC.9D.84_.EC.82.AC.EC.9A.A9.ED.95.98.EB.9D.BC"><strong>최신 CSS와 올바른 markup을 사용하라</strong></h4> +<p>최신 CSS는 markup의 양을 줄여주며, 레이아웃 측면에서 그림의 사용을 줄여줍니다. 또한 다양한 방법으로 텍스트를 나타내는 그림의 사용을 줄여줍니다. 텍스트를 나타내는 그림을 사용하면 텍스트와 CSS를 사용할 때보다 부하가 큽니다.</p> +<p>올바른 markup을 사용하는 것에는 추가적인 장점이 있습니다. 브라우저가 HTML을 처리할 때 "오류 정정"을 하지 않아도 될 뿐만 아니라, 웹 페이지를 + <i> + 전처리(pre-process)</i> + 할 수 있는 다른 도구들을 마음대로 사용할 수 있습니다. 예를 들면, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a>는 웹 페이지상의 공백과 불필요한 종료 태그들을 삭제해 줍니다. 그러나 웹 페이지에 심각한 markup 오류가 있다면 이 도구는 사용할 수 없습니다.</p> +<h4 id=".EB.82.B4.EC.9A.A9.EC.9D.84_.EC.A1.B0.EA.B0.81.EB.82.B4.EB.9D.BC" name=".EB.82.B4.EC.9A.A9.EC.9D.84_.EC.A1.B0.EA.B0.81.EB.82.B4.EB.9D.BC"><strong>내용을 조각내라</strong></h4> +<p>table기반의 레이아웃을 <code><div></code>를 쓰거나 table을 작은 table로 나누면 전체 페이지 내용을 내려받지 않고 표시할 수 있다.</p> +<p>아래와 같이 깊게 중첩된 table 대신</p> +<div class="geckoVersionNote"> + <pre><TABLE> + <TABLE> + <TABLE> + ... + </TABLE> + </TABLE> +</TABLE></pre> +</div> +<p>중첩되지 않은 table 또는 div를 쓰라</p> +<pre><TABLE>...</TABLE> +<TABLE>...</TABLE> +<TABLE>...</TABLE></pre> +<h4 id=".EA.B7.B8.EB.A6.BC.EA.B3.BC_.ED.91.9C.EC.9D.98_.ED.81.AC.EA.B8.B0.EB.A5.BC_.EB.AA.85.EC.8B.9C.ED.95.98.EB.9D.BC" name=".EA.B7.B8.EB.A6.BC.EA.B3.BC_.ED.91.9C.EC.9D.98_.ED.81.AC.EA.B8.B0.EB.A5.BC_.EB.AA.85.EC.8B.9C.ED.95.98.EB.9D.BC"><strong>그림과 표의 크기를 명시하라</strong></h4> +<p>브라우저가 그림과 표의 크기를 바로 알아낼 수 있다면, 내용을 바꾸지 않고도 웹 페이지를 표시하는게 가능합니다. 이것은 페이지를 표시하는 속도를 빠르게 할 뿐만 아니라 페이지 불러오기가 끝났을 때 페이지의 배치가 바뀌는 것을 막아줍니다. 그런 이유로, 가능하면 <span style="line-height: 1.5;">그림의 </span><code style="font-style: normal; line-height: 1.5;">height</code><span style="line-height: 1.5;">와 </span><code style="font-style: normal; line-height: 1.5;">width</code><span style="line-height: 1.5;">가 명시되어야 합니다.</span></p> +<p>표는 CSS 선택자:속성 조합이다.</p> +<div class="geckoVersionNote"> + <p><code style="font-style: normal; line-height: 1.5;">table-layout: fixed;</code></p> +</div> +<p><span style="line-height: 1.5;">그리고 </span><code style="font-style: normal; line-height: 1.5;">COL</code><span style="line-height: 1.5;">과 </span><code style="font-style: normal; line-height: 1.5;">COLGROUP</code><span style="line-height: 1.5;"> 태그를 사용하여 열(column)의 넓이를 명시해야 합니다.</span></p> +<h4 id=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.97.90.EC.9D.B4.EC.A0.84.ED.8A.B8.EC.9D.98_.EC.9A.94.EA.B5.AC.EC.82.AC.ED.95.AD.EC.9D.84_.EC.A0.81.EC.A0.88.ED.95.98.EA.B2.8C_.EC.84.A0.ED.83.9D.ED.95.98.EB.9D.BC" name=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.97.90.EC.9D.B4.EC.A0.84.ED.8A.B8.EC.9D.98_.EC.9A.94.EA.B5.AC.EC.82.AC.ED.95.AD.EC.9D.84_.EC.A0.81.EC.A0.88.ED.95.98.EA.B2.8C_.EC.84.A0.ED.83.9D.ED.95.98.EB.9D.BC"><strong>사용자 에이전트의 요구사항을 적절하게 선택하라</strong></h4> +<p>웹 페이지의 디자인 향상을 위해서는 사용자 에이전트의 요구사항을 적절하게 선택해야 합니다. 모든 브라우저, 특히 저사양의 브라우저에서까지 웹 페이지의 내용이 픽셀 하나하나까지 완벽하게 표현되기를 원하지는 않습니까?</p> +<p>이상적으로, 기본적인 최소 요구사항은 관련된 표준을 지원하는 현대적인 브라우저를 기준으로 해야 합니다. 이것은 모든 플랫폼 상의 Netscape 7/Gecko 1.0.2+, Windows의 Internet Explorer 5.5+, Windows의 Opera 7+, Mac OS X의 Safari에 해당합니다.</p> +<p>그러나 여기에 나와있는 대부분의 팁들은 사용자 에이전트 요구사항과 관계 없이 모든 사용자 에이전트와 웹 페이지에 해당하는 일반적인 내용임을 알아두시기 바랍니다.</p> +<h3 id=".ED.8E.98.EC.9D.B4.EC.A7.80_.EA.B5.AC.EC.A1.B0_.EC.98.88" name=".ED.8E.98.EC.9D.B4.EC.A7.80_.EA.B5.AC.EC.A1.B0_.EC.98.88">페이지 구조 예</h3> +<p>· <code>HTML</code></p> +<dl> + <dd> + · <code>HEAD</code></dd> +</dl> +<dl> + <dd> + <dl> + <dd> + · <code>LINK </code>...<br> + 페이지의 표시를 위해 CSS 파일이 필요하다. 유지보수를 위해 관련되지 않은 CSS 파일을 분리하고 성능을 위해 파일 수를 최소화하라.</dd> + </dl> + </dd> +</dl> +<dl> + <dd> + <dl> + <dd> + · <code>SCRIPT </code>...<br> + JavaScript 파일은 페이지를 불러들일 때 필요하지만 DHTML은 페이지 불러오기가 끝난 후에만 동작합니다.</dd> + <dd> + 유지보수를 위해 관련되지 않은 JavaScript를 별도의 파일로 분리하고 성능을 위해 파일 수를 최소화하세요.</dd> + </dl> + </dd> +</dl> +<dl> + <dd> + · <code>BODY</code></dd> + <dd> + · 페이지 내용을 가시적인 작은 덩어리(tables / divs)로 나누면 전체 페이지를 모두 다운로드 하지 않고도 내용을 표시할 수 있습니다.</dd> +</dl> +<dl> + <dd> + <dl> + <dd> + · <code>SCRIPT </code>...<br> + DHTML을 위해 어떠한 스크립트라도 사용될 수 있습니다. 일반적으로 DHTML 스크립트는 페이지 불러오기가 완전히 끝나고 필요한 객체들이 모두 초기화된 후에만 동작합니다. 따라서 페이지 내용을 불러오기 전에 이러한 스크립트들을 먼저 읽어들일 필요가 없습니다. 오직 페이지 로딩시간을 증가시킬 뿐입니다.</dd> + <dd> + 유지보수를 위해 관련되지 않은 JavaScript를 별도의 파일로 분리하고 성능을 위해 파일 수를 최소화하세요.</dd> + <dd> + 만약 롤오버 효과를 위해 사용되는 그림이 있다면, 페이지 내용을 읽어들인 후에 그 그림을 미리 읽어들여야 합니다.</dd> + </dl> + </dd> +</dl> +<h3 id=".EA.B4.80.EB.A0.A8_.EB.A7.81.ED.81.AC" name=".EA.B4.80.EB.A0.A8_.EB.A7.81.ED.81.AC">관련 링크</h3> +<ul> + <li>책: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li> + <li><a class="external" href="http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial2.html">Site Optimization Tutorial</a> (WebMonkey)</li> +</ul> +<div class="originaldocinfo"> + <h3 id=".EC.9B.90.EB.AC.B8_.EC.A0.95.EB.B3.B4" name=".EC.9B.90.EB.AC.B8_.EC.A0.95.EB.B3.B4">원문 정보</h3> + <ul> + <li>저자: Bob Clary, Technology Evangelist, Netscape Communications</li> + <li>최종 갱신일: Published 04 Apr 2003</li> + <li>저작권 정보: Copyright © 2001-2003 Netscape. All rights reserved.</li> + <li>알림: 이 문서는 본래 DevEdge 사이트의 일부분이었습니다.</li> + </ul> +</div> +<p> </p> 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 ---- -<div class="summary"> -<p>HTML은 독자가 이해할 수 있도록 해주는 약자를 표시해주는 단순하고 직관적인 방법을 제공합니다.</p> -</div> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">먼저:</th> - <td><a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">기초적인 HTML 문서 만들기</a>에 익숙해지셔야 합니다.</td> - </tr> - <tr> - <th scope="row">목표:</th> - <td>HTML로 어떻게 약자 및 두음문자를 표시하는지 알아봅시다.</td> - </tr> - </tbody> -</table> - -<h2 id="약자에_대해">약자에 대해</h2> - -<p>항상 우리는 글을 쓸 때 약자나 두음문자를 사용합니다.('중화인민공화국'의 '중국'같이 짧게 적는 것이 약자, '아껴쓰고, 나눠쓰고, 바꿔쓰고, 다시쓰고'의 '아나바다'와 같이 첫 글자만 골라서 쓰는 것이 두음문자입니다.)</p> - -<p>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:</p> - -<blockquote>유럽연합(UE)은 28 개의 주로, 합중국(US)은 50 개의 주로 이루어져 있습니다. US는 연방제 공화국, UE는 자치주들이 정치적, 경제적으로 결속한 집단입니다.</blockquote> - -<div> -<p>이렇게 하면 모든 웹 페이지에 완전히 유효하지만, HTML은 독자들에게 약자를 설명하기 위한 부가적인 방법을 제공해줍니다.</p> -</div> - -<h2 id="abbr_요소">abbr 요소</h2> - -<p><em>HTML 약자 요소</em> ({{HTMLElement("abbr")}})는 약자에 익숙하지 않거나 시각장애우같이 스크린 리더를 실행해야 하는 사람들을 돕기 위한 약자나 두음문자를 말합니다. 가장 중요한 규칙은, 가능한 언제든지 쓰라는 것입니다.</p> - -<div class="note"> -<p><strong>알림:</strong> <code><acronym></code> 요소에 대해 들어보셨겠지만, <code><acronym</code><code>></code>은 사장되었으므로 브라우저에서 언제든지 지원을 끊을 수 있기 때문에 사용하지 말아야 합니다.</p> -</div> - -<pre class="brush: html"><p>I need to talk to you <abbr>ASAP</abbr>.</p></pre> - -<p>이렇게 <code>title</code> 속성으로 약자를 설명할 수도 있습니다:</p> - -<pre class="brush: html"><p>I need to talk to you <abbr title="as soon as possible">ASAP</abbr>.</p></pre> - -<p>언제 <code>title</code> 속성을 적어야 할까요? 마음대로 시면 됩니다. 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.</p> - -<div class="note"> -<p><strong>Note: </strong>In languages with grammatical number (especially languages with more than two numbers, like Arabic), use the same grammatical number in your <code>title</code> attribute as inside your <code><abbr></code> element.</p> -</div> - -<p>{{glossary("CSS")}}로 약자를 가리키는 가시적인 정보를 추가, 변경, 제거하실 수 있습니다. 보통 마우스를 대면 브라우저가 <code>title</code> 속성의 콘텐츠를 툴팁으로 보여준다는 것도 기억하십시오. 이전의 예시대로 하면 이렇게 보여집니다:</p> - -<p>{{ EmbedLiveSample('The_abbr_element','100%',90) }}</p> - -<div class="note"> -<p><strong>중요: </strong>만약 사람들이 약자를 이해하는 것을 따진다면, <strong>절대로</strong> <code>title</code> 속성에 의존하지 마세요. Spell your abbreviation out in the text on first occurrence. 툴팁에 접근하려면 마우스가 필요합니다. 이것은 폰이나 키보드, 스크린 리더를 쓰는 사람들을 배제합니다.</p> -</div> - -<h2 id="실전">실전</h2> - -<p>{{HTMLElement('abbr')}}에 대해 알아봅시다. 이 글 바로 밑에 약자를 <code><abbr></code>로 표시하고 <code>title</code> 속성으로 설명합니다. 다 했으면 잘 되었는지 보기 위해 "show results"를 눌러봅시다. <a href="/en-US/docs/Glossary">용어 사전</a>에서 모든 약자들을 보실 수 있습니다.</p> - -<div class="hidden"> -<pre class="brush: html"><div class="exercise"> - <main> - <div class="instruction">Mark all the abbreviations with the <code>&lt;abbr&gt;</code> element</div> - <div class="playground"><textarea spellcheck="false"></textarea></div> - <div class="checking"> - <button>Show results</button><span class="count"></span> - </div> - <div class="result">Web <abbr title="developers">dev.</abbr> use <abbr title="Hypertext Markup Language">HTML</abbr> to structure documents, <abbr title="Cascading StyleSheet">CSS</abbr> to style them, and JavaScript to add special effects by using some dedicated <abbr title="Application Programming Interface">API</abbr>s.</div> - </main> -</div></pre> - -<pre class="brush: css">body { - font: 1em/100% sans-serif; - padding: 0; - margin: 0; -} - -.exercise { - background: #F9FAFB; - border-radius: 5px; - height: 13em; - overflow: hidden; -} - -.instruction, .count { - padding: .5em; - font-style: italic; - font-size: .95em; -} - -.playground { - padding: 0 .5em; -} - -.playground textarea { - display: block; - font-size : 1em; - line-height: 1.5em; - font-family: monospace; - box-sizing: border-box; - width : 100%; - padding : .5em; - height : 9.7em; -} - -.checking { - padding: .5em; -} - -.checking button { - box-sizing: border-box; - box-shadow:inset 0 1px 0 0 #bcd9a3; - background:linear-gradient(to bottom, #b4d665 5%, #89a646 100%); - background-color:#b4d665; - border-radius:5px; - border:1px solid #8aa164; - cursor:pointer; - font-size:1em; - padding:.5em; - text-decoration:none; -} -.checking button:hover { - background:linear-gradient(to bottom, #89a646 5%, #b4d665 100%); - background-color:#89a646; -} -.checking button:active { - transform: translate(0, 1px); -} - -.result { - height: 10em; - line-height: 1.4em; - padding: .5em; - box-sizing: border-box; -} - -main { - transform: translate(0,0); - transition: transform 300ms; -} - -.next main { - transform: translate(0, -10em); -} - -abbr { - display: inline-block; - white-space: nowrap; -} - -abbr.ok { - color: green; -} - -abbr.ok:after { - content: ' ✔︎'; -} - -abbr.fail { - color: red; -} - -abbr.fail:after { - content: ' ✘'; -} - -abbr.warning { - color: orange; -} - -abbr.warning:after { - content: ' !'; - font-weight: bold; -} -</pre> - -<pre class="brush: js">window.addEventListener('load', function () { - var content = document.querySelector('.exercise'); - var input = document.querySelector('.playground textarea'); - var button = document.querySelector('.checking button'); - var message = document.querySelector('.checking .count'); - var abbr = Array.prototype.slice.call(document.querySelectorAll('.result abbr')); - var data = { - pass : 0, fail : 0, warning : 0 - }; - - input.value = document.querySelector('.result').textContent; - - function toggleResult(e) { - e.preventDefault(); - var classList = content.className.split(' '); - - if (classList.length === 1 && checkResult()) { - content.className = 'exercise next'; - message.innerHTML = 'Get ' + data.pass + ', ' + - 'Get ' + data.warning + ' without full description, ' + - 'Miss ' + data.fail + '.'; - button.innerHTML = 'Try again'; - } else { - content.className = 'exercise'; - message.innerHTML = ''; - button.innerHTML = 'Show results'; - } - } - - function checkResult() { - var i, j, node = document.createElement('div'); - node.innerHTML = input.value; - data = { pass : 0, fail : 0, warning : 0 }; - - var userAbbr = Array.prototype.slice.call(node.querySelectorAll('abbr')); - - if (userAbbr.length === 0) { - alert("You haven't marked any abbreviations (there are " + abbr.length + " to find)."); - return false; - } - - for (i in abbr) { - var txt = abbr[i].textContent; - var fail = true; - - for (j in userAbbr) { - var userText = userAbbr[j].textContent; - - if (userText.match(new RegExp('^\\s*' + txt.replace('.','') + '\\s*$'))) { - fail = false; - if (userAbbr[j].title) { - data.pass += 1; - abbr[i].className = 'ok'; - } else { - data.warning += 1; - abbr[i].className = 'warning'; - } - } - } - - if (fail) { - data.fail += 1; - abbr[i].className = 'fail'; - } - } - - return true; - } - - button.addEventListener('click', toggleResult); -}); -</pre> -</div> - -<p>{{ EmbedLiveSample('Exercise','100%',220) }}</p> - -<h2 id="더_알아보기">더 알아보기</h2> - -<ul> - <li>{{HTMLElement("abbr")}} 참고 문서.</li> -</ul> diff --git a/files/ko/learn/html/howto/데이터_속성_사용하기/index.html b/files/ko/learn/html/howto/use_data_attributes/index.html index d4abd5da57..d4abd5da57 100644 --- a/files/ko/learn/html/howto/데이터_속성_사용하기/index.html +++ b/files/ko/learn/html/howto/use_data_attributes/index.html diff --git a/files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html b/files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index d6930ac381..d6930ac381 100644 --- a/files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html +++ b/files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html 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 ---- -<p><span style="line-height: 1.5;">이 능력은 인터넷 기술 스택에 대해 잘 이해할 수 있도록 해줍니다. 알아야 할 것들을 작고, 세부적 기술들로 나누었습니다:</span></p> - -<h2 id="기본_스킬" style="line-height: 30px; font-size: 2.14285714285714rem;">기본 스킬</h2> - -<p>웹에 익숙하지 않으시다면 여기서부터 시작하세요. 웹에 관련된 전문용어를 이해하기위해서 <a href="https://developer.mozilla.org/en-US/docs/Glossary">용어사전</a>을 참고하는 것을 추천합니다.</p> - -<h2 id="중급_스킬" style="line-height: 30px; font-size: 2.14285714285714rem;">중급 스킬</h2> - -<p>웹에 익숙해지셨다면, 여기에 더 자세한 것들이 있습니다:</p> - -<h2 id="고급_스킬" style="line-height: 30px; font-size: 2.14285714285714rem;">고급 스킬</h2> - -<p>경험있는 웹 저자라면, 특정 주제나 특별한 기술들에 흥미를 느끼실 것입니다.</p> diff --git a/files/ko/learn/javascript/building_blocks/조건문/index.html b/files/ko/learn/javascript/building_blocks/conditionals/index.html index 858d6f9116..858d6f9116 100644 --- a/files/ko/learn/javascript/building_blocks/조건문/index.html +++ b/files/ko/learn/javascript/building_blocks/conditionals/index.html 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 +--- +<p>이 페이지는 입문서의 II 부입니다. II 부는 모질라에서의 CSS의 범위(scope)를 보여주는 예제들을 포함하고 있습니다.</p> +<p>II 부의 각 페이지는 CSS 가 다른 기술(technologies)들과 어떻게 상호작용하는지 설명하고 있습니다. 이 페이지들은 이들 다른 기술들을 사용하는 방법들을 가르치기위해서 디자인 되지는 않았습니다. 이 들 기술들을 자세히 배우려면 다른 입문서를 보세요.</p> +<p>대신 이 페이지들은 CSS의 다양한 사용법을 설명하기 위해서 디자인되었습니다. 이들 페이지들을 사용하려면, CSS에 대해 좀 알고 있어야만 합니다, 그러나, 다른 분야 기술들에대한 어떤 지식을 필요로하지는 않습니다.</p> +<h3 id=".EC.A0.95.EB.B3.B4:_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8.28JavaScript.29" name=".EC.A0.95.EB.B3.B4:_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8.28JavaScript.29">정보: 자바스크립트(JavaScript)</h3> +<p>자바스크립트(JavaScript)는 + <i> + 프로그래밍 언어</i> + 입니다. 모질라 애플리케이션( 예를 들면, 모질라 브라우저) 사용할 때, 컴퓨터가 실행시키는 코드의 많은 부분이 자바스크립트로 쓰여져 있습니다.</p> +<p>자바스크립트는 스타일 시트와 상호작용하여, 문서 스타일을 동적으로 변화시키는 프로그램을 쓸 수 있게 해줍니다.</p> +<p>이렇게 하는데 세가지 방법이 있습니다:</p> +<ul> + <li>문서의 스타일 시트 리스트와 함께 작동함으로써 — 예: 스타일 시트를 첨가, 제거, 또는 수정함으로써</li> + <li>스타일 시트의 규칙(rules)와 함께 작동함으로써 — 예: 규칙을 첨가, 제거, 또는 수정 함으로써</li> + <li>DOM내의 각 엘리먼트(element)와 함께 작동함으로써 — 예: 문서 스타일을 문서의 스타일 시트와는 독립적으로 수정함으로써</li> +</ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> + <caption> + More details</caption> + <tbody> + <tr> + <td>모질라에서의 자바스트립트에 대해 더 많은 정보를 원하시면, 이 위키(wiki)에 있는 <a href="ko/JavaScript">JavaScript</a>페이지를 보세요.</td> + </tr> + </tbody> +</table> +<h3 id=".EC.95.A1.EC.85.98:_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.98.88.EC.A0.9C.28demonstration.29" name=".EC.95.A1.EC.85.98:_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.98.88.EC.A0.9C.28demonstration.29">액션: 자바스크립트 예제(demonstration)</h3> +<p>새로은 HTML 문서 <code>doc5.html</code>를 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre><!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> +</pre> +</div> +<p>새로운 CSS 파일 <code>style5.css</code>을 만드세요. 아래의 내용물을 복사해서 붙여넣으세요:</p> +<div style="width: 48em;"> + <pre>/*** JavaScript demonstration ***/ +#square { + width: 20em; + height: 20em; + border: 2px inset gray; + margin-bottom: 1em; + } + +button { + padding: .5em 2em; + } +</pre> +</div> +<p>새로운 텍스트 파일 <code>script5.js</code>을 만드세요. 아래의 내용물을 복사해서 붙여넣으세요:</p> +<div style="width: 48em;"> + <pre>// 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") + } +</pre> +</div> +<p>브라우저에서 문서을 열고 버튼을 누르세요.</p> +<p>이 위키페이지는 자바스크립트를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다. 버튼을 누른 전과 후가 대략 다음과 같이 보입니다:</p> +<table> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> + <tbody> + <tr> + <td> + <p><b>JavaScript demonstration</b></p> + <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: white;"> + <div style="width: 2em; height: 1em; border: 1px outset black; background-color: #ccc; margin-top: 4px;"> + </div> + </div> + </td> + </tr> + </tbody> + </table> + </td> + <td> + <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> + <tbody> + <tr> + <td> + <p><b>JavaScript demonstration</b></p> + <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: #fa4;"> + <div style="width: 2em; height: 1em; border: 1px inset black; background-color: #ccc; margin-top: 4px;"> + </div> + </div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<p>이 예제에서 주의할 점:</p> +<ul> + <li>HTML 문서는 전처럼 스타일 시트에 링크되어 있으며, 스크립트에도 링크되어 있습니다.</li> + <li>스크립트는 DOM안의 개개의 엘리먼트(element)와 함께 작동합니다. 스크립트는 사각형(square)의 스타일을 직접 수정합니다. 스크립트는 버튼의 스타일을 속성(attribute)을 변경함으로써 간접적으로 수정합니다.</li> + <li>자바스크립트에서 <code>document.getElementById("square")</code> 는 그 기능상 CSS 선별자(selector) <code>#square</code> 와 유사합니다.</li> + <li>자바스크립트에서 <code>backgroundColor</code>는 CSS 속성 <code>background-color</code>에 상응합니다.</li> + <li>브라우저는 버튼이 사용할 수 없게 되었을 때 그 모습을 바꾸어 주는 <code>button{{ mediawiki.external('disabled=\"true\"') }}</code>에 대한 내장된 CSS 규칙을 가지고 있습니다.</li> +</ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;"> + <caption> + Challenge</caption> + <tbody> + <tr> + <td>스크립트를 변경해서 사각형(square)이 색이 변할 때 오른쪽으로 20em 점프했다가 이후 되 돌아오게 만드세요.</td> + </tr> + </tbody> +</table> +<h4 id=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F" name=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F">그럼 다음은?</h4> +<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a>Discussion</a> page.</p> +<p>이 예제에서 HTML 문서가 단지 버튼 엘리먼트만이 스크립트를 사용함에도 불구하고 스크립트에 링크를 가지고 있었습니다. 모질라는 CSS를 확장해서 자바스크립트 코드를 (내용물과 다른 스타일 시트들도) 선택된 엘리먼트에 링크할 수 있게 합니다. 다음 페이지에서는 다음을 실행해 봅니다: <b><a href="ko/CSS/Getting_Started/XBL_bindings">XBL bindings</a></b></p> diff --git a/files/ko/learn/javascript/objects/얼마나_이해했는지_확인해보자_colon__json/index.html b/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.html index 526779b577..526779b577 100644 --- a/files/ko/learn/javascript/objects/얼마나_이해했는지_확인해보자_colon__json/index.html +++ b/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.html diff --git a/files/ko/learn/server-side/express_nodejs/개발_환경/index.html b/files/ko/learn/server-side/express_nodejs/development_environment/index.html index f3ab1846f6..f3ab1846f6 100644 --- a/files/ko/learn/server-side/express_nodejs/개발_환경/index.html +++ b/files/ko/learn/server-side/express_nodejs/development_environment/index.html diff --git a/files/ko/learn/server-side/express_nodejs/스켈레톤_웹사이트/index.html b/files/ko/learn/server-side/express_nodejs/skeleton_website/index.html index ca72e39124..ca72e39124 100644 --- a/files/ko/learn/server-side/express_nodejs/스켈레톤_웹사이트/index.html +++ b/files/ko/learn/server-side/express_nodejs/skeleton_website/index.html 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 +--- +<h2 id="소개">소개</h2> + +<p>물론 <a href="https://nodejs.org/en/">Node</a> 는 서버를 만들고 실행하는데 도움을 주는 많은 프레임워크가 있습니다, 예를 들면:</p> + +<ul> + <li><a href="http://expressjs.com/">Express</a>: 가장 많이 사용하는 프레임워크</li> + <li><a href="https://www.totaljs.com/">Total</a>: 올인원 통합 프레임워크로, 다른 프레임워크나 모듈에 의존성이 없습니다.</li> +</ul> + +<p>하지만, 모든 것에 꼭 맞는 사이즈가 없듯이, 개발자들은 어떤 다른 의존성 없이 스스로 서버를 만들어야 할 때가 있습니다.</p> + +<h2 id="예제">예제</h2> + +<p>다음은 짧고 간단한 정적 파일 nodejs 서버입니다.</p> + +<pre>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/');</pre> 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 ---- -<p>여러분은 웹에 대하여 학습할 때 수 많은 스킬들을 선택해야 합니다. <a href="https://webmaker.org/en-US" rel="external">WebMaker</a>는 초심자들이 기초를 학습하는 로드맵인 <a href="https://webmaker.org/en-US/literacy" rel="external">Web Literacy Map</a>이라는 기본 스킬들의 목록을 정의합니다. 여기 MDN에서는 웹사이트를 제작하는데 필요한 역량에 초점을 맞추고, 모든 스킬 레벨에 대한 학습을 제공합니다:</p> - -<dl> - <dt><a href="/en-US/docs/Learn/Web_Mechanics">Web Mechanics</a></dt> - <dd>웹 생태계를 이해한다</dd> - <dt><a href="/en-US/docs/Learn/Infrastructure">Infrastructure</a></dt> - <dd>웹의 기술적 스택을 이해한다</dd> - <dt><a href="/en-US/docs/Learn/Coding-Scripting">Coding/Scripting</a></dt> - <dd>상호적인 웹 경험(Web experience)를 만든다.</dd> - <dt><a href="/en-US/docs/Learn/Design_and_Accessibility">Design and Accessibility</a></dt> - <dd>웹 리소스를 이용하여 모두와 효과적으로 의사소통한다</dd> - <dt><a href="/en-US/docs/Learn/Composing_for_the_web">Composing for the web</a></dt> - <dd>웹 콘텐츠를 만들고 관장한다</dd> -</dl> diff --git a/files/ko/learn/web_기술/index.html b/files/ko/learn/web_기술/index.html deleted file mode 100644 index 1f04d35fe1..0000000000 --- a/files/ko/learn/web_기술/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 ---- -<p><span style="line-height: 1.5;">이것은 여러분이 웹 생태계를 이해할 수 있도록 충분히 설명해줍니다. 저희는 여러분이 필요한 정보를 작고, 세분화된 기술로 나누었습니다.</span></p> - -<p>{{NoteStart}}<em>Web 기술 </em>은 웹 생태계의 기술적인 측명이 아니라, <a href="/en-US/docs/Learn/skills/Infrastructure"><em>Infrastructure </em></a>범위의 기능에 집중합니다.{{NoteEnd}}</p> - -<h2 id="기본_스킬">기본 스킬</h2> - -<p>만약 웹이 익숙하지 않다면 여기서 시작하세요. 웹 용어의 이해를 돕기 위한 우리의 <a href="/en-US/docs/Glossary" style="line-height: 1.5;">glossary</a> 에 의지하는것도 제안합니다.</p> - -<h2 id="중급_스킬">중급 스킬</h2> - -<p>일단 웹이 익숙해지셨다면, 여러분이 탐구할 몇 가지 세부적인 것이 여기 있습니다:</p> - -<h2 id="고급_스킬">고급 스킬</h2> - -<p>만약 웹 제작을 경험해보셨다면, 여러분은 몇 가지 특수하거나 일반적이지 않은 기술들에 흥미를 가지실 것입니다.</p> |