diff options
Diffstat (limited to 'files/ko/conflicting/learn')
12 files changed, 0 insertions, 3048 deletions
diff --git a/files/ko/conflicting/learn/common_questions/index.html b/files/ko/conflicting/learn/common_questions/index.html deleted file mode 100644 index b31ee26f0d..0000000000 --- a/files/ko/conflicting/learn/common_questions/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Infrastructure -slug: conflicting/Learn/Common_questions -translation_of: Learn/Common_questions -translation_of_original: Learn/Infrastructure -original_slug: 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 deleted file mode 100644 index cfebc2d59c..0000000000 --- a/files/ko/conflicting/learn/common_questions_139278709439023a85d849385412271e/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Web 기술 -slug: conflicting/Learn/Common_questions_139278709439023a85d849385412271e -tags: - - Beginner - - WebMechanics -translation_of: Learn/Common_questions -translation_of_original: Learn/Web_Mechanics -original_slug: Learn/Web_기술 ---- -<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 deleted file mode 100644 index 73e1decd09..0000000000 --- a/files/ko/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: 종속과 상속 -slug: conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance -original_slug: Web/CSS/시작하기/종속과_상속 ---- -<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 deleted file mode 100644 index 04c02d0efe..0000000000 --- a/files/ko/conflicting/learn/css/building_blocks/index.html +++ /dev/null @@ -1,332 +0,0 @@ ---- -title: 상자 -slug: conflicting/Learn/CSS/Building_blocks -translation_of: Learn/CSS/Building_blocks -translation_of_original: Web/Guide/CSS/Getting_started/Boxes -original_slug: Web/CSS/시작하기/상자 ---- -<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 deleted file mode 100644 index 68fe28a5f0..0000000000 --- a/files/ko/conflicting/learn/css/building_blocks/styling_tables/index.html +++ /dev/null @@ -1,476 +0,0 @@ ---- -title: 테이블 -slug: conflicting/Learn/CSS/Building_blocks/Styling_tables -translation_of: Learn/CSS/Building_blocks/Styling_tables -translation_of_original: Web/Guide/CSS/Getting_started/Tables -original_slug: Web/CSS/시작하기/테이블 ---- -<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 deleted file mode 100644 index 1b3c4a73ca..0000000000 --- a/files/ko/conflicting/learn/css/css_layout/index.html +++ /dev/null @@ -1,371 +0,0 @@ ---- -title: 배치 -slug: conflicting/Learn/CSS/CSS_layout -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout -original_slug: Web/CSS/시작하기/배치 ---- -<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 deleted file mode 100644 index d8d0dc9b06..0000000000 --- a/files/ko/conflicting/learn/css/css_layout/introduction/index.html +++ /dev/null @@ -1,410 +0,0 @@ ---- -title: Introduction to CSS Layout -slug: conflicting/Learn/CSS/CSS_layout/Introduction -translation_of: Learn/CSS/CSS_layout/Introduction -translation_of_original: Learn/CSS/Basics/Layout -original_slug: Learn/CSS/Basics/Layout ---- -<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 deleted file mode 100644 index ac90109fc1..0000000000 --- a/files/ko/conflicting/learn/css/styling_text/fundamentals/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: 텍스트 스타일 -slug: conflicting/Learn/CSS/Styling_text/Fundamentals -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles -original_slug: Web/CSS/시작하기/텍스트_스타일 ---- -<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 deleted file mode 100644 index b368adde4e..0000000000 --- a/files/ko/conflicting/learn/css/styling_text/styling_lists/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -title: 리스트 -slug: conflicting/Learn/CSS/Styling_text/Styling_lists -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/Lists -original_slug: Web/CSS/시작하기/리스트 ---- -<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 deleted file mode 100644 index 54ecdbf832..0000000000 --- a/files/ko/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html +++ /dev/null @@ -1,329 +0,0 @@ ---- -title: 시작하기 (자바스크립트 튜토리얼) -slug: conflicting/Learn/Getting_started_with_the_web/JavaScript_basics -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics -translation_of_original: Web/JavaScript/Getting_Started -original_slug: Web/JavaScript/시작하기 ---- -<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 deleted file mode 100644 index e67b78e192..0000000000 --- a/files/ko/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html +++ /dev/null @@ -1,269 +0,0 @@ ---- -title: 약자 표시 및 이해시키는 방법 -slug: conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting -tags: - - HTML - - 초보 -translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations -translation_of_original: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable -original_slug: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable ---- -<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/javascript/objects/index.html b/files/ko/conflicting/learn/javascript/objects/index.html deleted file mode 100644 index c0f51fe532..0000000000 --- a/files/ko/conflicting/learn/javascript/objects/index.html +++ /dev/null @@ -1,291 +0,0 @@ ---- -title: 객체지향 자바스크립트 개요 -slug: conflicting/Learn/JavaScript/Objects -translation_of: Learn/JavaScript/Objects -translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript -original_slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---- -<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> |