diff options
Diffstat (limited to 'files/ko/conflicting')
59 files changed, 8801 insertions, 0 deletions
diff --git a/files/ko/conflicting/learn/common_questions/index.html b/files/ko/conflicting/learn/common_questions/index.html new file mode 100644 index 0000000000..3752c49274 --- /dev/null +++ b/files/ko/conflicting/learn/common_questions/index.html @@ -0,0 +1,19 @@ +--- +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/conflicting/learn/common_questions_139278709439023a85d849385412271e/index.html b/files/ko/conflicting/learn/common_questions_139278709439023a85d849385412271e/index.html new file mode 100644 index 0000000000..1f04d35fe1 --- /dev/null +++ b/files/ko/conflicting/learn/common_questions_139278709439023a85d849385412271e/index.html @@ -0,0 +1,24 @@ +--- +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> 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 new file mode 100644 index 0000000000..5c58432ad2 --- /dev/null +++ b/files/ko/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,127 @@ +--- +title: 종속과 상속 +slug: Web/CSS/시작하기/종속과_상속 +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +--- +<p>{{ CSSTutorialTOC() }}</p> + +<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/14)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> + +<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/How_CSS_works", "CSS 동작 원리")}}<span class="seoSummary"><a href="/en-US/docs/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서의 4번쨰 섹션; stylesheets가 종속적으로 동작하는 것과 element가 부모로 부터 style을 상속 받는 것에 대해 서술해 본다. 단순하게 document의 많은 Style중 어떤 Style을 사용할 것인지 한단계 상속만으로 하나의 Style을 stylesheet에 추가 할 수 있다.</span></p> + +<h2 class="clearLeft" id="정보_종속과_상속">정보: 종속과 상속</h2> + +<p>element의 최종 style은 다양한 상호작용을 통해 여러 장소에서 선언된 것을 사용할 수 있다. 이런 다양한 상호작용을 통해 CSS는 강력해 질 수 있으며, 반대로 디버그 하기에는 복잡하고 어려워 진다.</p> + +<p>종속의 세가지 주요 원천은 아래와 같다.</p> + +<ul> + <li>마크업 언어를 위한 브라우저의 기본 style들</li> + <li>document를 읽는 사용자가 정의하는 styles</li> + <li>만든이에 의해 Style은 Document와 연결된다. 다음 3곳에서 그 내용을 명시할 수 있다.These can be specified in three places: + <ul> + <li>외부 파일: 이 안내서에서 주로 취급하는 Style에 대한 정의하는 법.</li> + <li>Document의 시작 부분에 정의하는 법: 선언한 Style은 선언된 Document의 페이지에서만 사용된다.</li> + <li>Document body의 특정 element에: 유지 보수가 가장 불편한 방법이며, 주로 테스트 용도로 쓴다.</li> + </ul> + </li> +</ul> + +<p>사용자 Style은 브라우저의 기본 Style을 변경 할수 있다. document 만든이의 style 에서 더 수정 변경 될 수도 있다. 이 안내서에서는, 예제 Document에서 만든 자신만의 stylesheets를 만들 수 있다.</p> + +<div class="tuto_example"> +<div class="tuto_type">예제</div> + +<p>이 문서를 브라우저로 보면, 일부 style은 브라우저의 기본 값을 사용한다.</p> + +<p>일부는 브라우저 셋팅에서 수정한 style이 저장된 파일에서 가져온다. 파이어 폭스 브라우저에서 "설정" 메뉴나, 브라우저 폴더에 있는 userContent.css 직접 수정하여 변경 가능하다.</p> + +<p>일부 style은 wiki server에 의해 Stylesheet에 정의된 값을 사용한다.</p> +</div> + +<p>예제 Document를 브라우저에서 열면, {{ HTMLElement("strong") }} elements로 지정된 문자는 다른 문자들 보다 두껍다. 이 Style은 기본 Style로 설정된 값에서 나온다.</p> + +<p>{{ HTMLElement("strong") }} elements의 색상은 red이다. 이 값은 예제 stylesheet에서 값을 가져 온다.</p> + +<p>{{ HTMLElement("strong") }} elements는 {{ HTMLElement("p") }} element의 자식 style이므로 대부분의 {{ HTMLElement("p") }} element의 style을 상속한다. 같은 방식으로, {{ HTMLElement("p") }} element는 {{ HTMLElement("body") }} element의 대부분의 style을 상속한다.</p> + +<p>종속적인 면에서 style은, 제작자(author)의 stylesheets가 사용자(reader) stylesheet보다도 브라우저의 기본 값보다도 우선 순위가 높다.</p> + +<p>상속적인 면에서는, 자식 노드의 자체 Style이 부모의 Style보다 우선 순위가 높다.</p> + +<p>우선 순위만 적용되는 것은 아니다. 페이지 아래부분에 좀더 자세히 설명 하도록 하자.</p> + +<div class="tuto_details"> +<div class="tuto_type">좀더 자세히</div> + +<p>CSS는 <code>!important 키워드를 써서 </code>사용자(reader)가 document 제작자(author)의 style을 덮어 쓰는 방법도 제공힌다.</p> + +<p>이는 Document 제작자에게 사용자가 항상 제작자가 만든 내용을 그대로 본다는 것을 보장 하지 않는 다는 것을 의미한다.</p> + +<p>종속과 상속에 대해 자세히 알고 싶다면, CSS의 상세 사양서 중 <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">속성 값 할당, 종속 및 상속</a> 부분을 보라.</p> +</div> + +<h2 id="액션_상속_사용하기">액션: 상속 사용하기</h2> + +<ol> + <li>CSS 예제 파일을 편집해 보자.</li> + <li>아래 라인을 추가 하라. 이미 문서 내에 존재하는 다른 내용이 있더라도 문서의 어디에 추가하든 상관 없다. 그러나, 맨 위에 추가 할수록 Document에 있는{{ HTMLElement("p") }} element가 {{ HTMLElement("strong") }} element의 부모가 되므로 지역적으로 영향을 미친다. + <pre class="brush:css">p {color: blue; text-decoration: underline;} +</pre> + </li> + <li>이제 브라우저를 갱신하여 적용된 사항을 보라. 첫글자를 포함한 모든 문자들에 밑출이 그어져 있다. {{ HTMLElement("strong") }} elements는 부모{{ HTMLElement("p") }} element의 밑줄 속성을 상속 받았다.<br> + + <p>그러나 {{ HTMLElement("strong") }} elements는 여전히 붉은색이다. 붉은색 속성은 자체 속성이므로 부모인 {{ HTMLElement("p") }} element의 파란색 속성보다 우선한다.</p> + </li> +</ol> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;"> +</table> + +<table style="border: 2px outset #3366bb; margin-right: 2em; padding: 1em;"> + <caption>Before</caption> + <tbody> + <tr> + <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<table style="border: 2px outset #3366bb; padding: 1em;"> + <caption>After</caption> + <tbody> + <tr> + <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_example"> +<div class="tuto_type">도전</div> +Stylesheet를 변경하여 아래와 같이 붉은 글자만 밑줄 속성을 가지도록 수정 해 보라. + +<table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p> + +<pre class="brush: css">p {color: blue; } +strong {color: orange; text-decoration: underline;} +</pre> + +<p> </p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">정답 확인</a></div> + +<h2 id="다음에는">다음에는?</h2> + +<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Selectors", "설렉터")}}예제 Stylesheet의 <code><p></code>와 <code><strong> 태그</code>를 원하는 style로 임으로 바꾸어 보라. 다음 장에는 <a href="/en-US/docs/CSS/Getting_Started/Selectors" title="/en-US/docs/CSS/Getting_Started/Selectors">설렉터</a>를 사용하는 법에 대해 알아보자.</p> diff --git a/files/ko/conflicting/learn/css/building_blocks/index.html b/files/ko/conflicting/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..cc6b499241 --- /dev/null +++ b/files/ko/conflicting/learn/css/building_blocks/index.html @@ -0,0 +1,331 @@ +--- +title: 상자 +slug: Web/CSS/시작하기/상자 +translation_of: Learn/CSS/Building_blocks +translation_of_original: Web/Guide/CSS/Getting_started/Boxes +--- +<p>{{ CSSTutorialTOC() }}</p> + +<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/19)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> + +<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Lists", "리스트") }}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 11번째 장; 여기서는 CSS를 통해 element들이 보여질때 page의 공간을 어떻게 배치하는지에 대해 알아본다. 예제 documnet에서 각 element의 여백 조절과 꾸미기에 대해 배워 보자.</p> + +<h2 class="clearLeft" id="정보_상자">정보: 상자</h2> + +<p>Element를 브라우저에서 표시할때 그 Element는 공간을 자치 한다. 차지하는 공간에는 4가지 요소가 있다.</p> + +<p>가운데는, element의 내용물을 표시가는 공간이며, 주변은 안쪽 여백이 있고, 그 주변에 경계가 있으며, 다른 element와의 간격이 있다.</p> + +<table> + <tbody> + <tr> + <td style="width: 22em;"> + <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;">margin</p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> + + <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;">padding</p> + + <div style="background-color: #eee;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p> + </div> + </div> + </div> + + <p><em>옅은 회색은 레이아웃의 구성을 보여준다.</em></p> + </td> + <td> + <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;"> </p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> + + <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;"> </p> + + <div style="background-color: #fff;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p> + </div> + </div> + </div> + + <p><em>브라우저에서는 위와 같이 보여준다.</em></p> + </td> + </tr> + </tbody> +</table> + +<p>안쪽 여백, 경계 그리고 바깥 여백은 element에 대해 각각 top, right, bottom, left의 크기를 가진다. 이것들은 크기가 0이 될 수도 있다.</p> + +<h3 id="색상입히기">색상입히기</h3> + +<p>안쪽 여백 색상은 element의 배경과 항상 동일하게 유지된다. 배경색을 바꾼다면 element경과 안쪽 여백 색이 바뀌는 것을 확인 할 수 있을 것이다. 바깥 여백은 항상 투명하다.</p> + +<table> + <tbody> + <tr> + <td style="width: 22em;"> + <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;">margin</p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> + + <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;">padding</p> + + <div style="background-color: #ded;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p> + </div> + </div> + </div> + + <p><em>element는 녹색 배경색이다..</em></p> + </td> + <td> + <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;"> </p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> + + <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;"> </p> + + <div style="background-color: #efe;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p> + </div> + </div> + </div> + + <p><em>브라우저에서 보면 위와 같다.</em></p> + </td> + </tr> + </tbody> +</table> + +<h3 id="경계">경계</h3> + +<p>라인이나 상자를 통해 element의 경계를 치장 할 수 있다.</p> + +<p>경계를 설정 하려면 {{ cssxref("border") }}속성을 이용하라. 두께(보통 표시 화면의 픽셀 두께), 스타일, 색상등을 설정 하라.</p> + +<p>스타일은 아래와 같다.</p> + +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="width: 6em;"> + <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div> + </td> + </tr> + <tr> + <td style="width: 6em;"> + <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div> + </td> + </tr> + </tbody> +</table> + +<p>스타일을 none이라 hidden으로 설정하면 경계가 사라진다. 다른 방법으로는 경계 색상을 투명으로 설정하여 레이아웃을 변경하지 않고도 경계를 보이지 않게 할 수도 있다.</p> + +<p>경계를 각각 별개로 설정하기 위해서는{{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}등으로 할 수 있다. 각 top, right, bottom, left는 개별적으로 설정이 가능하다.</p> + +<div class="tuto_example"> +<div class="tuto_type">예제</div> + +<p>아래 규칙은 헤더 element의 윗쪽 경계와 배경색에 대한 속성을 지정 한다.</p> + +<pre class="brush:css">h3 { + border-top: 4px solid #7c7; /* mid green */ + background-color: #efe; /* pale green */ + color: #050; /* dark green */ + } +</pre> + +<p>결과는 아래와 같다.</p> + +<table> + <tbody> + <tr> + <td> + <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Stylish heading</p> + </td> + </tr> + </tbody> +</table> + +<p>아래 규칙은 이미지 주변에 회색띠를 둘러서 경계를 구분하기 편하게 하고 있다.</p> + +<pre class="brush:css">img {border: 2px solid #ccc;} +</pre> +</div> + +<p>결과는 아래와 같다.</p> + +<table> + <tbody> + <tr> + <td>Image:</td> + <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td> + </tr> + </tbody> +</table> + +<h3 id="내외부_여백">내/외부 여백</h3> + +<p>내/외부 여백을 이용하여(margins and padding) element의 위치와 그 주변의 여백을 설정 할 수 있다.</p> + +<p>바깥 여백은 {{ cssxref("margin") }}속성을 사용하며 내부여백은 {{ cssxref("padding") }}속성을 각각 사용한다.</p> + +<p>위의 속성으로 넓이 값을 하나 선언하면 element의 4방향(top, right, bottom and left) 모두 바뀐다.</p> + +<p>넓이 값을 두개 선언하면, 첫번째 값으로는 top, bottom값이 적용되고, 두번째 값으로는 right, left값이 바뀐다.</p> + +<p>4개 값을 각각 주기 위해서는 각 값을 top, right, bottom, left의 순서로 나열 하면 된다.</p> + +<div class="tuto_example"> +<div class="tuto_type">예제</div> + +<p>아래는 p class가 remark인 단락을 빨간 경계박스로 만드는 규칙이다.</p> + +<p>안쪽 여백 값은 4픽셀으로 둘러져 있으며, 왼쪽 바깥 여백은 24픽셀이므로 들여쓰기 효과로 보여진다.</p> + +<pre class="brush:css">p.remark { + border: 2px solid red; + padding: 4px; + margin-left: 24px; + } +</pre> + +<p>결과는 아래와 같다.</p> + +<table> + <tbody> + <tr> + <td> + <p>Here is a normal paragraph.</p> + + <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Here is a remark.</p> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">좀더 자세히</div> + +<p>내/외부 여백으로 element의 배치를 할때는 브라우저에서 제공하는 기본 값과 사용자가 정의한 값을 바탕으로 정해지므로 조금 복잡할 수도 있다.</p> + +<p>브라우저에 따라 보이는 내용이 다를 수 있다. stylesheet에 내용을 많이 추가 할 수록 브라우저 기본값보단 설정된 값을 많이 사용하므로 더욱더 비슷한 결과물을 볼수 있을 것이다.</p> + +<p>원하는 결과물을 얻기 위해서는, Document의 마크업들을 바꿔야 할지도 모른다. 다음장에서는 이에 대해 좀더 자세히 알아보자.</p> + +<p>내/외부 여백과 경계선등에 대해 좀더 자세히 알아보려면 <a href="/en/CSS/box_model" title="en/CSS/box model"><span class="external">Box model</span></a>를 참조하라.</p> +</div> + +<h2 id="액션_경계선_추가">액션: 경계선 추가</h2> + +<p><code>style2.css</code>를 열어, 각 헤더별로 윗쪽에 줄을 긋는 아래 규칙을 추가 하라.</p> + +<pre class="brush:css">h3 {border-top: 1px solid gray;} +</pre> + +<p>이 페이지 아래 도전과제를 수행한다면, 그 규칙을 변경하고, 그렇지 않다면 각 리스트 아래에 바깥 여백을 추가하는 아래 규칙을 추가 하라.</p> + +<pre class="brush:css">li { + list-style: lower-roman; + margin-bottom: 8px; + } +</pre> + +<p>결과를 보기위해 브라우저에서 새로 읽어 보라.</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <ul style=""> + <li style="margin-bottom: 8px;">Arctic</li> + <li style="margin-bottom: 8px;">Atlantic</li> + <li style="margin-bottom: 8px;">Pacific</li> + <li style="margin-bottom: 8px;">Indian</li> + <li style="margin-bottom: 8px;">Southern</li> + </ul> + + <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </td> + </tr> + </tbody> +</table> + +<div class="tuto_example"> +<div class="tuto_type">도전</div> + +<p>예제 stylesheet에 하나의 규칙을 추가하여 아래처럼 바다가 연생되는 색으로 모든 경계를 두껍게 만들어 보라.</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <div style="border: 12px solid #69b; padding-left: 1em;"> + <ul style=""> + <li style="margin-bottom: 8px;">Arctic</li> + <li style="margin-bottom: 8px;">Atlantic</li> + <li style="margin-bottom: 8px;">Pacific</li> + <li style="margin-bottom: 8px;">Indian</li> + <li style="margin-bottom: 8px;">Southern</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <p><strong>. . .</strong></p> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<p>(여기 보이는 예제와 똑같은 두께나 색상으로 바꿀 필요는 없다.)</p> +</div> + +<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Boxes" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#Boxes">결과 확인.</a></p> + +<h2 id="다음에는">다음에는?</h2> + +<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Layout", "배치") }}지금까지 내/외부 여백을 설정하여 Document의 배치를 수정 해 보았다. 다음 장에서는 Document의 배치를 바꾸는 다른 방법에 대해 알아보자.</p> 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 new file mode 100644 index 0000000000..17a57d49e9 --- /dev/null +++ b/files/ko/conflicting/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,475 @@ +--- +title: 테이블 +slug: Web/CSS/시작하기/테이블 +translation_of: Learn/CSS/Building_blocks/Styling_tables +translation_of_original: Web/Guide/CSS/Getting_started/Tables +--- +<p>{{ CSSTutorialTOC() }}</p> +<div class="warning"> + <strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/20)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> +<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Layout", "배치") }}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 13번째; 여기서는 고급 설렉터에 대해 알아보고, 테이블을 사용하는 특별한 방법에 대해 확인 해 보자. 테이블이 포함된 예제 Document와 여기서 사용될 Stylesheet를 만들어 보자.</p> +<h2 class="clearLeft" id="정보_테이블">정보 : 테이블</h2> +<p>테이블이란 정보를 사각 격자 형태로 배치하는 것을 말한다. 어떤 테이블은 복잡하게 구성 될 수 있으며 그 복잡한 테이블은 브라우저마나 다르게 보여줄 수도 있다.</p> +<p>Document를 디자인 할때, 테이블을 이용하여 내용들 간의 관개정보들을 표시 할 수 있다. 브라우저별로 테이블을 조금 다르게 표시하여도 정보를 보여주는데는 크게 문제 되지 않는다.</p> +<p>시각적인 표시의 사용목적으로 테이블을 사용하는 것은 좋지 않다. 테이블 보다는 이전 페이지에 소개한 배치(<strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting_Started/Layout">Layout</a></strong>)를 사용하는 것이 더 좋은 방법이다.</p> +<h3 id="테이블_구조">테이블 구조</h3> +<p>테이블에서는 각 내용들이 각 테이블 블럭에 표시된다.</p> +<p>테이블의 같은 줄의 블럭은 하나의 행을 구성한다.</p> +<p>몇몇 테이블에서는 행은 하나의 그룹으로 구성된다. 테이블의 첫 행의 그룹은 머릿말(<em>header)</em>로 사용된다. 테이블의 마지막 행의 그룹은 꼬릿말<em>(footer)</em>로 사용되기도 한다. 테이블의 다른 행들은 본문(<em>body</em>)이 되고 한 덩어리의 그룹으로 간주된다.</p> +<p>아래에 있는 블럭은 하나의 열(<em>column</em>)로 구성되었고 제한적으로 사용되는 CSS테이블 이다.</p> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting_Started/Selectors">설렉터</a>페이지 내의 <a href="/en/CSS/Getting_Started/Selectors#relselectors" title="en/CSS/Getting_Started/Selectors#relselectors">연관관계로 본 설렉터</a>의 테이블은 10개의 셀 블럭으로 구성된 5행 테이블이다.</p> + <p>첫번째 행은 머릿말이고 나머지 4개행은 본문이다. 꼬릿말은 없다.</p> + <p>열은 2개이다.</p> +</div> +<p>여기 안내서는 간단한 예제만을 다루고 있으며, 그 결과물은 쉽게 예상 가능한 수준이다. 간단한 테이블에서는 모든 셀블럭들은 하나의 행/열만을 차지한다. 셀이 하나 이상의 행이나 열을 차지하는 복잡한 테이블 구성 방법도 CSS를 통해 표현 가능하다. 그러나 이런 고급기술은 초급 안내서의 범주를 벗어난다.</p> +<h3 id="경계">경계</h3> +<p>셀 블럭은 바깥 여백이 없다.</p> +<p>셀블럭은 바깥 여백과 들여쓰기 공간이 없다. 기본적으로 경계는 테이블 내용과의 같격을 {{ cssxref("border-spacing") }}속성으로 조절 가능하다. 테이블의 {{ cssxref("border-collapse") }}속성을 <code>collapse</code>로 설정하면 이 여백을 없앨 수 있다.</p> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p>여기 세가지 테이블을 확인 해 보자.</p> + <p>왼쪽 테이블은 0.5 em 경계 여백을 가지고 있다. 가운데는 경계 여백을 0으로 했으며, 오른쪽은 collapse속성을 사용 하였다.</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style=""> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Clubs</td> + <td style="border: 1px solid #c00; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> + <td style="border: 1px solid #c00; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 2em;"> + <table style=""> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Clubs</td> + <td style="border: 1px solid #c00; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> + <td style="border: 1px solid #c00; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 6em;"> + <table style="border-collapse: collapse;"> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Clubs</td> + <td style="border: 1px solid #c00; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> + <td style="border: 1px solid #c00; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> +</div> +<h3 id="캡션">캡션</h3> +<p>캡션({{ HTMLElement("caption") }}) elemen전체 테이블에 적용되는 라벨이다. 기본적으로 테이블 위쪽에 표시된다.</p> +<p>캡션을 아래쪽에 두고 싶다면 {{ cssxref("caption-side") }}속성 값을 <code>bottom</code>으로 설정하라. 속성은 상속되므로 상속받은 테이블들에 선택적으로 속성값 재설정도 가능하다.</p> +<p>캡션의 텍스트 스타일을 조정 하려면 텍스트 속성을 사용하면 된다.</p> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p>이 테이블은 아래쪽에 캡션을 가지고 있다.</p> + <pre class="brush: css">#demo-table > caption { + caption-side: bottom; + font-style: italic; + text-align: right; +} +</pre> + <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <table> + <caption> + Suits</caption> + <tbody> + <tr> + <td> + <table style="border-collapse: collapse;"> + <tbody> + <tr> + <td style="border: 1px solid gray; text-align: center;">Clubs</td> + <td style="border: 1px solid gray; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid gray; text-align: center;">Diamonds</td> + <td style="border: 1px solid gray; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> +</div> +<h3 id="빈_셀블럭">빈 셀블럭</h3> +<p>테이블 element에 {{ cssxref("empty-cells") }}: show로 설정 함으로 빈 셀블럭을 표시 할 수 있다.</p> +<p><code>empty-cells: hide로 설정하여 해당 셀블럭을 안보이도록 감출 수 있다. 셀의 부모 element가 배경색을 가지고 있다면 그 배경색이 보이게 될 것이다.</code></p> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p>이 테이블은 옅은 녹색 배경을 가지고 있으며, 셀은 진한 회색의 테두리와 회색 배경을 가지고 이다.</p> + <p>아래 테이블의 왼쪽은 빈 셀을 보여주고, 오른쪽은 셀감추기의 결과를 확인 할 수 있다.</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="background-color: #dfd;"> + <tbody> + <tr> + <td style="border: 1px solid #555; background-color: #eee;"> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 6em;"> + <table style="background-color: #dfd;"> + <tbody> + <tr> + <td> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + 자세히</div> + <p>CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">테이블</a>에서 좀더 자세한 테이블에 대한 사항을 확인 하라.</p> + <p>여기에서 보다 더 자세한 테이블에 관한 내용을 확인 할 수 있지만, 브라우저별로 다르게 보여지는 복잡한 테이블에 대한 사항은 포함하고 있지 않다.</p> +</div> +<h2 id="액션_테이블_꾸미기">액션 : 테이블 꾸미기</h2> +<ol> + <li><code>doc3.html파일을 만들어 아래 긴 코드를 전부 복사해 넣고 저장하라.</code> + <div style="height: 36em; overflow: auto;"> + <pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Sample document 3</title> + <link rel="stylesheet" href="style3.css"> + </head> + <body> + <table id="demo-table"> + <caption>Oceans</caption> + <thead> + <tr> + <th></th> + <th>Area</th> + <th>Mean depth</th> + </tr> + <tr> + <th></th> + <th>million km<sup>2</sup></th> + <th>m</th> + </tr> + </thead> + <tbody> + <tr> + <th>Arctic</th> + <td>13,000</td> + <td>1,200</td> + </tr> + <tr> + <th>Atlantic</th> + <td>87,000</td> + <td>3,900</td> + </tr> + <tr> + <th>Pacific</th> + <td>180,000</td> + <td>4,000</td> + </tr> + <tr> + <th>Indian</th> + <td>75,000</td> + <td>3,900</td> + </tr> + <tr> + <th>Southern</th> + <td>20,000</td> + <td>4,500</td> + </tr> + </tbody> + <tfoot> + <tr> + <th>Total</th> + <td>361,000</td> + <td></td> + </tr> + <tr> + <th>Mean</th> + <td>72,000</td> + <td>3,800</td> + </tr> + </tfoot> + </table> + </body> +</html> +</pre> + </div> + </li> + <li><code>style3.css</code>를 만들어 아래 긴 내용을 전부 복사해 넣어라. + <pre class="brush: css">/*** Style for doc3.html (Tables) ***/ + +#demo-table { + font: 100% sans-serif; + background-color: #efe; + border-collapse: collapse; + empty-cells: show; + border: 1px solid #7a7; +} + +#demo-table > caption { + text-align: left; + font-weight: bold; + font-size: 200%; + border-bottom: .2em solid #4ca; + margin-bottom: .5em; +} + + +/* basic shared rules */ +#demo-table th, +#demo-table td { + text-align: right; + padding-right: .5em; +} + +#demo-table th { + font-weight: bold; + padding-left: .5em; +} + + +/* header */ +#demo-table > thead > tr:first-child > th { + text-align: center; + color: blue; +} + +#demo-table > thead > tr + tr > th { + font-style: italic; + color: gray; +} + +/* fix size of superscript */ +#demo-table sup { + font-size: 75%; +} + +/* body */ +#demo-table td { + background-color: #cef; + padding:.5em .5em .5em 3em; +} + +#demo-table tbody th:after { + content: ":"; +} + + +/* footer */ +#demo-table tfoot { + font-weight: bold; +} + +#demo-table tfoot th { + color: blue; +} + +#demo-table tfoot th:after { + content: ":"; +} + +#demo-table > tfoot td { + background-color: #cee; +} + +#demo-table > tfoot > tr:first-child td { + border-top: .2em solid #7a7; +} +</pre> + </li> + <li>브라우저에서 열어서 아래와 같이 나오는 지 확인 하라. + <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div> + <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceans</p> + <div style="border: 1px solid #7a7; background-color: #efe;"> + <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> + <tbody> + <tr style="text-align: center; color: blue;"> + <th> </th> + <th>Area</th> + <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> + </tr> + <tr style="font-style: italic; color: gray;"> + <th> </th> + <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> + <th style="padding-left: .5em; padding-right: .5em;">m</th> + </tr> + <tr> + <th style="padding-right: .5em;">Arctic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td> + </tr> + <tr> + <th style="padding-right: .5em;">Atlantic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> + </tr> + <tr> + <th style="padding-right: .5em;">Pacific:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td> + </tr> + <tr> + <th style="padding-right: .5em;">Indian:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> + </tr> + <tr> + <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Total:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Mean:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> + </tr> + </tbody> + </table> + </div> + </div> + </td> + </tr> + </tbody> + </table> + </li> + <li>화면에 보여지는 테이블과 stylesheet에 추가한 규칙과 비교하여 각 규칙이 어떻게 적용되었는지 확인해 보라. 원하는 방향으로 적용되지 않은 규칙이 있다면 해당 규칙을 주석 처리해서 저장한 후 브라우저로 다시 읽어 확인 해 보라. 아래는 위의 테이블에 관해 확인 해볼 사항이다. + <ul> + <li>캡션은 테이블 바깥 경계에 표시된다.</li> + <li>옵션에 최소 포인트 크기 세트가 있다면 km<sup>2</sup>에 있는 '2'처럼 어깨 글자에 적용 될 것이다.</li> + <li>테이블은 세가지 빈 셀 블럭을 가지고 있다. 그중 둘은 테이블 배경색을 그대로 보여줄 수 있도록 설정되어 있다. 세번째 빈 셀블럭은 자체 색상과 위쪽에 경계선을 가지고 있다.</li> + <li>콜론은 Stylesheet에서 추가 되었다.</li> + </ul> + </li> +</ol> +<div class="tuto_example"> + <div class="tuto_type"> + 도전</div> + <p>아래처럼 보이도록 Stylesheet를 바꿔 보라</p> + <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div> + <div style="border: 1px solid #7a7; background-color: #efe;"> + <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> + <tbody> + <tr style="text-align: center; color: blue;"> + <th> </th> + <th>Area</th> + <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> + </tr> + <tr style="font-style: italic; color: gray;"> + <th> </th> + <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> + <th style="padding-left: .5em; padding-right: .5em;">m</th> + </tr> + <tr> + <th style="padding-right: .5em;">Arctic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td> + </tr> + <tr> + <th style="padding-right: .5em;">Atlantic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> + </tr> + <tr> + <th style="padding-right: .5em;">Pacific:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td> + </tr> + <tr> + <th style="padding-right: .5em;">Indian:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> + </tr> + <tr> + <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Total:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Mean:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> + </tr> + </tbody> + </table> + </div> + <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p> + </div> + </td> + </tr> + </tbody> + </table> + <p> </p> +</div> +<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Tables" title="en/CSS/Getting started/Challenge solutions#Tables">정답 확인</a></p> +<h2 id="다음에는">다음에는?</h2> +<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Media", "미디어") }}이 장이 CSS의 속성과 그 변수에 대해 설명하는 마지막 장이다. 전체 속성 및 변수에 대해 확인 하려면 CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a>를 보라.</p> +<p>다음에는 CSS의 Stylesheet구조와 목적에 대해 <a href="/en-US/docs/CSS/Getting_Started/Media" title="/en-US/docs/CSS/Getting_Started/Media">다시한번 살펴보자</a>.</p> diff --git a/files/ko/conflicting/learn/css/css_layout/index.html b/files/ko/conflicting/learn/css/css_layout/index.html new file mode 100644 index 0000000000..86ea912bb7 --- /dev/null +++ b/files/ko/conflicting/learn/css/css_layout/index.html @@ -0,0 +1,370 @@ +--- +title: 배치 +slug: Web/CSS/시작하기/배치 +translation_of: Learn/CSS/CSS_layout +translation_of_original: Web/Guide/CSS/Getting_started/Layout +--- +<p>{{ CSSTutorialTOC() }}</p> + +<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/19)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> + +<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Boxes", "상자")}}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 12번째 장; 여기서는 Document의 배치를 정하는 몇몇 방법에 대해 알아본다. 예제 document를 좀 바꿔 보자.</p> + +<h2 class="clearLeft" id="정보_배치">정보: 배치</h2> + +<p>Document의 배치를 바꾸기 위해 CSS는 다양한 방법을 제공한다. 어떤 고급 기술은 여기 초급안내서의 범주를 훨씬 넘어서는 고급 기술이다.</p> + +<p>여러 브라우저에서의 결과물이 비슷하게 나오게 하기 위해, stylesheet값은 브라우저의 기본 stylesheet값과 배치값을 사용한다. 이 주제 또한 여기서의 초급과정보다 더 고급 과정이다.</p> + +<p>여기서는 간단한 기술에 대해 연습 해 보자.</p> + +<h3 id="Document_구조">Document 구조</h3> + +<p>만약 Document의 배치를 변경하려 한다면 이떤 경우에는 document 구조를 바꿔야 할지 모른다.</p> + +<p>document의 마크업 언어는 구조 생성을 위한 용도의 일반적인 태그를 가지고 있다. 예를 들면 HTML에서 구조를 생성 하기 위해 {{ HTMLElement("div") }} element를 사용 할 수 있다.</p> + +<div class="tuto_example"> +<div class="tuto_type">예제</div> + +<p>예제 Document에서 <u>Numbered paragraphs</u>가 표시된 단락은 컨테이너 구조가 아니다.</p> + +<p>따라서 이 단락 주변에는 설렉터에서 이 element에 대해 정의 한 것이 없으므로 경계 박스를 그릴 수 없다.</p> + +<p>이 구조적 문제를 해결 하기 위해, {{ HTMLElement("div") }}태그를 단락 주변에 추가 하라. 이 태그는 유일한 것이어서 id속성으로 구분 될 수 있다.</p> + +<pre class="brush:html;highlight:[2,8]"><h3>Numbered paragraphs</h3> +<div id="numbered"> + <p>Lorem ipsum</p> + <p>Dolor sit</p> + <p>Amet consectetuer</p> + <p>Magna aliquam</p> + <p>Autem veleum</p> +</div> +</pre> + +<p>이제 예제 stylesheet 에 두 리스트에 주변의 경계 표시를 위한 규칙 하나를 아래와 같이 추가 하자.</p> + +<pre class="brush:css">ul, #numbered { + border: 1em solid #69b; + padding-right:1em; +} +</pre> + +<p>아래와 같은 형식으로 출력된다.</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </div> + </td> + </tr> + </tbody> +</table> +</div> + +<h3 id="크기_단위">크기 단위</h3> + +<p>지금까지 이 안내서에서는 크기를 픽셀(px)단위로 표시 해왔다. 컴퓨터 화면과 같은 출력장치에서는 어느 정도 적절한 표시 방법이다. 그러나, 사용자가 글씨 크기를 바꿔 버리면 화면 출력은 이상하게 엉켜버릴 수 있다.</p> + +<p>다양한 용도를 위해 크기는 백분위(%)값이나, 고정넓이폰트 값(em)으료 표시하는 것이 더 좋은 방법이다. 고정 넓이 폰트 값(em)은 현재 사용되는 글씨체중 'm'에 해당하는 넓이를 기준으로 하고 있다.(영문에서는 'm'이 가장 넓은 폰트이다). 사용자가 글씨 크기를 바꾸면 배치는 자동적으로 맞추어 질 것이다.</p> + +<div class="tuto_example"> +<div class="tuto_type">예제</div> + +<p>아래 텍스트의 왼쪽에 있는 경계는 픽셀로 크기를 지정 했다.</p> + +<p>오른쪽은 고정 넓이 폰트값(aka ems)으로 지정 했다.</p> + +<p>브라우저에서 글씨 크기를 변경하고 확인 해보면 오른쪽은 적당한 크기를 유지하지만, 왼쪽은 그렇지 않다는 것을 확인 할 수 있을 것이다.</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <div style="">RESIZE ME PLEASE</div> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">좀더 자세히</div> + +<p>다른 기기에서는 다른 단위가 적절할 수 있다.</p> + +<p>이 안내서 나중 페이지에 이에 대해 좀더 자세히 알아 보도록 하자.</p> + +<p>변수 값과 단위에 대해 상세하게 확인 하고 싶다면 CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> 부분을 참고 하라.</p> +</div> + +<h3 id="텍스트_배치">텍스트 배치</h3> + +<p>element 내용물을 배치하는데는 두가지 속성이 있다. 이 두가지를 통해 간단하게 배치/정열을 조절 할 수 있다.</p> + +<dl> + <dt>{{ cssxref("text-align") }}</dt> + <dd>이 <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code>값로 할당하여 정열 할 수 있다.</dd> + <dt>{{ cssxref("text-indent") }}</dt> + <dd>들여쓰기를 위해 적당한 값을 명시하여 사용 한다.</dd> +</dl> + +<p>이 두 속성은 실제 텍스트 외에도 모든 텍스트 같은(text-like) element에도 영향을 미친다. 속성들은 부모로부터 자식까지 상송되므로, 자식 element에서 부모로 부터 받지 않으려는 속성에 대해서 정확하게 제거 하는 규칙을 추가 하지 않는다면 원하는 결과를 얻지 못할지 모른다.</p> + +<div class="tuto_example"> +<div class="tuto_type">예제</div> + +<p>헤더를 가운데 정렬하려면</p> + +<pre class="brush:css">h3 { + border-top: 1px solid gray; + text-align: center; +} +</pre> + +<p>결과는 아래와 같다.</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p> + </td> + </tr> + </tbody> +</table> + +<p>HTML document에서, 헤더 아래쪽에 보여지는 내용물(content)는 헤더에서 구조적으로 포함된 사항이 아니다. 그러므로 이와 같은 헤더를 정렬하려면 헤더 아래쪽 테그는 그 스타일을 상속 받아서는 안된다.</p> +</div> + +<h3 id="부유(Floats)">부유(Floats)</h3> + +<p>{{ cssxref("float") }}속성은 element를 강제로 왼쪽 혹은 오른쪽으로 정렬시킨다. 이것이 element의 위치와 크기를 조정하는 가장 간단한 방법이다.</p> + +<p>나머지 document의 내용물(content)는 부유 속성의 element 주변으로 떠있게 된다. {{ cssxref("clear") }} 속성을 통해서 element들을 부유 element로 부터 떨어져 고정 위치하도록 한다.</p> + +<div class="tuto_example"> +<div class="tuto_type">예제</div> + +<p>예제 document에서 리스트는 윈도우의 크기에 맞게 늘어난다. 이를 방지하기 위해서는 부유속성으로 왼쪽으로 정렬되도록 하면 된다.</p> + +<p>아래 예로 헤더를 왼쪽 한곳에 고정 시키려면 clear속성과 left를 함께 선언 해 주어야 한다.</p> + +<pre class="brush:css">ul, #numbered {float: left;} +h3 {clear: left;} +</pre> +</div> + +<p>The result looks like:</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </div> + </td> + </tr> + </tbody> +</table> + +<p>(텍스트가 경계선에 바짝 붙어 있다면 박스의 오른편에 약간의 내부 여백 필요할듯 하다.)</p> + +<h3 id="위치잡기">위치잡기</h3> + +<p>{{ cssxref("position") }}속성에 아래 4가지 방법으로 값을 선언하여 위치를 잡을 수 있다.</p> + +<p>더 많은 속성이 있지만 아래와 같은 간단한 방법으로(여기서는 초급 안내서이므로) 위치를 조정 할 수 있다. 그러나 아래 방법을 조합해서 쓴다면 다소 어려워 질 것이다.</p> + +<dl> + <dt><code>relative</code></dt> + <dd>element의 위치는 상대적으로 정해진다. 어느 정도 값을 지정 함으로 element를 위치 시킬 수 있다. element의 바깥 여백값을 설정함으로 이와 동일한 설정 효과를 볼 수도 있다.</dd> + <dt><code>fixed</code></dt> + <dd>고정 위치 설정법. document window에서의 상대적 위치를 지정하는 방법이다. document의 나머지 부분이 스크롤 되어야 할지라도 해당 element는 고정 값을 가진다.</dd> + <dt><code>absolute</code></dt> + <dd>부모 element의 위치에 상대적으로 위치가 고정된다. 그 부모 element는 위치 지정 방법이 <code>relative</code>, <code>fixed</code> or <code>absolute</code> 중 하나이어야 한다. element의 위치 속성을 releative로 설정 한다면 방향 표시를 하지 않더라도 어떠한 속성을 가진 부모 element에도 잘 동작 할 것이다.</dd> + <dt><code>static</code></dt> + <dd>기본 설정 값이다. 명확하게 상속받은 위치 지정을 해제하려면 이 값으로 선언 해야 한다.</dd> +</dl> + +<p>이 위치 지정 속성과 함께(<code>static은 제외</code>) 방향(<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>), 높이(<code>width)</code>, 넓이(<code>height) 크기(size)도 같이 지정 해야 한다.</code></p> + +<div class="tuto_example"> +<div class="tuto_type">예제</div> + +<p>아래 두 element의 Top정렬을 동일한 위치에 설정 하려면 예제 Document의 두 element에 부모 container를 만들어라.</p> + +<pre class="brush:html"><div id="parent-div"> + <p id="forward">/</p> + <p id="back">\</p> +</div> +</pre> + +<p>예제 stylesheet에서 부모 element의 위치 속성을 <code>relative로 하라.</code> 방향 속성까지 같이 할 필요는 없다.자식 element의 위치는 absolute로 설정하라.</p> + +<pre class="brush:css">#parent-div { + position: relative; + font: bold 200% sans-serif; +} + +#forward, #back { + position: absolute; + margin:0px; /* no margin around the elements */ + top: 0px; /* distance from top */ + left: 0px; /* distance from left */ +} + +#forward { + color: blue; +} + +#back { + color: red; +} +</pre> + +<p>결과는 아래처럼 백슬레쉬(\)와 슬레쉬(/)가 겹쳐서 위치 되도록 하였다.</p> + +<div style="position: relative; left: .33em; font: bold 300% sans-serif;"> +<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p> + +<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p> +</div> + +<table style="background-color: white; border: 2px outset #36b; height: 5em; padding: 1em; width: 30em;"> + <tbody> + <tr> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">좀더 자세히</div> + +<p>위치 지정에 대한 모든 내용은 CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a>과 <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>의 두 챕터에 나와 있다.</p> + +<p>다양한 브라우저에서 동작하도록 stylesheet를 설계하고자 한다면, 브라우저별로 표준을 다르게 해석하는 것과 특정 버전의 브라우저에 있는 버그에 대해서도 고려해야 한다.</p> +</div> + +<h2 id="액션_배치_선언">액션: 배치 선언</h2> + +<ol> + <li><code>doc2.html와</code> <code>style2.css를 수정 하여 위에 나온</code><a href="#Document_structure" title="#Document structure"><strong>Document structure</strong></a> 와 <a href="#Floats" title="#Floats"><strong>Floats</strong></a>를 연습 해 보자.</li> + <li><a href="#Floats" title="#Floats"><strong>Floats</strong></a>예제에서 텍스트를 오른쪽 경계와의 안쪽 여백을 0.5 em로 설정 하라.</li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">도전</div> + +<p><code>doc2.html의 아래쪽 </body> 바로 위에 아래 태그를 추가하라</code>.</p> + +<pre class="brush:html"><img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> +</pre> + +<p>아래 이미지를 다운로드 하지 않았다면 지금 다운로드 하고, 위의 예제 파일이 있는 곳으로 저장하라.</p> + +<table style="border: 2px solid #ccc;"> + <tbody> + <tr> + <td><img alt="Image:Yellow-pin.png" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></td> + </tr> + </tbody> +</table> + +<p>Document내에서 위의 이미지가 어느 위치에 표시될지 예상 해 보라. 그리고 브라우저에서 읽어들여 그 결과를 확인 해 보라.</p> + +<p>Document의 오른쪽 위에 자리 잡을 수 있도록 예제 stylesheet에 규칙을 추가 해 보라.</p> + +<p>브라우저에서 다시 읽어 보고 윈도우를 작게 조절 해 보라. 윈도우 크기를 조절 할때에도 Document가 Scroll될지라도 위의 이미지가 오른쪽 위에 계속 자리 하는지를 확인 해 보라.</p> + +<div style="position: relative; width: 29.5em; height: 18em;"> +<div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> +<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + +<div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> +<ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> +</ul> +</div> + +<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + +<div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> +<p><strong>1: </strong>Lorem ipsum</p> + +<p><strong>2: </strong>Dolor sit</p> + +<p><strong>3: </strong>Amet consectetuer</p> + +<p><strong>4: </strong>Magna aliquam</p> + +<p><strong>5: </strong>Autem veleum</p> +</div> + +<p style=""> </p> + +<div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></div> +</div> +</div> +</div> + +<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Layout" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#Layout">정답 확인.</a></p> + +<h2 id="다음에는">다음에는?</h2> + +<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Tables", "테이블") }}이제까지 CSS의 초급 안내서에 나온 주제를 다 확인 해 보았다. 다음장에서 부터는 CSS 설렉터의 고급 기술과 <a href="/en-US/docs/CSS/Getting_Started/Tables" title="/en-US/docs/CSS/Getting_Started/Tables">테이블</a>의 스타일을 설정하는 방법에 대해 알아보자.</p> diff --git a/files/ko/conflicting/learn/css/css_layout/introduction/index.html b/files/ko/conflicting/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..5437902bf1 --- /dev/null +++ b/files/ko/conflicting/learn/css/css_layout/introduction/index.html @@ -0,0 +1,409 @@ +--- +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/conflicting/learn/css/styling_text/fundamentals/index.html b/files/ko/conflicting/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..8866132472 --- /dev/null +++ b/files/ko/conflicting/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,150 @@ +--- +title: 텍스트 스타일 +slug: Web/CSS/시작하기/텍스트_스타일 +translation_of: Learn/CSS/Styling_text/Fundamentals +translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +--- +<p>{{ CSSTutorialTOC() }}</p> + +<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> + +<p>{{previousPage("/en-US/docs/CSS/Getting_Started/Readable_CSS", "알기 쉬운 CSS")}}<span class="seoSummary"><a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기 </a>안내서 7번째 장; 여기서는 텍스트 스타일에 대해 좀더 많은 예를 살펴 보자. 예제 Stylesheet를 다른 글씨체로 바꿔 보자.</span></p> + +<h2 class="clearLeft" id="정보_텍스트_스타일">정보: 텍스트 스타일</h2> + +<p>CSS는 몇가지 텍스트 스타일에 대한 속성이 있다.</p> + +<p>여러가지에 대해 한번에 편리하게 사용할 수 있는 {{ cssxref("font") }}라는 속성에 대해 알아보자. 예를 들면</p> + +<ul> + <li>굵게, 기울기, 작은 대문자체</li> + <li>크기</li> + <li>라인 높이</li> + <li>글씨체</li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type">예제</div> + +<pre class="brush:css">p {font: italic 75%/125% "Comic Sans MS", cursive;} +</pre> + +<p>위의 규칙은 모든 단락내용을 italic폰트로 설정 하는 등의 다양한 설정을 한다.</p> + +<p>폰트 크기를 부모 element의 단락 크기의 3/4크기로 하고 라인 크기를 보통보다 좀 큰 125%크기로 한다.</p> + +<p>글자체는 Comic Sans MS이다. 하지만 이 글씨체가 유효하지 않다면 브라우저는 기본 글씨체인 손글씨체를 사용 할 것이다.</p> + +<p>이 규칙에는 굵기와 작은 대문자 속성을 무력화 하는 오류를 포함하고 있다.</p> +</div> + +<h3 id="글씨체">글씨체</h3> + +<p>보통 Document에서 가용한 글씨체에는 어떤 것이 있는지 알고 작성할 수는 없다. 대체 가능한 글씨체를 같이 설정 해 주는 것도 좋은 방법이다.</p> + +<p>맨 마지막에는 기본 글씨체<code>(serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> or <code>monospace</code>)를 추가 설정 해 주는 것이 좋다.</p> + +<p>만약 document에서 지원 하지 않는 글씨체라면 브라우저가 다른 글씨체로 대체 할 것이다. 예를 들면, Document내에는 설정된 글씨체에서 지원 되지 않는 특수 문자를 포함 하는 경우 같은 것을 말한다. 브라우저는 자동적으로 다른 글씨체에서 위의 특수문자를 지원 한다면 그 글씨체를 사용하여 표시 할 것이다.</p> + +<p>글씨체를 설정 하기 위해서는 {{ cssxref("font-family") }}속성을 사용 하라.</p> + +<h3 id="글씨_크기">글씨 크기</h3> + +<p>브라우저는 보여지고 있는 페이지의 기본 글씨체의 크기와 텍스트의 크기를 바꿀 수 있어서 사용자에 맞는 것을 사용 할 수 있게 해준다.</p> + +<p><code>폰트 크기는 small, medium, large등 정해진 사이즈도 사용할 수 있다</code>. 또한 부모 글씨체 크기와 비교된(smaller, larger, 150%, 1.5 em) 값으로 설정 가능하다. 'em'은 'm'자의 폭을 말한다. 따라서 부모 element보다 1.5배 크기의 글씨크기를 말한다.</p> + +<p><code>14px</code> (14 pixels)와 같이 표시장치나 출력장치의 실체 크기로 지정 할 수도 있다. 이 경우는 크기를 바꿀수 없으므로 시각장애인들에게 불편할 수 있다. 이런 경우를 위해서는 document의 최 상위 element에서부터 정해진 크기 값중 하나인 'medium'으로 해 놓으면 하위 element는 그와 비교해 상대적인 값으로 크기를 설정 할 수 있다.</p> + +<p>글씨 크기를 설정 하려면 {{ cssxref("font-size") }}를 사용하라.</p> + +<h3 id="줄_높이">줄 높이</h3> + +<p>Line height는 줄간 높이를 말한다. 단락이 여러줄로 구성되었다면 보통보다 큰(larger-than-normal) 간격이 특히 작은 글씨라면 읽기 편하다.</p> + +<p>줄 높이 설정은 {{ cssxref("line-height") }}속성을 사용하라.</p> + +<h3 id="장식(Decoration)">장식(Decoration)</h3> + +<p>별도의 {{ cssxref("text-decoration") }} 속성으로 밑줄, 취소선 같은 다른 스타일 설정 할 수 있다. 설정된 장식(Decoration)속성을 없애기 위해서 값을 none을 쓸 수 있다.</p> + +<h3 id="다른_속성">다른 속성</h3> + +<p>기울기 속성 {{ cssxref("font-style") }}<code>: italic;</code><br> + 굵은 속성 <code>{{ cssxref("font-weight") }}: bold;</code><br> + 작은 대문자 <code>{{ cssxref("font-variant") }}: small-caps;</code></p> + +<p>위의 속성을 해제하려면 <code>normal</code> 또는 <code>inherit</code>로 설정하라.</p> + +<div class="tuto_details"> +<div class="tuto_type">좀더 자세히</div> + +<p>텍스트 스타일은 다양한 방법으로 설정 가능하다.</p> + +<p>예를 들면, 위에 언급한 속성들에 다른 사용 가능한 값들이 더 있다.</p> + +<p>복잡한 stylesheet에서는, 원치 않는 오류(설정 값이 다르게 나타나는 오류) 방지를 위해 약칭 <code>font 속성 사용을 피하라.</code></p> + +<p>글씨체에 관한 모든 속성을 보려면, CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a>부분을 보라. 다양한 텍스트 효과를 위해서는 <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a> 부분을 참고 하라.</p> + +<p>사용자 시스템 환경에 설치된 폰트 외에 다른 폰트를 설정하려면 <a href="/en/css/@font-face" title="https://developer.mozilla.org/en/css/@font-face">@font-face</a>로 온라인에 있는 폰트 설정 할 수 있다. 이를 위해서는 브라우저에서 해당 규칙을 지원해야 한다.</p> +</div> + +<h2 id="액션_글씨체_설정">액션: 글씨체 설정</h2> + +<p>간단한 document에서는, {{ HTMLElement("body") }} element의 글씨체를 설정 할 수 있으며, 그 이후에서는 이 속성을 상속한다.</p> + +<ol> + <li>예제 CSS 편집 해 보자.</li> + <li>예제의 Document에 아래 규칙을 추가 하라. CSS파일의 위쪽은 논리적인 곳(?)이다. 하지만 어디에 추가하든 그 속성은 적용 될 것이다. + <pre class="eval">body {font: 16px "Comic Sans MS", cursive;} +</pre> + </li> + <li>주석을 탭이나 공백과 함께 잘 배치해 보라.</li> + <li>저장하고 브라우저를 다시 읽어보라. 해당 기기에 italic 스타일이 지원되지 않는 Comic Sans MS나 손글씨체 글씨체가 있다면 브라우저는 다음 예제의 첫출과 같이 italic이 지원되는 다른 글씨체로 바꿔서 보여 줄 것이다. + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> + <li>브라우저 메뉴에서 <strong>View > Text Size > Increase</strong> (or <strong>View > Zoom > Zoom In</strong>)을 선택 해 보라. 위에 16 pixels로 스타일 속성을 주었더라도, 화면에는 그 글씨 크기가 바뀔 것이다.</li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">도전</div> + +<p>다른것은 그대로 두고, 단어 앞 첫 글자 6개만 기본 sarif글씨체로 바꾸고 브라우저 기본 사이즈의 2배 크기로 변경 해 보라.</p> + +<table> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>Add the following style declaration to the <code>strong</code> rule:</p> + +<pre class="brush: css"> font: 200% serif; +</pre> +If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden. + +<p> </p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">정답 확인</a></div> + +<h2 id="다음에는">다음에는?</h2> + +<p>{{nextPage("/en-US/docs/CSS/Getting_Started/Color", "색상")}}이미 예제에서 몇가지 색상을 사용 해 왔다. <a href="/en-US/docs/CSS/Getting_Started/Color" title="/en-US/docs/CSS/Getting_Started/Color">다음 장에서는</a> 기본 색생과 다른 색상 표현 법에 대해 알아본다.</p> 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 new file mode 100644 index 0000000000..0e0e215006 --- /dev/null +++ b/files/ko/conflicting/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,245 @@ +--- +title: 리스트 +slug: Web/CSS/시작하기/리스트 +translation_of: Learn/CSS/Styling_text/Styling_lists +translation_of_original: Web/Guide/CSS/Getting_started/Lists +--- +<p>{{ CSSTutorialTOC() }}</p> +<div class="warning"> + <strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> +<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Content", "내용물") }}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 10번째 장; 이번 장에서는 CSS에서 리스트를 어떻게 보여줄 것인지 설정하는 법에 대해 알아보자. 리스트를 포함하는 새로운 예제 Document를 생성하고, 리스트 스타일을 위한 새로운 stylesheet도 생성하라.</p> +<h2 class="clearLeft" id="정보_리스트">정보: 리스트</h2> +<p><a href="/en-US/docs/CSS/Getting_Started/Content" title="/en-US/docs/CSS/Getting_Started/Content">지난 섹션</a>에서 도전과제를 해결했다면, 어떤 elememt 앞에 리스트 아이템처럼 보여지는 내용물을 추가 하는 법을 보았을 것이다.</p> +<p>CSS는 리스트를 위한 특별한 속성을 제공한다. 이는 무엇보다도 사용하기 편리한 방법이다.</p> +<p>리스트 속성을 지정 하려면, {{ cssxref("list-style") }} 속성을 통해 마커 타입을 지정하라.</p> +<p>CSS에 있는 설렉터 규칙은 리스트 아이템 element를 선택 할 수도 있고(예를 들면, {{ HTMLElement("li") }}) 부모 리스트 element도 선택 가능하다. (예를 들면 {{ HTMLElement ("ul") }}) 리스트 element도 스타일을 상속 받는다.</p> +<h3 id="무순서_리스트">무순서 리스트</h3> +<p><em>무순서</em> 리스트에서는, 각 리스트 아이템들이 같은 방식으로 mark된다.</p> +<p>CSS는 세가지 방법의 마커가 있다. 브라우저에서는 다음과 같이 보여진다.</p> +<ul style="padding-left: 2em;"> + <li style="list-style-type: disc;"><code>disc</code></li> + <li style="list-style-type: circle;"><code>circle</code></li> + <li style="list-style-type: square;"><code>square</code></li> +</ul> +<p>다른 이미지도 URL로 설정 가능하다.</p> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p>아래 규칙은 서로 다른 class의 리스트 아이템에 서로 다른 마커를 사용하고 있다.</p> + <pre class="brush:css">li.open {list-style: circle;} +li.closed {list-style: disc;} +</pre> + <p>When these classes are used in a list, they distinguish between open and closed items (for example, in a to-do list):</p> + <pre class="brush:css"><ul> + <li class="open">Lorem ipsum</li> + <li class="closed">Dolor sit</li> + <li class="closed">Amet consectetuer</li> + <li class="open">Magna aliquam</li> + <li class="closed">Autem veleum</li> +</ul> +</pre> + <p>위 코드는 아래처럼 보여질 것이다.</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <ul style="padding-right: 6em;"> + <li style="list-style-type: circle;">Lorem ipsum</li> + <li style="list-style-type: disc;">Dolor sit</li> + <li style="list-style-type: disc;">Amet consectetuer</li> + <li style="list-style-type: circle;">Magna aliquam</li> + <li style="list-style-type: disc;">Autem veleum</li> + </ul> + </td> + </tr> + </tbody> + </table> +</div> +<h3 id="순차_리스트">순차 리스트</h3> +<p>순차리스트는 각 리스트 아이템이 순차적으로 순서가 표시된 마커와 보여진다.</p> +<p>{{ cssxref("list-style") }}속성으로 마커 타입을 설정 하라.</p> +<ul style="padding-left: 2em;"> + <li style=""><code>decimal</code></li> + <li style=""><code>lower-roman</code></li> + <li style=""><code>upper-roman</code></li> + <li style=""><code>lower-latin</code></li> + <li style=""><code>upper-latin</code></li> +</ul> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p>이 예제에서는 'info' class의 {{ HTMLElement("ol") }} elements에서, 아이템들이 대문자 순차 마커로 표시된다.</p> + <pre class="brush:css">ol.info {list-style: upper-latin;} +</pre> + <p>아래 리스트 내의 {{ HTMLElement("li") }} element는 위의 스타일을 상속한다.</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <ul> + <li style="padding-right: 6em; list-style-type: upper-latin;">Lorem ipsum</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Dolor sit</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Amet consectetuer</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Magna aliquam</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Autem veleum</li> + </ul> + </td> + </tr> + </tbody> + </table> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + 좀더 자세히</div> + <p>{{ cssxref("list-style") }}속성은 약어이다. 다소 복잡한 stylesheet에서는 속성과 그 값을 분리해서 사용하기를 원할 수 있다. 이 분리된 속성을 연결하는 방법이나 CSS에서 리스트에 더 자세한 설정법을 알려면{{ cssxref("list-style") }} 참조 페이지를 확인하라.</p> + <p>만약 HTML같은 관습적인 태그 비순차 리스트 아이템({{ HTMLElement("ul") }})와 순차 리스트 아이템({{ HTMLElement("ol") }})를 제공하는 마크업 언어를 사용한다면, 그 태그를 써서 쉽게 연습 해 볼 수 있다. 어쨌던 CSS써서 {{ HTMLElement("ul") }}를 순차 표시 할수 있고 {{ HTMLElement("ol") }} 를 통해 비순차를 원한다면 표시 할 수도 있다.</p> + <p>브라우저마다 리스트 스타일을 보여주는 자체 방식이 있다. Stylesheet로 모든 브라우저에서 동일하게 보여지는 것을 기대하지는 마라.</p> +</div> +<h3 id="카운터">카운터</h3> +<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;"> + <p><strong>참고: </strong> 일부 브라우저는 카운터를 지원하지 않는다. <a class="external" href="http://www.quirksmode.org/" title="http://www.quirksmode.org/">Quirks Mode site의 </a><a class="external" href="http://www.quirksmode.org/css/contents.html" title="http://www.quirksmode.org/css/contents.html">CSS 내용물과 브라우저 호환성</a> 페이지에 브라우저 호환 차트와 CSS의 다른 기능에 대한 호환성을 확인 할 수 있다. 이 사이트 <a href="/en/CSS_Reference" title="https://developer.mozilla.org/en/CSS_Reference">CSS 참조Reference</a>의 individual page(?)에는 브라우저 호환성 테이블도 확인 할 수 있다.</p> +</div> +<p>리스트 아이템 나열 뿐 아니라 Element를 순위매김 하기 위해 카운터를 사용할 수 있다. 예를 들어, documents내에서 머릿말니아 단락의 순서를 표시 하고 싶을때 사용 가능하다.</p> +<p>순위 매김을 사용하려면 카운터에 이름을 할당하여 사용하면 된다.</p> +<p>element에 순위메김 추가를 시작하기 전에 {{ cssxref("counter-reset") }}속성으로 초기화 하고 사용하고자 하는 카운터 이름을 쓰라. 카운터를 사용하는 elements의 부모에다 초기화 과정을 적용하는 것이 좋다. 그러나, 리스트 아이템 시작하기 전 어느 element에서든 초기화를 사용해도 된다.</p> +<p>카운터가 증가하는 각 element에서, {{ cssxref("counter-increment") }} 속성을 사용하여 증가 하고 증가 하고자 하는 이름도 표시하라.</p> +<p>카운터를 표시하기 위해서는 {{ cssxref(":before") }}나 {{ cssxref(":after") }} 설렉터를 써서 <code>content속성을 사용하여라.</code>(이전 페이지에서, <strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">Content</a></strong>사용에 대해 참고하라).</p> +<p><code>content</code> 속성 값에 <code>counter()카운터 이름과 함께 사용하라.</code> 선택적으로 타입도 명시 가능하다. 타입은 위에서 언급한 <strong>Ordered lists</strong> 섹션에 나온것과 같다.</p> +<p>보통 카운터를 표시하는 element도 하나씩 카운터 값이 증가 한다.</p> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p>이 규칙은 class가 'numbered'인 모든 {{ HTMLElement("h3") }} element의 카운터를 초기화 한다.</p> + <pre class="brush:css">h3.numbered {counter-reset: mynum;} +</pre> + <p> </p> + <p>이 아래 규칙은 모든 'numbered' class의 {{ HTMLELement("p") }} element에 카운터 값을 표시하고 그 값을 증가 시킨다.</p> + <pre class="brush:css">p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold;} +</pre> + <p>결과는 아래와 같다.</p> + <table style="border: 2px outset #36b; padding: .5em 6em .5em 1em; background-color: white;"> + <tbody> + <tr> + <td><strong>Heading</strong><br> + <p><strong>1: </strong>Lorem ipsum</p> + <p><strong>2: </strong>Dolor sit</p> + <p><strong>3: </strong>Amet consectetuer</p> + <p><strong>4: </strong>Magna aliquam</p> + <p><strong>5: </strong>Autem veleum</p> + </td> + </tr> + </tbody> + </table> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + 좀더 자세히</div> + <p>카운터가 지원되지 않는 브라우저에서는 카운터를 사용 할 수 없다.</p> + <p>카운터가 사용 가능하다면 카운터로 리스트아이템에서 지원 되는 것처럼 별도로 다른 내용물에 순위매김을 사용 할 수 있다. 예를 들면 위에서 처럼, 카운터는 굵은 글씨로 그외 아이템은 정상 글씨로 가능하다.</p> + <p>좀더 다양한 방법으로 카운터를 사용 할 수 있는데 —예를 들면, 형식적인 Document의 순서 섹션, 머릿말, 보조 머릿말과 단락등에서 사용 가능하다. 자세한 사항은 CSS사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> 를 확인 하라.</p> +</div> +<h2 id="액션_화려한_리스트">액션: 화려한 리스트</h2> +<p><code>새로이 doc2.html</code>파일을 만들어라. 아래 코드를 복사하라.</p> +<pre class="brush:html;"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document 2</title> + <link rel="stylesheet" href="style2.css"> + </head> + <body> + + <h3 id="oceans">The oceans</h3> + <ul> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + + <h3 class="numbered">Numbered paragraphs</h3> + <p class="numbered">Lorem ipsum</p> + <p class="numbered">Dolor sit</p> + <p class="numbered">Amet consectetuer</p> + <p class="numbered">Magna aliquam</p> + <p class="numbered">Autem veleum</p> + + </body> +</html> +</pre> +<p><code>style2.css</code>를 만들어 아래 내용을 복사하라.</p> +<pre class="brush:css;">/* numbered paragraphs */ +h3.numbered {counter-reset: mynum;} + +p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold; +} +</pre> +<p>배치와 주석이 맘에 들지 않으면 마음대로 변경하라.</p> +<p>브라우저에서 열어보라. 만약 브라우저가 카운터를 지원 한다면 아래 예제와 같이 보일 것이다. 브라우저가 지원하지 않는다면 숫자는 보이지 않을 것이다. (콜론도 보이지 않을 것이다.)</p> +<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Numbered paragraphs</p> + <p><strong>1: </strong>Lorem ipsum</p> + <p><strong>2: </strong>Dolor sit</p> + <p><strong>3: </strong>Amet consectetuer</p> + <p><strong>4: </strong>Magna aliquam</p> + <p><strong>5: </strong>Autem veleum</p> + </td> + </tr> + </tbody> +</table> +<div class="tuto_example"> + <div class="tuto_type"> + 도전</div> + <p>예제 stylesheet에 대양 표시 앞에 로마숫자로 i에서 v까지 나타나도록 추가 해 보라.</p> + <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </td> + </tr> + </tbody> + </table> + <p> </p> + <p>예제 stylesheet를 아래와 같이 대문자가 단락앞에 나오도록 만들어 보라.</p> + <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p> + <p><strong>. . .</strong></p> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p> + <p><strong>. . .</strong></p> + </td> + </tr> + </tbody> + </table> +</div> +<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Lists" title="en/CSS/Getting started/Challenge solutions#Lists">정답 확인.</a></p> +<h2 id="다음에는">다음에는?</h2> +<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Boxes", "상자") }}브라우저에서 예제 Document를 표시할때, element를 페이지에 element 주변으로 공간을 만든다. 다음장에서는 CSS가 어떻게 element아래쪽에 놓인 박스 모양과 동작하는지 설명한다(<a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">boxes</a>.xm).</p> 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 new file mode 100644 index 0000000000..4eeb42cae2 --- /dev/null +++ b/files/ko/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,328 @@ +--- +title: 시작하기 (자바스크립트 튜토리얼) +slug: Web/JavaScript/시작하기 +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +translation_of_original: Web/JavaScript/Getting_Started +--- +<h2 id="Why_JavaScript.3F" name="Why_JavaScript.3F">왜 자바스크립트인가?</h2> +<p>자바스크립트는 종종 오해할 수 있는 강력하고 복잡한 컴퓨터 언어이다. 사용자가 쉽게 데이터를 입력하고 결과를 볼 수 있게 어플리케이션을 빠르게 개발 할 수 있다.</p> +<p> 웹브라우저를 중심으로 또한 ECMAScript로 알려진 자바스크립트의 주요 장점은 이와 같이 브라우저를 지원하는 모든 플랫폼에 동일한 결과를 만들 수 있다. 이 페이지의 예제는 구글 맵스처럼 맥 OS와 윈도우, 리눅스에서 실행한다. 수많은 자바스크립트 라이브러리의 최근 성장과 함께 AJax 어플리케이션을 개발하거나 이벤트 처리하기, 에니메이션 만들기, DOM 엘리먼트 선택하기, 도큐먼트 탐색하기가 이제 더욱 쉬워졌다. 다양한 소유권의 이익에 의해 추진된 다른 기술의 과대 광고와는 달리 자바스크립트는 모두 무료이면서 보편적으로 채택된 클라이언트 사이드 프로그래밍 언어이면서 정말이지 유일한 크로스 플래폼이다.</p> +<h2 id="What_you_should_already_know" name="What_you_should_already_know">당신이 이미 알아야 하는 것</h2> +<p>자바스크립트는 프로그래밍을 같이 시작하기 위해 매우 쉬운 언어이다. 시작하기 위해서 당신이 필요한 모든 것은 텍스트 에디터와 웹브라우저이다. </p> +<p>이 문서의 범위를 벗어나는 자바스크립트와 함께 개발되고 통합 할 수 있는 다른 기술은 많이 있다. 첫날부터 구글맵스과 같이 완전한 어플리케이션을 만들 것이라고 기대하지 마라!</p> +<p>시작하기</p> +<p>자바스크립트로 시작하기는 매우 쉽다. 당신은 복잡한 개발 프로그램 설치가 필요가 없다. 컴파일러를 사용하거나 프로그램 만들기, 쉘을 어떻게 사용하는지 알 필요가 없다. 자바스크립트는 당신의 웹 브라우저에서 해석 된다. 당신이 해야 할 모든 일은 텍스트 파일에 당신의 프로그램을 저장하고 당신의 웹브라우저를 연다. 단지 그 것이다!</p> +<p>자바스크립트는 입문 컴퓨터 언어로서 최고의 프로그래밍 언어이다. 새로운 학생에게 즉시 피드백 할 수 있게 하고 그들이 아마도 그들의 실생활에 유용한 것을 발견할 수 있는 도구들에 관한 것을 그들에게 가르친다. 이것은 전용 소프트웨어 개발자를 위해 정말 유용한 C, C++, JAVA 와는 뚜렷하게 대조적이다. </p> +<h2 id="Browser_Compatibility_Issues" name="Browser_Compatibility_Issues">브라우저 호환성 이슈들</h2> +<p>다른 브라우저에서 사용이 가능한 어떤 기능 중에는 차이가 있다. Mozilla, Chrome, Microsoft IE, Apple Safari, Opera에서 가동하는 것에 따라 변동될 수 있다. 이런 <a href="/en-US/docs/JavaScript/Compatibility">변동사항</a>을 문서화 하려고 한다. 사용 가능한 다양한 크로스 플랫폼 자바스크립트 API 사용하여 이런 이슈들을 완하시킬 수 있다. 이런 API는 공통 기능으로 제공하고 이 브라우저의 변동된 것을 숨긴다. </p> +<h2 id="How_to_try_the_Examples" name="How_to_try_the_Examples">예제를 시도하는 방법</h2> +<p>아래의 예제들은 몇가지 샘플 코드를 가지고 있다. 이 예제들을 시도하는 방법은 여러가지가 있다. 만약 당신이 이미 당신의 웹사이트를 가지고 있다면 당신은 당신의 웹사이트에 새로운 웹 페이지로써 이 예제들을 저장할 수 있어야 한다.</p> +<p>만약 당신이 당신의 웹사이트를 가지고 있지 않다면 당신의 컴퓨터에 파일로써 이 예제들을 저장할 수 있고 당신이 현재 사용하고 있는 웹브라우저를 통해 예제들을 열 수 있다. 자바스크립트는 이런 이유로 시작하려는 프로그래머가 사용하기 매운 쉬운 언어이다. 당신은 컴파일러 또는 개발 환경이 필요하지 않다. 그리고 당신과 당신의 브라우저가 시작하기 위해서 필요한 모든 것이다!</p> +<h2 id="Example:_Catching_a_mouse_click" name="Example:_Catching_a_mouse_click">예제 : 마우스 클릭 잡기</h2> +<p>이벤트 핸들링(이벤트 타입들, 핸들러 등록, 전파 등)의 특성은 이 간단한 예제들을 완전히 적용하기에는 너무 광범위하다. 그런데 이 예제는 자바스크립트 이벤트 시스템에 대한 조금의 탐구도 없이 마우스 클릭을 잡기를 설명할 수 없다. 이 예제는 자바스크립트 이벤트에 관해 전체 자세한 내용을 가볍게 스쳐 지나 갈 것이고 만약 당신이 여기 설명된 기본 기능의 범위를 넘어서고 싶다면 자바스크립트 이벤트 시스템에 관해 더 자세히 읽어야 함을 명심하라.</p> +<p>'마우스'이벤트들은 사용자 동작에 반응한 웹브라우저에 의해 발생된 전체 이벤트의 집합이다.<span style="line-height: 1.5;">다음은 사용자의 마우스 동작에 대한 응답으로 방출되는 이벤트의 목록이다.</span></p> +<ul> + <li>Click - 사용자가 마우스를 클릭했을 때 발생</li> + <li>DblClick - 사용자가 마우스를 더블 클릭했을 때 발생</li> + <li>MouseDown - 사용자가 마우스 버튼을 눌렀을 때 발생(클릭의 전반부)</li> + <li>MouseUp - 사용자가 마우스 버튼을 해제했을 때 발생(클릭의 후반후)</li> + <li>MouseOut - 마우스 포인터가 객체의 그래픽 범위를 떠나려고 할때 발생</li> + <li>MouseOver - 마우스 포인터가 객체의 그래픽 범위를 진입하려고 할때 발생</li> + <li>MouseMove - 마우스 포인터가 객체의 그래픽 범위 안에서 마우스 포인터를 움직이려 할때 발생</li> + <li>ContextMenu - 사용자가 오른쪽 마우스 버튼을 클릭했을 때 발생</li> +</ul> +<p>인라인 이벤트 핸들러, HTML의 최신버전에서 주의할 것은 다시 말하면 하나가 태그 애트리뷰트들로써 추가 되었다는 것은 모두 소문자 이고 스크립트의 이벤트 핸들러가 항상 모든 소문자이어야 하는 것을 예상된다.</p> +<p>이벤트 핸들러를 등록하려는 이러한 이벤트들을 캡처하기 위해 가장 간단한 방법은 HTML을 사용하여 당신의 엘리먼트의 애트리뷰트들로서 개별적인 이벤트들을 지정하는 것이다.</p> +<p>예제:</p> +<pre class="brush:js"> <span onclick="alert('Hello World!');">Click Here</span></pre> +<p>당신이 실행하기 원하는 자바스크립트 코드를 애트리뷰트 값으로서 그때마다 처리할 수 있다. 또는 당신은 HTML 페이지안에 <script> 블록에 정의되어진 함수를 호출 할 수 있다 :</p> +<pre class="brush:js"><script> + function clickHandler() { + alert("Hello, World!"); + } +</script> +<span onclick="clickHandler();">Click Here</span></pre> +<p>또한 발생된 이벤트 객체는 캡처하거나 참조할 수 있으며 <span style="line-height: 1.5;">객체가 이벤트를 받거나 이벤트 타입 그리고 마우스가 클릭됐을 때 그러한 이벤트에 관한 특성을 접근하는 무언가 개발하는 것을 제공할 수 있다. </span><span style="line-height: 1.5;">인라인 예제를 다시 사용 하라:</span></p> +<pre class="brush:js"><script> + function clickHandler(event) { + var eType = event.type; + /* 다음은 호환성을 위한 것이다. */ + /* Moz는 이벤트 객체의 target 프로퍼티로 채운다. */ + /* IE는 <span style="font-size: 1rem;">srcElement 프로퍼티로 채운다.</span><span style="font-size: 1rem;">*/</span> + var eTarget = event.target || event.srcElement; + + alert( "Captured Event (type=" + eType + ", target=" + eTarget ); + } +</script> +<span onclick="clickHandler(event);">Click Here</span></pre> +<p>당신의 HTML안에 이벤트를 수신 등록 이외에 당신은 당신의 자바스크립트에 의해 생성된 어떠한 HTML엘리먼트 객체의 똑같은 이름으로 애트리뷰트들을 마찬가지로 설정할 수 있다. 아래의 예는 span 객체를 인스터트화하고 페이지의 body에 추가하고 mouse-over, mouse-out, mouse-down, mouse-up 이벤트들을 수신하기위해 span 객체를 등록한다. </p> +<pre class="brush:js"><body></body> +<script> + function mouseeventHandler(event) { + /*<span style="font-size: 1rem;">다음은 호환성을 위한 것이다.</span><span style="font-size: 1rem;"> */</span> + /* IE는 기본적으로 이벤트 객체를 전달하지 않는다. */ + if (!event) event = window.event; + + /* 미리 이벤트 타입과 타켓 얻기 */ + var eType = event.type; + var eTarget = event.target || event.srcElement; + alert(eType +' event on element with id: '+ eTarget.id); + } + + function onloadHandler() { + /* 페이지의 body 엘리먼트를 참조하여 얻기 */ + var body = document.body; + /* 클릭되기 위한 span 엘리먼트 생성하기 */ + var span = document.createElement('span'); + span.id = 'ExampleSpan'; + span.appendChild(document.createTextNode ('Click Here!')); + + /* 특정 마우스 이벤트를 받기 위해 spna 객체 등록하기 - 이벤트들의 소문자에 유의하라 그러나 당신이 그것을 치환하기 위한 이름의 선택은 자유다. + */ + span.onmousedown = mouseeventHandler; + span.onmouseup = mouseeventHandler; + span.onmouseover = mouseeventHandler; + span.onmouseout = mouseeventHandler; + + /* 페이지에 span 보여주기 */ + body.appendChild(span); +} + +window.onload = onloadHandler; // 우리가 핸들러를 치환한 이후에는 우리는 함수 이름 뒤에 ()을 붙여서는 안된다. +</script></pre> +<h2 id="Example:_Catching_a_keyboard_event" name="Example:_Catching_a_keyboard_event">예제: 키보드 이벤트 잡기</h2> +<p>위의 예제인 "마우스 이벤트 잡기"와 유사하게 키보드 이벤트 잡기는 자바스크립트 이벤트 시스템 탐험에 의존한다. 키보드 이벤트들은 어떤 키든 키보드에서 사용될 때마다 발생한다.</p> +<p>키보드 동작에 반응하여 방출 가능한 키보드 이벤트 목록들은 마으스로 사용 가능한 것보다 상당히 작다. </p> +<ul> + <li>KeyPress - 키보드를 누르거나 해제할때 발생</li> + <li>KeyDown - 키보드를 눌렀지만 아직 해제 않지 않았을때 발생</li> + <li>KeyUp - 키보드가 해제 되었을때 발생</li> + <li>TextInput (글을 썼던 시점에는 웹킷 브라우저에서만 가능) - 텍스트에 붙여넣기나 말하기를 하거나 또는 키보드로 입력했을 때 발생. 이 이벤트는 이 문서에 포함하지 않을 것이다.</li> +</ul> +<p><a class="new " href="/en-US/docs/DOM/event/keypress" rel="internal">keypress</a> 이벤트는 키를 눌렀을 때의 Unicode값이 keycode나 <a href="/en-US/docs/DOM/event.charCode" rel="internal" style="line-height: 1.5; font-family: 'Courier New', 'Andale Mono', monospace;">charCode</a> 프로퍼티에 둘다 저장되어 있다. 만약 키가 문자로 생성되어 눌러졌을때 (예를 들어 'a') <code style="font-style: normal; line-height: 1.5;">charCode는 문자의 경우를 반영하여 문자의 코드를 설정한다.(즉, charCode은 Shift 키를 누르고 있는지 여부를 고려한다)그렇지 않으면, 누른 키의 코드가 keyCode에 저장된다.</code></p> +<p>키보드 이벤트들을 캡쳐하기 위한 가장 간단한 방법은 당신의 엘리먼트를 애트리뷰트들로써 개별적인 이벤트들을 지정한 HTML안에 이벤트 핸들러들을 다시 저장하는 것이다.</p> +<p>예:</p> +<pre class="brush:js"> <input type="text" onkeypress="alert ('Hello World!');"> +</pre> +<p>마우스 이벤트들과 마찬가지로 당신이 실행하기 원하는 자바스크립트 코드는 그때마다 처리할 수 있다. 또는 당신은 HTML 페이지안에 <script> 블록에 정의되어진 함수를 호출 할 수 있다 :</p> +<pre class="brush:js"><script> + function keypressHandler() { + alert ("Hello, World!"); + } +</script> + +<input onkeypress="keypressHandler();" /> +</pre> +<p>타겟을 참조하거나 이벤트를 캡쳐 하는 것은 (즉, 눌러진 실제 키) 마우스 이벤트를 비슷한 방법으로 이룰 수 있다.</p> +<p> <span style="font-family: 'Courier New', 'Andale Mono', monospace; font-size: 1rem; line-height: 19px; background-color: rgb(246, 246, 242);"><script type="text/javascript"></span></p> +<pre class="brush:js"> function keypressHandler(evt) { + var eType = evt.type; // 이벤트 타입으로써 <span style="font-size: 1rem;">"keypress"를 반환할 것이다.</span></pre> +<pre class="brush:js"> + /* <span style="font-size: 1rem;">여기에 우리는 </span><span style="font-size: 1rem;">which 나 다른 </span><span style="font-size: 1rem;">keyCode로 반환되는 모질라 기반으로 된 브라우저를 크로스 브라우저 방법으로 사용할 필요가 있다. </span><a href="/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator" style="font-size: 1rem;" title="/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator">조건 연산자</a><span style="font-size: 1rem;"> 또는 삼항식이 </span><span style="font-size: 1rem;">좋은 방법이다.</span> + var keyCode = evt.which?evt.which:evt.keyCode; + var eCode = 'keyCode is ' + keyCode; + var eChar = 'charCode is ' + .fromCharCode(keyCode); // 또는 evt.charCode + alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")"); + } +</script> +<input onkeypress="keypressHandler(event);" /></pre> +<p>페이지로 부터 어떤 키 이벤트를 캡처하기 위해서는 문서 레벨에서 이벤트를 등록하거나 함수안에서 처리하여 마칠 수 있다. </p> +<pre class="brush:js"><script> + document.onkeypress = keypressHandler; + document.onkeydown = keypressHandler; + document.onkeyup = keypressHandler; +</script></pre> +<p><span style="line-height: 1.5;">여기에 키 이벤트 처리하기 보여주는 완벽한 예제가 있다.</span></p> +<pre class="brush:js"><!DOCTYPE html> +<html> +<head> + <script> + var metaChar = false; + var exampleKey = 16; + function keyEvent(event) { + var key = event.keyCode || event.which; // alternative to ternary - if there is no keyCode, use which + var keychar = String.fromCharCode(key); + if (key == exampleKey) { + metaChar = true; + } + if (key != exampleKey) { + if (metaChar) { + alert("Combination of metaKey + " + keychar) + metaChar = false; + } else { + alert("Key pressed " + key); + } + } + } + function metaKeyUp(event) { + var key = event.keyCode || event.which; + if (key == exampleKey) { metaChar = false; } + } + </script> +</head> +<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"> + Try pressing any key! +</body> +</html></pre> +<h3 id="브라우저_버그들과_이상한_점">브라우저 버그들과 이상한 점</h3> +<p>키 이벤트를 통해서 사용 가능하게 만들어진 두개의 프로퍼티들은 keycode와 charCode이다. 단순한 용어로 keyCode는 사용자에 의해 눌러진 실제 키보드 키를 의미하는데 반하여 charCode는 키의 ASCII 값을 반환한다. 이 두 값들은 반드시 동일하지 않을 수 있다. 예를 들어 소문자 'a'와 대문자 'A'는 같은 keyCode를 가지고 있다. 왜냐하면 사용자는 같은 키를 누르기 때문이다. 하지만 다른 charCode를 가지는 것은 왜냐하면 결과 문자가 다르기 때문이다.</p> +<p>charCode가 해석되는 브라우저의 방법은 일관되게 적용되는 방법이 아니다. 예를 들어 Internet Explorer 와 Opera는 charCode를 지원하지 않는다. 그런데 그들은 keyCode안에 문자 정보를 준다. onkeypress만 아니라 onkeydown 와 onkeyup의 keyCode가 키 정보를 가지고 있다. Firefox 는 "which", 문자를 구별하기 위해 다른 단어를 사용한다. </p> +<p>더 나아가 키 이벤트들을 다루는 것에 관해서는 <span style="line-height: 1.5;"> </span><a href="/en-US/docs/DOM/Event/UIEvent/KeyboardEvent" style="line-height: 1.5;" title="https://developer.mozilla.org/en-US/docs/DOM/Event/UIEvent/KeyEvent">Keyboard Events</a>에 대한<span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">Mozilla 문서를 참조하시오.</span></p> +<p>{{ draft() }}</p> +<h2 id="Example:_Dragging_images_around" name="Example:_Dragging_images_around">예제: 이미지 주변에 드래그하기</h2> +<p>다음 예제는 페이지 근처의 firefox의 이미지를 이동할 수 있다.</p> +<pre class="brush:js"><!DOCTYPE html> +<html> +<head> +<style> +img { position: absolute; } +</style> + +<script> +window.onload = function() { + + movMeId = document.getElementById("ImgMov"); + movMeId.style.top = "80px"; + movMeId.style.left = "80px"; + + document.onmousedown = coordinates; + document.onmouseup = mouseup; + + function coordinates(e) { + if (e == null) { e = window.event;} + + // <span style="font-size: 1rem;">e.srcElement은 IE에서 타겟 엘리먼트로 가지고 있고 반면 </span><span style="font-size: 1rem;">e.target은 firefox에서 타겟 엘리먼트로 가지고 있다.</span> +// 두 프로퍼티들은 이벤트가 일어난 HTML 엘리먼트를 반환한다. + var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target; + + if (sender.id=="ImgMov") { + mouseover = true; + pleft = parseInt(movMeId.style.left); + ptop = parseInt(movMeId.style.top); + xcoor = e.clientX; + ycoor = e.clientY; + document.onmousemove = moveImage; + return false; + } + return false; + } + + function moveImage(e) { + if (e == null) { e = window.event; } + movMeId.style.left = pleft+e.clientX-xcoor+"px"; + movMeId.style.top = ptop+e.clientY-ycoor+"px"; + return false; + } + + function mouseup(e) { + document.onmousemove = null; + } +} +</script> +</head> + +<body> + <img id="ImgMov" src="http://placehold.it/100x100&text=JS" width="64" height="64"> + <p>Drag and drop around the image in this page.</p> +</body> + +</html></pre> +<h2 id="Example:_Resizing_things" name="Example:_Resizing_things">예제: 크기 조정하기</h2> +<div> + <p>이미지 크기 조정하는 예제(실제 이미지가 크기가 조정되는 것이 아니고, 이미지의 랜더링만 되는 것이다.)</p> + <pre class="brush:js"> <!DOCTYPE html> + <html> + <head> + <style> + #resizeImage { + margin-left: 100px; + } + </style> + <script> + window.onload = function() { + + var resizeId = document.getElementById("resizeImage"); + var resizeStartCoordsX, + resizeStartCoordsY, + resizeEndCoordsX, + resizeEndCoordsY; + + var resizeEndCoords; + var resizing = false; + + document.onmousedown = coordinatesMousedown; + document.onmouseup = coordinatesMouseup; + + function coordinatesMousedown(e) { + if (e == null) { + e = window.event; + } + + var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target; + + if (element.id == "resizeImage") { + resizing = true; + resizeStartCoordsX = e.clientX; + resizeStartCoordsY = e.clientY; + } + return false; + } + + function coordinatesMouseup(e) { + if (e == null) { + e = window.event; + } + + if (resizing === true) { + var currentImageWidth = parseInt(resizeId.width); + var currentImageHeight = parseInt(resizeId.height); + + resizeEndCoordsX = e.clientX; + resizeEndCoordsY = e.clientY; + + resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px'; + resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px'; + + resizing = false; + } + return false; + } + } + </script> + </head> + + <body> + <img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png" +width="64" height="64"> + <p>Click on the image and drag for resizing.</p> + </body> + + </html></pre> +</div> +<h2 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">예제: 라인 그리기</h2> +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> +<script> +function linedraw(ax,ay,bx,by) +{ + if(ay>by) + { + bx=ax+bx; + ax=bx-ax; + bx=bx-ax; + by=ay+by; + ay=by-ay; + by=by-ay; + } + var calc=Math.atan((ay-by)/(bx-ax)); + calc=calc*180/Math.PI; + var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by)); + document.body.innerHTML += "<div id='line' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>" +} +</script> +</head> +<body onload="linedraw(200,400,500,900);"> <!--당신의 좌표 교체하기 --> +</body> +</html></pre> +<p> </p> 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 new file mode 100644 index 0000000000..8a1d0cb625 --- /dev/null +++ b/files/ko/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -0,0 +1,268 @@ +--- +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/conflicting/learn/index.html b/files/ko/conflicting/learn/index.html new file mode 100644 index 0000000000..582bd0d275 --- /dev/null +++ b/files/ko/conflicting/learn/index.html @@ -0,0 +1,22 @@ +--- +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/conflicting/learn/javascript/objects/index.html b/files/ko/conflicting/learn/javascript/objects/index.html new file mode 100644 index 0000000000..03015b1407 --- /dev/null +++ b/files/ko/conflicting/learn/javascript/objects/index.html @@ -0,0 +1,290 @@ +--- +title: 객체지향 자바스크립트 개요 +slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +translation_of: Learn/JavaScript/Objects +translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +--- +<p>비록 다른 객체지향적인 언어들과의 차이점에 대한 논쟁들이 있긴 하지만, JavaScript는 강력한 객체지향 프로그래밍 능력들을 지니고 있다.</p> + +<p>이 글에서는 객체지향 프로그래밍에 대해 소개하는 것으로 시작해서 자바스크립트의 객체 모델, 그리고 자바스크립트에서의 객체지향 프로그래밍 개념에 대해 간단한 예제로 살펴볼 것이다.</p> + +<h2 id="JavaScript_Review" name="JavaScript_Review">자바스크립트 리뷰(JavaScript review)</h2> + +<p>만약 변수, 형, 함수, 스코프 등 자바스크립트의 개념에 대해 명확히 이해하고 있지 못하다면, <a href="/en/JavaScript/A_re-introduction_to_JavaScript" title="en/JavaScript/A_re-introduction_to_JavaScript">A re-introduction to JavaScript</a>를 참고해 보자. <a href="/en/JavaScript/Guide" title="en/JavaScript/Guide">Core JavaScript 1.5 Guide</a>라는 글도 도움이 될 것이다.</p> + +<h2 id="Object-oriented_programming" name="Object-oriented_programming">객체지향 프로그래밍(Object-oriented programming)</h2> + +<p>객체지향 프로그래밍은 실제 세계에 기반한 모델을 만들기 위해 추상화를 사용하는 프로그래밍 패러다임이다. 객체지향 프로그래밍은 modularity, polymorphism, encapsulation을 포함하여 이전에 정립된 패러다임들부터 여러가지 테크닉들을 사용한다. 오늘날 많은 유명한 프로그래밍 언어(자바, 자바스크립트, C#, C++, 파이썬, PHP, 루비, 오브젝트C)는 객체지향 프로그래밍을 지원한다.</p> + +<p>객체지향 프로그래밍은 함수들의 집합 혹은 단순한 컴퓨터의 명령어들의 목록 이라는 기존의 프로그래밍에 대한 전통적인 관점에 반하여, 관계성있는 객체들의 집합이라는 관점으로 접근하는 소프트웨어 디자인으로 볼 수 있다. 객체지향 프로그래밍에서, 각 객체는 메시지를 받을 수도 있고, 데이터를 처리할 수도 있으며, 또다른 객체에게 메시지를 전달할 수도 있다. 각 객체는 별도의 역할이나 책임을 갖는 작은 독립적인 기계로 볼 수 있는 것이다.</p> + +<p>객체지향 프로그래밍은 보다 유연하고 유지보수성이 높은 프로그래밍을 하도록 의도되었고, 대규모 소프트웨어 공학에서 널리 알려져 있다. 객체지향 프로그래밍이 갖는 modularity에 기반한 강력한 힘에 의해, 객체지향적인 코드는 개발을 보다 단순하게 했고, 시간이 흐른 뒤에도 보다 쉽게 이해할 수 있도록 했으며, 복잡한 상황이나 절차들을 덜 모듈화된 프로그래밍 방법들보다 더 직접적으로 분석하고, 코딩하고, 이해할 수 있도록 만들었다.<sup><a href="#Reference">2</a></sup></p> + +<h2 id="Terminology" name="Terminology">용어(Terminology)</h2> + +<dl> + <dt>Class</dt> + <dd>객체의 특성을 정의</dd> + <dt>Object</dt> + <dd>Class의 인스턴스</dd> + <dt>Property</dt> + <dd>객체의 특성(예: 색깔)</dd> + <dt>Method</dt> + <dd>객체의 능력(예: 걷기)</dd> + <dt>Constructor</dt> + <dd>인스턴스화 되는 시점에서 호출되는 메서드</dd> + <dt>Inheritance</dt> + <dd>클래스는 다른 클래스로부터 특성들을 상속받을 수 있다.</dd> + <dt>Encapsulation</dt> + <dd>클래스는 해당 객체의 특성들만을 정의할 수 있고, 메서드는 그 메서드가 어떻게 실행되는지만 정의할 수 있다. (외부 접근 불가)</dd> + <dt>Abstraction</dt> + <dd>복잡한 상속, 메서드, 객체의 속성의 결합은 반드시 현실 세계를 시뮬레이션할 수 있어야 한다.</dd> + <dt>Polymorphism</dt> + <dd>다른 클래스들이 같은 메서드나 속성으로 정의될 수 있다.</dd> +</dl> + +<p>객체지향 프로그래밍에 대한 보다 확장된 설명은 <a class="external" href="http://en.wikipedia.org/wiki/Object_oriented_programming">Object-oriented programming</a>를 참고하면 된다.</p> + +<h2 id="프로토타입기반_프로그래밍(Prototype-based_programming)">프로토타입기반 프로그래밍(Prototype-based programming)</h2> + +<p>프로토타입 기반 프로그래밍은 클래스가 존재하지 않는 객체지향 프로그래밍의 한가지 스타일로, 동작 재사용(behavior reuse, 클래스기반 언어에서는 상속이라고함)은 프로토타입으로서 존재하는 객체를 데코레이팅하는 과정을 통해 수행된다.</p> + +<p>프로토타입 기반 언어의 원형적인 예는 David Ungar과 Randall Smith가 개발한 'Self'라는 프로그래밍 언어이다. 그러나 클래스가 없는 프로그래밍 스타일이 최근 인기를 얻으며 성장하였고, 자바스크립트, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak 등의 언어에서 채택되어 왔다.<sup><a href="#Reference">2</a></sup></p> + +<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming">자바스크립트 객체지향 프로그래밍(JavaScript Object Oriented Programming)</h2> + +<h3 id="Core_Objects" name="Core_Objects">Core Objects</h3> + +<p>자바스크립트는 코어(core)에 몇 개의 객체를 갖고 있다. 예를들면, Math, Object, Array, String과 같은 객체가 있다. 아래의 예제는 Math 객체를 사용해서 무작위 숫자를 만들어내는 것을 보여준다.</p> + +<pre class="brush: js">alert(Math.random()); +</pre> + +<div class="note"><strong>Note:</strong> <span style="color: #333333; line-height: inherit;">여기와 다른 예제들 모두 alert 이라는 함수가 전역에 선언되어 있다고 가정하고 있다. alert 함수는 실제로 자바스크립트 그 자체에 포함되진 않았지만, 대부분의 브라우저에서 지원하고 있다.</span></div> + +<p>자바스크립트의 core object들의 리스트는 <a href="/En/Core_JavaScript_1.5_Reference/Global_Objects" title="En/Core_JavaScript_1.5_Reference/Global_Objects">Core JavaScript 1.5 Reference:Global Objects</a>라는 글을 참고하면 자세히 알 수 있다.</p> + +<p>자바스크립트의 모든 객체는 Object 객체의 인스턴스이므로 Object의 모든 속성과 메서드를 상속받는다.</p> + +<h3 id="Custom_Objects" name="Custom_Objects">Custom Objects</h3> + +<h4 id="The_Class" name="The_Class">The Class</h4> + +<p>class문을 흔하게 볼 수 있는 C++이나 자바와는 달리 자바스크립트는 class문이 포함되지 않은 프로토타입 기반 언어이다. 이로인해 때때로 class 기반 언어에 익숙한 프로그래머들은 혼란을 일으킨다. 자바스크립트에서는 function을 class로서 사용한다. 클래스를 정의하는 것은 function을 정의하는 것만큼 쉽다. 아래 예제에서는 Person이라는 이름의 클래스를 새로 정의하고 있다.</p> + +<pre class="brush: js">function Person() { } +</pre> + +<h4 id="The_Object_.28Class_Instance.29" name="The_Object_.28Class_Instance.29">The Object (Class Instance)</h4> + +<p>obj라는 이름의 객체의 새로운 인스턴스를 만들 때에는 new obj라는 statement를 사용하고, 차후에 접근할 수 있도록 변수에 결과를 받는다.</p> + +<p>아래의 예제에서 Person이라는 이름의 클래스를 정의한 후에, 두 개의 인스턴스를 생성하고 있다.</p> + +<pre class="brush: js">function Person() { } +var person1 = new Person(); +var person2 = new Person(); +</pre> + +<div class="note"><a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> 메서드 역시 새로운 인스턴스를 만들 때 사용할 수 있다.</div> + +<h4 id="The_Constructor" name="The_Constructor">The Constructor</h4> + +<p>생성자는 인스턴스화되는 순간(객체 인스턴스가 생성되는 순간) 호출된다. 생성자는 해당 클래스의 메서드이다. 자바스크립트에서는 함수 자체가 그 객체의 생성자 역할을 하기 때문에 특별히 생성자 메서드를 정의할 필요가 없다. 클래스 안에 선언된 모든 내역은 인스턴스화되는 그 시간에 실행된다. 생성자는 주로 객체의 속성을 설정하거나 사용하기 위해 객체를 준비시키는 메서드를 호출할 때 주로 사용된다. 클래스 메서드를 추가하고 정의하는 것은 나중에 설명한다.</p> + +<div>아래의 예제에서, Person 클래스의 생성자는 Person 이 인스턴스화되었을 때 alert 을 보여주게 된다.</div> + +<pre class="brush: js">function Person() { + alert('Person instantiated'); +} + +var person1 = new Person(); +var person2 = new Person(); +</pre> + +<h4 id="The_Property_.28object_attribute.29" name="The_Property_.28object_attribute.29">The Property (object attribute)</h4> + +<div>속성은 클래스 안에 있는 변수들을 말한다. 객체의 모든 인스턴스는 그 인스턴스의 속성을 갖는다. 속성들의 상속이 바르게 이루어지려면 해당 클래스(function)의 프로토타입에 선언되어 있어야 한다.</div> + +<div> </div> + +<div>클래스 내에서 속성 작업은 현재 객체를 가리키는 this 키워드에 의해 이루어진다. 클래스의 외부에서 속성에 접근(읽기 혹은 쓰기)하는 것은 "인스턴스명.속성명" 의 형식으로 이루어진다. 이러한 문법은 C++, 자바나 다른 수많은 언어에서와 동일한 방식이다. (클래스 내부에서 "this.속성명" 은 해당 속성의 값을 읽거나 쓸 때 주로 사용된다)</div> + +<div> </div> + +<div>아래의 예제에서 Person 클래스에 gender라는 속성을 정의하고 인스턴스화할 때 그 값을 설정한다.</div> + +<pre class="brush: js">function Person(gender) { + this.gender = gender; + alert('Person instantiated'); +} + +var person1 = new Person('Male'); +var person2 = new Person('Female'); + +//display the person1 gender +alert('person1 is a ' + person1.gender); // person1 is a Male +</pre> + +<h4 id="The_methods" name="The_methods">메서드(The methods)</h4> + +<p>메서드는 앞서 살펴본 속성과 같은 방식을 따른다. 차이점이 있다면 메서드는 function이기 때문에 function 형태로 정의된다는 것입니다. 메서드를 호출하는 것은 속성에 접근하는 것과 매우 유사한데 단지 끝에 ()를 추가하면 된다. argument가 있다면 괄호 안에 입력해준다. 메서드를 정의하기 위해서는 클래스의 prototype에 명명된 속성에 함수를 할당하면 된다. 이때 할당된 이름은 해당 객체의 메서드를 호출할 때 사용되는 이름이다.</p> + +<p>아래의 예에서는 Person 클래스에 sayHello()라는 메서드를 정의하고 사용하고 있다.</p> + +<pre class="brush: js">function Person(gender) { + this.gender = gender; + alert('Person instantiated'); +} + +Person.prototype.sayHello = function() +{ + alert ('hello'); +}; + +var person1 = new Person('Male'); +var person2 = new Person('Female'); + +// call the Person sayHello method. +person1.sayHello(); // hello +</pre> + +<p>자바스크립트에서 메서드는 "컨텍스트에 관계 없이" 호출될 수 있는 속성으로서 클래스/객체에 연결되어 있다. 다음 예제의 코드를 살펴보자.</p> + +<pre class="brush: js">function Person(gender) { + this.gender = gender; +} + +Person.prototype.sayGender = function() +{ + alert(this.gender); +}; + +var person1 = new Person('Male'); +var genderTeller = person1.sayGender; + +person1.sayGender(); // alerts 'Male' +genderTeller(); // alerts undefined +alert(genderTeller === person1.sayGender); // alerts true +alert(genderTeller === Person.prototype.sayGender); // alerts true +</pre> + +<p>위의 예제는 많은 개념들을 한꺼번에 보여주고 있다. </p> + +<div>먼저 이 예제는 자바스크립트에 "per-object methods" 가 존재하지 않는다는 것을 보여준다. JavaScript는 메서드에 대한 레퍼런스가 모두 똑같은 (프로토타입에 처음 정의한) 함수를 참조하고 있기 때문이다.</div> + +<div> </div> + +<div>자바스크립트는 어떤 객체의 메서드로서 함수가 호출될 때 현재 "객체의 컨텍스트"를 특별한 "this" 변수에 "연결한다". 이는 아래와 같이 function 객체의 call 메서드를 호출하는 것과 동일하다.</div> + +<div> </div> + +<div>(역자주: 참고로, genderTeller() 만 호출했을 때 undefined 가 나타난 것은 해당 메서드가 호출될 때 컨텍스트가 window 로 잡혔기 때문에 window.gender 는 존재하지 않으므로 undefined 가 나타난 것이다.)</div> + +<div> </div> + +<pre class="brush: js">genderTeller.call(person1); //alerts 'Male' +</pre> + +<div class="note">더 자세한 것은 <a href="/en/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">Function.call</a> 과 <a href="/en/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">Function.apply</a> 를 참고하자.</div> + +<h4 id="Inheritance" name="Inheritance">상속(Inheritance)</h4> + +<p>상속은 하나 이상의 클래스를 특별한 버전의 클래스로 생성하는 하나의 방법이다. (다만 자바스크립트는 오직 하나의 클래스를 상속받는 것만 지원한다.) 이 특별한 클래스는 흔히 자식 클래스(child)라고 불리우고 원본 클래스는 흔히 부모 클래스(parent)라고 불리운다. 자바스크립트에서는 부모 클래스의 인스턴스를 자식 클래스에 할당함으로써 상속이 이루어진다. 최신 브라우저에서는 <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create">Object.create</a> 메서드를 사용해서 상속을 수행할 수도 있다.</p> + +<div class="note"> +<p><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/prototype">Core JavaScript 1.5 Reference:Global Objects:Object:prototype</a> 에 나와있는 설명과 같이 자바스크립트는 자식 클래스의 prototype.constructor 를 검색하지 않으므로 직접 명시해주어야 한다.</p> +</div> + +<p>아래의 예제에서는, Student라는 클래스를 Person 클래스의 자식 클래스로 정의한다. 그 후에 우리는 sayHello() 메서드를 재정의하고 sayGoodBye() 메서드를 추가한다.</p> + +<pre class="brush: js">// define the Person Class +function Person() {} + +Person.prototype.walk = function(){ + alert ('I am walking!'); +}; +Person.prototype.sayHello = function(){ + alert ('hello'); +}; + +// define the Student class +function Student() { + // Call the parent constructor + Person.call(this); +} + +// inherit Person +Student.prototype = new Person(); + +// correct the constructor pointer because it points to Person +Student.prototype.constructor = Student; + +// replace the sayHello method +Student.prototype.sayHello = function(){ + alert('hi, I am a student'); +} + +// add sayGoodBye method +Student.prototype.sayGoodBye = function(){ + alert('goodBye'); +} + +var student1 = new Student(); +student1.sayHello(); +student1.walk(); +student1.sayGoodBye(); + +// check inheritance +alert(student1 instanceof Person); // true +alert(student1 instanceof Student); // true +</pre> + +<p>Object.create 를 사용하면 상속을 아래와 같이 수행할 수 있다.</p> + +<pre class="brush: js">Student<code class="js plain">.prototype = Object.create(</code>Person<code class="js plain">.prototype);</code></pre> + +<h4 id="Encapsulation" name="Encapsulation">캡슐화(Encapsulation)</h4> + +<p>이전의 예제에서, Student 클래스는 Person 클래스의 walk() 메서드가 어떻게 실행되는지에 대해 알 필요가 없고, walk() 메서드를 사용하는데에도 전혀 문제가 없다. 또 Student 클래스에서는 walk() 메서드의 내용을 바꾸려는게 아니라면 walk() 메서드를 특별히 정의할 필요도 없다. 자식 클래스는 부모 클래스의 모든 메서드를 상속받고, 상속받은 메서드중 일부를 수정하고 싶은 경우에만 해당 메서드를 정의하는 것을 우리는 캡슐화(encapsulation)이라고 부른다.</p> + +<h4 id="Abstraction" name="Abstraction">추상화(Abstraction)</h4> + +<p>추상화는 작업 문제의 현재 부분을 모델링할 수 있도록 하는 매커니즘이다. 추상화는 상속(specialization, 추상의 수준을 낮추는 것)과 합성으로 구현할 수 있다. 자바스크립트는 상속에 의해 특별화(specialization)를, 클래스들의 인스턴스를 다른 객체의 속성값이 되게 함으로써 합성을 구현한다.</p> + +<p>자바스크립트 Function 클래스는 Object 클래스를 상속받고(이는 모델의 특별화를 보여준다), Function.prototype 속성은 Object의 인스턴스이다(이는 합성을 보여준다).</p> + +<pre class="brush: js">var foo = function(){}; +alert( 'foo is a Function: ' + (foo instanceof Function) ); +alert( 'foo.prototype is an Object: ' + (foo.prototype instanceof Object) ); +</pre> + +<h4 id="Polymorphism" name="Polymorphism">다형성(Polymorphism)</h4> + +<p>모든 메서드와 속성들은 prototype 속성에 선언되어 있고, 클래스가 다르다면 같은 이름의 메서드도 선언할 수 있다. 메서드들은 메서드가 선언된 클래스로 그 실행 영역이 한정된다. 물론 이건 두 개의 클래스들이 서로 부모-자식 관계가 아닐때에만 성립한다. 즉 다시 말해 부모-자식 관계의 상속 관계로 하나가 다른 하나에게서 상속받지 않았을 때에만 성립한다.</p> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>객체지향 프로그래밍을 구현하는데 있어서 자바스크립트는 매우 유연하기 때문에, 이 글에서 선보인 테크닉들은 자바스크립트에서 객체지향을 구현하는 유일한 방법들 중 일부일 뿐이다.</p> + +<p>또, 여기에서 선보인 테크닉들은 어떤 hack도 사용하지 않았고 또한 다른 언어의 객체 이론 구현물들을 모방하지도 않았다.</p> + +<p>자바스크립트의 객체지향 프로그래밍에 있어서 다른 보다 깊이있는 테크닉들이 많이 있지만, 소개하는 글이라는 이 글의 특성상 다루지 않기로 한다.</p> + +<h2 id="References" name="References">References</h2> + +<ol> + <li>Mozilla. "Core JavaScript 1.5 Guide", http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide</li> + <li>Wikipedia. "Object-oriented programming", <a class="external" href="http://en.wikipedia.org/wiki/Object-oriented_programming" rel="freelink">http://en.wikipedia.org/wiki/Object-...ed_programming</a></li> +</ol> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author(s): Fernando Trasviña <f_trasvina at hotmail dot com></li> + <li>Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li> +</ul> +</div> + +<p> </p> diff --git a/files/ko/conflicting/mdn/tools/index.html b/files/ko/conflicting/mdn/tools/index.html new file mode 100644 index 0000000000..eec139e803 --- /dev/null +++ b/files/ko/conflicting/mdn/tools/index.html @@ -0,0 +1,12 @@ +--- +title: MDN 사용자 가이드 +slug: MDN/User_guide +tags: + - 모질라 개발자 네트워크 + - 사용자 가이드 +translation_of: MDN/Tools +translation_of_original: MDN/User_guide +--- +<div>{{MDNSidebar}}</div><p>모질라 개발자 네트워크 (이하 MDN) 사이트는, (파이어폭스 및 파이어폭스 운영체제 개발자 뿐 아니라) 웹 개발자를 위한 문서 및 샘플 코드를 찾고, 읽고, 기여하는 고급 시스템입니다. MDN 사용자 가이드는 필요한 문서를 찾도록 MDN을 이용하는 방법을, 원한다면 좀 더 좋은, 더 광범위하고, 더 완전한 자료를 만들도록 돕는 방법을 열거하는 항목을 제공합니다.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/ko/conflicting/mozilla/add-ons/index.html b/files/ko/conflicting/mozilla/add-ons/index.html new file mode 100644 index 0000000000..133e0f8341 --- /dev/null +++ b/files/ko/conflicting/mozilla/add-ons/index.html @@ -0,0 +1,241 @@ +--- +title: Building an Extension +slug: Building_an_Extension +tags: + - Add-ons + - Extensions +translation_of: Mozilla/Add-ons +translation_of_original: Building_an_Extension +--- +<h2 id=".EB.A8.B8.EB.A6.AC.EB.A7.90" name=".EB.A8.B8.EB.A6.AC.EB.A7.90">시작하기</h2> +<p><a class="link-https" href="https://addons.mozilla.org/en-US/developers/tools/builder" title="https://addons.mozilla.org/en-US/developers/tools/builder">확장기능 마법사</a>를 이용해서 웹으로 간단한 확장기능을 만들 수 있습니다.</p> +<p>MozillaZine Knowledge Base에는 확장기능 마법사를 이용해 만들 수 있는 것과 비슷한 <a class="external" href="http://mozilla.doslash.org/stuff/helloworld.zip" title="http://mozilla.doslash.org/stuff/helloworld.zip">Hello World 확장기능</a>에 대해 한 줄 한 줄 설명한 <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development" title="http://kb.mozillazine.org/Getting_started_with_extension_development">다른 글</a>도 있습니다.</p> +<h2 id=".EB.A8.B8.EB.A6.AC.EB.A7.90" name=".EB.A8.B8.EB.A6.AC.EB.A7.90">소개</h2> +<p>이 입문서는 여러분을 아주 간단한 <a href="/ko/docs/Extensions" title="Extensions">확장기능</a>(Firefox 브라우저에 텍스트 "Hello, World!"를 담고 있는 상태 표시줄 패널을 추가하는)을 만드는 데 필요한 과정 속으로 안내합니다.</p> +<div class="note"> + <p><strong>주의</strong> 이 입문서는 Firefox 1.5 이상 버전의 확장기능 만들기에 관한 내용입니다. 이전 버전 Firefox용 확장기능 만들기를 다루는 입문서도 있습니다.</p> + <p>썬더버드용 확장기능을 만드는 방법에 대한 입문서는 <a href="/en/Extensions/Thunderbird/Building_a_Thunderbird_extension" title="en/Extensions/Thunderbird/Building a Thunderbird extension">Building a Thunderbird extension</a>에서 보실 수 있습니다.</p> +</div> +<h2 id=".EA.B0.9C.EB.B0.9C_.ED.99.98.EA.B2.BD_.EA.B5.AC.EC.B6.95.ED.95.98.EA.B8.B0" name=".EA.B0.9C.EB.B0.9C_.ED.99.98.EA.B2.BD_.EA.B5.AC.EC.B6.95.ED.95.98.EA.B8.B0">개발 환경 구축하기</h2> +<p>확장기능은 파일 확장자가 <code>xpi</code> (<em>“zippy”로 소리 냄</em>)인 ZIP 파일이나 묶음(<a href="/ko/docs/Bundles" title="Bundles">Bundles</a>)으로 배포됩니다.</p> +<p>XPI 파일 안 구조의 예 :</p> +<pre>extension.xpi: + /<a href="/ko/docs/install.rdf" title="install.rdf">install.rdf</a> + <a href="#XPCOM_Components">/components/*</a> + <a href="#Application_Command_Line">/components/cmdline.js</a> + <a href="#Defaults_Files">/defaults/</a> + <a href="#Defaults_Files">/defaults/preferences/*.js</a> + /plugins/* + /<a href="/ko/docs/Chrome.manifest" title="Chrome.manifest">chrome.manifest</a> + /<a href="/ko/docs/Chrome_window_icons" title="Chrome_window_icons">chrome/icons/default/*</a> + /chrome/ + /chrome/content/ + +</pre> +<p>이 글에서도 위와 비슷한 파일 구조를 만들 것입니다. 그러면 이제 하드디스크 어디든지(예컨대, <code style="color: inherit; font-weight: inherit;">C:\extensions\myExtension\</code>이나 <code style="color: inherit; font-weight: inherit;">~/extensions/my_extension/</code>) 확장기능을 위한 폴더를 만들고, 이 폴더 안에 <code style="color: inherit; font-weight: inherit;">chrome</code> 폴더를 만들고, <code style="color: inherit; font-weight: inherit;">chrome</code> 폴더 안에 <code style="color: inherit; font-weight: inherit;">content</code> 폴더를 만드세요.</p> +<p>확장기능 폴더 <strong>루트</strong> 안에, <code>chrome</code> 폴더와 나란히, 빈 텍스트 파일 두 개를 새로 만드세요. 하나는 <code>chrome.manifest</code> 그리고 다른 하나는 <code>install.rdf</code>입니다. 그리고, <strong>chrome/content</strong> 폴더 안에 sample.xul이라는 빈 텍스트 파일을 하나 만드세요.</p> +<p>만들어진 폴더 구조 :</p> +<pre><ext path>\ + install.rdf + chrome.manifest + chrome\ + content\ + sample.xul +</pre> +<h2 id="Install_Manifest_.EB.A7.8C.EB.93.A4.EA.B8.B0" name="Install_Manifest_.EB.A7.8C.EB.93.A4.EA.B8.B0">Install Manifest 만들기</h2> +<p>확장기능 폴더 계층(hierarchy) 상단에 여러분이 만든 <code><a href="/ko/docs/Install_Manifests" title="Install_Manifests">install.rdf</a></code> 파일을 열어 안에 다음을 써넣으세요.</p> +<pre><?xml version="1.0"?> + +<RDF xmlns="<span class="nowiki">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span>" + xmlns:em="<span class="nowiki">http://www.mozilla.org/2004/em-rdf#</span>"> + + <Description about="urn:mozilla:install-manifest"> + <em:id><strong><a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a></strong></em:id> + <em:version><strong>1.0</strong></em:version> + <em:type>2</em:type> + + <!-- Target Application this extension can install into, + with minimum and maximum supported versions. --> + <em:targetApplication> + <Description> + <em:id><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong></em:id> + <em:minVersion><strong>1.5+</strong></em:minVersion> + <em:maxVersion><strong>2.0.0.*</strong></em:maxVersion> + </Description> + </em:targetApplication> + + <!-- Front End MetaData --> + <em:name><strong>Sample!</strong></em:name> + <em:description><strong>A test extension</strong></em:description> + <em:creator><strong>Your Name Here</strong></em:creator> + <em:homepageURL><strong><span class="nowiki">http://www.foo.com/</span></strong></em:homepageURL> + </Description> +</RDF> +</pre> +<ul> + <li><strong><a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a></strong> - 확장기능 ID. 이는 email 주소 형식(<em>여러분의</em> email이 아니어야 함을 주의하세요)으로 확장기능을 식별하는 여러분이 짠 어떤 값입니다. 유일하게 만드세요. GUID를 쓸 수도 있습니다.</li> + <li><code><em:type>2</em:type></code>로 지정 -- 2는 확장기능을 설치함을 선언합니다. 테마를 설치하는 경우에는 4입니다(다른 형 코드는 <a href="/ko/docs/Install_Manifests#type" title="Install_Manifests#type">Install Manifests#type</a>를 보세요).</li> + <li><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong> - Firefox 응용프로그램 ID.</li> + <li><strong>1.5</strong> - 이 확장기능이 작동하는 Firefox의 최소(minimum)판. 이를 여러분이 시험하고 버그를 고치려는 최소판으로 설정하세요.</li> + <li><strong>2.0.0.*</strong> - 이 확장기능이 작동하는 Firefox의 최대(maximum)판. 현재 이용가능한 최신판보다 더 최신판으로 설정하지 마세요! 위 경우에, "2.0.0.*"은 확장기능이 Firefox 2.0.0.0에서 2.0.0.x 판까지 작동함을 나타냅니다.</li> +</ul> +<p>최신 Firefox 1.5.0.x에서 작동하도록 디자인된 확장기능은 최대판을 "1.5.0.*"로 설정해야 합니다. 완전한 필수와 선택 프로퍼티 목록은 <a href="/ko/docs/Install_Manifests" title="Install_Manifests">Install Manifests</a>를 보세요.</p> +<p>파일을 저장하세요.</p> +<h2 id="XUL.EB.A1.9C_.EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80_.ED.99.95.EC.9E.A5.ED.95.98.EA.B8.B0" name="XUL.EB.A1.9C_.EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80_.ED.99.95.EC.9E.A5.ED.95.98.EA.B8.B0">XUL로 브라우저 확장하기</h2> +<p>Firefox의 사용자 인터페이스는 XUL과 JavaScript로 작성됩니다. <a href="/ko/docs/XUL" title="XUL">XUL</a>은 button, menu, toolbar, tree 등과 같은 사용자 인터페이스 위젯을 제공하는 XML 문법입니다. 사용자 동작은 JavaScript로 작동됩니다.</p> +<p>브라우저를 확장하기 위해, 우리는 위젯을 추가하거나 수정하여 브라우저의 UI 부분을 수정합니다. 브라우저 창에 새 XUL DOM 요소를 삽입하여 위젯을 추가하고 스크립트 쓰고 이벤트 처리기(handler)를 붙여 위젯을 수정합니다.</p> +<p>브라우저는 <code>browser.xul</code>(<code>$FIREFOX_INSTALL_DIR/chrome/browser.jar</code>가 <code>content/browser/browser.xul</code>를 포함합니다)로 구현됩니다. browser.xul에서 아래처럼 보이는 상태 표시줄을 찾을 수 있습니다.</p> +<pre><statusbar id="status-bar"> + ... <statusbarpanel>s ... +</statusbar> +</pre> +<p><code><statusbar id="status-bar"></code>는 XUL Overlay를 위한 "병합점(merge point)"입니다.</p> +<h3 id="XUL_Overlay" name="XUL_Overlay">XUL Overlay</h3> +<p><a href="/ko/docs/XUL_Overlays" title="XUL_Overlays">XUL Overlays</a>는 실행 시간(run time)에 XUL 문서에 다른 UI 위젯을 붙이는 한 가지 방법입니다. XUL Overlay는 "주(master)" 문서 안에서 특정 병합점에 삽입되는 XUL 조각(fragment)을 지정하는 .xul 파일입니다. 이 조각은 삽입, 제거, 수정되는 위젯을 지정하기도 합니다.</p> +<p><strong>XUL Overlay 문서 예</strong></p> +<pre><?xml version="1.0"?> +<overlay id="sample" + xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> + <statusbar id="<strong>status-bar</strong>"> + <statusbarpanel id="my-panel" label="Hello, World"/> + </statusbar> +</overlay> +</pre> +<p><code><strong>status-bar</strong></code>로 불리는 <code><statusbar></code>는 우리가 붙쳤으면 하는 브라우저 창 안 "병합점"을 지정합니다.</p> +<p><code><statusbarpanel></code> 자식은 병합점 안에서 삽입하고 싶은 새 위젯입니다.</p> +<p>위에 있는 이 sample 코드를 취해 여러분이 만든 <code>chrome/content</code> 폴더 안에 <code><strong>sample.xul</strong></code> 파일로 저장하세요.</p> +<p>위젯 병합과 Overlay를 쓴 사용자 인터페이스 수정에 관한 더 많은 정보는, 아래를 보세요.</p> +<h2 id="Chrome_URI" name="Chrome_URI">Chrome URI</h2> +<p>XUL 파일은 "<a href="/ko/docs/Chrome_Registration" title="Chrome_Registration">Chrome Packages</a>"(<code>chrome://</code> URI를 거쳐 로드되는 사용자 인터페이스 컴포넌트 묶음)의 부분입니다. <code>file://</code> URI(시스템 위에서 Firefox 위치가 플랫폼과 시스템마다 바뀌기도 하기 때문에)를 써서 디스크에서 브라우저로 로드하기보다는, Mozilla 개발자들은 설치된 응용프로그램이 알고 있는 XUL content에 이르는 URI를 만드는 해결책을 냈습니다.</p> +<p>브라우저 창은 <code><a class="external" rel="freelink">chrome://browser/content/browser.xul</a></code>입니다. Firefox의 location bar에 이 URL을 쳐 보세요!</p> +<p>Chrome URI는 여러 컴포넌트로 구성되어 있습니다.</p> +<ul> + <li>첫째로, <strong>URI scheme</strong> (<code>chrome</code>)은 Firefox 네트워킹 라이브러리에 이것이 Chrome URI임을 알립니다. URI content가 (<code>chrome</code>)으로 처리되어야 함을 나타냅니다. Firefox가 URI를 웹 페이지로 다루도록 하는 (<code>chrome</code>)과 (<code>http</code>)를 비교하세요.</li> + <li>둘째로, 패키지 이름(위 예에서는, <code><strong>browser</strong></code>)은 사용자 인터페이스 컴포넌트 묶음을 식별합니다. 이는 확장기능 사이의 충돌을 피하기 위해 가능하면 응용프로그램에 유일하면 좋습니다.</li> + <li>셋째로, 요청되는 데이터 형. 세 가지 형이 있습니다. <code>content</code> (응용프로그램 UI의 구조(structure)와 behavior를 구성하는 XUL, JavaScript, XBL 바인딩 등.), <code>locale</code> (UI의 <a href="/ko/docs/Localization" title="Localization">지역화</a>를 위한 문자열을 담고 있는 DTD, .properties 파일 등), <code>skin</code>(UI의 <a href="/ko/docs/Theme" title="Theme">테마</a>를 구성하는 CSS와 이미지)</li> + <li>끝으로, 로드하는 파일의 경로.</li> +</ul> +<p>그러므로, <code><a class="external" rel="freelink">chrome://foo/skin/bar.png</a></code>는 <code>foo</code> 테마의 <code>skin</code> section에서 <code>bar.png</code> 파일을 로드합니다.</p> +<p>Chrome URI를 써서 content를 로드할 때, Firefox는 이 URI를 디스크(나 JAR 패키지)의 실제 원본 파일로 번역하기 위해 Chrome 레지스트리를 씁니다.</p> +<h2 id="Chrome_Manifest_.EB.A7.8C.EB.93.A4.EA.B8.B0" name="Chrome_Manifest_.EB.A7.8C.EB.93.A4.EA.B8.B0">Chrome Manifest 만들기</h2> +<p>Chrome Manifest와 지원하는 프로퍼티에 관한 더 많은 정보는, <a href="/ko/docs/Chrome_Manifest" title="Chrome_Manifest">Chrome Manifest</a> 참고 문서를 보세요.</p> +<p>확장기능 원본 폴더 계층의 루트에 <code>chrome</code> 디렉토리와 나란히 만든 <code><strong>chrome.manifest</strong></code> 파일을 여세요.</p> +<p>이 코드를 추가하세요.</p> +<pre>content sample chrome/content/ +</pre> +<p>(<strong>끝에 "<code>/</code>"를 잊지 마세요!</strong> 빠트리면, 확장기능이 로드되지 않습니다.)</p> +<p>주의: Firefox/Thunderbird 1.5가 mixed/camel case를 지원하지 않기 때문에 패키지 이름("sample")에 모두 소문자를 씀을 확인하세요. 2.0과 이전버전에서 대소문자를 섞어쓰는 기능을 지원하지 않습니다. {{ Bug(132183) }}</p> +<p>이는 다음을 지정합니다.</p> +<ol> + <li>chrome 패키지 안에 material 형</li> + <li>chrome 패키지 이름</li> + <li>chrome 패키지 파일의 위치</li> +</ol> +<p>그래서, 이 줄은 chrome 패키지 <strong>sample</strong>의 경우, <code>chrome.manifest</code> 위치와 상대 경로인 <code>chrome/content</code> 위치에서 우리가 패키지의 <strong>content</strong> 파일을 찾을 수 있음을 말합니다.</p> +<p>content, locale, skin 파일은 여러분의 <code>chrome</code> 하위디렉토리 안 content, locale, skin 폴더 안에 놓여야 함을 주의하세요.</p> +<p>파일을 저장하세요. 여러분의 확장기능이 깔린 Firefox를 띄우면, (이 입문서에서 뒤에), 이 줄이 chrome 패키지를 등록합니다.</p> +<h2 id="Overlay_.EB.93.B1.EB.A1.9D" name="Overlay_.EB.93.B1.EB.A1.9D">Overlay 등록</h2> +<p>브라우저를 표시할 때마다 Firefox가 여러분의 overlay를 브라우저 창에 병합할 필요가 있습니다. 그래서 <code>chrome.manifest</code> 파일에 이 줄을 추가하세요:</p> +<pre>overlay <a class="external" rel="freelink">chrome://browser/content/browser.xul</a> <a class="external" rel="freelink">chrome://sample/content/sample.xul</a> +</pre> +<p>이 줄은 Firefox에게 <code>browser.xul</code>을 로드할 때 <code>browser.xul</code> 안에 <code>sample.xul</code>을 병합하도록 합니다.</p> +<h2 id=".EC.8B.9C.ED.97.98" name=".EC.8B.9C.ED.97.98">시험</h2> +<p>먼저, 우리는 Firefox에 확장기능 정보 알림이 필요합니다. 예전 좋지 않은 Firefox 1.0 때는 이는 확장기능을 XPI로 패키징하고 그것을 사용자 인터페이스를 거쳐 설치함을 뜻합니다. 그것은 실로 고통이었습니다. 이제는, 훨씬 더 간단합니다.</p> +<ol> + <li><a class="external" href="http://kb.mozillazine.org/Profile_folder">Profile 폴더</a>를 여세요.</li> + <li><strong>extensions</strong> 폴더를 여세요(없으면 만드세요).</li> + <li>새 텍스트 파일을 만들어, 그 안에 extension 폴더(예컨대, <code>C:\extensions\myExtension\</code>이나 <code>~/extensions/myExtension</code>)를 써넣으세요. 확장기능 id를 이름(예컨대, <code><a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a></code>)으로 갖는 파일로 저장하세요.</li> +</ol> +<p>이제 확장기능을 시험할 준비가 됐습니다!</p> +<p>Firefox를 시작하세요. Firefox가 확장기능 디렉토리 텍스트 링크를 감지하고 확장기능을 설치합니다. 브라우저 창이 보이면 여러분은 상태 표시줄 패널의 오른쪽에 텍스트 "Hello, World!"를 봅니다.</p> +<p>이제 돌아가서 .xul 파일에 변화를 주고, Firefox를 닫고 재시작하면 그 변화가 보입니다. <span class="comment">These don't actually match the described extension and confuse people. -Nickolay CENTER> Image:Helloworld_tools_menu.PNG Image:Helloworld_extensions_wnd.PNG </CENTER</span></p> +<h2 id="Package" name="Package">Package</h2> +<p>이제 여러분의 확장기능이 동작하므로, 배치(deployment)와 설치를 위해 그것을 <a href="/ko/docs/Extension_Packaging" title="Extension_Packaging">패키지</a>할 수 있습니다.</p> +<p>여러분의 확장기능 폴더 <strong>내용들</strong>을 Zip 파일로 압축하고 (확장기능 폴더 자체가 아닙니다.) zip 파일 확장자를 .xpi 로 바꾸세요. Windows XP에서는, 여러분의 확장기능 폴더 안 모든 파일과 하위폴더를 고르고 오른쪽 버튼을 누른 뒤 "보내기 -> Compressed (Zipped) Folder"를 골라 이를 쉽게 할 수 있습니다. .zip 파일은 여러분을 위해 만듭니다. 바로 이름을 바꾸면 끝납니다!</p> +<p>Mac OS X에서는, 확장기능 폴더의 <strong>내용들</strong> 위에서 오른쪽 버튼을 누른 뒤 zip 파일로 만들기 위해 "Create Archive of..."를 고를 수 있습니다. 그러나, Mac OS X가 파일 metadata를 추적(track)할 목적으로 숨김 파일을 폴더에 추가하기 때문에, 터미널을 쓰고 숨김 파일(의 이름은 마침표로 시작합니다)을 지워야 합니다. 그리고 나서 zip 파일을 만들기 위해 명령줄에서 <code>zip</code> 명령을 쓰세요.</p> +<p>Linux에서도, 역시 명령줄 Zip 도구를 씁니다.</p> +<p>혹시 여러분이 'Extension Builder' 확장기능을 설치했으면 여러분을 위해 .xpi 파일을 compile할 수 있습니다(도구 -> Extension Developer -> Extension Builder). 단지 여러분의 확장기능(install.rdf 등)이 있는 디렉토리를 탐색하고 Build Extension button을 누르세요. 이 확장기능에 개발을 더 쉽게 하는 많은 도구가 있습니다.</p> +<p>이제 여러분의 서버에 .xpi 파일을 올려주고(upload), <code>application/x-xpinstall</code>로 다뤄지는지 확인하세요. 여러분은 그 파일에 링크할 수 있고 사람들이 내려받고(download) Firefox에 설치하게 할 수 있습니다. .xpi 파일을 시험할 목적으로 우리는 단지 Tools -> Extensions이나 Add-Ons -> Extensions in FireFox 2을 거쳐 확장기능 창 안에 그것을 끌어다 놓을 수 있습니다.</p> +<h3 id="addons.mozilla.org_.EC.9D.B4.EC.9A.A9.ED.95.98.EA.B8.B0" name="addons.mozilla.org_.EC.9D.B4.EC.9A.A9.ED.95.98.EA.B8.B0">addons.mozilla.org 이용하기</h3> +<p>Mozilla Update는 공짜로 확장기능을 host할 수 있는 배포 사이트입니다. 여러분의 확장기능은 비록 매우 유명해지더라도 내려받기를 보장하는 Mozilla의 mirror 네트워크에 host됩니다. Mozilla 사이트는 또한 사용자에게 더 쉬운 설치를 제공하고 여러분이 새 버전을 올려주면 기존 버전 사용자들이 자동으로 이용할 수 있게 합니다. 게다가 Mozilla Update는 사용자들이 여러분의 확장기능에 평(comment)을 하고 feedback을 제공하게 합니다. 여러분이 확장기능을 배포하는 데 Mozilla Update 사용을 강력히 권고합니다!</p> +<p><a class="external" href="http://addons.mozilla.org/developers/" rel="freelink">http://addons.mozilla.org/developers/</a> 에 방문하여 계정을 만든 뒤 확장기능 배포를 시작하세요!</p> +<p><em>주의:</em> 여러분의 확장기능은 좋은 설명과 확장기능 실행 스크린샷(screenshot)이 있으면 더 빨리 퍼지고 더 많이 내려받습니다.</p> +<h3 id="Windows_.EB.A0.88.EC.A7.80.EC.8A.A4.ED.8A.B8.EB.A6.AC.EC.97.90_.ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.EB.93.B1.EB.A1.9D.ED.95.98.EA.B8.B0" name="Windows_.EB.A0.88.EC.A7.80.EC.8A.A4.ED.8A.B8.EB.A6.AC.EC.97.90_.ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.EB.93.B1.EB.A1.9D.ED.95.98.EA.B8.B0">Windows 레지스트리에 확장기능 등록하기</h3> +<p>Windows에서, 확장기능 정보는 레지스트리에 추가될 수 있고 확장기능은 응용프로그램이 시작하는 다음 번에는 자동으로 pick up됩니다. 이는 응용프로그램 설치프로그램이 쉽게 integration hook을 확장기능에 추가하게 합니다. 더 많은 정보는 <a href="/ko/docs/Adding_Extensions_using_the_Windows_Registry" title="Adding_Extensions_using_the_Windows_Registry">Windows 레지스트리를 써서 확장기능 추가하기</a>를 보세요.</p> +<h2 id="XUL_Overlay_.EB.8D.94_.EB.A7.8E.EC.9D.80_.EC.A0.95.EB.B3.B4" name="XUL_Overlay_.EB.8D.94_.EB.A7.8E.EC.9D.80_.EC.A0.95.EB.B3.B4">XUL Overlay 더 많은 정보</h2> +<p>병합점에 UI 위젯 추가 외에 또, Overlay 안에 XUL 조각을 다음에 쓸 수 있습니다.</p> +<ul> + <li>병합점에 있는 속성 수정, 예컨대 <code><statusbar id="status-bar" hidden="true"/></code> (status bar 숨김)</li> + <li>주 문서에서 병합점 제거, 예컨대 <code><statusbar id="status-bar" removeelement="true"/></code></li> + <li>삽입되는 위젯의 자리 제어:</li> +</ul> +<pre><statusbarpanel position="1" .../> + +<statusbarpanel insertbefore="other-id" .../> + +<statusbarpanel insertafter="other-id" .../> +</pre> +<h2 id=".EC.83.88.EB.A1.9C.EC.9A.B4_.EC.82.AC.EC.9A.A9.EC.9E.90_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4_.EC.BB.B4.ED.8F.AC.EB.84.8C.ED.8A.B8_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".EC.83.88.EB.A1.9C.EC.9A.B4_.EC.82.AC.EC.9A.A9.EC.9E.90_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4_.EC.BB.B4.ED.8F.AC.EB.84.8C.ED.8A.B8_.EB.A7.8C.EB.93.A4.EA.B8.B0">새로운 사용자 인터페이스 컴포넌트 만들기</h2> +<p>여러분은 UI 위젯을 조작하는 DOM 메소드를 써서 .js 파일에서 사용자 동작을 구현하여 기능(functionality)을 제공하는 분할한 .xul 파일로 여러분의 창과 대화상자를 만들 수 있습니다. 이미지 붙임, 색 설정 등을 하기 위해 .css 파일에서 스타일 규칙을 쓸 수 있습니다.</p> +<p>XUL 개발자를 위한 더 많은 자원(resource)은 <a href="/ko/docs/XUL" title="XUL">XUL</a> 문서를 보세요.</p> +<h2 id="Defaults_File" name="Defaults_File">Defaults File</h2> +<p>Defaults file은 여러분의 확장기능 폴더 계층의 루트 아래 <code>defaults/</code>에 놓일 사용자 profile을 뿌리는(seed) 데 씁니다. <code>defaults/preferences/</code>에 저장될 Default preferences .js file - .js 파일을 여기에 놓으면 시작할 때 Firefox preferences system에 의해 자동으로 로드되어 <a href="/ko/docs/Preferences_API" title="Preferences_API">Preferences API</a>를 써서 파일에 접근할 수 있습니다.</p> +<h2 id="XPCOM_.EC.BB.B4.ED.8F.AC.EB.84.8C.ED.8A.B8" name="XPCOM_.EC.BB.B4.ED.8F.AC.EB.84.8C.ED.8A.B8">XPCOM 컴포넌트</h2> +<p>Firefox는 확장기능에 <a href="/ko/docs/XPCOM" title="XPCOM">XPCOM</a> 컴포넌트를 지원합니다. 여러분은 JavaScript나 C++(<a href="/ko/docs/Gecko_SDK" title="Gecko_SDK">Gecko SDK</a>를 써서)로 쉽게 자신만의 컴포넌트를 만들 수 있습니다.</p> +<p><code>components/</code> 디렉토리에 모든 .js나 .dll 파일을 두세요 - 여러분의 확장기능이 설치된 뒤 Firefox가 도는 첫 번에 자동으로 등록됩니다.</p> +<p>더 많은 정보는 <a href="/ko/docs/How_to_Build_an_XPCOM_Component_in_Javascript" title="How_to_Build_an_XPCOM_Component_in_Javascript">JavaScript로 XPCOM 컴포넌트 빌드하는 법</a>과 책 <a href="/ko/docs/Creating_XPCOM_Components" title="Creating_XPCOM_Components">XPCOM 컴포넌트 만들기</a>를 보세요.</p> +<h3 id=".EC.9D.91.EC.9A.A9.ED.94.84.EB.A1.9C.EA.B7.B8.EB.9E.A8_.EB.AA.85.EB.A0.B9.EC.A4.84" name=".EC.9D.91.EC.9A.A9.ED.94.84.EB.A1.9C.EA.B7.B8.EB.9E.A8_.EB.AA.85.EB.A0.B9.EC.A4.84">응용프로그램 명령줄</h3> +<p>사용자 정의(custom) XPCOM 컴포넌트의 가능한 쓰임 가운데 하나는 Firefox 나 Thunderbird 에 명령줄 처리기 추가입니다. 여러분은 확장기능을 응용프로그램으로 실행하는 데 이 기술을 쓸 수 있습니다.</p> +<pre> firefox.exe -myapp +</pre> +<p><span class="comment">I should move the useful parts of this to the Command Line page. -Nickolay This is done by adding a component containing the function... function NSGetModule(comMgr, fileSpec) { return myAppHandlerModule; } 이 함수는 firefox가 시작할 때마다 firefox가 실행합니다. Firefox registers the myAppHandlerModule's by calling its 'registerSelf()'. Then it obtains the myAppHandlerModule's handler factory via 'getClassObject()'. The handler factory is then used to create the handle using its 'createInstance(). Finally, the handle's 'handle(cmdline)' processes the command line cmdline's handleFlagWithParam() and handleFlag().</span> 상세한 내용은 <a href="/ko/docs/Chrome/Command_Line" title="Chrome/Command_Line">Chrome: Command Line</a>과 <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=365297">forum discussion</a>을 보세요.</p> +<h2 id=".EC.A7.80.EC.97.AD.ED.99.94" name=".EC.A7.80.EC.97.AD.ED.99.94">지역화</h2> +<p>하나 이상의 언어를 지원하려면, <a href="/ko/docs/XUL_Tutorial/Localization" title="XUL_Tutorial/Localization">entities</a>와 <a href="/ko/docs/XUL_Tutorial/Property_Files" title="XUL_Tutorial/Property_Files">string bundles</a>을 써서 content에서 문자열을 분리해야 합니다. 돌아와서 나중에 하기보다는 확장기능을 개발하면서 하면 훨씬 더 쉽습니다!</p> +<p>지역화 정보는 그 확장기능을 위한 locale 디렉토리에 저장됩니다. 예를 들어, sample 확장기능에 locale을 추가하려면, chrome 디렉토리("content" 디렉토리가 위치한)에 "locale"로 이름 붙인 디렉토리를 만들고 chrome.manifest 파일에 다음 줄을 추가하세요:</p> +<pre>locale sample sampleLocale chrome/locale/ +</pre> +<p>XUL로 localizable 속성값을 만들려면, <code>.ent</code>(나 <code>.dtd</code>) 파일에 그 값을 써넣으세요, 속성값은 locale 디렉토리에 놓이고 이와 같이 보입니다.</p> +<pre><!ENTITY button.label "Click Me!"> +<!ENTITY button.accesskey "C"> +</pre> +<p>그리고 나서 XUL 문서 상단(하지만 "<?xml version"1.0"?>" 아래)에 이렇게 포함(include)하세요.</p> +<pre><!DOCTYPE <strong>window</strong> SYSTEM "<a class="external" rel="freelink">chrome://packagename/locale/filename.ent</a>"> +</pre> +<p><code><strong>window</strong></code>는 XUL 문서 루트 요소의 <code><a href="/ko/docs/DOM/element.localName" title="DOM/element.localName">localName</a></code>값이고 <code>SYSTEM</code> 프로퍼티 값은 엔티티(entity) 파일의 chrome URI입니다. sample 확장기능에서, 루트 요소는 <code><strong>overlay</strong></code>입니다.</p> +<p>그 엔티티를 쓰려면, XUL을 이렇게 보이도록 수정하세요.</p> +<pre><button label="&button.label;" accesskey="&button.accesskey;"/> +</pre> +<p>Chrome Registry가 선택한 locale과 대응하는 지역화 묶음에서 로드된 엔티티 파일인지 확인합니다.</p> +<p>스크립트에서 쓴 문자열은, 이 형식으로 각 줄에 문자열이 있는 .properties 파일, 텍스트 파일을 만드세요.</p> +<pre>key=value +</pre> +<p>그리고 나서 스크립트에 그 값을 로드하기 위해 <code><a href="/ko/docs/NsIStringBundleService" title="NsIStringBundleService">nsIStringBundleService</a></code>/<code><a href="/ko/docs/NsIStringBundle" title="NsIStringBundle">nsIStringBundle</a></code>이나 <code><a class="external" href="http://xulplanet.com/references/elemref/ref_stringbundle.html"><stringbundle></a></code> tag을 쓰세요.</p> +<h2 id=".EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80_.EC.9D.B4.ED.95.B4.ED.95.98.EA.B8.B0" name=".EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80_.EC.9D.B4.ED.95.B4.ED.95.98.EA.B8.B0">브라우저 이해하기</h2> +<p>브라우저 창이나 여러분이 확장하길 원하는 어떤 다른 XUL 창을 검사하려면 <a href="/ko/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a> (<strong>Standard</strong> Firefox 설치 부분이 아님, browser의 Tools(도구) 메뉴에 "DOM Inspector" 항목이 없으면 사용자 정의 설치 경로로 재설치하고 <strong>Developer Tools</strong>를 골라야 합니다)를 쓰세요.</p> +<p>노드를 선택하기 위해 XUL 창의 노드를 눈에 보이게 클릭하려면 DOM Inspector toolbar 좌상단에 있는 point-and-click 노드 finder button을 쓰세요. 이렇게 하면 DOM inspector의 DOM 계층 tree view는 여러분이 클릭하는 노드로 건너뜁니다.</p> +<p>overlay에서 여러분의 요소를 삽입하는 데 쓸 수 있는 id 붙은 병합점을 발견하려면 DOM Inspector의 오른쪽 패널을 쓰세요. 병합할 수 있는 id 붙은 요소를 발견할 수 없으면, overlay에 스크립트 붙임과 <code>load</code> 이벤트가 주 XUL 창 위에 발생할 때 요소 삽입이 필요할 지도 모릅니다.</p> +<h2 id=".ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.EB.94.94.EB.B2.84.EA.B7.B8.ED.95.98.EA.B8.B0" name=".ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.EB.94.94.EB.B2.84.EA.B7.B8.ED.95.98.EA.B8.B0">확장기능 디버그하기</h2> +<p><strong>디버깅을 위한 분석 도구</strong></p> +<ul> + <li><a href="/ko/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a> - 속성, DOM 구조, CSS 스타일 규칙을 검사(예컨대 왜 여러분의 스타일 규칙이 요소에서 작동하지 않는지 찾아냄 - 매우 귀중한 도구!)</li> + <li><a href="/ko/docs/Venkman" title="Venkman">Venkman</a> - JavaScript에서 중단점(breakpoint)을 설정하고 호출 스택(call stack) 검사</li> + <li>JavaScript의 <code><a href="/ko/docs/Core_JavaScript_1.5_Reference/Objects/Function/arguments/callee" title="Core_JavaScript_1.5_Reference/Objects/Function/arguments/callee">arguments.callee</a>.<a href="/ko/docs/Core_JavaScript_1.5_Reference/Objects/Function/caller" title="Core_JavaScript_1.5_Reference/Objects/Function/caller">caller</a></code> - 함수의 호출 스택 접근</li> +</ul> +<p><strong>printf 디버깅</strong></p> +<ul> + <li>명령줄에서 <code>-console</code>을 붙여 Firefox 실행하고 <code><a href="/ko/docs/DOM/window.dump" title="DOM/window.dump">dump</a>("string")</code> 사용(상세한 내용은 링크를 보세요)</li> + <li>JavaScript 콘솔에 log하기 위해 <code><a href="/ko/docs/NsIConsoleService" title="NsIConsoleService">nsIConsoleService</a></code> 사용</li> +</ul> +<p><strong>고급 디버깅</strong></p> +<ul> + <li>디버그 Firefox 빌드를 실행하고 Firefox 자체나 여러분의 C++ 컴포넌트에 중단점 설정. 숙련된 개발자에게, 이는 대부분 문제를 진단(diagnose)하는 가장 빠른 방법입니다. 더 많은 정보는 <a href="/ko/docs/Build_Documentation" title="Build_Documentation">Build Documentation</a>와 <a href="/ko/docs/Developing_Mozilla" title="Developing_Mozilla">Mozilla 개발하기</a>를 보세요.</li> + <li>더 도움이 되는 팁은 <a href="/ko/docs/Debugging_a_XULRunner_Application" title="Debugging_a_XULRunner_Application">XULRunner 응용프로그램 디버그하기</a>를 보세요.</li> +</ul> +<h3 id=".EB.B9.A0.EB.A5.B8_.EC.8B.9C.EC.9E.91" name=".EB.B9.A0.EB.A5.B8_.EC.8B.9C.EC.9E.91">빠른 시작</h3> +<p>여러분은 작동하는 단순 확장기능을 만드는 데 <a class="external" href="http://ted.mielczarek.org/code/mozilla/extensionwiz/">Extension Wizard</a> 온라인 도구를 쓸 수 있습니다.</p> +<p>Extension Wizard로 만들 수 있는 것과 비슷한 <a class="external" href="http://mozilla.doslash.org/stuff/helloworld.zip">Hello World 확장기능</a>은 <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">MozillaZine Knowledge Base의 다른 입문서</a>에서 한 줄 한 줄 설명합니다.</p> +<h3 id=".EB.B6.80.EA.B0.80_.EC.A0.95.EB.B3.B4" name=".EB.B6.80.EA.B0.80_.EC.A0.95.EB.B3.B4">부가 정보</h3> +<ul> + <li><a href="/ko/docs/Extension_FAQ" title="Extension_FAQ">Extension FAQ</a></li> + <li><a href="/ko/docs/Extensions" title="Extensions">Extensions</a></li> +</ul> diff --git a/files/ko/conflicting/web/api/document_object_model/index.html b/files/ko/conflicting/web/api/document_object_model/index.html new file mode 100644 index 0000000000..fc26bc0bee --- /dev/null +++ b/files/ko/conflicting/web/api/document_object_model/index.html @@ -0,0 +1,22 @@ +--- +title: DOM developer guide +slug: Web/Guide/DOM +tags: + - API + - DOM + - Guide + - NeedsTranslation + - TopicStub +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/Guide/API/DOM +--- +<p>{{draft}}</p> +<p>The <a href="/docs/DOM">Document Object Model</a> is an API for <a href="/en-US/docs/HTML">HTML</a> and <a href="/en-US/docs/XML">XML</a> 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.</p> +<p>All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into <a href="/en-US/docs/Gecko_DOM_Reference">objects</a> (e.g., the document object that represents the document itself, the table object that represents a HTML table element, and so forth). Those objects are accessible via scripting languages in most recent web browsers.</p> +<p>The DOM is most often used in conjunction with <a href="/en-US/docs/JavaScript">JavaScript</a>. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for <a href="http://www.w3.org/DOM/Bindings">any language</a>.</p> +<p>The <a href="http://www.w3.org/">World Wide Web Consortium</a> establishes a <a href="http://www.w3.org/DOM/">standard for the DOM</a>, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.</p> +<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Why is the DOM important?</h2> +<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>). As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers.</p> +<p>Even more important is the fact that the user interface of Mozilla (also Firefox and Thunderbird) is built using <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, using the DOM to <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipulate its own UI</a>.</p> +<h2 id="More_about_the_DOM">More about the DOM</h2> +<p>{{LandingPageListSubpages}}</p> diff --git a/files/ko/conflicting/web/api/index.html b/files/ko/conflicting/web/api/index.html new file mode 100644 index 0000000000..07c0c99acb --- /dev/null +++ b/files/ko/conflicting/web/api/index.html @@ -0,0 +1,139 @@ +--- +title: WebAPI +slug: WebAPI +tags: + - Apps + - DOM + - Firefox OS + - Mobile + - NeedsTranslation + - TopicStub +translation_of: Web/API +translation_of_original: WebAPI +--- +<p><strong>WebAPI</strong>는 웹 앱과 웹 콘텐츠가 기기의 하드웨어에 접근(배터리 상태나 기기의 진동 하드웨어 등)하고 기기의 데이터 저장소에 접근(달력이나 주소록 목록 등)할 수 있도록 해주는 기기 호환과 접근 API의 모음을 나타내는 단어입니다. 이러한 API를 추가함으로써 오늘날 웹이 할 수 있는 일과 과거에 특정 플랫폼에서만 가능했던 일들이 확장되기를 희망합니다.</p> + +<div class="note"> +<p><strong>Note:</strong> More of this documentation has been written than it looks like; links are not all added yet. We're actively working on improving this and expect to see things much better over the next couple of weeks. See the <a href="/ko/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">WebAPI doc status page</a>, where we're tracking work on WebAPI docs.</p> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Communication_APIs" name="Communication_APIs">Communication APIs</h2> + +<dl> + <dt><a href="/ko/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">Network Information API</a></dt> + <dd>현재 네트워크 연결에 대한 연결 속도와 같은 기본 정보를 알려줍니다.</dd> +</dl> + +<dl> + <dt><a href="/ko/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">Bluetooth</a></dt> + <dd>WebBluetooth API는 기기의 Bluetooth에 로우레벨 접근을 할 수 있게 해 줍니다.</dd> + <dt><a href="/ko/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">Mobile Connection API</a> {{NonStandardBadge}}</dt> + <dd>Exposes information about the device's cellular connectivity, such as signal strength, operator information, and so forth.</dd> + <dt><a href="/ko/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">Network Stats API</a></dt> + <dd>Monitors data usage and exposes this data to privileged applications.</dd> + <dt><a href="/ko/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telephony</a> {{NonStandardBadge}}</dt> + <dd>Lets apps place and answer phone calls and use the built-in telephony user interface.</dd> + <dt><a href="/ko/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS </a>{{NonStandardBadge}}</dt> + <dd>앱들이 SMS 문자 메시지를 주고 받게 하고, 장치에 저장된 메시지들을 접근하고 관리 하도록 해줍니다.</dd> + <dt><a href="/ko/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">WiFi Information API</a> {{NonStandardBadge}}</dt> + <dd>A privileged API which provides information about signal strength, the name of the current network, available WiFi networks, and so forth.</dd> +</dl> + +<h2 class="Documentation" id="Hardware_access_APIs" name="Hardware_access_APIs">Hardware access APIs</h2> + +<dl> + <dt><a href="/ko/docs/WebAPI/Using_Light_Events">Ambient Light Sensor API</a></dt> + <dd>광센서에 접근할 수 있게 해서 앱이 기기 주변의 밝기를 감지할 수 있게 해 줍니다.</dd> + <dt><a href="/ko/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">Battery Status API</a></dt> + <dd>배터리의 충전 정보 및 현재 기기가 충전 중인지 여부에 대한 정보를 제공 합니다.</dd> + <dt><a href="/ko/docs/WebAPI/Using_geolocation" title="Using_geolocation">Geolocation API</a></dt> + <dd>Provides information about the device's physical location.</dd> + <dt><a href="/ko/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Lets apps lock access to the mouse and gain access to movement deltas rather than absolute coordinates; this is great for gaming.</dd> + <dt><a href="/ko/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity API</a></dt> + <dd>Lets you detect proximity of the device to a nearby object, such as the user's face.</dd> + <dt><a href="/ko/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">Device Orientation API</a></dt> + <dd>기기의 방향 변화를 감지하여 알려줍니다.</dd> + <dt><a href="/ko/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">Screen Orientation API</a></dt> + <dd>화면의 방향 변화를 감지하여 알려줍니다. 앱이 어떤 방향을 선호하는지 지정하는데에도 사용 할 수 있습니다.</dd> + <dt><a href="/ko/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">Vibration API</a></dt> + <dd>Lets apps control the device's vibration hardware for things such as haptic feedback in games. This is <strong>not</strong> intended for things such as notification vibrations. See the <a href="/ko/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a> for that.</dd> + <dt><a href="/ko/docs/WebAPI/Camera" title="WebAPI/Camera">Camera API</a> {{NonStandardBadge}}</dt> + <dd>Allows apps to take photographs and/or record video using the device's built-in camera.</dd> + <dt><a href="/ko/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">Power Management API </a>{{NonStandardBadge}}</dt> + <dd>Lets apps turn on and off the screen, CPU, device power, and so forth. Also provides support for listening for and inspecting resource lock events.</dd> +</dl> + +<p><span class="alllinks"><a href="/ko/docs/tag/WebAPI" title="tag/CSS">View All...</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" id="Data_management_APIs" name="Data_management_APIs">Data management APIs</h2> + +<dl> +</dl> + +<dl> + <dt><a href="/ko/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a></dt> + <dd>Provides support for writable files with locking support.</dd> + <dt><a href="/ko/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd>고성능 검색을 지원하는 클라이언트측의 구조화된 데이터 저장소입니다.</dd> +</dl> + +<dl> + <dt><a href="/ko/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a> {{NonStandardBadge}}</dt> + <dd>Lets apps examine and change system-wide configuration options that are permanently stored on the device.</dd> +</dl> + +<h2 class="Documentation" id="Other_APIs" name="Other_APIs">Other APIs</h2> + +<dl> + <dt><a href="/ko/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a></dt> + <dd>Lets apps schedule notifications. Also provides support for automatically launching an app at a specific time.</dd> + <dt><a href="/ko/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a></dt> + <dd>Lets the platform send notification messages to specific applications.</dd> + <dt><a href="/ko/docs/WebAPI/Using_Web_Notifications" title="/ko/docs/WebAPI/Using_Web_Notifications">Web Notifications</a></dt> + <dd>Lets applications send notifications displayed at the system level.</dd> + <dt><a href="/ko/docs/Apps" title="Apps">Apps API</a> {{NonStandardBadge}}</dt> + <dd>The Open WebApps API provides support for installing and managing Web apps. In addition, support is provided to let apps determine payment information.</dd> + <dt><a href="/ko/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Web Activities</a> {{NonStandardBadge}}</dt> + <dd>Lets an app delegate an activity to another app; for example, an app might ask another app to select (or create) and return a photo. Typically the user is able to configure what apps are used for which activities.</dd> + <dt><a href="/ko/docs/Apps/Publishing/In-app_payments" title="Apps/Publishing/In-app_payments">WebPayment API</a> {{NonStandardBadge}}</dt> + <dd>Lets Web content initiate payments and refunds for virtual goods.</dd> + <dt><a href="/ko/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API"><strong>Browser API</strong></a> {{NonStandardBadge}}</dt> + <dd>Provides support for building a Web browser completely using Web technologies (in essence, a browser within a browser).</dd> +</dl> + +<dl> + <dt><a href="/ko/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a></dt> + <dd>Lets apps receive notifications when the user is not actively using the device.</dd> + <dt><a href="/ko/docs/WebAPI/Permissions" title="WebAPI/Permissions">Permissions API</a> {{NonStandardBadge}}</dt> + <dd>Manages app permissions in a centralized location. Used by the Settings app.</dd> + <dt><a href="/ko/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Time/Clock API</a> {{NonStandardBadge}}</dt> + <dd>현재 시각을 설정할 수 있게 해 줍니다. 시간대는 <a href="/ko/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a>를 이용해서 설정할 수 있습니다.</dd> +</dl> + +<h2 class="Community" id="Community" name="Community">WebAPI community</h2> + +<p>If you need help with these APIs, there are several ways you can talk to other developers making use of them.</p> + +<ul> + <li>Consult the WebAPI forum: {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}</li> + <li>Visit the WebAPI IRC channel: <a href="irc://irc.mozilla.org/webapi" title="irc://irc.mozilla.org/webapi">#webapi</a></li> +</ul> + +<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> + +<ul> + <li>The <a href="/ko/docs/Document_Object_Model_(DOM)" title="Document Object Model (DOM)">Document Object Model (DOM)</a> is the representation of an HTML document as a tree.</li> + <li><a href="/ko/docs/JavaScript" title="JavaScript">JavaScript</a> - Scripting language for the Web.</li> + <li><a href="/ko/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">Doc status</a>: A list of WebAPI topics and their documentation status.</li> +</ul> +</div> +</div> + +<p> </p> 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 new file mode 100644 index 0000000000..94e969e37a --- /dev/null +++ b/files/ko/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html @@ -0,0 +1,34 @@ +--- +title: 크로스-도메인 텍스쳐 +slug: Web/API/WebGL_API/Cross-Domain_Textures +tags: + - WebGL + - 웹지엘 + - 크로스 도메인 + - 텍스쳐 +translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL#Cross-domain_textures +translation_of_original: Web/API/WebGL_API/Cross-Domain_Textures +--- +<p>WebGL 텍스쳐 로딩은 크로스-도메인 접근 규칙에 따라 제약을 받습니다. 여러분이 만든 컨텐츠에서 다른 도메인의 텍스쳐,<span style="line-height: 16.7999992370605px;"> 즉, 크로스-도메인 텍스쳐를 로딩</span>하려면 CORS 승인이 필요합니다. CORS에 대한 자세한 내용은 <a href="/En/HTTP_access_control">HTTP access control</a>을 참고하시기 바랍니다.</p> + +<p>CORS 승인된 이미지를 WebGL 텍스쳐에 사용하는 방법에 대한 설명은 <a href="http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/">hacks.mozilla.org 문서</a>와 <a href="http://people.mozilla.org/~bjacob/webgltexture-cors-js.html">예제</a>를 참고하시기 바랍니다.</p> + +<blockquote> +<p>역자 주 : 예제 링크가 깨져있는데, 원문에도 깨진 링크가 포함되어 있습니다.</p> +</blockquote> + +<div class="note"> +<p><strong>Note:</strong> WebGL 텍스쳐에 대한 CORS 지원과 이미지 요소의 crossOrigin 속성이 {{Gecko("8.0")}}에 구현되어 있습니다.</p> +</div> + +<p>내용이 변경되어 오염된(tainted) 쓰기 전용의 2D 캔버스는 WebGL 텍스쳐로 사용될 수 없습니다. 예를 들어 크로스-도메인 이미지가 그려진 2D <span style="line-height: 16.7999992370605px;">{{ HTMLElement("canvas") }}는 오염된 2D 캔버스라고 할 수 있습니다.</span></p> + +<div class="note"> +<p><strong>Note:</strong> 캔버스 2D의 drawImage에 대한 CORS 지원은 {{Gecko("9.0")}}에 구현되어 있습니다. 따라서 {{Gecko("9.0")}}에서부터는, CORS 승인된 크로스-도메인 이미지는 2D 캔버스를 오염시키지 않으며, CORS 승인된 크로스-도메인 이미지가 그려진 2D 캔버스도 WebGL 텍스쳐로 사용할 수 있습니다.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> 크로스-도메인 비디오에 대한 CORS 지원과 {{ HTMLElement("video") }}요소의 crossorigin 속성은 {{Gecko("12.0")}}에 구현되어 있습니다.</p> +</div> + +<p>{{ languages( { "ja": "ja/WebGL/Cross-Domain_Textures", "ko": "ko/Web/WebGL/Cross-Domain_Textures"} ) }}</p> diff --git a/files/ko/conflicting/web/css/@viewport/index.html b/files/ko/conflicting/web/css/@viewport/index.html new file mode 100644 index 0000000000..96dd3182ad --- /dev/null +++ b/files/ko/conflicting/web/css/@viewport/index.html @@ -0,0 +1,76 @@ +--- +title: height +slug: Web/CSS/@viewport/height +tags: + - '@viewport' + - CSS + - CSS Descriptor + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/height +--- +<div>{{CSSRef}}</div> + +<p><code><strong>height</strong></code> CSS 서술자(descriptor)는 뷰포트의 {{cssxref("@viewport/min-height", "min-height")}} 및 {{cssxref("@viewport/max-height", "max-height")}} 둘 다 설정하기 위한 단축(shorthand) 설명자입니다. 뷰포트 길이 값 하나를 주어 최소 높이 및 최대 높이 둘 다를 주어진 값으로 설정합니다.</p> + +<p>뷰포트 값이 두 개 주어진 경우, 첫 번째 값은 최소 높이로 두 번째 값은 최대 높이로 설정합니다.</p> + +<p>{{cssinfo}}</p> + +<h2 id="구문">구문</h2> + +<pre class="brush: css">/* 한 값 */ +height: auto; +height: 320px; +height: 15em; + +/* 두 값 */ +height: 320px 200px; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>다른 CSS 설명자의 값에서 계산된 사용값(used value).</dd> + <dt><code><length></code></dt> + <dd>음이 아닌 절대 또는 상대 길이.</dd> + <dt><code><percentage></code></dt> + <dd>가로 및 세로 길이 각각을 위한 줌 배율(factor) 1.0에서 초기 뷰포트의 너비 또는 높이에 대한 퍼센트 값. 음이 아니어야 합니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush: css">@viewport { + height: 500px; +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.at-rules.viewport.height")}}</p> diff --git a/files/ko/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html b/files/ko/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html new file mode 100644 index 0000000000..7dab19acbd --- /dev/null +++ b/files/ko/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html @@ -0,0 +1,73 @@ +--- +title: viewport-fit +slug: Web/CSS/@viewport/viewport-fit +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/viewport-fit +--- +<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div> + +<p><strong><code>viewport-fit</code></strong> CSS {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "설명자")}}는 문서의 뷰포트가 화면을 채우는 방법을 제어합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css; no-line-numbers">/* Keyword values */ +viewport-fit: auto; +viewport-fit: contain; +viewport-fit: cover; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>이 값은 초기 레이아웃 뷰포트에 영향을 미치지 않으며 전체 웹 페이지가 보여집니다.</dd> + <dt><code>contain</code></dt> + <dd>뷰포트 크기가 디스플레이 내에 새겨진 가장 큰 직사각형에 들어맞게 조정됩니다.</dd> +</dl> + +<dl> + <dt><code>cover</code></dt> + <dd>뷰포트 크기가 기기 디스플레이를 모두 채우도록 조정됩니다. 이때 중요한 내용이 디스플레이 바깥 영역으로 밀려나지 않도록 <a href="/en-US/docs/Web/CSS/env">safe area inset 변수</a>를 함께 사용할 것을 권장합니다.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">auto | contain | cover +</pre> + +<div class="hidden">이 설명자는 아직 <a href="https://github.com/mdn/data/blob/master/css/at-rules.json">https://github.com/mdn/data/blob/master/css/at-rules.json</a>에 등재되지 않았습니다.</div> + +<h2 id="접근성_문제">접근성 문제</h2> + +<p><code>viewport-fit</code> 설명자를 사용할 때에는 모든 기기의 디스플레이가 직사각형인 것은 아니므로 <a href="/en-US/docs/Web/CSS/env">safe area inset 변수</a>를 함께 사용해야 함을 기억하세요.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td> + <td>{{Spec2("CSS Round Display")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.at-rules.viewport.viewport-fit")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{CSSxRef("env", "env()")}}</li> +</ul> diff --git a/files/ko/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html b/files/ko/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html new file mode 100644 index 0000000000..699b60921e --- /dev/null +++ b/files/ko/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html @@ -0,0 +1,71 @@ +--- +title: zoom +slug: Web/CSS/@viewport/zoom +tags: + - CSS + - CSS Descriptor + - Graphics + - Layout + - NeedsExample + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/zoom +--- +<div>{{ CSSRef }}</div> + +<p><code>zoom</code> <a href="/ko/docs/Web/CSS">CSS</a> 설명자(descriptor)는 {{cssxref("@viewport")}}에 의해 정의된 문서의 초기 줌 배율(factor)을 설정합니다.</p> + +<p><code>1.0</code> 또는 <code>100%</code>인 <em>줌 배율</em>은 줌이 없음에 해당합니다. 큰 값은 확대. 작은 값은 축소.</p> + +<p>{{cssinfo}}</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css">/* 키워드 값 */ +zoom: auto; + +/* <number> 값 */ +zoom: 0.8; +zoom: 2.0; + +/* <percentage> 값 */ +zoom: 150%; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>사용자 에이전트가 문서의 초기 줌 배율을 설정합니다. 사용자 에이전트는 문서가 그 배율을 찾기 위해 렌더링되는 캔버스 영역의 크기를 사용할 수 있습니다.</dd> + <dt><code><number></code></dt> + <dd>줌 배율로 사용되는 음이 아닌 수. 배율 1.0은 줌이 수행되지 않음을 뜻합니다. 1.0보다 큰 값은 확대 작은 값은 축소 효과가 됩니다.</dd> + <dt><code><percentage></code></dt> + <dd>줌 배율로 사용되는 음이 아닌 퍼센트 값. 배율 100%는 줌이 수행되지 않음을 뜻합니다. 100%보다 큰 값은 확대 작은 값은 축소 효과가 됩니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#the-lsquozoomrsquo-descriptor', '"zoom" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>초기 스펙</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("css.at-rules.viewport.zoom")}}</p> 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 new file mode 100644 index 0000000000..69d4320e3c --- /dev/null +++ b/files/ko/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,56 @@ +--- +title: 여러개의 배경 지정하기 +slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +tags: + - CSS + - CSS Background + - Example + - Guide + - 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 +--- +<p>{{CSSRef}}</p> + +<p><a href="/ko/CSS" title="CSS3">CSS3</a>를 사용하면 엘리먼트에 <strong>여러개의 배경</strong>을 지정할 수 있다. 첫 번째로 지정한 배경이 가장 앞에 보이고 나중에 지정한 배경이 뒤에 보인다. 배경 색상({{ cssxref("color") }})는 맨 마지막에만 지정할 수 있다. </p> + +<p>여러개의 배경을 지정하는건 간단하다.</p> + +<pre class="brush: css">.myclass { + background: background1, background 2, ..., backgroundN; +} +</pre> + +<p>배경에 관련된 다른 속성들은 {{ cssxref("background") }} 속성에 한꺼번에 지정할 수도 있고 리스트 형태로 각각 지정할 수도 있다. 하지만 {{ cssxref("background-color") }} 속성은 리스트 형태로 지정할 수 없다. 다음과 같은 속성들은 리스트 형태로 동시에 여러개 지정할 수 있다. {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}</p> + +<h2 id="예제">예제</h2> + +<p>이 예제에서는 파이어포스 로고, 선형 그라디언트, 꽃이 그려진 사진을 한 엘리먼트에 적용해본다. </p> + +<pre class="brush: css">.multi_bg_example { + background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png), + linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), + url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); + background-repeat: no-repeat, no-repeat, repeat; + background-position: bottom right, left, right; +} +</pre> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Result</td> + </tr> + <tr> + <td style="padding: 0;"><img alt="css_multibg.png" class="default internal" src="/@api/deki/files/4028/=css_multibg.png" style="display: block;"></td> + </tr> + </tbody> +</table> + +<p>첫 번째 배경으로 지정한(리스트에서 첫번째) 파이어폭스 로고가 맨 위에 보이고 선형 그라디언트, 꽃이 그려진 사진 순서대로 보인다. {{ cssxref("background-repeat") }} 와 {{ cssxref("background-position") }}) 속성들도 리스트 형태로 지정되었는데 순서대로 해당하는 배경에 적용된다. 예를 들어 {{ cssxref("background-repeat") }} 속성 중 첫 번째 no-repeat는 첫 번째 배경인 파이어폭스 로고에 적용된다.</p> + +<h2 id="더_보기">더 보기</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a></li> +</ul> diff --git a/files/ko/conflicting/web/guide/index.html b/files/ko/conflicting/web/guide/index.html new file mode 100644 index 0000000000..6dc2104009 --- /dev/null +++ b/files/ko/conflicting/web/guide/index.html @@ -0,0 +1,67 @@ +--- +title: Web Development +slug: Web_Development +tags: + - Web Development +translation_of: Web/Guide +translation_of_original: Web_Development +--- +<div> + <b>웹 개발</b>은 웹 사이트 그리고 웹 응용프로그램 개발을 (양자를 포괄적으로) 포함하고 있습니다.</div> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h4 id=".EB.AC.B8.EC.84.9C" name=".EB.AC.B8.EC.84.9C"><a>문서</a></h4> + <dl> + <dt> + <a href="ko/Migrate_apps_from_Internet_Explorer_to_Mozilla">Migrate apps from Internet Explorer to Mozilla</a></dt> + <dd> + <small>Doron Rosenberg가 가지고 계신 웹 응용프로그램이 IE와 Mozilla에서 동작하는지 확인하는 법을 알려줍니다.</small></dd> + </dl> + <dl> + <dt> + <a href="ko/Using_URL_values_for_the_cursor_property">Using URL values for the cursor property</a></dt> + <dd> + <small><a href="ko/Gecko">Gecko</a> 1.8 (<a href="ko/Firefox_1.5">Firefox 1.5</a>, SeaMonkey 1.0)는 마우스 커서를 마음대로 지정할 수 있게 하는 <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">CSS2 cursor property</a>를 위한 URL 값을 지원합니다.</small></dd> + </dl> + <p> </p> + <dl> + <dt> + <a href="ko/Using_Firefox_1.5_caching">Using Firefox 1.5 caching</a></dt> + <dd> + <small><a href="ko/Firefox_1.5">Firefox 1.5</a>는 메모리에 JavaScript상태 값을 포함한 웹 페이지 전체를 캐시합니다. 방문한 페이지 사이에 "뒤로", "앞으로"의 이동은 페이지를 중복해서 불러올 필요가 없을 뿐더러 JavaScript상태 값을 보존합니다. 이러한 특징들은 웹 서핑을 매우 빠르게 해줍니다.</small></dd> + </dl> + <p><br> + <span class="alllinks"><a>모두 보기...</a></span></p> + </td> + <td> + <h4 id=".EC.BB.A4.EB.AE.A4.EB.8B.88.ED.8B.B0" name=".EC.BB.A4.EB.AE.A4.EB.8B.88.ED.8B.B0">커뮤니티</h4> + <ul> + <li>Mozilla 포럼 보기...</li> + </ul> + <p>{{ DiscussionList("dev-web-development", "mozilla.dev.web-development") }}</p> + <ul> + <li><a class="external" href="http://www.whatwg.org/">WHAT Working Group</a></li> + <li><a class="external" href="http://webdevfeedhouse.com/">WebDev FeedHouse</a></li> + </ul> + <h4 id=".EB.8F.84.EA.B5.AC" name=".EB.8F.84.EA.B5.AC">도구</h4> + <ul> + <li><a class="link-https" href="https://addons.mozilla.org/extensions/moreinfo.php?id=60&application=firefox">Web Developer extension</a></li> + <li><a href="ko/Venkman">Venkman</a>, the JavaScript debugger</li> + <li><a href="ko/DOM_Inspector">DOM Inspector</a></li> + </ul> + <p><span class="alllinks"><a>모두 보기...</a></span></p> + <h4 id=".EA.B4.80.EB.A0.A8_.EC.A3.BC.EC.A0.9C" name=".EA.B4.80.EB.A0.A8_.EC.A3.BC.EC.A0.9C">관련 주제</h4> + <dl> + <dd> + <a href="ko/AJAX">AJAX</a>, <a href="ko/CSS">CSS</a>, <a href="ko/HTML">HTML</a>, <a href="ko/JavaScript">JavaScript</a>, <a href="ko/Web_Standards">Web Standards</a>, <a href="ko/XHTML">XHTML</a>, <a href="ko/XML">XML</a></dd> + </dl> + </td> + </tr> + </tbody> +</table> +<p><span class="comment">Categories</span></p> +<p><span class="comment">Interwiki Language Links</span></p> +<p> </p> +<p>{{ languages( { "en": "en/Web_Development" } ) }}</p> 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 new file mode 100644 index 0000000000..f8793b4cbc --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/expressions_and_operators/index.html @@ -0,0 +1,45 @@ +--- +title: Arithmetic Operators +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Arithmetic_Operators +--- +<h3 id=".EC.82.B0.EC.88.A0_.EC.97.B0.EC.82.B0.EC.9E.90" name=".EC.82.B0.EC.88.A0_.EC.97.B0.EC.82.B0.EC.9E.90"> 산술 연산자 </h3> +<p>산술 연산자는 수(상수값이든지 변수든지)를 받아서 하나의 수를 반환합니다. 표준 산술 연산자는 더하기(+), 빼기(-), 곱하기(*), 나누기(/)입니다. 이 연산자들은 대부분의 다른 프로그래밍 언어에서 처럼 동작합니다. 예외적으로 / 연산자는 JavaScript에서 소수를 반환합니다. C나 Java 같은 다른 언어에서는 / 연산자가 소수 부분은 잘라버립니다. 예를 들면 이렇습니다. +</p> +<pre>1/2 //returns 0.5 in JavaScript +1/2 //returns 0 in Java +</pre> +<p>JavaScript는 다음 표에 나오는 산술 연산자를 제공합니다. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<th>연산자</th> +<th>설명</th> +<th>예제</th> +</tr> +<tr> +<td>%<br>(나머지)</td> +<td>2항(binary) 연산자. 두 피연산자의 나눗셈에서 나온 나머지를 반환합니다.</td> +<td>12 % 5 returns 2.</td> +</tr> +<tr> +<td>++<br>(증가)</td> +<td>단항(unary) 연산자. 피연산자에 1을 더함. 전위 연산자(++x)를 사용하면 피연산자에 1을 더한 후 그 값을 반환합니다. 후위 연산자(x++)를 사용하면 피연산자에 1을 더하기 전에 피연산자의 값을 반환합니다.</td> +<td><code>x</code>가 3일 때, <code>++x</code>는 <code>x</code>를 4로 만들고 4를 반환합니다. 반면 <code>x++</code>는 <code>x</code>를 4로 만들고 3을 반환합니다.</td> +</tr> +<tr> +<td>--<br>(감소)</td> +<td>단항 연산자. 피연산자에서 1을 뺌. 반환값은 증가 연산자와 동일한 방식으로 결정됩니다.</td> +<td><code>x</code>가 3일 때, <code>--x</code>는 <code>x</code>를 2로 만들고 2를 반환합니다. 반면 <code>x--</code>는 <code>x</code>를 2로 만들고 3을 반환합니다.</td> +</tr> +<tr> +<td>-<br>(단항 부정)</td> +<td>단항 연산자. 피연산자의 부호를 바꾼 값을 반환합니다.</td> +<td><code>x</code>가 3이면 <code>-x</code>는 -3을 반환합니다.</td> +</tr> +</tbody></table> +<p><small><b>표 3.4: 산술 연산자</b></small> +</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Comparison_Operators", "Core_JavaScript_1.5_Guide:Operators:Bitwise_Operators") }} +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_arithm\u00e9tiques", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_arytmetyczne" } ) }} 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 new file mode 100644 index 0000000000..edf5f640a5 --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_2285d0ecb7e20b6a4ac3cb462794e916/index.html @@ -0,0 +1,69 @@ +--- +title: Logical Operators +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Logical_Operators +--- +<h3 id=".EB.85.BC.EB.A6.AC_.EC.97.B0.EC.82.B0.EC.9E.90" name=".EB.85.BC.EB.A6.AC_.EC.97.B0.EC.82.B0.EC.9E.90"> 논리 연산자 </h3> +<p>논리 연산자는 주로 불리언(논리적) 값과 함께 사용됩니다. 그때 논리 연산자는 불리언 값을 반환합니다. 그러나 &&와 || 연산자는 실제로는 피연산자 중에 하나의 값을 반환하기 때문에, 이 연산자가 불리언 값이 아닌 값과 함께 사용되면 불리언 값이 아닌 값을 반환할 것입니다. 다음 표에 논리 연산자에 대해서 설명했습니다. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<th>연산자</th> +<th>사용법</th> +<th>설명</th> +</tr> +<tr> +<td>&&</td> +<td>expr1 && expr2</td> +<td>(논리적 AND) expr1이 false로 변환될 수 있으면 expr1을 반환하고, 그렇지 않으면 expr2를 반환합니다. 그러므로 불리언 값과 같이 사용하면 피연산자 둘 모두가 true일 때 &&는 true를 반환하고 그렇지 않을 때는 false를 반환합니다.</td> +</tr> +<tr> +<td>||</td> +<td>expr1 || expr2</td> +<td>(논리적 OR) expr1이 true로 변환될 수 있으면 expr1을 반환하고 그렇지 않으면 expr2를 반환합니다. 그러므로 불리언 값과 같이 사용하면 ||는 피연산자 중에서 하나만 true이면 true를 반환합니다. 둘 다 false이면 false를 반환합니다.</td> +</tr> +<tr> +<td>!</td> +<td>!expr</td> +<td>(논리적 NOT) 피연산자가 true로 변환될 수 있으면 false를 반환합니다. 그렇지 않으면 true를 반환합니다.</td> +</tr> +</tbody></table> +<p><small><b>표 3.7: 논리 연산자</b></small> +</p><p>false로 변환될 수 있는 표현식은 null, 0, 빈 문자열(""), undefined로 평가될 수 있는 표현식들입니다. +</p><p>다음 코드는 && 연산자를 사용하는 예를 보여줍니다. +</p> +<pre>a1=true && true // t && t returns true +a2=true && false // t && f returns false +a3=false && true // f && t returns false +a4=false && (3 == 4) // f && f returns false +a5="Cat" && "Dog" // t && t returns Dog +a6=false && "Cat" // f && t returns false +a7="Cat" && false // t && f returns false +</pre> +<p>다음 코드는 || 연산자를 사용하는 예를 보여줍니다. +</p> +<pre>o1=true || true // t || t returns true +o2=false || true // f || t returns true +o3=true || false // t || f returns true +o4=false || (3 == 4) // f || f returns false +o5="Cat" || "Dog" // t || t returns Cat +o6=false || "Cat" // f || t returns Cat +o7="Cat" || false // t || f returns Cat +</pre> +<p>다음 코드는 ! 연산자를 사용하는 예를 보여줍니다. +</p> +<pre>n1=!true // !t returns false +n2=!false // !f returns true +n3=!"Cat" // !t returns false +</pre> +<h4 id=".EB.8B.A8.EC.B6.95_.ED.8F.89.EA.B0.80" name=".EB.8B.A8.EC.B6.95_.ED.8F.89.EA.B0.80"> 단축 평가 </h4> +<p>논리 표현식이 왼쪽부터 오른쪽으로 평가되기 때문에 다음 규칙을 이용해서 "단축(short-circuit)" 평가를 할 수 있습니다. +</p> +<ul><li> <code>false</code> && <i>아무 표현식</i>은 false로 단축 평가 됩니다. +</li><li> <code>true</code> || <i>아무 표현식</i>은 true로 단축 평가 됩니다. +</li></ul> +<p>이 규칙을 따라 평가를 수행한다고 해서 피연산자를 모두 평가할 때와 결과가 달라지지 않습니다. <i>아무 표현식</i> 부분은 평가되지 않기 때문에 아무런 부수 효과(side effect)도 일어나지 않는다는 것에 주의하십시오. +</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Bitwise_Operators", "Core_JavaScript_1.5_Guide:Operators:String_Operators") }} +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Logical_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_logiques", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Logical_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_logiczne" } ) }} 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 new file mode 100644 index 0000000000..fc39b5a34f --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_337b8dbe817777e70cc8002308284a74/index.html @@ -0,0 +1,12 @@ +--- +title: String Operators +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/String_Operators +--- +<h4 id=".EB.AC.B8.EC.9E.90.EC.97.B4_.EC.97.B0.EC.82.B0.EC.9E.90" name=".EB.AC.B8.EC.9E.90.EC.97.B4_.EC.97.B0.EC.82.B0.EC.9E.90"> 문자열 연산자 </h4> +<p>문자열 값에 사용할 수 있는 비교 연산자 외에도 연결 연산자(+)가 있는데, 이 연산자는 두 문자열 값을 연결한 새로운 문자열 값을 반환합니다. 예를 들어, <code>"my " + "string"</code>는 <code>"my string"</code>라는 문자열을 반환합니다. +</p><p>축약된 할당 연산자인 += 또한 문자열 연결에 사용할 수 있습니다. 예를 들어 <code>mystring</code> 변수가 "alpha"라는 값을 가지고 있을 때, <code>mystring += "bet"</code>은 "alphabet"으로 평가되고, 그 값이 <code>mystring</code>에 할당됩니다. +</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Logical_Operators", "Core_JavaScript_1.5_Guide:Operators:Special_Operators") }} +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/String_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_li\u00e9s_aux_cha\u00eenes", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/String_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operacje_na_\u0142a\u0144cuchach" } ) }} 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 new file mode 100644 index 0000000000..f238901cab --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915/index.html @@ -0,0 +1,229 @@ +--- +title: Special Operators +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Special_Operators +--- +<h3 id=".ED.8A.B9.EC.88.98_.EC.97.B0.EC.82.B0.EC.9E.90" name=".ED.8A.B9.EC.88.98_.EC.97.B0.EC.82.B0.EC.9E.90"> 특수 연산자 </h3> +<p>JavaScript 다음과 같은 특별한 연산자를 제공합니다. +</p> +<ul><li> {{ Anch("조건 연산자") }} +</li><li> {{ Anch("쉼표 연산자") }} +</li><li> {{ Anch("delete") }} +</li><li> {{ Anch("in") }} +</li><li> {{ Anch("instanceof") }} +</li><li> {{ Anch("new") }} +</li><li> {{ Anch("this") }} +</li><li> {{ Anch("typeof") }} +</li><li> {{ Anch("void") }} +</li></ul> +<h4 id=".EC.A1.B0.EA.B1.B4_.EC.97.B0.EC.82.B0.EC.9E.90" name=".EC.A1.B0.EA.B1.B4_.EC.97.B0.EC.82.B0.EC.9E.90"> 조건 연산자 </h4> +<p>조건 연산자는 JavaScript에서 유일하게 세 개의 피연산자를 사용하는 연산자입니다. 연산자는 조건에 따라 둘 중에 하나의 값을 가질 수 있습니다. 문법은 이렇습니다. +</p> +<pre>condition ? val1 : val2 +</pre> +<p><code>condition</code>이 true이면 연산자는 <code>val1</code>의 값을 갖습니다. 그렇지 않으면 <code>val2</code>의 값을 갖습니다. 다른 표준 연산자를 사용할 수 있는 곳이면 어디든지 조건 연산자를 사용할 수 있습니다. +</p> +<pre>status = (age >= 18) ? "adult" : "minor" +</pre> +<p>이 문장은 <code>age</code>가 18이거나 더 큰 경우에 <code>status</code> 변수에 "adult"라는 값을 할당합니다. 그렇지 않으면 "minor"라는 값을 할당합니다. +</p> +<h4 id=".EC.89.BC.ED.91.9C_.EC.97.B0.EC.82.B0.EC.9E.90" name=".EC.89.BC.ED.91.9C_.EC.97.B0.EC.82.B0.EC.9E.90"> 쉼표 연산자 </h4> +<p>쉼표 연산자(,)는 단순히 피연산자 둘을 모두 평가하고 두 번째 피연산자의 값을 반환하는 연산자입니다. 이 연산자는 주로 <code>for</code> 반복문에서 변수 여러 개가 매번 업데이트 되게 하는데 쓰입니다. +</p><p>예를 들어 <code>a</code>가 각각 10줄의 원소를 가지는 2차원 배열일 때, 다음 코드에서는 변수 두 개를 한 번에 바꾸기 위해서 쉼표 연산자를 사용하고 있습니다. 이 코드는 배열의 대각선 원소를 출력합니다. +</p> +<pre>for (var i=0, j=9; i <= 9; i++, j--) + document.writeln("a["+i+"]["+j+"]= " + a[i][j]) +</pre> +<h4 id="delete" name="delete"> delete </h4> +<p>delete는 개체(object), 개체의 속성(property), 배열의 특정 인덱스에 있는 원소(element)를 지우는 연산자입니다. 문법은 이렇습니다. +</p> +<pre>delete objectName +delete objectName.property +delete objectName[index] +delete property // with 문장 안에서만 유효합니다 +</pre> +<p><code>objectName</code>은 개체 이름이고, <code>property</code>는 개체에 존재하는 속성이고, <code>index</code>는 배열의 원소 위치를 나타내는 정수입니다. +</p><p>네 번째 형식은 개체의 속성을 지우는 코드인데, <code>with</code> 문장 안에서만 사용할 수 있습니다. +</p><p>암시적으로 선언된 변수를 지울 때는 <code>delete</code> 연산자를 사용할 수 있지만 <code>var</code> 문장을 이용해서 선언된 변수는 지울 수 없습니다. +</p><p><code>delete</code> 연산자 실행이 성공하면, 속성이나 원소가 <code>undefined</code>로 설정됩니다. <code>delete</code> 연산자는 실행이 가능하면 true를 반환하고, 불가능하면 false를 반환합니다. +</p> +<pre>x=42 +var y= 43 +myobj=new Number() +myobj.h=4 // h라는 속성을 만듭니다 +delete x // returns true (암시적으로 선언된 변수는 지울 수 있습니다) +delete y // returns false (var로 선언한 변수는 지울 수 없습니다) +delete Math.PI // returns false (미리 정의된 속성은 지울 수 없습니다) +delete myobj.h // returns true (사용자 정의 속성은 지울 수 있습니다) +delete myobj // returns true (암시적으로 선언되었으므로 지울 수 있습니다) +</pre> +<p><b>배열의 원소를 지우기</b><br> +배열의 원소를 지울 때, 배열의 길이에는 변화가 없습니다. 예를 들어, a{{ mediawiki.external(3) }}, a{{ mediawiki.external(4) }}를 지우더라도 a{{ mediawiki.external(4) }}와 a{{ mediawiki.external(3) }}은 여전히 정의되지 않습니다. +</p><p><code>delete</code> 연산자가 배열 원소를 제거할 때 원소는 더이상 배열에 존재하지 않습니다. 아래 예제에서 trees{{ mediawiki.external(3) }}은 <code>delete</code>로 제거되었습니다. +</p> +<pre>trees=new Array("redwood","bay","cedar","oak","maple") +delete trees[3] +if (3 in trees) { + // 이 블록은 실행되지 않습니다. +} +</pre> +<p>배열 원소가 존재하긴 하지만 정의되지 않은 값을 가지도록 하고 싶다면 <code>delete</code> 연산자 대신 <code>undefined</code> 키워드를 사용하십시오. 다음 예제에서 <code>trees{{ mediawiki.external(3) }}</code>에 <code>undefined</code> 값을 할당했지만 배열 요소는 여전히 존재합니다. +</p> +<pre>trees=new Array("redwood","bay","cedar","oak","maple") +trees[3]=undefined +if (3 in trees) { + // 이 블록은 실행됩니다. +} +</pre> +<h4 id="in" name="in"> in </h4> +<p><code>in</code> 연산자는 지정된 속성이 지정된 개체에 있으면 true를 반환합니다. 문법은 이렇습니다. +</p> +<pre>propNameOrNumber in objectName +</pre> +<p><code>propNameOrNumber</code>은 속성 이름을 나타내는 문자열이나 배열 인덱스를 나타내는 수이고, <code>objectName</code>은 개체 이름입니다. +</p><p>다음 예제는 <code>in</code> 연산자의 몇 가지 사용법을 보여줍니다. +</p> +<pre>// 배열 +trees=new Array("redwood","bay","cedar","oak","maple") +0 in trees // returns true +3 in trees // returns true +6 in trees // returns false +"bay" in trees // returns false (원하는 인덱스를 지정해야 하는데, + // 그 인덱스에 있는 값을 지정하면 안됩니다.) +"length" in trees // returns true (length는 배열의 속성입니다.) + +// 미리 정의된 개체 +"PI" in Math // returns true +myString=new String("coral") +"length" in myString // returns true + +// 사용자 개체 +mycar = {make:"Honda",model:"Accord",year:1998} +"make" in mycar // returns true +"model" in mycar // returns true +</pre> +<h4 id="instanceof" name="instanceof"> instanceof </h4> +<p><code>instanceof</code>는 지정된 개체가 지정된 개체 형식이면 true를 반환합니다. 문법은 이렇습니다. +</p> +<pre>objectName instanceof objectType +</pre> +<p><code>objectName</code>은 <code>objectType</code>과 비교할 개체의 이름이고, <code>objectType</code>은 개체 형식으로 <code>Date</code>나 <code>Array</code> 같은 것입니다. +</p><p>실행중에 개체의 형식을 알고 싶으면 <code>instanceof</code>를 사용하면 됩니다. 예를 들어 예외를 처리할 때, 발생한 예외의 형식에 따라 서로 다른 예외 처리 코드를 실행할 수 있습니다. +</p><p>다음 코드에서 <code>theDay</code>가 <code>Date</code> 개체인지 결정하기 위해서 <code>instanceof</code>를 사용합니다. <code>theDay</code>는 <code>Date</code> 개체이기 때문에 <code>if</code>문 안에 있는 문장이 실행됩니다. +</p> +<pre>theDay=new Date(1995, 12, 17) +if (theDay instanceof Date) { + // 실행할 문장 +} +</pre> +<h4 id="new" name="new"> new </h4> +<p>사용자 정의 개체 형식이나 <code>Array, Boolean, Date, Function, Image, Number, Object, Option, RegExp, String</code> 같이 미리 정의된 개체 형식의 인스턴스를 만들 때 <code>new</code> 연산자를 사용합니다. 서버에서는 <code>DbPool, Lock, File, SendMail</code> 등을 만들 때 사용할 수 있습니다. <code>new</code>는 다음과 같이 사용합니다. +</p> +<pre>objectName = new objectType ( param1 [,param2] ...[,paramN] ) +</pre> +<p><a href="ko/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers">개체 초기화 지정자 사용하기</a>에 설명한 것처럼 개체 초기화 지정자를 이용해서 개체를 만들 수도 있습니다. +</p><p>더 많은 정보를 얻으려면 JavaScript 레퍼런스의 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator">new 연산자</a> 페이지를 보시기 바랍니다. +</p> +<h4 id="this" name="this"> this </h4> +<p>현재 개체를 참조할 때 <code>this</code> 키워드를 사용합니다. 일반적으로 <code>this</code>는 메소드를 호출하는 개체를 참조합니다. 다음과 같이 사용하면 됩니다. +</p> +<pre>this[.propertyName] +</pre> +<p><b>예제 1.</b><br> +개체의 <code>value</code> 속성이 높거나 낮은 값을 가지는지 검증하는 <code>validate</code>라는 함수가 있다고 가정합시다. +</p> +<pre>function validate(obj, lowval, hival) { + if ((obj.value < lowval) || (obj.value > hival)) + alert("Invalid Value!") +} +</pre> +<p>이제 우리는 폼의 각 요소의 <code>onChange</code> 이벤트 핸들러에서 <code>validate</code> 함수를 호출하면서, <code>this</code>를 이용하여 스스로를 함수에 전달할 수 있습니다. +</p> +<pre><B>Enter a number between 18 and 99:</B> +<INPUT TYPE = "text" NAME = "age" SIZE = 3 + onChange="validate(this, 18, 99)"> +</pre> +<p><b>예제 2.</b><br> +<code>form</code> 속성과 결합되면, <code>this</code>는 현재 개체가 포함된 폼을 참조할 수 있습니다. 다음 예제에서 <code>myForm</code> 폼은 <code>Text</code> 개체와 버튼을 포함하고 있습니다. 사용자가 버튼을 클릭하면 <code>Text</code> 개체의 값이 폼 이름으로 설정됩니다. 버튼의 <code>onClick</code> 이벤트 핸들러는 부모 폼인 <code>myForm</code>을 참조하기 위해서 <code>this.form</code>을 사용하고 있습니다. +</p> +<pre><FORM NAME="myForm"> +Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga"> +<P> +<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name" + onClick="this.form.text1.value=this.form.name"> +</FORM> +</pre> +<h4 id="typeof" name="typeof"> typeof </h4> +<p><code>typeof</code> 연산자는 둘 중 한 가지 방법으로 사용할 수 있습니다. +</p> +<pre>1. typeof operand +2. typeof (operand) +</pre> +<p><code>typeof</code> 연산자는 피연산자의 평가되지 않은 형식을 나타내는 문자열을 반환합니다. <code>피연산자</code>는 string, variable, keyword, object 등의 타입을 반환하게 됩니다. 괄호는 선택적입니다. +</p><p>우리가 이런 변수를 정의했다고 해봅시다. +</p> +<pre>var myFun = new Function("5+2") +var shape="round" +var size=1 +var today=new Date() +</pre> +<p><code>typeof</code>는 이 변수들에 대해서 다음과 같은 결과를 반환할 것입니다. +</p> +<pre>typeof myFun is function +typeof shape is string +typeof size is number +typeof today is object +typeof dontExist is undefined +</pre> +<p><code>true</code>와 <code>null</code> 키워드에 대해서 <code>typeof</code> 연산자는 다음과 같은 결과를 반환합니다. +</p> +<pre>typeof true is boolean +typeof null is object +</pre> +<p>수와 문자열에 대해서 <code>typeof</code> 연산자는 다음과 같은 결과를 반환합니다. +</p> +<pre>typeof 62 is number +typeof 'Hello world' is string +</pre> +<p>속성 값에 대해서 <code>typeof</code> 연산자는 속성이 포함하고 있는 값의 형식을 반환합니다. +</p> +<pre>typeof document.lastModified is string +typeof window.length is number +typeof Math.LN2 is number +</pre> +<p>메소드와 함수에 사용하면 <code>typeof</code> 연산자는 다음과 같은 결과를 반환합니다. +</p> +<pre>typeof blur is function +typeof eval is function +typeof parseInt is function +typeof shape.split is function +</pre> +<p>미리 정의된 개체들에 대해서 <code>typeof</code> 연산자는 다음과 같은 결과를 반환합니다. +</p> +<pre>typeof Date is function +typeof Function is function +typeof Math is function +typeof Option is function +typeof String is function +</pre> +<h4 id="void" name="void"> void </h4> +<p><code>void</code> 연산자는 다음과 같이 사용할 수 있습니다. +</p> +<pre>1. void (expression) +2. void expression +</pre> +<p><code>void</code> 연산자는 표현식이 값을 반환하지 않으면서 평가되어야 한다고 지정하는데 사용됩니다. <code>expression</code>은 평가하려는 JavaScript 표현식입니다. 표현식을 감싸는 괄호는 선택적이지만 사용하는 쪽이 더 좋은 스타일입니다. +</p><p>표현식을 하이퍼텍스트 링크로 지정하기 위해서 <code>void</code> 연산자를 사용할 수 있습니다. 표현식이 평가되기는 하지만 현재 문서 대신 로드되지는 않습니다. +</p><p>아래 코드는 사용자가 클릭할 때 아무 동작도 하지 않는 하이퍼텍스트 링크를 만듭니다. 사용자가 링크를 클릭하면 <code>void(0)</code>는 정의되지 않은 것(undefined)으로 평가되고 JavaScript에서 아무런 효과가 없습니다. +</p> +<pre><A HREF="javascript:void(0)">Click here to do nothing</A> +</pre> +<p>다음 코드는 클릭하면 폼을 제출하는 하이퍼텍스트 링크를 만듭니다. +</p> +<pre><A HREF="javascript:void(document.form.submit())"> +Click here to submit</A> +</pre> +<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:String_Operators", "Core_JavaScript_1.5_Guide:Creating_a_Regular_Expression") }} +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Special_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_sp\u00e9ciaux", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_specjalne" } ) }} 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 new file mode 100644 index 0000000000..3aed13da65 --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_da1ab2546bd5e84ac81f952de51d5d40/index.html @@ -0,0 +1,102 @@ +--- +title: Bitwise Operators +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Bitwise_Operators +--- +<p><br> +</p> +<h3 id=".EB.B9.84.ED.8A.B8_.EC.97.B0.EC.82.B0.EC.9E.90" name=".EB.B9.84.ED.8A.B8_.EC.97.B0.EC.82.B0.EC.9E.90"> 비트 연산자 </h3> +<p>비트 연산자는 피연산자를 10진수나 16진수, 8진수로 다루지 않고 32개의 비트 집합으로 다룹니다. 예를 들어, 10진수 9는 2진수로 1001입니다. 비트 연산자는 2진수 표현으로 연산을 하지만 반환값은 JavaScript 표준 수 값으로 반환합니다. +</p><p>JavaScript의 비트 연산자를 다음 표에 요약했습니다. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<th>연산자</th> +<th>사용법</th> +<th>설명</th> +</tr> +<tr> +<td>비트 AND</td> +<td><code>a & b</code></td> +<td>두 피연산자의 대응되는 비트가 모두 1이면 1을 반환.</td> +</tr> +<tr> +<td>비트 OR</td> +<td><code>a | b</code></td> +<td>두 피연산자의 대응되는 비트에서 둘 중 하나가 1이거나 모두 1인 경우 1을 반환.</td> +</tr> +<tr> +<td>비트 XOR</td> +<td><code>a ^ b</code></td> +<td>두 피연산자의 대응되는 비트에서 둘 중 하나가 1이고, 둘 다 1이 아닐 경우 1을 반환.</td> +</tr> +<tr> +<td>비트 NOT</td> +<td><code>~ a</code></td> +<td>피연산자의 비트를 뒤집음.</td> +</tr> +<tr> +<td>왼쪽으로 이동</td> +<td><code>a << b</code></td> +<td>a의 2진수 표현을 b 비트만큼 왼쪽으로 이동함. 오른쪽은 0으로 채움.</td> +</tr> +<tr> +<td>부호 비트로 채우는 오른쪽 이동</td> +<td><code>a >> b</code></td> +<td>a의 2진수 표현을 b 비트만큼 오른쪽으로 이동함. 오른쪽 남는 비트는 버림.</td> +</tr> +<tr> +<td>0으로 채우는 오른쪽 이동</td> +<td><code>a >>> b</code></td> +<td>a의 2진수 표현을 b 비트만큼 오른쪽으로 이동함. 오른쪽 남는 비트는 버리고, 왼쪽은 0으로 채움.</td> +</tr> +</tbody></table> +<p><small><b>표 3.5: 비트 연산자</b></small> +</p> +<h4 id=".EB.B9.84.ED.8A.B8_.EB.85.BC.EB.A6.AC_.EC.97.B0.EC.82.B0.EC.9E.90" name=".EB.B9.84.ED.8A.B8_.EB.85.BC.EB.A6.AC_.EC.97.B0.EC.82.B0.EC.9E.90"> 비트 논리 연산자 </h4> +<p>개념적으로 비트 논리 연산자는 다음과 같이 동작합니다. +</p> +<ul><li> 피연산자는 32비트 정수로 변환되어 비트의 나열로 표현됩니다. +</li><li> 두 피연산자의 비트를 같은 위치에 있는 것 끼리 짝을 짓습니다. +</li><li> 짝 지어진 각각의 쌍에 대해서 연산자를 적용하여 결과를 만들어냅니다. +</li></ul> +<p>예를 들어, 9를 2진수로 쓰면 1001이고 15를 2진수로 표현하면 1111입니다. 두 값에 비트 연산을 적용하면 결과는 다음과 같습니다. +</p> +<ul><li> 15 & 9 yields 9 (1111 & 1001 = 1001) +</li><li> 15 | 9 yields 15 (1111 | 1001 = 1111) +</li><li> 15 ^ 9 yields 6 (1111 ^ 1001 = 0110) +</li></ul> +<h4 id=".EB.B9.84.ED.8A.B8_.EC.9D.B4.EB.8F.99_.EC.97.B0.EC.82.B0.EC.9E.90" name=".EB.B9.84.ED.8A.B8_.EC.9D.B4.EB.8F.99_.EC.97.B0.EC.82.B0.EC.9E.90"> 비트 이동 연산자 </h4> +<p>비트 이동 연산자는 피연산자 두 개를 받습니다. 첫 번째는 이동하려는 수이고, 두 번째는 첫 번째 피연산자를 몇 비트나 이동시킬지 나타내는 비트 수입니다. 이동 방향은 사용된 연산자에 따라 다릅니다. +</p><p>이동 연산자는 피연산자를 32비트 정수로 변환하여 연산하고, 왼쪽 연산자와 같은 자료형으로 반환합니다. +</p><p>이동 연산자는 다음 표에 있습니다. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<th>연산자</th> +<th>설명</th> +<th>예제</th> +</tr> +<tr> +<td><<<br> +(왼쪽 이동)</td> +<td>이 연산자는 첫 번째 피연산자의 비트를 지정된 수만큼 왼쪽으로 옮깁니다. 왼쪽으로 넘친 비트는 버립니다. 오른쪽 빈 자리는 0으로 채웁니다.</td> <td>9<<2는 36을 반환합니다. 1001을 왼쪽으로 2비트 이동하면 100100이 되고 이것은 36이기 때문입니다.</td> +</tr> +<tr> +<td>>><br> +(부호 비트로 채우는 오른쪽 이동)</td> +<td>이 연산자는 첫 번째 피연산자의 비트를 지정된 수 만큼 오른쪽으로 옮깁니다. 오른쪽으로 넘친 비트는 버립니다. 왼쪽 빈 자리는 원래 가장 왼쪽에 있던 비트 값으로 채웁니다.</td> +<td>9>>2는 2를 반환합니다. 1001을 2비트 오른쪽으로 이동하면 10이 되는데 이것은 2이기 때문입니다. 비슷하게 -9>>2는 -3을 반환하는데, 부호가 유지되기 때문입니다.</td> +</tr> +<tr> +<td>>>><br> +(0으로 채우는 오른쪽 이동)</td> +<td>이 연산자는 첫 번째 피연산자의 비트를 지정된 수 만큼 오른쪽으로 옮깁니다. 오른쪽으로 넘친 비트는 버립니다. 왼쪽 빈 자리는 0으로 채웁니다.</td> +<td>19>>>2는 4를 반환합니다. 10011을 2비트 오른쪽으로 이동하면 100이 되기 때문입니다. 음수가 아닌 수에 대해서는 0을 채우는 오른쪽 이동이나 부호 비트로 채우는 오른쪽 이동이 똑같은 결과를 반환합니다.</td> +</tr> +</tbody></table> +<p><small><b>표 3.6: 비트 이동 연산자</b></small> +</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Arithmetic_Operators", "Core_JavaScript_1.5_Guide:Operators:Logical_Operators") }} +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_bit-\u00e0-bit", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_bitowe" } ) }} 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 new file mode 100644 index 0000000000..7b5f5c577c --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/grammar_and_types/index.html @@ -0,0 +1,29 @@ +--- +title: Constants +slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants +translation_of: Web/JavaScript/Guide/Grammar_and_types +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Constants +--- +<h3 id=".EC.83.81.EC.88.98" name=".EC.83.81.EC.88.98"> 상수 </h3> +<p><code><a href="ko/Core_JavaScript_1.5_Reference/Statements/const">const</a></code> 키워드를 이용하면 읽기 전용의 이름 있는 상수를 만들 수 있습니다. 상수 식별자(const identifier)는 변수의 식별자와 동일합니다. 문자나 밑줄로 시작해야 하고, 알파벳, 숫자, 밑줄 문자를 사용할 수 있습니다. +</p> +<pre class="eval">const prefix = '212'; +</pre> +<p>상수는 스크립트 실행 중에 값을 대입하거나 다시 선언하여 값을 바꿀 수 없습니다. +</p><p>전역 상수인 경우에도 항상 <code>const</code> 키워드를 붙여야 한다는 점만 제외하면, 상수의 범위 규칙은 변수의 경우와 동일합니다. const 키워드가 없으면 변수라고 판정됩니다. +</p><p>같은 범위에 있는 함수나 변수의 이름과 같은 이름으로 상수를 만들 수 없습니다. 예를 들어, +</p> +<pre>//이 코드는 에러를 낼 것입니다 +function f() {}; + const f = 5; + +//이 코드 또한 에러를 냅니다. +function f() { + const g = 5; + var g; + + //그 외 코드... + +}</pre> +<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Variables", "Core_JavaScript_1.5_Guide:Literals") }} +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Constants", "fr": "fr/Guide_JavaScript_1.5/Constantes", "ja": "ja/Core_JavaScript_1.5_Guide/Constants", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Sta\u0142e" } ) }} 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 new file mode 100644 index 0000000000..c9260414d3 --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/grammar_and_types_3f037ba1fa5775d153289787ec51042f/index.html @@ -0,0 +1,65 @@ +--- +title: Variables +slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables +translation_of: Web/JavaScript/Guide/Grammar_and_types +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Variables +--- +<h3 id=".EB.B3.80.EC.88.98" name=".EB.B3.80.EC.88.98"> 변수 </h3> +<p>우리는 프로그램 내에서 값에 이름을 부여하기 위해서 변수를 사용할 수 있습니다. 변수의 이름은 "식별자(identifier)"라고 불리며, 몇 가지 규칙을 따라야 합니다. +</p><p>JavaScript 의 식별자는 문자(letter)나 밑줄(_)이나 달러 기호($)로 시작해야 합니다. 그 뒤에는 숫자(0-9)도 올 수 있습니다. JavaScript는 대소문자를 구별하기 때문에, 문자는 대문자 "A"부터 "Z"까지와 소문자 "a"부터 "z"까지를 사용할 수 있습니다. +</p><p>JavaScript 1.5부터, 식별자에 å나 ü같은 ISO 8859-1이나 유니코드 문자를 사용할 수 있습니다. 또한 <a href="ko/Core_JavaScript_1.5_Guide/Unicode#.EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C_.EC.9D.B4.EC.8A.A4.EC.BC.80.EC.9D.B4.ED.94.84_.EC.8B.9C.ED.80.80.EC.8A.A4">유니코드 이스케이프 시퀀스</a> 페이지에 나열된 \uXXXX 형식 유니코드 이스케이프 시퀀스를 식별자에 쓸 수도 있습니다. +</p><p>규칙에 맞는 이름 몇 가지는 이런 것입니다. <code>Number_hits</code>, <code>temp99</code>, <code>_name</code>. +</p> +<h4 id=".EB.B3.80.EC.88.98_.EC.84.A0.EC.96.B8" name=".EB.B3.80.EC.88.98_.EC.84.A0.EC.96.B8"> 변수 선언 </h4> +<p>변수를 선언하는 방법에는 두 가지가 있습니다. +</p> +<ul><li> <a href="ko/Core_JavaScript_1.5_Reference/Statements/var">var</a> 키워드를 이용하는 방법. 예를 들면 <code>var x = 42</code> 같은 식입니다. 이 문법은 <a href="#.EB.B3.80.EC.88.98_.EB.B2.94.EC.9C.84">지역, 전역</a> 변수를 선언하는데 모두 사용할 수 있습니다. +</li><li> 그냥 값을 대입하는 방법. <code>x = 42</code> 같은 식입니다. 이 방법은 항상 <a href="#.EC.A0.84.EC.97.AD_.EB.B3.80.EC.88.98">전역 변수</a>를 선언하고, strict JavaScript 경고를 냅니다. 이 방법은 절대 사용하지 맙시다. +</li></ul> +<h4 id=".EB.B3.80.EC.88.98.EB.A5.BC_.ED.8F.89.EA.B0.80.ED.95.98.EA.B8.B0.28Evaluating.29" name=".EB.B3.80.EC.88.98.EB.A5.BC_.ED.8F.89.EA.B0.80.ED.95.98.EA.B8.B0.28Evaluating.29"> 변수를 평가하기(Evaluating) </h4> +<p>초기값을 지정하지 않고 <code>var</code> 문장을 이용해서 선언한 변수는 <a href="ko/Core_JavaScript_1.5_Reference/Global_Properties/undefined">undefined</a>라는 값을 갖습니다. +</p><p>선언하지 않은 변수에 접근하려고 하면 ReferenceError 예외가 발생합니다. +</p> +<pre class="eval">var a; +print("The value of a is " + a); // prints "The value of a is undefined" +print("The value of b is " + b); // throws ReferenceError exception +</pre> +<p>변수가 값을 갖고 있는지 결정하기 위해서 <code>undefined</code>를 사용할 수 있습니다. 다음 코드에서 <code>input</code>에는 값을 할당하지 않아서 <code><a href="ko/Core_JavaScript_1.5_Reference/Statements/if...else">if</a></code>문은 <code>true</code>로 평가됩니다. +</p> +<pre>var input; +if(input === undefined){ + doThis(); +} else { + doThat(); +}</pre> +<p><span class="comment">Not sure how the following is related to "Variables" section</span> +<code>undefined</code>값을 참/거짓을 판별하는 구문에 쓰면 <code>false</code>로 평가됩니다. 예를 들어 다음 코드에서는 <code>myArray</code>의 원소가 정의되지 않았기 때문에 <code>myFunction</code> 함수가 실행됩니다. +</p> +<pre>myArray=new Array() +if (!myArray[0]) + myFunction();</pre> +<p>숫자가 필요한 문맥에서 null 변수를 평가하면 null 값은 0으로 평가되고, 참/거짓이 필요한 문맥에서는 false로 평가됩니다. +When you evaluate a null variable, the null value behaves as 0 in numeric contexts and as false in boolean contexts. For example: +</p> +<pre>var n = null; +n * 32; //0을 반환합니다</pre> +<h4 id=".EB.B3.80.EC.88.98_.EB.B2.94.EC.9C.84" name=".EB.B3.80.EC.88.98_.EB.B2.94.EC.9C.84"> 변수 범위 </h4> +<p>함 수 외부에서 선언한 변수는 "전역(global)" 변수라고 부릅니다. 그 변수는 현재 문서의 모든 코드에서 접근할 수 있기 때문입니다. 함수 안에서 선언한 변수는 "지역(local)" 변수라고 부릅니다. 그 변수는 함수 안에서만 접근할 수 있기 때문입니다. +</p><p>JavaScript에는 <a href="ko/Core_JavaScript_1.5_Guide/Block_Statement#.EB.B8.94.EB.A1.9D_.EB.AC.B8.EC.9E.A5">블록 문장</a> 범위가 없습니다. 대신 그 블록이 포함된 코드의 지역 범위에 포함됩니다. 예를 들어 다음 코드에서는 <code>condition</code>이 <code>false</code>이면 예외를 발생시키는 대신 0을 출력합니다. +</p> +<pre class="eval">if (condition) { + var x = 5; +} +print(x ? x : 0); +</pre> +<p>JavaScript의 변수와 관련해서 또다른 색다른 점은 나중에 선언될 변수에 예외 발생없이 접근할 수 있다는 것입니다. +</p> +<pre class="eval">print(x === undefined); // prints "true" +var x = 3; +</pre> +<h4 id=".EC.A0.84.EC.97.AD_.EB.B3.80.EC.88.98" name=".EC.A0.84.EC.97.AD_.EB.B3.80.EC.88.98"> 전역 변수 </h4> +<p><span class="comment">need links to pages discussing scope chains and the global object</span> +전역 변수는, 실제로는 "전역 개체(global object)"의 속성(property)입니다. 웹 페이지에서 전역 개체는 <a href="ko/DOM/window">window</a>이므로, <code>window.<i>variable</i></code> 문장을 이용해서 전역 변수에 접근할 수 있습니다. +</p><p>그러므로, window나 frame 이름을 이용하면 다른 window나 frame에 정의된 전역 변수에 접근할 수 있습니다. 예를 들어 <code>phoneNumber</code>라는 변수를 <code>FRAMESET</code> 문서에 정의했다면, 자식 frame에서 <code>parent.phoneNumber</code>로 그 변수에 접근할 수 있습니다. +</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Values", "Core_JavaScript_1.5_Guide:Constants") }} +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Variables", "fr": "fr/Guide_JavaScript_1.5/Variables", "ja": "ja/Core_JavaScript_1.5_Guide/Variables", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Zmienne" } ) }} 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 new file mode 100644 index 0000000000..9c97d9cf82 --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f/index.html @@ -0,0 +1,110 @@ +--- +title: Unicode +slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode +translation_of: Web/JavaScript/Guide/Grammar_and_types +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Unicode +--- +<h3 id=".EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C" name=".EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C"> 유니코드 </h3> +<p>유니코드는 세계의 주요한 문자 언어를 교환하고 표현하기 위한 문자-코딩 표준입니다. 유니코드는 아메리카, 유럽, 중동, 아프리카, 인도, 아시아, 태평양 지역(Pacifica)의 언어를 포함하며 고문자와 기술 분야 기호들도 포함합니다. 유니코드는 공통적인 기술 분야, 수학 분야 기호 뿐만 아니라 여러 언어를 포함한 텍스트의 교환, 처리, 표현을 지원합니다. 유니코드는 나라마다 서로 다른 문자 표준으로 인해서 여러 언어를 포함했을 때 발생하는 국제화 문제를 해결할 수 있기를 희망합니다. 하지만 아직은 모든 현대 문자, 고대 문자를 지원하지는 못합니다. +</p><p>유니코드 문자 집합은 알려진 모든 인코딩을 위해 사용될 수 있습니다. 유니코드는 ASCII (American Standard Code for Information Interchange, 정보 교환을 위한 미국 표준 코드) 문자 집합을 본떠 만들어졌습니다. 각각의 문자에 숫자와 이름을 부여한 것입니다. 문자 인코딩은 문자의 정체성(identity)과 숫자 값(코드 위치)와 함께 숫자 값의 비트 표현을 명시합니다. 16비트 숫자 값(코드 값)은 U+0041처럼 접두어 U뒤에 16진수를 붙여서 표시합니다. 이 값의 유일한 이름은 LATIN CAPITAL LETTER A입니다. +</p><p><b>JavaScript 1.3 이전 버전은 유니코드를 지원하지 않습니다.</b> +</p> +<h4 id=".EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C.EC.99.80_ASCII_.EB.B0.8F_ISO_.EC.82.AC.EC.9D.B4.EC.9D.98_.ED.98.B8.ED.99.98.EC.84.B1" name=".EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C.EC.99.80_ASCII_.EB.B0.8F_ISO_.EC.82.AC.EC.9D.B4.EC.9D.98_.ED.98.B8.ED.99.98.EC.84.B1"> 유니코드와 ASCII 및 ISO 사이의 호환성 </h4> +<p>유니코드는 ISO 10646의 부분집합인 국제 표준 ISO/IEC 10646-1; 1993과 완벽하게 호환됩니다. +</p><p>몇몇 인코딩 표준(UTF-8, UTF-16, ISO UCS-2를 포함하는)들이 실제 비트 값으로 유니코드를 표현하기 위해 사용됩니다. +</p><p>UTF-8 인코딩은 ASCII 문자와 호환되며 많은 프로그램이 UTF-8을 지원합니다. 앞쪽 128개의 유니코드 문자는 ASCII 문자에 대응되며 같은 바이트 값을 가지고 있습니다. U+0020부터 U+007E 까지의 유니코드 문자는 ASCII 문자 0x20 부터 0x7E 까지와 동일합니다. 라틴 알파벳을 지원하고 7비트 문자 집합을 사용하는 ASCII와는 달리, UTF-8은 한 문자를 위해서 한 개부터 네 개 사이의 8진수(octet)를 사용합니다. ("8진수"는 바이트 또는 8비트를 의미합니다.) 이 방법으로 수백만개의 문자를 표현할 수 있습니다. 다른 인코딩 표준인 UTF-16은 유니코드 문자를 표현하기 위해 2바이트를 사용합니다. 이스케이프 시퀀스를 이용하여 UTF-16은 4바이트를 써서 모든 유니코드 범위를 표현합니다. ISO UCS-2 (Universal Character Set, 세계 문자 집합)은 2바이트를 사용합니다. +</p><p>JavaScript와 Navigator가 UTF-8/유니코드를 지원한다는 것은 우리가 비 라틴 문자와 국제화되고 지역화된 문자에다 특수한 기술 분야 기호까지 JavaScript 프로그램에 쓸 수 있다는 것을 의미합니다. 유니코드는 여러 언어를 포함한 텍스트를 인코딩할 수 있는 표준적인 방법을 제공합니다. UTF-8 인코딩이 ASCII와 호환되기 때문에, ASCII 문자를 프로그램에 사용할 수 있습니다. 우리는 JavaScript의 주석, 문자열 리터럴, 식별자(identifier), 정규 표현식에 비 ASCII 유니코드 문자를 쓸 수 있습니다. +</p> +<h4 id=".EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C_.EC.9D.B4.EC.8A.A4.EC.BC.80.EC.9D.B4.ED.94.84_.EC.8B.9C.ED.80.80.EC.8A.A4" name=".EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C_.EC.9D.B4.EC.8A.A4.EC.BC.80.EC.9D.B4.ED.94.84_.EC.8B.9C.ED.80.80.EC.8A.A4"> 유니코드 이스케이프 시퀀스 </h4> +<p>우리는 문자열 리터럴, 정규 표현식, 식별자에 유니코드 이스케이프 시퀀스를 사용할 수 있습니다. 이스케이프 시퀀스는 ASCII 문자 여섯 개로 이루어지는데, \u 뒤에 16진수를 표현하는 숫자 네 개가 붙은 모양입니다. 예를 들어 \u00A9는 저작권 기호를 나타냅니다. JavaScript에서 모든 유니코드 이스케이프 시퀀스는 문자 한 개로 인식됩니다. +</p><p>다음의 코드는 저작권 문자와 "Netscape Communications"라는 문자열을 반환합니다. +</p> +<pre>x="\u00A9 Netscape Communications"</pre> +<p>다음의 표는 자주 사용되는 특수 문자의 유니코드 값을 모은 것입니다. +</p> +<table class="fullwidth-table"> +<tbody><tr> +<th>분류</th> +<th>유니코드 값</th> +<th>이름</th> +<th>형식화된 이름(Format name)</th> +</tr> +<tr> +<td>공백 문자</td> +<td>\u0009</td> +<td>Tab</td> +<td><TAB></td> +</tr> +<tr> +<td> </td> +<td>\u000B</td> +<td>Vertical Tab</td> +<td><VT></td> +</tr> +<tr> +<td> </td> +<td>\u000C</td> +<td>Form Feed</td> +<td><FF></td> +</tr> +<tr> +<td> </td> +<td>\u0020</td> +<td>Space</td> +<td><SP></td> +</tr> +<tr> +<td>줄 끝 문자</td> +<td>\u000A</td> +<td>Line Feed</td> +<td><LF></td> +</tr> +<tr> +<td> </td> +<td>\u000D</td> +<td>Carriage Return</td> +<td><CR></td> +</tr> +<tr> +<td>그 외 유니코드 이스케이프 시퀀스</td> +<td>\u0008</td> +<td>Backspace</td> +<td><BS></td> +</tr> +<tr> +<td> </td> +<td>\u0009</td> +<td>Horizontal Tab</td> +<td><HT></td> +</tr> +<tr> +<td> </td> +<td>\u0022</td> +<td>Double Quote</td> +<td>"</td> +</tr> +<tr> +<td> </td> +<td>\u0027</td> +<td>Single Quote</td> +<td>'</td> +</tr> +<tr> +<td> </td> +<td>\u005C</td> <td>Backslash</td> +<td>\</td> +</tr> +</tbody></table> +<p><small><b>표 2.2: 특수 문자의 유니코드 값</b></small> +</p><p>JavaScript에서 유니코드 이스케이프 시퀀스는 Java와 다릅니다. JavaScript에서, 이스케이프 시퀀스가 특수 문자로 먼저 해석되지 않습니다. 예를 들어, 줄 끝 이스케이프 시퀀스가 문자열에 포함되어 있어도 함수에 의해 해석되기 전까지는 문자열을 자르지 않습니다. 주석에 포함된 이스케이프 시퀀스는 모두 무시됩니다. Java에서는 한 줄 주석에 이스케이프 시퀀스가 있으면 유니코드 문자로 해석됩니다. 문자열 리터럴에서 Java 컴파일러는 이스케이프 시퀀스를 먼저 해석합니다. 예를 들어 줄 끝 이스케이프 문자(즉 \u000A)가 Java에서 사용되면 문자열 리터럴을 끝나게 합니다. Java에서는 줄 끝 문자가 문자열 리터럴에 포함될 수 없으므로, 에러가 발생합니다. 문자열 리터럴에 개행 문자를 넣으려면 반드시 \n을 사용해야 합니다. JavaScript에서 이스케이프 시퀀스는 \n과 같은 방식으로 동작합니다. +</p> +<div class="note">참고: 긴 문자열을 변환하는 웹 프로그램 <a class="external" href="http://www.hot-tips.co.uk/useful/unicode_converter.HTML">Hot-Tips' Unicode Converter</a>, by Bob Foley.</div> +<h4 id="JavaScript_.ED.8C.8C.EC.9D.BC.EC.97.90.EC.84.9C_.EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C_.EB.AC.B8.EC.9E.90" name="JavaScript_.ED.8C.8C.EC.9D.BC.EC.97.90.EC.84.9C_.EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C_.EB.AC.B8.EC.9E.90"> JavaScript 파일에서 유니코드 문자 </h4> +<p>초기 버전의 <a href="ko/Gecko">Gecko</a>는 XUL에서 로드되는 JavaScript 파일의 인코딩이 Latin-1일 것이라고 가정했습니다. Gecko 1.8부터는 XUL 파일의 인코딩으로 부터 JavaScript 파일의 인코딩을 유추하도록 변경되었습니다. 더 많은 정보는 <a href="ko/International_characters_in_XUL_JavaScript">International characters in XUL JavaScript</a> 페이지를 참고하시기 바랍니다. +</p> +<h4 id=".EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C.EB.A1.9C_.EB.AC.B8.EC.9E.90_.ED.91.9C.EC.8B.9C.ED.95.98.EA.B8.B0" name=".EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C.EB.A1.9C_.EB.AC.B8.EC.9E.90_.ED.91.9C.EC.8B.9C.ED.95.98.EA.B8.B0"> 유니코드로 문자 표시하기 </h4> +<p>우리는 다른 언어나 기술 분야 기호를 표시하기 위해서 유니코드를 사용할 수 있습니다. 문자를 제대로 표시하기 위해서는 Mozilla Firefox나 Netscape 같은 클라이언트가 유니코드를 지원해야 합니다. 게다가 클라이언트에서 사용할 수 있는 적절한 유니코드 글꼴이 필요하고, 클라이언트 플랫폼이 유니코드를 지원해야 합니다. 종종 유니코드 글꼴이 모든 유니코드 문자를 표시하지 못하는 경우가 있습니다. Windows 95 같은 몇몇 플랫폼은 유니코드를 부분적으로만 지원합니다. +</p><p>비 ASCII 문자 입력을 받기 위해서는 클라이언트가 유니코드로 입력을 보내야 합니다. 표준 확장 키보드(standard enhanced keyborad)를 사용하면 클라이언트에서 유니코드가 지원하는 추가적인 문자를 쉽게 입력할 수 없습니다. 때때로 유니코드 문자를 입력하려면 유니코드 이스케이프를 사용하는 방법 밖에 없을 때도 있습니다. +</p><p>유니코드에 대한 더 많은 정보를 얻으려면 <a class="external" href="http://www.unicode.org/">유니코드 홈페이지</a>나 The Unicode Standard, Version 2.0, published by Addison-Wesley, 1996 를 보시기 바랍니다. +</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Literals", "Core_JavaScript_1.5_Guide:Expressions") }} +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Unicode", "fr": "fr/Guide_JavaScript_1.5/Unicode", "ja": "ja/Core_JavaScript_1.5_Guide/Unicode", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Unicode" } ) }} 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 new file mode 100644 index 0000000000..ee62d0cecf --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece/index.html @@ -0,0 +1,175 @@ +--- +title: Literals +slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals +translation_of: Web/JavaScript/Guide/Grammar_and_types +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Literals +--- +<h3 id=".EC.83.81.EC.88.98.EA.B0.92.28Literal.29" name=".EC.83.81.EC.88.98.EA.B0.92.28Literal.29">상수값(Literal)</h3> +<p>JavaScript에서 값을 표현하기 위해 상수값을 사용할 수 있습니다. 그것은 변수가 아니라 고정된 값으로서 "문자 그대로(literally)" 스크립트에 값을 제공하는 것입니다. 이 절에서 다음과 같은 상수값에 대해서 설명하겠습니다.</p> +<ul> + <li>{{ Anch("배열 상수값") }}</li> + <li>{{ Anch("불리언 상수값") }}</li> + <li>{{ Anch("소수 상수값") }}</li> + <li>{{ Anch("정수") }}</li> + <li>{{ Anch("개체 상수값") }}</li> + <li>{{ Anch("문자열 상수값") }}</li> +</ul> +<h4 id=".EB.B0.B0.EC.97.B4_.EC.83.81.EC.88.98.EA.B0.92" name=".EB.B0.B0.EC.97.B4_.EC.83.81.EC.88.98.EA.B0.92">배열 상수값</h4> +<p>배열 상수값은 대괄호([])안에 배열의 원소(element)를 0개 이상 나열한 것입니다. 배열 상수값으로 배열을 만드면 배열은 지정된 원소를 가지도록 초기화되고, 지정된 원소의 개수만큼의 길이를 갖게 됩니다.</p> +<p>다음 예제는 세 개의 원소를 가지고 길이가 3인 <code>coffees</code> 배열을 만드는 예제입니다.</p> +<pre>coffees = ["French Roast", "Colombian", "Kona"]</pre> +<p><b>참고</b> 배열 상수값은 개체 초기화지정자(object initializer) 중의 하나입니다. <a href="ko/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers">개체 초기화지정자 사용하기</a>를 보십시오.</p> +<p>최상위 스크립트에서 상수값을 이용하여 배열을 만들면 JavaScript는 배열 상수값을 포함하는 표현식을 평가(evaluate)할 때마다 배열을 만듭니다. 또한, 함수 안에서 사용된 상수값은 함수가 호출될 때마다 생성됩니다.</p> +<p>배열 상수값은 Array 개체입니다. Array 개체에 대한 상세한 내용은 <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object">Array 개체</a>를 보십시오.</p> +<p><b>배열 상수값의 추가적인 쉼표</b></p> +<p>배열 상수값에 모든 원소를 지정할 필요는 없습니다. 쉼표만 찍어 두면 값이 할당되지 않은 빈 공간을 가진 배열이 만들어집니다. 다음 예제는 <code>fish</code> 배열을 만듭니다.</p> +<pre>fish = ["Lion", , "Angel"]</pre> +<p>이 배열은 값을 가진 원소 두 개와 빈 원소 하나를 갖게됩니다. (<code>fish{{ mediawiki.external(0) }}</code>은 "Lion", <code>fish{{ mediawiki.external(1) }}</code>은 <code>undefined</code>, <code>fish{{ mediawiki.external(2) }}</code>는 "Angel"이라는 값을 가집니다.)</p> +<p>원소 목록 끝에 남겨둔 쉼표는 무시됩니다. 다음 예제에서 배열 길이는 3입니다. <code>myList{{ mediawiki.external(3) }}</code>은 만들어지지 않습니다. 그외에 목록에 있는 다른 쉼표들은 각각 새로운 원소를 나타냅니다.</p> +<pre>myList = ['home', , 'school', ];</pre> +<p>다음 예제에서 배열 길이는 4이고, <code>myList{{ mediawiki.external(0) }}</code>과 <code>myList{{ mediawiki.external(2) }}</code>는 비게 됩니다.</p> +<pre>myList = [ , 'home', , 'school'];</pre> +<p>다음 예제에서 배열 길이는 4이고 <code>myList{{ mediawiki.external(1) }}</code>과 <code>myList{{ mediawiki.external(3) }}</code>이 비게 됩니다. 오직 마지막 쉼표만 무시됩니다.</p> +<pre>myList = ['home', , 'school', , ];</pre> +<h4 id=".EB.B6.88.EB.A6.AC.EC.96.B8_.EC.83.81.EC.88.98.EA.B0.92" name=".EB.B6.88.EB.A6.AC.EC.96.B8_.EC.83.81.EC.88.98.EA.B0.92">불리언 상수값</h4> +<p>불리언 형은 두 가지 상수값을 가질 수 있는데, 그것은 <code>true</code>와 <code>false</code>입니다.</p> +<p><code>true</code>, <code>false</code>라는 기본(primitive) 불리언 값과 true, false 값의 불리언 개체를 혼동하지 마십시오. 불리언 개체는 기본 불리언 데이터 형을 감싸는 역할을 할 뿐입니다. 더 많은 정보는 <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Boolean_Object">불리언 개체</a>를 참조하십시오.</p> +<h4 id=".EC.A0.95.EC.88.98" name=".EC.A0.95.EC.88.98">정수</h4> +<p>10진수, 16진수, 8진수 정수를 쓸 수 있습니다. 10진수 정수 상수값은 0(영)으로 시작하지 않는 숫자의 나열입니다. 0(영)으로 시작하는 정수 상수값은 8진수입니다. 0x(또는 0X)로 시작하면 16진수입니다. 16진수는 0부터 9까지의 숫자와 a부터 f나 A부터 F까지의 문자를 포함할 수 있습니다. 8진수에는 0부터 7까지만 쓸 수 있습니다.</p> +<p>8진수 정수 상수값은 사용하지 말기를 추천하고 있으며, ECMA-262 표준 3판에서는 아예 제거되었습니다. 하위 호환성을 위해 JavaScript 1.5에서는 여전히 8진수 정수 상수값을 지원하고 있습니다.</p> +<p>몇 가지 정수 상수값을 예를 보여드리겠습니다.</p> +<pre class="eval">0, 117, -345 (10진수) +015, 0001, -077 (8진수) +0x1123, 0x00111, -0xF1A7 (16진수 또는 "hex") +</pre> +<h4 id=".EC.86.8C.EC.88.98_.EC.83.81.EC.88.98.EA.B0.92" name=".EC.86.8C.EC.88.98_.EC.83.81.EC.88.98.EA.B0.92">소수 상수값</h4> +<p>소수 상수값은 이런 부분으로 이뤄집니다.</p> +<ul> + <li>부호를 가질 수 있는(즉, "+"나 "-"로 시작할 수 있는) 10진수 정수,</li> + <li>소수점("."),</li> + <li>소수 부분(10진수),</li> + <li>지수 부분</li> +</ul> +<p>지수 부분은 "e"나 "E" 뒤에 숫자가 붙은 형태입니다. 숫자 앞에는 부호("+"나 "-")를 붙일 수도 있습니다. 소수 상수값은 적어도 하나의 숫자에 소수점 또는 지수 부분을 가져야 합니다.</p> +<p>소수 상수값의 몇 가지 예제를 보여드리겠습니다. 3.1415, -3.1E12, .1e12, 2E-12</p> +<h4 id=".EA.B0.9C.EC.B2.B4_.EC.83.81.EC.88.98.EA.B0.92" name=".EA.B0.9C.EC.B2.B4_.EC.83.81.EC.88.98.EA.B0.92">개체 상수값</h4> +<p>개체 상수값은 중괄호({}) 안에 특성(property) 이름과 그에 해당하는 값의 쌍을 나열한 것입니다. 문장(statement)의 시작 부분에 개체 상수값을 사용해서는 안됩니다. { 가 블럭의 시작을 나타내기 때문에, 에러가 나거나 의도하지 않은 동작을 보일 것입니다.</p> +<p>다음은 개체 상수값의 예입니다. <code>car</code> 개체의 첫 번째 원소는 <code>myCar</code>라는 특성을 정의하고 있습니다. 두 번째 원소는 <code>getCar</code> 특성을 정의하는데, <code>(CarTypes("Honda"));</code>라는 함수를 호출하고 있습니다. 세 번째 원소는 <code>special</code> 특성을 정의하는데에 <code>Sales</code>라는 변수를 사용합니다.</p> +<pre>var Sales = "Toyota"; + +function CarTypes(name) { + if(name == "Honda") + return name; + else + return "Sorry, we don't sell " + name + "."; +} + +car = {myCar: "Saturn", getCar: CarTypes("Honda"), special: Sales} + +document.write(car.myCar); // Saturn +document.write(car.getCar); // Honda +document.write(car.special); // Toyota</pre> +<p>개체 특성 이름에 정수 상수값이나 문자열 상수값을 사용할 수 있고, 개체 안에 다른 개체를 포함시킬 수도 있습니다. 다음 예제를 보십시오.</p> +<pre>car = {manyCars: {a: "Saab", b: "Jeep"}, 7: "Mazda"} + +document.write(car.manyCars.b); // Jeep +document.write(car[7]); // Mazda +</pre> +<p>다음 사항을 참고하십시오.</p> +<pre class="eval">foo = {a: "alpha", 2: "two"} +document.write (foo.a) // alpha +document.write (foo[2]) // two +//document.write (foo.2) // Error: missing ) after argument list +//document.write (foo[a]) // Error: a is not defined +document.write (foo["a"]) // alpha +document.write (foo["2"]) // two +</pre> +<h4 id=".EB.AC.B8.EC.9E.90.EC.97.B4_.EC.83.81.EC.88.98.EA.B0.92" name=".EB.AC.B8.EC.9E.90.EC.97.B4_.EC.83.81.EC.88.98.EA.B0.92">문자열 상수값</h4> +<p>문자열 상수값은 큰따옴표(")나 작은따옴표(')로 둘러싸인 0개 이상의 문자들 입니다. 문자열은 같은 종류의 따옴표로 묶어야 합니다. 즉, 작은따옴표 둘로 묶거나, 큰따옴표 둘로 묶어야 한다는 말입니다. 문자열 상수값의 예를 보여드리겠습니다.</p> +<ul> + <li>"blah"</li> + <li>'blah'</li> + <li>"1234"</li> + <li>"one line \n another line"</li> + <li>"John's cat"</li> +</ul> +<p>우 리는 문자열 상수값에 String 개체의 모든 메소드를 호출할 수 있습니다. JavaScript는 자동으로 문자열 상수값을 임시 String 개체로 만들어서 메소드를 호출한 후, 임시 String 개체를 제거합니다. 문자열 상수값에 <code>String.length</code> 특성을 사용할 수도 있습니다. 이렇게 말입니다.</p> +<ul> + <li>"John's cat".length</li> +</ul> +<p>우리가 특별하게 String 개체를 필요로 하는 경우가 아니라면 문자열 상수값을 사용해야만 합니다. String 개체에 대한 자세한 내용은 <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/String_Object">String 개체</a>를 보십시오.</p> +<h5 id=".EB.AC.B8.EC.9E.90.EC.97.B4.EC.97.90.EC.84.9C_.ED.8A.B9.EC.88.98.EB.AC.B8.EC.9E.90_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0" name=".EB.AC.B8.EC.9E.90.EC.97.B4.EC.97.90.EC.84.9C_.ED.8A.B9.EC.88.98.EB.AC.B8.EC.9E.90_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0">문자열에서 특수문자 사용하기</h5> +<p>다음 예제에서 볼 수 있듯이 일반적인 문자뿐만 아니라 특수문자도 문자열에 쓸 수 있습니다.</p> +<pre>"one line \n another line"</pre> +<p>JavaScript 문자열에 사용할 수 있는 특수문자를 표로 나타낸 것입니다.</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>문자</th> + <th>의미</th> + </tr> + <tr> + <td>\b</td> + <td>Backspace</td> + </tr> + <tr> + <td>\f</td> + <td>Form feed</td> + </tr> + <tr> + <td>\n</td> + <td>New line</td> + </tr> + <tr> + <td>\r</td> + <td>Carriage return</td> + </tr> + <tr> + <td>\t</td> + <td>Tab</td> + </tr> + <tr> + <td>\v</td> + <td>Vertical tab</td> + </tr> + <tr> + <td>\'</td> + <td>Apostrophe or single quote</td> + </tr> + <tr> + <td>\"</td> + <td>Double quote</td> + </tr> + <tr> + <td>\\</td> + <td>Backslash character (\).</td> + </tr> + <tr> + <td>\<i>XXX</i></td> + <td>세 자리 까지의 8진수 "XXX"로 지정하는 Latin-1 인코딩의 문자. 0부터 377 사이. 예를 들어, \251은 저작권 기호의 8진수 표현입니다.</td> + </tr> + <tr> + <td>\x<i>XX</i></td> + <td>두 자리 까지의 16진수 "XX"로 지정하는 Latin-1 인코딩의 문자. 00부터 FF 사이. 예를 들어, \xA9는 저작권 기호의 16진수 표현입니다.</td> + </tr> + <tr> + <td>\u<i>XXXX</i></td> + <td>네 자리의 16진수 "XXXX"로 지정하는 유니코드 문자. 예를 들어, \u00A9는 저작권 기호의 유니코드 표현입니다. <a href="ko/Core_JavaScript_1.5_Guide/Unicode#.EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C_.EC.9D.B4.EC.8A.A4.EC.BC.80.EC.9D.B4.ED.94.84_.EC.8B.9C.ED.80.80.EC.8A.A4">유니코드 이스케이프 시퀀스</a>를 보십시오.</td> + </tr> + </tbody> +</table> +<p><small><b>표 2.1: JavaScript 특수문자</b></small></p> +<h5 id=".EB.AC.B8.EC.9E.90_.EC.9D.B4.EC.8A.A4.EC.BC.80.EC.9D.B4.ED.94.84" name=".EB.AC.B8.EC.9E.90_.EC.9D.B4.EC.8A.A4.EC.BC.80.EC.9D.B4.ED.94.84">문자 이스케이프</h5> +<p>표 2.1에 없는 문자에 대해서는 역슬래시가 무시됩니다. 그러나 이러한 기능은 사용하지 않기를 권장하므로 사용을 피해야만 합니다.</p> +<p>역슬래시를 앞에 붙이면 문자열 안에 따옴표를 넣을 수 있습니다. 이것은 따옴표 "이스케이프(escaping)"라고 알려져 있습니다.</p> +<pre>var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service." +document.write(quote) +</pre> +<p>이 코드의 결과는 다음과 같습니다.</p> +<pre>He read "The Cremation of Sam McGee" by R.W. Service. +</pre> +<p>문자열 안에 역슬래시 문자를 넣고 싶으면 역슬래시 문자를 이스케이프시켜야 합니다. 예를 들어, <code>c:\temp</code> 라는 경로를 문자열에 할당하고 싶으면 다음과 같이 하면 됩니다.</p> +<pre>var home = "c:\\temp" +</pre> +<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Constants", "Core_JavaScript_1.5_Guide:Unicode") }}</p> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Literals", "fr": "fr/Guide_JavaScript_1.5/Constantes_litt\u00e9rales", "ja": "ja/Core_JavaScript_1.5_Guide/Literals", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Litera\u0142y" } ) }}</p> 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 new file mode 100644 index 0000000000..e5c40d23bf --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3/index.html @@ -0,0 +1,40 @@ +--- +title: Values +slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values +translation_of: Web/JavaScript/Guide/Grammar_and_types +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Values +--- +<h3 id=".EA.B0.92" name=".EA.B0.92"> 값 </h3> +<p>JavaScript는 다음과 같은 값 형식을 인식합니다. +</p> +<ul><li> <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Number">수</a>, 42나 3.14159 +</li><li> <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">논리적(불리언)</a> 값, <code>true</code>와 <code>false</code> +</li><li> <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/String">문자열</a>, "안녕!" +</li><li> <code>null</code>, null 값을 나타내는 특별한 키워드. <code>null</code>은 또한 기본(primitive) 값이기도 합니다. JavaScript는 대소문자를 구분하므로, <code>null</code>은 <code>Null</code>이나 <code>NULL</code>과는 다릅니다. +</li><li> <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Properties/undefined">undefined</a></code>, 값이 정의되지 않은 최상위 속성. <code>undefined</code>도 기본(primitive) 값입니다. +</li></ul> +<p>이렇게 조금 적어보이는 값 형식 또는 "자료형"이지만 훌륭한 기능을 작성할 수 있습니다. 정수와 실수 사이에 엄격한 구분은 없습니다. JavaScript에는 명시적인 날짜 자료형은 없습니다. 하지만 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Date">Date</a></code> 개체를 이용하면 됩니다. +<a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Object">Object</a>와 <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Function">함수</a>는 언어의 또다른 기초 요소입니다. 개체는 값을 포함할 수 있는 이름 붙은 어떤 것이라고 생각하면 되고, 함수는 프로그램이 수행할 수 있는 실행 절차라고 생각하면 됩니다. +</p> +<h4 id=".EC.9E.90.EB.A3.8C.ED.98.95_.EB.B3.80.ED.99.98" name=".EC.9E.90.EB.A3.8C.ED.98.95_.EB.B3.80.ED.99.98"> 자료형 변환 </h4> +<p>JavaScript는 동적 타입 언어입니다. 이 말은 변수를 선언할 때 타입을 지정하지 않아도 되고, 스크립트 실행중에 필요에 따라 자동으로 자료형이 바뀐다는 말입니다. 예를 들어 다음과 같이 변수를 선언할 수 있습니다. +</p> +<pre class="eval">var answer = 42 +</pre> +<p>그 후에 이 변수에 문자열 값을 할당할 수 있습니다. +</p> +<pre class="eval">answer = "Thanks for all the fish..." +</pre> +<p>JavaScript는 동적 타입 언어이기 때문에, 이렇게 대입하더라도 에러를 내지 않습니다. +</p><p>숫자와 문자열 값을 + 연산자로 계산하는 표현식에서, JavaScript는 숫자를 문자열로 변환합니다. 예를 들어 다음과 같은 문장을 생각해봅시다. +</p> +<pre class="eval">x = "The answer is " + 42 // returns "The answer is 42" +y = 42 + " is the answer" // returns "42 is the answer" +</pre> +<p>다른 연산자를 사용하는 문장에서는 숫자를 문자열로 변환하지 않습니다. +</p> +<pre class="eval">"37" - 7 // returns 30 +"37" + 7 // returns "377" +</pre> +<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:JavaScript_Overview", "Core_JavaScript_1.5_Guide:Variables") }} +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Values", "fr": "fr/Guide_JavaScript_1.5/Valeurs", "ja": "ja/Core_JavaScript_1.5_Guide/Values", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Warto\u015bci" } ) }} diff --git a/files/ko/conflicting/web/javascript/guide/index.html b/files/ko/conflicting/web/javascript/guide/index.html new file mode 100644 index 0000000000..d8d0156dc2 --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/index.html @@ -0,0 +1,21 @@ +--- +title: Predefined Core Objects +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects +translation_of: Web/JavaScript/Guide +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Predefined_Core_Objects +--- +<h3 id=".EB.AF.B8.EB.A6.AC_.EC.A0.95.EC.9D.98.EB.90.9C_.EA.B8.B0.EB.B3.B8_.EA.B0.9C.EC.B2.B4" name=".EB.AF.B8.EB.A6.AC_.EC.A0.95.EC.9D.98.EB.90.9C_.EA.B8.B0.EB.B3.B8_.EA.B0.9C.EC.B2.B4"> 미리 정의된 기본 개체 </h3> +<p>이 절에서는 기본 JavaScrip에 미리 정의된 개체에 대해서 설명하겠습니다. +</p> +<ul><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object">Array 개체</a> +</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Boolean_Object">Boolean 개체</a> +</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Date_Object">Date 개체</a> +</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Function_Object">Function 개체</a> +</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Math_Object">Math 개체</a> +</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Number_Object">Number 개체</a> +</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/RegExp_Object">RegExp 개체</a> +</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/String_Object">String 개체</a> +</li></ul> +<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Deleting_Properties", "Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Array_Object") }} +</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Core_Objects", "fr": "fr/Guide_JavaScript_1.5/Objets_pr\u00e9d\u00e9finis", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Core_Objects", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Obiekty_predefiniowane" } ) }} diff --git a/files/ko/conflicting/web/javascript/javascript_technologies_overview/index.html b/files/ko/conflicting/web/javascript/javascript_technologies_overview/index.html new file mode 100644 index 0000000000..b7d3de85bf --- /dev/null +++ b/files/ko/conflicting/web/javascript/javascript_technologies_overview/index.html @@ -0,0 +1,115 @@ +--- +title: The DOM and JavaScript +slug: The_DOM_and_JavaScript +tags: + - DOM + - JavaScript +--- +<h3 id=".ED.81.B0_.EA.B7.B8.EB.A6.BC" name=".ED.81.B0_.EA.B7.B8.EB.A6.BC">큰 그림</h3> + +<p>페이지 안 레이어 이동, 레이어, 팝업 메뉴 보이기와 감추기 등과 같은 비주얼 효과는 "<a href="ko/DHTML">DHTML</a>"이나 "Dynamic HTML"로 자주 참조됩니다. 일부 사람들은 표현(presentation)이 아니라 내용(content)을 다루기로 된 웹 페이지에서 이런 기술의 실제 쓰임을 묻습니다. 하지만 오늘날 실제 쓰임은 그 물음에 있습니다.</p> + +<p>내가 이 프로젝트에서 일하고 많은 웹마스터들과 연락한 뒤로, 웹 디자인 커뮤니티 대부분이 그들의 DHTML이 어떻게 동작하는 지 모른다는 사실이 생각났습니다. 대부분의 시간을 그들은 스크립트 저장소(repository) 사이트에 가서, 그들 웹 페이지에 그 코드를 그냥 복사하고 붙여넣습니다. 불행하게도 이들 사이트 대부분은 결코 "<a href="ko/DOM">DOM</a>"에 관해서는 이야기하지 않으면서 "javascript"와 "DHTML"은 이야기합니다. 비록 DOM이 오래된 개념이더라도 DOM이 최근에야 "평균 웹 디자이너 전문어(jargon)"의 부분이 되었다는 사실입니다.</p> + +<p>그 사이트를 W3C DOM을 위해 코딩할 가치가 있다고 사이트 임자에게 납득시키기는 Mozilla 같은 프로젝트를 위한 큰 도전입니다. 이는 때때로 많은 작업과 예전 브라우저를 위한 지원을 중단함을 뜻합니다. 또한 W3C DOM을 위한 지원에 관해 곧바로 참모습을 알아내는 큰 도전입니다. Netscape 6은 Netscape 4와 document.layers와 document.all를 쓰는 Internet Explorer를 위해 그들의 "JavaScript"를 작성했던 어리석은 웹 디자이너들에게 많은 혹평을 받았습니다. 매일 우리는 그들의 사이트를 얻도록 뉴스그룹에서, 개인 email로, Bugzilla로 되도록 공손하게 사람들을 돕기 위해 힘씁니다. 우리가 부딪친 문제 가운데 가장 큰 것은 <a href="ko/JavaScript">JavaScript</a>와 <a href="ko/DHTML">DHTML</a> 그리고 <a href="ko/DOM">DOM</a> 사이의 혼동(confusion)입니다. 이 문서는 이를 정리하고 이 화려하고 쓸모 있는 기술 사이의 관계를 설명하려는 하나의 시도입니다.</p> + +<h3 id="JavaScript.2C_.EC.9B.B9_.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8C.85_.EC.96.B8.EC.96.B4" name="JavaScript.2C_.EC.9B.B9_.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8C.85_.EC.96.B8.EC.96.B4">JavaScript, 웹 스크립팅 언어</h3> + +<p><a href="ko/JavaScript">JavaScript</a>은 Netscape Communications Corp에서 오늘날 Mozilla 프로젝트의 리더 가운데 한 명인 Brendan Eich가 처음 개발한 "object scripting language"입니다. Mozilla가 쓰는 JavaScript 엔진은 <a href="ko/SpiderMonkey">SpiderMonkey</a>입니다. 이 엔진은 ECMA-262 개정 3 명세(specification)를 따릅니다. JavaScript는 또한 <a href="ko/ECMAScript">ECMAScript</a>로 알려졌습니다(하지만 상세한 설명은 링크된 페이지를 보세요).</p> + +<p>일반인의 오해와는 달리, JavaScript는 "Interpretive Java"가 아닙니다. 줄여 말하면, JavaScript는 개체 생성에 기반을 둔 원형(prototype)을 지원하는 dynamic scripting language입니다. 기본 구문(syntax)은 언어를 배우는 데 필요한 새로운 개념의 수를 줄이기 위해 Java와 C++ 둘 다와 개념에 있어 비슷합니다. JavaScript가 대단한 점은 혹시 여러분이 기본 프로그래밍(간단한 DHTML에서 필요한 것 같은)을 하고 싶은 경우 배우기 정말 쉽다는 점입니다. 불분명한 변수형, 정말 쓰기 쉬운 문자열, 전체 플랫폼 중립성(neutrality) 등. 또한 고급 코더들을 위해 개체 중심(object-oriented) 언어와 절차(procedural) 언어 둘 다로 기능합니다.</p> + +<p>JavaScript에 관한 이 단락 대부분은 <a class="external" href="http://mozilla.org/js">Mozilla JavaScript 페이지</a>에서 가져왔음을 알게 됩니다. 가장 최근 ECMA 명세는 <a class="external" href="http://www.mozilla.org/js/language/">여기</a>에서 찾습니다.</p> + +<h3 id="Document_Object_Model.2C_.EC.96.B8.EC.96.B4_.EC.A4.91.EB.A6.BD_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4_.EC.A7.91.ED.95.A9" name="Document_Object_Model.2C_.EC.96.B8.EC.96.B4_.EC.A4.91.EB.A6.BD_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4_.EC.A7.91.ED.95.A9">Document Object Model, 언어 중립 인터페이스 집합</h3> + +<p>JavaScript는 여러분이 DOM 개체를 운영(operate)하고 개체를 프로그램으로 조작(manipulate)하게 하는 프로그래밍 언어이지만, DOM은 여러분이 작업하는 문서의 부분을 검색(retrieve), 수정(modify), 갱신(update), 삭제(delete)하는 메소드(method)와 프로퍼티(property)를 제공합니다. 예를 들어, 여러분이 DOM을 써서 HTML textfield 값을 문자열로 검색할 지도 모릅니다. 그렇다면 여러분은 뜻있는 문장이 되도록 그 문자열을 다른 문자열에 연결(concatenate)하는 JavaScript "+" 연산자를 쓸 수 있습니다. 그리고 나서 여러분은 dialog에서 사용자에게 그 문자열을 표시하기 위해 DOM "alert()" 메소드를 씁니다. 또한 아래 예제를 보세요.</p> + +<p>만약 웹페이지가 수입한 스웨덴 가구 한 점이라면, DOM은 선반, 나사못(bolt), Allen 렌치(wrench)와 드라이버 같은 각 부분의 도해입니다. 각 부분을 서로 조립하는 법과 많은 언어로 각 부분을 쓰는 법에 관한 명령 작성이 가능합니다. 하지만 여러분은 오직 여러분이 이해한 언어로 작성한 부분을 씁니다. 설명서는 실제 개체(브라우저의 렌더링 엔진)를 나타내는 개체의 도해(DOM)를 참조하는 작성 명령(JavaScript)을 써서 함께 가구를 만들기 쉽게 합니다. (유추한 Jonathan에게 감사를 올립니다!)</p> + +<p>DOM에 있는 이 "언어 중립"이란 과대광고(hype)는 무엇일까요? DOM에 접근하는 데 쓰이는 유일한 언어가 JavaScript라면 왜 DOM이 언어 중립성을 띨까요? 글쎄요, 그것은 딱 맞지 않습니다. 예를 들어, Mozilla는 사용자 인터페이스를 위해 내부에 C++와 JavaScript로 작성된 DOM을 씁니다. 이를테면, 편집기는 Composer 모듈로 페이지를 작성(compose)할 때 여러분이 보는 HTML을 삽입(insert), 수정(modify), 삭제(delete)하기 위해 광범위하게 DOM을 씁니다. 다른 알려진 DOM 구현(implementation)은 아마도 <a class="external" href="http://users.erols.com/enno/index.html">Perl</a>, <a class="external" href="http://www.docuverse.com/domsdk/index.html">Java</a>, <a class="external" href="http://www.vivid-creations.com/dom/index.htm">ActiveX</a>, <a class="external" href="http://fourthought.com/4Suite/4DOM">Python</a>, 그리고 다른 것들을 포함합니다. 물론 이는 오직 DOM의 언어 중립성 덕분에 가능합니다.</p> + +<h3 id="DOM.EA.B3.BC_JavaScript_-_.EB.AC.B4.EC.97.87.EC.9D.B4_.EB.AC.B4.EC.97.87.EC.9D.84_.ED.95.98.EB.8A.94.EA.B0.80.3F" name="DOM.EA.B3.BC_JavaScript_-_.EB.AC.B4.EC.97.87.EC.9D.B4_.EB.AC.B4.EC.97.87.EC.9D.84_.ED.95.98.EB.8A.94.EA.B0.80.3F">DOM과 JavaScript - 무엇이 무엇을 하는가?</h3> + +<p>우리는 이 문서의 본론에 이르렀습니다. 각각 무엇을 할까요? 내 웹 페이지에 끼워 넣은(embed) 스크립트에서, DOM은 무엇이고 JavaScript는 무엇일까요? 간단한 예를 하나 더 자세히 보죠. 예는 우리가 "<code>anchorTags</code>"라고 부르는 NodeList에서 모든 <span class="nowiki"><a></span> tag을 검색합니다. 그리고 나서 각 anchor tag(<code>anchorTags</code> NodeList의 각 요소)의 "href" 속성값을 경고(alert)로 띄웁니다.</p> + +<p>파란색은 JavaScript, 빨간색은 DOM입니다.</p> + +<pre class="eval"><span class="highlightblue">var anchorTags = <span class="highlightred">document.getElementsByTagName("a")</span>; +for (var i = 0; i < <span class="highlightred">anchorTags.length</span> ; i++) +{ + <span class="highlightred">alert</span>("Href of " + i + "-th element is : " + <span class="highlightred">anchorTags[i].href</span> + "\n"); +}</span> +</pre> + +<h4 id=".EC.84.A4.EB.AA.85" name=".EC.84.A4.EB.AA.85">설명</h4> + +<p>이 코드 조각(snippet)은 기본 JavaScript가 무엇인지, 그리고 DOM이 무엇인지를 보입니다.</p> + +<dl> + <dt><span class="highlightblue">var anchorTags =</span></dt> + <dd>이는 "<code>anchorTags</code>"로 부르는 JavaScript 변수를 만듭니다.</dd> +</dl> + +<dl> + <dt><span class="highlightred">document.getElementsByTagName("a")</span></dt> + <dd><code>Document</code> 인터페이스는 DOM1 Core에서 정의한 첫 번째 인터페이스이고 <code>document</code>는 <code>Document</code> 인터페이스를 구현하는 host 개체입니다. document는 여러분의 페이지에 있는 모든 것을 지닙니다.<br> + DOM1 Core는 <code>Document</code> 인터페이스에 <code>getElementsByTagName()</code> 메소드를 정의합니다. 메소드는 그 함수에 pass되는 매개변수와 일치하는 모든 tag의 NodeList (노드를 지니는 DOM 고유 배열의 한 종류)에서 문서 소스에 나오는 순서대로 검색합니다. 따라서 이제 <code>anchorTags</code> 변수는 NodeList입니다.</dd> +</dl> + +<dl> + <dt><span class="highlightblue">;</span></dt> + <dd>기본 명령 끝(end-of-instruction) 쌍반점(쎄미콜론, semicolon). JavaScript 문법.</dd> +</dl> + +<dl> + <dt><span class="highlightblue">for (var i = 0; i <</span></dt> + <dd>프로그래밍 언어의 특징을 잘 나타내는 "for" 루프(loop). 이는 우리가 <code>anchorTags</code> NodeList에 포함된 각 노드를 샅샅이 거치게 합니다. 변수 "<code>i</code>"의 선언을 주의하세요. 역시 JavaScript.</dd> +</dl> + +<dl> + <dt><span class="highlightred">anchorTags.length</span></dt> + <dd>DOM1 Core는 <code>NodeList</code> 인터페이스의 <code>length</code> 프로퍼티를 정의합니다. 프로퍼티는 NodeList에 포함된 노드수(정수)를 반환합니다. JavaScript 배열은 또한 <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Array/length"><code>length</code> 프로퍼티</a>도 있음을 덧붙입니다.</dd> +</dl> + +<dl> + <dt><span class="highlightblue">; i++) {</span></dt> + <dd>1씩 증가하는 전형적인 JavaScript 변수.</dd> +</dl> + +<dl> + <dt><span class="highlightred">alert(</span></dt> + <dd><code>alert()</code>은 여러분이 pass한 매개변수(문자열)을 팝업하는 DOM 메소드입니다. DOM level 0이나 DOM0으로 부르는 것의 일부임을 유의하세요. DOM0은 일부 브라우저에서 지원되는 인터페이스 집합이지만 DOM 명세의 일부는 아닙니다.</dd> +</dl> + +<dl> + <dt><span class="highlightblue">"Href of this a element is : " +</span></dt> + <dd>문자열 리터럴(literal)과 문자열 연결 연산자. JavaScript.</dd> +</dl> + +<dl> + <dt><span class="highlightred">anchorTags{{ mediawiki.external('i') }}.href</span></dt> + <dd>"<code>href</code>"는 DOM1 HTML 명세에 정의된 <code>HTMLAnchorElement</code> 인터페이스의 프로퍼티입니다. 있다면, 프로퍼티는 anchor 요소의 <code>href</code> 속성값을 반환합니다.<br> + 우리는 또한 배열의 <code>i</code> 번째 항목(item)에 접근하기 위해 JavaScript에서 쓰는 구문과 같은 <code>anchorTags{{ mediawiki.external('i') }}</code>를 씁니다. NodeList의 항목에 접근하기 위해 언어 중립성을 띄는 "DOM 방식"은 <code>NodeList</code> 인터페이스에 정의된 <code>item()</code> 메소드(<code>anchorTags.item(1).href</code>)를 씁니다. 하지만 JavaScript 구현 대부분은 더 간단한 배열 방식 구문을 쓰도록 하고 그게 사람들 대부분이 실제로 쓰는 방식입니다.</dd> +</dl> + +<dl> + <dt><span class="highlightblue">+ "\n");</span></dt> + <dd>추가 문자열 연결. 문자열의 끝에 carriage return을 삽입합니다.</dd> +</dl> + +<dl> + <dt><span class="highlightblue">}</span></dt> + <dd>"for" 루프의 끝.</dd> +</dl> + +<div class="originaldocinfo"> +<p><strong>원본 문서 정보</strong></p> + +<ul> + <li>저자: Fabian Guisset <fguisset at softhome dot net></li> + <li>저작권 정보: © 1998-2005 by individual mozilla.org contributors; 내용은 <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a> 아래에서 이용 가능합니다</li> +</ul> +</div> + +<p>{{ languages( { "en": "en/The_DOM_and_JavaScript", "fr": "fr/Le_DOM_et_JavaScript" } ) }}</p> 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 new file mode 100644 index 0000000000..6e90207661 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/boolean/index.html @@ -0,0 +1,82 @@ +--- +title: Boolean.prototype +slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +tags: + - Boolean + - JavaScript + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +--- +<div>{{JSRef}}</div> + +<p><strong><code>Boolean.prototype</code></strong> 속성은 {{jsxref("Boolean")}} 생성자의 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<div>{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}</div> + + + +<h2 id="설명">설명</h2> + +<p>{{jsxref("Boolean")}} 인스턴스는 <code>Boolean.prototype</code>을 상속받습니다. 생성자의 프로토타입 객체를 사용해 모든 <code>Boolean</code> 인스턴스에 속성이나 메서드를 추가할 수 있습니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>Boolean.prototype.constructor</code></dt> + <dd>인스턴스의 프로토타입을 생성한 함수를 반환합니다. 기본값은 {{jsxref("Boolean")}} 함수입니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>{{jsxref("Boolean")}} 객체의 소스를 포함한 문자열을 반환합니다. 반환 문자열을 사용해 동일한 객체를 생성할 수 있습니다. {{jsxref("Object.prototype.toSource()")}} 메서드를 재정의합니다.</dd> + <dt>{{jsxref("Boolean.prototype.toString()")}}</dt> + <dd>객체의 값에 따라 문자열 <code>"true"</code> 또는 <code>"false"</code>를 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.</dd> + <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt> + <dd>{{jsxref("Boolean")}} 객체의 원시 값을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 재정의합니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Boolean.prototype")}}</p> 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 new file mode 100644 index 0000000000..06e1bba5f7 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,183 @@ +--- +title: Date.prototype +slug: Web/JavaScript/Reference/Global_Objects/Date/prototype +tags: + - Date + - JavaScript + - Property + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date +translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype +--- +<div>{{JSRef}}</div> + +<p><strong><code>Date.prototype</code></strong> 속성은 {{jsxref("Date")}} 생성자의 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0, 0, 1)}}</div> + +<h2 id="설명">설명</h2> + +<p>JavaScript {{jsxref("Date")}} 인스턴스는 <code>Date.prototype</code>을 상속합니다. 생성자의 프로토타입을 변경해 모든 <code>Date</code> 인스턴스의 속성과 메서드를 수정할 수 있습니다.</p> + +<p>2000년대 달력과의 호환성을 위해 연도는 언제나 완전하게 네 자리 숫자로 작성해야 합니다. 즉 98 대신 1998이 올바른 작성법입니다. <code>Date</code>는 완전한 연도 설정에 도움이 될 {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}, {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}, {{jsxref("Date.prototype.getUTCFullYear()", "getUTCFullYear()")}}, {{jsxref("Date.prototype.setUTCFullYear()", "setUTCFullYear()")}} 메서드를 가지고 있습니다.</p> + +<p>ECMAScript 6부터 <code>Date.prototype</code>은 {{jsxref("Date")}} 인스턴스가 아닌 평범한 객체입니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>Date.prototype.constructor</code></dt> + <dd>인스턴스 생성에 사용한 생성자를 반환합니다. 기본값은 {{jsxref("Date")}}입니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<h3 id="접근자">접근자</h3> + +<dl> + <dt>{{jsxref("Date.prototype.getDate()")}}</dt> + <dd>주어진 날짜의 일(1-31)을 현지 시간에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getDay()")}}</dt> + <dd>주어진 날짜의 요일(0-6)을 현지 시간에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getFullYear()")}}</dt> + <dd>주어진 날짜의 연도(4자리 수)를 현지 시간에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getHours()")}}</dt> + <dd>주어진 날짜의 시(0-23)를 현지 시간에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getMilliseconds()")}}</dt> + <dd>주어진 날짜의 밀리초(0-999)를 현지 시간에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getMinutes()")}}</dt> + <dd>주어진 날짜의 분(0-59)을 현지 시간에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getMonth()")}}</dt> + <dd>주어진 날짜의 월(0-11)을 현지 시간에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getSeconds()")}}</dt> + <dd>주어진 날짜의 초(0-59)를 현지 시간에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getTime()")}}</dt> + <dd>주어진 날짜와 1970년 1월 1일 0시 0분(UTC)의 차이를 밀리초로 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getTimezoneOffset()")}}</dt> + <dd>현재 로케일의 시간대 차이를 분으로 환산해 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getUTCDate()")}}</dt> + <dd>주어진 날짜의 일(1-31)을 UTC에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getUTCDay()")}}</dt> + <dd>주어진 날짜의 요일(0-6)을 UTC에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getUTCFullYear()")}}</dt> + <dd>주어진 날짜의 연도(4자리 수)를 UTC에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getUTCHours()")}}</dt> + <dd>주어진 날짜의 시(0-23)를 UTC에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt> + <dd>주어진 날짜의 밀리초(0-999)를 UTC에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getUTCMinutes()")}}</dt> + <dd>주어진 날짜의 분(0-59)을 UTC에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getUTCMonth()")}}</dt> + <dd>주어진 날짜의 월(0-11)을 UTC에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getUTCSeconds()")}}</dt> + <dd>주어진 날짜의 초(0-59)를 UTC에 맞춰 반환합니다.</dd> + <dt>{{jsxref("Date.prototype.getYear()")}} {{deprecated_inline}}</dt> + <dd>주어진 날짜의 연도(주로 두세자리 숫자)를 현지 시간에 맞춰 반환합니다. {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}를 사용하세요.</dd> +</dl> + +<h3 id="설정자">설정자</h3> + +<dl> + <dt>{{jsxref("Date.prototype.setDate()")}}</dt> + <dd>Sets the day of the month for a specified date according to local time.</dd> + <dt>{{jsxref("Date.prototype.setFullYear()")}}</dt> + <dd>Sets the full year (e.g. 4 digits for 4-digit years) for a specified date according to local time.</dd> + <dt>{{jsxref("Date.prototype.setHours()")}}</dt> + <dd>Sets the hours for a specified date according to local time.</dd> + <dt>{{jsxref("Date.prototype.setMilliseconds()")}}</dt> + <dd>Sets the milliseconds for a specified date according to local time.</dd> + <dt>{{jsxref("Date.prototype.setMinutes()")}}</dt> + <dd>Sets the minutes for a specified date according to local time.</dd> + <dt>{{jsxref("Date.prototype.setMonth()")}}</dt> + <dd>Sets the month for a specified date according to local time.</dd> + <dt>{{jsxref("Date.prototype.setSeconds()")}}</dt> + <dd>Sets the seconds for a specified date according to local time.</dd> + <dt>{{jsxref("Date.prototype.setTime()")}}</dt> + <dd>Sets the {{jsxref("Date")}} object to the time represented by a number of milliseconds since January 1, 1970, 00:00:00 UTC, allowing for negative numbers for times prior.</dd> + <dt>{{jsxref("Date.prototype.setUTCDate()")}}</dt> + <dd>Sets the day of the month for a specified date according to universal time.</dd> + <dt>{{jsxref("Date.prototype.setUTCFullYear()")}}</dt> + <dd>Sets the full year (e.g. 4 digits for 4-digit years) for a specified date according to universal time.</dd> + <dt>{{jsxref("Date.prototype.setUTCHours()")}}</dt> + <dd>Sets the hour for a specified date according to universal time.</dd> + <dt>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt> + <dd>Sets the milliseconds for a specified date according to universal time.</dd> + <dt>{{jsxref("Date.prototype.setUTCMinutes()")}}</dt> + <dd>Sets the minutes for a specified date according to universal time.</dd> + <dt>{{jsxref("Date.prototype.setUTCMonth()")}}</dt> + <dd>Sets the month for a specified date according to universal time.</dd> + <dt>{{jsxref("Date.prototype.setUTCSeconds()")}}</dt> + <dd>Sets the seconds for a specified date according to universal time.</dd> + <dt>{{jsxref("Date.prototype.setYear()")}} {{deprecated_inline}}</dt> + <dd>Sets the year (usually 2-3 digits) for a specified date according to local time. Use {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} instead.</dd> +</dl> + +<h3 id="변환_접근자">변환 접근자</h3> + +<dl> + <dt>{{jsxref("Date.prototype.toDateString()")}}</dt> + <dd>Returns the "date" portion of the {{jsxref("Date")}} as a human-readable string like 'Thu Apr 12 2018'</dd> + <dt>{{jsxref("Date.prototype.toISOString()")}}</dt> + <dd>Converts a date to a string following the ISO 8601 Extended Format.</dd> + <dt>{{jsxref("Date.prototype.toJSON()")}}</dt> + <dd>Returns a string representing the {{jsxref("Date")}} using {{jsxref("Date.prototype.toISOString()", "toISOString()")}}. Intended for use by {{jsxref("JSON.stringify()")}}.</dd> + <dt>{{jsxref("Date.prototype.toGMTString()")}} {{deprecated_inline}}</dt> + <dd>Returns a string representing the {{jsxref("Date")}} based on the GMT (UT) time zone. Use {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}} instead.</dd> + <dt>{{jsxref("Date.prototype.toLocaleDateString()")}}</dt> + <dd>Returns a string with a locality sensitive representation of the date portion of this date based on system settings.</dd> + <dt>{{jsxref("Date.prototype.toLocaleFormat()")}} {{non-standard_inline}}</dt> + <dd>Converts a date to a string, using a format string.</dd> + <dt>{{jsxref("Date.prototype.toLocaleString()")}}</dt> + <dd>Returns a string with a locality sensitive representation of this date. Overrides the {{jsxref("Object.prototype.toLocaleString()")}} method.</dd> + <dt>{{jsxref("Date.prototype.toLocaleTimeString()")}}</dt> + <dd>Returns a string with a locality sensitive representation of the time portion of this date based on system settings.</dd> + <dt>{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Returns a string representing the source for an equivalent {{jsxref("Date")}} object; you can use this value to create a new object. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd> + <dt>{{jsxref("Date.prototype.toString()")}}</dt> + <dd>Returns a string representing the specified {{jsxref("Date")}} object. Overrides the {{jsxref("Object.prototype.toString()")}} method.</dd> + <dt>{{jsxref("Date.prototype.toTimeString()")}}</dt> + <dd>Returns the "time" portion of the {{jsxref("Date")}} as a human-readable string.</dd> + <dt>{{jsxref("Date.prototype.toUTCString()")}}</dt> + <dd>Converts a date to a string using the UTC timezone.</dd> + <dt>{{jsxref("Date.prototype.valueOf()")}}</dt> + <dd>Returns the primitive value of a {{jsxref("Date")}} object. Overrides the {{jsxref("Object.prototype.valueOf()")}} method.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5', 'Date.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.prototype")}}</p> 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 new file mode 100644 index 0000000000..6e13afb6db --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/internalerror/index.html @@ -0,0 +1,101 @@ +--- +title: InternalError.prototype +slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/InternalError +translation_of_original: Web/JavaScript/Reference/Global_Objects/InternalError/prototype +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p><code><strong>InternalError.prototype </strong></code>속성은 {{jsxref("InternalError")}} 생성자의 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p>모든 {{jsxref("InternalError")}} 인스턴스는 <code>InternalError.prototype</code> 으로부터 상속받습니다. 프로토타입은 모든 인스턴스에 속성이나 메소드를 추가하거나 하는 데에 사용할 수 있습니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>InternalError.prototype.constructor</code></dt> + <dd>인스턴스의 프로토타입을 생성하는 함수를 명시합니다. </dd> + <dt>{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}</dt> + <dd>에러 메시지. {{jsxref("Error")}} 로부터 상속받습니다. </dd> + <dt>{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}</dt> + <dd>에러명. {{jsxref("Error")}} 로부터 상속받습니다.</dd> + <dt>{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}</dt> + <dd>에러를 발생시킨 파일의 경로. {{jsxref("Error")}} 로부터 상속받습니다.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}</dt> + <dd>에러를 발생시킨 파일의 라인 넘버. {{jsxref("Error")}} 로부터 상속받습니다.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}</dt> + <dd>에러를 발생 시킨 라인의 컬럼 넘버. {{jsxref("Error")}} 로부터 상속받습니다.</dd> + <dt>{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}</dt> + <dd>스택 트레이스. {{jsxref("Error")}} 로부터 상속받습니다. </dd> +</dl> + +<h2 id="메소드">메소드</h2> + +<p>비록 {{jsxref("InternalError")}}의 프로토타입 객체는 고유의 메소드를 가지고 있지는 않습니다. 하지만, {{jsxref("InternalError")}} 인스턴스는 프로토타입 체인을 통해 몇 가지의 메소드를 상속 받습니다.</p> + +<h2 id="스펙">스펙</h2> + +<p>Not part of any specifications.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> 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 new file mode 100644 index 0000000000..2f1b031b39 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html @@ -0,0 +1,87 @@ +--- +title: Intl.DateTimeFormat.prototype +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Property + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +--- +<div>{{JSRef}}</div> + +<p><strong><code>Intl.DateTimeFormat.prototype</code></strong> 속성은 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} 생성자의 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p><code>Intl.DateTimeFormat</code> 인스턴스에 대한 설명은 {{jsxref("DateTimeFormat")}} 문서를 참고하세요.</p> + +<p>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} 인스턴스는 <code>Intl.DateTimeFormat.prototype</code>을 상속합니다. 프로토타입 객체를 변경하면 모든 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} 인스턴스가 영향을 받습니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>Intl.DateTimeFormat.prototype.constructor</code></dt> + <dd>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}에 대한 참조입니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format()")}}</dt> + <dd>주어진 날짜에 {{jsxref("DateTimeFormat")}} 객체의 로케일과 서식 설정을 적용해 반환합니다.</dd> +</dl> + +<dl> + <dt>{{jsxref("DateTimeFormat.formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}</dt> + <dd>서식을 적용한 날짜 문자열의 각 부분을 객체로 표현해서 {{jsxref("Array")}}로 반환합니다. 반환 값은 로케일별 커스텀 서식에 사용할 수 있습니다.</dd> + <dt>{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}</dt> + <dd>객체 인스턴스 생성 때 주어진 로케일과 서식 설정이 어떻게 반영되었나 나타내는 새로운 객체를 반환합니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td> + <td>{{Spec2('ES Int 1.0')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES Int 2.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td> + <td>{{Spec2('ES Int 2.0')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype', 'Intl.DateTimeFormat.prototype')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.prototype")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li> +</ul> 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 new file mode 100644 index 0000000000..fcbaa6c247 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html @@ -0,0 +1,86 @@ +--- +title: Intl.NumberFormat.prototype +slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype +tags: + - Internationalization + - Intl + - JavaScript + - NumberFormat + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype +--- +<div>{{JSRef}}</div> + +<p><strong><code>Intl.NumberFormat.prototype</code></strong> 속성은 {{jsxref("NumberFormat", "Intl.NumberFormat")}} 생성자의 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p><code>Intl.NumberFormat</code> 인스턴스에 대한 설명은 {{jsxref("NumberFormat")}} 문서를 참고하세요.</p> + +<p>{{jsxref("NumberFormat", "Intl.NumberFormat")}} 인스턴스는 <code>Intl.NumberFormat.prototype</code>을 상속합니다. 프로토타입 객체를 변형하면 모든 {{jsxref("NumberFormat", "Intl.NumberFormat")}} 인스턴스가 영향을 받습니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>Intl.NumberFormat.prototype.constructor</code></dt> + <dd><code>Intl.NumberFormat</code>에 대한 참조입니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format()")}}</dt> + <dd>주어진 숫자에 {{jsxref("NumberFormat")}} 객체의 로케일과 서식 설정을 적용해 반환합니다.</dd> +</dl> + +<dl> + <dt>{{jsxref("NumberFormat.formatToParts", "Intl.NumberFormat.prototype.formatToParts()")}}</dt> + <dd>서식을 적용한 숫자의 각 부분을 객체로 표현해서 {{jsxref("Array")}}로 반환합니다. 반환 값은 로케일별 커스텀 서식에 사용할 수 있습니다.</dd> + <dt>{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}</dt> + <dd>객체 인스턴스 생성 때 주어진 로케일과 콜레이션 설정이 어떻게 반영되었나 나타내는 새로운 객체를 반환합니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td> + <td>{{Spec2('ES Int 1.0')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES Int 2.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td> + <td>{{Spec2('ES Int 2.0')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype', 'Intl.NumberFormat.prototype')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Intl.NumberFormat.prototype")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li> +</ul> 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 new file mode 100644 index 0000000000..3445bf2847 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,87 @@ +--- +title: Map.prototype +slug: Web/JavaScript/Reference/Global_Objects/Map/prototype +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map +translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>Map</strong></code><strong><code>.prototype</code></strong> property는 {{jsxref("Map")}}의 프로토 타입을 나타낸다.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description">Description</h2> + +<p>{{jsxref("Map")}} instance는 {{jsxref("Map.prototype")}}를 상속한다. Constructor의 프로토타입에 property와 method를 추가함으로써 모든 <code>Map</code> 인스턴스에서 사용 가능하게끔 만들 수 있다.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Map.prototype.constructor</code></dt> + <dd>인스턴스의 프로토타입을 만드는 함수를 반환한다. 이것 {{jsxref("Map")}} 함수의 기본 값이다.</dd> + <dt>{{jsxref("Map.prototype.size")}}</dt> + <dd><code>Map</code> 객체에 들어있는 key/value pair의 수를 반환한다.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Map.prototype.clear()")}}</dt> + <dd><code>Map</code> 객체의 모든 key/value pair를 제거한다.</dd> + <dt>{{jsxref("Map.delete", "Map.prototype.delete(key)")}}</dt> + <dd>주어진 키(Key)와 해당되는 값(Value)를 제거하고 제거하기 전에 <code>Map.prototype.has(key)가 반환했던 값을 반환한다.</code> 그 후의 <code>Map.prototype.has(key)<font face="Open Sans, arial, sans-serif">는 </font></code><code>false를 반환한다.</code></dd> + <dt>{{jsxref("Map.prototype.entries()")}}</dt> + <dd><code>Map</code> 객체 안의 모든 요소들을 <strong><code>[key, value] 형태의 </code>array </strong>로 집어넣은 순서대로 가지고 있는 <code>Iterator 객체를 반환한다.</code></dd> + <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt> + <dd><code>Map</code> 객체 안에 존재하는 각각의 key/value pair에 집어넣은 순서대로 callbackFn을 부른다. 만약 thisArg 매개변수가 제공되면, 이것이 각 callback의 this 값으로 사용된다.</dd> + <dt>{{jsxref("Map.get", "Map.prototype.get(key)")}}</dt> + <dd>주어진 키(Key)에 해당되는 값(value)을 반환하고, 만약 없으면 <code>undefined를 반환한다.</code></dd> + <dt>{{jsxref("Map.has", "Map.prototype.has(key)")}}</dt> + <dd><code>Map 객체 안에 주어진 </code>key/value pair가 있는지 검사하고 Boolean 값을 반환한다.</dd> + <dt>{{jsxref("Map.prototype.keys()")}}</dt> + <dd><code>Map</code> 객체 안의 모든 <strong>키(Key)</strong>들을 집어넣은 순서대로 가지고 있는 <code>Iterator 객체를 반환한다.</code></dd> + <dt>{{jsxref("Map.set", "Map.prototype.set(key, value)")}}</dt> + <dd><code>Map 객체에 주어진 키</code>(Key)에 값(Value)를 집어넣고, <code>Map 객체를 반환한다.</code></dd> + <dt>{{jsxref("Map.prototype.values()")}}</dt> + <dd><code>Map</code> 객체 안의 모든 <strong>값</strong><strong>(Value)</strong>들을 집어넣은 순서대로 가지고 있는 <code>Iterator 객체를 반환한다.</code></dd> + <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt> + <dd><code>Map</code> 객체 안의 모든 요소들을 <strong><code>[key, value] 형태의 </code>array </strong>로 집어넣은 순서대로 가지고 있는 <code>Iterator 객체를 반환한다.</code></dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("javascript.builtins.Map.prototype")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Set.prototype")}}</li> +</ul> 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 new file mode 100644 index 0000000000..2bf39d20f9 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,91 @@ +--- +title: Number.prototype +slug: Web/JavaScript/Reference/Global_Objects/Number/prototype +tags: + - JavaScript + - Number + - Property + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number +translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype +--- +<div>{{JSRef}}</div> + +<p><strong><code>Number.prototype</code></strong> 속성은 {{jsxref("Number")}} 생성자의 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p>모든 {{jsxref("Number")}} 인스턴스는 <code>Number.prototype</code>을 상속합니다. {{jsxref("Number")}} 생성자의 프로토타입 객체는 모든 {{jsxref( "Number")}} 인스턴스에 영향을 미치도록 수정할 수 있습니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>Number.prototype.constructor</code></dt> + <dd>이 객체의 인스턴스를 생성한 함수를 반환합니다. 기본적으로 {{jsxref("Number")}} 객체 입니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("Number.prototype.toExponential()")}}</dt> + <dd>숫자의 지수표기법 표현을 문자열로 반환합니다.</dd> + <dt>{{jsxref("Number.prototype.toFixed()")}}</dt> + <dd>숫자의 고정소수점 표현을 문자열로 반환합니다.</dd> + <dt>{{jsxref("Number.prototype.toLocaleString()")}}</dt> + <dd>숫자의 표현을 특정 언어에 맞춘 형식의 문자열로 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 오버라이드 합니다.</dd> + <dt>{{jsxref("Number.prototype.toPrecision()")}}</dt> + <dd>지정한 정밀도로 숫자를 나타내는 문자열을 반환합니다. 고정소수점 혹은 지수표기법으로 표현합니다.</dd> + <dt>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>지정한 {{jsxref("Number")}} 객체를 나타내는 객체 리터럴을 반환합니다. 이 값을 사용하여 새 객체를 만들 수 있습니다. {{jsxref("Object.prototype.toSource()")}} 메서드를 오버라이드 합니다.</dd> + <dt>{{jsxref("Number.prototype.toString()")}}</dt> + <dd>지정된 기수(기본 10진수)로 지정된 객체를 문자열로 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 오버라이드 합니다.</dd> + <dt>{{jsxref("Number.prototype.valueOf()")}}</dt> + <dd>지정한 객체의 기본 자료형(primitive) 값을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 오버라이드 합니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Number.prototype")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Number")}}</li> +</ul> 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 new file mode 100644 index 0000000000..8f7b08793f --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,219 @@ +--- +title: Object.prototype +slug: Web/JavaScript/Reference/Global_Objects/Object/prototype +tags: + - JavaScript + - Object + - Property + - Reference + - 프로토타입 +translation_of: Web/JavaScript/Reference/Global_Objects/Object +translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.prototype</strong></code> 속성은 {{jsxref("Object")}} 프로토타입(원형) 객체를<br> + 나타냅니다.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="설명">설명</h2> + +<p>JavaScript에서 거의 모든 객체는 {{jsxref("Object")}}의 인스턴스입니다. 일반적인 객체는 <code>Object.prototype</code> 에서 속성과 메서드를 상속받으며, 그 중 일부는 (오버라이드 등으로 인해) 숨겨질 수 있습니다. 그러나, 의도적으로 <code>Object</code>를 생성할 때 ({{jsxref("Object.create", "Object.create(null)")}} 처럼) 이를 피할 수도 있고, {{jsxref("Object.setPrototypeOf")}} 등을 통해 나중에 무효화할 수도 있습니다.</p> + +<p><code>Object</code> 프로토타입에 가하는 변경은 프로토타입 체인을 통해, 더 아래쪽 체인에서 덮어 쓴 경우가 아니라면 <strong>모든</strong> 객체에서 관측할 수 있습니다. 이는 객체를 확장하거나 행동을 바꿀 수 있는 매우 강력하면서도 위험한 방법을 제공합니다.</p> + + + +<h2 id="속성">속성</h2> + +<dl> + <dt>{{jsxref("Object.prototype.constructor")}}</dt> + <dd>객체의 프로토타입을 생성하는 함수를 지정합니다.</dd> + <dt>{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}</dt> + <dd>객체가 초기화될 때 프로토타입으로 사용된 객체를 가리킵니다.</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__noSuchMethod__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">정의되지 않은 객체 멤버가 메소드로서 호출될 때 실행되는 함수를 정의하는 데 쓰였지만 제거되었습니다.</s></dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.count","Object.prototype.__count__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">사용자 정의 객체 상에 직접 있는 열거가능 속성의 수를 반환하는 데 쓰였지만 제거되었습니다.</s></dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.parent","Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">객체 문맥을 가리키는 데 쓰였지만 제거되었습니다.</s></dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>함수를 속성에 연결합니다, 접근했을 때 그 함수를 실행해 그 결과값을 반환하는.</dd> + <dt>{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>함수를 속성에 연결합니다, 설정했을 때 그 속성을 수정하는 함수를 실행하는.</dd> + <dt>{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>{{jsxref("Object.prototype.__defineGetter__()", "__defineGetter__()")}} 메소드에 의해 지정된 속성과 관련된 함수를 반환합니다.</dd> + <dt>{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>{{jsxref("Object.prototype.__defineSetter__()", "__defineSetter__()")}} 메소드에 의해 지정된 속성과 관련된 함수를 반환합니다.</dd> + <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt> + <dd>객체가 지정된 속성을 프로토타입 체인을 통해 상속되지 않은 그 객체의 직접 속성으로 포함하는지를 나타내는 boolean을 반환합니다.</dd> + <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt> + <dd>지정된 객체가 이 메소드가 호출된 객체의 프로토타입 체인 내에 있는지를 나타내는 boolean을 반환합니다.</dd> + <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt> + <dd>내부 <a href="/ko/docs/Web/JavaScript/Data_structures#Properties">ECMAScript [[Enumerable]] attribute</a>가 설정된 경우를 나타내는 boolean을 반환합니다.</dd> + <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>이 메소드가 호출된 객체를 나타내는 객체 리터럴의 출처를 포함하는 문자열을 반환합니다; 새로운 객체를 만들기 위해 이 값을 쓸 수 있습니다.</dd> + <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt> + <dd>{{jsxref("Object.toString", "toString()")}}을 호출합니다.</dd> + <dt>{{jsxref("Object.prototype.toString()")}}</dt> + <dd>객체의 문자열 표현을 반환합니다.</dd> + <dt>{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</dt> + <dd>객체 속성에서 감시점을 제거합니다.</dd> + <dt>{{jsxref("Object.prototype.valueOf()")}}</dt> + <dd>지정된 객체의 원시값을 반환합니다.</dd> + <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt> + <dd>객체 속성에 감시점을 추가합니다.</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">지정된 객체의 문맥에서 JavaScript 코드 문자열을 평가하는 데 쓰였지만 제거되었습니다.</s></dd> +</dl> + +<h2 id="예제">예제</h2> + +<p><code>Object.prototype</code>의 기본 메서드를 변경할 때, 기존 조직의 앞 또는 후에 확장(extension) 을 포장하여 코드를 주입시키는 것을 고려하자. 예를 들어서, 이 (시험받지<br> + 않은) 코드는 내장된 로직 또는 어떤 다른 확장이 실행되기 전에 커스텀 로직을 전제조건적으로 실행시킬 것이다.</p> + +<p>함수가 호출되었을 때, 불러온 매개변수들은 배열과 같은 형태로 '변수' <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>에 보관된다. 예를 들어 myFn(a, b, c) 라는 함수를 부를 때, 이 함수 내부에 배열형태로 매개변수 (a, b, c) 를 담게 된다. prototype을 훅을 이용해 수정할 때, 함수에서 apply()를 호출하여 단순하게 this와 arguments(호출 상태)에 현재 동작을 전달하면 된다. 이 패턴은 Node.prototype, Function.prototype등 prototype에도 사용할 수 있다.</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> current <span class="operator token">=</span> Object<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>valueOf<span class="punctuation token">;</span> + +<span class="comment token">// 현재 설정한 "-prop-value" 속성은 cross-cutting 이고 </span> +<span class="comment token">// 항상 같은 prototype chain이 아니기 때문에, 이 Object.prototype을 바꾸고 싶다.</span> +Object<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>valueOf <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="string token">'-prop-value'</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">[</span><span class="string token">'-prop-value'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + <span class="comment token">// 이 객체 내 속성(property)이 하나가 아니라면, 현재 동작을 재구성한 것으로부터 + // 기본 동작으로 되돌리자(복구). </span> + <span class="comment token">// apply 동작은 다른 언어에서의 "super"와 유사하다.</span> + <span class="comment token">// 비록 valueOf()가 매개변수를 받지못하더라도, 다른 훅에서 있을 것이다.</span> + <span class="keyword token">return</span> current<span class="punctuation token">.</span><span class="function token">apply</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">,</span> arguments<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code> +</pre> + +<p>JavaScript는 엄밀히 말해서 하위클래스(sub-class) 객체가 없기에, prototype은 객체 역할을 하는 특정 함수의 "기반 클래스" 객체를 만드는 유용한 차선책입니다. 예를 들어:</p> + +<pre class="brush: js notranslate">var Person = function() { + this.canTalk = true; +}; + +Person.prototype.greet = function() { + if (this.canTalk) { + console.log('Hi, I am ' + this.name); + } +}; + +var Employee = function(name, title) { + Person.call(this); + this.name = name; + this.title = title; +}; + +Employee.prototype = Object.create(Person.prototype); +Employee.prototype.constructor = Employee; + +Employee.prototype.greet = function() { + if (this.canTalk) { + console.log('Hi, I am ' + this.name + ', the ' + this.title); + } +}; + +var Customer = function(name) { + Person.call(this); + this.name = name; +}; + +Customer.prototype = Object.create(Person.prototype); +Customer.prototype.constructor = Customer; + +var Mime = function(name) { + Person.call(this); + this.name = name; + this.canTalk = false; +}; + +Mime.prototype = Object.create(Person.prototype); +Mime.prototype.constructor = Mime; + +var bob = new Employee('Bob', 'Builder'); +var joe = new Customer('Joe'); +var rg = new Employee('Red Green', 'Handyman'); +var mike = new Customer('Mike'); +var mime = new Mime('Mime'); + +bob.greet(); +// Hi, I am Bob, the Builder + +joe.greet(); +// Hi, I am Joe + +rg.greet(); +// Hi, I am Red Green, the Handyman + +mike.greet(); +// Hi, I am Mike + +mime.greet(); +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>초기 정의. JavaScript 1.0에서 구현됨.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.builtins.Object.prototype")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">객체지향 JavaScript 소개</a></li> +</ul> + +<div id="dicLayer" style=""> +<div id="dicLayerContents"><dicword style="user-select: text;">Even though valueOf() doesn't take arguments, some other hook may.</dicword><dicword style="user-select: text;"><dicimg id="play" style="background-image: url(chrome-extension://bmbdcffdhebhecemcchbkfnjlmdiiepe/play.gif);"></dicimg> <input>Eng<dicimg id="copy" style="background-image: url(chrome-extension://bmbdcffdhebhecemcchbkfnjlmdiiepe/copy.png);" title="copy"></dicimg></dicword><br> +<br> +<br> +<br> +valueOf ()가 인수를받지 않더라도 다른 후크가있을 수 있습니다.</div> + +<div id="dicLayerSub"></div> +</div> + +<div id="dicRawData" style="display: none;">{"mean":["take<br/><br/>[동사]\n\t\t ~ sth (with you) | ~ sth (to sb) | ~ (sb) sth\n\t\t \t\t(어떤 것을 한 곳에서 다른 곳으로) 가지고 가다[이동시키다]","though<br/><br/>[접속사]\n\t\t \t\t(비록) …이긴 하지만[…인데도/…일지라도]\n\n\t\t\t\t\t\t\t\t유의어 although","value<br/><br/>[명사]\n\t\t \t\t(경제적인) 가치\n\n\t\t 참조 market value, street value","other<br/><br/>[형용사, 대명사]\n\t\t \t\t(그 밖의) 다른; 다른 사람[것]\n\n\t\t 참조 another","may<br/><br/>[법조동사]\n\t\t \t\t(가능성을 나타내어) …일지도 모른다[…일 수도 있다]"],"word":"\n\t\t\t\t\t\ttake\n \t\t\t\n\t \t\n\t ","soundUrl":"https://dict-dn.pstatic.net/v?_lsu_sa_=3cd8f6567dcc35f67a9d216930e402fa1d2763157705ff3d60620d707b1d60814356971c64e54c7e792964a50a21103d6cc3ad8a5c30e6d7e9205e93c8517e38f8e5b191d1700b6773822766eee45672523cb75822e10196643a3baf5d3dabb04974f799e77e47c4f2db9476dbfb3e4bf612100b4fa8e918f972d80a449bc79c","phoneticSymbol":"[teɪk]"}</div> + +<div id="dicLayerLoader" style="top: 3322px; left: 514px;"></div> 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 new file mode 100644 index 0000000000..2e393d68d3 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,72 @@ +--- +title: Promise.prototype +slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype +tags: + - JavaScript + - Promise + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype +--- +<div>{{JSRef}}</div> + +<p><strong><code>Promise.prototype</code></strong> 속성은 {{jsxref("Promise")}} 생성자의 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="설명">설명</h2> + +<p>{{jsxref("Promise")}} 인스턴스는 {{jsxref("Promise.prototype")}}을 상속합니다. 모든 <code>Promise</code> 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>Promise.prototype.constructor</code></dt> + <dd>인스턴스의 프로토타입을 만드는 함수를 반환합니다. 기본값은 {{jsxref("Promise")}} 함수입니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("Promise.prototype.catch()")}}</dt> + <dd>프로미스(promise)에 거부 처리기 콜백을 추가하고 호출된 경우 콜백의 반환값 또는 프로미스가 대신 이행된 경우 그 원래 이행(fulfillment)값으로 결정하는(resolving) 새 프로미스를 반환합니다.</dd> + <dt>{{jsxref("Promise.prototype.then()")}}</dt> + <dd>프로미스에 이행 또는 거부 처리기를 추가하고 호출된 처리기의 반환값 또는 프로미스가 처리되지 않은 경우 그 원래 처리된(settled) 값으로 결정하는 새 프로미스를 반환합니다 (즉 관련 처리기 <code>onFulfilled</code> 또는 <code>onRejected</code>가 <code>undefined</code>인 경우).</dd> + <dt>{{jsxref("Promise.prototype.finally()")}}</dt> + <dd>Appends a handler to the promise, and returns a new promise which is resolved when the original promise is resolved. The handler is called when the promise is settled, whether fulfilled or rejected.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Promise.prototype")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> +</ul> 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 new file mode 100644 index 0000000000..8183d348a9 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/set/index.html @@ -0,0 +1,87 @@ +--- +title: Set.prototype +slug: Web/JavaScript/Reference/Global_Objects/Set/prototype +tags: + - ECMAScript 2015 + - JavaScript + - Property + - Reference + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set +translation_of_original: Web/JavaScript/Reference/Global_Objects/Set/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>Set.prototype</strong></code> 속성은 {{jsxref("Set")}} 생성자의 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="설명">설명</h2> + +<p>{{jsxref("Set")}} 인스턴스는 {{jsxref("Set.prototype")}}에서 상속합니다. 모든 <code>Set</code> 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>Set.prototype.constructor</code></dt> + <dd>인스턴스의 프로토타입을 만든 함수를 반환합니다. 이는 기본으로 {{jsxref("Set")}} 함수입니다.</dd> + <dt>{{jsxref("Set.prototype.size")}}</dt> + <dd><code>Set</code> 객체 내 값의 개수를 반환합니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("Set.add", "Set.prototype.add(value)")}}</dt> + <dd><code>Set</code> 객체에 주어진 값을 갖는 새로운 요소를 추가합니다. <code>Set</code> 객체를 반환합니다.</dd> + <dt>{{jsxref("Set.prototype.clear()")}}</dt> + <dd><code>Set</code> 객체에서 모든 요소를 제거합니다.</dd> + <dt>{{jsxref("Set.delete", "Set.prototype.delete(value)")}}</dt> + <dd><code>value</code>와 관련된 요소를 제거하고 <code>Set.prototype.has(value)</code>가 이전에 반환했던 값을 반환합니다. <code>Set.prototype.has(value)</code>는 그 뒤에 <code>false</code>를 반환합니다.</dd> + <dt>{{jsxref("Set.prototype.entries()")}}</dt> + <dd>삽입 순으로 <code>Set</code> 객체 내 각 값에 대한 <strong><code>[value, value]</code> 배열</strong>을 포함하는 새로운 <code>Iterator</code> 객체를 반환합니다. 이는 <code>Map</code> 객체와 비슷하게 유지되므로 여기서 각 항목은 그 <em>key</em>와 <em>value</em>에 대해 같은 값을 갖습니다.</dd> + <dt>{{jsxref("Set.forEach", "Set.prototype.forEach(callbackFn[, thisArg])")}}</dt> + <dd>삽입 순으로 <code>Set</code> 객체 내에 있는 각 값에 대해 한 번 <code>callbackFn</code>을 호출합니다. <code>thisArg</code> 매개변수가 <code>forEach</code>에 제공된 경우, 이는 각 콜백에 대해 <code>this</code> 값으로 사용됩니다.</dd> + <dt>{{jsxref("Set.has", "Set.prototype.has(value)")}}</dt> + <dd><code>Set</code> 객체 내 주어진 값을 갖는 요소가 있는지를 주장하는(asserting, 나타내는) boolean을 반환합니다.</dd> + <dt>{{jsxref("Set.prototype.keys()")}}</dt> + <dd><strong><code>values()</code></strong> 함수와 같은 함수로 삽입 순으로 <code>Set</code> 객체 내 각 요소에 대한 값을 포함하는 새로운 <code>Iterator</code> 객체를 반환합니다.</dd> + <dt>{{jsxref("Set.prototype.values()")}}</dt> + <dd>삽입 순으로 <code>Set</code> 객체 내 각 요소에 대한 <strong>값</strong>을 포함하는 새로운 <code>Iterator</code> 객체를 반환합니다.</dd> + <dt>{{jsxref("Set.prototype.@@iterator()", "Set.prototype[@@iterator]()")}}</dt> + <dd>삽입 순으로 <code>Set</code> 객체 내 각 요소에 대한 <strong>값</strong>을 포함하는 새로운 <code>Iterator</code> 객체를 반환합니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-set.prototype', 'Set.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype', 'Set.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.Set.prototype")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Map.prototype")}}</li> +</ul> 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 new file mode 100644 index 0000000000..849b70c1c6 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html @@ -0,0 +1,66 @@ +--- +title: SharedArrayBuffer.prototype +slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype +tags: + - JavaScript + - SharedArrayBuffer + - TypedArrays + - 공유 메모리 + - 속성 +translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer +translation_of_original: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype +--- +<div>{{JSRef}}</div> + +<p><strong><code>SharedArrayBuffer.prototype</code></strong> 속성은 {{jsxref("SharedArrayBuffer")}} 객체를위한 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="설명">설명</h2> + +<p><code>SharedArrayBuffer</code> 인스턴스는 <code>SharedArrayBuffer.prototype</code> 을 상속합니다. 모든 생성자와 마찬가지로, 생성자의 프로토타입 객체를 변경하여 모든 <code>SharedArrayBuffer</code> 인스턴스에 변화를 줄 수 있습니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt>SharedArrayBuffer.prototype.constructor</dt> + <dd>객체의 프로토타입을 생성하는 함수를 지정합니다. 초기 값은 <code>SharedArrayBuffer</code> 생성자에 내장된 표준입니다.</dd> + <dt>{{jsxref("SharedArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt> + <dd>배열의 바이트 크기입니다. 배열이 생성되고 수정이 불가할 때 지정됩니다. <strong>읽기 전용입니다.</strong></dd> +</dl> + +<h2 id="메소드">메소드</h2> + +<dl> + <dt>{{jsxref("SharedArrayBuffer.slice", "SharedArrayBuffer.prototype.slice(begin, end)")}}</dt> + <dd><code>begin</code> 부터 <code>end</code> 까지의 모든 것을 포함하는 <code>SharedArrayBuffer</code> 바이트의 복사본을 컨텐츠로 갖는 새로운 <code>SharedArrayBuffer</code> 를 반환합니다. <code>begin</code> 또는 <code>end</code> 가 음수인 경우, 인덱스는 배열의 끝에서부터이고 반대인 경우 시작부터입니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-sharedarraybuffer.prototype', 'SharedArrayBuffer.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>ES2017 에서 초기 정의.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.SharedArrayBuffer.prototype")}}</p> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li>{{jsxref("SharedArrayBuffer")}}</li> +</ul> 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 new file mode 100644 index 0000000000..fa32999954 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,219 @@ +--- +title: String.prototype +slug: Web/JavaScript/Reference/Global_Objects/String/prototype +tags: + - JavaScript + - Property + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String +translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype +--- +<div>{{JSRef("Global_Objects", "String")}}</div> + +<h2 id="Summary" name="Summary">요약</h2> + +<p><strong><code>String.prototype</code></strong> 프라퍼티는 {{jsxref("Global_Objects/String", "String")}} 프로토타입 오브젝트를 표현하고 있습니다.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description" name="Description">설명</h2> + +<p>모든 {{jsxref("Global_Objects/String", "String")}} 인스턴스들은 <code>String.prototype</code>를 상속합니다. <code>String</code> 프라퍼티 오브젝트를 변경하면, 그 변경은 모든 {{jsxref("Global_Objects/String", "String")}} 인스턴스들에 영향을 주게 됩니다.</p> + +<h2 id="Properties" name="Properties">Properties</h2> + +<dl> + <dt><code>String.prototype.constructor</code></dt> + <dd>오브젝트의 프로토타입을 생성하는 함수를 명세합니다.</dd> + <dt>{{jsxref("String.prototype.length")}}</dt> + <dd>문자열의 길이를 반영합니다.</dd> + <dt><code><em>N</em></code></dt> + <dd><em>N</em>번째 위치에 있는 문자에 접근하기 위해 사용합니다. <em>N</em> 은 0과 {{jsxref("String.length", "length")}}보다 작은 값 사이에 있는 양의 정수입니다. 이 퍼라퍼티들은 읽기 전용(read-only) 속성을 가지고 있습니다. </dd> +</dl> + +<h2 id="Methods" name="Methods">메서드</h2> + +<h3 id="Methods_unrelated_to_HTML" name="Methods_unrelated_to_HTML">HTML과 관련이 없는 메서드</h3> + +<dl> + <dt>{{jsxref("String.prototype.charAt()")}}</dt> + <dd>문자열 내 특정 위치(index)에 있는 문자를 반환합니다.</dd> + <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt> + <dd>문자열 내 주어진 위치(index)에 있는 문자의 유니코드 값을 반환합니다.</dd> + <dt>{{jsxref("String.prototype.codePointAt()")}} {{experimental_inline}}</dt> + <dd>주어진 위치에 있는 UTF-16으로 인코딩된 코드 포인터값인 음수가 아닌 정수값을 반환합니다. </dd> + <dt>{{jsxref("String.prototype.concat()")}}</dt> + <dd>두 문자열의 문자를 합쳐서 새로운 문자열로 만든 다음, 그 새로운 문자열을 반환합니다. </dd> + <dt>{{jsxref("String.prototype.includes()")}} {{experimental_inline}}</dt> + <dd>문자열 내에 찾고자 하는 문자열이 있는지를 확인합니다. </dd> + <dt>{{jsxref("String.prototype.endsWith()")}} {{experimental_inline}}</dt> + <dd>문자열에서 특정 문자열로 끝나는지를 확인할 수 있습니다.</dd> + <dt>{{jsxref("String.prototype.indexOf()")}}</dt> + <dd>{{jsxref("Global_Objects/String", "String")}} 오브젝트에 있는 특정 값이 일치하는 첫 번째 인덱스 값을 반환하며, 일치하는 값이 없을 경우에는 -1을 반환합니다.</dd> + <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt> + <dd><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String" title="String 글로벌 오브젝트는 문자열의 생성자, 또는 문자열의 순서입니다."><code>String</code></a> 오브젝트에서 <code>fromIndex</code>로부터 반대방향으로 찾기 시작하여 특정 값이 일치하는 마지막 인덱스를 반환합니다. 문자열에서 일치하는 특정 값이 없으면 <code>-1</code>을 리턴합니다.</dd> + <dt>{{jsxref("String.prototype.localeCompare()")}}</dt> + <dd>Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.</dd> + <dt>{{jsxref("String.prototype.match()")}}</dt> + <dd>Used to match a regular expression against a string.</dd> + <dt>{{jsxref("String.prototype.normalize()")}} {{experimental_inline}}</dt> + <dd>Returns the Unicode Normalization Form of the calling string value.</dd> + <dt><s class="obsoleteElement">{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Wraps the string in double quotes ("<code>"</code>").</s></dd> + <dt>{{jsxref("String.prototype.repeat()")}} {{experimental_inline}}</dt> + <dd>Returns a string consisting of the elements of the object repeated the given times.</dd> + <dt>{{jsxref("String.prototype.replace()")}}</dt> + <dd>Used to find a match between a regular expression and a string, and to replace the matched substring with a new substring.</dd> + <dt>{{jsxref("String.prototype.search()")}}</dt> + <dd>Executes the search for a match between a regular expression and a specified string.</dd> + <dt>{{jsxref("String.prototype.slice()")}}</dt> + <dd>Extracts a section of a string and returns a new string.</dd> + <dt>{{jsxref("String.prototype.split()")}}</dt> + <dd>Splits a {{jsxref("Global_Objects/String", "String")}} object into an array of strings by separating the string into substrings.</dd> + <dt>{{jsxref("String.prototype.startsWith()")}} {{experimental_inline}}</dt> + <dd>Determines whether a string begins with the characters of another string.</dd> + <dt>{{jsxref("String.prototype.substr()")}}</dt> + <dd>Returns the characters in a string beginning at the specified location through the specified number of characters.</dd> + <dt>{{jsxref("String.prototype.substring()")}}</dt> + <dd>Returns the characters in a string between two indexes into the string.</dd> + <dt>{{jsxref("String.prototype.toLocaleLowerCase()")}}</dt> + <dd>The characters within a string are converted to lower case while respecting the current locale. For most languages, this will return the same as {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.</dd> + <dt>{{jsxref("String.prototype.toLocaleUpperCase()")}}</dt> + <dd>The characters within a string are converted to upper case while respecting the current locale. For most languages, this will return the same as {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}.</dd> + <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt> + <dd>Returns the calling string value converted to lower case.</dd> + <dt>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Returns an object literal representing the specified object; you can use this value to create a new object. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd> + <dt>{{jsxref("String.prototype.toString()")}}</dt> + <dd>Returns a string representing the specified object. Overrides the {{jsxref("Object.prototype.toString()")}} method.</dd> + <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt> + <dd>Returns the calling string value converted to uppercase.</dd> + <dt>{{jsxref("String.prototype.trim()")}}</dt> + <dd>Trims whitespace from the beginning and end of the string. Part of the ECMAScript 5 standard.</dd> + <dt>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</dt> + <dd>Trims whitespace from the left side of the string.</dd> + <dt>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</dt> + <dd>Trims whitespace from the right side of the string.</dd> + <dt>{{jsxref("String.prototype.valueOf()")}}</dt> + <dd>Returns the primitive value of the specified object. Overrides the {{jsxref("Object.prototype.valueOf()")}} method.</dd> + <dt>{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}} {{experimental_inline}}</dt> + <dd>Returns a new <code>Iterator</code> object that iterates over the code points of a String value, returning each code point as a String value.</dd> +</dl> + +<h3 id="HTML_wrapper_methods" name="HTML_wrapper_methods">HTML wrapper methods</h3> + +<p>These methods are of limited use, as they provide only a subset of the available HTML tags and attributes.</p> + +<dl> + <dt>{{jsxref("String.prototype.big()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("big")}}</dd> + <dt>{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("blink")}}</dd> + <dt>{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("b")}}</dd> + <dt>{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("tt")}}</dd> + <dt>{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("color", "font", "<font color=\"color\">")}}</dd> + <dt>{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("size", "font", "<font size=\"size\">")}}</dd> + <dt>{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("i")}}</dd> + <dt>{{jsxref("String.prototype.link()")}}</dt> + <dd>{{htmlattrxref("href", "a", "<a href=\"rul\">")}} (link to URL)</dd> + <dt>{{jsxref("String.prototype.small()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("small")}}</dd> + <dt>{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("strike")}}</dd> + <dt>{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("sub")}}</dd> + <dt>{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("sup")}}</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{jsxref("Global_Objects/String", "String")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> 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 new file mode 100644 index 0000000000..aa38e80799 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html @@ -0,0 +1,127 @@ +--- +title: SyntaxError.prototype +slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError +translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>SyntaxError.prototype </strong></code>속성은 {{jsxref("SyntaxError")}} 객체의 생성자 프로토타입을 표현합니다.</p> + +<h2 id="설명">설명</h2> + +<p>모든 {{jsxref("SyntaxError")}} 인스턴스는 <code>SyntaxError.prototype </code>객체로부터<code> </code>상속 받습니다. 또한, 속성이나 메소드를 추가할 때 모든 인스턴스에 프로토타입을 사용 할 수 있습니다.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>SyntaxError.prototype.constructor</code></dt> + <dd>인스턴스의 프로토타입을 생성하는 함수를 명시합니다.</dd> + <dt>{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}</dt> + <dd>에러 메시지. 비록 ECMA-262는 {{jsxref("SyntaxError")}} 가 고유의 <code>message</code> 속성을 제공해야 한다고 명시하고 있지만, <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> 에서는, {{jsxref("Error.prototype.message")}}를 상속 받습니다. </dd> + <dt>{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}</dt> + <dd>에러명. {{jsxref("Error")}}로부터 상속 받습니다.</dd> + <dt>{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}</dt> + <dd>에러를 발생시킨 파일의 경로. {{jsxref("Error")}}로부터 상속 받습니다.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}</dt> + <dd>에러가 발생한 파일의 코드 라인 넘버. {{jsxref("Error")}}로부터 상속 받습니다.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}</dt> + <dd>에러가 발생된 라인의 컬럼 넘버. {{jsxref("Error")}}로부터 상속 받습니다.</dd> + <dt>{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}</dt> + <dd>스택 트레이스. {{jsxref("Error")}}로부터 상속 받습니다.</dd> +</dl> + +<h2 id="메소드">메소드</h2> + +<p>비록 {{jsxref("SyntaxError")}} 프로토타입 객체는 고유의 메소드를 가지고 있지는 않지만, {{jsxref("SyntaxError")}} 인스턴스는 몇 가지의 메소드를 프로토타입 체인을 통하여 상속 받습니다.</p> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td><code><em>NativeError</em>.prototype</code>로 정의.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td><code><em>NativeError</em>.prototype</code>로 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td><code><em>NativeError</em>.prototype</code>로 정의.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> 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 new file mode 100644 index 0000000000..75f63010bf --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/typedarray/index.html @@ -0,0 +1,176 @@ +--- +title: TypedArray.prototype +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype +tags: + - JavaScript + - Property + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray +translation_of_original: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>TypedArray</strong></code><strong><code>.prototype</code></strong> 속성(property)은 {{jsxref("TypedArray")}} 생성자에 대한 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="설명">설명</h2> + +<p>{{jsxref("TypedArray")}} 인스턴스는 {{jsxref("TypedArray.prototype")}}을 상속합니다. 모든 <em>TypedArray</em> 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있으며, <em>TypedArray</em>는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_객체">TypedArray 객체 유형</a> 중 하나입니다.</p> + +<p>상속에 관한 자세한 정보를 위해 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#설명"><em>TypedArray</em></a>에 대한 설명도 참조하세요.</p> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>TypedArray.prototype.constructor</code></dt> + <dd>인스턴스의 프로토타입을 만든 함수를 반환합니다. 이는 기본으로 해당 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_객체">TypedArray 객체 유형</a> 함수 중 하나입니다.</dd> + <dt>{{jsxref("TypedArray.prototype.buffer")}} {{readonlyInline}}</dt> + <dd>형식화 배열에 의해 참조되는 {{jsxref("ArrayBuffer")}}를 반환합니다. 생성 시에 고정되기에 <strong>읽기 전용</strong>.</dd> + <dt>{{jsxref("TypedArray.prototype.byteLength")}} {{readonlyInline}}</dt> + <dd>{{jsxref("ArrayBuffer")}}의 시작점부터 형식화 배열의 길이(단위 바이트)를 반환합니다. 생성 시에 고정되기에 <strong>읽기 전용</strong>.</dd> + <dt>{{jsxref("TypedArray.prototype.byteOffset")}} {{readonlyInline}}</dt> + <dd>{{jsxref("ArrayBuffer")}}의 시작점부터 형식화 배열의 오프셋(단위 바이트)을 반환합니다. 생성 시에 고정되기에 <strong>읽기 전용</strong>.</dd> + <dt>{{jsxref("TypedArray.prototype.length")}} {{readonlyInline}}</dt> + <dd>형식화 배열 내 보유한 요소의 수를 반환합니다. 생성 시에 고정되기에 <strong>읽기 전용</strong>.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("TypedArray.prototype.copyWithin()")}}</dt> + <dd>배열 내부 일련의 배열 요소를 복사합니다. {{jsxref("Array.prototype.copyWithin()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.entries()")}}</dt> + <dd>배열 내 각 인덱스에 대한 키/값 쌍을 포함하는 새로운 <code>Array Iterator</code> 객체를 반환합니다. {{jsxref("Array.prototype.entries()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.every()")}}</dt> + <dd>배열의 모든 요소가 함수로 제공되는 테스트를 통과하는지를 테스트합니다. {{jsxref("Array.prototype.every()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.fill()")}}</dt> + <dd>시작 인덱스부터 끝 인덱스까지 배열의 모든 요소를 고정값으로 채웁니다. {{jsxref("Array.prototype.fill()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.filter()")}}</dt> + <dd>제공되는 필터링 함수가 true를 반환하는 이 배열의 모든 요소를 갖는 새로운 배열을 생성합니다. {{jsxref("Array.prototype.filter()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.find()")}}</dt> + <dd>배열 내 요소가 제공되는 테스트 함수를 만족하는 경우 배열 내 찾은 값 또는 못 찾은 경우 <code>undefined</code>를 반환합니다. {{jsxref("Array.prototype.find()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.findIndex()")}}</dt> + <dd>배열 내 요소가 제공되는 테스트 함수를 만족하는 경우 배열 내 찾은 인덱스 또는 못 찾은 경우 -1을 반환합니다. {{jsxref("Array.prototype.findIndex()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.forEach()")}}</dt> + <dd>배열 내 각 요소에 대해 함수를 호출합니다. {{jsxref("Array.prototype.forEach()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.includes()")}} {{experimental_inline}}</dt> + <dd>형식화 배열이 특정 요소를 포함하는지를 판단해, 적절히 <code>true</code> 또는 <code>false</code>를 반환합니다. {{jsxref("Array.prototype.includes()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.indexOf()")}}</dt> + <dd>지정된 값과 같은 배열 내부 요소의 첫(최소) 인덱스 또는 못 찾은 경우 -1을 반환합니다. {{jsxref("Array.prototype.indexOf()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.join()")}}</dt> + <dd>배열의 모든 요소를 문자열로 합칩니다. {{jsxref("Array.prototype.join()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.keys()")}}</dt> + <dd>배열의 각 인덱스에 대한 키를 포함하는 새로운 <code>Array Iterator</code>를 반환합니다. {{jsxref("Array.prototype.keys()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</dt> + <dd>지정된 값과 같은 배열 내부 요소의 끝(최대) 인덱스 또는 못 찾은 경우 -1을 반환합니다. {{jsxref("Array.prototype.lastIndexOf()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.map()")}}</dt> + <dd>이 배열의 모든 요소에 제공된 함수를 호출한 결과를 갖는 새로운 배열을 생성합니다. {{jsxref("Array.prototype.map()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt> + <dd>{{jsxref("TypedArray.prototype.copyWithin()")}}의 이전 비표준 버전.</dd> + <dt>{{jsxref("TypedArray.prototype.reduce()")}}</dt> + <dd>누산기(accumulator) 및 배열의 각 값(좌에서 우로)에 대해 한 값으로 줄도록 함수를 적용합니다. {{jsxref("Array.prototype.reduce()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.reduceRight()")}}</dt> + <dd>누산기 및 배열의 각 값(우에서 좌로)에 대해 한 값으로 줄도록 함수를 적용합니다. {{jsxref("Array.prototype.reduceRight()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.reverse()")}}</dt> + <dd>배열 요소의 순서를 뒤집습니다 — 처음이 마지막이 되고 마지막이 처음이 됩니다. {{jsxref("Array.prototype.reverse()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.set()")}}</dt> + <dd>형식화 배열에 여러 값을 저장합니다, 지정된 배열에서 입력 값을 읽어.</dd> + <dt>{{jsxref("TypedArray.prototype.slice()")}}</dt> + <dd>배열의 한 부분을 추출하여 새로운 배열을 반환합니다. {{jsxref("Array.prototype.slice()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.some()")}}</dt> + <dd>이 배열의 적어도 한 요소가 제공된 테스트 함수를 만족하는 경우 true를 반환합니다. {{jsxref("Array.prototype.some()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.sort()")}}</dt> + <dd>배열의 요소를 적소에 정렬해 그 배열을 반환합니다. {{jsxref("Array.prototype.sort()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.subarray()")}}</dt> + <dd>주어진 시작 및 끝 요소 인덱스로부터 새로운 TypedArray를 반환합니다.</dd> + <dt>{{jsxref("TypedArray.prototype.values()")}}</dt> + <dd>배열의 각 인덱스에 대한 값을 포함하는 새로운 <code>Array Iterator</code> 객체를 반환합니다. {{jsxref("Array.prototype.values()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.toLocaleString()")}}</dt> + <dd>배열 및 그 요소를 나타내는 지역화된 문자열을 반환합니다. {{jsxref("Array.prototype.toLocaleString()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.toString()")}}</dt> + <dd>배열 및 그 요소를 나타내는 문자열을 반환합니다. {{jsxref("Array.prototype.toString()")}}도 참조.</dd> + <dt>{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}</dt> + <dd>배열의 각 인덱스에 대한 값을 포함하는 새로운 <code>Array Iterator</code> 객체를 반환합니다.</dd> +</dl> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>7.0</td> + <td>{{ CompatGeckoDesktop("2") }}</td> + <td>10</td> + <td>11.6</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("2") }}</td> + <td>10</td> + <td>11.6</td> + <td>4.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li> + <li>{{jsxref("TypedArray")}}</li> +</ul> 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 new file mode 100644 index 0000000000..fa2ad9691d --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/weakmap/index.html @@ -0,0 +1,143 @@ +--- +title: WeakMap.prototype +slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +tags: + - ECMAScript6 + - JavaScript + - Property + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap +translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>WeakMap.prototype</strong></code> 속성(property)은 {{jsxref("WeakMap")}} 생성자에 대한 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="설명">설명</h2> + +<p>{{jsxref("WeakMap")}} 인스턴스는 {{jsxref("WeakMap.prototype")}}에서 상속합니다. 모든 <code>WeakMap</code> 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.</p> + +<p><code>WeakMap.prototype</code>은 그 자체로 그냥 평범한 객체입니다:</p> + +<pre class="brush: js">Object.prototype.toString.call(WeakMap.prototype); // "[object Object]"</pre> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>WeakMap.prototype.constructor</code></dt> + <dd>인스턴스의 프로토타입을 생성한 함수를 반환합니다. 이는 기본으로 {{jsxref("WeakMap")}} 함수입니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}</dt> + <dd><code>key</code>와 관련된 모든 값을 제거합니다. <code>WeakMap.prototype.has(key)</code>는 그 뒤에 <code>false</code>를 반환합니다.</dd> + <dt>{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}</dt> + <dd><code>key</code>와 관련된 값 또는 관련 값이 없는 경우 <code>undefined</code>를 반환합니다.</dd> + <dt>{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}</dt> + <dd><code>WeakMap</code> 객체 내 <code>key</code>와 관련된 값이 있는지 여부를 주장하는(asserting, 나타내는) boolean을 반환합니다.</dd> + <dt>{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}</dt> + <dd><code>WeakMap</code> 객체 내 <code>key</code>에 대해 값을 설정합니다. <code>WeakMap</code> 객체를 반환합니다.</dd> + <dt><s class="obsoleteElement">{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement"><code>WeakMap</code> 객체에서 모든 키/값 쌍을 제거합니다. 메서드가 없는 <code>WeakMap</code> 객체를 캡슐화하여 <code>.clear()</code> 메서드가 있는 <code>WeakMap</code> 같은 객체 구현이 가능함을 주의하세요 ({{jsxref("WeakMap")}} 페이지 예 참조)</s></dd> +</dl> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>36</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>11</td> + <td>23</td> + <td>7.1</td> + </tr> + <tr> + <td>Ordinary object</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("40")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("6.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td>Ordinary object</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("40")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Map.prototype")}}</li> +</ul> 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 new file mode 100644 index 0000000000..0c75408df5 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/weakset/index.html @@ -0,0 +1,142 @@ +--- +title: WeakSet.prototype +slug: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype +tags: + - ECMAScript6 + - JavaScript + - Property + - WeakSet +translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet +translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>WeakSet.prototype</strong></code> 속성(property)은 {{jsxref("WeakSet")}} 생성자에 대한 프로토타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="설명">설명</h2> + +<p>{{jsxref("WeakSet")}} 인스턴스는 {{jsxref("WeakSet.prototype")}}에서 상속합니다. 모든 <code>WeakSet</code> 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.</p> + +<p><code>WeakSet.prototype</code>은 그 자체로 그냥 평범한 객체입니다:</p> + +<pre class="brush: js">Object.prototype.toString.call(WeakSet.prototype); // "[object Object]"</pre> + +<h2 id="속성">속성</h2> + +<dl> + <dt><code>WeakSet.prototype.constructor</code></dt> + <dd>인스턴스의 프로토타입을 생성한 함수를 반환합니다. 이는 기본으로 {{jsxref("WeakSet")}} 함수입니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{jsxref("WeakSet.add", "WeakSet.prototype.add(value)")}}</dt> + <dd><code>WeakSet</code> 객체에 주어진 값을 갖는 새로운 객체를 추가합니다.</dd> + <dt>{{jsxref("WeakSet.delete", "WeakSet.prototype.delete(value)")}}</dt> + <dd><code>value</code>와 관련된 요소를 제거합니다. <code>WeakSet.prototype.has(value)</code>는 그 뒤에 <code>false</code>를 반환합니다.</dd> + <dt>{{jsxref("WeakSet.has", "WeakSet.prototype.has(value)")}}</dt> + <dd><code>WeakSet</code> 객체 내 주어진 값을 갖는 요소가 존재하는 지 여부를 주장하는(asserting, 나타내는) boolean을 반환합니다.</dd> + <dt><s class="obsoleteElement">{{jsxref("WeakSet.prototype.clear()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement"><code>WeakSet</code> 객체에서 모든 요소를 제거합니다.</s></dd> +</dl> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-weakset.prototype', 'WeakSet.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>초기 정의.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-weakset.prototype', 'WeakSet.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>36</td> + <td>{{ CompatGeckoDesktop(34) }}</td> + <td>{{CompatNo}}</td> + <td>23</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Ordinary object</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("40")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome for Android</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile(34) }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Ordinary object</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("40")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Set.prototype")}}</li> + <li>{{jsxref("WeakMap.prototype")}}</li> +</ul> 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 new file mode 100644 index 0000000000..c7c1c54bab --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html @@ -0,0 +1,70 @@ +--- +title: WebAssembly.Global.prototype +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global +translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>WebAssembly.Global</strong></code><strong><code>.prototype</code></strong> 속성은 {{jsxref("WebAssembly.Global()")}} 생성자의 프로토 타입을 나타냅니다.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description">Description</h2> + +<p>모든 {{jsxref("WebAssembly.Global")}} 인스턴스는 <code>Global.prototype</code>에서 상속받습니다. {{jsxref("WebAssembly.Global()")}} 생성자의 프로토 타입 객체는 모든 {{jsxref( "WebAssembly.Global")}} 인스턴스에 영향을 미치도록 수정할 수 있습니다.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Global.prototype.constructor</code></dt> + <dd>이 객체의 인스턴스를 생성 한 함수를 돌려줍니다. 기본적으로 이것은 {{jsxref("WebAssembly.Global()")}} 생성자입니다.</dd> + <dt><code>Global.prototype[@@toStringTag]</code></dt> + <dd><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag">@@toStringTag</a> 속성의 초기 값은 String 값인 "WebAssembly.Global"입니다.</dd> + <dt><code>Global.prototype.value</code></dt> + <dd>전역 변수에 포함 된 값 - 전역 값을 직접 설정하고 가져 오는 데 사용할 수 있습니다.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt><code>Global.prototype.valueOf()</code></dt> + <dd>전역 변수에 포함 된 값을 반환하는 Old-style 메서드입니다.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#globals', 'WebAssembly.Global()')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>Initial draft definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.WebAssembly.Global.prototype")}}</p> +</div> + +<div> + +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("WebAssembly.Global()")}}</li> +</ul> diff --git a/files/ko/conflicting/web/javascript/reference/operators/index.html b/files/ko/conflicting/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..3e61415550 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/operators/index.html @@ -0,0 +1,291 @@ +--- +title: 산술 연산자 +slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><span class="seoSummary"><strong>산술 연산자는</strong> 숫자 값(리터럴 또는 변수)을 피연산자로 받아 하나의 숫자 값을 반환합니다.</span> 표준 산술 연산자는 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)입니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</div> + + + +<h2 id="덧셈"><a id="Addition" name="Addition">덧셈 (+)</a></h2> + +<p>덧셈 연산자는 숫자 피연산자를 더한 값, 또는 문자열을 연결한 값을 생성합니다.</p> + +<h3 id="구문">구문</h3> + +<pre class="syntaxbox"><strong>연산자:</strong> x + y +</pre> + +<h3 id="예제">예제</h3> + +<pre class="brush: js">// Number + Number -> 합 +1 + 2 // 3 + +// Boolean + Number -> 합 +true + 1 // 2 + +// Boolean + Boolean -> 합 +false + false // 0 + +// Number + String -> 연결 +5 + "foo" // "5foo" + +// String + Boolean -> 연결 +"foo" + false // "foofalse" + +// String + String -> 연결 +"foo" + "bar" // "foobar" +</pre> + +<h2 id="뺄셈_-"><a id="Subtraction" name="Subtraction">뺄셈 (-)</a></h2> + +<p>뺄셈 연산자는 두 개의 피연산자를 뺀 값을 생성합니다.</p> + +<h3 id="구문_2">구문</h3> + +<pre class="syntaxbox"><strong>연산자:</strong> x - y +</pre> + +<h3 id="예제_2">예제</h3> + +<pre class="brush: js">5 - 3 // 2 +3 - 5 // -2 +"foo" - 3 // NaN</pre> + +<h2 id="나눗셈"><a id="Division" name="Division">나눗셈 (/)</a></h2> + +<p>나눗셈 연산자는 왼쪽 피연산자를 피제수로, 오른쪽 피연산자를 제수로 한 몫을 생성합니다.</p> + +<h3 id="구문_3">구문</h3> + +<pre class="syntaxbox"><strong>연산자:</strong> x / y +</pre> + +<h3 id="예제_3">예제</h3> + +<pre class="brush: js">1 / 2 // JavaScript에선 0.5 +1 / 2 // Java에선 0 +// (양쪽 피연산자 모두 명시적인 부동소수점 숫자가 아님) + +1.0 / 2.0 // JavaScript와 Java 둘 다 0.5 + +2.0 / 0 // JavaScript에서 Infinity +2.0 / 0.0 // 동일하게 Infinity +2.0 / -0.0 // JavaScript에서 -Infinity</pre> + +<h2 id="곱셈_*"><a id="Multiplication" name="Multiplication">곱셈 (*)</a></h2> + +<p>곱셈 연산자는 두 연산자의 곱을 생성합니다.</p> + +<h3 id="구문_4">구문</h3> + +<pre class="syntaxbox"><strong>연산자:</strong> x * y +</pre> + +<h3 id="예제_4">예제</h3> + +<pre class="brush: js">2 * 2 // 4 +-2 * 2 // -4 +Infinity * 0 // NaN +Infinity * Infinity // Infinity +"foo" * 2 // NaN +</pre> + +<h2 id="나머지"><a id="Remainder" name="Remainder">나머지 (%)</a></h2> + +<p>나머지 연산자는 왼쪽 피연산자를 오른쪽 피연산자로 나눴을 때의 나머지를 반환합니다. 결과는 항상 피제수의 부호를 따라갑니다.</p> + +<h3 id="구문_5">구문</h3> + +<pre class="syntaxbox"><strong>연산자:</strong> var1 % var2 +</pre> + +<h3 id="예제_5">예제</h3> + +<pre class="brush: js">12 % 5 // 2 +-1 % 2 // -1 +NaN % 2 // NaN +1 % 2 // 1 +2 % 3 // 2 +-4 % 2 // -0 +5.5 % 2 // 1.5 +</pre> + +<h2 id="거듭제곱_**"><a name="Exponentiation">거듭제곱 (**)</a></h2> + +<p>거듭제곱 연산자는 첫 번째 피연산자를 밑으로, 두 번째 피연산자를 지수로 한 값을 생성합니다. 즉, <code>var1</code>과 <code>var2</code>가 변수일 때, <code>var1<sup>var2</sup></code>의 값을 생성합니다. 거듭제곱 연산자는 우결합성을 가집니다. 따라서 <code>a ** b ** c</code>는 <code>a ** (b ** c)</code>와 같습니다.</p> + +<h3 id="구문_6">구문</h3> + +<pre class="syntaxbox"><strong>연산자:</strong> var1 ** var2 +</pre> + +<h3 id="참고">참고</h3> + +<p>PHP와 Python 등 거듭제곱 연산자를 가진 대부분의 언어는 거듭제곱 연산자의 우선순위가 +와 - 등 단항 연산자보다 높습니다. 그러나 Bash는 단항 연산자가 거듭제곱 연산자보다 우선순위가 높은 등 일부 예외도 있습니다. JavaScript는 단항 연산자(<code>+/-/~/!/delete/void/typeof</code>)를 왼쪽 피연산자 앞에 배치할 수 없으므로, 모호한 표현도 작성할 수 없습니다.</p> + +<pre class="brush: js">-2 ** 2; +// Bash에서 4, 다른 언어에서는 -4. +// 모호한 표현이므로 JavaScript에서는 유효하지 않음 + + +-(2 ** 2); +// JavaScript에서 -4, 작성자의 의도가 명확함 +</pre> + +<h3 id="예제_6">예제</h3> + +<pre class="brush: js">2 ** 3 // 8 +3 ** 2 // 9 +3 ** 2.5 // 15.588457268119896 +10 ** -1 // 0.1 +NaN ** 2 // NaN + +2 ** 3 ** 2 // 512 +2 ** (3 ** 2) // 512 +(2 ** 3) ** 2 // 64 +</pre> + +<p>결과의 부호를 뒤집으려면 다음과 같이 작성합니다.</p> + +<pre class="brush: js">-(2 ** 2) // -4 +</pre> + +<p>거듭제곱의 밑을 음수로 강제하려면 다음과 같이 작성합니다.</p> + +<pre class="brush: js">(-2) ** 2 // 4 +</pre> + +<div class="note"> +<p><strong>참고:</strong> JavaScript는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">비트 연산자 ^ (논리 XOR)</a>도 가지고 있습니다. <code>**</code>와 <code>^</code>는 다릅니다. (예 : <code>2 ** 3 === 8</code>이지만 <code>2 ^ 3 === 1</code>)</p> +</div> + +<h2 id="증가"><a id="Increment" name="Increment">증가 (++)</a></h2> + +<p>증가 연산자는 피연산자를 증가(1을 덧셈)시키고, 그 값을 반환합니다.</p> + +<ul> + <li>피연산자 뒤에 붙여(예: <code>x++</code>) 접미사로 사용한 경우 증가하기 전의 값을 반환합니다.</li> + <li>피연산자 앞에 붙여(예: <code>++x</code>) 접두사로 사용한 경우 증가한 후의 값을 반환합니다.</li> +</ul> + +<h3 id="구문_7">구문</h3> + +<pre class="syntaxbox"><strong>연산자:</strong> x++ or ++x +</pre> + +<h3 id="예제_7">예제</h3> + +<pre class="brush: js">// 접미사 +var x = 3; +y = x++; // y = 3, x = 4 + +// 접두사 +var a = 2; +b = ++a; // a = 3, b = 3 +</pre> + +<h2 id="감소_--"><a id="Decrement" name="Decrement">감소 (--)</a></h2> + +<p>감소 연산자는 피연산자를 감소(1을 뺄셈)시키고, 그 값을 반환합니다.</p> + +<ul> + <li>피연산자 뒤에 붙여(예: <code>x--</code>) 접미사로 사용한 경우 감소하기 전의 값을 반환합니다.</li> + <li>피연산자 앞에 붙여(예: <code>--x</code>) 접두사로 사용한 경우 감소한 후의 값을 반환합니다.</li> +</ul> + +<h3 id="구문_8">구문</h3> + +<pre class="syntaxbox"><strong>연산자:</strong> x-- or --x +</pre> + +<h3 id="예제_8">예제</h3> + +<pre class="brush: js">// 접미사 +var x = 3; +y = x--; // y = 3, x = 2 + +// 접두사 +var a = 2; +b = --a; // a = 1, b = 1 +</pre> + +<h2 id="단항_부정_-"><a name="Unary_negation">단항 부정 (-)</a></h2> + +<p>단항 부정 연산자는 피연산자의 앞에 위치하며 부호를 뒤집습니다.</p> + +<h3 id="구문_9">구문</h3> + +<pre class="syntaxbox"><strong>연산자:</strong> -x +</pre> + +<h3 id="예제_9">예제</h3> + +<pre class="brush: js">var x = 3; +y = -x; // y = -3, x = 3 + +// 단항 부정 연산자는 숫자가 아닌 값을 숫자로 변환함 +var x = "4"; +y = -x; // y = -4</pre> + +<h2 id="단항_양부호"><a name="Unary_plus">단항 양부호 (+)</a></h2> + +<p>단항 양부호 연산자는 피연산자의 앞에 위치하며 피연산자의 값 그대로 평가되지만, 값이 숫자가 아닐 경우 숫자로 변환을 시도합니다. 단항 부정(-) 연산자도 숫자가 아닌 값을 변환할 수 있지만, 단항 양부호가 속도도 제일 빠르고 다른 연산도 수행하지 않으므로 선호해야 할 방법입니다. 문자열로 표현한 정수 및 부동소수점 실수, 문자열이 아닌 <code>true</code>, <code>false</code>, <code>null</code>도 변환할 수 있습니다. 10진수와 (앞에 "0x"가 붙은) 16진수 정수 모두 지원합니다. 음수도 지원하지만 16진수 음수에는 사용할 수 없습니다. 어떤 값을 분석할 수 없으면 {{jsxref("NaN")}}으로 평가됩니다.</p> + +<h3 id="구문_10">구문</h3> + +<pre class="syntaxbox"><strong>연산자:</strong> +x +</pre> + +<h3 id="예제_10">예제</h3> + +<pre class="brush: js">+3 // 3 ++"3" // 3 ++true // 1 ++false // 0 ++null // 0 ++function(val) { return val } // NaN +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-additive-operators', 'Additive operators')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-postfix-expressions', 'Postfix expressions')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-11.5', 'Multiplicative operators')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-11.4', 'Unary operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.operators.arithmetic")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">할당 연산자</a></li> +</ul> diff --git a/files/ko/conflicting/web/javascript/reference/operators_13aeb53e31f9cec454ca631cb162449f/index.html b/files/ko/conflicting/web/javascript/reference/operators_13aeb53e31f9cec454ca631cb162449f/index.html new file mode 100644 index 0000000000..b442b1d7bd --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/operators_13aeb53e31f9cec454ca631cb162449f/index.html @@ -0,0 +1,250 @@ +--- +title: 논리 연산자 +slug: Web/JavaScript/Reference/Operators/논리_연산자(Logical_Operators) +tags: + - JavaScript + - Logic + - Not + - Operator + - Reference + - and + - or + - 논리 +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>논리 연산자는 보통 {{jsxref("Boolean")}}(논리적) 값과 함께 쓰이며, 불리언 값을 반환합니다. 그런데, <code>&&</code>과 <code>||</code> 연산자는 사실 피연산자 중 하나의 값을 반환합니다. 그러므로 불리언 외의 다른 값과 함께 사용하면 불리언 값이 아닌 것을 반환할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}</div> + + + +<h2 id="설명">설명</h2> + +<p>다음 표는 논리 연산자의 종류입니다. (<code><em>expr</em></code>은 불리언을 포함해서 아무 자료형이나 가능합니다)</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>연산자</th> + <th>구문</th> + <th>설명</th> + </tr> + <tr> + <td>논리 AND (<code>&&</code>)</td> + <td><code><em>expr1</em> && <em>expr2</em></code></td> + <td><code>expr1</code>을 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">true</span></font>로 변환할 수 있는 경우 <code>expr2</code>을 반환하고, 그렇지 않으면 <code>expr1</code>을 반환합니다.</td> + </tr> + <tr> + <td>논리 OR (<code>||</code>)</td> + <td><code><em>expr1</em> || <em>expr2</em></code></td> + <td> + <p><code>expr1</code>을 <code>true</code>로 변환할 수 있으면 <code>expr1</code>을 반환하고, 그렇지 않으면 <code>expr2</code>를 반환합니다.</p> + </td> + </tr> + <tr> + <td>논리 NOT (<code>!</code>)</td> + <td><code>!<em>expr</em></code></td> + <td>단일 피연산자를 <code>true</code>로 변환할 수 있으면 <code>false</code>를 반환합니다. 그렇지 않으면 <code>true</code>를 반환합니다.</td> + </tr> + </tbody> +</table> + +<p>값을 <code>true</code>로 변환하면 값이 {{Glossary("truthy", "참")}}인 것입니다.<br> + 값을 <code>false</code>로 변환할 수 있으면 값이 {{Glossary("falsy", "거짓")}}인 것입니다.</p> + +<p>거짓으로 변환할 수 있는 표현의 예는 다음과 같습니다.</p> + +<ul> + <li><code>null</code></li> + <li><code>NaN</code></li> + <li><code>0</code></li> + <li>빈 문자열 (<code>"",</code> <code>''</code>, <code>``</code>)</li> + <li><code>undefined</code></li> +</ul> + +<p><code>&&</code> 연산자와 <code>||</code> 연산자를 불리언 값이 아닌 피연산자와 함께 사용될 수 있지만, 반환 값을 항상 <a href="/ko/docs/Web/JavaScript/Data_structures#Boolean_%ED%83%80%EC%9E%85">불리언 원시값</a>으로 변환할 수 있으므로 불리언 연산자로 생각할 수 있습니다. 반환 값을 직접 불리언으로 바꾸려면 {{jsxref("Boolean")}} 함수나 이중 부정 연산자를 사용하세요.</p> + +<h3 id="단락_평가">단락 평가</h3> + +<p>논리 표현식을 좌측부터 평가하므로, 아래 규칙에 따라 단락(short-circuit) 평가를 수행합니다.</p> + +<ul> + <li><code>(거짓 표현식) && expr</code>은 거짓 표현식으로 단락 평가됩니다.</li> + <li><code>(참 표현식) || expr</code>은 참 표현식으로 단락 평가됩니다.</li> +</ul> + +<p>"단락"이란, 위 규칙에서 <code>expr</code>을 평가하지 않는다는 뜻입니다. 따라서 평가 중 발생해야 할 부작용(예: <code>expr</code>이 함수 호출이면 절대 호출하지 않음)도 나타나지 않습니다. 단락 평가가 발생하는 원인은 첫 번째 피연산자를 평가한 순간 이미 연산자의 결과가 정해지기 때문입니다. 다음 예제를 살펴보세요.</p> + +<pre>function A(){ console.log('A 호출'); return false; } +function B(){ console.log('B 호출'); return true; } + +console.log( A() && B() ); +// 함수 호출로 인해 콘솔에 "A 호출" 기록 +// 그 후 연산자의 결과값인 "false" 기록 + +console.log( B() || A() ); +// 함수 호출로 인해 콘솔에 "B 호출" 기록 +// 그 후 연산자의 결과인 "true" 기록 +</pre> + +<h3 id="연산자_우선순위">연산자 우선순위</h3> + +<p>다음 두 식은 똑같아 보이지만, <code>&&</code> 연산자는 <code>||</code> 이전에 실행되므로 서로 다릅니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">연산자 우선순위</a>를 참고하세요.</p> + +<pre class="brush: js">true || false && false // returns true, because && is executed first +(true || false) && false // returns false, because operator precedence cannot apply</pre> + +<h3 id="논리_AND_()"><a name="Logical_AND">논리 AND (<code>&&</code>)</a></h3> + +<p>다음은 <code>&&</code>(논리 AND) 연산자의 예제입니다.</p> + +<pre class="brush: js">a1 = true && true // t && t returns true +a2 = true && false // t && f returns false +a3 = false && true // f && t returns false +a4 = false && (3 == 4) // f && f returns false +a5 = 'Cat' && 'Dog' // t && t returns "Dog" +a6 = false && 'Cat' // f && t returns false +a7 = 'Cat' && false // t && f returns false +a8 = '' && false // f && f returns "" +a9 = false && '' // f && f returns false</pre> + +<h3 id="논리_OR_()"><a name="Logical_OR">논리 OR (<code>||</code>)</a></h3> + +<p>다음은 <code>||</code>(논리 OR) 연산자의 예제입니다.</p> + +<pre class="brush: js">o1 = true || true // t || t returns true +o2 = false || true // f || t returns true +o3 = true || false // t || f returns true +o4 = false || (3 == 4) // f || f returns false +o5 = 'Cat' || 'Dog' // t || t returns "Cat" +o6 = false || 'Cat' // f || t returns "Cat" +o7 = 'Cat' || false // t || f returns "Cat" +o8 = '' || false // f || f returns false +o9 = false || '' // f || f returns "" +o10 = false || varObject // f || object returns varObject +</pre> + +<h3 id="논리_NOT_(!)"><a name="Logical_NOT">논리 NOT (<code>!</code>)</a></h3> + +<p>다음은 <code>!</code>(논리 NOT) 연산자의 예제입니다.</p> + +<pre class="brush: js">n1 = !true // !t returns false +n2 = !false // !f returns true +n3 = !'' // !f returns true +n4 = !'Cat' // !t returns false +</pre> + +<h4 id="이중_NOT_(!!)">이중 NOT (<code>!!</code>)</h4> + +<p>NOT 연산자 다수를 연속해서 사용하면 아무 값이나 불리언 원시값으로 강제 변환할 수 있습니다. 변환 결과는 피연산자 값의 "참스러움"이나 "거짓스러움"에 따릅니다. ({{Glossary("truthy", "참")}}과 {{Glossary("falsy", "거짓")}}을 참고하세요)</p> + +<p>동일한 변환을 {{jsxref("Boolean")}} 함수로도 수행할 수 있습니다.</p> + +<pre class="brush: js">n1 = !!true // !!truthy returns true +n2 = !!{} // !!truthy returns true: any object is truthy... +n3 = !!(new Boolean(false)) // ...even Boolean objects with a false .valueOf()! +n4 = !!false // !!falsy returns false +n5 = !!"" // !!falsy returns false +n6 = !!Boolean(false) // !!falsy returns false +</pre> + +<h3 id="불리언_변환_규칙">불리언 변환 규칙</h3> + +<h4 id="AND에서_OR로_변환">AND에서 OR로 변환</h4> + +<p>불리언 계산에서, 다음 두 코드는 항상 같습니다.</p> + +<pre class="brush: js">bCondition1 && bCondition2 +</pre> + +<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> + +<h4 id="OR에서_AND로_변환">OR에서 AND로 변환</h4> + +<p>불리언 계산에서, 다음 두 코드는 항상 같습니다.</p> + +<pre class="brush: js">bCondition1 || bCondition2 +</pre> + +<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> + +<h4 id="NOT_간_변환">NOT 간 변환</h4> + +<p>불리언 계산에서, 다음 두 코드는 항상 같습니다.</p> + +<pre class="brush: js">!!bCondition +</pre> + +<pre class="brush: js">bCondition</pre> + +<h3 id="중첩_괄호_제거">중첩 괄호 제거</h3> + +<p>논리 표현식은 항상 왼쪽에서 오른쪽으로 평가되므로, 몇 가지 규칙을 따르면 복잡한 표현식에서 괄호를 제거할 수 있습니다.</p> + +<h4 id="중첩_AND_제거">중첩 AND 제거</h4> + +<p>불리언의 합성 계산에서, 다음 두 코드는 항상 같습니다.</p> + +<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3) +</pre> + +<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> + +<h4 id="중첩_OR_제거">중첩 OR 제거</h4> + +<p>불리언의 합성 계산에서, 다음 두 코드는 항상 같습니다.</p> + +<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3) +</pre> + +<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.operators.logical")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">비트 연산자</a></li> + <li>{{jsxref("Boolean")}}</li> + <li>{{Glossary("truthy", "참")}}</li> + <li>{{Glossary("falsy", "거짓")}}</li> +</ul> diff --git a/files/ko/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html b/files/ko/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html new file mode 100644 index 0000000000..cf5ae3afa2 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html @@ -0,0 +1,216 @@ +--- +title: 비교 연산자 +slug: Web/JavaScript/Reference/Operators/Comparison_Operators +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>JavaScript는 엄격한 비교와 형변환 비교 두 가지의 비교 방법을 모두 가지고 있습니다. 엄격(일치) 비교(<code>===</code>)는 두 피연산자가 같은 자료형에, 그 내용도 일치해야만 참입니다. 추상(동등) 비교(<code>==</code>)는 비교 전에 두 피연산자를 동일한 자료형으로 변환합니다. 관계 추상 비교(<code><=</code>)의 경우 {{glossary("primitive", "원시값")}}으로 바꾸고, 같은 자료형으로 다시 바꾼후 비교를 수행합니다.</p> + +<p>문자열의 경우 {{glossary("unicode", "유니코드")}} 값을 사용한 사전순으로 비교합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}</div> + + + +<p>비교 연산의 특징은 다음과 같습니다.</p> + +<ul> + <li>두 문자열이 같은 문자 시퀀스로 구성되고, 같은 길이를 가지며, 같은 위치에 같은 문자가 존재하면 일치합니다.</li> + <li>두 숫자는 숫자로서 같은 값(같은 숫자 값)이면 일치합니다. {{jsxref("NaN")}}은 자기 자신을 포함한 그 무엇과도 동등하지 않습니다. <code>+0</code>과 <code>-0</code>은 서로 일치합니다.</li> + <li>두 불리언은 둘 다 <code>true</code>거나 <code>false</code>이면 일치합니다.</li> + <li>서로 다른 두 객체는 절대 일치하지도, 동등하지도 않습니다.</li> + <li>객체를 비교하는 표현식은 두 피연산자가 동일한 객체를 참조하는 경우에만 참입니다.</li> + <li>{{jsxref("null")}}과 {{jsxref("undefined")}}는 자기 자신과 일치하며, 서로 동등합니다.</li> +</ul> + +<h2 id="동치_연산자">동치 연산자</h2> + +<h3 id="동등_연산자"><a name="Equality">동등 연산자 (==)</a></h3> + +<p>동등 연산자는 두 피연산자의 자료형이 같지 않은 경우 같아지도록 변환한 후, 엄격 비교를 수행합니다. 피연산자가 모두 객체라면, JavaScript는 내부 참조를 보고, 둘 다 메모리의 같은 객체를 바라보고 있는지 판별합니다.</p> + +<h4 id="구문">구문</h4> + +<pre class="syntaxbox">x == y +</pre> + +<h4 id="예제">예제</h4> + +<pre class="brush: js"> 1 == 1 // true + "1" == 1 // true + 1 == '1' // true + 0 == false // true + 0 == null // false + + 0 == undefined // false +null == undefined // true +</pre> + +<h3 id="부등_연산자_!"><a name="Inequality">부등 연산자 (!=)</a></h3> + +<p>부등 연산자는 두 피연산자가 같지 않은 경우 참을 반환합니다. 피연산자의 자료형이 일치하지 않는 경우 적절한 자료형으로의 변환을 시도합니다. 피연산자가 모두 객체라면, JavaScript는 내부 참조를 보고, 서로 메모리의 다른 객체를 바라보고 있는지 판별합니다.</p> + +<h4 id="구문_2">구문</h4> + +<pre class="syntaxbox">x != y</pre> + +<h4 id="예제_2">예제</h4> + +<pre class="brush: js">1 != 2 // true +1 != "1" // false +1 != '1' // false +1 != true // false +0 != false // false +</pre> + +<h3 id="일치_연산자"><a name="Identity">일치 연산자 (===)</a></h3> + +<p>일치 연산자는 자료형 변환 없이 두 연산자가 엄격히 같은지 판별합니다.</p> + +<h4 id="구문_3">구문</h4> + +<pre class="syntaxbox">x === y</pre> + +<h4 id="예제_3">예제</h4> + +<pre class="brush: js ">3 === 3 // true +3 === '3' // false</pre> + +<h3 id="불일치_연산자_!"><a name="Nonidentity">불일치 연산자 (!==)</a></h3> + +<p>일치 연산자는 두 연산자가 같지 않거나, 같은 자료형이 아닐 때 참을 반환합니다.</p> + +<h4 id="구문_4">구문</h4> + +<pre class="syntaxbox">x !== y</pre> + +<h4 id="예제_4">예제</h4> + +<pre class="brush: js">3 !== '3' // true +4 !== 3 // true +</pre> + +<h2 id="관계_연산자">관계 연산자</h2> + +<p>이 항목의 모든 연산자는 비교 전에 피연산자를 {{glossary("primitive", "원시값")}}으로 <a href="/ko/docs/Glossary/Type_coercion">변환</a>합니다. 둘 다 문자열이 되는 경우 사전순으로 비교하고, 그렇지 않으면 숫자로 변환합니다. {{jsxref("NaN")}}과의 비교는 항상 <code>false</code>를 반환합니다.</p> + +<h3 id="초과_연산자_>"><a name="Greater_than_operator">초과 연산자 (>)</a></h3> + +<p>초과 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 큰 경우 참을 반환합니다.</p> + +<h4 id="구문_5">구문</h4> + +<pre class="syntaxbox">x > y</pre> + +<h4 id="예제_5">예제</h4> + +<pre class="brush: js">4 > 3 // true +</pre> + +<h3 id="이상_연산자_>"><a name="Greater_than_or_equal_operator">이상 연산자 (>=)</a></h3> + +<p>이상 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 크거나 같으면 참을 반환합니다.</p> + +<h4 id="구문_6">구문</h4> + +<pre class="syntaxbox"> x >= y</pre> + +<h4 id="예제_6">예제</h4> + +<pre class="brush: js">4 >= 3 // true +3 >= 3 // true +</pre> + +<h3 id="미만_연산자_<"><a name="Less_than_operator">미만 연산자 (<)</a></h3> + +<p>미만 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 작은 경우 참을 반환합니다.</p> + +<h4 id="구문_7">구문</h4> + +<pre class="syntaxbox">x < y</pre> + +<h4 id="예제_7">예제</h4> + +<pre class="brush: js">3 < 4 // true</pre> + +<h3 id="이하_연산자_<"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">이하 연산자 (<=)</a></h3> + +<p>이하 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 작거나 같으면 참을 반환합니다.</p> + +<h4 id="구문_8">구문</h4> + +<pre class="syntaxbox"> x <= y</pre> + +<h4 id="예제_8">예제</h4> + +<pre class="brush: js">3 <= 4 // true +</pre> + +<h2 id="동치_연산자_사용하기">동치 연산자 사용하기</h2> + +<p>표준 동치, 동등 연산자(<code>==</code>, <code>!=</code>)는 두 피연산자를 비교하기 위해 <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">추상 동치 비교 알고리즘</a>(Abstract Equlity Comparison Algorithm)을 사용합니다. 피연산자 간 자료형이 일치하지 않으면 우선 변환을 시도합니다. 예를 들어 표현식 <code>5 == '5'</code>에서는 비교 전 오른쪽 문자열을 {{jsxref("Number")}}로 변환합니다.</p> + +<p>엄격 동치, 일치 연산자(<code>===</code>, <code>!==</code>)는 <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">엄격 동치 비교 알고리즘</a>(Strict Equality Comparison Algorithm)을 사용하며, 같은 자료형을 가진 피연산자를 비교하기 위해 사용합니다. 피연산자 간 자료형이 일치하지 않으면 항상 <code>false</code>이므로, <code>5 !== '5'</code>입니다.</p> + +<p>피연산자의 값은 물론 특정 자료형이어야 하는 경우 일치 연산자를 사용하세요. 그렇지 않은 경우 형변환을 자동으로 해주는 동등 연산자를 사용할 수도 있습니다.</p> + +<p>비교 과정에 자료형 변환이 필요한 경우 JavaScript는 {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}}, {{jsxref("Object")}} 자료형을 다음과 같이 변환합니다.</p> + +<ul> + <li>숫자와 문자열을 비교할 땐 문자열을 숫자로 변환합니다. 우선, 문자열에서 수학적 값을 도출합니다. 그 후 가장 가까운 <code>Number</code> 자료형 값으로 반올림합니다.</li> + <li>하나의 연산자가 <code>Boolean</code>인 경우, <code>true</code>는 <code>1</code>, <code>false</code>는 <code>0</code>으로 변환합니다.</li> + <li>객체를 문자열이나 숫자와 비교하는 경우, JavaScript는 객체의 기본값을 사용합니다. 연산자는 우선 객체의 <code>valueOf()</code> 또는 <code>toString()</code> 메서드를 사용해 문자열 혹은 숫자 값을 받으려 시도합니다. 실패할 경우 런타임 오류가 발생합니다.</li> + <li>객체를 원시값과 비교하는 경우에만 객체의 변환이 발생합니다. 두 연산자가 모두 객체인 경우 변환하지 않으며, 둘 다 같은 객체를 참조하는 경우 참을 반환합니다.</li> +</ul> + +<div class="note"><strong>참고:</strong> <code>String</code> 객체는 자료형 객체지, 문자열이 아닙니다! <code>String</code> 객체는 거의 쓰이지 않으며, 이런 성질로 인해 아래의 결과는 예상치 못한 값일 수 있습니다.</div> + +<pre class="brush:js">// true as both operands are type String (i.e. string primitives): +'foo' === 'foo' + +var a = new String('foo'); +var b = new String('foo'); + +// false as a and b are type Object and reference different objects +a == b + +// false as a and b are type Object and reference different objects +a === b + +// true as a and 'foo' are of different type and, the Object (a) +// is converted to String 'foo' before comparison +a == 'foo'</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Status</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality Operators')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.operators.comparison")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Object.is()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li><a href="/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness">동치 비교와 동일성</a></li> +</ul> diff --git a/files/ko/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html b/files/ko/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html new file mode 100644 index 0000000000..4cc5ab7b5a --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html @@ -0,0 +1,541 @@ +--- +title: 비트 연산자 +slug: Web/JavaScript/Reference/Operators/Bitwise_Operators +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>비트 연산자</strong>는 피연산자를 10진수, 16진수, 8진수가 아니라, 32개의 비트(0과 1) 집합으로 취급합니다. 예를 들어, 10진수 9의 2진수 표기법은 1001입니다. 이렇게, 비트 연산자는 값의 2진수 표현을 사용해 연산하지만, 결과는 표준 JavaScript 숫자 값으로 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}</div> + + + +<p>다음은 JavaScript의 비트 연산자를 요약한 표입니다.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>연산자</th> + <th>사용방법</th> + <th>설명</th> + </tr> + <tr> + <td><a href="#Bitwise_AND">비트 AND</a></td> + <td><code>a & b</code></td> + <td>피연산자를 비트로 바꿨을 때 각각 대응하는 비트가 모두 1이면 그 비트값에 1을 반환.</td> + </tr> + <tr> + <td><a href="#Bitwise_OR">비트 OR</a></td> + <td><code>a | b</code></td> + <td>피연산자를 비트로 바꿨을 때 각각 대응하는 비트가 모두 1이거나 한 쪽이 1이면 1을 반환.</td> + </tr> + <tr> + <td><a href="#Bitwise_XOR">비트 XOR</a></td> + <td><code>a ^ b</code></td> + <td>피연산자를 비트로 바꿨을 때 대응하는 비트가 서로 다르면 1을 반환.</td> + </tr> + <tr> + <td><a href="#Bitwise_NOT">비트 NOT</a></td> + <td><code>~ a</code></td> + <td>피연산자의 반전된 값을 반환.</td> + </tr> + <tr> + <td><a href="#Left_shift">왼쪽 시프트</a></td> + <td><code>a << b</code></td> + <td>Shifts <code>a</code> in binary representation <code>b</code> (< 32) bits to the left, shifting in zeros from the right.</td> + </tr> + <tr> + <td><a href="#Right_shift">부호 유지 오른쪽 시프트</a></td> + <td><code>a >> b</code></td> + <td>Shifts <code>a</code> in binary representation <code>b</code> (< 32) bits to the right, discarding bits shifted off.</td> + </tr> + <tr> + <td><a href="#Unsigned_right_shift">부호 버림 오른쪽 시프트</a></td> + <td><code>a >>> b</code></td> + <td>Shifts <code>a</code> in binary representation <code>b</code> (< 32) bits to the right, discarding bits shifted off, and shifting in zeros from the left.</td> + </tr> + </tbody> +</table> + +<h2 id="부호_있는_32비트_정수">부호 있는 32비트 정수</h2> + +<p>The operands of all bitwise operators are converted to signed 32-bit integers in two's <a href="https://en.wikipedia.org/wiki/Method_of_complements">complement format</a>, except for zero-fill right shift which results in an unsigned 32-bit integer.</p> + +<p><em>Two's complement format</em> means that a number's negative counterpart (e.g. <code>5</code> vs. <code>-5</code>) is all the number's bits inverted (bitwise NOT of the number, or <em>ones' complement</em> of the number) plus one.</p> + +<p>For example, the following encodes the integer <code>314</code>:</p> + +<pre>00000000000000000000000100111010 +</pre> + +<p>The following encodes <code>~314</code>, i.e. the one's complement of <code>314</code>:</p> + +<pre>11111111111111111111111011000101 +</pre> + +<p>Finally, the following encodes <code>-314,</code> i.e. the two's complement of <code>314</code>:</p> + +<pre>11111111111111111111111011000110 +</pre> + +<p>The two's complement guarantees that the left-most bit is 0 when the number is positive and 1 when the number is negative. Thus, it is called the <em>sign bit</em>.</p> + +<p>The number <code>0</code> is the integer that is composed completely of 0 bits.</p> + +<pre>0 (base 10) = 00000000000000000000000000000000 (base 2) +</pre> + +<p>The number <code>-1</code> is the integer that is composed completely of 1 bits.</p> + +<pre>-1 (base 10) = 11111111111111111111111111111111 (base 2) +</pre> + +<p>The number <code>-2147483648</code> (hexadecimal representation: <code>-0x80000000</code>) is the integer that is composed completely of 0 bits except the first (left-most) one.</p> + +<pre>-2147483648 (base 10) = 10000000000000000000000000000000 (base 2) +</pre> + +<p>The number <code>2147483647</code> (hexadecimal representation: <code>0x7fffffff</code>) is the integer that is composed completely of 1 bits except the first (left-most) one.</p> + +<pre>2147483647 (base 10) = 01111111111111111111111111111111 (base 2) +</pre> + +<p>The numbers <code>-2147483648</code> and <code>2147483647</code> are the minimum and the maximum integers representable throught a 32bit signed number.</p> + +<h2 id="비트_논리_연산자">비트 논리 연산자</h2> + +<p>비트 논리 연산자는 다음과 같이 사용됩니다.</p> + +<ul> + <li>피연산자는 32비트 정수로 변환되고, 이진법으로 표현됩니다 (0과 1).</li> + <li>이진법으로 표현된 첫 번째 피연산자는 두 번째 피연산자와 쌍을 이룹니다: 첫 번째는 첫 번째 비트끼리, 두 번째는 두 번째 비트끼리...</li> + <li>연산자는 각각의 비트쌍에 적용되고, 결과 또한 이진법으로 구성됩니다.</li> +</ul> + +<h3 id="비트_AND"><a id="Bitwise_AND" name="Bitwise_AND">& (비트 AND)</a></h3> + +<p>비트 연산자 AND를 비트 쌍으로 실행합니다.</p> + +<p>Performs the AND operation on each pair of bits. <code>a</code> AND <code>b</code> yields 1 only if both <code>a</code> and <code>b</code> are 1. The truth table for the AND operation is:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a AND b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) +</pre> + +<p>Bitwise ANDing any number <code>x</code> with <code>0</code> yields <code>0</code>. <span style="letter-spacing: -0.00278rem;">Bitwise ANDing any number <code>x</code> with <code>-1</code> yields <code>x</code>.</span></p> + +<h3 id="비트_OR"><a id="Bitwise_OR" name="Bitwise_OR">| (비트 OR)</a></h3> + +<p>Performs the OR operation on each pair of bits. <code>a</code> OR <code>b</code> yields 1 if either <code>a</code> or <code>b</code> is 1. The truth table for the OR operation is:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a OR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) +</pre> + +<p>Bitwise ORing any number x with 0 yields x.</p> + +<p>Bitwise ORing any number x with -1 yields -1.</p> + +<h3 id="비트_XOR"><a id="Bitwise_XOR" name="Bitwise_XOR">^ (비트 XOR)</a></h3> + +<p>Performs the XOR operation on each pair of bits. <code>a</code> XOR <code>b</code> yields 1 if <code>a</code> and <code>b</code> are different. The truth table for the XOR operation is:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a XOR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) +</pre> + +<p>Bitwise XORing any number x with 0 yields x.</p> + +<p>Bitwise XORing any number x with -1 yields ~x.</p> + +<h3 id="비트_NOT"><a id="Bitwise_NOT" name="Bitwise_NOT">~ (비트 NOT)</a></h3> + +<p>Performs the NOT operator on each bit. NOT <code>a</code> yields the inverted value (a.k.a. one's complement) of <code>a</code>. The truth table for the NOT operation is:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">NOT a</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) + -------------------------------- +~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) +</pre> + +<p>Bitwise NOTing any number x yields -(x + 1). For example, ~5 yields -6.</p> + +<h2 id="비트_시프트_연산자">비트 시프트 연산자</h2> + +<p>The bitwise shift operators take two operands: the first is a quantity to be shifted, and the second specifies the number of bit positions by which the first operand is to be shifted. The direction of the shift operation is controlled by the operator used.</p> + +<p>Shift operators convert their operands to 32-bit integers in big-endian order and return a result of the same type as the left operand. The right operand should be less than 32, but if not only the low five bits will be used.</p> + +<h3 id="<<_Left_shift"><a id="Left_shift" name="Left_shift"><< (Left shift)</a></h3> + +<p>This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.</p> + +<p>For example, <code>9 << 2</code> yields 36:</p> + +<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10) +</pre> + +<p>Bitwise shifting any number <strong>x</strong> to the left by <strong>y</strong> bits yields <strong>x * 2^y</strong>.</p> + +<h3 id=">>_Sign-propagating_right_shift"><a id="Right_shift" name="Right_shift">>> (Sign-propagating right shift)</a></h3> + +<p>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left. Since the new leftmost bit has the same value as the previous leftmost bit, the sign bit (the leftmost bit) does not change. Hence the name "sign-propagating".</p> + +<p>For example, <code>9 >> 2</code> yields 2:</p> + +<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>Likewise, <code>-9 >> 2</code> yields -3, because the sign is preserved:</p> + +<pre> -9 (base 10): 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10) +</pre> + +<h3 id=">>>_Zero-fill_right_shift"><a id="Unsigned_right_shift" name="Unsigned_right_shift">>>> (Zero-fill right shift)</a></h3> + +<p>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left. The sign bit becomes 0, so the result is always non-negative.</p> + +<p>For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result. For example, <code>9 >>> 2</code> yields 2, the same as <code>9 >> 2</code>:</p> + +<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>However, this is not the case for negative numbers. For example, <code>-9 >>> 2</code> yields 1073741821, which is different than <code>-9 >> 2</code> (which yields -3):</p> + +<pre> -9 (base 10): 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="Flags_and_bitmasks">Flags and bitmasks</h3> + +<p>The bitwise logical operators are often used to create, manipulate, and read sequences of <em>flags</em>, which are like binary variables. Variables could be used instead of these sequences, but binary flags take much less memory (by a factor of 32).</p> + +<p>Suppose there are 4 flags:</p> + +<ul> + <li>flag A: we have an ant problem</li> + <li>flag B: we own a bat</li> + <li>flag C: we own a cat</li> + <li>flag D: we own a duck</li> +</ul> + +<p>These flags are represented by a sequence of bits: DCBA. When a flag is <em>set</em>, it has a value of 1. When a flag is <em>cleared</em>, it has a value of 0. Suppose a variable <code>flags</code> has the binary value 0101:</p> + +<pre class="brush: js">var flags = 5; // binary 0101 +</pre> + +<p>This value indicates:</p> + +<ul> + <li>flag A is true (we have an ant problem);</li> + <li>flag B is false (we don't own a bat);</li> + <li>flag C is true (we own a cat);</li> + <li>flag D is false (we don't own a duck);</li> +</ul> + +<p>Since bitwise operators are 32-bit, 0101 is actually 00000000000000000000000000000101, but the preceding zeroes can be neglected since they contain no meaningful information.</p> + +<p>A <em>bitmask</em> is a sequence of bits that can manipulate and/or read flags. Typically, a "primitive" bitmask for each flag is defined:</p> + +<pre class="brush: js">var FLAG_A = 1; // 0001 +var FLAG_B = 2; // 0010 +var FLAG_C = 4; // 0100 +var FLAG_D = 8; // 1000 +</pre> + +<p>New bitmasks can be created by using the bitwise logical operators on these primitive bitmasks. For example, the bitmask 1011 can be created by ORing FLAG_A, FLAG_B, and FLAG_D:</p> + +<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 +</pre> + +<p>Individual flag values can be extracted by ANDing them with a bitmask, where each bit with the value of one will "extract" the corresponding flag. The bitmask <em>masks</em> out the non-relevant flags by ANDing with zeros (hence the term "bitmask"). For example, the bitmask 0100 can be used to see if flag C is set:</p> + +<pre class="brush: js">// if we own a cat +if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true + // do stuff +} +</pre> + +<p>A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:</p> + +<pre class="brush: js">// if we own a bat or we own a cat +if ((flags & FLAG_B) || (flags & FLAG_C)) { // (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true + // do stuff +} +</pre> + +<pre class="brush: js">// if we own a bat or cat +var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 +if (flags & mask) { // 0101 & 0110 => 0100 => true + // do stuff +} +</pre> + +<p>Flags can be set by ORing them with a bitmask, where each bit with the value one will set the corresponding flag, if that flag isn't already set. For example, the bitmask 1100 can be used to set flags C and D:</p> + +<pre class="brush: js">// yes, we own a cat and a duck +var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 +flags |= mask; // 0101 | 1100 => 1101 +</pre> + +<p>Flags can be cleared by ANDing them with a bitmask, where each bit with the value zero will clear the corresponding flag, if it isn't already cleared. This bitmask can be created by NOTing primitive bitmasks. For example, the bitmask 1010 can be used to clear flags A and C:</p> + +<pre class="brush: js">// no, we don't have an ant problem or own a cat +var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>The mask could also have been created with <code>~FLAG_A & ~FLAG_C</code> (De Morgan's law):</p> + +<pre class="brush: js">// no, we don't have an ant problem, and we don't own a cat +var mask = ~FLAG_A & ~FLAG_C; +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>Flags can be toggled by XORing them with a bitmask, where each bit with the value one will toggle the corresponding flag. For example, the bitmask 0110 can be used to toggle flags B and C:</p> + +<pre class="brush: js">// if we didn't have a bat, we have one now, and if we did have one, bye-bye bat +// same thing for cats +var mask = FLAG_B | FLAG_C; +flags = flags ^ mask; // 1100 ^ 0110 => 1010 +</pre> + +<p>Finally, the flags can all be flipped with the NOT operator:</p> + +<pre class="brush: js">// entering parallel universe... +flags = ~flags; // ~1010 => 0101 +</pre> + +<h3 id="Conversion_snippets">Conversion snippets</h3> + +<p>Convert a binary <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">string</a></code> to a decimal <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">number</a></code>:</p> + +<pre class="brush: js">var sBinString = "1011"; +var nMyNumber = parseInt(sBinString, 2); +alert(nMyNumber); // prints 11, i.e. 1011 +</pre> + +<p>Convert a decimal <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">number</a></code> to a binary <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">string</a></code>:</p> + +<pre class="brush: js">var nMyNumber = 11; +var sBinString = nMyNumber.toString(2); +alert(sBinString); // prints 1011, i.e. 11 +</pre> + +<h3 id="Automate_Mask_Creation">Automate Mask Creation</h3> + +<p>If you have to create many masks from some <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code> values, you can automatize the process:</p> + +<pre class="brush: js">function createMask () { + var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length; + for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++); + return nMask; +} +var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011 +var mask2 = createMask(false, false, true); // 4, i.e.: 0100 +var mask3 = createMask(true); // 1, i.e.: 0001 +// etc. + +alert(mask1); // prints 11, i.e.: 1011 +</pre> + +<h3 id="Reverse_algorithm_an_array_of_booleans_from_a_mask">Reverse algorithm: an array of booleans from a mask</h3> + +<p>If you want to create an <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">array</a></code> of <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">booleans</a></code> from a mask you can use this code:</p> + +<pre class="brush: js">function arrayFromMask (nMask) { + // nMask must be between -2147483648 and 2147483647 + if (nMask > 0x7fffffff || nMask < -0x80000000) { throw new TypeError("arrayFromMask - out of range"); } + for (var nShifted = nMask, aFromMask = []; nShifted; aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1); + return aFromMask; +} + +var array1 = arrayFromMask(11); +var array2 = arrayFromMask(4); +var array3 = arrayFromMask(1); + +alert("[" + array1.join(", ") + "]"); +// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011 +</pre> + +<p>You can test both algorithms at the same time…</p> + +<pre class="brush: js">var nTest = 19; // our custom mask +var nResult = createMask.apply(this, arrayFromMask(nTest)); + +alert(nResult); // 19 +</pre> + +<p>For didactic purpose only (since there is the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number/toString" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number/toString">Number.toString(2)</a></code> method), we show how it is possible to modify the <code>arrayFromMask</code> algorithm in order to create a <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">string</a></code> containing the binary representation of a <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">number</a></code>, rather than an <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">array</a></code> of <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">booleans</a></code>:</p> + +<pre class="brush: js">function createBinaryString (nMask) { + // nMask must be between -2147483648 and 2147483647 + for (var nFlag = 0, nShifted = nMask, sMask = ""; nFlag < 32; nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1); + return sMask; +} + +var string1 = createBinaryString(11); +var string2 = createBinaryString(4); +var string3 = createBinaryString(1); + +alert(string1); +// prints 00000000000000000000000000001011, i.e. 11 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-bitwise-not-operator', 'Bitwise NOT Operator')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-binary-bitwise-operators', 'Binary Bitwise Operators')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.operators.bitwise")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/%EB%85%BC%EB%A6%AC_%EC%97%B0%EC%82%B0%EC%9E%90(Logical_Operators)">논리 연산자</a></li> +</ul> diff --git a/files/ko/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html b/files/ko/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html new file mode 100644 index 0000000000..93146d63cf --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html @@ -0,0 +1,395 @@ +--- +title: 할당 연산자 +slug: Web/JavaScript/Reference/Operators/Assignment_Operators +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators#Assignment_operators +translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>할당 연산자</strong>는 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div> + + + +<h2 id="개요">개요</h2> + +<p>기본 할당연산자는 등호(<code>=</code>)로, 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다. 즉, <code>x = y</code>는 <code>y</code>의 값을 <code>x</code>에 할당힙니다. 다른 할당 연산자는 보통 표준 연산의 축약형으로, 다음 표에서 종류와 예시를 확인할 수 있습니다.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>이름</th> + <th>단축 연산자</th> + <th>의미</th> + </tr> + <tr> + <td><a href="#Assignment">할당</a></td> + <td><code>x = y</code></td> + <td><code>x = y</code></td> + </tr> + <tr> + <td><a href="#Addition_assignment">덧셈 할당</a></td> + <td><code>x += y</code></td> + <td><code>x = x + y</code></td> + </tr> + <tr> + <td><a href="#Subtraction_assignment">뺄셈 할당</a></td> + <td><code>x -= y</code></td> + <td><code>x = x - y</code></td> + </tr> + <tr> + <td><a href="#Multiplication_assignment">곱셈 할당</a></td> + <td><code>x *= y</code></td> + <td><code>x = x * y</code></td> + </tr> + <tr> + <td><a href="#Division_assignment">나눗셈 할당</a></td> + <td><code>x /= y</code></td> + <td><code>x = x / y</code></td> + </tr> + <tr> + <td><a href="#Remainder_assignment">나머지 연산 할당</a></td> + <td><code>x %= y</code></td> + <td><code>x = x % y</code></td> + </tr> + <tr> + <td><a href="#Exponentiation_assignment">지수 연산 할당</a></td> + <td><code>x **= y</code></td> + <td><code>x = x ** y</code></td> + </tr> + <tr> + <td><a href="#Left_shift_assignment">왼쪽 시프트 할당</a></td> + <td><code>x <<= y</code></td> + <td><code>x = x << y</code></td> + </tr> + <tr> + <td><a href="#Right_shift_assignment">오른쪽 시프트 할당</a></td> + <td><code>x >>= y</code></td> + <td><code>x = x >> y</code></td> + </tr> + <tr> + <td><a href="#Unsigned_right_shift_assignment">부호없는 오른쪽 시프트 할당</a></td> + <td><code>x >>>= y</code></td> + <td><code>x = x >>> y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_AND_assignment">비트 AND 할당</a></td> + <td><code>x &= y</code></td> + <td><code>x = x & y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_XOR_assignment">비트 XOR 할당</a></td> + <td><code>x ^= y</code></td> + <td><code>x = x ^ y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_OR_assignment">비트 OR 할당</a></td> + <td><code>x |= y</code></td> + <td><code>x = x | y</code></td> + </tr> + </tbody> +</table> + +<h2 id="할당"><a name="Assignment">할당</a></h2> + +<p>단순 할당 연산자는 값을 변수에 할당합니다. 할당 연산자는 할당의 결과값으로 평가됩니다. 할당 연산자를 연속해서 사용해, 다수의 변수에 하나의 값을 한꺼번에 할당할 수 있습니다. 예제를 참고하세요.</p> + +<h4 id="구문">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x = y +</pre> + +<h4 id="예제">예제</h4> + +<pre class="brush: js">// 다음과 같은 변수를 가정 +// x = 5 +// y = 10 +// z = 25 + +x = y // x는 10 +x = y = z // x, y, z 모두 25 +</pre> + +<h3 id="덧셈_할당"><a name="Addition_assignment">덧셈 할당</a></h3> + +<p>덧셈 할당 연산자는 변수에 오른쪽 피연산자의 값을 더하고, 그 결과를 변수에 할당합니다. 두 피연산자의 자료형이 덧셈 할당 연산자의 행동을 결정합니다. 덧셈 연산자처럼 합 또는 연결이 가능합니다. 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "덧셈 연산자", "#Addition", 1)}}를 참고하세요.</p> + +<h4 id="구문_2">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x += y +<strong>의미:</strong> x = x + y +</pre> + +<h4 id="예제_2">예제</h4> + +<pre class="brush: js">// 다음과 같은 변수를 가정 +// foo = "foo" +// bar = 5 +// baz = true + + +// Number + Number -> 합 +bar += 2 // 7 + +// Boolean + Number -> 합 +baz += 1 // 2 + +// Boolean + Boolean -> 합 +baz += false // 1 + +// Number + String -> 연결 +bar += 'foo' // "5foo" + +// String + Boolean -> 연결 +foo += false // "foofalse" + +// String + String -> 연결 +foo += 'bar' // "foobar" +</pre> + +<h3 id="뺄셈_할당"><a name="Subtraction_assignment">뺄셈 할당</a></h3> + +<p>뺄셈 할당 연산자는 변수에서 오른쪽 피연산자의 값을 빼고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "뺄셈 연산자", "#Subtraction", 1)}}를 참고하세요.</p> + +<h4 id="구문_3">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x -= y +<strong>의미:</strong> x = x - y +</pre> + +<h4 id="예제_3">예제</h4> + +<pre class="brush: js">// 다음과 같은 변수를 가정 +// bar = 5 + +bar -= 2 // 3 +bar -= "foo" // NaN +</pre> + +<h3 id="곱셈_할당"><a name="Multiplication_assignment">곱셈 할당</a></h3> + +<p>곱셈 할당 연산자는 변수에 오른쪽 피연산자의 값을 곱하고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "곱셈 연산자", "#Multiplication", 1)}}를 참고하세요.</p> + +<h4 id="구문_4">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x *= y +<strong>의미:</strong> x = x * y +</pre> + +<h4 id="예제_4">예제</h4> + +<pre class="brush: js">// 다음과 같은 변수를 가정 +// bar = 5 + +bar *= 2 // 10 +bar *= "foo" // NaN +</pre> + +<h3 id="나눗셈_할당"><a name="Division_assignment">나눗셈 할당</a></h3> + +<p>나눗셈 할당 연산자는 변수를 오른쪽 피연산자로 나누고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "나눗셈 연산자", "#Division", 1)}}를 참고하세요.</p> + +<h4 id="구문_5">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x /= y +<strong>의미:</strong> x = x / y +</pre> + +<h4 id="예제_5">예제</h4> + +<pre class="brush: js">// 다음과 같은 변수를 가정 +// bar = 5 + +bar /= 2 // 2.5 +bar /= "foo" // NaN +bar /= 0 // Infinity +</pre> + +<h3 id="나머지_연산_할당"><a name="Remainder_assignment">나머지 연산 할당</a></h3> + +<p>나머지 연산 할당은 변수를 오른쪽 피연산자로 나눈 나머지를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "나머지 연산자", "#Remainder", 1)}}를 참고하세요.</p> + +<h4 id="구문_6">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x %= y +<strong>의미:</strong> x = x % y +</pre> + +<h4 id="예제_6">예제</h4> + +<pre class="brush: js">// 다음과 같은 변수를 가정 +// bar = 5 + +bar %= 2 // 1 +bar %= "foo" // NaN +bar %= 0 // NaN +</pre> + +<h3 id="거듭제곱_할당"><a id="Exponentiation_assignment" name="Exponentiation_assignment">거듭제곱 할당</a></h3> + +<p>거듭제곱 할당 연산자는 변수를 오른쪽 피연산자만큼 거듭제곱한 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "거듭제곱 연산자", "#Exponentiation", 1)}}를 참고하세요.</p> + +<h4 id="구문_7">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x **= y +<strong>의미:</strong> x = x ** y +</pre> + +<h4 id="예제_7">예제</h4> + +<pre class="brush: js">// 다음과 같은 변수를 가정 +// bar = 5 + +bar **= 2 // 25 +bar **= "foo" // NaN</pre> + +<h3 id="왼쪽_시프트_할당"><a name="Left_shift_assignment">왼쪽 시프트 할당</a></h3> + +<p>왼쪽 시프트 할당 연산자는 변수의 비트를 오른쪽 피연산자의 값만큼 왼쪽으로 이동하고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "left shift operator", "#Left_shift", 1)}}를 참고하세요.</p> + +<h4 id="구문_8">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x <<= y +<strong>의미:</strong> x = x << y +</pre> + +<h4 id="예제_8">예제</h4> + +<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) +bar <<= 2; // 20 (00000000000000000000000000010100) +</pre> + +<h3 id="오른쪽_시프트_할당"><a name="Right_shift_assignment">오른쪽 시프트 할당</a></h3> + +<p>오른쪽 시프트 할당 연산자는 변수의 비트를 오른쪽 피연산자의 값만큼 우측으로 이동하고, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "right shift operator", "#Right_shift", 1)}}를 참고하세요.</p> + +<h4 id="구문_9">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x >>= y +<strong>의미:</strong> x = x >> y +</pre> + +<h4 id="예제_9">예제</h4> + +<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) +bar >>= 2; // 1 (00000000000000000000000000000001) + +var bar -5; // (-00000000000000000000000000000101) +bar >>= 2; // -2 (-00000000000000000000000000000010) +</pre> + +<h3 id="부호_없는_오른쪽_시프트_할당"><a name="Unsigned_right_shift_assignment">부호 없는 오른쪽 시프트 할당</a></h3> + +<p>부호 없는 오른쪽 시프트 할당 연산자는 변수의 비트를 오른쪽 피연산자의 값만큼 우측으로 이동하고, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", " unsigned right shift operator", "#Unsigned_right_shift", 1)}}을 참고하세요.</p> + +<h4 id="구문_10">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x >>>= y +<strong>의미:</strong> x = x >>> y +</pre> + +<h4 id="예제_10">예제</h4> + +<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) +bar >>>= 2; // 1 (00000000000000000000000000000001) + +var bar = -5; // (-00000000000000000000000000000101) +bar >>>= 2; // 1073741822 (00111111111111111111111111111110)</pre> + +<h3 id="비트_AND_할당"><a name="Bitwise_AND_assignment">비트 AND 할당</a></h3> + +<p>비트 AND 할당 연산자는 양쪽 피연산자의 이진 표현을 AND 연산한 후, 그 결과를 변수에 할당합니다. 자세한 내용은{{jsxref("Operators/Bitwise_Operators", "bitwise AND operator", "#Bitwise_AND", 1)}}을 참고하세요.</p> + +<h4 id="구문_11">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x &= y +<strong>의미:</strong> x = x & y +</pre> + +<h4 id="예제_11">예제</h4> + +<pre class="brush: js">var bar = 5; +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +bar &= 2; // 0 +</pre> + +<h3 id="비트_XOR_할당"><a name="Bitwise_XOR_assignment">비트 XOR 할당</a></h3> + +<p>비트 XOR 할당 연산자는 양쪽 피연산자의 이진 표현을 XOR 연산한 후, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "bitwise XOR operator", "#Bitwise_XOR", 1)}}를 참고하세요.</p> + +<h4 id="구문_12">구문</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x ^= y +<strong>의미:</strong> x = x ^ y +</pre> + +<h4 id="예제_12">예제</h4> + +<pre class="brush: js">var bar = 5; +bar ^= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111 +</pre> + +<h3 id="비트_OR_할당"><a name="Bitwise_OR_assignment">비트 OR 할당</a></h3> + +<p>비트 OR 할당 연산자는 양쪽 피연산자의 이진 표현을 OR 연산한 후, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "bitwise OR operator", "#Bitwise_OR", 1)}}를 참고하세요.</p> + +<h4 id="문법">문법</h4> + +<pre class="syntaxbox"><strong>연산자:</strong> x |= y +<strong>의미:</strong> x = x | y +</pre> + +<h4 id="예제_13">예제</h4> + +<pre class="brush: js">var bar = 5; +bar |= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111 +</pre> + +<h2 id="예제_14">예제</h2> + +<h3 id="다른_할당_연산자를_갖는_왼쪽_피연산자">다른 할당 연산자를 갖는 왼쪽 피연산자</h3> + +<p>드물게, 할당 연산자(예: <code>x += y</code>)와 그 의미를 나타낸 표현(<code>x = x + y</code>)이 동일하지 않은 경우가 있습니다. 할당 연산자의 왼쪽 피연산자가 다른 할당 연산자를 포함할 때, 왼쪽 피연산자는 한 번만 평가됩니다. 예를 들면 다음과 같습니다.</p> + +<pre class="brush: js">a[i++] += 5 // i는 한 번만 평가됨 +a[i++] = a[i++] + 5 // i는 두 번 평가됨 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.operators.assignment")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">산술 연산자</a></li> +</ul> diff --git a/files/ko/conflicting/web/javascript/reference/statements/switch/index.html b/files/ko/conflicting/web/javascript/reference/statements/switch/index.html new file mode 100644 index 0000000000..4fe127b7db --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/statements/switch/index.html @@ -0,0 +1,122 @@ +--- +title: default +slug: Web/JavaScript/Reference/Statements/default +tags: + - JavaScript + - Keyword + - Reference +translation_of: Web/JavaScript/Reference/Statements/switch +translation_of_original: Web/JavaScript/Reference/Statements/default +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><code><strong>default</strong></code> 키워드는 {{jsxref("Statements/switch", "switch")}} 구문과 {{jsxref("Statements/export", "export")}} 구문에서 사용할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-default.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<p>{{jsxref("Statements/switch", "switch")}} 구문 내에서는 다음과 같이 사용합니다.</p> + +<pre class="syntaxbox">switch (expression) { + case value1: + //Statements executed when the result of expression matches value1 + [break;] + default: + //Statements executed when none of the values match the value of the expression + [break;] +}</pre> + +<p>{{jsxref("Statements/export", "export")}} 구문 내에서는 다음과 같이 사용합니다.</p> + +<pre class="syntaxbox">export default <em>nameN</em> </pre> + +<h2 id="설명">설명</h2> + +<p>세부사항을 보려면,</p> + +<ul> + <li>{{jsxref("Statements/switch", "switch")}} 구문,</li> + <li>{{jsxref("Statements/export", "export")}} 구문 페이지를 확인하세요.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="switch에서_default_사용"><code>switch</code>에서 <code>default</code> 사용</h3> + +<p>아래 예제에서 <code>expr</code> 이 "오렌지" 또는 "사과"일 때, 프로그램은 값을 "오렌지" 또는 "사과"와 일치시키고 해당 명령문을 실행합니다. 기본(<code>default</code>) 키워드는 다른 경우에 도움이 되며 연관된 명령문을 실행합니다.</p> + +<pre class="brush: js">switch (expr) { + case '오렌지': + console.log('오렌지는 1000원입니다.'); + break; + case '사과': + console.log('사과는 500원입니다.'); + break; + default: + console.log('죄송합니다. ' + expr + '의 재고가 다 떨어졌습니다.'); +}</pre> + +<h3 id="export에서_default_사용"><code>export</code>에서 <code>default</code> 사용</h3> + +<p>단일 값을 내보내거나 모듈의 기본 값이 필요한 경우, 기본 내보내기를 사용할 수 있습니다.</p> + +<pre class="brush: js">// module "my-module.js" +let cube = function cube(x) { + return x * x * x; +}; +export default cube;</pre> + +<p>다른 스크립트에서 가져오는 건 간단합니다.</p> + +<pre class="brush: js">// module "my-module.js" +import cube from 'my-module'; //default export gave us the liberty to say import cube, instead of import cube from 'my-module' +console.log(cube(3)); // 27 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.statements.default")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Statements/export", "export")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> +</ul> 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 new file mode 100644 index 0000000000..e5e70ed9fa --- /dev/null +++ b/files/ko/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html @@ -0,0 +1,87 @@ +--- +title: Using XPath +slug: Using_XPath +tags: + - AJAX + - Add-ons + - DOM + - Extensions + - Transforming_XML_with_XSLT + - XPath +translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript +translation_of_original: Using_XPath +--- +<p><a href="ko/XPath">XPath</a>은 XML 문서의 위치 정보를 위한 언어입니다. +</p><p>이 문서는 자바스크립트 코드와 XPath의 관계를 위한 Mozilla 인터페이스에 대해 설명합니다. 이러한 것들은 (이 부분에 대해 W3C 작업 그룹에서 작성한) <a class="external" href="http://www.w3.org/TR/DOM-Level-3-XPath/">DOM Level 3 XPath</a>에 설명되어 있습니다. +</p><p>이 문서는 XPath 자체를 설명하지 않습니다. 기술에 대해 익숙하지 않다면 <a class="external" href="http://www.w3schools.com/xpath/">W3Schools XPath tutorial</a>을 참고하십시오. +</p> +<h3 id="Wrapper_function">Wrapper function</h3> +<p>다음의 함수는 주어진 XML 노드의 XPath 표현을 평가하는데 사용할 수 있습니다. 첫 번째 전달인자는 DOM 노드 혹은 Document 객체이고, 두 번째 전달인자는 XPath 표현에 대한 문자열 정의입니다. +</p> +<pre>// Evaluate an XPath expression aExpression against a given DOM node +// or Document object (aNode), returning the results as an array +// thanks wanderingstan at morethanwarm dot mail dot com for the +// initial work. +function evaluateXPath(aNode, aExpr) { + var xpe = new XPathEvaluator(); + var nsResolver = xpe.createNSResolver(aNode.ownerDocument == null ? + aNode.documentElement : aNode.ownerDocument.documentElement); + var result = xpe.evaluate(aExpr, aNode, nsResolver, 0, null); + var found = []; + var res; + while (res = result.iterateNext()) + found.push(res); + return found; +} +</pre> +<p>이 함수는 <code>new XPathEvaluator()</code>와 같이 사용할 수 있습니다. 이것의 생성자는 Mozilla에 정의되어 있습니다. 다른 브라우저에서 사용될 웹페이지에서 이 스크립트가 사용된다면 다음과 같이 <code>new XPathEvaluator()</code>를 호출하면 됩니다: +</p> +<pre> // XPathEvaluator is implemented on objects that implement Document + var xpe = aNode.ownerDocument || aNode; +</pre> +<p>이 예에서 <a href="ko/DOM/document.createNSResolver">XPathNSResolver</a>를 생성하는 것은 다음과 같이 간략화할 수 있습니다: +</p> +<pre> var nsResolver = xpe.createNSResolver(xpe.documentElement); +</pre> +<p>그러나 <code>createNSResolver</code>는 XPath 표현에 대한 네임스페이스가 정해져 있고, 그러한 것들이 쿼리를 보낼 문서의 내용과 일치하여야 합니다. 그렇지 않다면 당신 자신만의 XPathNSResolver를 수행하는 부분을 만들어야 합니다. +</p><p>(<a href="ko/Parsing_and_serializing_XML">Parsing and serializing XML</a>에서 설명하는 것과 같은) DOM 트리안에 로컬이나 원격 XML 파일을 읽기 위해 <a href="ko/XMLHttpRequest">XMLHttpRequest</a>를 사용한다면, <code>evaluateXPath()</code>의 첫 번째 전달인자는 <code>req.responseXML</code>가 되어야 합니다. +</p> +<h3 id=".EC.82.AC.EC.9A.A9.EC.98.88">사용예</h3> +<p>다음과 같은 XML 문서가 있다고 가정합니다.(<a href="ko/How_to_Create_a_DOM_tree">How to Create a DOM tree</a>와 <a href="ko/Parsing_and_serializing_XML">Parsing and serializing XML</a>을 참조하십시오.): +</p> +<pre><?xml version="1.0"?> +<people> + <person first-name="eric" middle-initial="H" last-name="jung"> + <address street="321 south st" city="denver" state="co" country="usa"/> + <address street="123 main st" city="arlington" state="ma" country="usa"/> + </person> + + <person first-name="jed" last-name="brown"> + <address street="321 north st" city="atlanta" state="ga" country="usa"/> + <address street="123 west st" city="seattle" state="wa" country="usa"/> + <address street="321 south avenue" city="denver" state="co" country="usa"/> + </person> +</people> +</pre> +<p>XPath 표현으로 문서에 "query"를 보낼 수 있습니다. 비록 DOM 트리를 탐색하는 것이 비슷한 결과를 가져오더라도 XPath를 사용하는 것이 더 빠르고 강력합니다. 만일 <code>id</code> attribute를 사용한다면 <code>document.getElementById()</code>를 사용해도 여전히 강력합니다. 하지만, XPath 만큼 강력하지 않습니다. 몇 가지 예제가 있습니다: +</p> +<pre>// display the last names of all people in the doc +var results = evaluateXPath(people, "//person/@last-name"); +for (var i in results) + alert("Person #" + i + " has the last name " + results[i].value); + +// get the 2nd person node +results = evaluateXPath(people, "/people/person[2]"); + +// get all the person nodes that have addresses in denver +results = evaluateXPath(people, "//person[address/@city='denver']"); + +// get all the addresses that have "south" in the street name +results = evaluateXPath(people, "//address[contains(@street, 'south')]"); +alert(results.length); +</pre> +<h3 id=".EC.A0.95.EB.B3.B4">정보</h3> +<ul> <li><a href="/ko/XPath" title="ko/XPath">XPath</a></li> <li><a class="external" href="http://www.topxml.com/code/default.asp?p=3&id=v20021221025528">XPath Visualizer for Mozilla and Firefox</a></li> <li><a class="external" href="http://www.w3schools.com/xpath/">XPath tutorial</a></li> <li><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=229106">Forum discussion on this topic</a></li> <li><a class="external" href="http://zeus.jesus.cam.ac.uk/~jg307/mozilla/xpath-tutorial.html">Using the Mozilla JavaScript Interface to XPath</a> - 자바스크립트로 XPath를 사용하는 것에 대한 튜터리얼</li> +</ul> + +<p>{{ languages( { "fr": "fr/Utilisation_de_XPath", "ja": "ja/Using_XPath", "ko": "ko/Using_XPath" } ) }}</p> |