diff options
Diffstat (limited to 'files/ko/web/html')
178 files changed, 30973 insertions, 0 deletions
diff --git a/files/ko/web/html/applying_color/index.html b/files/ko/web/html/applying_color/index.html new file mode 100644 index 0000000000..7fd7836e35 --- /dev/null +++ b/files/ko/web/html/applying_color/index.html @@ -0,0 +1,510 @@ +--- +title: CSS로 HTML 요소에 색 입히기 +slug: Web/HTML/Applying_color +tags: + - Beginner + - CSS + - CSS Colors + - Guide + - HTML + - HTML Colors + - color + - 색 +translation_of: Web/HTML/Applying_color +--- +<div>{{HTMLRef}}</div> + +<p>색은 인간의 감정을 표현하는 기본적인 형태입니다. 아이들은 뭔가 그릴 수 있는 민첩성을 갖추기도 전에 색을 가지고 놉니다. 사람들이 웹 사이트를 개발할 때 보통 색을 제일 먼저 입혀보고 싶어 하는 건 이런 이유일지도 모릅니다. <span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a>와 함께라면 무궁무진한 방법으로 여러분의 <a href="/ko/docs/Web/HTML">HTML</a> <a href="/ko/docs/Web/HTML/Element">요소</a>에 색을 넣어 원하는 모습을 만들 수 있습니다. 이 글은 CSS 색을 HTML에 적용하는 기초를 소개합니다.</span></p> + +<p>다행히도 HTML에 색을 추가하는 건 정말 쉽고 거의 모든 곳에 할 수 있는 일입니다.</p> + +<p>{{anch("색을 입힐 수 있는 것", "색을 입힐 수 있는 목록, 그때 사용할 CSS 속성")}}, {{anch("색을 나타내는 법", "색을 나타내는 법")}}, {{anch("색 사용하기", "실제로 색 사용하기")}} 등 색을 쓸 때 알아야 할 주제는 대부분 짚고 가겠습니다. {{anch("사용자의 색 선택", "사용자가 색을 선택")}}할 수 있는 방법도 확인해보겠습니다.</p> + +<p>마지막으로는 적절한 색을 고르고, 서로 다른 시각적 조건을 가진 사람들을 고려하는 등 {{anch("현명하게 색 고르기", "현명한 색 선택")}}에 대해 간단히 알아보겠습니다.</p> + +<h2 id="색을_입힐_수_있는_것">색을 입힐 수 있는 것</h2> + +<p>요소 차원에서 보자면 HTML의 모든 것에 색을 입힐 수 있습니다. 대신에 글씨와 테두리처럼, 요소 안에 그려지는 것의 종류에 따라 알아보겠습니다. 각각의 종류에 적용할 수 있는 CSS 속성의 목록도 보겠습니다.</p> + +<p>가장 기초적인 단계로는 {{cssxref("color")}} 속성이 HTML 요소의 콘텐츠 전경색을 지정하고, {{cssxref("background-color")}} 속성이 요소의 배경색을 지정합니다. 두 속성은 거의 모든 요소에 사용할 수 있습니다.</p> + +<h3 id="글씨">글씨</h3> + +<p>요소를 렌더링할 때 글씨, 글씨 배경과 기타 꾸미기 효과의 색은 아래에 나열한 속성이 결정합니다.</p> + +<dl> + <dt>{{cssxref("color")}}</dt> + <dd>글씨와 글씨 장식(밑줄, 윗줄, 취소선 등)을 그릴 때 사용할 색입니다.</dd> + <dt>{{cssxref("background-color")}}</dt> + <dd>글씨의 배경색입니다.</dd> + <dt>{{cssxref("text-shadow")}}</dt> + <dd>글씨의 그림자 효과를 설정합니다. 여러 옵션 중에서 그림자 색을 정할 수 있습니다. (이후 다른 옵션에 따라 흐려지고 배경과 섞입니다)<span class="hidden">See {{SectionOnPage("/en-US/docs/Learn/CSS/Styling_text/Fundamentals", "Text drop shadows")}} to learn more.</span></dd> + <dt>{{cssxref("text-decoration-color")}}</dt> + <dd>기본 설정에서 글씨 장식(밑줄, 윗줄, 취소선 등)은 <code>color</code> 속성의 값을 색으로 사용합니다. 그러나 <code>text-decoration-color</code> 속성을 지정하면 다른 색으로 바꿀 수 있습니다.</dd> + <dt>{{cssxref("text-emphasis-color")}}</dt> + <dd>글씨 위에 표시할 강조 표시의 색입니다.</dd> + <dt>{{cssxref("caret-color")}}</dt> + <dd>요소의 {{Glossary("caret", "캐럿")}}(글씨 입력 커서) 색입니다. {{HTMLElement("input")}}이나 {{HTMLElement("textarea")}}, HTML {{htmlattrxref("contenteditable")}} 속성을 설정한 요소처럼 편집 가능한 경우에만 유용합니다.</dd> +</dl> + +<h3 id="박스">박스</h3> + +<p>모든 요소는 모종의 콘텐츠를 가진 박스로, 콘텐츠 외에도 배경과 테두리를 가질 수 있습니다.</p> + +<dl> + <dt>{{anch("테두리")}}</dt> + <dd>{{anch("테두리")}} 항목에서 박스 테두리에 사용할 수 있는 CSS 속성의 목록을 확인하세요.</dd> + <dt>{{cssxref("background-color")}}</dt> + <dd>전경 콘텐츠가 없는 곳에 표시할 배경색입니다.</dd> + <dt>{{cssxref("column-rule-color")}}</dt> + <dd>긴 글씨를 여러 단으로 나눌 때 그릴 구분선의 색입니다.</dd> + <dt>{{cssxref("outline-color")}}</dt> + <dd>요소의 바깥에 외곽선을 그릴 때 사용할 색입니다. 외곽선은 문서에서 공간을 차지하지 않아서 다른 요소를 가릴 수 있다는 점에서 테두리와 다릅니다. 보통 현재 선택돼 입력 이벤트를 받을 수 있는 요소를 강조할 때 사용합니다.</dd> +</dl> + +<h3 id="테두리">테두리</h3> + +<p>모든 요소는 주위에 테두리를 가질 수 있습니다. 기본적인 테두리는 요소 콘텐츠의 모서리를 따라 그리는 선입니다. <span class="hidden">See {{SectionOnPage("/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model", "Box properties")}} to learn about the relationship between elements and their borders, and the article <a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Styling borders using CSS</a> to learn more about applying styles to borders.</span></p> + +<p>{{cssxref("border")}} 단축 속성을 사용하면 색은 물론 <a href="/ko/docs/Web/CSS/border-width">너비</a>와 <a href="/ko/docs/Web/CSS/border-style">스타일</a>(실선, 점선 등)같은 속성을 한 번에 설정할 수 있습니다.</p> + +<dl> + <dt>{{cssxref("border-color")}}</dt> + <dd>모든 면의 테두리가 사용할 단색입니다.</dd> + <dt>{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("border-bottom-color")}}</dt> + <dd>테두리 색을 방향에 따라 다르게 설정할 수 있습니다.</dd> + <dt>{{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}</dt> + <dd>With these, you can set the color used to draw the borders which are closest to the start and end of the block the border surrounds. In a left-to-right writing mode (such as the way English is written), the block start border is the top edge and the block end is the bottom. This differs from the inline start and end, which are the left and right edges (corresponding to where each line of text in the box begins and ends).</dd> + <dt>{{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end-color")}}</dt> + <dd>These let you color the edges of the border closest to to the beginning and the end of the start of lines of text within the box. Which side this is will vary depending on the {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} properties, which are typically (but not always) used to adjust text directionality based on the language being displayed. For example, if the box's text is being rendered right-to-left, then the <code>border-inline-start-color</code> is applied to the right side of the border.</dd> +</dl> + +<h3 id="다른_방법">다른 방법</h3> + +<p>웹 기술에서 CSS만 색을 지원하는건 아닙니다. 웹에서 사용할 수 있는 다른 그래픽 기술에서도 색을 지원합니다.</p> + +<dl> + <dt>HTML <a href="/ko/docs/Web/API/Canvas_API">Canvas API</a></dt> + <dd>{{HTMLElement("canvas")}} 요소로 2D 비트맵 그래픽을 그릴 수 있습니다. <a href="/ko/docs/Web/API/Canvas_API/Tutorial">캔버스 자습서</a>를 방문해 더 알아보세요.</dd> + <dt><a href="/ko/docs/Web/SVG">SVG</a> (Scalable Vector Graphics)</dt> + <dd>선, 패턴, 특정 모양의 형태를 그리는 명령어를 사용해 이미지를 그릴 수 있습니다. SVG 명령어는 XML 형식을 따르며, 웹 페이지에 바로 삽입할 수도 있고, 다른 이미지처럼 {{HTMLElement("img")}} 요소에 넣을 수도 있습니다.</dd> + <dt><a href="/ko/docs/Web/API/WebGL_API">WebGL</a></dt> + <dd>Web Graphics Library는 OpenGL ES 기반의 API로, 웹에서 고성능 2D 및 3D 그래픽을 그릴 수 있습니다. <a href="/ko/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">WebGL 자습서</a>를 방문해 더 알아보세요.</dd> +</dl> + +<h2 id="색을_나타내는_법">색을 나타내는 법</h2> + +<p>CSS에서 색을 나타내려면 우선 "색"이라는 개념을, 원색이나 밝기 등 구성 요소를 분리해 수치로 표기하는 등 컴퓨터가 이해할 수 있는 디지털 형태로 변환해야 합니다. 변환 방법이 여러 가지이듯 CSS가 색을 표현하는 방법도 여러 가지입니다.</p> + +<p>각각의 형태에 대한 더 자세한 내용은 CSS {{cssxref("<color>")}} 단위 문서를 참고하세요.</p> + +<h3 id="키워드">키워드</h3> + +<p>CSS 표준은 다수의 색 키워드를 사전에 정의하고 있으므로, 원하는 색을 가리키는 키워드가 있다면 숫자형 표현 대신 사용할 수 있습니다. 색 키워드는 원색과 2차색(<code>red</code>, <code>blue</code>, <code>orange</code> 등), 단계별 무채색(<code>black</code>에서 <code>white</code>까지, <code>darkgray</code>와 <code>lightgrey</code> 등) 외에도 <code>lightseagreen</code>, <code>cornflowerblue</code>, <code>rebeccapurple</code>처럼 다양한 종류의 혼합색을 포함하고 있습니다.</p> + +<p>사용할 수 있는 모든 색 키워드의 목록은 <a href="/ko/docs/Web/CSS/color_value#%EC%83%89%EC%83%81_%ED%82%A4%EC%9B%8C%EB%93%9C"><code><color></code>의 색상 키워드 항목</a>을 참고하세요.</p> + +<h3 id="RGB_값">RGB 값</h3> + +<p>RGB 색은 세 가지 방법으로 표현할 수 있습니다.</p> + +<h4 id="16진수_문자열_표기법">16진수 문자열 표기법</h4> + +<p>16진수 문자열 표기법은 색의 구성요소(빨강, 초록, 파랑)를 16진수 숫자로 표현합니다. 네 번째 구성 요소로 알파 채널(불투명도)을 포함할 수도 있습니다. 하나의 구성 요소는 0에서 255 사이(0x00에서 0xFF)를 숫자 두 개로, 또는 0에서 15 사이(0x0에서 0xF)를 숫자 한 개로 표기합니다. 단, 모든 구성 요소는 같은 수의 문자로 표기해야 합니다. 한 자릿수(0~F)로 표기한다면, 구성 요소의 최종 값은 자신의 문자를 두 번씩 사용해 계산합니다. 즉, <code>"#D"</code>의 값은 <code>"#DD"</code>입니다.</p> + +<p>16진수 문자열 표기법은 항상 <code>"#"</code>으로 시작해야 하고, 16진수 숫자는 그 후에 위치합니다. 문자열은 대소문자를 구분하지 않습니다.</p> + +<dl> + <dt><code>"#rrggbb"</code></dt> + <dd>완전히 불투명한 색을 지정합니다. 구성 요소 중 빨강은 16진수 <code>0xrr</code>, 초록은 <code>0xgg</code>, 파랑은 <code>0xbb</code>입니다.</dd> + <dt><code>"#rrggbbaa"</code></dt> + <dd>구성 요소 중 빨강은 16진수 <code>0xrr</code>, 초록은 <code>0xgg</code>, 파랑은 <code>0xbb</code>인 색을 지정합니다. 알파 채널의 값은 <code>0xaa</code>로, 값이 낮을 수록 색은 더 투명해집니다.</dd> + <dt><code>"#rgb"</code></dt> + <dd>완전히 불투명한 색을 지정합니다. 구성 요소 중 빨강은 16진수 <code>0xrr</code>, 초록은 <code>0xgg</code>, 파랑은 <code>0xbb</code>입니다.</dd> + <dt><code>"#rgba"</code></dt> + <dd>구성 요소 중 빨강은 16진수 <code>0xrr</code>, 초록은 <code>0xgg</code>, 파랑은 <code>0xbb</code>인 색을 지정합니다. 알파 채널의 값은 <code>0xaa</code>로, 값이 낮을 수록 색은 더 투명해집니다.</dd> +</dl> + +<p>예를 하나 들자면 불투명한 파랑은 <code>"#0000ff"</code>이나 <code>"#00f"</code>로 표현할 수 있습니다. 25%만 불투명한 파랑으로 만들 땐 <code>"#0000ff44"</code> 또는 <code>"#00f4"</code>로 표기합니다.</p> + +<h4 id="RGB_함수형_표기법">RGB 함수형 표기법</h4> + +<p>16진수 문자열 표기법과 같이, RGB(Red/Green/Blue) 함수 표기법은 빨강, 초록, 파랑, 그리고 불투명도를 나타낼 선택적 알파 채널 구성요소를 사용해 색을 나타냅니다. 그러나 문자열 표기법과 달리 CSS 함수 {{cssxref("color_value", "rgb()", "#rgb()")}}를 사용합니다. <code>rgb()</code> 함수의 세 매개변수는 순서대로 빨강, 파랑, 초록 값이며, 생략 가능한 마지막 네 번째 매개변수가 알파 채널을 나타냅니다.</p> + +<p>각 매개변수의 유효한 값은 다음과 같습니다.</p> + +<dl> + <dt><code>red</code>, <code>green</code>, <code>blue</code></dt> + <dd>각각 0 이상, 255 이하인 {{cssxref("<integer>")}}이거나, 또는 0% 이상 100% 이하인 {{cssxref("<percentage>")}}여야 합니다.</dd> + <dt><code>alpha</code></dt> + <dd>0.0(완전히 투명) 이상, 1.0(완전히 불투명) 이하의 숫자여야 합니다. 백분율도 사용할 수 있으며, 0%는 0.0, 100%는 1.0에 대응합니다.</dd> +</dl> + +<p>예를 들어, 50% 불투명도의 밝은 빨강은 <code>rgb(255, 0, 0, 0.5)</code>와 <code>rgb(100%, 0, 0, 50%)</code> 두 방법으로 만들 수 있습니다.</p> + +<h3 id="HSL_함수형_표기법">HSL 함수형 표기법</h3> + +<p>많은 경우, 디자이너와 아티스트는 HSL(색조/채도/명도) 모델을 사용한 색을 선호합니다. 웹에서 HSL 색상은 HSL 함수 표기법을 사용해 나타냅니다. CSS <code>hsl()</code> 함수의 사용법 자체는 <code>rgb()</code> 함수와 매우 유사합니다.</p> + +<div style="padding-bottom: 20px;"> +<figure style="width: 500px;"><img alt="HSL color cylinder" src="https://mdn.mozillademos.org/files/15445/1200px-HSL_color_solid_cylinder_alpha_lowgamma.png" style="height: 375px; width: 500px;"> +<figcaption><strong>그림 1. HSL 색 원기둥.</strong> Hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). <a href="https://www.wikipedia.org/">Wikipedia</a>의 <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a>, <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a> 라이선스 아래에서 재배포.</figcaption> +</figure> +</div> + +<p>The value of the hue (H) component of an HSL color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. The value can be specified in any {{cssxref("<angle>")}} unit supported by CSS, including degrees (<code>deg</code>), radians (<code>rad</code>), gradians (<code>grad</code>), or turns (<code>turn</code>). But this doesn't control how vivid or dull, or how bright or dark the color is.</p> + +<p>The saturation (S) component of the color specifies what percentage of the final color is comprised of the specified hue. The rest is defined by the grey level provided by the luminance (L) component.</p> + +<p>Think of it like creating the perfect paint color:</p> + +<ol> + <li>You start with base paint that's the maximum intensity possible for a given color, such as the most intense blue that can be represented by the user's screen. This is the <strong>hue</strong> (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.</li> + <li>Then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance. Do you want it to be very bright and nearly white, or very dark and closer to black, or somewhere in between? This is specified using a percentage, where 0% is perfectly black and 100% is perfectly white. (regardless of the saturation or hue). In between values are a literal grey area.</li> + <li>Now that you have a grey paint and a perfectly vivid color, you need to mix them together. The saturation (S) component of the color indicates what percentage of the final color should be comprised of that perfectly vivid color. The rest of the final color is made up of the grey paint that represents the saturation.</li> +</ol> + +<p>You can also optionally include an alpha channel, to make the color less than 100% opaque.</p> + +<p>Here are some sample colors in HSL notation:</p> + +<div id="hsl-swatches"> +<div class="hidden"> +<pre class="brush: css">table { + border: 1px solid black; + font: 16px "Open Sans", Helvetica, Arial, sans-serif; + border-spacing: 0; + border-collapse: collapse; +} + +th, td { + border: 1px solid black; + padding:4px 6px; + text-align: left; +} + +th { + background-color: hsl(0, 0%, 75%); +}</pre> + +<pre class="brush: html"><table> + <thead> + <tr> + <th scope="col">Color in HSL notation</th> + <th scope="col">Example</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>hsl(90deg, 100%, 50%)</code></td> + <td style="background-color: hsl(90deg, 100%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(90, 100%, 50%)</code></td> + <td style="background-color: hsl(90, 100%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 50%, 75%)</code></td> + <td style="background-color: hsl(0.15turn, 50%, 75%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 90%, 75%)</code></td> + <td style="background-color: hsl(0.15turn, 90%, 75%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 90%, 50%)</code></td> + <td style="background-color: hsl(0.15turn, 90%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(270deg, 90%, 50%)</code></td> + <td style="background-color: hsl(270deg, 90%, 50%);">&nbsp;</td> + </tr> + </tbody> +</table></pre> +</div> + +<p>{{EmbedLiveSample("hsl-swatches", 300, 260)}}</p> +</div> + +<div class="note"> +<p>Note that when you omit the hue's unit, it's assumed to be in degrees (<code>deg</code>).</p> +</div> + +<h2 id="색_사용하기">색 사용하기</h2> + +<p>Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under {{anch("Things that can have color")}}, there are plenty of things you can color with CSS. Let's look at this from two sides: using color within a {{Glossary("stylesheet")}}, and adding and changing color using {{Glossary("JavaScript")}} code to alter the styles of elements.</p> + +<h3 id="스타일_시트에_색_지정하기">스타일 시트에 색 지정하기</h3> + +<p>The easiest way to apply color to elements—and the way you'll usually do it—is to simply specify colors in the CSS that's used when rendering elements. While we won't use every single property mentioned previously, we'll look at a couple of examples. The concept is the same anywhere you use color.</p> + +<p>Let's take a look at an example, starting by looking at the results we're trying to achieve:</p> + +<div>{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}</div> + +<h4 id="HTML">HTML</h4> + +<p>The HTML responsible for creating the above example is shown here:</p> + +<pre class="brush: html"><div class="wrapper"> + <div class="box boxLeft"> + <p> + This is the first box. + </p> + </div> + <div class="box boxRight"> + <p> + This is the second box. + </p> + </div> +</div></pre> + +<p>This is pretty simple, using a {{HTMLElement("div")}} as a wrapper around the contents, which consists of two more <code><div></code>s, each styled differently with a single paragraph ({{HTMLElement("p")}}) in each box.</p> + +<p>The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.</p> + +<h4 id="CSS">CSS</h4> + +<p>We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one.</p> + +<pre class="brush: css">.wrapper { + width: 620px; + height: 110px; + margin: 0; + padding: 10px; + border: 6px solid mediumturquoise; +}</pre> + +<p>The <code>.wrapper</code> class is used to assign styles to the {{HTMLElement("div")}} that encloses all of our other content. This establishes thesize of the container using {{cssxref("width")}} and {{cssxref("height")}} as well as its {{cssxref("margin")}} and {{cssxref("padding")}}.</p> + +<p>Of more interest to our discussion here is the use of the {{cssxref("border")}} property to establish a border around the outside edge of the element. This border is a solid line, 6 pixels wide, in the color <code>mediumturquoise</code>.</p> + +<p>Our two colored boxes share a number of properties in common, so next we establish a class, <code>.box</code>, that defines those shared properties:</p> + +<pre class="brush: css">.box { + width: 290px; + height: 100px; + margin: 0; + padding: 4px 6px; + font: 28px "Marker Felt", "Zapfino", cursive; + display: flex; + justify-content: center; + align-items: center; +}</pre> + +<p>In brief, <code>.box</code> establishes the size of each box, as well as the configuration of the font used within. We also take advantage of <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox</a> to easily center the contents of each box. We enable <code>flex</code> mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to <code>center</code>. Then we can create a class for each of the two boxes that defines the properties that differ between the two.</p> + +<pre class="brush: css">.boxLeft { + float: left; + background-color: rgb(245, 130, 130); + outline: 2px solid darkred; +}</pre> + +<p>The <code>.boxLeft</code> class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:</p> + +<ul> + <li>The box's background color is set by changing the value of the CSS {{cssxref("background-color")}} property to <code>rgb(245, 130, 130)</code>.</li> + <li>An outline is defined for the box. Unlike the more commonly used <code>border</code>, {{cssxref("outline")}} doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as <code>border</code> does. This outline is a solid, dark red line that's two pixels thick. Note the use of the <code>darkred</code> keyword when specifying the color.</li> + <li>Notice that we're not explicitly setting the text color. That means the value of {{cssxref("color")}} will be inherited from the nearest containing element that defines it. By default, that's black.</li> +</ul> + +<pre class="brush: css">.boxRight { + float: right; + background-color: hsl(270deg, 50%, 75%); + outline: 4px dashed rgb(110, 20, 120); + color: hsl(0deg, 100%, 100%); + text-decoration: underline wavy #88ff88; + text-shadow: 2px 2px 3px black; +}</pre> + +<p>Finally, the <code>.boxRight</code> class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:</p> + +<ul> + <li>The <code>background-color</code> is set using the HSL value specified using <code>hsl(270deg, 50%, 75%)</code>. This is a medium purple color.</li> + <li>The box's <code>outline</code> is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (<code>rgb(110, 20, 120)</code>).</li> + <li>The foreground (text) color is specified by setting the {{cssxref("color")}} property to <code>hsl(0deg, 100%, 100%)</code>. This is one of many ways to specify the color white.</li> + <li>We add a green wavy line under the text with {{cssxref("text-decoration")}}.</li> + <li>Finally, a bit of a shadow is added to the text using {{cssxref("text-shadow")}}. Its <code>color</code> parameter is set to <code>black</code>.</li> +</ul> + +<h2 id="사용자의_색_선택">사용자의 색 선택</h2> + +<p>There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own {{interwiki("wikipedia", "color picker")}}, HTML now provides support for browsers to provide one for your use through the {{HTMLElement("input")}} element, by using <code>"color"</code> as the value of its {{htmlattrxref("type", "input")}} attribute.</p> + +<p>The <code><input></code> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.</p> + +<h3 id="예제_색_선택하기">예제: 색 선택하기</h3> + +<p>Let's look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker's value is displayed.</p> + +<p>{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}</p> + +<div class="note"> +<p>On macOS, you indicate that you've finalized selection of the color by closing the color picker window.</p> +</div> + +<h4 id="HTML_2">HTML</h4> + +<p>The HTML here creates a box that contains a color picker control (with a label created using the {{HTMLElement("label")}} element) and an empty paragraph element ({{HTMLElement("p")}}) into which we'll output some text from our JavaScript code.</p> + +<pre class="brush: html"><div id="box"> + <label for="colorPicker">Border color:</label> + <input type="color" value="#8888ff" id="colorPicker"> + <p id="output"></p> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<p>The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won't last, courtesy of the JavaScript below...</p> + +<pre class="brush: css">#box { + width: 500px; + height: 200px; + border: 2px solid rgb(245, 220, 225); + padding: 4px 6px; + font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif" +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<p>The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the <code><a href="/en-US/docs/Web/HTML/Element/input/color"><input type="color"></a></code> element.</p> + +<pre class="brush: js">let colorPicker = document.getElementById("colorPicker"); +let box = document.getElementById("box"); +let output = document.getElementById("output"); + +box.style.borderColor = colorPicker.value; + +colorPicker.addEventListener("input", function(event) { + box.style.borderColor = event.target.value; +}, false); + +colorPicker.addEventListener("change", function(event) { + output.innerText = "Color set to " + colorPicker.value + "."; +}, false);</pre> + +<p>The {{event("input")}} event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.</p> + +<p>The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <code><p></code> element with the ID <code>"output"</code> to a string describing the finally selected color.</p> + +<h2 id="현명하게_색_고르기">현명하게 색 고르기</h2> + +<p>Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.</p> + +<h3 id="적절한_색_찾기">적절한 색 찾기</h3> + +<p>Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started.</p> + +<h4 id="기본색">기본색</h4> + +<p>The first step is to choose your <strong>base color</strong>. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage {{interwiki("wikipedia", "Mountain Dew")}} and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:</p> + +<ul> + <li>A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.</li> + <li>A color that comes from imagery associated with what your content is about. If you're creating a web site about a given item or product, choose a color that's physically present on that item.</li> + <li>Browse web sites that let you look at lots of existing color palettes and images to find inspiration.</li> +</ul> + +<p>When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site <a href="http://www.colorzilla.com/">ColorZilla</a> offers an extension (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.</p> + +<div class="note"> +<p>The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.</p> +</div> + +<h4 id="팔레트_다듬기">팔레트 다듬기</h4> + +<p>Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See {{anch("Color and accessibility")}} for a brief explanation of why this matters.</p> + +<p>A few examples (all free to use as of the time this list was last revised):</p> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">MDN's color picker tool</a></li> + <li><a href="http://paletton.com">Paletton</a></li> + <li><a href="https://color.adobe.com/create/color-wheel">Adobe Color CC online color wheel</a></li> +</ul> + +<p>When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.</p> + +<div class="note"> +<p>Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.</p> +</div> + +<h3 id="색채이론_관련_자료">색채이론 관련 자료</h3> + +<p>A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:</p> + +<dl> + <dt><a href="https://www.khanacademy.org/partner-content/pixar/color">Color Science</a> (<a href="https://www.khanacademy.org/">Khan Academy</a> in association with <a href="https://www.pixar.com/">Pixar</a>)</dt> + <dd>An online course which introduces concepts such as what color is, how it's percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.</dd> + <dt>{{interwiki("wikipedia", "Color theory")}} on Wikipedia</dt> + <dd>Wikipedia's entry on color theory, which has a lot of great information from a technical perspective. It's not really a resource for helping you with the color sleection process, but is still full of useful information.</dd> +</dl> + +<h3 id="색과_접근성">색과 접근성</h3> + +<p>There are several ways color can be an {{Glossary("accessibility")}} problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.</p> + +<p>You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.</p> + +<div class="note"> +<p>The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.</p> +</div> + +<p>For more information about color blindness, see the following articles:</p> + +<ul> + <li><a href="https://medlineplus.gov/colorblindness.html">Medline Plus: Color Blindness</a> (United States National Institute of Health)</li> + <li><a href="https://www.aao.org/eye-health/diseases/what-is-color-blindness">American Academy of Ophthamology: What Is Color Blindness?</a></li> + <li><a href="https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html">Color Blindness & Web Design</a> (Usability.gov: United States Department of Health and Human Services)</li> +</ul> + +<h3 id="팔레트_디자인_예제">팔레트 디자인 예제</h3> + +<p>Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a web site for a new game that takes place on the planet Mars. So let's do a <a href="https://www.google.com/search?q=Mars&tbm=isch">Google search for photos of Mars</a>. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.</p> + +<p>Using an eyedropper tool, we identify a color we like and determine that the color in question is <code>#D79C7A</code>, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.</p> + +<p>Having selected our base color, we need to build out our palette. We decide to use <a href="http://www.paletton.com/">Paletton</a> to come up with the other colors we need. Upon opening Paletton, we see:</p> + +<p><img alt="Right after loading Paletton." src="https://mdn.mozillademos.org/files/15451/paletton1.png" style="height: 361px; width: 600px;"></p> + +<p>Next, we enter our color's hex code (<code>D79C7A</code>) into the "Base RGB" box at the bottom-left corner of the tool:</p> + +<p><img alt="After entering base color" src="https://mdn.mozillademos.org/files/15453/paletton2.png" style="height: 361px; width: 600px;"></p> + +<p>We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is <code>#508D7C</code>.</p> + +<p><img alt="Now with complementary colors included." src="https://mdn.mozillademos.org/files/15455/paletton3.png" style="height: 361px; width: 600px;"></p> + +<p>If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:</p> + +<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15457/paletton4.png" style="height: 361px; width: 600px;"></p> + +<p>That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's <code>#556E8D</code>. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:</p> + +<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15459/paletton-color-detail.png" style="height: 370px; width: 526px;"></p> + +<p>Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.</p> + +<p>Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.</p> + +<h3 id="색_배경_대비_출력">색, 배경, 대비, 출력</h3> + +<p>What looks good on screen may look very different on paper. In addition, ink can be expensive, and if a user is printing your page, they don't necessarily need all the backgrounds and such using up their precious ink when all that matters is the text itself. Most browsers, by default, remove background images when printing documents.</p> + +<p>If your background colors and images have been selected carefully and/or are crucial to the usefulness of the content, you can use the CSS {{cssxref("color-adjust")}} property to tell the browser that it should not make adjustments to the appearance of content.</p> + +<p>The default value of <code>color-adjust</code>, <code>economy</code>, indicates that the browser is allowed to make appearance changes as it deems necessary in order to try to optimize the legibility and/or print economy of the content, given the type of output device the document is being drawn onto.</p> + +<p>You can set <code>color-adjust</code> to <code>exact</code> to tell the browser that the element or elements on which you use it have been designed specifically to best work with the colors and images left as they are. With this set, the browser won't tamper with the appearance of the element, and will draw it as indicated by your CSS.</p> + +<div class="note"> +<p><strong>참고:</strong> There is no guarantee, though, that <code>color-adjust: exact</code> will result in your CSS being used exactly as given. If the browser provides user preferences to change the output (such as a "don't print backgrounds" checkbox in a print dialog box), that overrides the value of <code>color-adjust</code>.</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li> + <li><a href="/ko/docs/Web/Guide/Graphics">웹 그래픽</a></li> +</ul> diff --git a/files/ko/web/html/attributes/autocomplete/index.html b/files/ko/web/html/attributes/autocomplete/index.html new file mode 100644 index 0000000000..50c8de42f9 --- /dev/null +++ b/files/ko/web/html/attributes/autocomplete/index.html @@ -0,0 +1,247 @@ +--- +title: HTML autocomplete 특성 +slug: Web/HTML/Attributes/autocomplete +tags: + - Attribute + - HTML + - Reference + - 자동완성 +translation_of: Web/HTML/Attributes/autocomplete +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>autocomplete</code></strong> 특성을 사용하면 {{glossary("user agent", "사용자 에이전트")}}의 자동완성을 허용할 양식 입력 필드를 지정할 수 있으며, 사용자 에이전트에게 어떤 정보에 대한 자동완성을 원하는지 안내할 수도 있습니다.</span> HTML <code>autocomplete</code> 특성은 텍스트와 숫자를 허용하는 {{HTMLElement("input")}} 요소, {{HTMLElement("textarea")}} 요소, {{HTMLElement("select")}} 요소, {{HTMLElement("form")}} 요소에 사용할 수 있습니다.</p> + +<p>자동완성으로 제안할 값의 출처는 대개 브라우저가 선택합니다. 사전 정의된 값을 사용할 수도 있으나 보통 과거에 사용자가 입력했던 값을 사용합니다. 예를 들어 사용자가 입력한 이름, 주소, 전화번호, 이메일 주소를 브라우저에 저장할 방법을 제공하기도 하고, 신용카드 정보를 미리 암호화해 저장하고 인증절차 후 자동완성 값으로 쓸 수도 있습니다.</p> + +<p>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 요소에 <code>autocomplete</code> 특성을 지정하지 않은 경우, 브라우저는 요소의 양식 소유자, 즉 조상 {{HTMLElement("form")}} 요소 또는 {{htmlattrxref("form", "input")}} 특성의 값을 <code>id</code> 특성으로 사용하는 <code><form></code> 요소의 <code>autocomplete</code> 특성을 사용합니다.</p> + +<p>더 많은 정보는 {{HTMLElement("form")}} 요소의 {{htmlattrxref("autocomplete", "form")}} 특성을 참고하세요.</p> + +<div class="blockIndicator note"> +<p><code><input></code>/<code><select></code>/<code><textarea></code> 요소가 다음 조건을 만족해야 사용자 에이전트가 자동완성을 제공할 수도 있습니다.</p> + +<ol> + <li><code>name</code> 또는 <code>id</code> 특성 존재</li> + <li><code><form></code> 요소의 자손일 것</li> + <li>양식에 {{HTMLElement("input/submit", "제출")}} 버튼이 있을 것</li> +</ol> +</div> + +<h2 id="값">값</h2> + +<dl> + <dt><code>off</code></dt> + <dd>브라우저가 이 필드에 값을 자동으로 넣는 것을 금지합니다. 문서나 애플리케이션이 자신만의 자동완성 기능을 구현하거나, 보안상 문제로 자동완성을 사용하지 않아야 할 경우 지정할 수 있습니다. + <div class="note"><strong>참고:</strong> 대부분의 최신 브라우저에서는 <code>autocomplete</code>을 <code>off</code>로 지정하더라도 브라우저가 사용자에게 계정 이름과 비밀번호 저장 여부를 묻는 것을 막을 수 없으며, 저장한 값을 사용해 자동완성하는 것도 막을 수 없습니다. <a href="/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">The autocomplete attribute and login fields</a> 문서를 참고하세요.</div> + </dd> + <dt><code>on</code></dt> + <dd>브라우저의 자동완성을 허용합니다. 아무런 안내 정보도 제공하지 않으므로, 브라우저가 스스로의 판단 하에 값을 결정합니다.</dd> + <dt><code>name</code></dt> + <dd>사람의 전체 이름. 사람 이름 구조의 복잡함과 다양성으로 인해 보통 개별 이름 구성요소보다 <code>name</code>을 사용하는 것을 선호하지만, 하나씩 받아야 한다면 다음 <code>autocomplete</code> 값도 사용할 수 있습니다. + <dl> + <dt><code>honorific-prefix</code></dt> + <dd>호칭. "Mrs.", "Mr.", "Miss", "Ms.", "Dr.", "Mlle." 등.</dd> + <dt><code>family-name</code></dt> + <dd>성.</dd> + <dt><code>given-name</code></dt> + <dd>이름.</dd> + <dt><code>additional-name</code></dt> + <dd>가운데 이름.</dd> + <dt><code>honorific-suffix</code></dt> + <dd>접미사. "Jr.", "B.Sc.", "PhD.", "MBASW", "IV" 등.</dd> + <dt><code>nickname</code></dt> + <dd>별명, 별칭.</dd> + </dl> + </dd> + <dt><code>email</code></dt> + <dd>이메일 주소.</dd> + <dt><code>username</code></dt> + <dd>사용자 또는 계정 이름.</dd> + <dt><code>new-password</code></dt> + <dd>새로운 비밀번호. 계정을 생성할 때나 비밀번호를 변경할 때, new-password는 "새로운 비밀번호를 입력하세요" 또는 "비밀번호 확인"에 지정해야 합니다. 일반적인 비밀번호와 구분하는 이유는 브라우저가 기존 비밀번호를 자동완성으로 채우는 것을 피하기 위함이며, 안전한 무작위 비밀번호 생성을 제안할 곳을 결정할 때도 사용하기 때문입니다.</dd> + <dt><code>current-password</code></dt> + <dd>사용자의 현재 비밀번호.</dd> + <dt><code>one-time-code</code></dt> + <dd>사용자를 인증할 때 사용하는 1회성 코드.</dd> + <dt><code>organization-title</code></dt> + <dd>직위. "사장", "매니저", "시니어 테크니컬 커뮤니케이터" 등.</dd> + <dt><code>organization</code></dt> + <dd>회사 또는 조직명.</dd> + <dt><code>street-address</code></dt> + <dd>도로 주소. 여러 줄의 텍스트도 가능하며 두 번째 행정구역(시/군/구) 내에서 구분할 수 있는 주소여야 하지만, 도시 이름, 우편번호, 국가 이름은 포함해선 안됩니다.</dd> + <dt><code>address-line1</code>, <code>address-line2</code>, <code>address-line3</code></dt> + <dd>도로 주소의 각 줄. <code>street-address</code>가 존재하지 않는 경우에만 사용해야 합니다.</dd> + <dt><code>address-level4</code></dt> + <dd>4단계 주소에서 가장 상세한 {{anch("주소의 행정 단계", "행정구역")}}.</dd> + <dt><code>address-level3</code></dt> + <dd>최소 3단계 주소에서의 3단계 {{anch("주소의 행정 단계", "행정구역")}}.</dd> + <dt><code>address-level2</code></dt> + <dd>최소 2단계 주소에서의 2단계 {{anch("주소의 행정 단계", "행정구역")}}. 주소에 사용하는 행정구역을 두 단계로 분류하는 국가에서는 보통 도시, 마을 등입니다.</dd> + <dt><code>address-level1</code></dt> + <dd>첫 번째 {{anch("주소의 행정 단계", "행정구역")}}. 대한민국에서는 특별시·광역시·도, 미국에서는 주입니다.</dd> + <dt><code>country</code></dt> + <dd>국가 코드.</dd> + <dt><code>country-name</code></dt> + <dd>국가 이름.</dd> + <dt><code>postal-code</code></dt> + <dd>우편번호.</dd> + <dt><code>cc-name</code></dt> + <dd>신용카드 등 지불수단 소유자의 전체 이름. 보통 개별 이름 구성요소보다 이 쪽을 더 선호합니다.</dd> + <dt><code>cc-family-name</code></dt> + <dd>지불수단 소유자의 성.</dd> + <dt><code>cc-given-name</code></dt> + <dd>지불수단 소유자의 이름.</dd> + <dt><code>cc-additional-name</code></dt> + <dd>지불수단 소유자의 가운데 이름.</dd> + <dt><code>cc-number</code></dt> + <dd>신용카드 번호, 계좌번호 등 지불수단 식별 번호.</dd> + <dt><code>cc-exp</code></dt> + <dd>지불수단 유효기간. 보통 MM/YY 또는 MM/YYYY의 형태입니다.</dd> + <dt><code>cc-exp-month</code></dt> + <dd>지불수단 유효기간의 월.</dd> + <dt><code>cc-exp-year</code></dt> + <dd>지불수단 유효기간의 연도.</dd> + <dt><code>cc-csc</code></dt> + <dd>지불수단 보안 코드. 신용카드의 경우 뒷면의 세자리 숫자입니다.</dd> + <dt><code>cc-type</code></dt> + <dd>지불수단 유형. "Visa", "Master Card" 등.</dd> + <dt><code>transaction-currency</code></dt> + <dd>거래에 사용할 통화 단위.</dd> + <dt><code>transaction-amount</code></dt> + <dd>결제 양식에 나타나는 거래량, 금액. 단위는 <code>transaction-currency</code>에 나타난 값을 사용합니다.</dd> + <dt><code>language</code></dt> + <dd>선호 언어. <a href="https://ko.wikipedia.org/wiki/IETF_%EC%96%B8%EC%96%B4_%ED%83%9C%EA%B7%B8">유효한 BCP 47 언어 태그</a>여야 합니다.</dd> + <dt><code>bday</code></dt> + <dd>생년월일.</dd> + <dt><code>bday-day</code></dt> + <dd>생일.</dd> + <dt><code>bday-month</code></dt> + <dd>생월.</dd> + <dt><code>bday-year</code></dt> + <dd>생년.</dd> + <dt><code>sex</code></dt> + <dd>성별. "남성", "여성", "안드로진" 등 줄바꿈 없는 자유형식 텍스트입니다.</dd> + <dt><code>tel</code></dt> + <dd>국가 코드를 포함한 전체 전화번호. 개별 전화번호 구성요소가 필요한 경우 다음 값을 사용할 수 있습니다. + <dl> + <dt><code>tel-country-code</code></dt> + <dd>국가 코드. 1(북미), 82(대한민국) 등.</dd> + <dt><code>tel-national</code></dt> + <dd>국가 코드를 제외한 전체 전화번호. 지역번호도 포함합니다. 대한민국 전화번호 "82-2-555-6502"의 경우 "02-555-6502"가 됩니다.</dd> + <dt><code>tel-area-code</code></dt> + <dd>지역번호.</dd> + <dt><code>tel-local</code></dt> + <dd>국가 코드와 지역번호를 제외한 전화번호. 두 부분으로 나눌 수도 있으며, "555-6502"의 경우 <code>tel-local-prefix</code>는 "555", <code>tel-local-suffix</code>는 "6502"가 됩나다.</dd> + </dl> + </dd> + <dt><code>tel-extension</code></dt> + <dd>내선번호.</dd> + <dt><code>impp</code></dt> + <dd>인스턴트 메시지 프로토콜 엔드포인트의 URL. "xmpp:username@example.net" 등.</dd> + <dt><code>url</code></dt> + <dd>URL. 홈페이지, 회사 웹 사이트 주소 등 양식의 맥락에 맞는 값입니다.</dd> + <dt><code>photo</code></dt> + <dd>이미지 URL. 사람, 회사, 연락처 정보 등 양식의 맥락에 맞는 값입니다.</dd> +</dl> + +<p><a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">WHATWG 표준</a>을 방문해 더 많은 정보를 알아보세요.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html notranslate"><div> + <label for="cc-number">Enter your credit card number</label> + <input type="number" name="cc-number" id="cc-number" autocomplete="off"> +</div></pre> + +<h2 id="주소의_행정_단계">주소의 행정 단계</h2> + +<p>네 단계의 행정 단계(<code>address-level1</code>부터 <code>address-level4</code>까지)는 주소의 위치를 점차 좁아지는 범위로 나타냅니다. 각각의 국가는 서로 다른 행정구역 시스템을 사용하며 주소를 작성하는 순서도 다를 수 있습니다.</p> + +<p><code>address-level1</code>은 항상 제일 큰 단계이므로, 국가 이름을 제외한 주소에서 가장 넓은 범위를 나타냅니다.</p> + +<h3 id="유연한_양식_레이아웃">유연한 양식 레이아웃</h3> + +<p>각각의 국가가 서로 다른 주소 형태를 사용하며, 구성요소의 위치는 물론 개수도 다를 수 있다는 점을 고려했을 때, 가능하다면 사용자가 입력하는 주소가 속한 국가에 따라서 양식의 형태를 바꾸는 것이 도움이 될 것입니다.</p> + +<h3 id="예제_2">예제</h3> + +<p>행정구역 단위 사용법은 국가마다 다릅니다. 다음은 일부 예제로, 모든 상황을 포함하지는 않을 것입니다.</p> + +<h4 id="대한민국">대한민국</h4> + +<p>도로명주소는 다음과 같은 형태입니다.</p> + +<ul> + <li>서울특별시 종로구 세종로 1</li> + <li>경기도 수원시 팔달구 효원로 1</li> + <li><span class="add_txt">충청남도 홍성군 홍북읍 충남대로 21</span></li> +</ul> + +<dl> + <dt><code><span class="add_txt">address-level1</span></code></dt> + <dd><span class="add_txt">시/도: "서울특별시", "경기도", "충청남도"</span></dd> + <dt><code>address-level2</code></dt> + <dd>시/군/구: "수원시", "홍성군", "종로구"</dd> + <dt><code>address-level3</code></dt> + <dd>구/읍/면: "팔달구", "홍북읍" + <div class="note"><strong>참고:</strong> 구/읍/면은 <code>address-level2</code>에 합쳐 "수원시 팔달구", "홍성군 홍북읍"의 형태로 작성하는 경우도 많습니다.</div> + </dd> + <dt><code>address-line1</code></dt> + <dd>도로명, 건물번호: "세종로 1", "효원로 1", "충남대로 21"</dd> + <dt><code>address-line2</code></dt> + <dd>상세주소. 아파트의 경우 동/호를 작성합니다. + <div class="note"><strong>참고:</strong> <code>street-address</code>를 사용하는 경우 도로명, 건물번호와 상세주소를 같이 작성합니다.</div> + </dd> +</dl> + +<p>우편번호 찾기 기능을 사용하는 경우 행정구역과 도로명, 건물번호까지는 사용자가 직접 입력하지 않는 점도 유의하세요.</p> + +<h4 id="미국">미국</h4> + +<p>평범한 주소는 다음 형태입니다.</p> + +<p>432 Anywhere St<br> + Exampleville CA 95555</p> + +<p>미국에서의 가장 큰 행정구역은 "주"로, 위 주소에서는 "CA"("캘리포니아"의 미국 우정청 공식 줄임말)입니다. 따라서 <code>address-level1</code>은 주, 즉 "CA"를 사용합니다.</p> + +<p>두 번째 행정구역은 도시 혹은 마을 이름이므로 <code>adress-level2</code>는 "Examplevile"입니다.</p> + +<p>미국 주소는 3단계 이상을 사용하지 않습니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute", "autocomplete")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.autocomplete")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{htmlelement("input")}} 요소.</li> + <li>{{htmlelement("select")}} 요소.</li> + <li>{{htmlelement("textarea")}} 요소.</li> + <li>{{htmlelement("form")}} 요소.</li> + <li><a href="/ko/docs/Learn/HTML/Forms">HTML 양식</a></li> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> +</ul> diff --git a/files/ko/web/html/attributes/crossorigin/index.html b/files/ko/web/html/attributes/crossorigin/index.html new file mode 100644 index 0000000000..70131a4486 --- /dev/null +++ b/files/ko/web/html/attributes/crossorigin/index.html @@ -0,0 +1,96 @@ +--- +title: 'HTML attribute: crossorigin' +slug: Web/HTML/Attributes/crossorigin +translation_of: Web/HTML/Attributes/crossorigin +--- +<div>{{draft}}</div> + +<p class="seoSummary">{{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }}에 있는 crossOrigin 속성은 element가 CORS 요청을 처리하는 방식을 명시하여 element가 fetch한 데이터를 <a href="/en-US/docs/Web/HTTP/CORS">CORS</a> 가능하게 합니다. 특정 element에서는 CORS 세팅 속성이 될 수도 있습니다.</p> + +<p>Media element의 <code>crossorigin</code> 속성은 CORS 세팅입니다.</p> + +<p>세팅 속성은 열거형이며 아래의 값을 가질 수 있습니다:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Keyword</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>anonymous</code></td> + <td>element의 CORS 요청의 credentials flag가 'same-origin'으로 지정됩니다.</td> + </tr> + <tr> + <td><code>use-credentials</code></td> + <td>element의 CORS 요청의 crendentials flag가 'include'로 지정됩니다.</td> + </tr> + <tr> + <td><code>""</code></td> + <td><code>crossorigin</code> 또는 <code>crossorigin=""</code>처럼 빈 값을 할당하는건 <code>anonymous</code>와 동일합니다.</td> + </tr> + </tbody> +</table> + +<p>기본적으로 (attribute를 명시하지 않으면) CORS 요청은 할 수 없습니다. "anonymous" 키워드는 쿠키를 통한 <strong>user credentials</strong> 교환이 필요 없음을 의미합니다. Same origin이 아닌 경우 client-side SSL certificates/HTTP 인증은 <a class="external" href="http://www.w3.org/TR/cors/#user-credentials">Terminology section of the CORS specification</a>에서 기술하고 있습니다.</p> + +<p>빈 문자열이나 잘못된 값일 경우 <code>anonymous</code> 와 동일하게 동작합니다.</p> + +<h3 id="예시_script_element의_crossorigin">예시: script element의 crossorigin</h3> + +<p>아래의 {{HTMLElement("script")}} element를 통해 브라우저로 하여금 <code>https://example.com/example-framework.js</code> 스크립트를 user-credential 없이 요청하도록 명시할 수 있습니다.</p> + +<pre class="brush: html"><script src="https://example.com/example-framework.js" crossorigin="anonymous"></script></pre> + +<h3 id="예시_credential_포함한_Webmanifest">예시: credential 포함한 Webmanifest</h3> + +<p><a href="/en-US/docs/Web/Manifest">Manifest</a> 요청 시 credential이 필요하다면 same-origin의 리소스라 하여도 <code>use-credentials</code> 값을 사용해야 합니다.</p> + +<pre class="brush: html"><link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials"></pre> + +<h2 id="사양">사양</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">사양</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<h3 id="<script_crossorigin>"><script crossorigin></h3> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.script.crossorigin")}}</p> + +<h3 id="<video_crossorigin>"><video crossorigin></h3> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.video.crossorigin")}}</p> + +<h2 id="더_보기">더 보기</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTML/Attributes/rel">HTML attribute: <code>rel</code></a></li> +</ul> + +<div>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML/")}}</div> diff --git a/files/ko/web/html/attributes/index.html b/files/ko/web/html/attributes/index.html new file mode 100644 index 0000000000..12e0c02235 --- /dev/null +++ b/files/ko/web/html/attributes/index.html @@ -0,0 +1,733 @@ +--- +title: HTML 특성 참고서 +slug: Web/HTML/Attributes +tags: + - HTML + - Reference +translation_of: Web/HTML/Attributes +--- +<div>{{HTMLSidebar}}</div> + +<p>HTML의 요소들은 <strong>특성</strong>을 가지고 있습니다. 특성은 사용자가 원하는 기준에 맞도록 요소를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값을 말합니다.</p> + +<h2 id="특성_목록">특성 목록</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>특성 이름</th> + <th>요소</th> + <th>설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>accept</code></td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>서버에서 허용하는 유형의 목록. 보통 파일 유형을 의미합니다.</td> + </tr> + <tr> + <td><code>accept-charset</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>지원하는 문자 집합의 목록.</td> + </tr> + <tr> + <td><code>accesskey</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>해당 요소로 초점을 이동시키거나 활성화시키기 위한 키보드 단축키를 정의합니다.</td> + </tr> + <tr> + <td><code>action</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>폼(form)으로부터 전송된 정보를 처리할 프로그램의 URI입니다.</td> + </tr> + <tr> + <td><code>align</code></td> + <td>{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}</td> + <td>해당 요소의 가로 정렬 방식을 명시합니다.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/allow">allow</a></code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td>Specifies a feature-policy for the iframe.</td> + </tr> + <tr> + <td><code>alt</code></td> + <td>{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</td> + <td>이미지를 표시할 수 없는 경우 표시할 대체 문구입니다.</td> + </tr> + <tr> + <td><code>async</code></td> + <td>{{ HTMLElement("script") }}</td> + <td>해당 스크립트는 비동기적으로 실행되어야함을 나타냅니다.</td> + </tr> + <tr> + <td><code>autocapitalize</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>사용자가 입력하거나 편집하는 문구를 자동으로 대문자로 바꿀지 여부와 방법을 제어합니다.</td> + </tr> + <tr> + <td><code>autocomplete</code></td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>이 폼 내의 컨트롤에 대해 브라우저가 지원하는 값 자동완성 기능을 기본으로 설정할 것인지를 나타냅니다.</td> + </tr> + <tr> + <td><code>autofocus</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>페이지가 로드된 후 자동으로 해당 요소로 초점이 이동합니다.</td> + </tr> + <tr> + <td><code>autoplay</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>오디오나 비디오가 가능한 빠른 시점에 재생됩니다.</td> + </tr> + <tr> + <td><code>background</code></td> + <td>{{ HTMLElement("body") }}, {{ HTMLElement("table") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>Specifies the URL of an image file. + <div class="note"><strong>Note:</strong> Although browsers and email clients may still support this attribute, it is obsolete. Use CSS {{ Cssxref("background-image") }} instead.</div> + </td> + </tr> + <tr> + <td><code>bgcolor</code></td> + <td>{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td> + <td> + <p>요소의 배경색입니다.</p> + + <div class="note"> + <p><strong>주:</strong> 이 속성은 더 이상 사용하지 않습니다. CSS의 {{ Cssxref("background-color") }} 속성을 대신 사용하시기 바랍니다.</p> + </div> + </td> + </tr> + <tr> + <td><code>border</code></td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td> + <td> + <p>선의 굵기입니다.</p> + + <div class="note"> + <p><strong>주:</strong> 이 속성은 더 이상 사용하지 않습니다. CSS의 {{ Cssxref("border") }} 속성을 대신 사용하시기 바랍니다.</p> + </div> + </td> + </tr> + <tr> + <td><code>buffered</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>이미 버퍼링된 미디어의 시간 범위를 가집니다.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture">capture</a></code></td> + <td>{{ HTMLElement("input") }}</td> + <td>From the {{SpecName('HTML Media Capture', '#the-capture-attribute','media capture')}}spec, specifies a new file can be captured.</td> + </tr> + <tr> + <td><code>challenge</code></td> + <td>{{ HTMLElement("keygen") }}</td> + <td>공개 키와 같이 전송된 challenge 문자열입니다.</td> + </tr> + <tr> + <td><code>charset</code></td> + <td>{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td> + <td>페이지 또는 스크립트의 문자 인코딩을 선언합니다.</td> + </tr> + <tr> + <td><code>checked</code></td> + <td>{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td> + <td>페이지가 로딩될 때, 해당 요소가 체크되어 있어야하는지를 나타냅니다.</td> + </tr> + <tr> + <td><code>cite</code></td> + <td>{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td> + <td>변경 또는 인용구문의 출처를 가리키는 URI를 가집니다.</td> + </tr> + <tr> + <td><code>class</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>공통적인 속성으로 요소의 스타일을 지정할 때 CSS와 함께 자주 사용됩니다.</td> + </tr> + <tr> + <td><code>code</code></td> + <td>{{ HTMLElement("applet") }}</td> + <td>로딩 후 실행할 애플릿의 클래스 파일의 URL을 명시합니다.</td> + </tr> + <tr> + <td><code>codebase</code></td> + <td>{{ HTMLElement("applet") }}</td> + <td>이 속성은 코드(code) 속성이 참조하는 애플릿의 .class 파일이 저장되어 있는 디렉토리의 절대경로 또는 상대경로 URL을 제공합니다.</td> + </tr> + <tr> + <td><code>color</code></td> + <td>{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td> + <td> + <p>이 속성은 미리 정의된 색상 명칭 또는 #RRGGBB 형식의 16진수로 명시된 색상으로 텍스트 색상을 설정한다.</p> + + <div class="note"> + <p><strong>주:</strong> 이 속성은 더 이상 사용하지 않습니다. CSS의 {{ Cssxref("color") }} 속성을 대신 사용하시기 바랍니다.</p> + </div> + </td> + </tr> + <tr> + <td><code>cols</code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>textarea에 표시할 컬럼의 수를 정의한다.</td> + </tr> + <tr> + <td><code>colspan</code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>colspan 속성은 어떤 셀이 확장되어야 할 컬럼의 수를 정의한다.</td> + </tr> + <tr> + <td><code>content</code></td> + <td>{{ HTMLElement("meta") }}</td> + <td>A value associated with <code>http-equiv</code> or <code>name</code> depending on the context.</td> + </tr> + <tr> + <td><code>contenteditable</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Indicates whether the element's content is editable.</td> + </tr> + <tr> + <td><code>contextmenu</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Defines the ID of a {{ HTMLElement("menu") }} element which will serve as the element's context menu.</td> + </tr> + <tr> + <td><code>controls</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>Indicates whether the browser should show playback controls to the user.</td> + </tr> + <tr> + <td><code>coords</code></td> + <td>{{ HTMLElement("area") }}</td> + <td>A set of values specifying the coordinates of the hot-spot region.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }}</td> + <td>How the element handles cross-origin requests</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/docs/Web/API/HTMLiframeElement/csp">csp</a></code> {{experimental_inline}}</td> + <td>{{ HTMLElement("iframe") }}</td> + <td>Specifies the Content Security Policy that an embedded document must agree to enforce upon itself.</td> + </tr> + <tr> + <td><code>data</code></td> + <td>{{ HTMLElement("object") }}</td> + <td>Specifies the URL of the resource.</td> + </tr> + <tr> + <td><code>data-*</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Lets you attach custom attributes to an HTML element.</td> + </tr> + <tr> + <td><code>datetime</code></td> + <td>{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td> + <td>Indicates the date and time associated with the element.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/decoding">decoding</a></code></td> + <td>{{ HTMLElement("img") }}</td> + <td>Indicates the preferred method to decode the image.</td> + </tr> + <tr> + <td><code>default</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>Indicates that the track should be enabled unless the user's preferences indicate something different.</td> + </tr> + <tr> + <td><code>defer</code></td> + <td>{{ HTMLElement("script") }}</td> + <td>Indicates that the script should be executed after the page has been parsed.</td> + </tr> + <tr> + <td><code>dir</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)</td> + </tr> + <tr> + <td><code>dirname</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td></td> + </tr> + <tr> + <td><code>disabled</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether the user can interact with the element.</td> + </tr> + <tr> + <td><code>download</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td>Indicates that the hyperlink is to be used for downloading a resource.</td> + </tr> + <tr> + <td><code>draggable</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Defines whether the element can be dragged.</td> + </tr> + <tr> + <td><code>dropzone</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Indicates that the element accept the dropping of content on it.</td> + </tr> + <tr> + <td><code>enctype</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>Defines the content type of the form date when the <code>method</code> is POST.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/enterkeyhint">enterkeyhint</a></code> {{experimental_inline}}</td> + <td>{{ HTMLElement("textarea") }}, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a></td> + <td>The <a href="https://html.spec.whatwg.org/dev/interaction.html#input-modalities:-the-enterkeyhint-attribute"><code>enterkeyhint</code></a> specifies what action label (or icon) to present for the enter key on virtual keyboards. The attribute can be used with form controls (such as the value of <code>textarea</code> elements), or in elements in an editing host (e.g., using <code>contenteditable</code> attribute).</td> + </tr> + <tr> + <td><code>for</code></td> + <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> + <td>Describes elements which belongs to this one.</td> + </tr> + <tr> + <td><code>form</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates the form that is the owner of the element.</td> + </tr> + <tr> + <td><code>formaction</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("button") }}</td> + <td>Indicates the action of the element, overriding the action defined in the {{ HTMLElement("form") }}.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/formenctype">formenctype</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>If the button/input is a submit button (<code>type="submit"</code>), this attribute sets the encoding type to use during form submission. If this attribute is specified, it overrides the <code>enctype</code> attribute of the button's <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/form">form</a> owner.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/formmethod">formmethod</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>If the button/input is a submit button (<code>type="submit"</code>), this attribute sets the submission method to use during form submission (<code>GET</code>, <code>POST</code>, etc.). If this attribute is specified, it overrides the <code>method</code> attribute of the button's <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/form">form</a> owner.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/formnovalidate">formnovalidate</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>If the button/input is a submit button (<code>type="submit"</code>), this boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the <code>novalidate</code> attribute of the button's <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/form">form</a> owner.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/formtarget">formtarget</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>If the button/input is a submit button (<code>type="submit"</code>), this attribute specifies the browsing context (for example, tab, window, or inline frame) in which to display the response that is received after submitting the form. If this attribute is specified, it overrides the <code>target</code> attribute of the button's <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/form">form</a> owner.</td> + </tr> + <tr> + <td><code>headers</code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>IDs of the <code><th></code> elements which applies to this element.</td> + </tr> + <tr> + <td><code>height</code></td> + <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td> + <p>Specifies the height of elements listed here. For all other elements, use the CSS {{cssxref("height")}} property.</p> + + <div class="note"> + <p><strong>Note:</strong> In some instances, such as {{ HTMLElement("div") }}, this is a legacy attribute, in which case the CSS {{ Cssxref("height") }} property should be used instead.</p> + </div> + </td> + </tr> + <tr> + </tr> + <tr> + <td><code>hidden</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Prevents rendering of given element, while keeping child elements, e.g. script elements, active.</td> + </tr> + <tr> + <td><code>high</code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the lower bound of the upper range.</td> + </tr> + <tr> + <td><code>href</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td> + <td> 링크된 리소스의 URL</td> + </tr> + <tr> + <td><code>hreflang</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td>링크된 리소스의 언어를 나타냄</td> + </tr> + <tr> + <td><code>http-equiv</code></td> + <td>{{ HTMLElement("meta") }}</td> + <td></td> + </tr> + <tr> + <td><code>icon</code></td> + <td>{{ HTMLElement("command") }}</td> + <td>Specifies a picture which represents the command.</td> + </tr> + <tr> + <td><code>id</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>일반적으로, 특정한 요소를 스타일하기 위해 CSS와 함꼐 사용됨. 이 속성의 값은 유일해야함.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/importance">importance</a></code> {{experimental_inline}}</td> + <td>{{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}</td> + <td>Indicates the relative fetch priority for the resource.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">integrity</a></code></td> + <td>{{ HTMLElement("link") }}, {{ HTMLElement("script") }}</td> + <td>Specifies a <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a> value that allows browsers to verify what they fetch.</td> + </tr> + <tr> + <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-intrinsicsize"><code>intrinsicsize</code></a> {{deprecated_inline}}</td> + <td>{{ HTMLElement("img") }}</td> + <td>This attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute.</td> + </tr> + <tr> + <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode"><code>inputmode</code></a></td> + <td>{{ HTMLElement("textarea") }}, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a></td> + <td>Provides a hint as to the type of data that might be entered by the user while editing the element or its contents. The attribute can be used with form controls (such as the value of <code>textarea</code> elements), or in elements in an editing host (e.g., using <code>contenteditable</code> attribute).</td> + </tr> + <tr> + <td><code>ismap</code></td> + <td>{{ HTMLElement("img") }}</td> + <td>Indicates that the image is part of a server-side image map.</td> + </tr> + <tr> + <td><code>itemprop</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td></td> + </tr> + <tr> + <td><code>keytype</code></td> + <td>{{ HTMLElement("keygen") }}</td> + <td>Specifies the type of key generated.</td> + </tr> + <tr> + <td><code>kind</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>Specifies the kind of text track.</td> + </tr> + <tr> + <td><code>label</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>Specifies a user-readable title of the text track.</td> + </tr> + <tr> + <td><code>lang</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>요소에서 사용된 언어를 정의합니다.</td> + </tr> + <tr> + <td><code>language</code></td> + <td>{{ HTMLElement("script") }}</td> + <td>요소에서 사용된 스크립트 언어를 정의합니다.</td> + </tr> + <tr> + <td><code>list</code></td> + <td>{{ HTMLElement("input") }}</td> + <td>Identifies a list of pre-defined options to suggest to the user.</td> + </tr> + <tr> + <td><code>loading</code> {{experimental_inline}}</td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("iframe") }}</td> + <td>Indicates if the element should be loaded lazily (<code>loading="lazy"</code>) or loaded immediately (<code>loading="eager"</code>).</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/list">list</a></code></td> + <td>{{ HTMLElement("input") }}</td> + <td>Identifies a list of pre-defined options to suggest to the user.</td> + </tr> + <tr> + <td><code>loop</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td> + <td>미디어가 재생을 완료했을때 다시 재생을 시작해야할지를 나타냅니다.</td> + </tr> + <tr> + <td><code>low</code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the upper bound of the lower range.</td> + </tr> + <tr> + <td><code>manifest</code></td> + <td>{{ HTMLElement("html") }}</td> + <td>문서의 캐시 매니페스트의 URL을 가리킵니다.</td> + </tr> + <tr> + <td><code>max</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>허용되는 최대 값을 나타냅니다.</td> + </tr> + <tr> + <td><code>maxlength</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>요소에 허용되는 문자의 최대 길이를 나타냅니다.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength">minlength</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Defines the minimum number of characters allowed in the element.</td> + </tr> + <tr> + <td><code>media</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td> + <td>Specifies a hint of the media for which the linked resource was designed.</td> + </tr> + <tr> + <td><code>method</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>폼을 제출할때 사용할 HTTP 메소드를 정의함. GET(기본값) 또는 POST 가 될수 있음.</td> + </tr> + <tr> + <td><code>min</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> + <td>허용되는 최소 값을 나타냄.</td> + </tr> + <tr> + <td><code>multiple</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Indicates whether multiple values can be entered in an input of the type <code>email</code> or <code>file</code>.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/muted">muted</a></code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>Indicates whether the audio will be initially silenced on page load.</td> + </tr> + <tr> + <td><code>name</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}</td> + <td>요소의 이름. For example used by the server to identify the fields in form submits.</td> + </tr> + <tr> + <td><code>novalidate</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>This attribute indicates that the form shouldn't be validated when submitted.</td> + </tr> + <tr> + <td><code>open</code></td> + <td>{{ HTMLElement("details") }}</td> + <td>Indicates whether the details will be shown on page load.</td> + </tr> + <tr> + <td><code>optimum</code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the optimal numeric value.</td> + </tr> + <tr> + <td><code>pattern</code></td> + <td>{{ HTMLElement("input") }}</td> + <td>Defines a regular expression which the element's value will be validated against.</td> + </tr> + <tr> + <td><code>ping</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td></td> + </tr> + <tr> + <td><code>placeholder</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>필드에 무엇이 들어갈수 있는지 사용자에게 힌트를 제공합니다.</td> + </tr> + <tr> + <td><code>poster</code></td> + <td>{{ HTMLElement("video") }}</td> + <td>A URL indicating a poster frame to show until the user plays or seeks.</td> + </tr> + <tr> + <td><code>preload</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>전체,부분,또는 아무런 리소스가 미리 로드되어야하는지를 나타냅니다.</td> + </tr> + <tr> + <td><code>radiogroup</code></td> + <td>{{ HTMLElement("command") }}</td> + <td></td> + </tr> + <tr> + <td><code>readonly</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>요소가 수정될 수 있는지를 나타냅니다.</td> + </tr> + <tr> + <td><code>rel</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td>Specifies the relationship of the target object to the link object.</td> + </tr> + <tr> + <td><code>required</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>이 요소가 채워져야 하는지를 나타냅니다.</td> + </tr> + <tr> + <td><code>reversed</code></td> + <td>{{ HTMLElement("ol") }}</td> + <td>Indicates whether the list should be displayed in a descending order instead of a ascending.</td> + </tr> + <tr> + <td><code>rows</code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>textarea의 줄 개수를 정의합니다.</td> + </tr> + <tr> + <td><code>rowspan</code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>Defines the number of rows a table cell should span over.</td> + </tr> + <tr> + <td><code>sandbox</code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td></td> + </tr> + <tr> + <td><code>scope</code></td> + <td>{{ HTMLElement("th") }}</td> + <td></td> + </tr> + <tr> + <td><code>scoped</code></td> + <td>{{ HTMLElement("style") }}</td> + <td></td> + </tr> + <tr> + <td><code>selected</code></td> + <td>{{ HTMLElement("option") }}</td> + <td>Defines a value which will be selected on page load.</td> + </tr> + <tr> + <td><code>shape</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td></td> + </tr> + <tr> + <td><code>size</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Defines the width of the element (in pixels). If the element's <code>type</code> attribute is <code>text</code> or <code>password</code> then it's the number of characters.</td> + </tr> + <tr> + <td><code>sizes</code></td> + <td>{{ HTMLElement("link") }}</td> + <td></td> + </tr> + <tr> + <td><code>slot</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Assigns a slot in a shadow DOM shadow tree to an element.</td> + </tr> + <tr> + <td><code>span</code></td> + <td>{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/spellcheck">spellcheck</a></code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Indicates whether spell checking is allowed for the element.</td> + </tr> + <tr> + <td><code>src</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td> + <td>내장 컨텐츠의 URL</td> + </tr> + <tr> + <td><code>srcdoc</code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td></td> + </tr> + <tr> + <td><code>srclang</code></td> + <td>{{ HTMLElement("track") }}</td> + <td></td> + </tr> + <tr> + <td><code>srcset</code></td> + <td>{{ HTMLElement("img") }}</td> + <td></td> + </tr> + <tr> + <td><code>start</code></td> + <td>{{ HTMLElement("ol") }}</td> + <td>Defines the first number if other than 1.</td> + </tr> + <tr> + <td><code>step</code></td> + <td>{{ HTMLElement("input") }}</td> + <td></td> + </tr> + <tr> + <td><code>style</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>이전 스타일을 오버라이드할 CSS 스타일을 정의함.</td> + </tr> + <tr> + <td><code>summary</code></td> + <td>{{ HTMLElement("table") }}</td> + <td></td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Overrides the browser's default tab order and follows the one specified instead.</td> + </tr> + <tr> + <td><code>target</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td> + <td></td> + </tr> + <tr> + <td><code>title</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>요소 위에 호버링했을떄 표시될 툴팁의 텍스트</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/translate">translate</a></code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Specify whether an element’s attribute values and the values of its <code><a href="https://dom.spec.whatwg.org/#text" id="ref-for-text①⑦">Text</a></code> node children are to be translated when the page is localized, or whether to leave them unchanged.</td> + </tr> + <tr> + <td><code>type</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td> + <td>요소의 타입을 정의함</td> + </tr> + <tr> + <td><code>usemap</code></td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td> + <td></td> + </tr> + <tr> + <td><code>value</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td> + <td>페이지가 로드된뒤 요소에 표시될 기본값을 지정합니다.</td> + </tr> + <tr> + <td><code>width</code></td> + <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td>Note: In some instances, such as {{ HTMLElement("div") }}, this is a legacy attribute, in which case the CSS {{ Cssxref("width") }} property should be used instead. In other cases, such as {{ HTMLElement("canvas") }}, the width must be specified with this attribute.</td> + </tr> + <tr> + <td><code>wrap</code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Indicates whether the text should be wrapped.</td> + </tr> + </tbody> +</table> + +<h2 id="Content_versus_IDL_attributes">Content versus IDL attributes</h2> + +<p>In HTML, most attributes have two faces: the <strong>content attribute</strong> and the <strong>IDL attribute</strong>.</p> + +<p>The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via {{domxref("element.setAttribute()")}} or {{domxref("element.getAttribute()")}}. The content attribute is always a string even when the expected value should be an integer. For example, to set an {{HTMLElement("input")}} element's <code>maxlength</code> to 42 using the content attribute, you have to call <code>setAttribute("maxlength", "42")</code> on that element.</p> + +<p>The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like <code class="moz-txt-verticalline">element.foo</code>. The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.</p> + +<p>Most of the time, IDL attributes will return their values as they are really used. For example, the default <code>type</code> for {{HTMLElement("input")}} elements is "text", so if you set <code>input.type="foobar"</code>, the <code><input></code> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the <code>type</code> IDL attribute will return the string "text".</p> + +<p>IDL attributes are not always strings; for example, <code>input.maxlength</code> is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so <code>input.maxlength</code> is always going to return a number and when you set <code>input.maxlength</code> ,it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.</p> + +<p>IDL attributes can <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">reflect other types</a> such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">the rules laid out in the specification</a>, but sometimes it doesn't. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes behave oddly (<code>select.size</code>, for example) and you should read the specifications to understand how exactly they behave.</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/HTML/Element" title="/en-US/docs/HTML/Element">HTML 요소</a></li> +</ul> diff --git a/files/ko/web/html/block-level_elements/index.html b/files/ko/web/html/block-level_elements/index.html new file mode 100644 index 0000000000..637ace1c8c --- /dev/null +++ b/files/ko/web/html/block-level_elements/index.html @@ -0,0 +1,127 @@ +--- +title: 블록 레벨 요소 +slug: Web/HTML/Block-level_elements +tags: + - Beginner + - Development + - Guide + - HTML + - HTML5 + - Web +translation_of: Web/HTML/Block-level_elements +--- +<p><strong>HTML</strong>(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 <a href="/ko/docs/Web/HTML/Inline_elements">"인라인" 요소</a>로 분류됐습니다. 기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다. 이 글에서 자세한 설명을 읽을 수 있습니다.</p> + +<p>{{glossary("browser", "브라우저")}}는 보통 블록 레벨 요소의 앞과 뒤를 개행해서 그립니다. 상자를 쌓는 것 처럼 생각할 수 있습니다.</p> + +<div class="blockIndicator note"> +<p>블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다.</p> +</div> + +<p>다음 예제가 블록 레벨 요소의 영향을 보여줍니다.</p> + +<h2 id="블록_레벨_요소">블록 레벨 요소</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>이 문단은 블록 레벨 요소입니다. 부모 요소와 구분할 수 있도록 배경 색을 입혔습니다.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { background-color: #8ABB55; }</pre> + +<p>{{EmbedLiveSample('블록_레벨_요소')}}</p> + +<h2 id="사용처">사용처</h2> + +<ul> + <li>블록 레벨 요소는 {{HTMLElement("body")}} 요소 안에서만 나타날 수 있습니다.</li> +</ul> + +<h2 id="블록_레벨_vs._인라인">블록 레벨 vs. 인라인</h2> + +<p>블록 레벨 요소와 인라인 요소는 몇 가지 중요한 차이점을 가지고 있습니다.</p> + +<dl> + <dt>콘텐츠 모델</dt> + <dd>일반적으로 블록 레벨 요소는 인라인 요소와 (때때로) 다른 블록 레벨 요소를 포함할 수 있습니다. 이런 고유한 구조적 차이점으로 인해 블록 레벨 요소는 인라인 요소보다 더 "큰" 구조를 생성할 수 있습니다.</dd> + <dt>기본 서식</dt> + <dd>기본적으로 블록 레벨 요소는 새로운 줄에서 시작하지만, 인라인 요소는 줄의 어느 곳에서나 시작할 수 있습니다.</dd> +</dl> + +<p>블록 레벨과 인라인 요소의 분류는 HTML 명세 4.01까지 사용됐습니다. 이런 이진적 구분은 HTML5부터 보다 복잡한 <a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a> 집합으로 대체됐습니다. "인라인" 카테고리는 <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>와 적당히 짝지을 수 있지만 "블록 레벨" 카테고리는 어느 HTML5 콘텐츠 카테고리와도 정확히 일치하지 않습니다. 그러나 블록 레벨과 인라인 요소를 조합하면 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>에 대응합니다. <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a> 등 추가 카테고리도 존재합니다.</p> + +<h2 id="요소_목록">요소 목록</h2> + +<p>다음은 HTML 블록 레벨 요소의 전체 목록입니다. (사실 HTML5의 새로운 요소를 설명할 때, "블록 레벨"이라는 용어는 정의되지 않습니다.)</p> + +<div class="threecolumns"> +<dl> + <dt>{{ HTMLElement("address") }}</dt> + <dd>연락처 정보.</dd> + <dt>{{ HTMLElement("article") }}</dt> + <dd>단락 콘텐츠.</dd> + <dt>{{ HTMLElement("aside") }}</dt> + <dd>부가 콘텐츠.</dd> + <dt>{{ HTMLElement("blockquote") }}</dt> + <dd>긴("블록") 인용구.</dd> + <dt>{{HTMLElement("details")}}</dt> + <dd>상세 정보 위젯.</dd> + <dt>{{HTMLElement("dialog")}}</dt> + <dd>대화상자.</dd> + <dt>{{ HTMLElement("dd") }}</dt> + <dd>설명 목록의 정의 설명.</dd> + <dt>{{ HTMLElement("div") }}</dt> + <dd>문서의 분할.</dd> + <dt>{{ HTMLElement("dl") }}</dt> + <dd>설명 목록.</dd> + <dt>{{HTMLElement("dt")}}</dt> + <dd>설명 목록의 정의.</dd> + <dt>{{ HTMLElement("fieldset") }}</dt> + <dd>필드 집합의 라벨.</dd> + <dt>{{ HTMLElement("figcaption") }}</dt> + <dd>그림 설명.</dd> + <dt>{{ HTMLElement("figure") }}</dt> + <dd>미디어 콘텐츠 그룹과 설명. ({{ HTMLElement("figcaption") }}을 참고하세요)</dd> + <dt>{{ HTMLElement("footer") }}</dt> + <dd>페이지나 구역의 푸터.</dd> + <dt>{{ HTMLElement("form") }}</dt> + <dd>입력 폼.</dd> + <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt> + <dd>1~6단계 제목.</dd> + <dt>{{ HTMLElement("header") }}</dt> + <dd>페이지나 구역의 헤더.</dd> + <dt>{{ HTMLElement("hgroup") }}</dt> + <dd>헤더 정보 그룹.</dd> + <dt>{{ HTMLElement("hr") }}</dt> + <dd>수평선(구분선).</dd> + <dt>{{HTMLElement("li")}}</dt> + <dd>목록의 항목.</dd> + <dt>{{HTMLElement("main")}}</dt> + <dd>문서에서 하나 뿐인 중심 콘텐츠.</dd> + <dt>{{HTMLElement("nav")}}</dt> + <dd>탐색 링크를 포함.</dd> + <dt>{{ HTMLElement("ol") }}</dt> + <dd>정렬된 목록.</dd> + <dt>{{ HTMLElement("p") }}</dt> + <dd>문단.</dd> + <dt>{{ HTMLElement("pre") }}</dt> + <dd>미리 서식 적용한 글.</dd> + <dt>{{ HTMLElement("section") }}</dt> + <dd>웹 페이지의 구역.</dd> + <dt>{{ HTMLElement("table") }}</dt> + <dd>표.</dd> + <dt>{{ HTMLElement("ul") }}</dt> + <dd>정렬되지 않은 목록.</dd> +</dl> +</div> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/HTML/Inline_elements">인라인 요소</a></li> + <li>{{cssxref("display")}}</li> + <li><a href="/ko/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout in Normal Flow</a></li> +</ul> + +<div>{{QuickLinksWithSubpages("/ko/docs/Web/HTML/")}}</div> diff --git a/files/ko/web/html/canvas/index.html b/files/ko/web/html/canvas/index.html new file mode 100644 index 0000000000..bbe466e58d --- /dev/null +++ b/files/ko/web/html/canvas/index.html @@ -0,0 +1,135 @@ +--- +title: Canvas API +slug: Web/HTML/Canvas +tags: + - API + - Canvas + - JavaScript + - 개요 + - 레퍼런스 +translation_of: Web/API/Canvas_API +--- +<div>{{CanvasSidebar}}</div> + +<p><strong>Canvas API</strong>는 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript">JavaScript</a>와 <a href="https://developer.mozilla.org/ko/docs/Web/HTML">HTML </a>{{HtmlElement("canvas")}} 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용됩니다.</p> + +<p>Canvas API는 주로 2D 그래픽에 중점을 두고 있습니다. <a href="https://developer.mozilla.org/ko/docs/Web/WebGL">WebGL API</a> 또한 <code><canvas></code> 엘리먼트를 사용하며, 하드웨어 가속 2D 및 3D 그래픽을 그립니다.</p> + +<h2 id="기본_예시">기본 예시</h2> + +<p>canvas에 초록색 사각형을 그리는 간단한 예시입니다.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>{{domxref("Document.getElementById()")}} 메소드는 HTML <code><canvas></code> 엘리먼트에 대한 참조를 얻습니다. 그 다음, {{domxref("HTMLCanvasElement.getContext()")}} 메소드는 엘리먼트의 컨텍스트(렌더링될 그리기의 대상)를 얻습니다.</p> + +<p>실제 그리기는 {{domxref("CanvasRenderingContext2D")}} 인터페이스를 사용해 수행됩니다. {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 프로퍼티는 사각형을 초록색으로 만듭니다. {{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} 메소드는 좌측 상단 코너를 (10, 10) 위치에 놓으며, 너비를 150, 높이를 100으로 지정합니다.</p> + +<pre class="brush: js">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +ctx.fillStyle = 'green'; +ctx.fillRect(10, 10, 150, 100); +</pre> + +<h3 id="결과">결과</h3> + +<p>{{ EmbedLiveSample('기본_예시', 700, 180) }}</p> + +<h2 id="레퍼런스">레퍼런스</h2> + +<div class="index"> +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasImageSource")}}</li> + <li>{{domxref("CanvasPattern")}}</li> + <li>{{domxref("ImageBitmap")}}</li> + <li>{{domxref("ImageData")}}</li> + <li>{{domxref("RenderingContext")}}</li> + <li>{{domxref("TextMetrics")}}</li> + <li>{{domxref("OffscreenCanvas")}} {{experimental_inline}}</li> + <li>{{domxref("Path2D")}} {{experimental_inline}}</li> + <li>{{domxref("ImageBitmapRenderingContext")}} {{experimental_inline}}</li> +</ul> +</div> + +<div class="blockIndicator note"> +<p><strong>노트:</strong> <code>WebGLRenderingContext</code>에 관련된 인터페이스는 <a href="/ko/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> 하위에 참조되어있습니다.</p> +</div> + +<p>{{domxref("CanvasCaptureMediaStream")}}은 관련된 인터페이스입니다.</p> + +<h2 id="가이드_및_튜토리얼">가이드 및 튜토리얼</h2> + +<dl> + <dt><a href="/ko/docs/Web/API/Canvas_API/Tutorial">Canvas 튜토리얼</a></dt> + <dd>Canvas API의 기본적인 사용과 고급 기능 모두를 다루는 이해하기 쉬운 튜토리얼.</dd> + <dt><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas 깊이 살펴보기</a></dt> + <dd>Canvas API 및 WebGL의 실습, 자세한 소개.</dd> + <dt><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas 핸드북</a></dt> + <dd>Canvas API에 대한 유용한 레퍼런스.</dd> + <dt><a href="/ko/docs/Web/API/Canvas_API/A_basic_ray-caster">데모: A basic ray-caster</a></dt> + <dd>Canvas를 사용한 ray-tracing 애니메이션 데모.</dd> + <dt><a href="/ko/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Canvas를 사용하여 비디오 조작</a></dt> + <dd>{{HTMLElement("video")}}와 {{HTMLElement("canvas")}}를 조합하여 실시간으로 비디오 데이터를 조작.</dd> +</dl> + +<h2 id="라이브러리">라이브러리</h2> + +<p>Canvas API는 굉장히 강력하지만, 사용하는 것이 항상 간단하지 않습니다. 아래에 나열된 라이브러리들은 캔버스 기반 프로젝트를 더 빠르고 더 쉽게 생성할 수 있게 해줍니다.</p> + +<ul> + <li><a href="http://www.createjs.com/easeljs">EaselJS</a>는 게임, 생성 예술 및 기타 고도의 그래픽 경험을 쉽게 생성할 수 있게 해주는 오픈소스 캔버스 라이브러리입니다.</li> + <li><a href="http://fabricjs.com">Fabric.js</a>는 SVG 파싱 기능을 갖춘 오픈소스 캔버스 라이브러리입니다.</li> + <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a>는 캔버스 기반 데이터 열지도를 생성하기위한 오픈소스 라이브러리입니다.</li> + <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a>은 인터렉티브한 데이터 시각화를 생성합니다.</li> + <li><a href="https://konvajs.github.io/">Konva.js</a>는 데스크탑 및 모바일 애플리케이션을 위한 2D 캔버스 라이브러리입니다.</li> + <li><a href="https://p5js.org/">p5.js</a>는 예술가, 디자이너, 교육자 및 입문자를 위한 캔버스 그리기 기능의 모든 세트를 포함하고 있습니다.</li> + <li><a href="http://paperjs.org/">Paper.js</a>는 HTML5 Canvas 위에서 실행되는 오픈소스 벡터 그래픽 스크립팅 프레임워크입니다.</li> + <li><a href="https://phaser.io/">Phaser</a>는 Canvas 및 WebGL 기반의 브라우저 게임을 위한 빠르고, 자유롭고, 재미있는 오픈소스 프레임워크입니다.</li> + <li><a href="http://processingjs.org">Processing.js</a>는 Processing 시각화 언어의 포트입니다.</li> + <li><a href="https://ptsjs.org">Pts.js</a>는 canvas 및 SVG를 사용한 창의적인 코딩 및 시각화를 위한 라이브러리입니다.</li> + <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a>는 Canvas를 위한 애니메이션 키 프레임 API입니다.</li> + <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a>는 2D 캔버스 엘리먼트를 생성하고 조작하기위한 오픈소스 JavaScript 라이브러리입니다.</li> + <li><a href="http://zimjs.com">ZIM</a> 프레임워크는 canvas에서의 창의적인 코딩을 위한 편의성, 컴포넌트 및 컨트롤을 제공하는 프레임워크입니다. 접근성 및 다채로운 튜토리얼을 포함합니다.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>노트:</strong> WebGL을 사용하는 2D 및 3D를 위한 <a href="/ko/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL API</a>를 확인하세요.</p> +</div> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>Mozilla 애플리케이션은 Gecko 1.8(<a href="/ko/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>)을 시작으로 <code><canvas></code>에 대한 지원을 받았습니다. OS X Dashboard 및 Safari를 위해 Apple이 소개한 것이 캔버스 엘리먼트의 기원입니다. Internet Explorer는 9버전부터 <code><canvas></code>를 지원하며, 이전 버전의 IE에서는 Google의 <a href="https://github.com/arv/explorercanvas">Explorer Canvas</a> 프로젝트의 스크립트를 추가하여 <code><canvas></code>에 대한 지원을 효과적으로 추가할 수 있습니다. Google Chrome 및 Opera 9 또한 <code><canvas></code>를 지원합니다.</p> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/WebGL">WebGL</a></li> +</ul> diff --git a/files/ko/web/html/canvas/manipulating_video_using_canvas/index.html b/files/ko/web/html/canvas/manipulating_video_using_canvas/index.html new file mode 100644 index 0000000000..7851f86154 --- /dev/null +++ b/files/ko/web/html/canvas/manipulating_video_using_canvas/index.html @@ -0,0 +1,164 @@ +--- +title: 캔버스(canvas)를 이용한 비디오 조작하기 +slug: Web/HTML/Canvas/Manipulating_video_using_canvas +tags: + - Canvas + - Video + - 비디오 + - 캔버스 +translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas +--- +<div>{{CanvasSidebar}}</div> + +<div class="summary"> +<p>비디오에서 다양한 시각적 효과를 보여주기 위해,<code> <a class="internal" href="/ko/docs/Web/HTML/Element/canvas" title="Ko/Canvas">캔버스</a></code>와 <code><a class="internal" href="/ko/docs/Web/HTML/Element/video" title="Ko/HTML/Element/Video">비디오</a></code>의 기능을 결합하여 실시간으로 비디오 데이터를 조작할 수 있습니다. 이 튜토리얼에서는 자바스크립트 코드로 어떻게 크로마 키잉(chroma-keying, 또한 "녹색 스크린 효과, green screen effect")을 구현할 수 있는지 보여줍니다. </p> +</div> + +<p><a class="external" href="/samples/video/chroma-key/index.xhtml" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/video/chroma-key/index.xhtml">라이브 예제 보기</a></p> + +<h2 id="문서(document)_내용">문서(document) 내용</h2> + +<p>이 내용을 보여주기 위한 XHTML 문서는 아래와 같습니다.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <style> + body { + background: black; + color:#CCCCCC; + } + #c2 { + background-image: url(foo.png); + background-repeat: no-repeat; + } + div { + float: left; + border :1px solid #444444; + padding:10px; + margin: 10px; + background:#3B3B3B; + } + </style> + <script type="text/javascript" src="main.js"></script> + </head> + + <body onload="processor.doLoad()"> + <div> + <video id="video" src="video.ogv" controls="true"/> + </div> + <div> + <canvas id="c1" width="160" height="96"></canvas> + <canvas id="c2" width="160" height="96"></canvas> + </div> + </body> +</html> +</pre> + +<p>여기에서 중요한 요소는:</p> + +<ol> + <li>이 문서에는 ID가 c1, c2인 두 개의 <a class="internal" href="/ko/docs/Web/HTML/Element/canvas" title="Ko/Canvas"><code>캔버스</code></a>가 있습니다. 캔버스 c1은 비디오 원본의 현재 프레임을 보여주기 위해 사용되고, c2는 크로마 키잉 효과를 수행한 결과를 보여줍니다. c2에서 비디오의 녹색 배경을 대체할 정지 이미지를 미리 로드합니다.</li> + <li>자바스크립트 코드는 main.js에서 가져옵니다. 이 스크립트는 자바스크립트 1.8 기능을 사용했기 때문에 스크립트를 가져오는 22번째 줄에서 버전이 명시됩니다(원문: this script uses JavaScript 1.8 features, so that version is specified in line 22 when importing the script).</li> + <li>문서가 로드되면, processor.doLoad() 메서드가 실행됩니다.</li> +</ol> + +<h2 id="자바스크립트_코드">자바스크립트 코드</h2> + +<p>main.js에 있는 자바스크립트 코드는 3개의 메서드로 구성됩니다.</p> + +<h3 id="크로마_키잉_플레이어_초기화">크로마 키잉 플레이어 초기화</h3> + +<p><code>doLoad()</code> 메서드는 문서가 최초에 로드될 때 호출됩니다. 이 메서드가 하는 일은 크로마 키잉 처리에서 쓰일 변수를 준비하고, 이벤트 리스너를 등록함으로써 사용자가 비디오 재생을 시작할 때 감지할 수 있도록 해줍니다. </p> + +<pre class="brush: js"> var processor; + + processor.doLoad = function doLoad() { + this.video = document.getElementById('video'); + this.c1 = document.getElementById('c1'); + this.ctx1 = this.c1.getContext('2d'); + this.c2 = document.getElementById('c2'); + this.ctx2 = this.c2.getContext('2d'); + let self = this; + this.video.addEventListener('play', function() { + self.width = self.video.videoWidth / 2; + self.height = self.video.videoHeight / 2; + self.timerCallback(); + }, false); + }, +</pre> + +<p>이코드는 XHTML에서 중요한 요소인 비디오와 캔버스의 참조를 가져옵니다. 두 개의 캔버스에 대한 그래픽 컨텍스트의 참조도 가져옵니다. 이 참조들은 뒤에서 크로마 키잉 효과를 구현할 때 사용됩니다.</p> + +<p>그리고 <code>addEventListener()</code>는 비디오가 재생을 시작하기 위해 호출되기 때문에 사용자가 재생 버튼을 누를 때 알림을 받습니다. 재생이 시작되면 이 코드는 비디오의 가로, 세로를 이등분 한 값을 가져오고(크로마 키잉 효과를 수행할 때 이등분 함), <code>timerCallback()</code> 메서드를 호출하여 비디오를 보고 시각적 효과를 계산하기 시작합니다.</p> + +<h3 id="타이머_콜백">타이머 콜백</h3> + +<p>타이머 콜백은 비디오가 재생되기 시작("재생" 이벤트가 발생)할 때 호출되는데, 매 프레임마다 키잉 효과를 주기 위해 주기적으로 호출 될 수 있도록 설정해 주어야 합니다.</p> + +<pre class="brush: js"> processor.timerCallback = function timerCallback() { + if (this.video.paused || this.video.ended) { + return; + } + this.computeFrame(); + let self = this; + setTimeout(function() { + self.timerCallback(); + }, 0); + }, +</pre> + +<p>콜백에서 하는 첫 번 째 일은 비디오가 재생되고 있는지 확인하는 것인데, 만약 그렇지 않다면 콜백은 아무 일도 하지 않고 즉시 반환됩니다.</p> + +<p>그 후에 현재 비디오 프레임에서 크로마 키잉 효과를 주기 위한 <code>computeFrame()</code> 메서드를 호출합니다.</p> + +<p>콜백에서 마지막으로 하는 일은 <code>setTimeout()</code>을 호출하여 가능한 한 빨리 <code>timerCallback()</code> 메서드를 다시 호출할 수 있도록 하는 것입니다. 실제로는, 비디오 프레임 속도에 대한 기반 지식으로 호출할 수 있도록 합니다. </p> + +<h3 id="비디오_프레임_데이터_조작">비디오 프레임 데이터 조작</h3> + +<p>아래의 <code>computeFrame()</code> 메서드는 프레임 데이터를 가져와서 크로마 키잉 효과를 수행하는 역할을 합니다. </p> + +<pre class="brush: js"> processor.computeFrame = function computeFrame() { + this.ctx1.drawImage(this.video, 0, 0, this.width, this.height); + let frame = this.ctx1.getImageData(0, 0, this.width, this.height); + let l = frame.data.length / 4; + + for (let i = 0; i < l; i++) { + let r = frame.data[i * 4 + 0]; + let g = frame.data[i * 4 + 1]; + let b = frame.data[i * 4 + 2]; + if (g > 100 && r > 100 && b < 43) + frame.data[i * 4 + 3] = 0; + } + this.ctx2.putImageData(frame, 0, 0); + return; + } +</pre> + +<p>위 과정이 계속 호출 되면, 아래와 같이 비디오 요소에 가장 최근 프레임의 비디오 데이터가 표출됩니다.</p> + +<p><img alt="video.png" class="default internal" src="/@api/deki/files/3282/=video.png" style="height: 192px; width: 320px;"></p> + +<p>2번째 줄에서, 첫 번째 캔버스의 그래픽 컨텍스트 ctx1에 비디오 프레임이 복사 되는데, 원본의 절반 크기로 프레임을 그리기 위해 이전에 저장한 가로, 세로 값으로 지정합니다. 컨텍스트의 <code>drawImage()</code> 메서드에 비디오 요소를 전달하기만 하면 현재 비디오 프레임을 그릴 수 있습니다. 결과는 아래와 같습니다: </p> + +<p><img alt="sourcectx.png" class="default internal" src="/@api/deki/files/3284/=sourcectx.png" style="height: 96px; width: 160px;"></p> + +<p>3번째 줄에서는 첫 번째 컨텍스트의 <code>getImageData()</code> 메서드를 호출해서 현재 비디오 프레임의 원시 그래픽 데이터 복사본을 가져옵니다. 이것은 조작할 수 있는 원시 32비트 픽셀 이미지 데이터를 제공합니다. 4번째 줄에서는 프레임의 이미지 데이터 전체 크기를 4로 나누어 이미지의 픽셀 수를 계산합니다.</p> + +<p>6번째 줄에서 시작하는 <code>for</code> 문은 프레임의 픽셀을 스캔하여, 빨간색, 녹색, 파란색 값을 추출하여 사전에 정의된 숫자와 비교합니다. 이 숫자는 <code>foo.png</code>에서 가져온 배경 이미지로 대체될 녹색 스크린 영역을 감지합니다.</p> + +<p>녹색 스크린이라고 간주된 매개변수 내의 프레임 이미지 데이터의 모든 픽셀은 투명해질 수 있도록 알파값이 0으로 대체됩니다. 결과적으로 최종 이미지는 100% 투명해진 녹색 스크린 영역을 갖게 되고, 13번째 줄에서 대상 컨텍스트에 고정된 배경 위로 올려져 그려집니다.</p> + +<p>결과 이미지는 아래와 같습니다:</p> + +<p><img alt="output.png" class="default internal" src="/@api/deki/files/3283/=output.png" style="height: 96px; width: 161px;"></p> + +<p>이 과정은 비디오가 재생될 때마다 반복되므로, 매 프레임마다 처리되어 크로마 키잉 효과가 나타나는 것입니다.</p> + +<p><a class="external" href="/samples/video/chroma-key/index.xhtml" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/video/chroma-key/index.xhtml">라이브 예제 보기</a></p> + +<h2 id="더_보기">더 보기</h2> + +<ul> + <li><a class="internal" href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">오디오와 비디오 사용하기</a></li> +</ul> diff --git a/files/ko/web/html/canvas/tutorial/advanced_animations/index.html b/files/ko/web/html/canvas/tutorial/advanced_animations/index.html new file mode 100644 index 0000000000..1779e63b2c --- /dev/null +++ b/files/ko/web/html/canvas/tutorial/advanced_animations/index.html @@ -0,0 +1,376 @@ +--- +title: 발전된 애니메이션 +slug: Web/HTML/Canvas/Tutorial/Advanced_animations +translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div> + +<div class="summary"> +<p>마지막 챕터에서 우리는 몇가지 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">간단한 애니메이션들</a>을 만들었고 이제 이것들을 어떻게 움직이게 하는지 안다. 이 챕터에서 우리는 각각의 모션들을 자세히 살펴보고 애니메이션을 더 발전시키기 위해 몇가지 물리 동작을 추가할 것이다.</p> +</div> + +<h2 id="공_그리기">공 그리기</h2> + +<p>우리는 애니메이션 공부를 위해 공을 사용할 것이다. 먼저 캔버스에 공을 그려보자. 다음 코드를 통해 준비해보자.</p> + +<pre class="brush: html notranslate"><canvas id="canvas" width="600" height="300"></canvas> +</pre> + +<p>언제나처럼, 우리는 context를 먼저 그려야 한다. 공을 그리기 위해 우리는 캔버스에 그림을 그리기 위한 프로퍼티와 <code>draw()</code> 메소드를 가진 <code>ball</code> 오브젝트를 생성할 것이다.</p> + +<pre class="brush: js notranslate">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +var ball = { + x: 100, + y: 100, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +ball.draw();</pre> + +<p>특이할 건 없다. 이공은 사실상 간단한 원이고 그리는 방법은 다음{{domxref("CanvasRenderingContext2D.arc()", "arc()")}} 메소드에서 참고할 수 있다.</p> + +<h2 id="속도_추가하기">속도 추가하기</h2> + +<p>우리한테는 이제 공이 있다. 이제 이 튜토리얼 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">마지막 챕터</a>에서 배웠던 것과 같은 기본 애니메이션을 추가할 준비가 되었다. 다시 한 번, 애니메이션 컨트롤은 {{domxref("window.requestAnimationFrame()")}}가 도와주 것이다. 공은 위치에 속도 벡터를 추가하여 움직일 수 있게 된다. 각각의 프레임에, 우리는{{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}}를 캔버스에 주어 오래된 원을 이전 프래임에서 지운다.</p> + +<pre class="brush: js; highlight:[8,9,24,25] notranslate">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 2, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function draw() { + ctx.clearRect(0,0, canvas.width, canvas.height); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mouseover', function(e) { + raf = window.requestAnimationFrame(draw); +}); + +canvas.addEventListener('mouseout', function(e) { + window.cancelAnimationFrame(raf); +}); + +ball.draw(); +</pre> + +<h2 id="경계">경계</h2> + +<p>경게 충돌 테스트의 필요 없이 우리가 만든 공은 캔버스 밖으로 빠르게 빠져나갈 것입니다. 우리는 공의 <code>x</code> 와 <code>y</code> 위치가 캔버스 차원을 빠져나갔는지 체크해서 방향과 속도를 바꿔주어야 합니다. 그러기 위해서 우리는 <code>draw</code> 메소드에 다음 확인사항을 추가할 것입니다.:</p> + +<pre class="brush: js notranslate">if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { + ball.vy = -ball.vy; +} +if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { + ball.vx = -ball.vx; +}</pre> + +<h3 id="First_demo">First demo</h3> + +<p>이제 동작을 확인해 봅시다. 시작하려먼 마우스를 캔버스 안으로 움직여 주세요.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> + +<pre class="brush: js notranslate">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 2, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function draw() { + ctx.clearRect(0,0, canvas.width, canvas.height); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + + if (ball.y + ball.vy > canvas.height || + ball.y + ball.vy < 0) { + ball.vy = -ball.vy; + } + if (ball.x + ball.vx > canvas.width || + ball.x + ball.vx < 0) { + ball.vx = -ball.vx; + } + + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mouseover', function(e) { + raf = window.requestAnimationFrame(draw); +}); + +canvas.addEventListener('mouseout', function(e) { + window.cancelAnimationFrame(raf); +}); + +ball.draw();</pre> +</div> + +<p>{{EmbedLiveSample("First_demo", "610", "310")}}</p> + +<h2 id="가속">가속</h2> + +<p>움직임을 좀 더 리얼하게 만들기 위해, 우리는 속도를 다음과 같이 줄 겁니다. 예를들어:</p> + +<pre class="brush: js notranslate">ball.vy *= .99; +ball.vy += .25;</pre> + +<p>이것은 각 프레임의 세로 속도를 줄여주어, 공이 결국 바닥에서 튀게 만듭니다.</p> + +<div class="hidden"> +<h6 id="Second_demo">Second demo</h6> + +<pre class="brush: html notranslate"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> + +<pre class="brush: js notranslate">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 2, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function draw() { + ctx.clearRect(0,0, canvas.width, canvas.height); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + ball.vy *= .99; + ball.vy += .25; + + if (ball.y + ball.vy > canvas.height || + ball.y + ball.vy < 0) { + ball.vy = -ball.vy; + } + if (ball.x + ball.vx > canvas.width || + ball.x + ball.vx < 0) { + ball.vx = -ball.vx; + } + + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mouseover', function(e) { + raf = window.requestAnimationFrame(draw); +}); + +canvas.addEventListener('mouseout', function(e) { + window.cancelAnimationFrame(raf); +}); + +ball.draw();</pre> +</div> + +<p>{{EmbedLiveSample("Second_demo", "610", "310")}}</p> + +<h2 id="후행_효과">후행 효과</h2> + +<p>지금까지 우리는 {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}}메소드를 사용해서 이전 프레임을 지웠다. 만약 당신이 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}르 사용하여 약간 투명도를 준다면, 쉽게 후행 효과(Trailing effect)를 만들 수 있을 것이다.</p> + +<pre class="brush: js notranslate">ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; +ctx.fillRect(0, 0, canvas.width, canvas.height);</pre> + +<div class="hidden"> +<h6 id="Third_demo">Third demo</h6> + +<pre class="brush: html notranslate"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> + +<pre class="brush: js notranslate">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 2, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function draw() { + ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + ball.vy *= .99; + ball.vy += .25; + + if (ball.y + ball.vy > canvas.height || + ball.y + ball.vy < 0) { + ball.vy = -ball.vy; + } + if (ball.x + ball.vx > canvas.width || + ball.x + ball.vx < 0) { + ball.vx = -ball.vx; + } + + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mouseover', function(e) { + raf = window.requestAnimationFrame(draw); +}); + +canvas.addEventListener('mouseout', function(e) { + window.cancelAnimationFrame(raf); +}); + +ball.draw();</pre> +</div> + +<p>{{EmbedLiveSample("Third_demo", "610", "310")}}</p> + +<h2 id="마우스_컨트롤_추가하기">마우스 컨트롤 추가하기</h2> + +<p>공을 컨트롤 하기 위해, 우리는 <code><a href="/en-US/docs/Web/Reference/Events/mousemove">mousemove</a></code> 이벤트를 사용하여 마우스를 따라오게 할 것이다. <code><a href="/en-US/docs/Web/Events/click">click</a></code> 이벤트를 통해 공을 놓으면 다시 공이 튀도록 할 것이다.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> +</div> + +<pre class="brush: js notranslate">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; +var running = false; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 1, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function clear() { + ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; + ctx.fillRect(0,0,canvas.width,canvas.height); +} + +function draw() { + clear(); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + + if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { + ball.vy = -ball.vy; + } + if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { + ball.vx = -ball.vx; + } + + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mousemove', function(e) { + if (!running) { + clear(); + ball.x = e.clientX; + ball.y = e.clientY; + ball.draw(); + } +}); + +canvas.addEventListener('click', function(e) { + if (!running) { + raf = window.requestAnimationFrame(draw); + running = true; + } +}); + +canvas.addEventListener('mouseout', function(e) { + window.cancelAnimationFrame(raf); + running = false; +}); + +ball.draw(); +</pre> + +<p>마우스로 공을 움직이고, 클릭을 통해 놓아보자.</p> + +<p>{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}</p> + +<h2 id="Breakout">Breakout</h2> + +<p>이 짧은 챕터는 발전된 애니메이션을 만들기 위한 조금의 기술을 설명했다. 여기에 더 많은 것들이 있다! 노나 벽돌을 추가해서 이 튜토리얼을 <a href="http://en.wikipedia.org/wiki/Breakout_%28video_game%29">Breakout</a> 으로 발전시키는 건 어떨까? <a href="/en-US/docs/Games">Game development</a>에서 게임에 관련된 글들을 찾아보자.</p> + +<h2 id="더보기">더보기</h2> + +<ul> + <li>{{domxref("window.requestAnimationFrame()")}}</li> + <li><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></li> +</ul> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</p> diff --git a/files/ko/web/html/canvas/tutorial/applying_styles_and_colors/index.html b/files/ko/web/html/canvas/tutorial/applying_styles_and_colors/index.html new file mode 100644 index 0000000000..df094acb71 --- /dev/null +++ b/files/ko/web/html/canvas/tutorial/applying_styles_and_colors/index.html @@ -0,0 +1,732 @@ +--- +title: 스타일과 색 적용하기 +slug: Web/HTML/Canvas/Tutorial/Applying_styles_and_colors +tags: + - HTML5 + - 그래픽 + - 캔버스 +translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</div> + +<div class="summary"> +<p><a href="/ko/docs/Web/HTML/Canvas/Tutorial/Drawing_shapes">도형 그리기</a> 장에서는 기본 선과 채우기 스타일만 사용했습니다. 여기서 우리는 그리기를 조금 더 매력적으로 만들 수있는 캔버스 옵션을 살펴볼 것입니다. 그리기에 다른 색상, 선 스타일, 그라디언트, 패턴 및 그림자를 추가하는 방법을 배우게됩니다.</p> +</div> + +<h2 id="Colors" name="Colors">색상</h2> + +<p>지금까지는 그리기 메소드만 살펴봤습니다. 도형에 색을 적용하고자 하면, <code>fillStyle</code>과 <code>strokeStyle</code> 두 가지 중요한 속성을 사용할 수 있습니다.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}</dt> + <dd>도형을 채우는 색을 설정합니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}</dt> + <dd>도형의 윤곽선 색을 설정합니다.</dd> +</dl> + +<p>여기서의 <code>color</code>는 CSS의 {{cssxref("<color>")}}, 그라디언트 객체, 패턴 객체를 뜻합니다. 그라디언트 객체와 패턴 객체는 페이지 아래에서 설명합니다. 윤곽선과 채움 색의 초기 설정값은 검은색입니다. (CSS 색상 값 <code>#000000</code>)</p> + +<div class="note"> +<p><strong>참고:</strong> <code>strokeStyle</code> 또는 <code>fillStyle</code> 속성을 설정하면, 새로 설정된 값이 앞으로 그려질 도형의 기본 값이 됩니다. 각 도형에 다른 색을 적용하려면 <code>fillStyle</code> 또는 <code>strokeStyle</code> 속성을 다시 적용해야 합니다.</p> +</div> + +<p>색의 올바른 값은 CSS3 사양에 나오는 {{cssxref("<color>")}} 값입니다. 아래에 나오는 색은 모두 한가지 색을 다르게 표현한 것입니다.</p> + +<pre class="brush: js">// fillStyle에 적용되는 색은 모두 '오렌지' + +ctx.fillStyle = "orange"; +ctx.fillStyle = "#FFA500"; +ctx.fillStyle = "rgb(255, 165, 0)"; +ctx.fillStyle = "rgba(255, 165, 0, 1)"; +</pre> + +<h3 id="A_fillStyle_example" name="A_fillStyle_example"><code>fillStyle</code> 예제</h3> + +<p>이 예제에서 <code>for</code> 반복문을 두 번 사용하여 사각형 격자를 그릴 것입니다. 결과는 스크린샷과 같을 것입니다. 결과가 그리 대단한 것은 아닙니다. 각 사각형의 RGB 색상값에서 붉은색과 녹색 값만을 변수 <code>i</code>와 <code>j</code>를 사용하여 변경합니다. 파란색 채널은 고정된 값입니다. 채널 값들을 변경함으로써, 모든 종류의 팔레트를 생성할 수 있습니다. 단계를 늘리면 Photoshop에서 사용하는 색상 팔레트와 비슷한 모양을 얻을 수 있습니다.</p> + +<pre class="brush: js;highlight[5,6]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + for (var i = 0; i < 6; i++){ + for (var j = 0; j < 6; j++){ + ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' + + Math.floor(255 - 42.5 * j) + ', 0)'; + ctx.fillRect(j*25,i*25,25,25); + } + } +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>결과는 아래와 같습니다.</p> + +<p>{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p> + +<h3 id="A_strokeStyle_example" name="A_strokeStyle_example"><code>strokeStyle</code> 예제</h3> + +<p>이번 예제는 위에 나온 예제와 비슷하지만, <code>strokeStyle</code> 속성을 사용하여 윤곽선의 색을 바꿉니다. 사각형 대신, 원을 그리는 <code>arc()</code> 메소드를 사용합니다.</p> + +<pre class="brush: js;highlight[5,6]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + for (var i = 0; i < 6; i++) { + for (var j = 0; j < 6; j++) { + ctx.strokeStyle = 'rgb(0, ' + Math.floor(255 - 42.5 * i) + ', ' + + Math.floor(255 - 42.5 * j) + ')'; + ctx.beginPath(); + ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true); + ctx.stroke(); + } + } +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>결과는 아래와 같습니다.</p> + +<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p> + +<h2 id="Transparency" name="Transparency">투명도</h2> + +<p>캔버스에는 불투명한 도형을 그릴 수도 있고, 반투명한 도형도 그릴 수도 있습니다. <code>globalAlpha</code> 값을 설정하거나 윤곽선 또는 채움 스타일에 반투명 색을 적용하면 됩니다.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}</dt> + <dd>투명도 값이 설정되면 이후 캔버스에 그려지는 모든 도형들의 투명도가 바뀝니다. 설정하는 값은 0.0(완전히 투명)과 1.0(완전히 불투명) 사이에 있어야 하며, 초기 설정값은 1.0(완전히 투명)입니다.</dd> +</dl> + +<p><code>globalAlpha</code>는 모두 같은 투명도로 캔버스에 많은 도형을 그릴 때 유용합니다. 하지만, 보통은 각각의 도형마다 투명도를 설정하는 것이 더 유용할 것입니다.</p> + +<p><code>strokeStyle</code>과 <code>fillStyle</code> 값에 CSS rgba 색상값을 적용할 수 있으므로, 투명한 색을 적용하려면 아래와 같은 표기법을 사용할 수 있습니다.</p> + +<pre class="brush: js">// 외곽선과 채움 스타일에 투명 적용 + +ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)'; +ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; +</pre> + +<p><code>rgba()</code> 함수는 <code>rgb()</code> 함수와 비슷하지만, 인자가 하나 더 있습니다. 마지막 인자는 투명도 값을 설정하는 인자입니다. 올바른 범위는 0.0(완전히 투명)에서 1.0(완전히 불투명)입니다.</p> + +<h3 id="A_globalAlpha_example" name="A_globalAlpha_example"><code>globalAlpha</code> 예제</h3> + +<p>이 예제에서, 네 가지 다른 색을 가진 사각형을 배경에 그릴 것입니다. 그 위에, 반투명한 원을 여러 개 그릴 것입니다. <code>globalAlpha</code> 값을 <code>0.2</code>로 설정하면 이후 그려질 도형은 이 값을 사용합니다. <code>for</code> 반복문을 사용하여 점점 큰 반지름의 원을 그립니다. 최종 결과물은 원형 그레이디언트가 됩니다. 원이 겹쳐지면서 점점 불투명해지는 것을 볼 수 있으며, 최종적으로 한 가운데에 있는 원에서는 뒷 배경이 거의 보이지 않게 됩니다.</p> + +<pre class="brush: js;highlight[15]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + // 배경을 그린다 + ctx.fillStyle = '#FD0'; + ctx.fillRect(0, 0, 75, 75); + ctx.fillStyle = '#6C0'; + ctx.fillRect(75, 0, 75, 75); + ctx.fillStyle = '#09F'; + ctx.fillRect(0, 75, 75, 75); + ctx.fillStyle = '#F30'; + ctx.fillRect(75, 75, 75, 75); + ctx.fillStyle = '#FFF'; + + // 투명값을 설정한다 + ctx.globalAlpha = 0.2; + + // 반투명한 원을 그린다 + for (var i = 0; i < 7; i++){ + ctx.beginPath(); + ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true); + ctx.fill(); + } +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p> + +<h3 id="An_example_using_rgba()" name="An_example_using_rgba()"><code>rgba()</code>를 사용한 예제</h3> + +<p>두번째 예제에서는 위의 예제와 비슷한 일을 하지만, 겹쳐진 원을 그리는 대신, 불투명도가 증가하는 작은 사각형을 그릴 것입니다. 각각의 도형마다 윤곽선이나 채움 스타일을 따로따로 설정할 수 있기 때문에, <code>rgba()</code>를 사용할 때는 조금 더 제어가 쉽고 융통성도 있습니다.</p> + +<pre class="brush: js;highlight[16]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // 배경을 그린다 + ctx.fillStyle = 'rgb(255,221,0)'; + ctx.fillRect(0,0,150,37.5); + ctx.fillStyle = 'rgb(102,204,0)'; + ctx.fillRect(0,37.5,150,37.5); + ctx.fillStyle = 'rgb(0,153,255)'; + ctx.fillRect(0,75,150,37.5); + ctx.fillStyle = 'rgb(255,51,0)'; + ctx.fillRect(0,112.5,150,37.5); + + // 반투명한 사각형을 그린다 + for (var i=0;i<10;i++){ + ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')'; + for (var j=0;j<4;j++){ + ctx.fillRect(5+i*14,5+j*37.5,14,27.5) + } + } +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p> + +<h2 id="Line_styles" name="Line_styles">선 모양</h2> + +<p>선의 스타일을 바꾸는 방법이 몇가지 있습니다.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}</dt> + <dd>이후 그려질 선의 두께를 설정합니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}</dt> + <dd>선의 끝 모양을 설정합니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}</dt> + <dd>선들이 만나는 "모서리"의 모양을 설정합니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}</dt> + <dd>두 선이 예각으로 만날 때 접합점의 두께를 제어할 수 있도록, 연결부위의 크기를 제한하는 값을 설정합니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}</dt> + <dd>음수가 아닌 짝수를 포함하는 현재 선의 대시 패턴 배열을 반환합니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}</dt> + <dd>현재 선의 대시 패턴을 설정합니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}</dt> + <dd>선의 대시 배열이 어디서 시작될지 지정합니다.</dd> +</dl> + +<p>아래 예제들을 보면 어떻게 동작하는지 이해할 수 있을 것입니다.</p> + +<h3 id="A_lineWidth_example" name="A_lineWidth_example"><code>lineWidth</code> 예제</h3> + +<p>현재 선의 두께를 설정합니다. 설정값은 반드시 양수이어야 하며, 초기 설정값은 1.0 단위입니다.</p> + +<p>선의 두께는 지정된 경로의 가운데에 있는 획의 두께입니다. 이 말의 뜻은, 경로의 좌우로, 설정된 두께 반 만큼의 폭 영역이 그려진다는 것입니다. 캔버스 좌표는 픽셀을 직접 참조하지 않으므로, 선명한 수평 및 수직선을 얻기 위해 특별히 주의를 기울여야 합니다.</p> + +<p>아래에 나오는 예제에서는, 선의 두께가 점점 증가하는 10개의 직선이 그려집니다. 가장 왼쪽의 선은 1.0 단위 폭입니다. 그러나, 경로의 위치 때문에 가장 왼쪽과 다른 모든 홀수 폭 두께 선은 선명하게 보이지 않습니다.</p> + +<pre class="brush: js;highlight[4]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + for (var i = 0; i < 10; i++){ + ctx.lineWidth = 1 + i; + ctx.beginPath(); + ctx.moveTo(5 + i * 14, 5); + ctx.lineTo(5 + i * 14, 140); + ctx.stroke(); + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p> + +<p>선명한 선을 얻으려면 경로에 획을 어떻게 그려지는지 이해해야 합니다. 아래의 이미지를 보면, 격자는 캔버스의 좌표 격자를 나타냅니다. 격자선 사이에 있는 사각형은 실제 픽셀과 딱 맞아 떨어집니다. 아래에 있는 첫번째 이미지를 보면, (2,1)에서 (5,5)로 사각형이 채워져 있습니다. 사각형의 전체 영역(연한 붉은 색)은 픽셀 경계선 사이에 딱 맞아 떨어지기 때문에 채워진 사각형은 선명한 가장자리를 갖습니다.</p> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/201/Canvas-grid.png"></p> + +<p>만일 (3,1)에서 (3,5)로 그리는 직선의 두께가 1.0이라면, 두번째 이미지와 같은 상황이 됩니다. 채워진 실제 영역 (진한 파란색)은 패스의 양쪽에있는 픽셀의 절반까지만 확장됩니다. 이것은 1 픽셀을 채우는 것이 아니므로 근사값으로 화면에 그려지게 됩니다. 그래서 양옆의 영역(연한 파란색과 짙은 파란 색)으로, 실제 설정한 색과는 다른 흐릿한 색으로 채워지는 것입니다. 이전 예제에서 보듯이 선 두께가 <code>1.0</code>인 선에서 일어난 일입니다.</p> + +<p>이렇게 되는 것을 막으려면, 경로를 아주 정밀하게 생성해야 합니다. 선의 두께가 1.0이면 경로의 양쪽으로 0.5 단위만큼이라는 것을 알고 있으니, (3.5,1)에서 (3.5,5)로 그리는 경로를 생성하는 세번째 이미지의 결과는 완벽히 정밀하게 1 픽셀 두께의 수직선이 됩니다.</p> + +<div class="note"> +<p><strong>참고:</strong> 위에 나온 수직선 그리기 예제를 살펴보면, Y 위치는 정수로 된 격자선 위치를 참조하고 있습니다. 그렇지 않았다면, 끝점에서 픽셀의 반을 차지한 상태로 보였을 것입니다. (초기값이 <code>butt</code>인 <code>lineCap</code> 스타일의 설정값에 따라 다르게 보입니다. 홀수 두께 선들의 좌표를 0.5 픽셀씩 조정하여 다시 계산하고 싶을지도 모릅니다. <code>lineCap</code> 스타일을 <code>square</code>로 설정함으로써, 끝점에서 선의 외곽 경계선은 픽셀에 딱 맞게 자동적으로 확장될 것입니다.)</p> + +<p>경로의 시작 지점과 종료 지점의 끝점만이 영향을 받는다는 것에 주목하세요. 만약 <code>closePath()</code>로 경로가 닫힌다면, 시작 지점과 종료 지점은 없는 것입니다. 그 대신, 경로 안에 있는 모든 끝점들은, 초기 설정값이 <code>miter</code>인 <code>lineJoin</code> 스타일의 설정값을 사용하여 이전 부분 및 다음 부분과 이어지는데, 교차되는 점들로 이어진 부분들의 외곽 경계선을 자동적으로 확장하는 효과가 생깁니다. 그렇기 때문에 만약 이들 이어진 부분들이 수직 또는 수평이라면, 그려지는 선들은 각 끝점의 중심에 놓인 픽셀을 가득 채우게 될 것입니다. 이들 선 스타일에 대한 예제는 아래에 나옵니다.</p> +</div> + +<p>짝수 두께의 선들은 반으로 나누어도 각각의 반은 정수의 양만큼이기 때문에 픽셀을 조정할 필요가 없습니다.</p> + +<p>비트맵이 아닌 벡터 2D 그래픽으로 작업할 때, 작업을 시작할 때는 약간 힘들겠지만, 격자와 경로의 위치에 주의를 기울인다면, 크기를 키우거나 줄이거나 또는 어떠한 변형을 하더라도 그리려는 이미지는 똑바로 보일 것입니다. 1.0 두께의 수직선은 2배로 크기를 키웠을 때, 정확히 2 픽셀 두께의 선이 되며, 올바른 위치에 나타날 것입니다.</p> + +<h3 id="A_lineCap_example" name="A_lineCap_example"><code>lineCap</code> 예제</h3> + +<p><code>lineCap</code> 속성은 그리려는 모든 선의 끝점 모양을 결정합니다. <code>butt</code>, <code>round</code>, <code>square</code>라는 세 가지 값을 가지며, 초기 설정값은 <code>butt</code>입니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/236/Canvas_linecap.png" style="float: right; height: 190px; width: 190px;"></p> + +<dl> + <dt><code>butt</code></dt> + <dd>선의 끝이 좌표에 딱맞게 잘립니다.</dd> + <dt><code>round</code></dt> + <dd>선의 끝이 동그랗습니다.</dd> + <dt><code>square</code></dt> + <dd>선 끝에, 선 두께 반만큼의 사각형 영역이 더해집니다.</dd> +</dl> + +<p>이 예제에서는, 각기 다른 <code>lineCap</code> 속성 값을 가진 선 세개가 그려집니다. 또한 각 선들의 차이점을 정확히 보이기 위한 안내선이 추가로 그려집니다. 세개의 선 모두, 이 안내선 위에 시작과 종료 좌표가 있습니다.</p> + +<p>맨 왼쪽에 있는 선은 초기 설정값인 <code>butt</code>을 사용합니다. 안내선에 딱 맞게 선이 시작되고 끝이 납니다. 가운데에 있는 선은 <code>round</code>를 사용합니다. 선 두께의 반을 반지름으로 하는 반원이 끝에 붙습니다. 맨 오른쪽에 있는 선은 <code>square</code>를 사용합니다. 선 두께 만큼의 너비와 선 두께 반 만큼의 높이를 가진 네모 상자가 끝에 붙습니다.</p> + +<pre class="brush: js;highlight[18]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var lineCap = ['butt','round','square']; + + // 안내선을 그린다 + ctx.strokeStyle = '#09f'; + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.lineTo(140, 10); + ctx.moveTo(10, 140); + ctx.lineTo(140, 140); + ctx.stroke(); + + // 선을 그린다 + ctx.strokeStyle = 'black'; + for (var i=0;i<lineCap.length;i++){ + ctx.lineWidth = 15; + ctx.lineCap = lineCap[i]; + ctx.beginPath(); + ctx.moveTo(25 + i * 50, 10); + ctx.lineTo(25 + i * 50,140); + ctx.stroke(); + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p> + +<h3 id="A_lineJoin_example" name="A_lineJoin_example"><code>lineJoin</code> 예제</h3> + +<p><code>lineJoin</code> 속성은, 도형을 이루는 선이나 호나 곡선들이 연결되는 지점의 모양을 결정합니다. 끝점과 제어점이 정확히 같은 위치인, 길이가 0인 부분들은 제외된다.</p> + +<p>이 속성에는 세 가지 값이 있는데, <code>round</code>, <code>bevel</code>, <code>miter</code>이며, 초기 설정값은 <code>miter</code>입니다. 두 부분들이 같은 방향으로 연결되어 있는 경우에는, <code>lineJoin</code>을 설정해도 아무런 효과가 나타나지 않습니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p> + +<dl> + <dt><code>round</code></dt> + <dd>도형의 모서리를, 연결되는 부분들의 공통 끝점을 중심으로 하는 원 모양으로 만듭니다. 이때 원의 반지름은 선의 두께와 같습니다.</dd> + <dt><code>bevel</code></dt> + <dd>도형의 모서리를, 연결되는 부분들의 공통 끝점에서 세모 모양으로 만듭니다.</dd> + <dt><code>miter</code></dt> + <dd>도형의 모서리를, 두 부분의 바깥쪽 테두리 선을 각각 연장하여 교차된 점으로 생긴 마름모꼴 모양으로 만듭니다. <code>miterLimit</code> 속성값에 따라 모양이 달라집니다.</dd> +</dl> + +<p>아래 예제에서 세 개의 경로를 그릴 것입니다. 세 경로는 각각 다른 <code>lineJoin</code> 속성값을 가집니다.</p> + +<pre class="brush: js;highlight[6]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var lineJoin = ['round', 'bevel', 'miter']; + ctx.lineWidth = 10; + for (var i=0;i<lineJoin.length;i++){ + ctx.lineJoin = lineJoin[i]; + ctx.beginPath(); + ctx.moveTo(-5, 5 + i * 40); + ctx.lineTo(35, 45 + i * 40); + ctx.lineTo(75, 5 + i * 40); + ctx.lineTo(115, 45 + i * 40); + ctx.lineTo(155, 5 + i * 40); + ctx.stroke(); + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p> + +<h3 id="A_demo_of_the_miterLimit_property" name="A_demo_of_the_miterLimit_property"><code>miterLimit</code> 속성 예제</h3> + +<p>위의 예제에서 볼 수 있듯이, 속성값을 <code>miter</code>로 하여 두 선이 연결되면, 연결되는 두 선의 바깥쪽 테두리는 연장선이 만나는 지점까지 확장됩니다. 연결된 두 선이 이루는 각도가 크면, 확장되는 영역이 크지 않지만, 각도가 작아짐(끝이 뾰족해짐)에 따라서 이 영역이 기하급수적으로 커질 수도 있습니다.</p> + +<p><code>miterLimit</code> 속성은 끝점이 만나는 지점과 테두리 연장선이 만나는 지점이 얼마나 떨어져 있을지를 결정합니다. 두 선이 이 값을 넘게 되면, <code>lineJoin</code> 속성의 <code>bevel</code> 값 모양이 적용됩니다. <code>miterLimit</code> 속성값(HTML {{HTMLElement("canvas")}}에서, 초기 설정값은 10.0)에 의해, 현재 좌표 방식 안에서, 선의 두께에 따라, 어느 정도까지 뾰족해질 수 있는지가 계산됩니다. 그래서 <code>miterLimit</code>은 현재 디스플레이 비율이나 경로의 변형 같은 것으로 각각 설정될 수 있습니다. 그렇게 하여 선의 모서리에만 영향을 줍니다.</p> + +<p>더 자세히 얘기하자면, 뾰족함 제한(miter limit)은, 선 두께의 반과 확장되는 길이(HTML 캔버스에서, 선이 연결되는 바깥쪽 끝부분과, 경로에서 연결되는 두 부분의 공통 끝점 사이로 측정합니다.)의 최대 허용 비율입니다. 이것은 두 부분의 외곽선이 만나는 안쪽 점과 바깥쪽 점 사이 거리와, 선 두께의 최대 허용 비율과 같습니다. miter 값 모양이 아닌 bevel 값 모양으로 연결되는 지점의 최소 안쪽 각 반 만큼의 값과 같은 것입니다.</p> + +<ul> + <li><code>miterLimit</code> = <strong>max</strong> <code>miterLength</code> / <code>lineWidth</code> = 1 / <strong>sin</strong> ( <strong>min</strong> <em>θ</em> / 2 )</li> + <li>초기 설정값이 10.0인 뾰족함 제한(miter limit)값은 약 11도보다 낮은 예각인 곳을 bevel 값 모양으로 만듭니다.</li> + <li>뾰족함 제한 값이 √2 ≈ 1.4142136(반올림)과 같다면 연결되는 곳이 둔각이거나 직각인 곳을 제외한 모든 곳을 bevel 값 모양으로 만듭니다.</li> + <li>뾰족함 제한 값이 1.0과 같다면 모든 곳을 bevel 값 모양으로 만듭니다.</li> + <li>뾰족함 제한 값에는 1.0보다 작은 값이 올 수 없습니다.</li> +</ul> + +<p>다음 예제에서는 <code>miterLimit</code> 값을 바꾸고 그 결과가 어떤지 바로 확인할 수 있습니다. 파란색 선은 지그재그 무늬 안에서 선들의 시작 지점과 종료 지점을 나타냅니다.</p> + +<p>이 예제에서 <code>miterLimit</code> 값을 4.2보다 낮게 설정하면, 모든 연결 지점은 bevel 값 모양이 되어 파란색 선에 붙을 것입니다. <code>miterLimit</code> 값이 10보다 높다면, 거의 모든 연결 지점들이 파란색 선 바깥쪽에 있을 것입니다. 왼쪽으로 갈수록 파란색 선에서 더 많이 튀어나오는데, 왼쪽으로 갈수록 연결되는 각이 더 작아지기 때문입니다. 값을 5로 설정하면, 반은 bevel 값 모양으로, 반은 miter 값 모양이 됩니다.</p> + +<pre class="brush: js;highlight[18]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // 캔버스를 비운다 + ctx.clearRect(0,0,150,150); + + // 안내선을 그린다 + ctx.strokeStyle = '#09f'; + ctx.lineWidth = 2; + ctx.strokeRect(-5,50,160,50); + + // 선 스타일을 설정한다 + ctx.strokeStyle = '#000'; + ctx.lineWidth = 10; + + // 입력 값을 검사한다 + if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) { + ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value); + } else { + alert('Value must be a positive number'); + } + + // 선을 그린다 + ctx.beginPath(); + ctx.moveTo(0,100); + for (i=0;i<24;i++){ + var dy = i%2==0 ? 25 : -25 ; + ctx.lineTo(Math.pow(i,1.5)*2,75+dy); + } + ctx.stroke(); + return false; +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><table> + <tr> + <td><canvas id="canvas" width="150" height="150"></canvas></td> + <td>Change the <code>miterLimit</code> by entering a new value below and clicking the redraw button.<br><br> + <form onsubmit="return draw();"> + <label>Miter limit</label> + <input type="text" size="3" id="miterLimit"/> + <input type="submit" value="Redraw"/> + </form> + </td> + </tr> +</table></pre> + +<pre class="brush: js">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit; +draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}</p> + +<p> </p> + +<h3 id="대시라인_사용하기">대시라인 사용하기</h3> + +<p><code>setLineDash</code> 메소드와 <code>lineDashOffset</code> 속성은 선의 대시 패턴을 지정합니다. <code>setLineDash</code> 메소드는 거리를 지정하는 숫자 목록을 받아 선과 틈을 교대로 그리며 <code>lineDashOffset</code> 속성은 패턴을 시작할 위치를 오프셋으로 설정합니다.</p> + +<p>이 예제에서 우리는 행진하는 개미 효과를 만들고 있습니다. 컴퓨터 그래픽 프로그램의 선택 도구에서 흔히 볼 수있는 애니메이션 기술입니다. 테두리를 애니메이션화하여 사용자가 선택 테두리와 이미지 배경을 구별하는 데 도움이됩니다. 이 튜토리얼의 뒷부분에서 이 작업 및 다른 <a href="/ko/docs/docs/Web/API/Canvas_API/Tutorial/Basic_animations">기본 애니메이션</a>을 수행하는 방법을 배울 수 있습니다.</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="110" height="110"></canvas> +</pre> +</div> + +<pre class="brush: js;highlight[6]">var ctx = document.getElementById('canvas').getContext('2d'); +var offset = 0; + +function draw() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.setLineDash([4, 2]); + ctx.lineDashOffset = -offset; + ctx.strokeRect(10, 10, 100, 100); +} + +function march() { + offset++; + if (offset > 16) { + offset = 0; + } + draw(); + setTimeout(march, 20); +} + +march();</pre> + +<p>{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}</p> + +<h2 id="Gradients" name="Gradients">그라디언트(Gradient)</h2> + +<p>다른 그래픽 프로그램들과 마찬가지로, 선형 및 원형의 그레이디언트를 사용할 수 있습니다. 다음 메소드 중 하나를 사용하여 {{domxref("CanvasGradient")}} 객체를 생성합니다. 그런 다음 이 객체를 <code>fillStyle</code> 또는 <code>strokeStyle</code> 속성에 할당 할 수 있습니다.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}</dt> + <dd>시작점 좌표를 (<code>x1</code>, <code>y1</code>)로 하고, 종료점 좌표를 (<code>x2</code>, <code>y2</code>)로 하는 선형 그라디언트 오브젝트를 생성합니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}</dt> + <dd>반지름이 <code>r1</code>이고 좌표 (<code>x1</code>, <code>y1</code>)을 중심으로 하는 원과, 반지름이 <code>r2</code>이고 좌표 (<code>x2</code>, <code>y2</code>)를 중심으로 하는 원을 사용하여 그라디언트가 생성됩니다.</dd> +</dl> + +<p>예를 들면 다음과 같습니다.</p> + +<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); +var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100); +</pre> + +<p><code>CanvasGradient</code> 객체를 만들었다면, <code>addColorStop()</code> 메소드를 사용하여, 오브젝트에 색을 적용할 수 있습니다.</p> + +<dl> + <dt>{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}</dt> + <dd><code>gradient</code> 오브젝트에 새로운 색 중단점(color stop)을 생성합니다. <code>position</code>은 0.0에서 1.0 사이의 숫자이고 그라디언트에서 색상의 상대적인 위치를 정의합니다. <code>color</code> 인자는 CSS {{cssxref("<color>")}}를 나타내는 문자열이어야하고, 그라디언트가 (전환효과로) 진행되면서 도달한 지점의 색상을 의미합니다.</dd> +</dl> + +<p>색 중단점은 원하는 만큼 마음대로 추가할 수 있습니다. 흰 색에서 검은 색으로 변하는 선형 그레이디언트를 만들려면 아래와 같이 합니다.</p> + +<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); +lineargradient.addColorStop(0, 'white'); +lineargradient.addColorStop(1, 'black'); +</pre> + +<h3 id="A_createLinearGradient_example" name="A_createLinearGradient_example"><code>createLinearGradient</code> 예제</h3> + +<p>이 예제에서 그레이디언트 두 개를 만들 것입니다. 예제에서 볼 수 있듯이, <code>strokeStyle</code>과 <code>fillStyle</code> 속성 모두 <code>canvasGradient</code> 오브젝트를 속성 값으로 가질 수 있습니다.</p> + +<pre class="brush: js;highlight[5,11]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // 그레이디언트를 생성한다 + var lingrad = ctx.createLinearGradient(0, 0, 0, 150); + lingrad.addColorStop(0, '#00ABEB'); + lingrad.addColorStop(0.5, '#fff'); + lingrad.addColorStop(0.5, '#26C000'); + lingrad.addColorStop(1, '#fff'); + + var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95); + lingrad2.addColorStop(0.5, '#000'); + lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)'); + + // 외곽선과 채움 스타일에 그레이디언트를 적용한다 + ctx.fillStyle = lingrad; + ctx.strokeStyle = lingrad2; + + // 도형을 그린다 + ctx.fillRect(10, 10, 130, 130); + ctx.strokeRect(50, 50, 50, 50); + +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>첫번째 그라디언트는 배경 그라디언트입니다. 보시다시피 같은 위치에 두 가지 색상을 지정했습니다. 매우 선명한 색상 전환을 만들기 위해 이 작업을 수행합니다(이 경우 흰색에서 녹색으로). 일반적으로 색상 중단점을 정의하는 순서는 중요하지 않지만, 이 특별한 경우에는 의미가 있습니다.</p> + +<p>두 번째 그래디언트에서는 시작 색상 (위치 0.0)을 지정하지 않았는데, 자동으로 다음 색상 중단점의 색상으로 가정하기 때문에 반드시 필요하지는 않기 때문입니다. 따라서 위치 0.5에 검은색을 지정하면 시작부터 중단점까지 자동으로 검정색 그라이언트를 만듭니다.</p> + +<p>{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}</p> + +<h3 id="A_createRadialGradient_example" name="A_createRadialGradient_example"><code>createRadialGradient</code> 예제</h3> + +<p>이 예제에서는 원형 그레이디언트를 4개 만들 것입니다. 포토샵같은 프로그램에서 원형 그레이디언트를 만들 때는 하나의 점을 중심으로 그레이디언트를 만드는데, 캔버스의 원형 그레이디언트에서는 시작과 종료 지점 두군데를 제어할 수 있기 때문에, 기존의 프로그램에서 볼 수 있는 원형 그레이디언트보다는 더 복잡한 효과를 만들어 낼 수 있습니다.</p> + +<pre class="brush: js;highlight[5,10,15,20]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // 그라디언트를 생성한다 + var radgrad = ctx.createRadialGradient(45,45,10,52,50,30); + radgrad.addColorStop(0, '#A7D30C'); + radgrad.addColorStop(0.9, '#019F62'); + radgrad.addColorStop(1, 'rgba(1,159,98,0)'); + + var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50); + radgrad2.addColorStop(0, '#FF5F98'); + radgrad2.addColorStop(0.75, '#FF0188'); + radgrad2.addColorStop(1, 'rgba(255,1,136,0)'); + + var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40); + radgrad3.addColorStop(0, '#00C9FF'); + radgrad3.addColorStop(0.8, '#00B5E2'); + radgrad3.addColorStop(1, 'rgba(0,201,255,0)'); + + var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90); + radgrad4.addColorStop(0, '#F4F201'); + radgrad4.addColorStop(0.8, '#E4C700'); + radgrad4.addColorStop(1, 'rgba(228,199,0,0)'); + + // 도형을 그린다 + ctx.fillStyle = radgrad4; + ctx.fillRect(0,0,150,150); + ctx.fillStyle = radgrad3; + ctx.fillRect(0,0,150,150); + ctx.fillStyle = radgrad2; + ctx.fillRect(0,0,150,150); + ctx.fillStyle = radgrad; + ctx.fillRect(0,0,150,150); +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>이 예제에서는 원형 그레이디언트에 사용되는 두 원의 중심을 달리하여 입체적인 공처럼 보이게 했습니다. 안쪽 원과 바깥쪽 원은 겹치지 않게 하는 것이 좋습니다. 왜냐하면 예상하기 힘든 이상한 결과가 나타날 수 있기 때문입니다.</p> + +<p>그레이디언트의 마지막 색 적용 지점에서는 투명도를 적용하였습니다. 투명도가 적용된 지점에서 이전 지점까지의 색 변화를 보기 좋게 만들려면, 두 지점에 똑같은 색을 적용하면 되는데, 이 예제에서는 색의 값을 다른 방식으로 입력하여 헷갈릴 수도 있습니다. 첫번째 그레이디언트에 사용된 <code>#019F62</code>와 <code>rgba(1,159,98,1)</code>은 같은 색입니다.</p> + +<p>{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}</p> + +<h2 id="Patterns" name="Patterns">패턴(Patterns)</h2> + +<p>이전 페이지의 예제 중 하나에서 일련의 루프를 사용하여 이미지 패턴을 만들었습니다. 그러나 훨씬 간단한 메소드 인 createPattern () 메소드가 있습니다.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}</dt> + <dd>새 캔버스 패턴 객체를 만들어 반환합니다. <code>image</code>는 {{domxref("CanvasImageSource")}}(즉, {{domxref("HTMLImageElement")}}, 다른 캔버스, {{HTMLElement("video")}} 요소 등등)입니다. <code>type</code>은 이미지 사용 방법을 나타내는 문자열입니다.</dd> +</dl> + +<p><code>type</code>은 패턴을 만들기 위해 이미지를 사용하는 방법을 지정하며, 다음 문자열 값 중 하나 여야합니다.</p> + +<dl> + <dt><code>repeat</code></dt> + <dd>수직 및 수평 방향으로 이미지를 이어 붙입니다.</dd> + <dt><code>repeat-x</code></dt> + <dd>수평 방향으로만 이미지를 이어 붙입니다.</dd> + <dt><code>repeat-y</code></dt> + <dd>수직 방향으로만 이미지를 이어 붙입니다.</dd> + <dt><code>no-repeat</code></dt> + <dd>이미지를 이어 붙이지 않습니다. 이미지는 한번만 사용됩니다.</dd> +</dl> + +<p>이 메소드를 사용하여 위에서 본 그라디언트 메소드와 매우 유사한 {{domxref ( "CanvasPattern")}} 객체를 생성합니다. 패턴을 생성하면 <code>fillStyle</code> 또는 <code>strokeStyle</code> 속성에 패턴을 할당 할 수 있습니다. 예를 들면 다음과 같습니다.</p> + +<pre class="brush: js">var img = new Image(); +img.src = 'someimage.png'; +var ptrn = ctx.createPattern(img, 'repeat'); +</pre> + +<div class="note"> +<p><strong>참고:</strong> <code>drawImage ()</code> 메서드와 마찬가지로 이 메소드를 호출하기 전에 이미지가 로드되었는지 확인해야합니다. 그렇지 않으면 패턴이 잘못 그려 질 수 있습니다.</p> +</div> + +<h3 id="A_createPattern_example" name="A_createPattern_example"><code>createPattern</code> 예제</h3> + +<p>이 마지막 예제에서, <code>fillStyle</code> 속성에 적용할 패턴을 만들 것입니다. 한 가지 눈여겨 볼 것은, 이미지 <code>onload</code> 핸들러 사용한다는 것입니다. 이미지를 패턴에 적용하기 전에 불러오기가 완료되었는지 확인하는 것입니다.</p> + +<pre class="brush: js;highlight[10]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // 패턴으로 사용할 이미지 오브젝트를 생성한다 + var img = new Image(); + img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; + img.onload = function() { + + // 패턴을 생성한다 + var ptrn = ctx.createPattern(img,'repeat'); + ctx.fillStyle = ptrn; + ctx.fillRect(0,0,150,150); + + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> + +<p>The result looks like this:</p> +</div> + +<p>{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}</p> + +<h2 id="그림자">그림자</h2> + +<p>그림자 사용에는 네 개의 속성이 있습니다.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}</dt> + <dd>그림자가 객체에서 연장되어야하는 수평 거리를 나타냅니다. 이 값은 변환 행렬의 영향을 받지 않습니다. 기본값은 0입니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}</dt> + <dd>그림자가 객체에서 연장되어야하는 수직 거리를 나타냅니다. 이 값은 변환 행렬의 영향을 받지 않습니다. 기본값은 0입니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}</dt> + <dd>흐림(blur) 효과의 크기를 나타냅니다. 이 값은 픽셀 수와 일치하지 않으며 현재 변환 행렬의 영향을 받지 않습니다. 기본값은 0입니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}</dt> + <dd>그림자 효과의 색상을 나타내는 표준 CSS 색상 값. 기본적으로 완전 검은색입니다.</dd> +</dl> + +<p><code>shadowOffsetX</code> 및 <code>shadowOffsetY</code> 속성은 그림자가 X 및 Y 방향으로 객체에서 얼마나 멀리 떨어져야하는지 나타냅니다. 이 값은 현재 변환 행렬의 영향을받지 않습니다. 음수값을 사용하면 그림자가 위로 또는 왼쪽으로 확장되고 양수값을 사용하면 그림자가 아래로 또는 오른쪽으로 확장됩니다. 기본값은 모두 0입니다.</p> + +<p><code>shadowBlur</code> 속성은 흐림 효과의 크기를 나타냅니다. 이 값은 픽셀 수와 일치하지 않으며 현재 변환 행렬의 영향을받지 않습니다. 기본값은 0입니다.</p> + +<p><code>shadowColor</code> 속성은 그림자 효과의 색상을 나타내는 표준 CSS 색상 값입니다. 기본값은 완전 검은색입니다.</p> + +<div class="note"> +<p><strong>알아둘 것:</strong> 음영은 <code>source-over</code> <a href="/ko/docs/docs/Web/API/Canvas_API/Tutorial/Compositing">합성 작업</a>에만 사용됩니다.</p> +</div> + +<h3 id="그림자_있는_글자_예제">그림자 있는 글자 예제</h3> + +<p>이 예제에서는 그림자가 있는 글자를 그립니다.</p> + +<pre class="brush: js;highlight[4,5,6,7]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + ctx.shadowOffsetX = 2; + ctx.shadowOffsetY = 2; + ctx.shadowBlur = 2; + ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; + + ctx.font = "20px Times New Roman"; + ctx.fillStyle = "Black"; + ctx.fillText("Sample String", 5, 30); +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="80"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p> + +<p>다음 장에서 <a href="/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_text">텍스트 그리기</a>에 대한 <code>font</code> 속성과 <code>fillText</code> 메소드를 살펴 보겠습니다.</p> + +<h2 id="캔버스_채우기_규칙">캔버스 채우기 규칙</h2> + +<p><code>fill</code> (혹은 {{domxref("CanvasRenderingContext2D.clip", "clip")}} 및 {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}})을 사용할 때 한 점이 경로 안쪽 또는 바깥에 있는지 그리고 따라서 채워지는지 여부를 결정하기 위한 채우기 규칙 알고리즘을 선택적으로 제공 할 수 있습니다. 경로가 교차하거나 중첩 된 경우에 유용합니다.<br> + <br> + 다음 두가지 값을 사용할 수 있습니다:</p> + +<ul> + <li><code><strong>"nonzero</strong></code>": <a href="http://en.wikipedia.org/wiki/Nonzero-rule">non-zero winding rule</a> 알고리즘. 기본값.</li> + <li><code><strong>"evenodd"</strong></code>: <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd winding rule</a> 알고리즘.</li> +</ul> + +<p>In this example we are using the <code>evenodd</code> rule.</p> + +<pre class="brush: js;highlight[6]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.beginPath(); + ctx.arc(50, 50, 30, 0, Math.PI * 2, true); + ctx.arc(50, 50, 15, 0, Math.PI * 2, true); + ctx.fill('evenodd'); +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="100" height="100"></canvas></pre> + +<pre class="brush: js"><code>draw();</code></pre> +</div> + +<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}</p> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</p> diff --git a/files/ko/web/html/canvas/tutorial/basic_animations/index.html b/files/ko/web/html/canvas/tutorial/basic_animations/index.html new file mode 100644 index 0000000000..457d658172 --- /dev/null +++ b/files/ko/web/html/canvas/tutorial/basic_animations/index.html @@ -0,0 +1,310 @@ +--- +title: 기본 애니메이션 +slug: Web/HTML/Canvas/Tutorial/Basic_animations +tags: + - HTML5 + - 그래픽 + - 캔버스 +translation_of: Web/API/Canvas_API/Tutorial/Basic_animations +--- +<p>{{HTMLElement("canvas")}} 요소는 자바스크립트로 제어하는 것이므로, 애니메이션도 쉽게 만들 수 있습니다. 복잡한 애니메이션을 만드는 것은 추가 작업이 더 필요하고, 앞으로 그에 대한 페이지도 머지 않아 추가되기를 기대합니다.</p> +<p>도형은 한번 만들어 놓으면 그 모습 그대로 있다는 것이 애니메이션을 만들 때의 가장 큰 제약일 것입니다. 그 도형을 움직이고자 하면 그 도형뿐만이 아니라 그 도형이 그려지기 전에 그려진 모든 것을 다시 그려야 합니다. 복잡한 장면을 다시 그리는 것은 시간도 많이 걸리며, 코드를 실행하는 컴퓨터의 능력에 따라 달라집니다.</p> +<h2 id="Basic_animation_steps" name="Basic_animation_steps">기본 애니메이션 단계</h2> +<p>한 장면을 그리려면 아래와 같은 단계를 밟습니다.</p> +<ol> + <li><strong>캔버스를 비웁니다.</strong><br> + 그리려는 도형이 (배경 이미지를 만들 때처럼) 캔버스를 가득 채우는 것이 아니라면, 이전에 그려진 모든 도형을 지울 필요가 있습니다. 가장 쉬운 방법은 <code>clearRect()</code> 메소드를 사용하는 것입니다.</li> + <li><strong>캔버스 상태를 저장합니다.</strong><br> + 캔버스 상태에 영향을 주는 (스타일 변경, 모양 변형 등의) 설정값을 바꾸려고 하고, 바뀐 값을 각 장면마다 사용하려고 한다면, 원래 상태를 저장할 필요가 있습니다.</li> + <li><strong>애니메이션할 도형을 그립니다.</strong><br> + 실제 장면을 그리는 단계입니다.</li> + <li><strong>캔버스 상태를 복원합니다.</strong><br> + 새로운 장면을 그리기 전에 저장된 상태를 복원합니다.</li> +</ol> +<h2 id="Controlling_an_animation" name="Controlling_an_animation">애니메이션 제어하기</h2> +<p>캔버스 메소드를 사용하거나 사용자 함수를 사용하여 캔버스에 도형들을 그립니다. 보통의 경우에서는, 코드 실행이 완료되면 캔버스에 나타나는 결과만을 보게 됩니다. 예를 들어, <code>for</code> 반복문 안에서 애니메이션을 실행하는 것은 불가능합니다.</p> +<p>그래서 정해진 시간마다 그리기 함수를 실행하는 방법이 필요한 것입니다. 아래와 같이 애니메이션을 제어하는 두 가지 방법이 있습니다.</p> +<h3 id="예정된_변경">예정된 변경</h3> +<p>정해진 시간마다 특정 함수를 부를 때 사용할 수 있는 {{domxref("window.setInterval()")}}과 {{domxref("window.setTimeout()")}} 함수가 있습니다.</p> +<div class="note"> + <p>알아둘 것: 현재는 애니메이션을 만드는 방법으로 {{domxref("window.requestAnimationFrame()")}} 메소드를 추천합니다. 이에 대한 튜토리얼은 곧 업데이트할 것입니다.</p> +</div> +<dl> + <dt> + <code>setInterval(<em>function</em>, <em>delay</em>)</code></dt> + <dd> + <code>delay</code> 밀리세컨드(1,000분의 1초)마다 <code>function</code> 함수 반복 실행을 시작합니다.</dd> + <dt> + <code>setTimeout(<em>function</em>, <em>delay</em>)</code></dt> + <dd> + <code>delay</code> 밀리세컨드(1,000분의 1초) 경과후, <code>function</code> 함수를 실행합니다.</dd> +</dl> +<p>사용자의 제어를 <strong>필요로 하지 않는</strong> 반복 실행에는 <code>setInterval()</code> 함수가 알맞을 것입니다.</p> +<h3 id="사용자_상호_작용_변경">사용자 상호 작용 변경</h3> +<p>애니메이션을 제어하는 두번째 방법은 사용자 입력입니다. 게임을 만들려고 한다면, 애니메이션을 제어하기 위해 키보드나 마우스 이벤트를 사용할 수 있을 것입니다. {{domxref("EventListener")}}를 설정하여, 사용자와 상호 작용하여 애니메이션 함수를 실행합니다.</p> +<p>사용자 상호 작용이 <strong>필요하다면</strong>, 우리가 만든 <a href="/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons">애니메이션용 프레임웍(framework)</a>의 <a href="/en-US/docs/DOM/window.setInterval#A_little_framework" title="/en-US/docs/DOM/window.setInterval#A_little_framework">최소 기능 버전</a> 또는 <a href="/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons">최대 기능 버전</a>을 사용할 수 있을 것입니다.</p> +<pre>var myAnimation = new MiniDaemon(null, animateShape, 500, Infinity);</pre> +<p>또는</p> +<pre>var myAnimation = new Daemon(null, animateShape, 500, Infinity);</pre> +<p>아래 예제에서는, 애니메이션을 제어하기 위해 {{domxref("window.setInterval()")}}을 사용할 것입니다. 페이지 제일 아래쪽에 {{domxref("window.setTimeout()")}}을 사용한 예제 링크도 있습니다.</p> +<h4 id="태양계_애니메이션">태양계 애니메이션</h4> +<p>이 예제에서는 달이 지구를 돌고 지구가 태양을 도는 애니메이션을 만듭니다.</p> +<pre class="brush: js">var sun = new Image(); +var moon = new Image(); +var earth = new Image(); +function init(){ + sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png'; + moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png'; + earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png'; + setInterval(draw,100); +} + +function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + ctx.globalCompositeOperation = 'destination-over'; + ctx.clearRect(0,0,300,300); // 캔버스를 비운다 + + ctx.fillStyle = 'rgba(0,0,0,0.4)'; + ctx.strokeStyle = 'rgba(0,153,255,0.4)'; + ctx.save(); + ctx.translate(150,150); + + // 지구 + var time = new Date(); + ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() ); + ctx.translate(105,0); + ctx.fillRect(0,-12,50,24); // Shadow + ctx.drawImage(earth,-12,-12); + + // 달 + ctx.save(); + ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() ); + ctx.translate(0,28.5); + ctx.drawImage(moon,-3.5,-3.5); + ctx.restore(); + + ctx.restore(); + + ctx.beginPath(); + ctx.arc(150,150,105,0,Math.PI*2,false); // 지구 궤도 + ctx.stroke(); + + ctx.drawImage(sun,0,0,300,300); +} +</pre> +<div class="hidden"> + <pre class="brush: html"><canvas id="canvas" width="300" height="300"></canvas></pre> + <pre class="brush: js">init();</pre> +</div> +<p>{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}</p> +<h4 id="시계_애니메이션">시계 애니메이션</h4> +<p>이 예제에서는, 현재 시각을 보여주는 움직이는 시계를 만듭니다.</p> +<pre class="brush: js">function init(){ + clock(); + setInterval(clock,1000); +} + +function clock(){ + var now = new Date(); + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.save(); + ctx.clearRect(0,0,150,150); + ctx.translate(75,75); + ctx.scale(0.4,0.4); + ctx.rotate(-Math.PI/2); + ctx.strokeStyle = "black"; + ctx.fillStyle = "white"; + ctx.lineWidth = 8; + ctx.lineCap = "round"; + + // 시계판 - 시 + ctx.save(); + for (var i=0;i<12;i++){ + ctx.beginPath(); + ctx.rotate(Math.PI/6); + ctx.moveTo(100,0); + ctx.lineTo(120,0); + ctx.stroke(); + } + ctx.restore(); + + // 시계판 - 분 + ctx.save(); + ctx.lineWidth = 5; + for (i=0;i<60;i++){ + if (i%5!=0) { + ctx.beginPath(); + ctx.moveTo(117,0); + ctx.lineTo(120,0); + ctx.stroke(); + } + ctx.rotate(Math.PI/30); + } + ctx.restore(); + + var sec = now.getSeconds(); + var min = now.getMinutes(); + var hr = now.getHours(); + hr = hr>=12 ? hr-12 : hr; + + ctx.fillStyle = "black"; + + // 시간 표시 - 시 + ctx.save(); + ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec ) + ctx.lineWidth = 14; + ctx.beginPath(); + ctx.moveTo(-20,0); + ctx.lineTo(80,0); + ctx.stroke(); + ctx.restore(); + + // 시간 표시 - 분 + ctx.save(); + ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec ) + ctx.lineWidth = 10; + ctx.beginPath(); + ctx.moveTo(-28,0); + ctx.lineTo(112,0); + ctx.stroke(); + ctx.restore(); + + // 시간 표시 - 초 + ctx.save(); + ctx.rotate(sec * Math.PI/30); + ctx.strokeStyle = "#D40000"; + ctx.fillStyle = "#D40000"; + ctx.lineWidth = 6; + ctx.beginPath(); + ctx.moveTo(-30,0); + ctx.lineTo(83,0); + ctx.stroke(); + ctx.beginPath(); + ctx.arc(0,0,10,0,Math.PI*2,true); + ctx.fill(); + ctx.beginPath(); + ctx.arc(95,0,10,0,Math.PI*2,true); + ctx.stroke(); + ctx.fillStyle = "rgba(0,0,0,0)"; + ctx.arc(0,0,3,0,Math.PI*2,true); + ctx.fill(); + ctx.restore(); + + ctx.beginPath(); + ctx.lineWidth = 14; + ctx.strokeStyle = '#325FA2'; + ctx.arc(0,0,142,0,Math.PI*2,true); + ctx.stroke(); + + ctx.restore(); +}</pre> +<div class="hidden"> + <pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + <pre class="brush: js">init();</pre> +</div> +<p>{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}</p> +<h4 id="움직이는_파노라마_사진">움직이는 파노라마 사진</h4> +<p>이 예제에서는, 움직이는 파노라마 사진을 만듭니다. 사용할 그림은 위키피디어(Wikipedia)에서 구한 <a href="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg" title="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg">요세미티 국립공원</a>입니다. 캔버스보다 큰 그림을 사용할 수도 있습니다.</p> +<pre class="brush: js">var img = new Image(); + +// 변수 +// 스크롤될 이미지, 방향, 속도를 바꾸려면 변수값을 바꾼다. + +img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg'; +var CanvasXSize = 800; +var CanvasYSize = 200; +var speed = 30; // 값이 작을 수록 빨라진다 +var scale = 1.05; +var y = -4.5; // 수직 옵셋 + +// 주요 프로그램 + +var dx = 0.75; +var imgW; +var imgH; +var x = 0; +var clearX; +var clearY; +var ctx; + +img.onload = function() { + imgW = img.width*scale; + imgH = img.height*scale; + if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // 캔버스보다 큰 이미지 + if (imgW > CanvasXSize) { clearX = imgW; } // 캔버스보다 큰 이미지 + else { clearX = CanvasXSize; } + if (imgH > CanvasYSize) { clearY = imgH; } // 캔버스보다 큰 이미지 + else { clearY = CanvasYSize; } + // 캔버스 요소 얻기 + ctx = document.getElementById('canvas').getContext('2d'); + // 새로 그리기 속도 설정 + return setInterval(draw, speed); +} + +function draw() { + // 캔버스를 비운다 + ctx.clearRect(0,0,clearX,clearY); + // 이미지가 캔버스보다 작거나 같다면 (If image is <= Canvas Size) + if (imgW <= CanvasXSize) { + // 재설정, 처음부터 시작 + if (x > (CanvasXSize)) { x = 0; } + // 추가 이미지 그리기 + if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); } + } + // 이미지가 캔버스보다 크다면 (If image is > Canvas Size) + else { + // 재설정, 처음부터 시작 + if (x > (CanvasXSize)) { x = CanvasXSize-imgW; } + // 추가 이미지 그리기 + if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); } + } + // 이미지 그리기 + ctx.drawImage(img,x,y,imgW,imgH); + // 움직임 정도 + x += dx; +} +</pre> +<p>예제에 사용된 {{HTMLElement("canvas")}}의 크기는 아래와 같다. 캔버스의 너비가 변수 <code>CanvasXSize</code>값과 같고, 캔버스의 높이는 변수 <code>CanvasYSize</code>값과 같다는 것에 주목하라.</p> +<pre class="brush: html"><canvas id="canvas" width="800" height="200"></canvas></pre> +<p><strong>Live sample</strong></p> +<p>{{EmbedLiveSample("A_looping_panorama", "830", "230")}}</p> +<h2 id="Other_examples" name="Other_examples">또 다른 예제들</h2> +<dl> + <dt> + <a class="external" href="http://www.gartic.net/" title="http://www.gartic.net/">Gartic</a></dt> + <dd> + 다중 사용자 지원 그리기 놀이.</dd> + <dt> + <a class="external" href="http://www.abrahamjoffe.com.au/ben/canvascape/">Canvascape</a></dt> + <dd> + 3D 어드벤처 게임 (1인칭 슈팅).</dd> + <dt> + <a href="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster" title="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster">A basic ray-caster</a></dt> + <dd> + 키보드를 사용한 애니메이션 제어 방법에 대한 좋은 예제.</dd> + <dt> + <a class="external" href="http://andrewwooldridge.com/canvas/canvasgame001/canvasgame002.html">canvas adventure</a></dt> + <dd> + 키보드 제어를 사용하는 또다른 좋은 예제.</dd> + <dt> + <a class="external" href="http://www.blobsallad.se/">An interactive Blob</a></dt> + <dd> + 물방울 갖고 놀기.</dd> + <dt> + <a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Flying through a starfield</a></dt> + <dd> + 별, 동그라미, 네모가 떠다니는 우주를 누벼라.</dd> + <dt> + <a class="external" href="http://igrapher.com/" title="http://igrapher.com/">iGrapher</a></dt> + <dd> + 주식 시장 자료 차트 예제.</dd> +</dl> +<h2 id="이것도_보세요">이것도 보세요</h2> +<ul> + <li><a href="/en-US/docs/JavaScript/Timers" title="/en-US/docs/JavaScript/Timers">JavaScript timers</a></li> + <li><a href="/en-US/docs/DOM/window.setInterval#A_little_framework" title="/en-US/docs/DOM/window.setInterval#A_little_framework"><code>setInterval</code> – A little framework</a></li> + <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons">JavaScript Daemons Management</a></li> + <li><a href="/en-US/docs/DOM/HTMLCanvasElement" title="/en-US/docs/DOM/HTMLCanvasElement">HTMLCanvasElement</a></li> +</ul> +<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Compositing", "Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas")}}</p> diff --git a/files/ko/web/html/canvas/tutorial/basic_usage/index.html b/files/ko/web/html/canvas/tutorial/basic_usage/index.html new file mode 100644 index 0000000000..f455563e87 --- /dev/null +++ b/files/ko/web/html/canvas/tutorial/basic_usage/index.html @@ -0,0 +1,154 @@ +--- +title: 캔버스(Canvas) 기본 사용법 +slug: Web/HTML/Canvas/Tutorial/Basic_usage +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div> + +<div class="summary"> +<p>{{HTMLElement ( "canvas")}} {{Glossary ( "HTML")}} 엘리먼트를 살펴보는 것으로 이 튜토리얼을 시작해 보겠습니다. 이 페이지의 끝에서 캔버스 2D 컨텍스트를 설정하는 방법을 알게되고, 여러분의 브라우저에서 첫 번째 예제를 그리게 될 것입니다.</p> +</div> + +<h2 id="<canvas>_요소"><code><canvas></code> 요소</h2> + +<pre class="brush: html"><canvas id="tutorial" width="150" height="150"></canvas> +</pre> + +<p>{{HTMLElement ( "canvas")}}는 처음에는 src 및 alt 속성이 없다는 점만 제외하면 {{HTMLElement ( "img")}} 요소처럼 보입니다. 실제로 <code><canvas></code> 요소에는 {{htmlattrxref ( "width", "canvas")}}와 {{htmlattrxref ( "height", "canvas")}}의 두 속성만 있습니다. 이것들은 모두 선택사항이며 {{Glossary ( "DOM")}} <a href="ko/docs/Web/API/HTMLCanvasElement">프로퍼티</a>를 사용하여 설정할 수도 있습니다. width 및 height 속성을 지정하지 않으면 캔버스의 처음 너비는 <strong>300 픽셀</strong>이고 높이는 <strong>150 픽셀</strong>입니다. 요소는 {{Glossary ( "CSS")}}에 의해 임의로 크기를 정할 수 있지만 렌더링하는 동안 이미지는 레이아웃 크기에 맞게 크기가 조정됩니다. CSS 크기 지정이 초기 캔버스의 비율을 고려하지 않으면 왜곡되어 나타납니다 .</p> + +<div class="note"> +<p><strong>노트:</strong> 만약 렌더링이 왜곡된 것처럼 보이는 경우 CSS를 사용하지 않고 <code><canvas></code> 속성에서 <code>width</code> 및 <code>height</code> 속성을 명시적으로 지정하십시오.</p> +</div> + +<p> </p> + +<p><a href="/en-US/docs/Web/HTML/Global_attributes/id"><code>id</code></a> 속성(어트리뷰트)는 <code><canvas></code> 요소에 국한되지 않는 글로벌HTML 속성 (<a href="/en-US/docs/Web/HTML/Global_attributes">global HTML attributes</a> )중 하나로, 모든 HTML 요소에 적용 ( <code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code> 등등)될 수 있습니다. 대체로 항상 <code>id</code> 속성을 사용해 주는것이 좋은데, 이는 스크립트 내에서 구분을 쉽게 해 줄 수 있기 때문입니다.</p> + +<p><code><canvas></code>요소는 일반적인 이미지 ({{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("background")}}…) 처럼 스타일을 적용시킬 수 있습니다. 하지만 이 방법은 실제 캔버스 위에 그리는 것에는 영향을 끼치지 않습니다. 이 방법이 어떻게 사용되는지는 <a href="/ko/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">해당 챕터</a>에서 확인 할 수 있습니다. 캔버스에 스타일링이 따로 지정 되있지 않았다면, 캔버스 스타일은 투명으로 설정되어있습니다.</p> + +<div id="section_2"> +<h3 id="대체_콘텐츠">대체 콘텐츠</h3> + +<p><code><canvas></code> 요소는 {{HTMLElement("video")}}, {{HTMLElement("audio")}} 혹은 {{HTMLElement("picture")}}처럼 {{HTMLElement("img")}}와는 달리, 인터넷 익스플로러 9 이하의 버전이나 텍스트기반 브라우저 등과 같은, 캔버스를 지원하지 않는 오래된 브라우저들을 위한 대체 컨텐츠를 정의하기 쉽습니다. 여러분은 그러한 브라우저들을 위한 대체 컨텐츠를 제공해야 합니다.</p> + +<p>대체 컨텐츠를 제공하는 것은 매우 간단합니다. <code><canvas></code>태그 안에 대체 컨텐츠를 삽입합니다. <code><canvas></code>태그 를 지원하지 않는 브라우저는 컨테이너를 무시하고 컨테이너 내부의 대체 콘텐츠를 렌더링 합니다. <code><canvas></code>를 지원하는 브라우저는 컨테이너 내부의 내용을 무시하고 캔버스를 정상적으로 렌더링합니다.</p> + +<p>예를 들어, 캔버스 내용에 대한 텍스트 설명을 제공하거나 동적으로 렌더링 된 내용의 정적 이미지를 제공 할 수 있습니다. 이것은 다음과 같이 보일 수있습니다:</p> + +<pre class="brush: html"><canvas id="stockGraph" width="150" height="150"> + current stock price: $3.15 +0.15 +</canvas> + +<canvas id="clock" width="150" height="150"> + <img src="images/clock.png" width="150" height="150" alt=""/> +</canvas> +</pre> + +<p>사용자에게 캔버스를 지원하는 다른 브라우저를 사용하도록 하는 것은 캔버스를 해석하지 못하는 사용자에게 전혀 도움이 되지 않습니다. 유용한 대체 텍스트나 하위 DOM을 제공하는 것이 <a href="/ko/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">캔버스에 더 쉽게 접근할수 있도록</a> 도움이 될 것입니다.</p> + +<h3 id="<canvas>_태그_필수"><code></canvas></code> 태그 필수</h3> + +<p>대체 컨텐츠가 제공되는 방식때문에, {{HTMLElement("img")}} 요소와 달리, {{HTMLElement("canvas")}} 요소는 닫는 태그(<code></canvas></code>)가 필요합니다. 닫는 태그가 없다면, 문서의 나머지 부분이 대체 컨텐츠로 간주되고 보이지 않을 것입니다.</p> + +<p>대체 컨텐츠가 필요하지 않다면, 단순히 <code><canvas id="foo" ...></canvas></code>가 모든 미지원 브라우저에서 완전하게 호환됩니다.</p> + +<h2 id="렌더링_컨텍스트">렌더링 컨텍스트</h2> + +<p>{{HTMLElement("canvas")}} 엘리먼트는 고정 크기의 드로잉 영역을 생성하고 하나 이상의 <strong>렌더링 컨텍스(rendering contexts)</strong>를 노출하여, 출력할 컨텐츠를 생성하고 다루게 됩니다. 본 튜토리얼에서는, 2D 렌더링 컨텍스트를 집중적으로 다룹니다. 다른 컨텍스트는 다른 렌더링 타입을 제공합니다. 예를 들어, <a href="https://developer.mozilla.org/ko/docs/Web/WebGL">WebGL</a>은 <a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a> 을 기반으로 하는 3D 컨텍스트를 사용합니다.</p> + +<p>캔버스는 처음에 비어있습니다. 무언가를 표시하기 위해서, 어떤 스크립트가 랜더링 컨텍스트에 접근하여 그리도록 할 필요가 있습니다. {{HTMLElement("canvas")}} 요소는 {{domxref("HTMLCanvasElement.getContext", "getContext()")}} 메서드를 이용해서, 랜더링 컨텍스트와 (렌더링 컨텍스트의) 그리기 함수들을 사용할 수 있습니다. getContext() 메서드는 렌더링 컨텍스트 타입을 지정하는 하나의 파라메터를 가집니다. 본 튜토리얼에서 다루고 있는 2D 그래픽의 경우, {{domxref("CanvasRenderingContext2D")}}을 얻기위해 <code>"2d"</code>로 지정합니다.</p> + +<pre class="brush: js">var canvas = document.getElementById('tutorial'); +var ctx = canvas.getContext('2d'); +</pre> + +<p>첫 번째 줄의 스크립트는 {{domxref ( "document.getElementById()")}} 메서드를 호출하여 {{HTMLElement ( "canvas")}} 요소를 표시할 DOM을 검색합니다. 요소가 있으면 <code>getContext()</code> 메서드를 사용하여 드로잉 컨텍스트에 액세스 할 수 있습니다.</p> + +<div id="section_5"> +<h2 id="지원여부_검사">지원여부 검사</h2> + +<p>대체 콘텐츠는 {{HTMLElement ( "canvas")}}를 지원하지 않는 브라우저에 표시됩니다. 스크립트 역시 간단하게 <code>getContext()</code> 메소드의 존재 여부를 테스트함으로써 프로그래밍 방식으로 지원하는지를 확인할 수 있습니다. 위의 코드 예제는 다음과 같이 될 수 있습니다:</p> + +<pre class="brush: js">var canvas = document.getElementById('tutorial'); + +if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + // drawing code here +} else { + // canvas-unsupported code here +} +</pre> +</div> +</div> + +<h2 id="템플릿_뼈대">템플릿 뼈대</h2> + +<p>다음은 이후의 예제들에서 시작점으로 사용될 수 있는 가장 최소한의 템플릿입니다.</p> + +<div class="note"> +<p><strong>알아두기:</strong> HTML 내에 스크립트(script)를 사용하는것은 좋은 연습 방법이 아닙니다. 다음의 예시에서는 간결하게 나타내기 위해 사용 한 것입니다.</p> +</div> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>Canvas tutorial</title> + <script type="text/javascript"> + function draw(){ + var canvas = document.getElementById('tutorial'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + } + } + </script> + <style type="text/css"> + canvas { border: 1px solid black; } + </style> + </head> + <body onload="draw();"> + <canvas id="tutorial" width="150" height="150"></canvas> + </body> +</html> +</pre> + +<p>위 스크립트에 <code>draw()</code> 함수 문서가 호출되었는데, 이는 문서가 {{event("load")}} 이벤트를 수신하여 페이지 로딩이 완료될 때 한번 실행됩니다. 이 함수 혹은 이와 유사한 함수는, 페이지가 처음 로딩되는 한, {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}}, 혹은 또 다른 이벤트 핸들러 등을 이용하여 호출될 수 있습니다.</p> + +<p>다음은 템플릿이 실제로 어떻게 실행되는지를 보여줍니다. 보이는 바와 같이, 초기에 blank 로 보여집니다.</p> + +<p>{{EmbedLiveSample("A_skeleton_template", 160, 160)}}</p> + +<h2 id="기본_예제">기본 예제</h2> + +<p>먼저 두 개의 직사각형을 그린 간단한 예제를 보도록하겠습니다. 그 중 하나는 투명도(alpha transparency)를가집니다. 나중에 이 예제가 어떻게 작동하는지 자세히 살펴 보겠습니다.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <script type="application/javascript"> + function draw() { + var canvas = document.getElementById("canvas"); + if (canvas.getContext) { + var ctx = canvas.getContext("2d"); + + ctx.fillStyle = "rgb(200,0,0)"; + ctx.fillRect (10, 10, 50, 50); + + ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; + ctx.fillRect (30, 30, 50, 50); + } + } + </script> + </head> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> + +<p>이 예제는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("A_simple_example", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</p> diff --git a/files/ko/web/html/canvas/tutorial/compositing/example/index.html b/files/ko/web/html/canvas/tutorial/compositing/example/index.html new file mode 100644 index 0000000000..e3d74f5220 --- /dev/null +++ b/files/ko/web/html/canvas/tutorial/compositing/example/index.html @@ -0,0 +1,293 @@ +--- +title: 도형 합성 예제 +slug: Web/HTML/Canvas/Tutorial/Compositing/Example +tags: + - HTML5 + - 그래픽 + - 예제 + - 캔버스 +translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example +--- +<div>{{CanvasSidebar}}</div> + +<p>이 샘플 프로그램에서는 여러 가지 <a href="/en-US/docs/Web/API/CanvasRenderingContext2D.globalCompositeOperation">도형 합성 방법</a>을 보여줍니다. 출력은 다음과 같습니다:</p> + +<p>{{ EmbedLiveSample('도형_합성_예제', '100%', '7250', '', 'Web/HTML/Canvas/Tutorial/Compositing/Example') }}</p> + +<h2 id="도형_합성_예제">도형 합성 예제</h2> + +<p>다음 코드에서는 프로그램의 나머지 부분에서 사용할 전역 값을 설정합니다.</p> + +<pre class="brush: js">var canvas1 = document.createElement("canvas"); +var canvas2 = document.createElement("canvas"); +var gco = [ 'source-over','source-in','source-out','source-atop', + 'destination-over','destination-in','destination-out','destination-atop', + 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', + 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', + 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' + ].reverse(); +var gcoText = [ +'기본 설정으로, 새로운 도형이 원래 도형 위에 그려집니다.', +'새로운 도형이 원래 도형과 겹치는 부분에만 그려지며, 나머지는 투명하게 설정됩니다.', +'새로운 도형이 원래 도형과 겹치지 않는 부분에만 그려집니다.', +'새로운 도형이 원래 도형과 겹치는 부분에만 그려집니다.', +'새로운 도형이 원래 도형 아래에 그려집니다.', +'원래 도형 중 새로운 도형과 겹치는 부분이 유지되며, 나머지는 투명하게 설정됩니다.', +'원래 도형 중 새로운 도형과 겹치지 않는 부분이 유지됩니다.', +'원래 도형 중 새로운 도형과 겹치는 부분만 유지됩니다. 새로운 도형은 원래 도형 아래에 그려집니다.', +'두 도형이 겹치는 곳의 색상이 두 색상값을 합한 값으로 결정됩니다.', +'새로운 도형만 그려집니다.', +'두 도형이 겹치는 곳이 투명하게 변하며, 나머지는 평범하게 그려집니다.', +'위쪽 레이어의 픽셀값이 아래쪽 레이어의 해당하는 픽셀값과 곱해지며, 결과적으로 어두운 이미지가 생성됩니다.', +'픽셀값을 뒤집고 곱한 다음 도로 뒤집습니다. 결과적으로 밝은 이미지가 생성됩니다(multiply의 반대).', +'multiply와 screen의 조합입니다. 아래쪽 레이어의 어두운 부분은 더 어두워지고, 밝은 부분은 더 밝아집니다.', +'두 레이어 중 어두운 픽셀값을 취합니다.', +'두 레이어 중 밝은 픽셀값을 취합니다.', +'아래쪽 레이어의 픽셀값을 위쪽 레이어의 뒤집힌 픽셀값으로 나눕니다.', +'아래쪽 레이어의 뒤집힌 픽셀값을 위쪽 레이어의 픽셀값으로 나누고, 그 값을 도로 뒤집습니다.', +'overlay와 같이 multiply와 screen의 조합이지만, 위아래 레이어의 순서가 바뀐 상태입니다.', +'조금 더 부드러운 hard-light입니다. 완전한 검은색/흰색에서 무조건 완전한 검은색/흰색이 나오지 않습니다.', +'한쪽 레이어의 픽셀값에서 다른 쪽 레이어의 픽셀값을 뺍니다. 빼는 순서는 결과값이 양수가 나오는 순서입니다.', +'difference와 비슷하지만 대비가 덜합니다.', +'아래쪽 레이어의 채도(chroma)와 명도(luma)를 보존하고 위쪽 레이어의 색상(hue)을 적용합니다.', +'아래쪽 레이어의 색상과 명도를 보존하고 위쪽 레이어의 채도를 적용합니다.', +'아래쪽 레이어의 명도를 보존하고 위쪽 레이어의 색상과 채도를 적용합니다.', +'아래쪽 레이어의 색상과 채도를 보존하고 위쪽 레이어의 명도를 적용합니다.' + ].reverse(); +var width = 320; +var height = 340; +</pre> + +<h3 id="메인_프로그램">메인 프로그램</h3> + +<p>페이지를 불러오고 나면 다음 코드에서 예제를 준비하고 실행합니다:</p> + +<pre class="brush: js">window.onload = function() { + // lum in sRGB + var lum = { + r: 0.33, + g: 0.33, + b: 0.33 + }; + // 캔버스 크기 변경 + canvas1.width = width; + canvas1.height = height; + canvas2.width = width; + canvas2.height = height; + lightMix() + colorSphere(); + runComposite(); + return; +}; +</pre> + +<p>또한 다음 코드의 <code>runComposite()</code>가 여러 가지 작업을 처리하며, 어려운 부분은 보조 함수를 사용합니다.</p> + +<pre class="brush: js">function createCanvas() { + var canvas = document.createElement("canvas"); + canvas.style.background = "url("+op_8x8.data+")"; + canvas.style.border = "1px solid #000"; + canvas.style.margin = "5px"; + canvas.width = width/2; + canvas.height = height/2; + return canvas; +} + +function runComposite() { + var dl = document.createElement("dl"); + document.body.appendChild(dl); + while(gco.length) { + var pop = gco.pop(); + var dt = document.createElement("dt"); + dt.textContent = pop; + dl.appendChild(dt); + var dd = document.createElement("dd"); + var p = document.createElement("p"); + p.textContent = gcoText.pop(); + dd.appendChild(p); + + var canvasToDrawOn = createCanvas(); + var canvasToDrawFrom = createCanvas(); + var canvasToDrawResult = createCanvas(); + + var ctx = canvasToDrawResult.getContext('2d'); + ctx.clearRect(0, 0, width, height) + ctx.save(); + ctx.drawImage(canvas1, 0, 0, width/2, height/2); + ctx.globalCompositeOperation = pop; + ctx.drawImage(canvas2, 0, 0, width/2, height/2); + ctx.globalCompositeOperation = "source-over"; + ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillRect(0, height/2 - 20, width/2, 20); + ctx.fillStyle = "#FFF"; + ctx.font = "14px arial"; + ctx.fillText(pop, 5, height/2 - 5); + ctx.restore(); + + var ctx = canvasToDrawOn.getContext('2d'); + ctx.clearRect(0, 0, width, height) + ctx.save(); + ctx.drawImage(canvas1, 0, 0, width/2, height/2); + ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillRect(0, height/2 - 20, width/2, 20); + ctx.fillStyle = "#FFF"; + ctx.font = "14px arial"; + ctx.fillText('기존 도형', 5, height/2 - 5); + ctx.restore(); + + var ctx = canvasToDrawFrom.getContext('2d'); + ctx.clearRect(0, 0, width, height) + ctx.save(); + ctx.drawImage(canvas2, 0, 0, width/2, height/2); + ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillRect(0, height/2 - 20, width/2, 20); + ctx.fillStyle = "#FFF"; + ctx.font = "14px arial"; + ctx.fillText('새로운 도형', 5, height/2 - 5); + ctx.restore(); + + dd.appendChild(canvasToDrawOn); + dd.appendChild(canvasToDrawFrom); + dd.appendChild(canvasToDrawResult); + + dl.appendChild(dd); + } +}; +</pre> + +<h3 id="보조_함수">보조 함수</h3> + +<p>이 프로그램에서는 몇몇 보조 함수를 사용합니다.</p> + +<pre class="brush: js">var lightMix = function() { + var ctx = canvas2.getContext("2d"); + ctx.save(); + ctx.globalCompositeOperation = "lighter"; + ctx.beginPath(); + ctx.fillStyle = "rgba(255,0,0,1)"; + ctx.arc(100, 200, 100, Math.PI*2, 0, false); + ctx.fill() + ctx.beginPath(); + ctx.fillStyle = "rgba(0,0,255,1)"; + ctx.arc(220, 200, 100, Math.PI*2, 0, false); + ctx.fill() + ctx.beginPath(); + ctx.fillStyle = "rgba(0,255,0,1)"; + ctx.arc(160, 100, 100, Math.PI*2, 0, false); + ctx.fill(); + ctx.restore(); + ctx.beginPath(); + ctx.fillStyle = "#f00"; + ctx.fillRect(0,0,30,30) + ctx.fill(); +}; +</pre> + +<pre class="brush: js">var colorSphere = function(element) { + var ctx = canvas1.getContext("2d"); + var width = 360; + var halfWidth = width / 2; + var rotate = (1 / 360) * Math.PI * 2; // per degree + var offset = 0; // scrollbar offset + var oleft = -20; + var otop = -20; + for (var n = 0; n <= 359; n ++) { + var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth); + var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 }); + gradient.addColorStop(0, "rgba(0,0,0,0)"); + gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)"); + gradient.addColorStop(1, "rgba(255,255,255,1)"); + ctx.beginPath(); + ctx.moveTo(oleft + halfWidth, otop); + ctx.lineTo(oleft + halfWidth, otop + halfWidth); + ctx.lineTo(oleft + halfWidth + 6, otop); + ctx.fillStyle = gradient; + ctx.fill(); + ctx.translate(oleft + halfWidth, otop + halfWidth); + ctx.rotate(rotate); + ctx.translate(-(oleft + halfWidth), -(otop + halfWidth)); + } + ctx.beginPath(); + ctx.fillStyle = "#00f"; + ctx.fillRect(15,15,30,30) + ctx.fill(); + return ctx.canvas; +}; +</pre> + +<pre class="brush: js">// HSV (1978) = H: Hue / S: Saturation / V: Value +Color = {}; +Color.HSV_RGB = function (o) { + var H = o.H / 360, + S = o.S / 100, + V = o.V / 100, + R, G, B; + var A, B, C, D; + if (S == 0) { + R = G = B = Math.round(V * 255); + } else { + if (H >= 1) H = 0; + H = 6 * H; + D = H - Math.floor(H); + A = Math.round(255 * V * (1 - S)); + B = Math.round(255 * V * (1 - (S * D))); + C = Math.round(255 * V * (1 - (S * (1 - D)))); + V = Math.round(255 * V); + switch (Math.floor(H)) { + case 0: + R = V; + G = C; + B = A; + break; + case 1: + R = B; + G = V; + B = A; + break; + case 2: + R = A; + G = V; + B = C; + break; + case 3: + R = A; + G = B; + B = V; + break; + case 4: + R = C; + G = A; + B = V; + break; + case 5: + R = V; + G = A; + B = B; + break; + } + } + return { + R: R, + G: G, + B: B + }; +}; + +var createInterlace = function (size, color1, color2) { + var proto = document.createElement("canvas").getContext("2d"); + proto.canvas.width = size * 2; + proto.canvas.height = size * 2; + proto.fillStyle = color1; // top-left + proto.fillRect(0, 0, size, size); + proto.fillStyle = color2; // top-right + proto.fillRect(size, 0, size, size); + proto.fillStyle = color2; // bottom-left + proto.fillRect(0, size, size, size); + proto.fillStyle = color1; // bottom-right + proto.fillRect(size, size, size, size); + var pattern = proto.createPattern(proto.canvas, "repeat"); + pattern.data = proto.canvas.toDataURL(); + return pattern; +}; + +var op_8x8 = createInterlace(8, "#FFF", "#eee");</pre> diff --git a/files/ko/web/html/canvas/tutorial/compositing/index.html b/files/ko/web/html/canvas/tutorial/compositing/index.html new file mode 100644 index 0000000000..108c493d9d --- /dev/null +++ b/files/ko/web/html/canvas/tutorial/compositing/index.html @@ -0,0 +1,106 @@ +--- +title: 도형 합성 +slug: Web/HTML/Canvas/Tutorial/Compositing +tags: + - HTML5 + - 그래픽 + - 캔버스 +translation_of: Web/API/Canvas_API/Tutorial/Compositing +--- +<p>이전 페이지들에서 나온 모든 예제에서, 새로 그리는 도형은 언제나 이미 그려진 도형의 위에 그려졌습니다. 대부분의 상황에서는 이렇게 하는 것이 적절하지만, 도형을 합성하기 위한 순서를 제한하게 되는데, <code>globalCompositeOperation</code> 속성을 설정함으로써 이러한 상태를 바꿀 수 있습니다.</p> + +<h2 id="globalCompositeOperation" name="globalCompositeOperation"><code>globalCompositeOperation</code></h2> + +<p>기존 도형 뒤에 새로운 도형을 그릴 수 있을 뿐만 아니라, 도형의 일정 영역을 가려 보이지 않게 하거나 캔버스의 특정 부분을 지우는 (<code>clearRect()</code> 메소드는 사각형의 영역만을 지우지만, 이같은 제한도 없다.) 등의 효과를 얻을 수도 있습니다.</p> + +<dl> + <dt><code>globalCompositeOperation = <em>type</em></code></dt> + <dd>새로운 도형을 그릴 때, 도형 합성 방법을 설정합니다. type은 다음 26종류의 합성 방법 중에서 선택할 수 있습니다.</dd> +</dl> + +<p>다음 예제의 코드를 확인하려면 <a href="/ko/docs/Web/HTML/Canvas/Tutorial/Compositing/Example">도형 합성 예제</a>를 확인해 주세요.</p> + +<p>{{ EmbedLiveSample('도형_합성_예제', 750, 6750, '', 'Web/HTML/Canvas/Tutorial/Compositing/Example') }}</p> + +<h2 id="Clipping_paths" name="Clipping_paths">잘라내기 경로(Clipping path)</h2> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;"> 잘라내기 경로는 다른 캔버스 도형과 비슷하지만, 다른 도형에서 원하지 않는 부분을 가리는 가면과 같은 역할을 합니다. 오른쪽에 있는 그림을 보면 어떤 역할을 하는지 알 수 있을 것입니다. 붉은 별 모양이 잘라내기 경로입니다. 이 경로 밖에 있는 모든 것은 캔버스에 그려지지 않을 것입니다.</p> + +<p>잘라내기 경로와 위에서 살펴본 <code>globalCompositeOperation</code> 속성을 비교해 보면, <code>source-in</code>과 <code>source-atop</code>에서 비슷한 효과가 보입니다. 이들과 잘라내기 경로와의 가장 중요한 차이점은, 잘라내기 경로 자체는 캔버스에 전혀 그려지지 않는다는 것입니다. 잘라내기 경로는 제한된 영역 안에서 여러 가지 도형을 그리는 데에 적합합니다.</p> + +<p><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes#Drawing_paths" title="Web/Guide/HTML/Canvas_tutorial/Drawing_shapes#Drawing_paths">캔버스에 도형 그리기</a>에서는 <code>stroke()</code>과 <code>fill()</code> 메소드만을 설명했었는데, <code>clip()</code>이라는 세 번째 메소드도 있습니다.</p> + +<dl> + <dt><code>clip()</code></dt> + <dd>현재 그려지는 경로를 현재 잘라내기 경로로 만듭니다.</dd> +</dl> + +<p>경로를 닫기 위해 <code>closePath()</code> 대신 <code>clip()</code>을 사용하고, 경로를 채우거나 윤곽선을 만드는 대신 잘라내기 경로로 만들 수 있습니다.</p> + +<p>{{HTMLElement("canvas")}} 요소의 초기 설정값으로써, 캔버스는 캔버스와 똑같은 크기의 잘라내기 경로를 가집니다. 크기가 똑같기 때문에 잘라내기 효과는 나타나지 않습니다.</p> + +<h3 id="A_clip_example" name="A_clip_example"><code>clip</code> 예제</h3> + +<p>다음 예제에서는 특정 영역의 별들만 보이도록 동그란 모양의 잘라내기 경로를 사용할 것입니다.</p> + +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.fillRect(0,0,150,150); + ctx.translate(75,75); + + // 동그란 모양의 잘라내기 경로를 생성한다 + ctx.beginPath(); + ctx.arc(0,0,60,0,Math.PI*2,true); + ctx.clip(); + + // 배경을 그린다 + var lingrad = ctx.createLinearGradient(0,-75,0,75); + lingrad.addColorStop(0, '#232256'); + lingrad.addColorStop(1, '#143778'); + + ctx.fillStyle = lingrad; + ctx.fillRect(-75,-75,150,150); + + // 별을 그린다 + for (var j=1;j<50;j++){ + ctx.save(); + ctx.fillStyle = '#fff'; + ctx.translate(75-Math.floor(Math.random()*150), + 75-Math.floor(Math.random()*150)); + drawStar(ctx,Math.floor(Math.random()*4)+2); + ctx.restore(); + } + +} + +function drawStar(ctx,r){ + ctx.save(); + ctx.beginPath() + ctx.moveTo(r,0); + for (var i=0;i<9;i++){ + ctx.rotate(Math.PI/5); + if(i%2 == 0) { + ctx.lineTo((r/0.525731)*0.200811,0); + } else { + ctx.lineTo(r,0); + } + } + ctx.closePath(); + ctx.fill(); + ctx.restore(); +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>코드의 위쪽 몇 줄에서는 배경으로 캔버스 크기와 같은 검은색 네모를 그리고, 가운데로 원점을 옮깁니다. 그런 다음 호를 그리고 <code>clip()</code>을 사용하여 동그란 모양의 잘라내기 경로를 생성합니다. 캔버스 상태를 저장할 때 잘라내기 경로도 같이 저장됩니다. 이전의 잘라내기 경로를 보존하려면, 새로운 잘라내기 경로를 만들기 전에 캔버스 상태를 저장하면 됩니다.</p> + +<p>잘라내기 경로를 만든 후에 그려지는 모든 것들은, 그 경로의 안쪽에서만 보입니다. 이는 그 다음에 그려지는 선형 그라디언트에서 확실히 볼 수 있습니다. 이렇게 하고 나서, <code>drawStar()</code> 함수를 사용하여 위치와 크기가 모두 다른 50개의 별을 그립니다. 이 별들은 잘라내기 경로 안쪽에만 나타납니다.</p> + +<p>{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}</p> + +<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Transformations", "Web/Guide/HTML/Canvas_tutorial/Basic_animations")}}</p> diff --git a/files/ko/web/html/canvas/tutorial/drawing_shapes/index.html b/files/ko/web/html/canvas/tutorial/drawing_shapes/index.html new file mode 100644 index 0000000000..09df4b829d --- /dev/null +++ b/files/ko/web/html/canvas/tutorial/drawing_shapes/index.html @@ -0,0 +1,577 @@ +--- +title: 캔버스(canvas)를 이용한 도형 그리기 +slug: Web/HTML/Canvas/Tutorial/Drawing_shapes +tags: + - Canvas + - 그래픽 + - 중급 + - 캔버스 + - 튜토리얼 +translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div> + +<div class="summary"> +<p>앞서 캔버스 환경 설정(<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage">canvas environment</a>)을 완료 하였다면, 이제 어떻게 캔버스에 그릴수 있는지에 대하여 자세하게 알아봅시다. 이 글을 끝내고 난 후, 여러분은 어떻게 사각형, 삼각형, 선, 아치, 곡선 등 의 기본적인 도형을 그릴수 있는지 익히실 수 있을 것 입니다. 캔버스 위에 물체를 그릴 때에는 path를 사용하는것이 필수적이므로 우리는 이것이 어떻게 사용되는지 볼 것입니다.</p> +</div> + +<h2 id="그리드">그리드</h2> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">드로잉을 시작 하기에 앞서, 캔버스 그리드 혹은 좌표공간 (<strong>coordinate space) </strong>에 대하여 이야기 해보겠습니다. 이전 페이지에서 이야기 했던 HTML 골격(skeleton)는 가로 세로 각각 150 픽셀의 캔버스 요소를 가지고 있습니다. 오른쪽에 보시면, 캔버스와 기본 그리드가 놓인것을 보실 수 있습니다. 기본적으로 그리드의 1단위는 캔버스의 1픽셀과 같습니다. 이 그리드의 원점은 좌측상단의 (0,0) 입니다. 모든 요소들은 이 원점을 기준으로 위치됩니다. 그렇기 때문에, 파란 사각형의 좌측상단은 왼쪽에서 x 픽셀, 위에서 y 픽셀 떨어진 것이라 볼 수 있고, 이 사각형의 좌표는 (x,y)가 됩니다. 이 튜토리얼 후반부에서 어떻게 원점을 이동하며, 그리드를 회전하고 같은 비율로 확대/축소할 수 있는지 살펴볼 것이지만, 지금은 기본에 충실하도록 합시다.</p> + +<h2 id="직사각형_그리기">직사각형 그리기</h2> + +<p>{{Glossary("SVG")}} 와는 다르게, {{HTMLElement("canvas")}}는 오직 하나의 원시적인 도형만을 제공합니다. 바로 <u>직사각형</u> 입니다. 다른 모든 도형들은 무조건 하나 혹은 하나 이상의 path 와 여러 점으로 이어진 선으로 만들어집니다. 다행히도, 우리는 여러 path drawing 함수(function)들을 통해 아주 어려운 도형들도 그릴수 있습니다.</p> + +<p>첫번째로, 직사각형을 봅시다. 캔버스 위에 직사각형을 그리는데에는 세가지 함수(function)가 있습니다:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}</dt> + <dd>색칠된 직사각형을 그립니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}</dt> + <dd>직사각형 윤곽선을 그립니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}</dt> + <dd>특정 부분을 지우는 직사각형이며, 이 지워진 부분은 완전히 투명해집니다.</dd> +</dl> + +<p>각각의 세 함수는 모두 같은 변수를 가집니다. <code>x</code>와 <code>y</code>는 캔버스의 좌측상단에서 사각형의 (원점으로부터 상대적인) 위치를 뜻하며, <code>width</code> 와 <code>height</code>는 사각형의 크기를 뜻하게 됩니다.</p> + +<p>전 페이지에서 보여드렸던 <code>draw()</code> 함수(function)를 이용하여 위의 세가지 함수를 아래의 예제에 적용해 보았습니다.</p> + +<h3 id="직사각형_도형_예제">직사각형 도형 예제</h3> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.fillRect(25, 25, 100, 100); + ctx.clearRect(45, 45, 60, 60); + ctx.strokeRect(50, 50, 50, 50); + } +}</pre> + +<p>위 예제의 결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p> + +<p><code>fillRect()</code> 함수는 가로 세로 100 픽셀 사이즈의 검정 사각형을 그립니다. 이후 <code>clearRect()</code> 함수가 60x60 픽셀의 사각형 크기로 도형 중앙을 지우게 되고, <code>strokeRect()</code>은 이 빈 사각형 공간 안에 50x50 픽셀 사이즈의 윤곽선만 있는 사각형을 만들게 됩니다.</p> + +<p>다음 페이지에서, 우리는 <code>clearRect()</code>를 대신하는 두개의 함수에 대해 살펴보고, 만들어진 도형의 색이나 <font face="Open Sans, Arial, sans-serif">윤곽선의 스타일을 </font>바꾸는 방법들에 대하여 알아보도록 하겠습니다.</p> + +<p>우리가 다음 섹션에서 보게될 path 함수와 다르게 세개의 직사각형 함수는 캔버스에 바로 그릴 수 있습니다.</p> + +<h2 id="경로_그리기">경로 그리기</h2> + +<p><em>경로(path)</em>는 직사각형 이외의 유일한 원시적인(primitive) 도형입니다. 경로는 점들의 집합이며, 선의 한 부분으로 연결되어 여러가지 도형, 곡선을 이루고 두께와 색을 나타내게 됩니다. 경로나 하위 경로(sub-path)는 닫힐 수 있습니다. 경로를 이용하여 도형을 만들 때에는 몇가지 추가적인 단계를 거쳐야 합니다:</p> + +<ol> + <li>경로를 생성합니다.</li> + <li><a href="/ko/docs/Web/API/CanvasRenderingContext2D#Paths">그리기 명령어</a>를 사용하여 경로상에 그립니다.</li> + <li>경로가 한번 만들어졌다면, 경로를 렌더링 하기 위해서 윤곽선을 그리거나 도형 내부를 채울수 있습니다.</li> +</ol> + +<p>다음은 위의 단계들을 실행하기 위해 사용되는 함수입니다:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}</dt> + <dd>새로운 경로를 만듭니다. 경로가 생성됬다면, 이후 그리기 명령들은 경로를 구성하고 만드는데 사용하게 됩니다.</dd> + <dt>Path 메소드 (<a href="/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">Path methods</a>)</dt> + <dd>물체를 구성할 때 필요한 여러 경로를 설정하는데 사용하는 함수입니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}</dt> + <dd>현재 하위 경로의 시작 부분과 연결된 직선을 추가합니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}</dt> + <dd>윤곽선을 이용하여 도형을 그립니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.fill", "fill()")}}</dt> + <dd>경로의 내부를 채워서 내부가 채워진 도형을 그립니다.</dd> +</dl> + +<p>경로를 만들기 위한 첫번째 단계는 <code>beginPath()</code> 메소드를 사용하는 것 입니다. 내부적으로, 경로는 도형을 이루는 하위경로(선, 아치 등)들의 집합으로 이루어져있습니다. 이 메소드가 호출될 때 마다, 하위 경로의 모음은 초기화되며, 우리는 새로운 도형을 그릴 수 있게 됩니다.</p> + +<div class="note"><strong>참고:</strong> 현재 열린 path가 비어있는 경우 ( <code>beginPath()</code> 메소드를 사용한 직 후, 혹은캔버스를 새로 생성한 직후), 첫 경로 생성 명령은 실제 동작에 상관 없이 <code>moveTo()</code>로 여겨지게 됩니다. 그렇기 때문에 경로를 초기화한 직후에는 항상 명확하게 시작 위치를 설정해 두는것이 좋습니다.</div> + +<p>두번째 단계는 실제로 경로가 그려지는 위치를 설정하는 메소드를 호출하는 것 입니다. 이 내용에 대해서는 곧 보실수 있습니다.</p> + +<p>세번째 단계는 선택사항으로 <code>closePath()</code> 메소드를 호출하는 것 입니다. 이 메소드는 현재 점 위치와 시작점 위치를 직선으로 이어서 도형을 닫습니다. 이미 도형이 닫혔거나 한 점만 존재한다면, 이 메소드는 아무것도 하지 않습니다.</p> + +<div class="note"><strong>참고:</strong> <code>fill()</code> 메소드 호출 시, 열린 도형은 자동으로 닫히게 되므로 <code>closePath()</code>메소드를 호출하지 않아도 됩니다. 이것은 <code>stroke()</code> 메소드에는 <strong>적용되지 않습니다</strong>.</div> + +<h3 id="삼각형_그리기">삼각형 그리기</h3> + +<p>예를 들어, 삼각형을 그리기 위한 코드는 다음과 같습니다:</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="100" height="100"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.beginPath(); + ctx.moveTo(75, 50); + ctx.lineTo(100, 75); + ctx.lineTo(100, 25); + ctx.fill(); + } +} +</pre> + +<p>위 코드의 실행 결과는 다음과 같습니다:</p> + +<p>{{EmbedLiveSample("Drawing_a_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}</p> + +<h3 id="펜(pen)_이동하기">펜(pen) 이동하기</h3> + +<p>가장 유용한 함수중에 실제로 어떤 것도 그리지 않지만 위에서 언급한 경로의 일부가 되는 <code>moveTo()</code> 함수가 있습니다. 이는 펜이나 연필을 종이위에서 들어 옆으로 옮기는것이라고 보시면 됩니다.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}</dt> + <dd>펜을 x와 y 로 지정된 좌표로 옮깁니다.</dd> +</dl> + +<p>캔버스가 초기화 되었거나 <code>beginPath()</code> 메소드가 호출되었을 때, 특정 시작점 설정을 위해 <code>moveTo()</code> 함수를 사용하는것이 좋습니다. 또한 <code>moveTo()</code> 함수는 연결되지 않은 경로를 그리는데에도 사용 할 수 있습니다. 아래의 스마일 아이콘을 봅시다.</p> + +<p>코드 snippet을 사용해하여 직접 시도하여 보세요. 앞에서 보았던 <code>draw()</code> 함수(function)를 붙혀넣기 해 보세요.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight:[8,10,12]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.beginPath(); + ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle + ctx.moveTo(110, 75); + ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise) + ctx.moveTo(65, 65); + ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye + ctx.moveTo(95, 65); + ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye + ctx.stroke(); + } +} +</pre> + +<p>결과는 다음과 같습니다:</p> + +<p>{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p> + +<p> <code>moveTo()</code>를 사용한 코드라인을 지우면 연결된 선들을 확인 할 수 있습니다</p> + +<div class="note"> +<p><strong>참고:</strong> <code>arc()</code> function에 대하여 더 알아보고 싶다면 아래의 {{anch("Arcs")}} 를 확인하세요.</p> +</div> + +<h3 id="선">선</h3> + +<p>직선을 그리기 위해서는 <code>lineTo()</code> 메소드를 사용할 수 있습니다.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}</dt> + <dd>현재의 드로잉 위치에서 x와 y로 지정된 위치까지 선을 그립니다.</dd> +</dl> + +<p>이 메소드는 선의 끝점의 좌표가 되는 x와 y의 두개의 인자가 필요합니다. 시작점은 이전에 그려진 경로에 의해 결정 되며, 이전 경로의 끝점이 다음 그려지는 경로의 시작점이 됩니다. 또한 시작점은 <code>moveTo()</code> 메소드를 통해 변경될 수 있습니다.</p> + +<p>아래의 예시는 하나의 두 삼각형 (윤곽선 삼각형, 색칠된 삼각형)을 그립니다.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[9,10,16,17]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + // Filled triangle + ctx.beginPath(); + ctx.moveTo(25, 25); + ctx.lineTo(105, 25); + ctx.lineTo(25, 105); + ctx.fill(); + + // Stroked triangle + ctx.beginPath(); + ctx.moveTo(125, 125); + ctx.lineTo(125, 45); + ctx.lineTo(45, 125); + ctx.closePath(); + ctx.stroke(); + } +} +</pre> + +<p>새로운 경로를 지정하기 위해 <code>beginPath()</code> 메소드를 먼저 실행합니다. 그 다음 <code>moveTo()</code> 메소드를 가지고 시작점을 원하는 위치로 새롭게 지정 해 줍니다. 다음은, 두선을 그어 삼각형의 두 면을 그려줍니다.</p> + +<p>{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p> + +<p>여러분은 채워진 삼각형과 윤곽선 삼각형의 차이를 확인 하셨을 겁니다. 위에 언급했던 것 처럼, 경로가 채워지게 되면 그 도형은 자동으로 닫히게 되지만 윤곽선 삼각형에서는 그렇지 않기 때문입니다. 만약에 <code>closePath()</code> 메소드를 윤곽선 삼각형 코드에서 지운다면, 오직 두 선만 그려지게 되며 완벽한 삼각형으로 만들어지지 않습니다.</p> + +<h3 id="호(arc)">호(arc)</h3> + +<p>호나 원을 그리기위해서는 <code>arc()</code> 혹은 <code>arcTo()</code> 메소드를 사용합니다..</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}</dt> + <dd><em>(x, y)</em> 위치에 원점을 두면서, 반지름 r을 가지고, <em>startAngle</em> 에서 시작하여 <em>endAngle </em>에서 끝나며 주어진 <em>anticlockwise</em> 방향으로 향하는 (기본값은 시계방향 회전) 호를 그리게 됩니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}</dt> + <dd>주어진 제어점들과 반지름으로 호를 그리고, 이전 점과 직선으로 연결합니다.</dd> +</dl> + +<p><code>arc</code> 메소드의 여섯개의 매개변수에 대하여 좀 더 자세하게 알아봅시다: <code>x</code> 와 <code>y</code>는 호를 그릴 때 필요한 원점 좌표입니다. 반지름(<code>radius</code>) 은 말 그대로 호의 반지름을 뜻합니다. <code>startAngle</code> 및 <code>endAngle</code> 매개 변수는 원의 커브를 따라 호의 시작점과 끝점을 라디안 단위로 정의합니다. 이 변수들은 x축을 기준으로 계산됩니다. Boolean 값을 가지는 <code>anticlockwise</code> 변수는 <code>true</code>일 때 호를 반시계 방향으로 그리게 되며, 그렇지 않을 경우에는 시계 방향으로 그리게 됩니다.</p> + +<div class="note"> +<p><strong>참고</strong>: <code>arc</code> 함수에서 각도는 각이 아닌 라디안 값을 사용합니다. 각도를 라디안으로 바꾸려면 다음의 자바스크립트(JavaScript) 코드를 사용하실 수 있습니다: <code>radians = (Math.PI/180)*degrees</code>.</p> +</div> + +<p>다음의 예제는 우리가 이제껏 봐 왔던 예제들 보다 약간 더 복잡합니다. 이 예제는 12가지의 다양한 각도로 채워진 각기 다른 호를 그립니다.</p> + +<p>두개의 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for"><code>for</code> loops</a>은 루프를 통해 호(arc)들의 행과 열을 읽기 위해 사용되었습니다. <code>beginPath()</code>를 사용해 각 호의 새로운 경로를 만듭니다. 코드 내에서, 각각의 매개변수들을 명확하게 보여주기 위해 변수로 정의 하였지만, 실제로 사용할때 꼭 필요한 것은 아닙니다.</p> + +<p><code>x</code>와 <code>y</code> 좌표는 충분히 명확하게 표기되어야 합니다. <code>radius</code> 와 <code>startAngle</code>은 고정되어 있습니다. <code>endAngle</code>는 처음 180도 (반원) 에서 시작하고 이후 매번 90도씩 증가하다가 마지막 열에서 완벽한 원을 그립니다.</p> + +<p><code>clockwise</code> 매개 변수를 지정한 결과로 첫번째와 세번째 줄은 시계방향으로 원호들이 그려졌고 두번째와 네번째 줄에는 반시계방향의 원호들이 그려졌습니다. 마지막으로 <code>if</code> 문은 위 반쪽이 윤곽선으로, 아래 반쪽이 색으로 채워진 호들을 만들어 냅니다.</p> + +<div class="note"> +<p><strong>참고:</strong> 이 예제는 다른 예제들 보다 더 큰사이즈의 캔버스가 필요합니다: 150 x 200 픽셀</p> +</div> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="200"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[16]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + for (var i = 0; i < 4; i++) { + for (var j = 0; j < 3; j++) { + ctx.beginPath(); + var x = 25 + j * 50; // x coordinate + var y = 25 + i * 50; // y coordinate + var radius = 20; // Arc radius + var startAngle = 0; // Starting point on circle + var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle + var anticlockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise + + ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); + + if (i > 1) { + ctx.fill(); + } else { + ctx.stroke(); + } + } + } + } +} +</pre> + +<p>{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}</p> + +<h3 id="베지어(Bezier)_곡선과_이차(Quadratic_)곡선">베지어(Bezier) 곡선과 이차(Quadratic )곡선</h3> + +<p>다음 경로 타입은 베지어 곡선 (<a class="external" href="https://ko.wikipedia.org/wiki/%EB%B2%A0%EC%A7%80%EC%97%90_%EA%B3%A1%EC%84%A0" rel="external" title="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Bézier curves</a>)으로, 삼차(cubic)와 이차(quadric) 변수가 모두 가능합니다. 이 타입은 대게 복잡한 유기체적 형태 (organic shape)를 그리는데 사용됩니다.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}</dt> + <dd><code>cp1x</code> 및 <code>cp1y</code>로 지정된 제어점을 사용하여 현재 펜의 위치에서 <code>x</code>와 <code>y</code>로 지정된 끝점까지 이차 베지어 곡선을 그립니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}</dt> + <dd>(<code>cp1x</code>, <code>cp1y</code>) 및 (cp2x, cp2y)로 지정된 제어점을 사용하여 현재 펜 위치에서 <code>x</code> 및 <code>y</code>로 지정된 끝점까지 삼차 베지어 곡선을 그립니다.</dd> +</dl> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">오른쪽의 사진은 두 곡선의 차이를 가장 잘 설명해주고 있습니다. 이차 베지에 곡선은 시작점과 끝점 (파란색 점) 그리고 하나의 <strong>제어점</strong> (control point, 빨간 점으로 표시)을 가지고 있지만, 삼차 베지에 곡선은 두개의 제어점을 사용하고 있습니다.</p> + +<p>두 메소드에 모두 사용되는 <code>x</code>와 <code>y</code> 변수는 모두 끝점의 좌표를 나타냅니다. 첫번째 제어점은 <code>cp1x</code> 와 <code>cp1y</code> 좌표로, 두번째 제어점은 <code>cp2x</code> 와 <code>cp2y</code> 좌표로 표시되었습니다.</p> + +<p>이차 및 삼차 베지어 곡선을 사용하는 것은 매우 어려울 수 있습니다. Adobe Illustrator와 같은 벡터 드로잉 소프트웨어와는 달리, 우리는 현재 수행중인 작업에 대해 직접적인 시각적 피드백을 받을 수 없기 때문입니다. 이런 점은 복잡한 모양을 그리기 어렵도록 합니다. 다음 예제에서 우리는 간단한 유기체적 형태만 그리도록 하겠지만, 여러분이 연습과 시간을 투자 하신다면, 이후에 더욱 복잡한 도형을 그릴수 있게 될 것입니다.</p> + +<p>이 예제는 아주 어려운 점은 없습니다. 두 경우 모두 연속된 곡선이 그려지면서 최종 모양이 완성됩니다.</p> + +<h4 id="이차_베지에_곡선(Quadratic_Bezier_curves)">이차 베지에 곡선(Quadratic Bezier curves)</h4> + +<p>이 예제는 여러개의 이차 베지어 곡선을 이용해 말풍선을 만들어 냅니다.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + // Quadratric curves example + ctx.beginPath(); + ctx.moveTo(75, 25); + ctx.quadraticCurveTo(25, 25, 25, 62.5); + ctx.quadraticCurveTo(25, 100, 50, 100); + ctx.quadraticCurveTo(50, 120, 30, 125); + ctx.quadraticCurveTo(60, 120, 65, 100); + ctx.quadraticCurveTo(125, 100, 125, 62.5); + ctx.quadraticCurveTo(125, 25, 75, 25); + ctx.stroke(); + } +} +</pre> + +<p>{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p> + +<h4 id="삼차_베지어_곡선_(Cubic_Bezier_curves)">삼차 베지어 곡선 (Cubic Bezier curves)</h4> + +<p>이 예제는 삼차 곡선을 이용하여 하트를 그립니다.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + // Cubic curves example + ctx.beginPath(); + ctx.moveTo(75, 40); + ctx.bezierCurveTo(75, 37, 70, 25, 50, 25); + ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5); + ctx.bezierCurveTo(20, 80, 40, 102, 75, 120); + ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5); + ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25); + ctx.bezierCurveTo(85, 25, 75, 37, 75, 40); + ctx.fill(); + } +} +</pre> + +<p>{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p> + +<h3 id="직사각형">직사각형</h3> + +<p>직사각형을 캔버스에 직접 그리는 {{anch("직사각형 그리기")}}에서 본 세 가지 메소드 외에 <code>rect()</code> 메소드도 있습니다. 이 메소드는 현재 열린 패스에 직사각형 경로를 추가합니다.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}</dt> + <dd>좌측상단이 (x, y)이고 폭과 높이가 <code>width</code>와 <code>height</code>인 직사각형을 그립니다.</dd> +</dl> + +<p>이 메소드가 실행되기 전에, (x,y) 매개변수를 가진 <code>moveTo()</code> 메소드가 자동으로 호출됩니다. 즉, 현재의 펜위치가 자동으로 기본 좌표로 초기화 됩니다.</p> + +<h3 id="조합하기">조합하기</h3> + +<p>이제까지 이 페이지의 예제들은 각각의 도형마다 하나의 path 함수를 가지고 있었습니다. 하지만 도형을 만드는데에 사용되는 경로의 종류와 개수는 제한이 없습니다. 그렇기 때문에 이 마지막 예제에서는 모든 경로 함수를 합쳐 여러 게임 캐릭터들을 그려보도록 하겠습니다.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + roundedRect(ctx, 12, 12, 150, 150, 15); + roundedRect(ctx, 19, 19, 150, 150, 9); + roundedRect(ctx, 53, 53, 49, 33, 10); + roundedRect(ctx, 53, 119, 49, 16, 6); + roundedRect(ctx, 135, 53, 49, 33, 10); + roundedRect(ctx, 135, 119, 25, 49, 10); + + ctx.beginPath(); + ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false); + ctx.lineTo(31, 37); + ctx.fill(); + + for (var i = 0; i < 8; i++) { + ctx.fillRect(51 + i * 16, 35, 4, 4); + } + + for (i = 0; i < 6; i++) { + ctx.fillRect(115, 51 + i * 16, 4, 4); + } + + for (i = 0; i < 8; i++) { + ctx.fillRect(51 + i * 16, 99, 4, 4); + } + + ctx.beginPath(); + ctx.moveTo(83, 116); + ctx.lineTo(83, 102); + ctx.bezierCurveTo(83, 94, 89, 88, 97, 88); + ctx.bezierCurveTo(105, 88, 111, 94, 111, 102); + ctx.lineTo(111, 116); + ctx.lineTo(106.333, 111.333); + ctx.lineTo(101.666, 116); + ctx.lineTo(97, 111.333); + ctx.lineTo(92.333, 116); + ctx.lineTo(87.666, 111.333); + ctx.lineTo(83, 116); + ctx.fill(); + + ctx.fillStyle = 'white'; + ctx.beginPath(); + ctx.moveTo(91, 96); + ctx.bezierCurveTo(88, 96, 87, 99, 87, 101); + ctx.bezierCurveTo(87, 103, 88, 106, 91, 106); + ctx.bezierCurveTo(94, 106, 95, 103, 95, 101); + ctx.bezierCurveTo(95, 99, 94, 96, 91, 96); + ctx.moveTo(103, 96); + ctx.bezierCurveTo(100, 96, 99, 99, 99, 101); + ctx.bezierCurveTo(99, 103, 100, 106, 103, 106); + ctx.bezierCurveTo(106, 106, 107, 103, 107, 101); + ctx.bezierCurveTo(107, 99, 106, 96, 103, 96); + ctx.fill(); + + ctx.fillStyle = 'black'; + ctx.beginPath(); + ctx.arc(101, 102, 2, 0, Math.PI * 2, true); + ctx.fill(); + + ctx.beginPath(); + ctx.arc(89, 102, 2, 0, Math.PI * 2, true); + ctx.fill(); + } +} + +// A utility function to draw a rectangle with rounded corners. + +function roundedRect(ctx, x, y, width, height, radius) { + ctx.beginPath(); + ctx.moveTo(x, y + radius); + ctx.lineTo(x, y + height - radius); + ctx.arcTo(x, y + height, x + radius, y + height, radius); + ctx.lineTo(x + width - radius, y + height); + ctx.arcTo(x + width, y + height, x + width, y + height-radius, radius); + ctx.lineTo(x + width, y + radius); + ctx.arcTo(x + width, y, x + width - radius, y, radius); + ctx.lineTo(x + radius, y); + ctx.arcTo(x, y, x, y + radius, radius); + ctx.stroke(); +} +</pre> + +<p>결과 이미지는 다음과 같습니다:</p> + +<p>{{EmbedLiveSample("Making_combinations", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}</p> + +<p>이 예제는 보기보다 아주 간단하기 때문에 자세한 설명은 생략하겠습니다. 알아 두어야할 가장 중요한 부분은 <code>fillStyle</code> 코드와 사용된 유틸리티 함수 (<code>roundedRect()</code> 부분) 입니다. 유틸리티 함수를 사용하게 되면, 사용해야 할 코드의 양과 복잡함을 줄여주는데 도움을 줍니다.</p> + +<p>이 튜토리얼에서 나중에 <code>fillStyle</code>에 대하여 조금 더 자세하게 알아보도록 하겠지만, 지금은 경로의 채우는 색을 기본값(흑백)에서 바꾸었다가 다시 기본값으로 바꾸는 정도로만 사용하였습니다.</p> + +<h2 id="Path2D_오브젝트_(Path2D_objects)">Path2D 오브젝트 (Path2D objects)</h2> + +<p>마지막 예제에서 보았 듯이, 캔버스에 객체를 그리는 일련의 경로와 그리기 명령이 있을 수 있습니다. 코드를 단순화하고 성능을 향상시키기 위해 최근 버전의 브라우저에서 사용할 수있는 {{domxref("Path2D")}} 객체를 사용하여 이러한 드로잉 명령을 캐시하거나 기록 할 수 있습니다. 이로써 여러분은 경로를 빠르게 다시 실행 시킬 수 있습니다.</p> + +<p>어떻게 <code>Path2D</code> object를 생성 할 수 있는지 확인해 봅시다:</p> + +<dl> + <dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt> + <dd><code><strong>Path2D()</strong></code> 생성자는 새로운 <code>Path2D</code> 객체를 반환합니다. 선택적으로 다른 경로를 인수로 받거나(복사본을 생성), SVG 경로 데이터로 구성된 문자열을 받아서 객체로 반환합니다.</dd> +</dl> + +<pre class="brush: js">new Path2D(); // empty path object +new Path2D(path); // copy from another Path2D object +new Path2D(d); // path from SVG path data</pre> + +<p><code>moveTo</code>, <code>rect</code>, <code>arc</code> 혹은 <code>quadraticCurveTo</code> 등과 같은 모든 경로 메소드 (<a href="/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">path methods</a>)들은 <code>Path2D</code> 객체에서 사용 가능합니다.</p> + +<p><code>Path2D</code> API는 또한 <code>addPath</code> 메소드를 사용하여 경로를 결합하는 방법을 추가합니다. 예를 들자면, 여러 요소를 사용하는 오브젝트를 만들 때 유용하게 사용 될 수 있습니다.</p> + +<dl> + <dt>{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}</dt> + <dd>옵션으로 변환 행렬(transformation matrix)을 사용하여 현재 경로에 경로를 추가합니다.</dd> +</dl> + +<h3 id="Path2D_예제">Path2D 예제</h3> + +<p>이 예제에서는, 직사각형과 원을 만들어 볼 것입니다. 나중에 사용할 것을 고려하여, 두 도형 모두 <code>Path2D</code> object로 저장 될 것입니다. 새로운 버전의 <code>Path2D</code> API에서는 여러 메소드들이 지금 사용하고있는 path가 아닌 <code>Path2D</code> object를 옵션으로 선택하여 사용 할 수 있도록 업데이트 되었습니다. 아래의 예제에서 보시면, <code>stroke</code> 와 <code>fill</code> 메소드가 오브젝트를 캔버스 위에 그리도록 path 변수와 함께 사용되었습니다.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="130" height="100"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[6,9]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + var rectangle = new Path2D(); + rectangle.rect(10, 10, 50, 50); + + var circle = new Path2D(); + circle.moveTo(125, 35); + circle.arc(100, 35, 25, 0, 2 * Math.PI); + + ctx.stroke(rectangle); + ctx.fill(circle); + } +} +</pre> + +<p>{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}</p> + +<h3 id="SVG_paths_사용하기">SVG paths 사용하기</h3> + +<p>새로운 캔버스 path2D API 또다른 강력한 특징 중 하나는, 캔버스의 path를 초기화 하기 위해 <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">SVG path data</a>를 사용한다는 것입니다. 이는 path 데이터를 이동시키며, SVG와 canvas 에서 재사용 할 수 있도록 해줍니다. </p> + +<p>path는 (<code>M10 10</code>) 점으로 이동한 다음, 수평하게 오른쪽으로 으로 80 포인트 (<code>h 80</code>) 만큼 이동합니다. 이후 수직으로 80포인트 (v 80) 내려간 다음, 80 포인트 왼쪽으로 (<code>h -80</code>) 수평하게 이동하고 다시 시작점 (<code>z</code>)으로 돌아갑니다. 예시는 <a href="/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths">이곳</a>( <code>Path2D</code> constructor )에서 확인하실 수 있습니다.</p> + +<pre class="brush: js;">var p = new Path2D('M10 10 h 80 v 80 h -80 Z');</pre> + +<div>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div> diff --git a/files/ko/web/html/canvas/tutorial/finale/index.html b/files/ko/web/html/canvas/tutorial/finale/index.html new file mode 100644 index 0000000000..1241680c5c --- /dev/null +++ b/files/ko/web/html/canvas/tutorial/finale/index.html @@ -0,0 +1,51 @@ +--- +title: Finale +slug: Web/HTML/Canvas/Tutorial/Finale +tags: + - 그래픽 + - 캔버스 + - 튜토리얼 +translation_of: Web/API/Canvas_API/Tutorial/Finale +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}</div> + +<div class="summary"> +<p>축하합니다 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas </a>튜토리얼을 모두 끝마쳤습니다! 이 정보는 웹에서 더 나은 2D 그래픽을 만드는데 도움이 됩니다.</p> +</div> + +<h2 id="더_많은_예시와_튜토리얼">더 많은 예시와 튜토리얼</h2> + +<p>이 사이트에는 다양한 데모와 canvas에 대한 추가 설명이 있다.</p> + +<dl> + <dt><a href="https://codepen.io/search/pens?q=canvas">Codepen.io</a></dt> + <dd>프론트 엔드 개발자 playground 및 브라우저의 코드 편집기.</dd> + <dt><a href="http://www.html5canvastutorials.com/">HTML5 Canvas Tutorials</a></dt> + <dd>대부분 canvas API의 예시</dd> + <dt><a href="/en-US/docs/Games">Game development</a></dt> + <dd>게임은 가장 인기있는 컴퓨터 활동 중 하나이다. 어떤 표준 규격의 웹 브라우저에서도 실행할 수 있는 더 나은 게임을 개발할 수 있도록 하기 위한 신기술이 끊임없이 등장하고 있다.</dd> +</dl> + +<h2 id="기타_웹API">기타 웹API</h2> + +<p>이 API들는 canvas 및 그래픽으로 작업할 때 유용하다.</p> + +<dl> + <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dd>3D를 포함한 복잡한 그래픽 렌더링을 위한 고급 API.</dd> + <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt> + <dd>확장 가능한 Vector Graphics는 이미지를 벡터(선)과 형태의 집합으로 묘사하여 이미지를 그리는 크기에 상관없이 원활하게 확장할 수 있다.</dd> + <dt><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio</a></dt> + <dd>Web Audio API는 개발자들이 오디오 소스 선택, 오디오에 효과 추가, 오디오 시각화 생성, 공간 효과 적용(예: 패닝)등을 할 수 있도록 웹 상에서 오디오를 제어하기 위한 다양하고 좋은 시스템을 제공한다.</dd> +</dl> + +<h2 id="문의사항">문의사항</h2> + +<dl> + <dt><a href="http://stackoverflow.com/questions/tagged/canvas">Stack Overflow</a></dt> + <dd>"canvas"가 태그된 문의사항.</dd> + <dt><a href="/en-US/docs/MDN">Comments about this tutorial – the MDN documentation community</a></dt> + <dd>이 튜토리얼에 대해 의견이 있으시거나 저희에게 감사를 표하고 싶다면 언제든지 연락해주세요!</dd> +</dl> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}</p> diff --git a/files/ko/web/html/canvas/tutorial/hit_regions_and_accessibility/index.html b/files/ko/web/html/canvas/tutorial/hit_regions_and_accessibility/index.html new file mode 100644 index 0000000000..e720af3159 --- /dev/null +++ b/files/ko/web/html/canvas/tutorial/hit_regions_and_accessibility/index.html @@ -0,0 +1,97 @@ +--- +title: 히트(Hit) 영역과 접근성 +slug: Web/HTML/Canvas/Tutorial/Hit_regions_and_accessibility +translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility +--- +<div>{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div> + +<div class="summary">{{HTMLElement("canvas")}} 엘리먼트는 비트맵이며 그려진 객체에 대한 정보는 제공하지 않습니다. 캔버스 컨텐츠는 시멘틱 HTML과 같은 접근성 도구에 노출되지 않습니다. 일반적으로 접근성을 위한 웹 사이트 또는 앱에서는 캔버스를 사용하지 않는 것이 좋습니다. 본 가이드라인은 접근성이 향상된 캔버스를 만드는데 도움이 될 것입니다.</div> + +<h2 id="대체_컨텐츠">대체 컨텐츠</h2> + +<p><code><canvas> ... </ canvas></code> 태그 안의 내용은 캔버스 렌더링을 지원하지 않는 브라우저의 대체 컨텐츠로 사용할 수 있습니다. 또한 하위 DOM을 읽고 해석 할 수있는 보조 기술 사용자 (스크린 리더와 같은)에게도 매우 유용합니다. <a href="https://www.html5accessibility.com/tests/canvas.html">html5accessibility.com</a>의 좋은 예가 이를 수행 할 수있는 방법을 보여줍니다.</p> + +<pre class="brush: html"><canvas> + <h2>Shapes</h2> + <p>A rectangle with a black border. + In the background is a pink circle. + Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>. + Partially overlaying the circle is a green + <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a> + and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>, + both of which are semi-opaque, so the full circle can be seen underneath.</p> +</canvas> </pre> + +<p><a href="https://www.youtube.com/watch?v=ABeIFlqYiMQ">Steve Faulkner의 NVDA가 이 예제를 어떻게 읽는지를 보여주는 동영상</a>을 참고하시기 바랍니다.</p> + +<h2 id="ARIA_규칙">ARIA 규칙</h2> + +<p><a href="/ko/docs/Web/Accessibility/ARIA">ARIA</a>(Accessible Rich Internet Application)는 장애인이 사용자가 웹 콘텐츠 및 웹 응용 프로그램을보다 쉽게 사용할 수 있도록하는 방법을 정의합니다. ARIA 속성을 사용하여 캔버스 엘리먼트의 동작 및 용도를 설명 할 수 있습니다. 자세한 내용은 <a href="/ko/docs/Web/Accessibility/ARIA">ARIA</a> 및 <a href="/ko/docs/Web/Accessibility/ARIA/ARIA_Techniques">ARIA 기술</a>을 참조하십시오.</p> + +<pre class="brush: html"><canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas> +</pre> + +<h2 id="히트(Hit)_영역">히트(Hit) 영역</h2> + +<p>마우스 좌표가 캔버스의 특정 영역 내에 있는지 여부는 문제를 해결하는 데 공통적입니다. 히트 영역 API를 사용하면 캔버스 영역을 정의 할 수 있으며 캔버스에 대화형 컨텐츠를 접근성 도구에 표시 할 수 있습니다. 히트 영역 API는 여러분이 히트 감지를 쉽게 할 수 있도록 하며 DOM 엘리먼트에 이벤트를 전달할 수 있도록 합니다. API에는 다음 세 가지 메소드가 있습니다 (현재 웹 브라우저에서는 아직 실험 중이며 브라우저 호환성 테이블을 확인하십시오).</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt> + <dd>히트 영역을 캔버스에 추가합니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt> + <dd>캔버스에서 해당 <code>id</code>를 가진 히트 영역을 제거합니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt> + <dd>캔버스에서 모든 히트 영역을 제거합니다.</dd> +</dl> + +<p>경로에 히트 영역을 추가하고 {{domxref("MouseEvent.region")}} 속성을 확인하여 마우스가 영역을 히트하는지 테스트 할 수 있습니다.</p> + +<pre class="brush: html"><canvas id="canvas"></canvas> +<script> +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.beginPath(); +ctx.arc(70, 80, 10, 0, 2 * Math.PI, false); +ctx.fill(); +ctx.addHitRegion({id: 'circle'}); + +canvas.addEventListener('mousemove', function(event) { + if (event.region) { + alert('hit region: ' + event.region); + } +}); +</script></pre> + +<p><code>addHitRegion()</code> 메소드는 <code>control</code> 옵션을 이용하여 이벤트를 엘리먼트(즉, 캔버스의 자식으로)로 전달합니다.</p> + +<pre class="brush: js">ctx.addHitRegion({control: element});</pre> + +<p>예를 들어 {{HTMLElement("input")}} 엘리먼트로 전달하는 데 유용 할 수 있습니다. <a href="https://codepen.io/peterj35/pen/PEdLKx">codepen 데모</a>를 참조하십시오.</p> + +<h2 id="포커스_링(Focus_rings)">포커스 링(Focus rings)</h2> + +<p>키보드로 작업 할 때 포커스 링은 페이지 탐색에 도움이되는 편리한 표시기입니다. 캔버스 드로잉에 포커스 링을 그리려면 <code>drawFocusIfNeeded</code> 속성을 사용할 수 있습니다.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}</dt> + <dd>지정된 엘리먼트에 포커스가있는 경우,이 메소드는 현재 경로 주위에 포커스 링을 그립니다.</dd> +</dl> + +<p>또한 <code>scrollPathIntoView()</code> 메서드를 사용하여 포커스가있는 경우 엘리먼트를 화면에 표시 할 수 있습니다.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}</dt> + <dd>현재 경로 또는 지정된 경로를 뷰로 스크롤합니다.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas accessibility use cases</a></li> + <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas element accessibility issues</a></li> + <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner</a></li> + <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Best practices for interactive canvas elements</a></li> +</ul> + +<div>{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div> diff --git a/files/ko/web/html/canvas/tutorial/index.html b/files/ko/web/html/canvas/tutorial/index.html new file mode 100644 index 0000000000..03077163aa --- /dev/null +++ b/files/ko/web/html/canvas/tutorial/index.html @@ -0,0 +1,62 @@ +--- +title: 캔버스 튜토리얼 +slug: Web/HTML/Canvas/Tutorial +tags: + - Canvas + - Graphic + - Guide + - HTML + - HTML5 + - Intermediate + - Web +translation_of: Web/API/Canvas_API/Tutorial +--- +<div>{{CanvasSidebar}}</div> + +<div><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></div> + +<div class="summary"> +<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a>는 <a href="/en-US/docs/HTML" title="HTML">HTML</a> 요소 중 하나로서, 스크립트(보통은 <a href="/en-US/docs/JavaScript" title="JavaScript">자바스크립트</a>)를 사용하여 그림을 그리는 데에 사용됩니다. 예를 들면, 그래프를 그리거나 사진을 합성하거나, 간단한(혹은 <a href="/en-US/docs/HTML/Canvas/A_Basic_RayCaster" title="A_Basic_RayCaster">복잡할 수도 있는</a>) 애니메이션을 만드는 데에 사용될 수 있습니다. 오른쪽에 보이는 이미지들은 앞으로 설명하게 될 <a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a>를 사용하여 만들 수 있는 것들의 일부입니다.</p> +</div> + +<p><span class="seoSummary">이 튜토리얼은 <code><canvas></code> 요소를 사용하여 2D 그래픽을 어떻게 그리는지 기초부터 설명합니다. 예제들을 통하여 캔버스로 할 수 있는 것이 무엇인지 알려주며, 바로 사용할 수 있도록 코드도 제공합니다.</span></p> + +<p><code><canvas></code>는 Apple의 Webkit에 처음 도입되어 Mac OS X 대시보드(Dashboard)에 사용되었고, 이후 다른 브라우저에도 구현되어 왔습니다. 현재 대부분의 주요 브라우저에서 지원됩니다.</p> + +<h2 id="Before_you_start" name="Before_you_start">시작하기 전 알아두어야 할 것</h2> + +<p><code><canvas></code> 요소를 사용하는 것이 어려운 일은 아니지만, <a href="/en-US/docs/HTML" title="HTML">HTML</a>과 <a href="/en-US/docs/JavaScript" title="JavaScript">자바스크립트</a>에 대한 기본 지식을 갖추고 있어야 합니다. 몇몇 오래된 브라우저는 <code><canvas></code> 요소를 지원하지 않지만, 최근 버전의 주요 브라우저들은 모두 지원하고 있습니다. 캔버스의 크기는 300px * 150px (너비 * 높이)가 초기 설정값이며, HTML <code>height</code>와 <code>width</code> 속성을 사용하여 바꿀 수 있습니다. 캔버스에 그림을 그리려면 자바스크립트 컨텍스트 오브젝트를 사용하며, 즉석에서 그림을 생성할 수 있습니다.</p> + +<h2 id="In_this_tutorial" name="In_this_tutorial">튜토리얼 내용</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">캔버스(Canvas) 기본 사용법</a></li> + <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">캔버스에 도형 그리기</a></li> + <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">스타일과 색 적용하기</a></li> + <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_text">텍스트 그리기</a></li> + <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Using_images" title="Canvas_tutorial/Using_images">이미지 사용하기</a></li> + <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Transformations" title="Canvas_tutorial/Transformations">모양 변환</a></li> + <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Canvas_tutorial/Compositing">도형 합성</a></li> + <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">애니메이션 기본</a></li> + <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">애니메이션 고급</a></li> + <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">픽셀 다루기</a></li> + <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Hit 영역과 accessibility</a></li> + <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">캔버스 최적화</a></li> + <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Finale">마무리</a></li> +</ul> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API" title="HTML/Canvas">캔버스 주제 페이지</a></li> + <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe 일러스트레이터와 캔버스 플러그인</a></li> + <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5 캔버스 튜토리얼</a></li> +</ul> + +<div class="hidden"> +<h2 id="페이지_작성에_기여하신_분들에게_알리는_말씀">페이지 작성에 기여하신 분들에게 알리는 말씀</h2> + +<p>2013년 6월 17일에 일어난 기술적인 오류로 인해, 이 튜토리얼에 대한 그 동안의 내역이 사라졌습니다. 사라진 내역에는 이 페이지 작성에 기여한 모든 분들의 기록도 포함됩니다. 이에 대해 사과드리며, 여러분들의 용서를 구합니다. (이상은 영문 페이지의 내용이므로 이 페이지와는 상관 없음을 밝힙니다.)</p> +</div> + +<div>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</div> diff --git a/files/ko/web/html/canvas/tutorial/optimizing_canvas/index.html b/files/ko/web/html/canvas/tutorial/optimizing_canvas/index.html new file mode 100644 index 0000000000..460b5e893f --- /dev/null +++ b/files/ko/web/html/canvas/tutorial/optimizing_canvas/index.html @@ -0,0 +1,110 @@ +--- +title: 캔버스 최적화 +slug: Web/HTML/Canvas/Tutorial/Optimizing_canvas +translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div> + +<div class="summary"> +<p>{{HTMLElement("canvas")}} 엘리먼트는 웹에서 2D 그래픽을 렌더링하는 데 가장 널리 사용되는 도구 중 하나입니다. 그러나 웹 사이트와 앱이 Canvas API를 최대한으로 밀면 성능이 저하되기 시작합니다. 그러나 웹 사이트 및 앱이 Canvas API를 한계치까지 사용하면 성능이 저하되기 시작합니다. <span class="seoSummary">이 글에서는 그래픽이 잘 동작하도록 보장하기 위해 캔버스 엘리먼트의 사용을 최적화하기위한 제안 사항을 제공합니다.</span></p> +</div> + +<h2 id="성능_팁">성능 팁</h2> + +<p>다음은 캔버스 성능을 개선하기 위한 팁 모음입니다.</p> + +<h3 id="캔버스에_표시되지_않는_비슷한_원시_혹은_반복_객체를_미리_그려라">캔버스에 표시되지 않는 비슷한 원시 혹은 반복 객체를 미리 그려라</h3> + +<p>만약 당신이 캔버스에 애니메이션 프레임을 그리면서 반복적인 작업이 발견된다면, 눈에 보이지 않는 숨겨진 캔버스 요소를 새로 만들고 그 캔버스에 미리 그려 넣는 방법을 고려하세요. 그렇게 하면 필요한 순간에 숨긴 캔버스에 그려진 이미지를 다시 주 캔버스 이미지에 그려넣어, 불필요한 렌더링 반복 작업을 줄여 성능 향상을 꾀할 수 있습니다.</p> + +<pre class="brush: js">myCanvas.offscreenCanvas = document.createElement('canvas'); +myCanvas.offscreenCanvas.width = myCanvas.width; +myCanvas.offscreenCanvas.height = myCanvas.height; + +myCanvas.getContext('2d').drawImage(myCanvas.offScreenCanvas, 0, 0);</pre> + +<h3 id="부동_소수점_좌표를_피하고_대신_정수를_사용하라.">부동 소수점 좌표를 피하고 대신 정수를 사용하라.</h3> + +<p>정수값들 없이 캔버스 상의 객체를 렌더링할 때 부가적인 픽셀 렌더링이 발생합니다.</p> + +<pre class="brush: js">ctx.drawImage(myImage, 0.3, 0.5); +</pre> + +<p>이렇게하면 앤티 앨리어싱(anti-aliasing) 효과를 만들기 위해 브라우저에서 추가 연산을 수행해야합니다. 예제에서 이를 방지하려면 {{jsxref("Math.floor()")}}를 사용하여 {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} 호출에 사용된 모든 좌표를 반올림해야합니다.</p> + +<h3 id="drawImage에서_이미지_크기를_조정하지_마라."><code>drawImage</code>에서 이미지 크기를 조정하지 마라.</h3> + +<p>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}에서 즉시 크기를 조정하지 말고 다양한 이미지 크기를 오프스크린(offscreen) 캔버스에 캐시하십시오.</p> + +<h3 id="복잡한_장면에_여러_개의_레이어_캔버스를_사용하라.">복잡한 장면에 여러 개의 레이어 캔버스를 사용하라.</h3> + +<p>어플리케이션에서 일부 객체는 자주 이동하거나 변경해야하지만 다른 객체는 상대적으로 고정 위치에 남아야 합니다. 이런 상황에서 대응 가능한 최적화는 여러 <code><canvas></code> 엘리먼트를 사용하여 항목을 겹쳐서 만드는 것입니다.</p> + +<p>예를 들어 상단에 UI, 중간에 게임 플레이 액션, 하단에 정적 배경이있는 게임이 있다고 가정 해 보겠습니다. 이 경우 게임을 세 개의 <code><canvas></code> 레이어로 나눌 수 있습니다. UI는 사용자 입력시에만 변경되며 게임 플레이 레이어는 모든 새 프레임마다 변경되며 배경은 일반적으로 변경되지 않습니다.</p> + +<pre class="brush: html"><div id="stage"> + <canvas id="ui-layer" width="480" height="320"></canvas> + <canvas id="game-layer" width="480" height="320"></canvas> + <canvas id="background-layer" width="480" height="320"></canvas> +</div> + +<style> + #stage { + width: 480px; + height: 320px; + position: relative; + border: 2px solid black; + } + + canvas { position: absolute; } + #ui-layer { z-index: 3; } + #game-layer { z-index: 2; } + #background-layer { z-index: 1; } +</style> +</pre> + +<h3 id="큰_배경_이미지는_일반_CSS를_사용하라.">큰 배경 이미지는 일반 CSS를 사용하라.</h3> + +<p>정적 배경 이미지가있는 경우 CSS {{cssxref("background")}} 속성을 사용하여 일반 {{HTMLElement("div")}} 요소에 그릴 수 있으며 캔버스 아래에 배치 할 수 있습니다. 이렇게하면 모든 틱 마다 배경을 캔버스에 렌더링 할 필요가 없어집니다.</p> + +<h3 id="CSS_변환transform을_사용하여_캔버스_크기_조정하라.">CSS 변환(transform)을 사용하여 캔버스 크기 조정하라.</h3> + +<p><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">CSS 변환(transform)</a>은 GPU를 사용하기 때문에 더 빠릅니다. 가장 좋은 경우는 캔버스를 스케일링하지 않거나, 큰 캔버스를 축소하기보다 작은 캔버스를 확대하는 것입니다.</p> + +<pre class="brush: js">var scaleX = window.innerWidth / canvas.width; +var scaleY = window.innerHeight / canvas.height; + +var scaleToFit = Math.min(scaleX, scaleY); +var scaleToCover = Math.max(scaleX, scaleY); + +stage.style.transformOrigin = '0 0'; //scale from top left +stage.style.transform = 'scale(' + scaleToFit + ')'; +</pre> + +<h3 id="투명도를_사용하지_마라.">투명도를 사용하지 마라.</h3> + +<p>응용 프로그램이 캔버스를 사용하고 투명 배경을 필요로하지 않는 경우 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext" title="The HTMLCanvasElement.getContext() method returns a drawing context on the canvas, or null if the context identifier is not supported."><code>HTMLCanvasElement.getContext()</code></a>를 사용하여 드로잉 컨텍스트를 만들 때 alpha 옵션을 false로 설정합니다. 이 정보는 렌더링을 최적화하기 위해 브라우저에서 내부적으로 사용할 수 있습니다.</p> + +<pre class="brush: js">var ctx = canvas.getContext('2d', { alpha: false });</pre> + +<h3 id="추가_팁들">추가 팁들</h3> + +<ul> + <li>배치 캔버스를 함께 호출합니다. 예를 들어 여러 개의 개별 선 대신 다각형 선을 그립니다.</li> + <li>불필요한 캔버스 상태 변경을 피하십시오.</li> + <li>화면의 차이만 렌더링하고 완전히 새로운 상태로 렌더링하지 마십시오.</li> + <li>가능하면 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} 속성을 사용하지 마십시오.</li> + <li>가능하면 <a href="/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_text">텍스트 렌더링</a>을 피하십시오.</li> + <li>캔버스를 지우는 여러 가지 방법을 시도해보십시오 ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. 캔버스 크기 조정).</li> + <li>애니메이션에서는 {{domxref("window.setInterval()")}} 대신 {{domxref("window.requestAnimationFrame()")}}을 사용하십시오.</li> + <li>무거운 물리 연산 라이브러리를 주의하십시오.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref">Improving HTML5 Canvas Performance – HTML5 Rocks</a></li> + <li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">Optimizing your JavaScript game for Firefox OS – Mozilla Hacks</a></li> +</ul> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</p> diff --git a/files/ko/web/html/canvas/tutorial/using_images/index.html b/files/ko/web/html/canvas/tutorial/using_images/index.html new file mode 100644 index 0000000000..d9aae1c993 --- /dev/null +++ b/files/ko/web/html/canvas/tutorial/using_images/index.html @@ -0,0 +1,347 @@ +--- +title: Using images +slug: Web/HTML/Canvas/Tutorial/Using_images +tags: + - Advanced + - Canvas + - Graphics + - HTML + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Using_images +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}</div> + +<div class="summary"> +<p>지금까지 우리는 Canvas를 가지고 스스로 <a href="/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">도형</a>을 만들고 그 도형에 <a href="/ko/docs/Web/HTML/Canvas/Tutorial/Applying_styles_and_colors">스타일 적용</a> 해 보았습니다. 이미지를 사용 하는 기능은 {{HTMLElement("canvas")}}의 가장 흥미로운 기능중 하나입니다. 이 기능은 게임의 그래픽 배경이나 혹은 다이나믹한 사진 도음들을 위해 사용 될 수 있습니다. PNG,GIF, JPEG등 브라우저에서 지원되는 포맷형태라면 어떠한 외부 이미지라도 사용 될 수 있습니다. 같은 페이지 소스에서 다른 Canvas요소로 만들어진 이미지 또한 사용할수 있습니다!</p> +</div> + +<p>이미지를 캔버스로 불러오는것은 기본적으로 두 단계를 필요로 합니다:</p> + +<ol> + <li>{{domxref("HTMLImageElement")}} object를 참조하거나 다른 캔버스 요소를 소스로 사용합니다. 이는 URL을 가지고 이미지를 사용 할 수 있습니다.</li> + <li><code>drawImage()</code> function을 사용하여 캔버스에 나타난 이미지 위에 그림을 그립니다.</li> +</ol> + +<p>이 과정이 어떻게 되는지 봅시다.</p> + +<h2 id="이미지_불러오기">이미지 불러오기</h2> + +<p>canvas API는 아래의 데이터 타입을 이미지 소스로 사용 할 수 있습니다:</p> + +<dl> + <dt>{{domxref("HTMLImageElement")}}</dt> + <dd>{{HTMLElement("img")}} element와 마찬가지로, <code>Image()</code> constructor를 통해 만들어진 이미지입니다.</dd> +</dl> + +<dl> + <dt>{{domxref("SVGImageElement")}}</dt> + <dd>{{SVGElement("image")}} element 를 사용해 불러온 이미지입니다.</dd> +</dl> + + + +<dl> + <dt>{{domxref("HTMLVideoElement")}}</dt> + <dd>HTML {{HTMLElement("video")}} 요소를 이미지 소스로 사용하여 비디오의 현재 프레임을 이미지로 불러옵니다.</dd> + <dt>{{domxref("HTMLCanvasElement")}}</dt> + <dd>다른 {{HTMLElement("canvas")}} 요소를 이미지 소스로 사용합니다.</dd> +</dl> + +<p>이렇게 얻은 소스들은 {{domxref("CanvasImageSource")}}.를 사용하여 불러 올 수 있습니다.</p> + +<p>다음은 캔버스에 놓인 이미지를 사용하는 여러가지 방법입니다.</p> + +<h3 id="같은_페이지의_이미지_사용하기">같은 페이지의 이미지 사용하기</h3> + +<p>우리는 다음을 사용하여 같은 페이지에 있는 캔버스나 이미지를 참고 할 수 있습니다.</p> + +<ul> + <li>{{domxref("document.images")}} 모음</li> + <li>{{domxref("document.getElementsByTagName()")}} 메소드</li> + <li>사용 하고자 하는 특정한 이미지의 ID를 알고 있다면, {{domxref("document.getElementById()")}} 를 사용하여 특정한 이미지를 참고할 수 있습니다.</li> +</ul> + +<h3 id="다른_도메인의_이미지_사용하기">다른 도메인의 이미지 사용하기</h3> + +<p>Using the {{htmlattrxref("crossorigin", "img")}} attribute of an {{HTMLElement("img")}} element (reflected by the {{domxref("HTMLImageElement.crossOrigin")}} property), you can request permission to load an image from another domain for use in your call to <code>drawImage()</code>. If the hosting domain permits cross-domain access to the image, the image can be used in your canvas without tainting it; otherwise using the image will <a href="https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" rel="internal">taint the canvas</a>.</p> + +<h3 id="다른_캔버스_요소_canvas_elements_사용하기">다른 캔버스 요소 (canvas elements) 사용하기</h3> + +<p>Just as with normal images, we access other canvas elements using either the {{domxref("document.getElementsByTagName()")}} or {{domxref("document.getElementById()")}} method. Be sure you've drawn something to the source canvas before using it in your target canvas.</p> + +<p>One of the more practical uses of this would be to use a second canvas element as a thumbnail view of the other larger canvas.</p> + +<h3 id="처음부터_이미지_만들기">처음부터 이미지 만들기</h3> + +<p>Another option is to create new {{domxref("HTMLImageElement")}} objects in our script. To do this, you can use the convenient <code>Image()</code> constructor:</p> + +<pre class="brush: js notranslate">var img = new Image(); // Create new img element +img.src = 'myImage.png'; // Set source path +</pre> + +<p>When this script gets executed, the image starts loading.</p> + +<p>If you try to call <code>drawImage()</code> before the image has finished loading, it won't do anything (or, in older browsers, may even throw an exception). So you need to be sure to use the load event so you don't try this before the image has loaded:</p> + +<pre class="brush: js notranslate">var img = new Image(); // Create new img element +img.addEventListener('load', function() { + // execute drawImage statements here +}, false); +img.src = 'myImage.png'; // Set source path +</pre> + +<p>If you're only using one external image this can be a good approach, but once you need to track more than one we need to resort to something more clever. It's beyond the scope of this tutorial to look at image pre-loading tactics, but you should keep that in mind.</p> + +<h3 id="데이터를_사용하여_이미지_불러오기Embedding_an_image_via_data_URL">데이터를 사용하여 이미지 불러오기Embedding an image via data: URL</h3> + +<p>Another possible way to include images is via the <a class="external" href="/en-US/docs/Web/HTTP/data_URIs" rel="external" title="http://en.wikipedia.org/wiki/Data:_URL">data: url</a>. Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.</p> + +<pre class="brush: js notranslate">var img = new Image(); // Create new img element +img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw=='; +</pre> + +<p>One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>, and images, making it more portable to other locations.</p> + +<p>Some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long.</p> + +<h3 id="비디오_프레임_사용하기Using_frames_from_a_video">비디오 프레임 사용하기Using frames from a video</h3> + +<p>You can also use frames from a video being presented by a {{HTMLElement("video")}} element (even if the video is not visible). For example, if you have a {{HTMLElement("video")}} element with the ID "myvideo", you can do this:</p> + +<pre class="brush: js notranslate">function getMyVideo() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + return document.getElementById('myvideo'); + } +} +</pre> + +<p>This returns the {{domxref("HTMLVideoElement")}} object for the video, which, as covered earlier, is one of the objects that can be used as a <code>CanvasImageSource</code>.</p> + +<h2 id="이미지_그리기">이미지 그리기</h2> + +<p>Once we have a reference to our source image object we can use the <code>drawImage()</code> method to render it to the canvas. As we will see later the <code>drawImage()</code> method is overloaded and has several variants. In its most basic form it looks like this:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}</dt> + <dd>Draws the <code>CanvasImageSource</code> specified by the <code>image</code> parameter at the coordinates (<code>x</code>, <code>y</code>).</dd> +</dl> + +<div class="note"> +<p>SVG images must specify a width and height in the root <svg> element.</p> +</div> + +<h3 id="예제_기본_선_그래프">예제: 기본 선 그래프</h3> + +<p>In the following example, we will use an external image as the backdrop for a small line graph. Using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. In this example, we're only using one image, so I use the image object's <code>load</code> event handler to execute the drawing statements. The <code>drawImage()</code> method places the backdrop at the coordinate (0, 0), which is the top-left corner of the canvas.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><html> + <body onload="draw();"> + <canvas id="canvas" width="180" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[5] notranslate">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var img = new Image(); + img.onload = function() { + ctx.drawImage(img, 0, 0); + ctx.beginPath(); + ctx.moveTo(30, 96); + ctx.lineTo(70, 66); + ctx.lineTo(103, 76); + ctx.lineTo(170, 15); + ctx.stroke(); + }; + img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'; +}</pre> + +<p>The resulting graph looks like this:</p> + +<p>{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}</p> + +<h2 id="비례_크기_조정">비례 크기 조정</h2> + +<p>The second variant of the <code>drawImage()</code> method adds two new parameters and lets us place scaled images on the canvas.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}</dt> + <dd>This adds the <code>width</code> and <code>height</code> parameters, which indicate the size to which to scale the image when drawing it onto the canvas.</dd> +</dl> + +<h3 id="예제_이미지를_타일처럼_배치">예제: 이미지를 타일처럼 배치</h3> + +<p>In this example, we'll use an image as a wallpaper and repeat it several times on the canvas. This is done simply by looping and placing the scaled images at different positions. In the code below, the first <code>for</code> loop iterates over the rows. The second <code>for</code> loop iterates over the columns. The image is scaled to one third of its original size, which is 50x38 pixels.</p> + +<div class="note"> +<p><strong>Note</strong>: Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.</p> +</div> + +<div class="hidden"> +<pre class="brush: html notranslate"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js notranslate">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var img = new Image(); + img.onload = function() { + for (var i = 0; i < 4; i++) { + for (var j = 0; j < 3; j++) { + ctx.drawImage(img, j * 50, i * 38, 50, 38); + } + } + }; + img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; +}</pre> + +<p>The resulting canvas looks like this:</p> + +<p>{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}</p> + +<h2 id="이미지_자르기">이미지 자르기</h2> + +<p>The third and last variant of the <code>drawImage()</code> method has eight parameters in addition to the image source. It lets us cut out a section of the source image, then scale and draw it on our canvas.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}</dt> + <dd>Given an <code>image</code>, this function takes the area of the source image specified by the rectangle whose top-left corner is (<code>sx</code>, <code>sy</code>) and whose width and height are <code>sWidth</code> and <code>sHeight</code> and draws it into the canvas, placing it on the canvas at (<code>dx</code>, <code>dy</code>) and scaling it to the size specified by <code>dWidth</code> and <code>dHeight</code>.</dd> +</dl> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right; height: 290px; width: 300px;">To really understand what this does, it may help to look at the image to the right. The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.</p> + +<p>Slicing can be a useful tool when you want to make compositions. You could have all elements in a single image file and use this method to composite a complete drawing. For instance, if you want to make a chart you could have a PNG image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. Another advantage is that you don't need to load every image individually, which can improve load performance.</p> + +<h3 id="예제_이미지_프레임_넣기">예제: 이미지 프레임 넣기</h3> + +<p>In this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. The picture frame image is a 24-bit PNG which includes a drop shadow. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, it can be placed onto any background without worrying about a matte color.</p> + +<pre class="brush: html notranslate"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + <div style="display:none;"> + <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"> + <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"> + </div> + </body> +</html> +</pre> + +<pre class="brush: js notranslate">function draw() { + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + + // Draw slice + ctx.drawImage(document.getElementById('source'), + 33, 71, 104, 124, 21, 20, 87, 104); + + // Draw frame + ctx.drawImage(document.getElementById('frame'), 0, 0); +}</pre> + +<p>We took a different approach to loading the images this time. Instead of loading them by creating new {{domxref("HTMLImageElement")}} objects, we included them as {{HTMLElement("img")}} tags directly in our HTML source and retrieved the images from those. The images are hidden from output by setting the CSS property {{cssxref("display")}} to none for those images.</p> + +<p>{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}</p> + +<p>The script itself is very simple. Each {{HTMLElement("img")}} is assigned an ID attribute, which makes them easy to select using {{domxref("document.getElementById()")}}. We then simply use <code>drawImage()</code> to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second <code>drawImage()</code> call.</p> + +<h2 id="아트_갤러리_예제">아트 갤러리 예제</h2> + +<p>In the final example of this chapter, we'll build a little art gallery. The gallery consists of a table containing several images. When the page is loaded, a {{HTMLElement("canvas")}} element is inserted for each image and a frame is drawn around it.</p> + +<p>In this case, every image has a fixed width and height, as does the frame that's drawn around them. You could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it.</p> + +<p>The code below should be self-explanatory. We loop through the {{domxref("document.images")}} container and add new canvas elements accordingly. Probably the only thing to note, for those not so familiar with the DOM, is the use of the {{domxref("Node.insertBefore")}} method. <code>insertBefore()</code> is a method of the parent node (a table cell) of the element (the image) before which we want to insert our new node (the canvas element).</p> + +<pre class="brush: html notranslate"><html> + <body onload="draw();"> + <table> + <tr> + <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td> + </tr> + <tr> + <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td> + </tr> + </table> + <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"> + </body> +</html> +</pre> + +<p>And here's some CSS to make things look nice:</p> + +<pre class="brush: css notranslate">body { + background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A; + margin: 10px; +} + +img { + display: none; +} + +table { + margin: 0 auto; +} + +td { + padding: 15px; +} +</pre> + +<p>Tying it all together is the JavaScript to draw our framed images:</p> + +<pre class="brush: js notranslate">function draw() { + + // Loop through all images + for (var i = 0; i < document.images.length; i++) { + + // Don't add a canvas for the frame image + if (document.images[i].getAttribute('id') != 'frame') { + + // Create canvas element + canvas = document.createElement('canvas'); + canvas.setAttribute('width', 132); + canvas.setAttribute('height', 150); + + // Insert before the image + document.images[i].parentNode.insertBefore(canvas,document.images[i]); + + ctx = canvas.getContext('2d'); + + // Draw image to canvas + ctx.drawImage(document.images[i], 15, 20); + + // Add frame + ctx.drawImage(document.getElementById('frame'), 0, 0); + } + } +}</pre> + +<p>{{EmbedLiveSample("Art_gallery_example", 725, 400)}}</p> + +<h2 id="이미지_비율_습성scaling_behavior_제어하기">이미지 비율 습성(scaling behavior) 제어하기</h2> + +<p>As mentioned previously, scaling images can result in fuzzy or blocky artifacts due to the scaling process. You can use the drawing context's {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} property to control the use of image smoothing algorithms when scaling images within your context. By default, this is <code>true</code>, meaning images will be smoothed when scaled. You can disable this feature like this:</p> + +<pre class="brush: js notranslate">ctx.mozImageSmoothingEnabled = false; +ctx.webkitImageSmoothingEnabled = false; +ctx.msImageSmoothingEnabled = false; +ctx.imageSmoothingEnabled = false; +</pre> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}</p> diff --git a/files/ko/web/html/canvas/tutorial/변형/index.html b/files/ko/web/html/canvas/tutorial/변형/index.html new file mode 100644 index 0000000000..b93747b581 --- /dev/null +++ b/files/ko/web/html/canvas/tutorial/변형/index.html @@ -0,0 +1,286 @@ +--- +title: 변형 (transformations) +slug: Web/HTML/Canvas/Tutorial/변형 +tags: + - CSS + - HTML + - 이동 + - 축소 + - 캔버스 + - 크기변형 + - 트랜스폼 + - 확대 +translation_of: Web/API/Canvas_API/Tutorial/Transformations +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}</div> + +<div class="summary">이 튜토리얼에 앞서 <a href="/ko/docs/Web/HTML/Canvas/Tutorial/Drawing_shapes">canvas 그리드</a>와 <strong>좌표 공간</strong>에 대해 알아 보았습니다. 지금까지는 기본적인 그리드를 사용해 요구에 맞추어 전체 canvas의 크기를 바꾸기만 했습니다. Transformation(변형)에는 그리드를 원점에서 다른 위치로 옮기고, 회전하며, 확대·축소까지 하는 더 강력한 방법들이 있습니다.</div> + +<h2 id="Saving_and_restoring_state" name="Saving_and_restoring_state">상태(state)의 저장과 복원</h2> + +<p>변형(transformation) 메소드을 살펴보기 전에 두 가지 다른 메소드를 보도록 하지요. 일단 여러분이 더 복잡한 그림(drawings)을 그리기 시작하면 반드시 있어야 하는 메소드들입니다.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.save", "save()")}}</dt> + <dd>canvas의 모든 상태를 저장합니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.restore", "restore()")}}</dt> + <dd>가장 최근에 저장된 canvas 상태를 복원합니다.</dd> +</dl> + +<p>Canvas 상태는 스택(stack)에 쌓입니다. <code>save()</code> 메소드가 호출될 때마다 현재 drawing 상태가 스택 위로 푸시됩니다. drawing 상태는 다음과 같이 이루어집니다.</p> + +<ul> + <li>이전부터 적용된 변형(가령, <code>translate</code>과 <code>rotate</code>와 <code>scale</code> 같은 – 아래의 내용을 보세요).</li> + <li>다음 속성(attributes)의 현재 값:<br> + {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li> + <li>현재의 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths">clipping path</a>, 이것은 다음 섹션에서 다루겠습니다.</li> +</ul> + +<p>여러분은 원하는 만큼 <code>save()</code> 메소드를 많이 호출할 수 있습니다. <code>restore()</code> 메소드를 호출할 때마다 마지막으로 저장된 상태가 스택에서 튀어나와 저장된 설정들을 모두 복원시킵니다.</p> + +<h3 id="A_save_and_restore_canvas_state_example" name="A_save_and_restore_canvas_state_example"><code>save</code>와 <code>restore</code> canvas 상태(state) 예제</h3> + +<p>사각형 세트를 연이어 그려서 drawing 상태를 가진 스택이 어떻게 기능하는지를 이 예제에서 설명하고자 합니다.</p> + +<pre class="brush: js; highlight:[5,10,15,18]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + ctx.fillRect(0, 0, 150, 150); // 기본 설정으로 사각형을 그리기 + ctx.save(); // 기본 상태를 저장하기 + + ctx.fillStyle = '#09F'; // 설정 변경하기 + ctx.fillRect(15, 15, 120, 120); // 새로운 설정으로 사각형 그리기 + + ctx.save(); // 현재 상태 저장하기 + ctx.fillStyle = '#FFF'; // 설정 변경하기 + ctx.globalAlpha = 0.5; + ctx.fillRect(30, 30, 90, 90); // 새로운 설정으로 사각형 그리기 + + ctx.restore(); // 이전 상태 복원하기 + ctx.fillRect(45, 45, 60, 60); // 복원된 설정으로 사각형 그리기 + + ctx.restore(); // 초기 상태를 복원하기 + ctx.fillRect(60, 60, 30, 30); // 복원된 설정으로 사각형 그리기 +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>첫 단계로 기본 설정으로 커다란 사각형을 그립니다. 그다음에는 이 상태를 저장하고 fill color를 바꿉니다. 그런 후에 두 번째이자 크기가 더 작은 파란 사각형을 그리고 그 상태를 저장합니다. 다시 한번 일부 drawing 설정을 바꾸고 세 번째 반투명한 흰 사각형을 그립니다. </p> + +<p>여기까지는 이전 섹션에서 했던 작업과 매우 유사합니다. 하지만 일단 첫 번째 <code>restore()</code> 문을 호출하면 스택에서 맨 위의 drawing 상태가 지워지고 설정이 복원됩니다. 만일 <code>save()</code>로 저장하지 않았다면, 이전 상태로 되돌리기 위해 fill color와 투명도를 일일이 바꿔주어야 했을 것입니다. 두 속성이라서 간단했을 테지만 그보다 더 많았으면 코드가 급속히 길어졌겠지요. </p> + +<p>두 번째 <code>restore()</code>문이 호출될 때, 초기 상태( 처음으로 <code>save</code>를 호출하기 전에 설정한 상태)가 복원되고 마지막 사각형은 한번 더 검게 그려집니다.</p> + +<p>{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}</p> + +<h2 id="Translating" name="Translating">이동(translating)</h2> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/234/Canvas_grid_translate.png" style="float: right;">우리가 살펴볼 첫 번째 변형 메소드는 <code>translate()</code>입니다. 이 메소드는 그리드에서 canvas를 원점에서 다른 점으로 옮기는 데 사용됩니다. </p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}</dt> + <dd>그리드에서 canvas와 그 원점을 이동합니다. <code>x</code>는 이동시킬 수평 거리를 가리키고, <code>y</code>는 그리드에서 수직으로 얼마나 멀리 떨어지는지를 표시합니다. </dd> +</dl> + +<p>변형하기 전에 canvas 상태를 저장하는 것이 좋습니다. 대다수의 경우, 원래 상태로 되돌리려고 역이동(reverse translation)을 시키는 것보다 <code>restore</code> 메소드를 호출하는 것이 더욱 간편합니다. 게다가 루프(loop) 안에서 이동하는 거라면 canvas 상태를 저장하고 복원하지 마세요. canvas 모서리 밖에서 그려지는 바람에 drawing의 일부를 잃어버리게 될지 모릅니다. </p> + +<h3 id="A_translate_example" name="A_translate_example"><code>translate</code> 예제</h3> + +<p>이 예제에서 canvas 원점의 이동에 관한 좋은 점을 일부 보여드리겠습니다. <code>translate()</code> 메소드를 쓰지 않으면 모든 사각형은 같은 위치 (0, 0)에 그려집니다. 또한, <code>translate()</code> 메소드는 사각형을 <code>fillRect()</code> function에서 좌표를 일일이 적으며 바꾸지 않아도 어디에나 위치할 수 있게 해줍니다. 이렇게 하면 이해하고 사용하기가 좀 더 쉽습니다. </p> + +<p> <code>draw()</code> function에서 두 개의 루프(loops)를 이용해 <code>fillRect()</code> function을 아홉 번 호출합니다. 루프마다 canvas가 이동하고 사각형이 그려지며, canvas는 원래 상태로 되돌아 갑니다. <code>fillRect()</code>로의 호출이 <code>translate()</code>에 의지해 drawing 위치를 바꾸는데 어떻게 매번 같은 좌표를 사용하는지 눈여겨 보세요.</p> + +<pre class="brush: js; highlight:[7]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + for (var i = 0; i < 3; i++) { + for (var j = 0; j < 3; j++) { + ctx.save(); + ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)'; + ctx.translate(10 + j * 50, 10 + i * 50); + ctx.fillRect(0, 0, 25, 25); + ctx.restore(); + } + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}</p> + +<h2 id="Rotating" name="Rotating">회전(rotating)</h2> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;">두 번째 변형 메소드는 <code>rotate()</code>입니다. canvas를 현재의 원점 둘레로 회전하는 데 사용합니다.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}</dt> + <dd>canvas를 현재 원점을 기준으로 라디안의 <code>angle</code> 숫자만큼 시계방향으로 회전시킵니다.</dd> +</dl> + +<p>회전의 중심점은 언제나 canvas 원점입니다. 중심점을 바꾸려면 <code>translate()</code> 메소드를 써서 canvas를 이동해야 합니다.</p> + +<h3 id="A_rotate_example" name="A_rotate_example"><code>rotate</code> 예제</h3> + +<p>이 예제는 사각형을 canvas 원점에서 먼저 회전하고 그다음에 <code>translate()</code>의 도움을 받아 사각형 자체의 중심에서 회전하는 데 <code>rotate()</code>를 사용합니다.</p> + +<div class="note"> +<p><strong>주의</strong>: 각도의 단위는 도(degree)가 아닌 라디안(radian)입니다. 변환하려면 <code>radians = (Math.PI/180)*degrees</code>.를 사용합니다.</p> +</div> + +<pre class="brush: js; highlight:[9, 23]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // 좌측 사각형, canvas 원점에서 회전하기 + ctx.save(); + // 파란 사각형 + ctx.fillStyle = '#0095DD'; + ctx.fillRect(30, 30, 100, 100); + ctx.rotate((Math.PI / 180) * 25); + // 회색 사각형 + ctx.fillStyle = '#4D4E53'; + ctx.fillRect(30, 30, 100, 100); + ctx.restore(); + + // 우측 사각형, 사각형 중심에서 회전하기 + // 파란 사각형 그리기 + ctx.fillStyle = '#0095DD'; + ctx.fillRect(150, 30, 100, 100); + + ctx.translate(200, 80); // 사각형 중심으로 이동하기 + // x = x + 0.5 * width + // y = y + 0.5 * height + ctx.rotate((Math.PI / 180) * 25); // 회전 + ctx.translate(-200, -80); // 예전 위치로 이동하기 + + // 회색 사각형 그리기 + ctx.fillStyle = '#4D4E53'; + ctx.fillRect(150, 30, 100, 100); +} +</pre> + +<p>사각형 자체의 중심 둘레로 회전하려면 사각형의 중심으로 canvas를 옮기세요. 그런 후에 canvas를 회전하고, 그 canvas를 0, 0로 되돌려 이동합니다. 그다음에 사각형을 그리세요.</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="300" height="200"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}</p> + +<h2 id="Scaling" name="Scaling">확대·축소(scaling)</h2> + +<p>다음 변형 메소드는 확대·축소(scaling)입니다. canvas 그리드에서 단위(units)를 키우거나 줄이는 데 사용합니다. 이는 벡터 모양과 비트맵(bitmaps) 요소를 축소하거나 확대해서 그리는 데 사용될 수 있습니다.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}</dt> + <dd>canvas 단위를 수평으로 x만큼, 수직으로 y만큼 크기를 확대·축소합니다. 둘의 매개 변수는 실수입니다. 1.0보다 작은 값이면 단위의 크기를 축소하고, 1.0보다 큰 값이면 단위의 크기를 확대합니다. 값이 1.0이면 단위의 크기는 그대로입니다.</dd> +</dl> + +<p>음수를 이용해서 축을 대칭 시킬 수 있습니다(가령 <code>translate(0,canvas.height); scale(1,-1);</code>로 쓰는 것처럼 말이죠. 좌측 하단 모서리에 있는 원점을 이용한, 잘 알려진 카르테시안 좌표계(Cartesian coordinate)인 것이지요.</p> + +<p>기본적으로 canvas에서 하나의 단위는 정확히 1픽셀입니다. 예를 들어 0.5라는 확대·축소 비율을 적용한다면, 결과로 나오는 단위는 0.5 픽셀이 될 것이고, 고로 모양도 절반 크기로 그려질 것입니다. 이런 방식으로 크기 비율을 2.0으로 잡으면 단위 크기가 확대되어 하나의 단위는 이제 2픽셀이 되겠지요. 이 결과로 모양은 그만큼 2배로 커집니다.</p> + +<h3 id="A_scale_example" name="A_scale_example"><code>scale</code> 예제</h3> + +<p>마지막 예제로 다양한 확대·축소 비율을 이용해 모양을 그려보겠습니다.</p> + +<pre class="brush: js; highlight:[6,11]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // 간단하지만 확대·축소 비율을 적용한 사각형 그리기 + ctx.save(); + ctx.scale(10, 3); + ctx.fillRect(1, 10, 10, 10); + ctx.restore(); + + // 수평으로 대칭하기 + ctx.scale(-1, 1); + ctx.font = '48px serif'; + ctx.fillText('MDN', -135, 120); +} + +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}</p> + +<h2 id="Transforms" name="Transforms">변형(transforms)</h2> + +<p>마지막으로, 다음의 변형(transform) 메소드들은 변환 행렬(transformation matrix)로 변경할 사항을 즉시 적용할 수 있습니다.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}</dt> + <dd>인수(arguments)에 표시된 행렬을 이용해 현재 변환 행렬을 곱합니다. 변환 행렬은 다음과 같이 작성됩니다. <br> + <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math></dd> +</dl> + +<dl> + <dd>만일 인수 중에 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>가 있다면, 변환 행렬은 예외 처리하는 메소드 대신에 반드시 infinite로 표시되어야 합니다.</dd> +</dl> + +<p>이 function의 매개 변수들은 다음과 같습니다.</p> + +<dl> + <dt><code>a (m11)</code></dt> + <dd>수평으로 확대·축소하기</dd> + <dt><em><code>b (m12)</code></em></dt> + <dd>수평으로 비스듬히 기울이기</dd> + <dt><code>c (m21)</code></dt> + <dd>수직으로 비스듬히 기울이기</dd> + <dt><code>d (m22)</code></dt> + <dd>수직으로 확대·축소하기</dd> + <dt><code>e (dx)</code></dt> + <dd>수평으로 이동하기</dd> + <dt><code>f (dy)</code></dt> + <dd>수직으로 이동하기</dd> + <dt>{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}</dt> + <dd>현재 변형 상태를 단위 행렬로 재설정하고 나서 동일한 인수로 <code>transform()</code> 메소드를 적용합니다. 이는 기본적으로 현재의 변형을 무효로 한 후에 명시된 변형으로 바뀌는데, 한번에 모든 게 진행됩니다.</dd> + <dt>{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}</dt> + <dd>현재 변형 상태를 단위 행렬로 재설정합니다. 이는 <code>ctx.setTransform(1, 0, 0, 1, 0, 0);</code> 호출과 같습니다.</dd> +</dl> + +<h3 id="transform과_setTransform_예제"><code>transform</code>과 <code>setTransform</code> 예제</h3> + +<pre class="brush: js; highlight:[12,15]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + var sin = Math.sin(Math.PI / 6); + var cos = Math.cos(Math.PI / 6); + ctx.translate(100, 100); + var c = 0; + for (var i = 0; i <= 12; i++) { + c = Math.floor(255 / 12 * i); + ctx.fillStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')'; + ctx.fillRect(0, 0, 100, 10); + ctx.transform(cos, sin, -sin, cos, 0, 0); + } + + ctx.setTransform(-1, 0, 0, 1, 100, 100); + ctx.fillStyle = 'rgba(255, 128, 255, 0.5)'; + ctx.fillRect(0, 50, 100, 100); +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="200" height="250"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("Example_for_transform_and_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}</p> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}</p> diff --git a/files/ko/web/html/cors_enabled_image/index.html b/files/ko/web/html/cors_enabled_image/index.html new file mode 100644 index 0000000000..5d3dfae121 --- /dev/null +++ b/files/ko/web/html/cors_enabled_image/index.html @@ -0,0 +1,112 @@ +--- +title: 교차 출처 이미지와 캔버스 허용하기 +slug: Web/HTML/CORS_enabled_image +translation_of: Web/HTML/CORS_enabled_image +--- +<p><span class="seoSummary">HTML은 이미지 처리를 위해 {{Glossary("CORS")}} header를 포함하고 있는 {{ htmlattrxref("crossorigin", "img") }} 속성을 제공합니다. 이는 {{ HTMLElement("img") }} 요소에서 정의된, 외부 origin으로 부터 가져오는 이미지가 {{HTMLElement("canvas")}}에서 사용할 수 있도록 해줍니다. 마치 현재 origin에서 가져온 것처럼 말입니다</span></p> + +<p><code>crossorigin</code> 속성이 어떻게 사용되는지 자세히 알고 싶다면, <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a> 를 참고하세요.</p> + +<h2 id="보안과_오염된_canvas들">보안과 오염된 canvas들</h2> + +<p>다른 호스트들에 있는 이미지나 비디오를 포함한 canvas 비트맵의 픽셀들은 다양한 출처로 부터 가져오기 때문에, 보안과 관련된 문제를 피할 수 없습니다.</p> + +<p>CORS를 통하지 않고, 다른 origin으로 부터 가져온 데이터들은 canvas에 그려지는 즉시 canvas는 <strong>오염</strong>됩니다. 오염된 canvas는 더 이상 안전하지 않은 것으로 여겨지고, canvas 이미지에서 데이터를 가져오려는 어떤 시도든 exception이 발생합니다.</p> + +<p>만약 외부 출처 콘텐츠가 HTML {{HTMLElement("img")}} 또는 SVG {{SVGElement("svg")}} 요소라면, canvas의 콘텐츠를 가져오려는 시도는 허용되지 않습니다.</p> + +<p>만약 외부 출처 콘텐츠가 {{domxref("HTMLCanvasElement")}} 또는 {{domxref("ImageBitMap")}} 로부터 오는 이미지이고, 이미지의 source가 동일 출처 원칙과 맞지 않는다면 canvas의 콘텐츠를 읽으려는 시도는 막힙니다.</p> + +<p>Calling any of the following on a tainted canvas will result in an error:</p> + +<ul> + <li>Calling {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} on the canvas's context</li> + <li>Calling {{domxref("HTMLCanvasElement.toBlob", "toBlob()")}} on the {{HTMLElement("canvas")}} element itself</li> + <li>Calling {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} on the canvas</li> +</ul> + +<p>Attempting any of these when the canvas is tainted will cause a <code>SecurityError</code> to be thrown. This protects users from having private data exposed by using images to pull information from remote web sites without permission.</p> + +<h2 id="Storing_an_image_from_a_foreign_origin">Storing an image from a foreign origin</h2> + +<p>In this example, we wish to permit images from a foreign origin to be retrieved and saved to local storage. Implementing this requires configuring the server as well as writing code for the web site itself.</p> + +<h3 id="Web_server_configuration">Web server configuration</h3> + +<p>The first thing we need is a server that's configured to host images with the {{HTTPHeader("Access-Control-Allow-Origin")}} header configured to permit cross-origin access to image files.</p> + +<p>Let's assume we're serving our site using <a href="https://httpd.apache.org/">Apache</a>. Consider the HTML5 Boilerplate <a href="https://github.com/h5bp/server-configs-apache/blob/master/src/cross-origin/images.conf">Apache server configuration file for CORS images</a>, shown below:</p> + +<pre class="brush: xml"><IfModule mod_setenvif.c> + <IfModule mod_headers.c> + <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$"> + SetEnvIf Origin ":" IS_CORS + Header set Access-Control-Allow-Origin "*" env=IS_CORS + </FilesMatch> + </IfModule> +</IfModule></pre> + +<p>In short, this configures the server to allow graphic files (those with the extensions ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", and ".webp") to be accessed cross-origin from anywhere on the internet.</p> + +<h3 id="Implementing_the_save_feature">Implementing the save feature</h3> + +<p>Now that the server has been configured to allow retrieval of the images cross-origin, we can write the code that allows the user to save them to local <a href="/en-US/docs/Web/API/Web_Storage_API">local storage</a>, just as if they were being served from the same domain the code is running on.</p> + +<p>The key is to use the {{htmlattrxref("crossorigin")}} attribute by setting {{domxref("HTMLImageElement.crossOrigin", "crossOrigin")}} on the {{domxref("HTMLImageElement")}} into which the image will be loaded. This tells the browser to request cross-origin access when trying to download the image data.</p> + +<h4 id="Starting_the_download">Starting the download</h4> + +<p>The code that starts the download (say, when the user clicks a "Download" button), looks like this:</p> + +<pre class="brush: js">function startDownload() { + let imageURL = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189"; + + downloadedImg = new Image; + downloadedImg.crossOrigin = "Anonymous"; + downloadedImg.addEventListener("load", imageReceived, false); + downloadedImg.src = imageURL; +}</pre> + +<p>We're using a hard-coded URL here (<code>imageURL</code>), but that could easily come from anywhere. To begin downloading the image, we create a new {{domxref("HTMLImageElement")}} object by using the {{domxref("HTMLImageElement.Image", "Image()")}} constructor. The image is then configured to allow cross-origin downloading by setting its <code>crossOrigin</code> attribute to <code>"Anonymous"</code> (that is, allow non-authenticated downloading of the image cross-origin). An event listener is added for the {{event("load")}} event being fired on the image element, which means the image data has been received.</p> + +<p>Finally, the image's {{domxref("HTMLImageElement.src", "src")}} attribute is set to the URL of the image to download; this triggers the download to begin.</p> + +<h4 id="Receiving_and_saving_the_image">Receiving and saving the image</h4> + +<p>The code that handles the newly-downloaded image is found in the <code>imageReceived()</code> method:</p> + +<pre class="brush: js">function imageReceived() { + let canvas = document.createElement("canvas"); + let context = canvas.getContext("2d"); + + canvas.width = downloadedImg.width; + canvas.height = downloadedImg.height; + + context.drawImage(downloadedImg, 0, 0); + imageBox.appendChild(canvas); + + try { + localStorage.setItem("saved-image-example", canvas.toDataURL("image/png")); + } + catch(err) { + console.log("Error: " + err); + } +}</pre> + +<p><code>imageReceived()</code> is called to handle the <code>"load"</code> event on the <code>HTMLImageElement</code> that receives the downloaded image. This event is triggered once the downloaded data is all available. It begins by creating a new {{HTMLElement("canvas")}} element that we'll use to convert the image into a data URL, and by getting access to the canvas's 2D drawing context ({{domxref("CanvasRenderingContext2D")}}) in the variable <code>context</code>.</p> + +<p>The canvas's size is adjusted to match the received image, then the image is drawn into the canvas using {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. The canvas is then inserted into the document so the image is visible.</p> + +<p>Now it's time to actually save the image locally. To do this, we use the Web Storage API's local storage mechanism, which is accessed through the {{domxref("Window.localStorage", "localStorage")}} global. The canvas method {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} is used to convert the image into a data:// URL representing a PNG image, which is then saved into local storage using {{domxref("Storage.setItem", "setItem()")}}.</p> + +<p>You can <a href="https://cors-image-example.glitch.me/">try out</a> or <a href="https://glitch.com/edit/#!/remix/cors-image-example">remix</a> this example on Glitch.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html">Using Cross-domain images in WebGL and Chrome 13</a></li> + <li><a class="external" href="http://whatwg.org/html#attr-img-crossorigin">HTML Specification - the <code>crossorigin</code> attribute</a></li> + <li><a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a></li> +</ul> + +<div>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML/")}}</div> diff --git a/files/ko/web/html/element/a/index.html b/files/ko/web/html/element/a/index.html new file mode 100644 index 0000000000..680f85b9b6 --- /dev/null +++ b/files/ko/web/html/element/a/index.html @@ -0,0 +1,489 @@ +--- +title: <a> +slug: Web/HTML/Element/a +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/a +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><a></code> 요소</strong>(앵커 요소)는 {{htmlattrxref("href", "a")}} 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다.</span> <code><a></code> 안의 콘텐츠는 링크 목적지의 설명을 <strong>나타내야 합니다</strong>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/a.html")}}</div> + + + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("download")}}</dt> + <dd>링크로 이동하는 대신 사용자에게 URL을 저장할지 물어봅니다. 값을 지정할 수도 있고, 지정하지 않을 수도 있습니다. + <ul> + <li>값이 없으면 파일 이름과 확장자는 브라우저가 다양한 인자로부터 생성해 제안합니다. + <ul> + <li>{{HTTPHeader("Content-Disposition")}} HTTP 헤더</li> + <li><a href="/ko/docs/Web/API/URL/pathname">URL 경로</a>의 마지막 조각</li> + <li>{{glossary("MIME type", "미디어 유형")}} ({{HTTPHeader("Content-Type")}} 헤더, <a href="/ko/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URL</a>의 시작 부분, <a href="/ko/docs/Web/API/URL/createObjectURL"><code>blob:</code> URL</a>의 {{domxref("Blob.type")}}에서 알아냄)</li> + </ul> + </li> + <li>값을 지정하면 저장할 때의 파일 이름으로서 제안합니다. <code>/</code>와 <code>\</code> 문자는<code>_</code>로 변환합니다. 파일시스템에서 다른 문자도 제한할 수 있으므로, 필요한 경우 브라우저가 추가로 이름을 조정할 수 있습니다.</li> + </ul> + + <div class="note"><strong>참고:</strong> + + <ul> + <li><code>download</code>는 <a href="/ko/docs/Web/Security/Same-origin_policy">동일 출처 URL</a>과 <code>blob:</code>, <code>data:</code> 스킴에서만 작동합니다.</li> + <li><code>Content-Disposition</code>의 <code>filename</code>이 <code>download</code>와 다를 땐 헤더가 우선권을 가집니다. (<code>Content-Disposition: inline</code>일 때, Firefox는 헤더를 우선하고 Chrome은 <code>download</code>를 우선합니다.)</li> + </ul> + </div> + </dd> + <dt id="href">{{HTMLAttrDef("href")}}</dt> + <dd> + <p>하이퍼링크가 가리키는 URL. 링크는 HTTP 기반 URL일 필요는 없고, 브라우저가 지원하는 모든 URL 스킴을 사용할 수 있습니다.</p> + + <ul> + <li>페이지 구획을 가리키는 프래그먼트 URL</li> + <li>미디어 파일 일부를 가리키는 미디어 프래그먼트</li> + <li><code>tel:</code> URL을 사용하는 전화번호</li> + <li><code>mailto:</code> URL을 사용하는 이메일 주소</li> + <li>웹 브라우저는 다른 URL 스킴을 지원하지 않지만, 웹사이트는 {{domxref("Navigator.registerProtocolHandler()")}}를 통해 지원할 수 있습니다.</li> + </ul> + </dd> + <dt>{{htmlattrdef("hreflang")}}</dt> + <dd>링크 URL의 인간 언어에 대한 힌트. 특별한 내장 기능은 없습니다. 가능한 값은 <a href="/ko/docs/Web/HTML/Global_attributes/lang">전역 <code>lang</code> 특성</a>과 동일합니다.</dd> + <dt>{{HTMLAttrDef("ping")}}</dt> + <dd>하나의 스페이스로 구분하는 URL 목록. 링크를 클릭해 따라갈 경우, 브라우저가 URL 각각에 {{HTTPMethod("POST")}} 요청을 전송합니다. 대개 추적 용도로 사용합니다.</dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>URL을 가져올 때 사용할 리퍼러. {{httpheader("Referrer-Policy")}} 문서에서 가능한 값과 효과를 확인하세요.</dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>하나의 스페이스로 구분하는, 연결한 URL과의 관계를 나타내는 <a href="/ko/docs/Web/HTML/Link_types">링크 유형</a> 목록.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>링크한 URL을 표시할 위치. 가능한 값은 브라우징 맥락으로, 즉 탭, 창, <code><iframe></code>의 이름이나 특정 키워드입니다. 다음 키워드는 특별한 뜻을 가지고 있습니다. + <ul> + <li><code>_self</code>: URL을 현재 브라우징 맥락에 표시합니다. 기본값.</li> + <li><code>_blank</code>: URL을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.</li> + <li><code>_parent</code>: URL을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li> + <li><code>_top</code>: URL을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li> + </ul> + + <div class="blockIndicator note"> + <p><strong>참고:</strong> <code>target</code>을 사용할 때, <code>rel="noreferrer"</code>를 추가해 <code>window.opener</code> API의 악의적인 사용을 방지하는걸 고려하세요.</p> + </div> + + <div class="blockIndicator note"> + <p><strong>참고:</strong> 최근의 브라우저(Firefox 79+ 등)에서는 target="_blank"를 지정하면 <code>rel="noopener"</code>를 적용한 것과 같은 동작을 합니다.</p> + </div> + </dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>링크 URL의 {{Glossary("MIME type")}}에 대한 힌트. 특별한 내장 기능은 없습니다.</dd> +</dl> + +<div class="hidden"> +<h3 id="Obsolete_attributes">Obsolete attributes</h3> + +<dl> + <dt id="charset">{{HTMLAttrDef("charset")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Hinted at the <a href="/en-US/docs/Glossary/character_encoding">character encoding</a> of the linked URL. + <div class="note"> + <p><strong>Note:</strong> This attribute is obsolete and <strong>should not be used by authors</strong>. Use the HTTP <a href="/en-US/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type:</code></a> header on the linked URL.</p> + </div> + </dd> + <dt id="coords">{{HTMLAttrDef("coords")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Used with <a href="#shape">the <code>shape</code> attribute</a>. A comma-separated list of coordinates.</dd> + <dt id="name">{{HTMLAttrDef("name")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Was required to define a possible target location in a page. In HTML 4.01, <code>id</code> and <code>name</code> could both be used on <code><a></code>, as long as they had identical values. + <div class="note"> + <p><strong>Note:</strong> Use the global attribute {{HTMLAttrxRef("id")}} instead.</p> + </div> + </dd> + <dt id="rev">{{HTMLAttrDef("rev")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Specified a reverse link; the opposite of <a href="#rel">the <code>rel</code> attribute</a>. Deprecated for being very confusing.</dd> + <dt id="shape">{{HTMLAttrDef("shape")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>The shape of the hyperlink’s region in an image map. + <div class="note"><strong>Note:</strong> Use the {{HTMLElement("area")}} element for image maps instead.</div> + </dd> +</dl> +</div> + +<h2 id="속성">속성</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠" title="HTML/Content categories#Phrasing content">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 컨텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#투명_콘텐츠_모델">투명함</a>. <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>(대화형 콘텐츠 제외) 또는 <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td> + <p><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠" title="HTML/Content_categories#Phrasing_content">구문 콘텐츠</a>를 허용하는 모든 요소, 또는 플로우 콘텐츠를 허용하는 모든 요소. 단, 다른 <code><a></code> 요소는 불가능.</p> + </td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><code>href</code> 특성이 존재하면 {{ariarole("link")}}, 그 외의 경우 <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td> + <p><code>href</code> 특성이 존재할 경우,</p> + + <ul> + <li>{{ARIARole("button")}}</li> + <li>{{ARIARole("checkbox")}}</li> + <li>{{ARIARole("menuitem")}}</li> + <li>{{ARIARole("menuitemcheckbox")}}</li> + <li>{{ARIARole("menuitemradio")}}</li> + <li>{{ARIARole("option")}}</li> + <li>{{ARIARole("radio")}}</li> + <li>{{ARIARole("switch")}}</li> + <li>{{ARIARole("tab")}}</li> + <li>{{ARIARole("treeitem")}}</li> + </ul> + + <p><code>href</code> 특성이 존재하지 않을 경우,</p> + + <ul> + <li>모두</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLAnchorElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="예제">예제</h2> + +<h3 id="절대_URL로_연결">절대 URL로 연결</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><a href="https://www.mozilla.com"> + Mozilla +</a></pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('절대_URL로_연결')}}</p> + +<h3 id="상대_URL로_연결">상대 URL로 연결</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><a href="//example.com">Scheme-relative URL</a> +<a href="/en-US/docs/Web/HTML">Origin-relative URL</a> +<a href="./p">Directory-relative URL</a> +</pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">a { display: block; margin-bottom: 0.5em }</pre> +</div> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample('상대_URL로_연결')}}</p> + +<h3 id="같은_페이지의_요소로_연결">같은 페이지의 요소로 연결</h3> + +<pre class="brush: html notranslate"><!-- <a> 요소로 아래의 구획에 연결 --> +<p><a href="#Section_further_down"> + 아래 제목으로 건너뛰기 +</a></p> + +<!-- 링크가 향할 제목 --> +<h2 id="Section_further_down">아래의 제목</h2> +</pre> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> <code>href="#top"</code>이나 빈 프래그먼트(<code>href="#"</code>)를 사용하면 현재 페이지의 최상단으로 이동하는 링크를 생성할 수 있습니다. <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier">HTML 명세</a>를 확인하세요.</p> +</div> + +<h3 id="이메일_주소로_연결">이메일 주소로 연결</h3> + +<p>사용자의 이메일 프로그램을 통해 새로운 메일을 보낼 수 있는 링크를 생성하려면 <code>mailto:</code> 스킴을 사용하세요.</p> + +<pre class="brush: html notranslate"><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a></pre> + +<p>제목과 본문 포함 등, <code>mailto:</code> URL에 관한 자세한 내용은 <a href="/ko/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#이메일_링크">이메일 링크</a>와 {{RFC(6068)}}을 참고하세요.</p> + +<h3 id="전화번호로_연결">전화번호로 연결</h3> + +<ul> +</ul> + +<pre class="brush: html notranslate"><a href="tel:+49.157.0156">+49 157 0156</a> +<a href="tel:+1(555)5309">(555) 5309</a></pre> + +<p><code>tel:</code> 링크는 장치의 능력에 따라 행동이 바뀝니다.</p> + +<ul> + <li>휴대전화에서는 번호를 자동으로 입력합니다.</li> + <li>대부분의 운영체제에는 Skype, FaceTime처럼 전화를 걸 수 있는 프로그램이 있습니다.</li> + <li>웹사이트는 {{domxref("Navigator.registerProtocolHandler()")}}를 사용해 전화를 걸 수 있습니다. <code>web.skype.com</code>을 참고하세요.</li> + <li>다른 행동으로는 연락처에 저장하기와 다른 장치로 전송 등이 있습니다.</li> +</ul> + +<p><code>tel:</code> URL의 구문, 추가 기능, 그 외 더 자세한 정보는 {{RFC(3966)}}을 참고하세요.</p> + +<h3 id="download_특성으로_<canvas>를_PNG로_저장하기"><code>download</code> 특성으로 <code><canvas></code>를 PNG로 저장하기</h3> + +<p>{{htmlattrxref("download", "a")}} 특성과 <code>data:</code> URL을 사용해 {{HTMLElement("canvas")}} 요소의 콘텐츠를 이미지로 저장할 수 있습니다.</p> + +<h4 id="저장_링크를_가진_그림판_예제">저장 링크를 가진 그림판 예제</h4> + +<h5 id="HTML_3">HTML</h5> + +<pre class="brush: html notranslate"><p>마우스 드래그로 그림을 그려보세요. + <a href="" download="my_painting.png">다운로드</a> +</p> + +<canvas width="300" height="300"></canvas> +</pre> + +<h5 id="CSS_2">CSS</h5> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} +canvas { + background: #fff; + border: 1px dashed; +} +a { + display: inline-block; + background: #69c; + color: #fff; + padding: 5px 10px; +}</pre> + +<h5 id="JavaScript">JavaScript</h5> + +<pre class="brush: js notranslate">var canvas = document.querySelector('canvas'), + c = canvas.getContext('2d'); +c.fillStyle = 'hotpink'; + +function draw(x, y) { + if (isDrawing) { + c.beginPath(); + c.arc(x, y, 10, 0, Math.PI*2); + c.closePath(); + c.fill(); + } +} + +canvas.addEventListener('mousemove', event => + draw(event.offsetX, event.offsetY) +); +canvas.addEventListener('mousedown', () => isDrawing = true); +canvas.addEventListener('mouseup', () => isDrawing = false); + +document.querySelector('a').addEventListener('click', event => + event.target.href = canvas.toDataURL() +); +</pre> + +<h5 id="결과_3">결과</h5> + +<p>{{EmbedLiveSample('저장_링크를_가진_그림판_예제', '100%', '400')}}</p> + +<h2 id="Specifications" name="Specifications">보안과 개인정보</h2> + +<p><code><a></code> 요소는 사용자의 보안과 개인정보에 중요한 영향을 줄 수 있습니다. <a href="/ko/docs/Web/Security/Referer_header:_privacy_and_security_concerns"><code>Referer</code> 헤더: 개인정보와 보안 고려사항</a> 문서에서 자세한 내용을 알아보세요.</p> + +<p><code>target="_blank"</code>를 <code>rel="noreferrer"</code>와 <code>rel="noopener"</code> 없이 사용하면 웹사이트가 {{domxref("Window.opener", "window.opener")}} API 악용 공격에 취약해집니다. (<a href="https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/">취약점 설명</a>) 다만, 최근 브라우저(Firefox 79+ 등)는 <code>target="_blank"</code>를 지정하면 임의로 <code>rel="noopener"</code> 설정과 동일한 보호 수준을 적용합니다.</p> + +<h2 id="Specifications" name="Specifications">접근성</h2> + +<h3 id="강한_링크_텍스트">강한 링크 텍스트</h3> + +<p>링크 안의 콘텐츠는, 맥락에서 벗어나더라도 링크가 향하는 곳을 설명해야 합니다.</p> + +<h4 id="접근성_떨어지는_약한_링크_텍스트">접근성 떨어지는 약한 링크 텍스트</h4> + +<p>심각하게 흔한 실수는 "여기를 클릭"이나 "여기"라는 단어에 링크를 한다는 것입니다.</p> + +<pre class="brush: html example-bad notranslate"><p> + 저희의 제품을 더 알아보시려면 <a href="/products">여기</a>를 클릭하세요. +</p> +</pre> + +<h4 id="강한_링크_텍스트_2">강한 링크 텍스트</h4> + +<p>다행히도 쉽게 수정할 수 있는 데다가, 접근성이 떨어지는 버전보다 더 짧습니다!</p> + +<pre class="brush: html example-good notranslate"><p> + 저희의 <a href="/products">제품을 더 알아보세요</a>. +</p></pre> + +<p>접근성 보조 기술은 페이지 안의 모든 링크를 나열하는 단축키가 있습니다. 그러나 강한 링크 텍스트가 보조 기술 사용자에게만 도움을 주는 것은 아닙니다. 모든 링크 나열 단축키는 시각적 사용자가 페이지를 빠르게 훑는 것을 흉내 내는 것이기 때문입니다.</p> + +<h3 id="onclick_이벤트"><code>onclick</code> 이벤트</h3> + +<p>앵커 요소의 <code>href</code>를 <code>#</code>이나 <code>javascript:void(0)</code>으로 지정해 페이지 새로고침을 막고, <code>click</code> 이벤트 처리기를 등록해서 가짜 버튼을 만드는 방식으로 남용하는 경우가 많습니다.</p> + +<p>이런 가짜 <code>href</code> 값은 링크를 복사하거나 드래그할 때, 링크를 새 탭이나 새 창에서 열 때, 즐겨찾기에 추가할 때와 JavaScript를 불러오고 있거나 스크립트 오류가 발생했을 때, 아니면 비활성화했을 때 예측하지 못한 동작을 유발합니다. 또한 스크린 리더 등 보조 기술에도 잘못된 의미를 전달합니다.</p> + +<p>대신 {{HTMLElement("button")}}을 사용하세요. <strong>하이퍼링크는 진짜 URL로의 탐색 용도로만 사용해야 합니다</strong>.</p> + +<h3 id="외부_링크와_비_HTML_리소스_링크">외부 링크와 비 HTML 리소스 링크</h3> + +<p><code>target="_blank"</code>로 인해 새 탭/창을 여는 링크와, 파일을 다운로드하는 링크는, 링크를 클릭했을 때 무슨 일이 발생할건지 명시해야 합니다.</p> + +<p>시력이 나쁘거나 스크린 리더로 탐색하는 사용자, 혹은 지각 능력이 낮은 사용자는 예상하지 못한 상황에서 새 탭, 새 창, 다른 앱이 켜지는 순간 혼란스러울 수 있습니다. 오래된 스크린 리더는 이런 상황을 아예 알려주지 못할 수도 있습니다.</p> + +<h4 id="새로운_탭창을_여는_링크">새로운 탭/창을 여는 링크</h4> + +<pre class="brush: html notranslate"><a target="_blank" href="https://ko.wikipedia.org"> + 위키백과 (새 탭에서 열림) +</a> +</pre> + +<h4 id="비_HTML_리소스_링크">비 HTML 리소스 링크</h4> + +<pre class="brush: html notranslate"><a href="2017-annual-report.ppt"> + 2017 연간 보고서 (PowerPoint) +</a> +</pre> + +<p>아이콘을 사용해 링크의 행동을 강조할 땐 {{HTMLAttrxRef("alt", "img", "대체 텍스트", 1)}}를 꼭 지정하세요.</p> + +<pre class="brush: html notranslate"><a target="_blank" href="https://ko.wikipedia.org"> + 위키백과 + <img alt="(새 탭에서 열림)" src="newtab.svg"> +</a> + +<a href="2017-annual-report.ppt"> + 2017 연간 보고서 + <img alt="(PowerPoint 파일)" src="ppt-icon.svg"> +</a></pre> + +<ul> + <li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM: Links and Hypertext - Hypertext Links</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN / Understanding WCAG, Guideline 3.2</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">G200: Opening new windows and tabs from a link only when necessary</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201: Giving users advanced warning when opening a new window</a></li> +</ul> + +<h3 id="건너뛰기_링크">건너뛰기 링크</h3> + +<p><strong>건너뛰기 링크</strong>(skip link)는 {{HTMLElement("body")}} 콘텐츠에서 가능한 앞쪽에 배치하는 링크로, 페이지의 주요 콘텐츠 시작점을 가리킵니다. 건너뛰기 링크는 보통 포커스 전까지 숨겨집니다.</p> + +<pre class="brush: html notranslate"><body> + <a href="#content">내용으로 건너뛰기</a> + + <header> + … + </header> + + <main id="content"> <!-- 여기로 건너뜀 --> +</pre> + +<pre class="brush: css notranslate">.skip-link { + position: absolute; + top: -3em; + background: #fff; +} +.skip-link:focus { + top: 0; +}</pre> + +<p>건너뛰기 링크는 헤더 내비게이션과 같이 여러 페이지에서 반복되는 콘텐츠를 키보드 사용자가 쉽게 생략할 수 있도록 도와줍니다.</p> + +<p>건너뛰기 링크는 스위치 조작, 음성 명령, 마우스 스틱/헤드 완드처럼 반복 콘텐츠를 건너뛰기 힘든 보조 기술 사용자에게 큰 도움이 됩니다.</p> + +<ul> + <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li> + <li><a href="https://a11yproject.com/posts/skip-nav-links/">How-to: Use Skip Navigation links</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN / Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1</a></li> +</ul> + +<h3 id="크기와_간격">크기와 간격</h3> + +<h4 id="크기">크기</h4> + +<p>링크와 같은 대화형 요소는 상호작용하기 충분한 크기의 활성화 영역을 가져야 합니다. 충분한 크기는 운동 조절 장애를 가진 사용자와, 터치스크린처럼 정확하지 않은 입력 도구 사용자처럼 다양한 사람을 돕습니다. 최소 44x44의 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">CSS 픽셀</a> 크기를 권고합니다.</p> + +<p>산문 내의 텍스트로만 이루어진 링크는 위 규칙에서 제외할 수 있지만, 그래도 활성화하기 쉬운 크기를 확보하는 것이 좋습니다.</p> + +<ul> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Success Criterion 2.5.5: Target Size</a></li> + <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5</a></li> + <li><a href="https://a11yproject.com/posts/large-touch-targets/">Quick test: Large touch targets</a></li> +</ul> + +<h4 id="간격">간격</h4> + +<p>링크와 같은 대화형 요소 다수를 시각적으로 가까이 배치할 땐 서로를 분리하는 공간을 둬야 합니다. 간격은 운동 조절 장애를 가진 사용자가 원하지 않는 상호작용을 하는걸 방지할 수 있습니다.</p> + +<p>간격은 {{CSSxRef("margin")}}과 같은 CSS 속성으로 설정할 수 있습니다.</p> + +<ul> + <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}</td> + <td>{{Spec2("Referrer Policy")}}</td> + <td>Added the <code>referrer</code>attribute.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "text-level-semantics.html#the-a-element", "<a>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "text-level-semantics.html#the-a-element", "<a>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/links.html#h-12.2", "<a>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.a")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("link")}}는 <code><a></code>와 유사하지만, 사용자에게 노출하지 않는 메타데이터 하이퍼링크를 위한 요소입니다.</li> + <li>{{CSSxRef(":link")}}는 유효한 <code>href</code> 특성을 가진 <code><a></code> 요소를 선택하는 CSS 의사 클래스입니다.</li> +</ul> diff --git a/files/ko/web/html/element/abbr/index.html b/files/ko/web/html/element/abbr/index.html new file mode 100644 index 0000000000..7deefb3ce3 --- /dev/null +++ b/files/ko/web/html/element/abbr/index.html @@ -0,0 +1,194 @@ +--- +title: <abbr> +slug: Web/HTML/Element/abbr +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/abbr +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><abbr></code> 요소</strong>는 준말 또는 머리글자를 나타냅니다.</span> 선택 속성인 {{htmlattrxref("title")}}을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있습니다. <code>title</code> 속성은 전체 설명만을 가져야 하며 다른건 포함할 수 없습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}</div> + + + +<table class="htmlelt"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠" title="HTML/Content categories#Phrasing content">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠" title="HTML/Content_categories#Phrasing_content">구문 콘텐츠</a></td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠" title="HTML/Content_categories#Phrasing_content">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다. 단, 다른 요소와 달리 <code><abbr></code> 요소에서의 {{htmlattrxref("title")}} 특성은 특정한 의미를 가지며, <code>title</code>은 준말에 대한 설명 혹은 확장 형태를 사람이 읽을 수 있는 형태를 값으로 가져야 합니다. 브라우저는 <code>title</code>의 값을 보통 마우스 커서를 올렸을 때 나타나는 툴팁으로 보여줍니다.</p> + +<p>각각의 <code><abbr></code> 요소는 서로 독립적입니다. 하나의 요소에 <code>title</code>을 제공한다고 나머지에 지정하지 않아도 되는 것은 아닙니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<h3 id="많이_쓰이는_곳">많이 쓰이는 곳</h3> + +<p>당연히 모든 준말을 <code><abbr></code>로 표시해야 하는 것은 아닙니다. 그러나 표시할 경우 도움이 될, 다음과 같은 경우가 있습니다.</p> + +<ul> + <li>사용한 준말과 머리글자를 문서 콘텐츠 플로우 밖에서 풀어서 설명하고 싶으면 적절한 {{htmlattrxref("title")}} 특성을 지정한 <code><abbr></code> 요소를 사용하세요.</li> + <li>독자에게 익숙하지 않을 수 있는 준말을 사용할 경우 <code><abbr></code>과 함께 <code>title</code> 특성이나 인라인 텍스트로 단어에 대한 정의를 제공하세요.</li> + <li>준말임을 명시적으로 나타내야 할 경우 <code><abbr></code> 요소가 유용합니다. 이를 응용하면 스타일링이나 스크립트 적용에도 사용할 수 있습니다.</li> + <li><code><abbr></code>을 {{HTMLElement("dfn")}}과 같이 사용하면 준말이나 머리글자를 그 정의와 연결할 수 있습니다. 아래의 {{anch("준말 정의하기")}}을 참고하세요.</li> +</ul> + +<h3 id="문법_고려사항">문법 고려사항</h3> + +<p>수량이 문법에 영향을 미치는 언어(one apple vs. two apple<strong>s</strong>)의 경우, <code><abbr></code> 요소의 텍스트와 <code>title</code> 특성의 내용이 같은 형태를 따르도록 하세요. 아랍어처럼 두 개 이상의 복수형 구분을 두는 언어에서 특히 중요하나, 영어도 해당합니다.</p> + +<h2 id="기본_스타일">기본 스타일</h2> + +<p><code><abbr></code>의 목적은 오로지 HTML 작성자의 편리함을 위함이며, 모든 브라우저는 기본적으로 인라인({{cssxref('display')}}<code>: inline</code>)으로 렌더링 합니다. 그러나 기본 스타일은 브라우저마다 다를 수 있습니다.</p> + +<ul> + <li>Internet Explorer 등 일부 브라우저는 {{HTMLElement("span")}} 요소와 동일하게 그립니다.</li> + <li>Opera, Firefox 등은 요소에 점선 밑줄을 추가합니다.</li> + <li>몇몇은 점선을 추가할 뿐만 아니라, 영어 소문자도 작은 대문자로 표현합니다. 이를 제거하려면 CSS {{cssxref('font-variant')}}를 <code>none</code>으로 설정하세요.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="준말임을_나타내기">준말임을 나타내기</h3> + +<p>설명 없이, 단순히 특정 단어가 준말임을 나타내기만 하고자 하면 <code><abbr></code>을 다른 특성 없이 사용하세요.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p>Using <abbr>HTML</abbr> is fun and easy!</p></pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("준말임을_나타내기")}}</p> + +<h3 id="준말_스타일링">준말 스타일링</h3> + +<p>CSS를 사용해 준말에 적용할 사용자 지정 스타일을 적용할 수 있습니다.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">abbr { + font-variant: all-small-caps; +}</pre> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample("준말_스타일링")}}</p> + +<h3 id="펼친_형태_보여주기">펼친 형태 보여주기</h3> + +<p>{{htmlattrxref("title")}} 특성을 사용하면 준말과 머리글자를 펼친 원래 형태를 보여줄 수 있습니다.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html notranslate"><p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big +time.</p></pre> + +<h4 id="결과_3">결과</h4> + +<p>{{EmbedLiveSample("펼친_형태_보여주기")}}</p> + +<h3 id="준말_정의하기">준말 정의하기</h3> + +<p><code><abbr></code>과 {{HTMLElement("dfn")}}을 사용하면 준말을 정식으로 정의할 수 있습니다.</p> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html notranslate"><p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> +</dfn> is a markup language used to create the semantics and structure +of a web page.</p> + +<p>A <dfn id="spec">Specification</dfn> +(<abbr title="Specification">spec</abbr>) is a document that outlines +in detail how a technology or API is intended to function and how it is +accessed.</p></pre> + +<h4 id="결과_4">결과</h4> + +<p>{{EmbedLiveSample("준말_정의하기", 600, 120)}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>준말과 머리글자가 처음 사용될 때, 그 뜻을 풀어 설명하면 독자가 문서를 이해하기 쉬워집니다. 특히 콘텐츠가 기술이나 산업에 관련된 전문적인 내용인 경우 더욱 그렇습니다.</p> + +<h4 id="예제_2">예제</h4> + +<pre class="brush: html notranslate"><p>JavaScript Object Notation(<abbr>JSON</abbr>)은 경량의 데이터 교환 형식입니다.</p> +</pre> + +<p>무엇보다 용어나 개념에 익숙하지 않은 사람, 언어를 새로 접한 사람, 그리고 인지력 문제를 겪고 있는 사용자에게 큰 도움이 됩니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.abbr")}}</p> diff --git a/files/ko/web/html/element/address/index.html b/files/ko/web/html/element/address/index.html new file mode 100644 index 0000000000..cd43856ceb --- /dev/null +++ b/files/ko/web/html/element/address/index.html @@ -0,0 +1,128 @@ +--- +title: <address> +slug: Web/HTML/Element/address +tags: + - Element + - HTML + - HTML sections + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - Reference + - Web +translation_of: Web/HTML/Element/address +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><address></code> 요소</strong>는 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/address.html", "tabbed-standard")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<p><code><address></code> 요소의 콘텐츠가 제공하는 연락처 정보는 현재 맥락에 적절한 아무 형태나 취할 수 있으며, 물리적 주소, URL, 이메일 주소, 전화번호, SNS 식별자, 좌표 등 어떠한 정보라도 포함할 수 있습니다. 반드시 포함해야 하는 정보는 연락처가 가리키는 개인, 조직, 단체의 이름입니다.</p> + +<p><code><address></code>는 다양한 맥락에서 사용할 수 있습니다. 사업체 연락 방법을 페이지 헤더에 배치할 때도 쓸 수 있고, {{HTMLElement("article")}} 내부에 배치해서 글의 작성자를 나타낼 수도 있습니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>. 단, 다음의 요소는 사용할 수 없습니다.<br> + 다른 <code><address></code>, 제목 콘텐츠 ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), 구획 콘텐츠 ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), {{HTMLElement("header")}}, {{HTMLElement("footer")}} 요소.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소. 단, <code><address></code> 요소 제외.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>기존 명세에서의 <code><address></code> 요소는 문서 작성자의 연락처만 나타내는 요소였습니다. 그러나 최신 명세에서 임의의 연락처를 포함할 수 있도록 수정됐습니다.</li> + <li>연락처 외의 정보(출판일 등)를 담아서는 안됩니다.</li> + <li>보통, 현재 구획에 {{htmlelement("footer")}} 요소가 존재하면 <code><address></code>를 그 안에 배치할 수 있습니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 <code><address></code>를 사용해 글 작성자의 연락처를 구별하는 모습을 보입니다.</p> + +<pre class="brush: html notranslate"><address> + You can contact author at <a href="http://www.somedomain.com/contact"> + www.somedomain.com</a>.<br> + If you see any bugs, please <a href="mailto:webmaster@somedomain.com"> + contact webmaster</a>.<br> + You may also want to visit us:<br> + Mozilla Foundation<br> + 331 E Evelyn Ave<br> + Mountain View, CA 94041<br> + USA +</address> +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제", "300", "200")}}</p> + +<p>비록 겉보기는 {{HTMLElement("i")}}나 {{HTMLElement("em")}} 요소와 같지만, <code><address></code> 요소는 자체적인 의미를 갖고 있으므로 연락처 표기에는 <code><address></code>가 더 적합합니다.</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.address")}}</p> diff --git a/files/ko/web/html/element/applet/index.html b/files/ko/web/html/element/applet/index.html new file mode 100644 index 0000000000..274b0635db --- /dev/null +++ b/files/ko/web/html/element/applet/index.html @@ -0,0 +1,115 @@ +--- +title: <applet> +slug: Web/HTML/Element/applet +translation_of: Web/HTML/Element/applet +--- +<div>{{obsolete_header}}</div> + +<h2 id="개요">개요</h2> + +<p>HTML의 Applet 태그 (<code><applet></code>) 는 자바 애플릿을 보이게 하는 곳에 쓰입니다.</p> + +<div class="note"> +<p><strong>사용시 참고: </strong>This element has been removed in HTML5 and shouldn't be used anymore. Instead web developers should use the more generic {{HTMLElement("object")}} element.</p> +</div> + +<h2 id="Attributes" name="Attributes">Attributes</h2> + +<dl> + <dt>{{htmlattrdef("align")}}</dt> + <dd>This attribute is used to position the applet on the page relative to content that might flow around it. The HTML 4.01 specification defines values of bottom, left, middle, right, and top, whereas Microsoft and Netscape also might support <strong>absbottom</strong>, <strong>absmiddle</strong>, <strong>baseline</strong>, <strong>center</strong>, and <strong>texttop</strong>.</dd> + <dt>{{htmlattrdef("alt")}}</dt> + <dd>This attribute causes a descriptive text alternate to be displayed on browsers that do not support Java. Page designers should also remember that content enclosed within the <code><applet></code> element may also be rendered as alternative text.</dd> + <dt>{{htmlattrdef("archive")}}</dt> + <dd>This attribute refers to an archived or compressed version of the applet and its associated class files, which might help reduce download time.</dd> + <dt>{{htmlattrdef("code")}}</dt> + <dd>This attribute specifies the URL of the applet's class file to be loaded and executed. Applet filenames are identified by a .class filename extension. The URL specified by code might be relative to the <code>codebase</code> attribute.</dd> + <dt>{{htmlattrdef("codebase")}}</dt> + <dd>This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored.</dd> + <dt>{{htmlattrdef("datafld")}}</dt> + <dd>This attribute, supported by Internet Explorer 4 and higher, specifies the column name from the data source object that supplies the bound data. This attribute might be used to specify the various {{HTMLElement("param")}} elements passed to the Java applet.</dd> + <dt>{{htmlattrdef("datasrc")}}</dt> + <dd>Like <code>datafld</code>, this attribute is used for data binding under Internet Explorer 4. It indicates the id of the data source object that supplies the data that is bound to the {{HTMLElement("param")}} elements associated with the applet.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>This attribute specifies the height, in pixels, that the applet needs.</dd> + <dt>{{htmlattrdef("hspace")}}</dt> + <dd>This attribute specifies additional horizontal space, in pixels, to be reserved on either side of the applet.</dd> + <dt>{{htmlattrdef("mayscript")}}</dt> + <dd>In the Netscape implementation, this attribute allows access to an applet by programs in a scripting language embedded in the document.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>This attribute assigns a name to the applet so that it can be identified by other resources; particularly scripts.</dd> + <dt>{{htmlattrdef("object")}}</dt> + <dd>This attribute specifies the URL of a serialized representation of an applet.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>As defined for Internet Explorer 4 and higher, this attribute specifies a URL for an associated file for the applet. The meaning and use is unclear and not part of the HTML standard.</dd> + <dt>{{htmlattrdef("vspace")}}</dt> + <dd>This attribute specifies additional vertical space, in pixels, to be reserved above and below the applet.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>This attribute specifies in pixels the width that the applet needs.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><applet code="game.class" align="left" archive="game.zip" height="250" width="350"> + <param name="difficulty" value="easy"> + <b>죄송합니다. 이 게임을 플레이하려면 자바가 설치되어 있어야 합니다.</b> +</applet> +</pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notes">Notes</h2> + +<p>The W3C specification does not encourage the use of <code><applet></code> and prefers the use of the {{HTMLElement("object")}} tag. Under the strict definition of HTML 4.01, this element is deprecated and entirely obsolete in HTML5.</p> + +<div>{{HTMLRef}}</div> diff --git a/files/ko/web/html/element/area/index.html b/files/ko/web/html/element/area/index.html new file mode 100644 index 0000000000..4c3f6d93a7 --- /dev/null +++ b/files/ko/web/html/element/area/index.html @@ -0,0 +1,184 @@ +--- +title: <area> +slug: Web/HTML/Element/area +tags: + - Element + - HTML + - HTML embedded content + - Reference + - Web +translation_of: Web/HTML/Element/area +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><area></code> 요소</strong>는 이미지의 핫스팟 영역을 정의하고 {{glossary("hyperlink", "하이퍼링크")}}를 추가할 수 있습니다. {{htmlelement("map")}} 요소 안에서만 사용할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 존재해야 하며 닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소. 단, 조상 중 {{htmlelement("map")}} 요소가 존재해야 합니다.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td>{{htmlattrxref("href", "area")}} 특성이 존재하면 {{ariarole("link")}}, 그 외의 경우 <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLAreaElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("alt")}}</dt> + <dd>이미지를 출력하지 않는 브라우저에서 대신 표시할 대안 텍스트입니다. 텍스트의 내용은 대안 텍스트 없이 이미지만 표시할 때와 동일한 수준의 선택지를 나타낼 수 있어야 합니다. {{htmlattrxref("href", "area")}} 특성이 존재할 경우 필수 사항입니다.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("coords")}}</dt> + <dd>핫스팟 영역을 지정하는 일련의 좌표입니다. 값의 수와 의미는 <code>shape</code> 특성의 값에 따라 달라집니다.</dd> + <dd> + <ul> + <li><code>rect</code>: 좌상단과 우하단을 나타내는 두 개의 x, y 쌍입니다.</li> + <li><code>circle</code>: <code>x,y,r</code>로서 <code>x,y</code>는 원의 중심 좌표이며 <code>r</code>은 반지름입니다.</li> + <li><code>poly</code>: 다각형의 꼭지점을 나타내는 다수의 x, y 쌍(<code>x1,y1,x2,y2,x3,y3,...</code>)입니다.</li> + </ul> + 값의 단위는 CSS 픽셀입니다.</dd> + <dt>{{htmlattrdef("download")}}</dt> + <dd>특성이 존재할 경우, 이 하이퍼링크는 리소스 다운로드 용도로 사용하는 것을 의도했음을 나타냅니다. {{htmlelement("a")}}의 {{htmlattrxref("download", "a")}} 특성 설명에서 전체 설명을 볼 수 있습니다.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd><code><area></code> 하이퍼링크의 대상입니다. 유효한 URL이야 합니다. 생략할 경우, 이 <code><area></code> 요소는 하이퍼링크를 나타내지 않습니다.</dd> + <dt>{{htmlattrdef("hreflang")}}</dt> + <dd>연결한 리소스의 언어를 나타냅니다. 가능한 값은 <a class="external external-icon" href="https://www.ietf.org/rfc/bcp/bcp47.txt" title="Tags for Identifying Languages">BCP47</a>에 따릅니다. {{htmlattrxref("href", "area")}} 특성이 존재할 때만 사용하세요.</dd> + <dt>{{htmlattrdef("ping")}}</dt> + <dd>하이퍼링크를 따라갈 때, 백그라운드에서 브라우저가 {{HTTPMethod("POST")}} 요청을 본문 <code>PING</code>으로 전송할 URL의 목록입니다. 공백으로 구분하며 주로 추적용으로 사용합니다.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>A string indicating which referrer to use when fetching the resource: + <ul> + <li><code>"no-referrer"</code> meaning that the <code>Referer:</code> header will not be sent.</li> + <li>"<code>no-referrer-when-downgrade</code>" meaning that no <code>Referer:</code> header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.</li> + <li><code>"origin"</code> meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.</li> + <li>"origin-when-cross-origin" meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path.</li> + <li><code>"unsafe-url"</code> meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.</li> + </ul> + </dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>For anchors containing the <strong>href</strong> attribute, this attribute specifies the relationship of the target object to the link object. The value is a comma-separated list of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types">link types values</a>. The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the <strong>href</strong> attribute is present.</dd> + <dt>{{htmlattrdef("shape")}}</dt> + <dd>관련된 핫 스폿의 모양. The specifications for HTML 5 and HTML 4 define the values <code>rect</code>, which defines a rectangular region; <code>circle</code>, which defines a circular region; <code>poly</code>, which defines a polygon; and <code>default</code>, which indicates the entire region beyond any defined shapes. Many browsers, notably Internet Explorer 4 and higher, support <code>circ</code>, <code>polygon</code>, and <code>rectangle</code> as valid values for <strong>shape</strong>; these values are {{Non-standard_inline}}.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("target")}}</dt> + <dd>이 속성은 링크된 리소스가 어디에 표시될지 지정합니다. HTML4에서 이것은 프레임의 이름이나 키워드가 될수 있습니다. HTML5에서는, 브라우징 컨텍스트(탭,윈도우,인라인 프레임)의 이름이나 키워드가 될수 있습니다. 다음 키워드들은 특별한 의미를 가지고 있습니다. + <ul> + <li><code>_self</code>: 결과를 현재 HTML4 프레임 또는 HTML5 브라우징 컨텍스트에 로드합니다. 이 target 속성이 정의되어있지 않은경우 이 값이 기본값이 됩니다.</li> + <li><code>_blank</code>: 결과를 이름없는 새로운 HTML4 윈도우나 HTML5 브라우징 컨텍스트에 로드합니다.</li> + <li><code>_parent</code>: 결과를 현재 HTML4 프레임의 부모 프레임셋에 로드하거나 부모 HTML5 브라우징 컨텍스트에 로드합니다. 만약 부모가 없을 경우 _self와 동일하게 여겨집니다.</li> + <li><code>_top</code>: HTML4에서는, 다른 모든 프레임을 취소하고 결과를 꽉찬 본래의 윈도우에 로드합니다. HTML5에서는, 결과를 최상위 브라우징 컨텍스트에 로드합니다. 만약 부모가 없다면, 이 옵션은 _self와 같이 행동합니다.</li> + </ul> + 이 속성은 <strong>href</strong> 속성이 존재할떄만 사용합니다.</dd> +</dl> + +<div class="hidden"> +<h3 id="Deprecated_attributes">Deprecated attributes</h3> + +<dl> + <dt>{{htmlattrdef("name")}} {{deprecated_inline}}</dt> + <dd>Define a names for the clickable area so that it can be scripted by older browsers.</dd> + <dt>{{htmlattrdef("nohref")}} {{deprecated_inline}}</dt> + <dd>Indicates that no hyperlink exists for the associated area. + <div class="note"> + <p><strong>Note: </strong>Since HTML5, omitting the <code>href</code> attribute is sufficient.</p> + </div> + </dd> + <dt>{{htmlattrdef("tabindex")}} {{deprecated_inline}}</dt> + <dd>A numeric value specifying the position of the defined area in the browser tabbing order. This attribute is global in HTML5.</dd> + <dt>{{htmlattrdef("type")}} {{deprecated_inline}}</dt> + <dd>No effect. Browsers ignore it. (The W3C 5.3 fork of the HTML specification defines it as valid, but <a href="https://html.spec.whatwg.org/multipage/#the-area-element">the canonical HTML specification</a> doesn’t, and it has no effect in any user agents.)</dd> +</dl> +</div> + +<h2 id="예제">예제</h2> + +<pre class="brush: html notranslate"><map name="primary"> + <area shape="circle" coords="200,250,25" href="another.htm" /> + <area shape="default" nohref /> +</map> +<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic"> +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제', 360, 160)}}</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Added the <code>referrerpolicy</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '<area>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-area-element', '<area>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<area>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.area")}}</p> diff --git a/files/ko/web/html/element/article/index.html b/files/ko/web/html/element/article/index.html new file mode 100644 index 0000000000..6602a7722e --- /dev/null +++ b/files/ko/web/html/element/article/index.html @@ -0,0 +1,137 @@ +--- +title: <article> +slug: Web/HTML/Element/article +tags: + - Element + - HTML + - HTML sections + - Reference + - Web +translation_of: Web/HTML/Element/article +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><article></code> 요소</strong>는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다.</span> 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>하나의 문서가 여러 개의 <code><article></code>을 가질 수 있습니다. 예컨대 사용자가 스크롤하면 계속해서 다음 글을 보여주는 블로그의 경우, 각각의 글이 <code><article></code> 요소가 되며, 그 안에는 또 여러 개의 {{htmlelement("section")}}이 존재할 수 있습니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><dfn><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC" title="HTML/Content_categories">콘텐츠 카테고리</a></dfn></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구획_콘텐츠">구획 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#뚜렷한_컨텐츠">뚜렷한 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row"><dfn>가능한 콘텐츠</dfn></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content_categories#Flow_content">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row"><dfn>태그 생략</dfn></th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row"><dfn>가능한 부모 요소</dfn></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">플로우 콘텐츠</a>를 허용하는 모든 요소.<br> + <code><article></code> 요소는 {{HTMLElement("address")}}의 후손이 될 수 없음에 주의하세요.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td>{{ariarole("article")}}</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>각각의 <code><article></code>을 식별할 수단이 필요합니다. 주로 제목({{htmlelement('h1')}}-{{htmlelement('h6')}}) 요소를 <code><article></code>의 자식으로 포함하는 방법을 사용합니다.</li> + <li><code><article></code> 요소가 중첩되어 있을 때, 안쪽에 있는 요소는 바깥쪽에 있는 요소와 관련된 글을 나타냅니다. 예를 들어 블로그 글의 댓글은, 글을 나타내는 <code><article></code> 요소 안에 중첩한 <code><article></code>로 나타낼 수 있습니다.</li> + <li><code><article></code> 요소의 작성자 정보를 {{HTMLElement("address")}} 요소를 이용하여 제공할 수 있습니다. 그러나 중첩 <code><article></code>에는 적용되지 않습니다.</li> + <li><code><article></code> 요소의 작성일자와 시간은 {{HTMLElement("time")}} 요소의 {{htmlattrxref("datetime", "time")}} 속성을 이용하여 설명할 수 있습니다. 참고로 {{HTMLElement("time")}} 요소의 {{htmlattrxref("pubdate", "time")}} 속성은 더 이상 {{glossary("W3C")}} {{glossary("HTML5")}} 표준안에 포함되지 않습니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<pre class="brush: html notranslate"><article class="film_review"> + <header> + <h2>Jurassic Park</h2> + </header> + <section class="main_review"> + <p>Dinos were great!</p> + </section> + <section class="user_reviews"> + <article class="user_review"> + <p>Way too scary for me.</p> + <footer> + <p> + Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa. + </p> + </footer> + </article> + <article class="user_review"> + <p>I agree, dinos are my favorite.</p> + <footer> + <p> + Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom. + </p> + </footer> + </article> + </section> + <footer> + <p> + Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff. + </p> + </footer> +</article> +</pre> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.article")}}</p> diff --git a/files/ko/web/html/element/aside/index.html b/files/ko/web/html/element/aside/index.html new file mode 100644 index 0000000000..416f1d5edc --- /dev/null +++ b/files/ko/web/html/element/aside/index.html @@ -0,0 +1,122 @@ +--- +title: '<aside>: 별도 구획 요소' +slug: Web/HTML/Element/aside +tags: + - Element + - HTML + - HTML sections + - HTML5 + - Reference + - Web +translation_of: Web/HTML/Element/aside +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><aside></code> 요소</strong>는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/aside.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구획_콘텐츠">구획 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#뚜렷한_컨텐츠">뚜렷한 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">플로우 콘텐츠</a>를 허용하는 모든 요소.<br> + <code><aside></code> 요소는 {{HTMLElement("address")}}의 후손이 될 수 없음에 주의하세요.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><code><a href="/ko/docs/Web/Accessibility/ARIA/Roles/Complementary_role">complementary</a></code></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 요소</th> + <td>{{ARIARole("feed")}}, {{ariarole("none")}}, {{ARIARole("note")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}, {{ARIARole("search")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>괄호에 묶인 텍스트라도 문서의 주요 플로우에 포함되어야 하므로 <code><aside></code>로 나타내선 안됩니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="<aside>_사용하기"><code><aside></code> 사용하기</h3> + +<p>다음 예제는 글 내의 문단을 <code><aside></code>로 표시합니다. 해당 문단은 글의 주제와 간접적으로만 연결되어 있습니다.</p> + +<pre class="brush: html"><article> + <p> + 디즈니 만화영화 <em>인어 공주</em>는 + 1989년 처음 개봉했습니다. + </p> + <aside> + 인어 공주는 첫 개봉 당시 8700만불의 흥행을 기록했습니다. + </aside> + <p> + 영화에 대한 정보... + </p> +</article></pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.aside")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽">HTML 구획과 개요 사용하기</a></li> +</ul> diff --git a/files/ko/web/html/element/audio/index.html b/files/ko/web/html/element/audio/index.html new file mode 100644 index 0000000000..57056b3230 --- /dev/null +++ b/files/ko/web/html/element/audio/index.html @@ -0,0 +1,417 @@ +--- +title: <audio> +slug: Web/HTML/Element/audio +tags: + - Element + - HTML + - HTML embedded content + - HTML5 + - Media + - Multimedia + - Reference + - Web + - 소리 + - 오디오 +translation_of: Web/HTML/Element/audio +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><audio></code> 요소</strong>는 문서에 소리 콘텐츠를 포함할 때 사용합니다.</span> <code>src</code> 특성 또는 {{htmlelement("source")}} 요소를 사용해 한 개 이상의 오디오 소스를 지정할 수 있으며, 다수를 지정한 경우 가장 적절한 소스를 브라우저가 고릅니다. {{domxref("MediaStream")}}을 사용하면 미디어 스트림을 바라볼 수도 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/audio.html","tabbed-standard")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("autoplay")}}</dt> + <dd>지정한 경우, 전체 오디오 파일의 다운로드를 기다리지 않고 가능한 빠른 시점에 재생을 시작합니다. + <div class="note"><strong>참고</strong>: 오디오 및 오디오를 가진 비디오를 자동으로 재생하는 사이트는 사용자 경험에 악영향을 끼칠 수 있으므로 피해야 합니다. 반드시 자동 재생을 제공해야 한다면 사용자의 명시적인 동의를 얻어야 하도록 해야 합니다. 그러나, 미디어 소스가 사용자의 선택에 의해 나중에 정해지는 경우라면 자동 재생이 유용할 수 있습니다. <a href="/ko/docs/Web/Media/Autoplay_guide">자동 재생 안내서</a>를 방문하고 추가 정보와 적절한 사용법을 알아보세요.</div> + </dd> + <dt>{{htmlattrdef("controls")}}</dt> + <dd>지정한 경우 오디오 재생, 볼륨, 탐색, 일시 정지 컨트롤을 브라우저에서 제공합니다.</dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>CORS를 사용해 지정한 오디오 파일을 가져올지 나타내는 열거형 특성. <a href="/ko/docs/Web/HTML/CORS_enabled_image">교차 출처 활성화 리소스</a>는 {{HTMLElement("canvas")}} 요소에 사용해도 캔버스를 "오염"시키지 않습니다. 가능한 값은 다음과 같습니다. + <dl> + <dt><code>anonymous</code></dt> + <dd>자격 증명 없이 교차 출처 요청을 전송합니다. 즉, <code>Origin:</code> HTTP 헤더를 쿠키, X.509 인증서, HTTP Basic 인증 없이 전송합니다. 서버에서 <code>Access-Control-Allow-Origin:</code> HTTP 헤더를 지정하지 않음으로써 요청 출처 사이트에 자격 증명을 보내지 않는다면 이미지는 "오염"되고, 사용처가 제한됩니다.</dd> + <dt><code>use-credentials</code></dt> + <dd>자격 증명과 함께 교차 출처 요청을 전송합니다. 즉, <code>Origin:</code> HTTP 헤더를 쿠키, X 509 인증서, 또는 HTTP Basic 이증과 함께 전송합니다. 서버에서 <code>Access-Control-Allow-Origin:</code> HTTP 헤더를 통한 자격 증명을 요청 출처 사이트에 보내지 않는다면 이미지는 "오염"되고, 사용처가 제한됩니다.</dd> + </dl> + 특성이 존재하지 않으면 리소스를 CORS 요청 없이(<code>Origin:</code> HTTP 헤더 없이) 가져오므로, {{htmlelement("canvas")}}를 오염시키게 됩니다. 유효하지 않은 값의 경우 anonymous 키워드를 사용한 것으로 간주합니다.</dd> + <dt>{{htmlattrdef("currentTime")}}</dt> + <dd> + <p>Reading <code>currentTime</code> returns a double-precision floating-point value indicating the current playback position, in seconds, of the audio. If the audio's metadata isn't available yet—thereby preventing you from knowing the media's start time or duration—<code>currentTime</code> instead indicates, and can be used to change, the time at which playback will begin. Otherwise, setting <code>currentTime</code> sets the current playback position to the given time and seeks the media to that position if the media is currently loaded.</p> + + <p>If the audio is being streamed, it's possible that the {{Glossary("user agent")}} may not be able to obtain some parts of the resource if that data has expired from the media buffer. Other audio may have a media timeline that doesn't start at 0 seconds, so setting <code>currentTime</code> to a time before that would fail. For example, if the audio's media timeline starts at 12 hours, setting <code>currentTime</code> to 3600 would be an attempt to set the current playback position well before the beginning of the media, and would fail. The {{domxref("HTMLMediaElement.getStartDate", "getStartDate()")}} method can be used to determine the beginning point of the media timeline's reference frame.</p> + </dd> + <dt>{{htmlattrdef("disableRemotePlayback")}} {{experimental_inline}}</dt> + <dd>A Boolean attribute used to disable the capability of remote playback in devices that are attached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast, DLNA, AirPlay, etc). See <a href="https://www.w3.org/TR/remote-playback/#the-disableremoteplayback-attribute">this proposed specification</a> for more information. + <p class="note">In Safari, you can use <a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html"><code>x-webkit-airplay="deny"</code></a> as a fallback.</p> + </dd> + <dt>{{htmlattrdef("duration")}} {{ReadOnlyInline}}</dt> + <dd>A double-precision floating-point value which indicates the duration (total length) of the audio in seconds, on the media's timeline. If no media is present on the element, or the media is not valid, the returned value is <code>NaN</code>. If the media has no known end (such as for live streams of unknown duration, web radio, media incoming from <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>, and so forth), this value is <code>+Infinity</code>.</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>A Boolean attribute: if specified, the audio player will automatically seek back to the start upon reaching the end of the audio.</dd> + <dt>{{htmlattrdef("muted")}}</dt> + <dd>A Boolean attribute that indicates whether the audio will be initially silenced. Its default value is <code>false</code>.</dd> + <dt>{{htmlattrdef("preload")}}</dt> + <dd>This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values: + <ul> + <li><code>none</code>: Indicates that the audio should not be preloaded.</li> + <li><code>metadata</code>: Indicates that only audio metadata (e.g. length) is fetched.</li> + <li><code>auto</code>: Indicates that the whole audio file can be downloaded, even if the user is not expected to use it.</li> + <li><em>empty string</em>: A synonym of the <code>auto</code> value.</li> + </ul> + + <p>The default value is different for each browser. The spec advises it to be set to <code>metadata</code>.</p> + + <div class="note"><strong>Usage notes:</strong> + + <ul> + <li>The <code>autoplay</code> attribute has precedence over <code>preload</code>. If <code>autoplay</code> is specified, the browser would obviously need to start downloading the audio for playback.</li> + <li>The browser is not forced by the specification to follow the value of this attribute; it is a mere hint.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>The URL of the audio to embed. This is subject to <a href="/en-US/docs/HTTP_access_control">HTTP access controls</a>. This is optional; you may instead use the {{htmlelement("source")}} element within the audio block to specify the audio to embed.</dd> +</dl> + +<p>Time offsets are specified as float values indicating the number of seconds to offset.</p> + +<div class="note"><strong>Note:</strong> The time offset value definition has not yet been completed in the HTML5 specification and is subject to change.</div> + +<h2 id="이벤트">이벤트</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">이벤트 이름</th> + <th scope="col">발생 조건</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("audioprocess")}}</td> + <td>The input buffer of a {{DOMxRef("ScriptProcessorNode")}} is ready to be processed.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</td> + <td>The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</td> + <td>The browser estimates it can play the media up to its end without stopping for content buffering.</td> + </tr> + <tr> + <td>{{Event("complete")}}</td> + <td>The rendering of an {{DOMxRef("OfflineAudioContext")}} is terminated.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</td> + <td>The <code>duration</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</td> + <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method is called to reload it.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</td> + <td>Playback has stopped because the end of the media was reached.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</td> + <td>The first frame of the media has finished loading.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</td> + <td>The metadata has been loaded.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</td> + <td>Playback has been paused.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.play_event", 'play')}}</td> + <td>Playback has begun.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.playing_event", 'playing ')}}</td> + <td>Playback is ready to start after having been paused or delayed due to lack of data.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</td> + <td>The playback rate has changed.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.seeked_event", 'seeked')}}</td> + <td>A <em>seek</em> operation completed.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</td> + <td>A <em>seek</em> operation began.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</td> + <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</td> + <td>Media data loading has been suspended.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</td> + <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</td> + <td>The volume has changed.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</td> + <td>Playback has stopped because of a temporary lack of data</td> + </tr> + </tbody> +</table> + +<h2 id="사용_일람">사용 일람</h2> + +<p>Browsers don't all support the same <a href="/en-US/docs/Web/Media/Formats/Containers">file types</a> and <a href="/en-US/docs/Web/Media/Formats/Audio_codecs">audio codecs</a>; you can provide multiple sources inside nested {{htmlelement("source")}} elements, and the browser will then use the first one it understands:</p> + +<pre class="brush: html"><audio controls> + <source src="myAudio.mp3" type="audio/mpeg"> + <source src="myAudio.ogg" type="audio/ogg"> + <p>Your browser doesn't support HTML5 audio. Here is + a <a href="myAudio.mp4">link to the audio</a> instead.</p> +</audio></pre> + +<p>We offer a substantive and thorough <a href="/en-US/docs/Web/Media/Formats">guide to media file types</a> and the <a href="/en-US/docs/Web/Media/Formats/Audio_codecs">audio codecs that can be used within them</a>. Also available is <a href="/en-US/docs/Web/Media/Formats/Video_codecs">a guide to the codecs supported for video</a>.</p> + +<p>Other usage notes:</p> + +<ul> + <li>If you don't specify the <code>controls</code> attribute, the audio player won't include the browser's default controls. You can, however, create your own custom controls using JavaScript and the {{domxref("HTMLMediaElement")}} API.</li> + <li>To allow precise control over your audio content, <code>HTMLMediaElement</code>s fire many different <a href="/en-US/docs/Web/Guide/Events/Media_events">events</a>. This also provides a way to monitor the audio's fetching process so you can watch for errors or detect when enough is available to begin to play or manipulate it.</li> + <li>You can also use the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> to directly generate and manipulate audio streams from JavaScript code rather than streaming pre-existing audio files.</li> + <li><code><audio></code> elements can't have subtitles or captions associated with them in the same way that <code><video></code> elements can. See <a href="https://www.iandevlin.com/blog/2015/12/html5/webvtt-and-audio">WebVTT and Audio</a> by Ian Devlin for some useful information and workarounds.</li> +</ul> + +<p>A good general source of information on using HTML <code><audio></code> is the <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a> beginner's tutorial.</p> + +<h3 id="Styling_with_CSS">Styling with CSS</h3> + +<p>The <code><audio></code> element has no intrinsic visual output of its own unless the <code>controls</code> attribute is specified, in which case the browser's default controls are shown.</p> + +<p>The default controls have a {{cssxref("display")}} value of <code>inline</code> by default, and it is often a good idea set the value to <code>block</code> to improve control over positioning and layout, unless you want it to sit within a text block or similar.</p> + +<p>You can style the default controls with properties that affect the block as a single unit, so for example you can give it a {{cssxref("border")}} and {{cssxref("border-radius")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, etc. You can't however style the individual components inside the audio player (e.g. change the button size or icons, change the font, etc.), and the controls are different across the different browsers.</p> + +<p>To get a consistent look and feel across browsers, you'll need to create custom controls; these can be marked up and styled in whatever way you want, and then JavaScript can be used along with the {{domxref("HTMLMediaElement")}} API to wire up their functionality.</p> + +<p><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a> provides some useful styling techniques — it is written in the context of <code><video></code>, but much of it is equally applicable to <code><audio></code>.</p> + +<h3 id="Detecting_addition_and_removal_of_tracks">Detecting addition and removal of tracks</h3> + +<p>You can detect when tracks are added to and removed from an <code><audio></code> element using the {{event("addtrack")}} and {{event("removetrack")}} events. However, these events aren't sent directly to the <code><audio></code> element itself. Instead, they're sent to the track list object within the <code><audio></code> element's {{domxref("HTMLMediaElement")}} that corresponds to the type of track that was added to the element:</p> + +<dl> + <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt> + <dd>An {{domxref("AudioTrackList")}} containing all of the media element's audio tracks. You can add a listener for <code>addtrack</code> to this object to be alerted when new audio tracks are added to the element.</dd> + <dt>{{domxref("HTMLMediaElement.videoTracks")}}</dt> + <dd>Add an <code>addtrack</code> listener to this {{domxref("VideoTrackList")}} object to be informed when video tracks are added to the element.</dd> + <dt>{{domxref("HTMLMediaElement.textTracks")}}</dt> + <dd>Add an <code>addtrack</code> event listener to this {{domxref("TextTrackList")}} to be notified when new text tracks are added to the element.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> Even though it's an <code><audio></code> element, it still has video and text track lists, and can in fact be used to present video, although the use interface implications can be odd.</p> +</div> + +<p>For example, to detect when audio tracks are added to or removed from an <code><audio></code> element, you can use code like this:</p> + +<pre class="brush: js">var elem = document.querySelector("audio"); + +elem.audioTrackList.onaddtrack = function(event) { + trackEditor.addTrack(event.track); +}; + +elem.audioTrackList.onremovetrack = function(event) { + trackEditor.removeTrack(event.track); +}; +</pre> + +<p>This code watches for audio tracks to be added to and removed from the element, and calls a hypothetical function on a track editor to register and remove the track from the editor's list of available tracks.</p> + +<p>You can also use {{domxref("EventTarget.addEventListener", "addEventListener()")}} to listen for the {{event("addtrack")}} and {{event("removetrack")}} events.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Basic_usage">Basic usage</h3> + +<p>The following example shows simple usage of the <code><audio></code> element to play an OGG file. It will autoplay due to the <code>autoplay</code> attribute—if the page has permission to do so—and also includes fallback content.</p> + +<pre class="brush: html"><!-- Simple audio playback --> +<audio + src="AudioTest.ogg" + autoplay> + Your browser does not support the <code>audio</code> element. +</audio> +</pre> + +<p>For details on when autoplay works, how to get permission to use autoplay, and how and when it's appropriate to use autoplay, see our <a href="/en-US/docs/Web/Media/Autoplay_guide">autoplay guide</a>.</p> + +<h3 id="<audio>_element_with_<source>_element"><audio> element with <source> element</h3> + +<p>This example specifies which audio track to embed using the <code>src</code> attribute on a nested <code><source></code> element rather than directly on the <code><audio></code> element. It is always useful to include the file's MIME type inside the <code>type</code> attribute, as the browser is able to instantly tell if it can play that file, and not waste time on it if not.</p> + +<pre class="brush: html"><audio controls> + <source src="foo.wav" type="audio/wav"> + Your browser does not support the <code>audio</code> element. +</audio> +</pre> + +<h3 id="<audio>_with_multiple_<source>_elements"><audio> with multiple <source> elements</h3> + +<p>This example includes multiple <code><source></code> elements. The browser tries to load the first source element (Opus) if it is able to play it; if not it falls back to the second (Vorbis) and finally back to MP3:</p> + +<pre class="brush: html"><audio controls> + <source src="foo.opus" type="audio/ogg; codecs=opus"/> + <source src="foo.ogg" type="audio/ogg; codecs=vorbis"/> + <source src="foo.mp3" type="audio/mpeg"/> +</audio></pre> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>Audio with spoken dialog should provide both captions and transcripts that accurately describe its content. Captions, which are specified using <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a>, allow people who are experiencing hearing loss to understand an audio recording's content as the recording is being played, while transcripts allow people who need additional time to be able to review the recording's content at a pace and format that is comfortable for them.</p> + +<p>If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source audio.</p> + +<p>The <code><audio></code> element doesn't directly support WebVTT. You will have to find a library or framework that provides the capability for you, or write the code to display captions yourself. One option is to play your audio using a {{HTMLElement("video")}} element, which does support WebVTT.</p> + +<p>In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone. For example, in the WebVTT below, note the use of square brackets to provide tone and emotional insight to the viewer; this can help establish the mood otherwise provided using music, nonverbal sounds and crucial sound effects, and so forth.</p> + +<pre>1 +00:00:00 --> 00:00:45 +[Energetic techno music] + +2 +00:00:46 --> 00:00:51 +Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch? + +16 +00:00:52 --> 00:01:02 +[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch? +</pre> + +<p>Also it's a good practice to provide some content (such as the direct download link) as a fallback for viewers who use a browser in which the <code><audio></code> element is not supported:</p> + +<pre class="brush: html"><audio controls> + <source src="myAudio.mp3" type="audio/mpeg"> + <source src="myAudio.ogg" type="audio/ogg"> + <p> + Your browser doesn't support HTML5 audio. + Here is a <a href="myAudio.mp4">link to download the audio</a> instead. + </p> +</audio> + +</pre> + +<ul> + <li><a href="/en-US/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">MDN Subtitles and closed caption — Plugins</a></li> + <li><a href="/en-US/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li> + <li><a href="https://webaim.org/techniques/captions/">WebAIM: Captions, Transcripts, and Audio Descriptions</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">MDN Understanding WCAG, Guideline 1.2 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html">Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html">Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="기술_요약">기술 요약</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#내장_콘텐츠">내장 콘텐츠</a>. {{htmlattrxref("controls", "audio")}} 특성을 가진 경우, <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a> 및 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td> + <p>{{htmlattrxref("src", "audio")}} 특성을 가진 경우 0개 이상의 {{htmlelement("track")}} 요소와 그 이후의 투명한 콘텐츠. 단, 다른 {{htmlelement("audio")}}와 {{htmlelement("video")}} 요소는 불가능.</p> + + <p>그 외의 경우 0개 이상의 {{HTMLElement("source")}} 요소와 0개 이상의 {{HTMLElement("track")}} 요소, 그리고 이후의 투명한 콘텐츠. 단, 다른 {{htmlelement("audio")}}와 {{htmlelement("video")}} 요소는 불가능.</p> + </td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#내장_콘텐츠">내장 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("application")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLAudioElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-audio-element', '<audio>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-audio-element', '<audio>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.audio")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/Web/Media">Web media technologies</a> + + <ul> + <li><a href="/en-US/docs/Web/Media/Formats/Containers">Media container formats (file types)</a></li> + <li><a href="/en-US/docs/Web/Media/Formats/Audio_codecs">Guide to audio codecs used on the web</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Web_Audio_API">Web Audio API</a></li> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{htmlelement("source")}}</li> + <li>{{htmlelement("video")}}</li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Learning area: Video and audio content</a></li> + <li><a href="/en-US/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics">Cross-browser audio basics</a></li> +</ul> diff --git a/files/ko/web/html/element/b/index.html b/files/ko/web/html/element/b/index.html new file mode 100644 index 0000000000..e7d54271fa --- /dev/null +++ b/files/ko/web/html/element/b/index.html @@ -0,0 +1,121 @@ +--- +title: <b> +slug: Web/HTML/Element/b +tags: + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Phrasing content' + - Reference + - Web +translation_of: Web/HTML/Element/b +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><b></code> 요소</strong>는 독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용합니다. 그 외의 다른 특별한 중요도는 주어지지 않습니다.</span> 원래는 "굵은 글씨 요소"로 불렸으며, 대부분의 브라우저도 여전히 텍스트를 굵은 글씨체로 강조합니다. 그러나 <code><b></code>를 사용해 텍스트를 꾸미면 안됩니다. 대신 CSS {{cssxref("font-weight")}}를 사용해 굵은 글씨체를 적용하거나, {{htmlelement("strong")}} 요소를 사용해 특별히 중요한 텍스트를 나타내세요.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/b.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>요약 키워드, 리뷰의 제품명 등, 특별한 중요성을 가지고 있지는 않지만 굵게 표시할 부분에 <code><b></code>를 사용하세요.</li> + <li><code><b></code> 요소와 {{HTMLElement("strong")}}, {{HTMLElement("em")}}, {{HTMLElement("mark")}} 요소를 혼동하지 않도록 주의하세요. {{HTMLElement("strong")}} 요소는 <strong>중요</strong>한 글을, {{HTMLElement("em")}} 요소는 약간의 강조가 필요한 글을, {{HTMLElement("mark")}} 요소는 관련성이 있는 글을 나타냅니다. <code><b></code> 요소는 아무런 의미도 갖지 않으므로 다른 요소가 적합하지 않을 때만 사용하세요.</li> + <li>비슷한 이유로 <code><b></code> 요소로만 제목을 만들어선 안됩니다. 제목은 {{HTMLElement("h1")}}에서 {{HTMLElement("h6")}} 태그로 표현하세요. 특히 스타일 시트를 사용해 제목 요소의 스타일을 바꿀 수 있다는 점을 생각해보면, 제목이 꼭 굵은 글씨체일 필요는 없습니다.</li> + <li class="hidden">It is a good practice to use the <strong>class</strong> attribute on the <code><b></code> in order to convey additional semantic information (for example <code><b class="lede"></code> for the first sentence in a paragraph). This eases the development of several stylings of a web document, without the need to change its HTML code.</li> + <li>과거 <code><b></code> 요소는 굵을 글씨를 만들 때 사용했습니다. HTML4부터 스타일 정보는 사용하지 않으므로 <code><b></code> 요소의 의미도 바뀌었습니다.</li> + <li><b>의 의미와 관계 없이 굵은 글씨를 사용하고 있다면, CSS {{cssxref("font-weight")}} 속성의 <code>"bold"</code> 값을 사용하는 방법을 고려하세요.</li> +</ul> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><p> + This article describes several <b class="keywords">text-level</b> elements. + It explains their usage in an <b class="keywords">HTML</b> document. +</p> +Keywords are displayed with the default style of the <b>element, likely in bold</b>.</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-b-element', '<b>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-b-element', '<b>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.b")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/International/questions/qa-b-and-i-tags"><b>와 <i> 요소 사용하기 (W3C)</a></li> +</ul> diff --git a/files/ko/web/html/element/base/index.html b/files/ko/web/html/element/base/index.html new file mode 100644 index 0000000000..0a126d67f4 --- /dev/null +++ b/files/ko/web/html/element/base/index.html @@ -0,0 +1,136 @@ +--- +title: <base> +slug: Web/HTML/Element/base +tags: + - Element + - HTML + - HTML document metadata + - 'HTML:Metadata content' + - Reference +translation_of: Web/HTML/Element/base +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><base></code> 요소</strong>는 문서 안의 모든 상대 {{glossary("URL")}}이 사용할 기준 URL을 지정합니다. 문서에는 하나의 <code><base></code> 요소만 존재할 수 있습니다.</p> + +<p>문서의 기준 URL을 스크립트에서 접근해야할 땐 {{domxref('document.baseURI')}}을 사용할 수 있습니다. 문서에 <code><base></code> 요소가 존재하지 않을 때 <code>baseURI</code>의 기본값은 {{domxref("location.href")}}입니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>메타데이터 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>없음. {{Glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>다른 <code><base></code> 요소를 포함하지 않는 {{htmlelement("head")}} 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLBaseElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a><span style="line-height: 21px;">을 포함합니다.</span></p> + +<div class="blockIndicator warning"> +<p><span style="line-height: 21px;">다음 특성 중 하나라도 지정한 경우, 상대 URL을 특성에 사용한 모든 요소보다 <code><base></code>가 앞에 위치해야 합니다.</span></p> +</div> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd>문서 내 상대 URL이 사용할 기준 URL. 절대 및 상대 URL을 사용할 수 있습니다.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd><code>target</code> 속성을 명시하지 않은 {{htmlelement("a")}}, {{htmlelement("area")}}, 또는 {{htmlelement("form")}} 요소가 탐색을 유발했을 때, 그 결과를 보여줄 기본 {{glossary("browsing context", "브라우징 맥락")}}. <strong>키워드</strong>나 <strong>저작자 정의 이름</strong>으로 지정합니다.</dd> + <dd>다음 키워드는 특별한 의미를 갖습니다. + <ul> + <li><code>_self</code> (기본값): 결과를 현재 브라우징 맥락에 보여줍니다.</li> + <li><code>_blank</code>: 결과를 새로 생성한, 이름 없는 브라우징 맥락에 보여줍니다.</li> + <li><code>_parent</code>: 현재 페이지가 프레임 안에 존재하는 경우, 결과를 현재 브라우징 맥락의 부모에 보여줍니다. 부모가 없으면 <code>_self</code>와 동일합니다.</li> + <li><code>_top</code>: 결과를 최상위 브라우징 맥락에 보여줍니다. 최상위 브라우징 맥락이란 현재 맥락의 조상 중 부모가 없는 맥락입니다. 현재 맥락이 부모를 가지지 않으면 <code>_self</code>와 동일합니다.</li> + </ul> + </dd> +</dl> + +<h2 id="사용_일람">사용 일람</h2> + +<h3 id="다중_<base>_요소">다중 <code><base></code> 요소</h3> + +<p><code><base></code> 요소가 여러 개 존재하는 경우 첫 <code>href</code>와 첫 <code>target</code>만 사용하며 나머지는 모두 무시합니다.</p> + +<h3 id="페이지_내부_앵커">페이지 내부 앵커</h3> + +<p><code><a href="#some-id"></code>처럼, 문서 프래그먼트를 가리키는 링크 주소도 <code><base></code>를 사용해 처리하므로, 기준 URL 뒤에 프래그먼트를 붙인 주소로 HTTP 요청을 유발합니다. 예를 들어,</p> + +<ol> + <li><code><base href="https://example.com"></code>을 가정</li> + <li><code><a href="#anchor">Anker</a></code>를 가정</li> + <li>2번의 링크는 <code>https://example.com/#anchor</code>를 가리킵니다.</li> +</ol> + +<h3 id="Open_Graph">Open Graph</h3> + +<p><a href="https://ogp.me/">Open Graph</a> 태그는 <code><base></code>를 인식하지 않으므로 항상 온전한 형태의 절대 URL을 지정해야 합니다.</p> + +<pre class="brush: html notranslate"><meta property="og:image" content="https://example.com/thumbnail.jpg"></pre> + +<h2 id="예제">예제</h2> + +<pre class="brush: html notranslate"><base href="http://www.example.com/page.html"> +<base target="_blank"> +<base target="_target" href="http://www.example.com/page.html"> +</pre> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.base")}}</p> diff --git a/files/ko/web/html/element/bdo/index.html b/files/ko/web/html/element/bdo/index.html new file mode 100644 index 0000000000..5a2ffa7887 --- /dev/null +++ b/files/ko/web/html/element/bdo/index.html @@ -0,0 +1,111 @@ +--- +title: '<bdo>: 양방향 텍스트 재정의 요소' +slug: Web/HTML/Element/bdo +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web + - 쓰기 방향 +translation_of: Web/HTML/Element/bdo +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><bdo></code> 요소</strong>는 현재 텍스트의 쓰기 방향을 덮어쓰고 다른 방향으로 렌더링 할 때 사용합니다.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/bdo.html", "tabbed-standard")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("dir")}}</dt> + <dd>요소 콘텐츠의 텍스트 쓰기 방향. 가능한 값은 다음과 같습니다. + <ul> + <li><code>ltr</code>: 텍스트를 왼쪽에서 오른쪽으로 써야 함을 나타냅니다.</li> + <li><code>rtl</code>: 텍스트를 오른쪽에서 왼쪽으로 써야 함을 나타냅니다.</li> + </ul> + </dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><!-- 쓰기 방향 바꾸기 --> +<p>이 글은 왼쪽에서 오른쪽으로 작성합니다.</p> +<p><bdo dir="rtl">이 글은 오른쪽에서 왼쪽으로 작성합니다.</bdo></p></pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제')}}</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '<bdo>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.bdo")}}</p> diff --git a/files/ko/web/html/element/blockquote/index.html b/files/ko/web/html/element/blockquote/index.html new file mode 100644 index 0000000000..d5392594f4 --- /dev/null +++ b/files/ko/web/html/element/blockquote/index.html @@ -0,0 +1,131 @@ +--- +title: '<blockquote>: 인용 블록 요소' +slug: Web/HTML/Element/blockquote +tags: + - Element + - HTML + - HTML grouping content + - 'HTML:Flow content' + - Reference + - Web + - 인용 +translation_of: Web/HTML/Element/blockquote +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><blockquote></code> 요소</strong>는 안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다. (외형을 바꾸는 법은 {{anch("사용 일람")}}을 참고하세요) 인용문의 출처 URL은 {{htmlattrxref("cite", "blockquote")}} 특성으로, 출처 텍스트는 {{htmlelement("cite")}} 요소로 제공할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/blockquote.html","tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, 구획 루트, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLQuoteElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>인용문의 출처 문서나 메시지를 가리키는 URL. 인용문의 맥락 혹은 출처 정보를 가리킬 용도입니다.</dd> +</dl> + +<h2 id="사용_일람">사용 일람</h2> + +<p>인용문의 들여쓰기를 바꾸려면 {{glossary("CSS")}} {{cssxref("margin-left")}}와 {{cssxref("margin-right")}}, 혹은 {{cssxref("margin")}} 단축 속성을 사용하세요.</p> + +<p>별도의 블록을 쓰지 않아도 될 짧은 인용문은 {{htmlelement("q")}} 요소를 사용하세요.</p> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 <code><blockquote></code> 요소를 사용해 {{RFC(1149)}} <cite>A Standard for the Transmission of IP Datagrams on Avian Carriers의 문단을 인용합니다.</cite></p> + +<pre class="brush: html"><blockquote cite="https://tools.ietf.org/html/rfc1149"> + <p>Avian carriers can provide high delay, low + throughput, and low altitude service. The + connection topology is limited to a single + point-to-point path for each carrier, used with + standard carriers, but many carriers can be used + without significant interference with each other, + outside of early spring. This is because of the 3D + ether space available to the carriers, in contrast + to the 1D ether used by IEEE802.3. The carriers + have an intrinsic collision avoidance system, which + increases availability.</p> +</blockquote> +</pre> + +<p>{{EmbedLiveSample("예제", 640, 180)}}</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<blockquote>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.blockquote")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>인라인 인용문을 위한 {{HTMLElement("q")}} 요소.</li> + <li>인용문 출처 표기를 위한 {{HTMLElement("cite")}} 요소.</li> +</ul> diff --git a/files/ko/web/html/element/body/index.html b/files/ko/web/html/element/body/index.html new file mode 100644 index 0000000000..d7d031bcb2 --- /dev/null +++ b/files/ko/web/html/element/body/index.html @@ -0,0 +1,166 @@ +--- +title: '<body>: 문서 본문 요소' +slug: Web/HTML/Element/body +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/body +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><body></code> 요소</strong>는 HTML 문서의 내용을 나타냅니다. 한 문서에 하나의 <code><body></code> 요소만 존재할 수 있습니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">구획 루트</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>태그 내의 첫번째 것이 공백, 주석, {{HTMLElement("script")}}요소, {{HTMLElement("style")}}요소가 아닐경우 시작태그를 생략할수 있습니다. body 요소가 시작태그를 가지고있고, 바로 뒤에 주석이 따라오지 않는다면 종료 태그를 생략할수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{HTMLElement("html")}} 요소의 두번째 요소여야 합니다.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="/ko/docs/Web/Accessibility/ARIA/Roles/Document_Role"><code>document</code></a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLBodyElement")}} + <ul> + <li><code><body></code> 요소는 {{domxref("HTMLBodyElement")}} 인터페이스를 노출합니다.</li> + <li>{{domxref("document.body")}} 속성을 통해 <code><body></code> 요소에 접근할 수 있습니다.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("alink")}} {{obsolete_inline}}</dt> + <dd>선택한 하이퍼텍스트 링크의 색. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("color")}} 속성과 {{cssxref(":active")}}의 조합을 대신 사용하세요.</em></dd> + <dt>{{htmlattrdef("background")}} {{obsolete_inline}}</dt> + <dd>배경 이미지의 URI. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("background")}} 속성을 대신 적용하세요.</em></dd> + <dt>{{htmlattrdef("bgcolor")}} {{obsolete_inline}}</dt> + <dd>배경색. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("background-color")}} 속성을 대신 적용하세요.</em></dd> + <dt>{{htmlattrdef("bottommargin")}} {{obsolete_inline}}</dt> + <dd>아래쪽 여백. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("margin-bottom")}} 속성을 대신 적용하세요.</em></dd> + <dt>{{htmlattrdef("leftmargin")}} {{obsolete_inline}}</dt> + <dd>왼쪽 여백. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("margin-left")}} 속성을 대신 적용하세요.</em></dd> + <dt>{{htmlattrdef("link")}} {{obsolete_inline}}</dt> + <dd>방문하지 않은 하이퍼텍스트 링크의 색. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("color")}} 속성과 {{cssxref(":link")}}의 조합을 대신 사용하세요.</em></dd> + <dt>{{htmlattrdef("onafterprint")}}</dt> + <dd>사용자가 문서를 출력한 뒤 호출할 함수.</dd> + <dt>{{htmlattrdef("onbeforeprint")}}</dt> + <dd>사용자가 문서 출력을 요청했을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onbeforeunload")}}</dt> + <dd>문서를 처분<sup>unload</sup>하기 직전에 호출할 함수.</dd> + <dt>{{htmlattrdef("onblur")}}</dt> + <dd>문서가 포커스를 상실했을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onerror")}}</dt> + <dd>문서를 제대로 불러오지 못했을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onfocus")}}</dt> + <dd>문서가 포커스를 받을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onhashchange")}}</dt> + <dd>문서의 현재 주소 중 Fragment identifier part(해시(<code>'#'</code>) 문자로 시작)가 변경됐을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onlanguagechange")}} {{experimental_inline}}</dt> + <dd>선호 언어 변경 시 호출할 함수.</dd> + <dt>{{htmlattrdef("onload")}}</dt> + <dd>문서를 다 불러왔을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onmessage")}}</dt> + <dd>문서가 메시지를 받았을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onoffline")}}</dt> + <dd>네트워크 연결이 실패했을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("ononline")}}</dt> + <dd>네트워크 연결을 복구했을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onpopstate")}}</dt> + <dd>사용자가 세션 기록을 따라 이동했을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onredo")}}</dt> + <dd>사용자가 되돌리기 변경 기록(undo transaction history)에서 다시 이후로 이동했을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onresize")}}</dt> + <dd>문서의 크기가 바뀔 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onstorage")}}</dt> + <dd>저장 영역이 변경되었을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onundo")}}</dt> + <dd>사용자가 되돌리기 변경 기록(undo transaction history)에서 이전으로 이동했을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onunload")}}</dt> + <dd>문서를 처분(unload) 중일 때 호출할 함수.</dd> + <dt>{{htmlattrdef("rightmargin")}} {{obsolete_inline}}</dt> + <dd>오른쪽 여백. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("margin-right")}} 속성을 대신 적용하세요.</em></dd> + <dt>{{htmlattrdef("text")}} {{obsolete_inline}}</dt> + <dd>글자의 전경색. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("color")}} 속성을 대신 적용하세요.</em></dd> + <dt>{{htmlattrdef("topmargin")}} {{obsolete_inline}}</dt> + <dd>위쪽 여백. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("margin-top")}} 속성을 대신 적용하세요.</em></dd> + <dt>{{htmlattrdef("vlink")}} {{obsolete_inline}}</dt> + <dd>방문했던 하이퍼텍스트 링크의 색. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("color")}} 속성과 {{cssxref(":visited")}}의 조합을 대신 사용하세요.</em></dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><html> + <head> + <title>문서 제목</title> + </head> + <body> + <p>문단입니다</p> + </body> +</html> +</pre> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Changed the list of non-conforming features.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Obsoleted the formerly deprecated attributes. Defined the behavior of the non-conforming and never standardized <code>margintop</code>, <code>marginleft</code>, <code>marginright</code> and <code>marginbottom</code>. Added the <code>on*</code> attributes.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '<body>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Deprecated the <code>alink</code>, <code>background</code>, <code>bgcolor</code>, <code>link</code>, <code>text</code> and <code>vlink</code> attributes.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat("html.elements.body")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>{{HTMLElement("html")}}</li> + <li>{{HTMLElement("head")}}</li> +</ul> diff --git a/files/ko/web/html/element/br/index.html b/files/ko/web/html/element/br/index.html new file mode 100644 index 0000000000..918a0c7486 --- /dev/null +++ b/files/ko/web/html/element/br/index.html @@ -0,0 +1,130 @@ +--- +title: '<br>: 줄바꿈 요소' +slug: Web/HTML/Element/br +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/br +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><br></code> 요소</strong>는 텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>위 예제에서 확인할 수 있듯, <code><br></code> 요소는 텍스트를 끊고 싶은 지점에 삽입해야 합니다. <code><br></code> 이후의 텍스트는 텍스트 블록의 다음 줄에서 다시 시작합니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 문단 사이에 여백을 두기 위한 용도로 <code><br></code>을 사용하지 마세요. 대신 {{htmlelement("p")}} 요소로 감싼 후 <a href="/ko/docs/Web/CSS">CSS</a>의 {{cssxref("margin")}} 속성으로 여백의 크기를 조절하세요.</p> +</div> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="CSS_스타일링">CSS 스타일링</h2> + +<p><code><br></code> 요소는 텍스트 블록에서 줄을 바꾼다는 하나의 명확한 목적만 가지고 있습니다. 따라서 크기도, 외형도 없으므로 스타일을 적용할 것도 거의 없습니다.</p> + +<p><code><br></code> 요소에 {{cssxref("margin")}}을 적용하면 줄 간격을 늘릴 수 있겠지만 좋은 방법은 아닙니다. 이런 목적을 위해 만들어진 CSS {{cssxref("line-height")}} 속성을 사용하세요.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html">Mozilla Foundation<br> +1981 Landings Drive<br> +Building K<br> +Mountain View, CA 94043-0801<br> +USA +</pre> + +<p>결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("예제", "100%", "90")}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>문단 구분을 <code><br></code>로 하는건 나쁜 사례일 뿐만 아니라 스크린 리더를 사용해 탐색하는 사용자에게도 문제가 됩니다. 스크린 리더가 요소의 존재는 알려주겠지만, <code><br></code>에는 아무런 내용도 없기 때문입니다. 따라서 사용자는 내용이 어딨는지 몰라 혼란을 느낄 수 있습니다.</p> + +<p>{{htmlelement("p")}} 요소와 함께 CSS {{cssxref("margin")}} 속성 등을 조합해 간격을 조절하세요.</p> + +<h2 id="기술_요약">기술 요약</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLBRElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '<br>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.br")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("address")}} 요소</li> + <li>{{HTMLElement("p")}} 요소</li> +</ul> diff --git a/files/ko/web/html/element/button/index.html b/files/ko/web/html/element/button/index.html new file mode 100644 index 0000000000..01f57291a9 --- /dev/null +++ b/files/ko/web/html/element/button/index.html @@ -0,0 +1,293 @@ +--- +title: '<button>: 버튼 요소' +slug: Web/HTML/Element/button +tags: + - Element + - Forms + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/button +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><button></code> 요소</strong>는 클릭 가능한 버튼을 나타냅니다. 버튼은 <a href="/ko/docs/Learn/HTML/Forms">양식</a> 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다.</span> 기본값의 HTML 버튼은 {{glossary("user agent", "사용자 에이전트")}}의 호스트 플랫폼과 비슷한 디자인을 따라가지만, 외형은 <a href="/ko/docs/Web/CSS">CSS</a>로 변경할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/button.html", "tabbed-shorter")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#양식_관련_콘텐츠">양식 관련 콘텐츠</a>(<a href="/ko/docs/Web/Guide/HTML/Content_categories#나열됨">나열됨</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#레이블_가능">레이블 가능</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#제출_가능">제출 가능</a>), 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a>를 제외한 <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><code><a href="/ko/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("checkbox")}}, {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLButtonElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("autofocus")}}</dt> + <dd>페이지 로드 후, 이 버튼에 포커스가 위치해야 하는지 나타냅니다. 문서 내에서 <strong>하나의 요소</strong>만 <code>autofocus</code> 특성을 가질 수 있습니다.</dd> + <dt class="hidden">{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt> + <dd class="hidden">This attribute on a {{HTMLElement("button")}} is nonstandard and Firefox-specific. Unlike other browsers, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox persists the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Setting <code>autocomplete="off"</code> disables this feature; see {{bug(654072)}}.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>버튼과 사용자의 상호작용, 즉 누르거나 클릭하는 것을 막습니다.</p> + + <p class="hidden">Firefox, unlike other browsers, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.</p> + </dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd>버튼과 연결할 {{HTMLElement("form")}} 요소("양식 소유자"). 같은 문서에 존재하는 <code><form></code> 요소의 {{htmlattrxref("id")}} 특성 값을 사용해야 합니다. <code>form</code> 특성을 지정하지 않았으나 조상 중 <code><form></code> 요소가 존재하면 해당 <code><form></code>과 연결됩니다.</dd> + <dd><code>form</code> 특성을 사용하면 버튼을 <code><form></code> 요소에 넣지 않고도 연결할 수 있고, 조상 중 <code><form></code>이 있더라도 소유자를 재정의할 수 있습니다.</dd> + <dt>{{htmlattrdef("formaction")}}</dt> + <dd><code><button></code>이 제출 버튼인 경우, 제출한 정보를 처리할 URL. 지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("action","form")}} 특성보다 우선합니다. 양식 소유자가 존재하지 않으면 영향을 주지 않습니다.</dd> + <dt>{{htmlattrdef("formenctype")}}</dt> + <dd><code><button></code>이 제출 버튼인 경우, <code>formenctype</code> 특성은 양식을 서버로 제출할 때 사용할 양식 데이터 인코딩을 지정합니다. 가능한 값은 다음과 같습니다. + <ul> + <li><code>application/x-www-form-urlencoded</code>: 기본값.</li> + <li><code>multipart/form-data</code>: {{htmlattrxref("type","input")}} 특성이 <code>file</code>인 {{HTMLElement("input")}}이 존재하는 양식에서 사용하세요.</li> + <li><code>text/plain</code>: 디버깅 전용으로 명세에 추가된 값입니다. 실제 양식 제출 시 사용해선 안됩니다.</li> + </ul> + + <p>지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("enctype","form")}} 특성보다 우선합니다.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}}</dt> + <dd><code><button></code>이 제출 버튼인 경우, <code>formmethod</code> 특성은 양식을 서버로 제출할 때 사용할 <a href="/ko/docs/Web/HTTP/Methods">HTTP 메서드</a>를 지정합니다. 가능한 값은 다음과 같습니다. + <ul> + <li><code>post</code>: 양식의 데이터를 HTTP 요청 본문에 넣습니다. 비밀번호처럼, 양식 데이터 중 공개하지 않아야 하는 항목이 있으면 사용하세요.</li> + <li><code>get</code>: 양식 <code>action</code> URL 뒤에 <code>?</code> 를 추가한 후 양식 데이터를 덧붙입니다. 검색 양식처럼, 양식이 사이드 이펙트를 갖지 않을 때 사용하세요.</li> + </ul> + + <p>지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("method","form")}} 특성보다 우선합니다.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}}</dt> + <dd><code><button></code>이 제출 버튼인 경우, <code>formnovalidate</code> 특성은 양식을 제출할 때 <a href="/ko/docs/Learn/Forms/Form_validation">유효성 검사</a>를 하지 않겠다는 것을 지정합니다. 지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("novalidate","form")}} 특성보다 우선합니다.</dd> + <dt>{{htmlattrdef("formtarget")}}</dt> + <dd><code><button></code>이 제출 버튼인 경우, <code>formtarget</code> 특성에는 양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름을 사용할 수 있습니다. 가능한 값은 {{glossary("browsing context", "브라우징 맥락")}}(탭, 창, {{htmlelement("iframe")}})의 이름 또는 키워드입니다. 지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("target","form")}} 특성보다 우선합니다. 다음 키워드는 특별한 뜻을 가지고 있습니다. + <ul> + <li><code>_self</code>: 응답을 현재 브라우징 맥락에 표시합니다. 기본값.</li> + <li><code>_blank</code>: 응답을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.</li> + <li><code>_parent</code>: 응답을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li> + <li><code>_top</code>: 응답을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>버튼의 이름. 제출할 때, 버튼의 <code>value</code> 특성과 함께 양식 데이터의 일부를 구성합니다.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>버튼의 행동 방식. 가능한 값은 다음과 같습니다. + <ul> + <li><code>submit</code>: 버튼이 서버로 양식 데이터를 제출합니다. 지정하지 않은 경우 기본값이며, 유효하지 않은 값일 때도 사용합니다.</li> + <li><code>reset</code>: <code><input type="reset"></code>처럼, 모든 컨트롤을 초깃값으로 되돌립니다.</li> + <li><code>button</code>: 기본 행동이 없으며 클릭했을 때 아무것도 하지 않습니다. 클라이언트측 스크립트와 연결할 수 있습니다.</li> + </ul> + </dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>버튼의 초깃값. 제출할 때, 버튼의 <code>value</code> 특성과 함께 양식 데이터의 일부를 구성합니다.</dd> +</dl> + +<h2 id="참고">참고</h2> + +<p><code><button></code> 요소는 {{HTMLElement("input")}} 요소보다 스타일을 적용하기 훨씬 수월합니다. <code><input></code>은 <code>value</code> 특성에 텍스트 값밖에 지정할 수 없지만, <code><button></code>은 내부 HTML 콘텐츠(<code><em></code>, <code><strong></code>, 심지어 <code><img></code>도)에 더해 {{Cssxref("::after")}}와 {{Cssxref("::before")}} 의사 요소를 사용하는 복잡한 렌더링도 가능합니다.</p> + +<p>양식 제출용 버튼이 아니라면 <code>type</code> 특성을 <code>button</code>으로 지정하는걸 잊지 마세요. 기본값에서는 버튼을 눌렀을 때 양식 데이터를 제출하고, (존재하지 않는) 응답을 불러오려고 시도하는 과정에서 문서의 현재 상태가 사라질 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush:html"><button name="button">눌러보세요</button> +</pre> + +<p>{{ EmbedLiveSample('예제', 200, 64) }}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<h3 id="아이콘_버튼">아이콘 버튼</h3> + +<p>아이콘만 사용해 기능을 표현하는 버튼은 접근 가능한 이름을 갖지 않습니다. 접근 가능한 이름은 스크린 리더 등 접근성 보조 기술이 문서를 분석하고 <a href="/ko/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">접근성 트리</a>를 생성할 때 사용할 수 있는 프로그램 훅을 제공합니다. 그 후 보조 기술이 페이지 콘텐츠를 탐색하고 조작할 때 접근성 트리를 사용합니다.</p> + +<p>아이콘 버튼에 접근 가능한 이름을 부여하려면, <code><button></code> 요소의 기능을 간략히 묘사하는 텍스트를 안에 포함하세요.</p> + +<h4 id="예제_2">예제</h4> + +<pre class="brush: html"><button name="favorite" type="button"> + <svg aria-hidden="true" viewBox="0 0 10 10"><path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z"/></svg> + Add to favorites +</button> +</pre> + +<p id="Result_3">텍스트를 숨기고 싶은 경우, 접근 가능한 방식은 <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">CSS 속성을 조합</a>해 시각적으로는 숨기고, 보조 기술은 읽을 수 있는 형태로 남기는 것입니다.</p> + +<p>그러나, 버튼의 텍스트를 시각적으로 남겨놓는 것은 아이콘의 뜻이나 버튼의 기능에 익숙하지 않은 사용자도 도울 수 있다는 점을 명심해야 합니다. 특히 기술과 가깝지 않거나, 문화적으로 다른 해석을 할 수 있는 사용자를 고려하세요.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">What is an accessible name? | The Paciello Group</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust#Guideline_4.1_—_Compatible_Maximize_compatibility_with_current_and_future_user_agents_including_assistive_technologies">MDN Understanding WCAG, Guideline 4.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="크기와_간격">크기와 간격</h3> + +<h4 id="크기">크기</h4> + +<p>버튼과 같은 대화형 요소는 상호작용하기 충분한 크기의 활성화 영역을 가져야 합니다. 충분한 크기는 운동 조절 장애를 가진 사용자와, 터치스크린처럼 정확하지 않은 입력 도구 사용자처럼 다양한 사람을 돕습니다. 최소 44x44의 <a class="external external-icon" href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels" rel="noopener">CSS 픽셀</a> 크기를 권고합니다.</p> + +<ul> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1</a></li> + <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5 | Adrian Roselli</a></li> + <li><a href="https://a11yproject.com/posts/large-touch-targets/">Quick test: Large touch targets - The A11Y Project</a></li> +</ul> + +<h4 id="간격">간격</h4> + +<p>버튼과 같은 대화형 요소 다수를 시각적으로 가까이 배치할 땐 서로를 분리하는 공간을 둬야 합니다. 간격은 운동 조절 장애를 가진 사용자가 원하지 않는 상호작용을 하는걸 방지할 수 있습니다.</p> + +<p>간격은 {{cssxref("margin")}}과 같은 CSS 속성으로 설정할 수 있습니다.</p> + +<ul> + <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem - Axess Lab</a></li> +</ul> + +<div class="hidden"> +<h3 id="Firefox">Firefox</h3> + +<p>Firefox will add a small dotted border on a focused button. This border is declared through CSS in the browser stylesheet, but you can override it to add your own focused style using <code><a href="/en-US/docs/Web/CSS/::-moz-focus-inner">button::-moz-focus-inner { }</a></code>.</p> + +<p>If overridden, it is important to <strong>ensure that the state change when focus is moved to the button is high enough</strong> that people experiencing low vision conditions will be able to perceive it.</p> + +<p>Color contrast ratio is determined by comparing the luminosity of the button text and background color values compared to the background the button is placed on. In order to meet current <a href="https://www.w3.org/WAI/intro/wcag" rel="noopener">Web Content Accessibility Guidelines (WCAG)</a>, a ratio of 4.5:1 is required for text content and 3:1 for large text. (Large text is defined as 18.66px and {{cssxref("font-weight", "bold")}} or larger, or 24px or larger.)</p> + +<ul> + <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> +</ul> +</div> + +<h3 id="클릭과_포커스">클릭과 포커스</h3> + +<p><code><button></code>을 클릭했을 때 포커스를 얻는 여부는 브라우저와 운영체제에 따라 다릅니다. 아래 표는 {{HTMLElement("input")}}이 <code>type="button"</code> 또는 <code>type="submit"</code>일 때도 동일합니다.</p> + +<table> + <caption>{{HTMLElement("button")}}을 클릭했을 때 포커스를 부여하나?</caption> + <thead> + <tr> + <th>데스크톱 브라우저</th> + <th>Windows 8.1</th> + <th>OS X 10.X</th> + </tr> + </thead> + <tbody> + <tr> + <th>Firefox</th> + <td class="bc-supports-yes">예 - Firefox 30.0</td> + <td class="bc-supports-no">(<code>tabindex</code>가 존재해도) 아니오 - Firefox 63</td> + </tr> + <tr> + <th>Chrome</th> + <td class="bc-supports-yes">예 - Chrome 35</td> + <td class="bc-supports-yes">예 - Chrome 65</td> + </tr> + <tr> + <th>Safari</th> + <td style="background: #eee;">N/A</td> + <td class="bc-supports-no">(<code>tabindex</code>가 존재해도) 아니오 - Safari 12 (<a href="https://bugs.webkit.org/show_bug.cgi?id=22261">bug 22261</a>)</td> + </tr> + <tr> + <th>Internet Explorer</th> + <td class="bc-supports-yes">예 - Internet Explorer 11</td> + <td style="background: #eee;">N/A</td> + </tr> + <tr> + <th>Presto</th> + <td class="bc-supports-yes">예 - Opera 12</td> + <td class="bc-supports-yes">예 - Opera 12</td> + </tr> + </tbody> +</table> + +<table> + <caption>{{HTMLElement("button")}}을 탭했을 때 포커스를 부여하나?</caption> + <thead> + <tr> + <th>모바일 브라우저</th> + <th>iOS 7.1.2</th> + <th>Android 4.4.4</th> + </tr> + </thead> + <tbody> + <tr> + <th>Safari Mobile</th> + <td class="bc-supports-no">(<code>tabindex</code>가 존재해도) 아니오</td> + <td style="background-color: #eeeeee;">N/A</td> + </tr> + <tr> + <th>Chrome 35</th> + <td class="bc-supports-no">(<code>tabindex</code>가 존재해도) 아니오</td> + <td class="bc-supports-yes">예</td> + </tr> + </tbody> +</table> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'form-elements.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.button")}}</p> diff --git a/files/ko/web/html/element/canvas/index.html b/files/ko/web/html/element/canvas/index.html new file mode 100644 index 0000000000..c9b9305e52 --- /dev/null +++ b/files/ko/web/html/element/canvas/index.html @@ -0,0 +1,194 @@ +--- +title: '<canvas>: 그래픽 캔버스 요소' +slug: Web/HTML/Element/canvas +tags: + - Canvas + - Element + - HTML + - HTML scripting + - Reference + - Web +translation_of: Web/HTML/Element/canvas +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><canvas></code> 요소</strong>는 <a href="/ko/docs/Web/HTML/Canvas">캔버스 스크립팅 API</a> 또는 <a href="/ko/docs/Web/API/WebGL_API">WebGL API</a>와 함께 사용해 그래픽과 애니메이션을 그릴 수 있습니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#내장_콘텐츠">내장 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#투명_콘텐츠_모델">투명</a>하지만 <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a>가 아닌 요소. 단, {{HTMLElement("a")}}, {{HTMLElement("button")}}, 그리고 {{HTMLElement("input")}} 중 {{htmlattrxref("type", "input")}} 특성이 <code>checkbox</code>, <code>radio</code>, <code>button</code>인 요소는 가능</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLCanvasElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("height")}}</dt> + <dd>좌표 공간의 높이입니다. CSS 픽셀 단위로, 기본값은 150입니다.</dd> + <dt>{{htmlattrdef("moz-opaque")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>투명도가 중요한 요소인지를 캔버스에 알려줍니다. 투명도가 없음을 알게되면 페인팅 성능이 최적화됩니다. Mozilla 기반 브라우저에서만 지원하므로, 표준 {{domxref("HTMLCanvasElement.getContext()", "canvas.getContext('2d', { alpha: false })")}} 를 대신 사용하세요.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>좌표 공간의 너비입니다. CSS 픽셀 단위로, 기본값은 300입니다.</dd> +</dl> + +<h2 id="사용_일람">사용 일람</h2> + +<h3 id="대체_콘텐츠">대체 콘텐츠</h3> + +<p><code><canvas></code> 블록 안에 콘텐츠를 추가해 대체 콘텐츠로서 사용할 수 있습니다. 대체 콘텐츠는 캔버스를 지원하지 않는 구형 브라우저와, JavaScript를 비활성화한 브라우저에서 표시됩니다. 유용한 대체 텍스트, 혹은 하위 DOM을 제공하면 캔버스의 접근성을 향상할 수 있습니다.</p> + +<h3 id="닫는_태그_필수">닫는 태그 필수</h3> + +<p>{{HTMLElement("img")}} 요소와 달리, <code><canvas></code> 요소는 닫는 태그(<code></canvas></code>)를 필요로 합니다.</p> + +<h3 id="캔버스_크기_조절_CSS_vs._HTML">캔버스 크기 조절: CSS vs. HTML</h3> + +<p>캔버스의 표시 크기는 CSS로도 수정할 수 있습니다. 그러나, CSS를 사용할 경우 렌더링 과정에서 CSS 크기에 맞추기 위해 이미지의 크기를 조절하므로, 최종 그래픽이 변형될 수 있습니다.</p> + +<p>따라서 <code><canvas></code> 요소의 <code>width</code>와 <code>height</code> 특성을 통해 직접 크기를 바꾸는 것이 좋습니다. HTML에서 직접 할 수도 있고, JavaScript를 사용할 수도 있습니다.</p> + +<h3 id="최대_캔버스_크기">최대 캔버스 크기</h3> + +<p><code><canvas></code> 요소의 최대 크기는 매우 크지만, 정확한 최대 크기는 브라우저마다 다릅니다. 다음 표는 다양한 테스트와 여러 출처(<a href="https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element">Stack Overflow</a> 등)에서 수집한 값입니다.</p> + +<table> + <thead> + <tr> + <th scope="col">브라우저</th> + <th scope="col">최대 높이</th> + <th scope="col">최대 너비</th> + <th scope="col">최대 크기</th> + </tr> + </thead> + <tbody> + <tr> + <td>Chrome</td> + <td>32,767 픽셀</td> + <td>32,767 픽셀</td> + <td>268,435,456 픽셀 (i.e., 16,384 x 16,384)</td> + </tr> + <tr> + <td>Firefox</td> + <td>32,767 픽셀</td> + <td>32,767 픽셀</td> + <td>472,907,776 픽셀 (i.e., 22,528 x 20,992)</td> + </tr> + <tr> + <td>Safari</td> + <td>32,767 픽셀</td> + <td>32,767 픽셀</td> + <td>268,435,456 픽셀 (i.e., 16,384 x 16,384)</td> + </tr> + <tr> + <td>IE</td> + <td>8,192 픽셀</td> + <td>8,192 픽셀</td> + <td>?</td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 최대 면적 또는 영역을 초과하면 그리기 명령이 동작하지 않으므로, 캔버스를 사용할 수 없습니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<p>이 코드 조각은 HTML 문서에 캔버스를 추가합니다. 대체 텍스트를 추가해서 브라우저가 캔버스를 렌더링 할 수 없거나, 캔버스를 읽을 수 없는 경우에 대비했습니다.</p> + +<pre class="brush: html"><canvas id="canvas" width="300" height="300"> + 캔버스의 내용을 설명하는 대체 텍스트 +</canvas></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>그 다음, JavaScript 코드 내에서 {{domxref("HTMLCanvasElement.getContext()")}}를 호출해 그리기 맥락을 얻어서 캔버스 위에 그립니다.</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +ctx.fillStyle = 'green'; +ctx.fillRect(10, 10, 100, 100);</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="접근성_문제">접근성 문제</h2> + +<h3 id="대체_콘텐츠_2">대체 콘텐츠</h3> + +<p><code><canvas></code> 요소 자체는 비트맵에 불과하며 그려진 객체에 대한 어떠한 정보도 제공하지 않습니다. 캔버스 콘텐츠는 시맨틱 HTML 같은 접근성 도구에 노출되지 않습니다. 일반적으로 접근성 웹 사이트나 앱에서는 캔버스 사용을 피해야 합니다. 다음 안내서는 캔버스를 보다 쉽게 접근 가능한 형태로 사용하는 법을 설명합니다.</p> + +<ul> + <li><a href="https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">MDN Hit regions and accessability</a></li> + <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas 접근성 유즈 케이스</a></li> + <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas 엘리먼트 접근성 문제</a></li> + <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">Firefox 13 의 HTML5 Canvas 접근성 – by Steve Faulkner</a></li> + <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">대화형 캔버스 엘리먼트의 모범 사례</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-scripting.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.canvas")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/HTML/Canvas">Canvas API</a></li> + <li><a href="/ko/docs/Web/HTML/Canvas/Tutorial">캔버스 자습서</a></li> + <li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">캔버스 치트 시트</a></li> + <li><a href="/ko/docs/Web/Demos_of_open_web_technologies">캔버스 관련 데모</a></li> +</ul> diff --git a/files/ko/web/html/element/caption/index.html b/files/ko/web/html/element/caption/index.html new file mode 100644 index 0000000000..4766e0588e --- /dev/null +++ b/files/ko/web/html/element/caption/index.html @@ -0,0 +1,153 @@ +--- +title: '<caption>: 표 설명 요소' +slug: Web/HTML/Element/caption +tags: + - Element + - HTML + - HTML tabular data + - Reference + - Web +translation_of: Web/HTML/Element/caption +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><caption></code> 요소</strong>는 표의 설명 또는 제목을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/caption.html", "tabbed-taller")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>바로 뒤에 스페이스나 주석이 오지 않으면 닫는 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{htmlelement("table")}} 요소. 첫 번째 자식이어야 합니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLTableCaptionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<div class="hidden"> +<h3 id="Obsolete_attributes">Obsolete attributes</h3> + +<p>The following attributes are obsolete and should not be used. They are documented below for reference when updating existing code and for historical interest only.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{obsolete_inline}}</dt> + <dd>This enumerated attribute indicates how the caption must be aligned with respect to the table. It may have one of the following values: + <dl> + <dt><code>left</code></dt> + <dd>The caption is displayed to the left of the table.</dd> + <dt><code>top</code></dt> + <dd>The caption is displayed above the table.</dd> + <dt><code>right</code></dt> + <dd>The caption is displayed to the right of the table.</dd> + <dt><code>bottom</code></dt> + <dd>The caption is displayed below the table.</dd> + </dl> + + <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated. The {{HTMLElement("caption")}} element should be styled using the <a href="/en-US/docs/CSS">CSS</a> properties {{cssxref("caption-side")}} and {{cssxref("text-align")}}.</div> + </dd> +</dl> +</div> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><caption></code> 요소는 부모 {{htmlelement("table")}} 요소의 첫 번째 자식이어야 합니다.</p> + +<p><code><caption></code> 요소를 가진 <code><table></code> 요소가 만약 {{HTMLElement("figure")}} 요소의 유일한 자식인 경우, {{htmlelement("figcaption")}}을 대신 사용하세요.</p> + +<h2 id="예제">예제</h2> + +<p>다음의 간단한 예제는 설명을 포함한 표를 보입니다.</p> + +<pre class="brush: html"><table> + <caption>Example Caption</caption> + <tr> + <th>Login</th> + <th>Email</th> + </tr> + <tr> + <td>user1</td> + <td>user1@sample.com</td> + </tr> + <tr> + <td>user2</td> + <td>user2@sample.com</td> + </tr> +</table></pre> + +<div class="hidden"> +<pre class="brush: css">caption { + caption-side: top; + align: right; +} +table { + border-collapse: collapse; + border-spacing: 0px; +} +table, th, td { + border: 1px solid black; +} +</pre> +</div> + +<p>{{EmbedLiveSample('예제', 650, 100)}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'tables.html#the-caption-element', '<caption>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '<caption>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '<caption>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.caption")}}</p> diff --git a/files/ko/web/html/element/center/index.html b/files/ko/web/html/element/center/index.html new file mode 100644 index 0000000000..bd545b19f6 --- /dev/null +++ b/files/ko/web/html/element/center/index.html @@ -0,0 +1,51 @@ +--- +title: <center> +slug: Web/HTML/Element/center +translation_of: Web/HTML/Element/center +--- +<div>{{deprecated_header()}}</div> + +<h2 id="개요">개요</h2> + +<p>이 HTML Center (<code><center></code>)요소는 또다른 블록요소을 포함하거나, 인라인요소(Inline)를 포함할 수 있는 <a href="/en-US/docs/HTML/Block-level_elements">블록속성(block-level)</a> 의 요소이다. 그리고 해당 <center> 요소안에 포함된 전체요소는 <center>의 내용안에 가운데 정렬이 된다. (통상적으로 {{HTMLElement("body")}}로 쓰임).</p> + +<p>이 태그는 HTML4(또는 XHTML 1)이후에는 잘사용되지 않고, CSS의 {{Cssxref("text-align")}} 속성이 즐겨 사용된다. {{HTMLElement("div")}} 요소나 {{HTMLElement("p")}}요소 같은 블록속성이 있는 요소에 사용될 수 있다.또 다른 방법으로는 CSS속성을 사용하여 {{Cssxref("margin-left")}} 또는 {{Cssxref("margin-right")}} 또는 margin을 자동(Css("margin") 를 <code>0 auto)</code>으로 설정한다.</p> + +<h2 id="DOM_인터페이스">DOM 인터페이스</h2> + +<p>이 요소는 {{domxref("HTMLElement")}} 인터페이스를 구현합니다.</p> + +<div class="note"> +<p><strong>Implementation note:</strong> up to Gecko 1.9.2 inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</p> +</div> + +<h2 id="Example_1" name="Example_1">예제 1</h2> + +<pre class="brush: html"><center>This text will be centered. +<p>So will this paragraph.</p></center> +</pre> + +<h2 id="Example_2" name="Example_2">예제 2 (CSS 대안)</h2> + +<pre class="brush: html"><div style="text-align:center">This text will be centered. +<p>So will this paragraph.</p></div> +</pre> + +<h2 id="Example_3" name="Example_3">예제 3 (CSS 대안)</h2> + +<pre class="brush: html"><p style="text-align:center">This line will be centered.<br> +And so will this line.</p> +</pre> + +<h2 id="Notes" name="Notes">메모</h2> + +<p>Applying {{Cssxref("text-align")}}<code>:center</code> to a<code> </code>{{HTMLElement("div")}} or {{HTMLElement("p")}} element centers the <em>contents</em> of those elements while leaving their overall dimensions unchanged.</p> + +<h2 id="더_보기">더 보기</h2> + +<ul> + <li>{{Cssxref("text-align")}}</li> + <li>{{Cssxref("display")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ko/web/html/element/cite/index.html b/files/ko/web/html/element/cite/index.html new file mode 100644 index 0000000000..c620f162f3 --- /dev/null +++ b/files/ko/web/html/element/cite/index.html @@ -0,0 +1,143 @@ +--- +title: <cite> +slug: Web/HTML/Element/cite +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web + - 인용 + - 출처 +translation_of: Web/HTML/Element/cite +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><cite></code> 요소</strong>는 저작물의 출처를 표기할 때 사용하며, 제목을 반드시 포함해야 합니다.</span> 적절한 맥락 아래에서는 출처를 축약해서 표기할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/cite.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><cite></code> 요소의 저작물로는 다음과 같은 예제를 들 수 있습니다.</p> + +<div class="threecolumns" id="creative-works"> +<ul> + <li>책</li> + <li>논문</li> + <li>에세이</li> + <li>시</li> + <li>악보</li> + <li>음악</li> + <li>대본</li> + <li>영화</li> + <li>TV 쇼</li> + <li>게임</li> + <li>조각</li> + <li>그림</li> + <li>연극</li> + <li>공연</li> + <li>오페라</li> + <li>뮤지컬</li> + <li>전시회</li> + <li>판례</li> + <li>컴퓨터 프로그램</li> + <li>웹사이트</li> + <li>웹페이지</li> + <li>블로그 글과 댓글</li> + <li>게시판 글과 댓글</li> + <li>트윗</li> + <li>Facebook 글</li> + <li>성명서</li> + <li>기타 등등</li> +</ul> +</div> + +<p>W3C 명세는 <code><cite></code> 요소로 저작물의 출처를 표기할 때 저작자도 표기할 수 있음을 명시하고 있습니다. 그러나 정반대로, WHATWG 명세는 사람 이름을 어떤 상황에서도 <strong>절대</strong> 포함하지 말아야 한다고 적혀있다는 점을 알아두는 것이 좋습니다.</p> + +<p>{{htmlelement("blockquote")}}, {{htmlelement("q")}} 요소가 가진 인용문의 출처를 나타내려면 {{htmlattrxref("cite", "blockquote")}} 특성을 사용하세요.</p> + +<p>보통 브라우저는 <code><cite></code> 요소를 그릴 때 기울임꼴로 표현합니다. 기울임꼴을 제거하려면 CSS {{cssxref("font-style")}} 속성을 <code><cite></code>에 적용하세요.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><p>More information can be found in <cite>[ISO-0000]</cite>.</p></pre> + +<h3 id="결과">결과</h3> + +<p><cite>{{EmbedLiveSample("예제", 640, 60)}}</cite></p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-cite-element', '<cite>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-cite-element', '<cite>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<cite>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("html.elements.cite")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>긴 인용문을 위한 {{HTMLElement("blockquote")}} 요소.</li> + <li>인라인 인용문을 위한 {{HTMLElement("q")}} 요소.</li> +</ul> diff --git a/files/ko/web/html/element/code/index.html b/files/ko/web/html/element/code/index.html new file mode 100644 index 0000000000..2295588149 --- /dev/null +++ b/files/ko/web/html/element/code/index.html @@ -0,0 +1,109 @@ +--- +title: '<code>: 인라인 코드 요소' +slug: Web/HTML/Element/code +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/code +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><code></code> 요소</strong>는 짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시합니다.</span> 기본 스타일은 {{glossary("user agent", "사용자 에이전트")}}의 고정폭 글씨체입니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/code.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a><span style="line-height: 21px;">만 포함합니다.</span></p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><p>함수 <code>selectAll()</code>는 입력 필드의 모든 텍스트를 선택하므로, +사용자가 복사 혹은 삭제를 손쉽게 할 수 있습니다.</p> +</pre> + +<p>{{EmbedLiveSample("예제", 640, 70)}}</p> + +<h2 id="참고">참고</h2> + +<p>여러 줄의 코드를 나타내려면 <code><code></code> 요소를 {{htmlelement("pre")}}로 감싸세요. 보통 상황에서 <code><code></code>는 코드 한 줄만 나타냅니다.</p> + +<p>CSS <code>code</code> 태그 선택자를 사용해 브라우저의 기본 글씨체를 바꿀 수 있습니다. 그러나 사용자 설정이 CSS보다 우선할 수도 있습니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-code-element', '<code>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-code-element', '<code>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<code>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.code")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("samp")}}</li> + <li>{{HTMLElement("kbd")}}</li> + <li>{{HTMLElement("var")}}</li> + <li>{{HTMLElement("pre")}}</li> +</ul> diff --git a/files/ko/web/html/element/col/index.html b/files/ko/web/html/element/col/index.html new file mode 100644 index 0000000000..01223aa13c --- /dev/null +++ b/files/ko/web/html/element/col/index.html @@ -0,0 +1,159 @@ +--- +title: <col> +slug: Web/HTML/Element/col +tags: + - Element + - HTML + - HTML tabular data + - Reference + - Web +translation_of: Web/HTML/Element/col +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><col></code> 요소</strong>는 표의 열을 나타내며, 열에 속하는 칸에 공통된 의미를 부여할 때 사용합니다.</span> {{htmlelement("colgroup")}} 안에서 찾을 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/col.html","tabbed-taller")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{htmlattrxref("span", "colgroup")}} 특성을 지정하지 않은 {{HTMLElement("colgroup")}} 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLTableColElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("span")}}</dt> + <dd><code><col></code>이 차지할 열의 수를 나타내는 양의 정수. 기본값은 1입니다.</dd> +</dl> + +<div class="hidden"> +<h3 id="Deprecated_attributes">Deprecated attributes</h3> + +<p>The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt> + <dd>This enumerated attribute specifies how horizontal alignment of each column cell content will be handled. Possible values are: + <ul> + <li><code>left</code>, aligning the content to the left of the cell</li> + <li><code>center</code>, centering the content in the cell</li> + <li><code>right</code>, aligning the content to the right of the cell</li> + <li><code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li> + </ul> + + <p>If this attribute is not set, its value is inherited from the {{htmlattrxref("align", "colgroup")}} of the {{HTMLElement("colgroup")}} element this <code><col></code> element belongs too. If there are none, the <code>left</code> value is assumed.</p> + + <div class="note"><strong>Note: </strong> + + <ul> + <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values: + + <ul> + <li>Do not try to set the {{cssxref("text-align")}} property on a selector giving a <code><col></code> element. Because {{HTMLElement("td")}} elements are not descendant of the <code><col></code> element, they won't inherit it.</li> + <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector. Set <code>a</code> to zero and <code>b </code>to the position of the column in the table, e.g. <code>td:nth-child(2) { text-align: right; }</code> to right-align the second column.</li> + <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li> + </ul> + </li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd> + <p>The background color of the table. It is a <a href="/en-US/docs/Web/CSS/color_value#RGB_colors">6-digit hexadecimal RGB code</a>, prefixed by a '<code>#</code>'. One of the predefined <a href="/en-US/docs/Web/CSS/color_value#Color_keywords">color kewords</a> can also be used.</p> + + <p>To achieve a similar effect, use the CSS {{cssxref("background-color")}} property.</p> + </dd> + <dt>{{htmlattrdef("char")}} {{deprecated_inline}}</dt> + <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "col")}} is not set to <code>char</code>, this attribute is ignored.</dd> + <dt>{{htmlattrdef("charoff")}} {{deprecated_inline}}</dt> + <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <code>char</code> attribute.</dd> + <dt>{{htmlattrdef("valign")}} {{deprecated_inline}}</dt> + <dd>This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are: + <ul> + <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> + <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> + <li><code>middle</code>, which will center the text in the cell;</li> + <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> + </ul> + + <div class="note"><strong>Note:</strong> + + <ul> + <li>Do not try to set the {{cssxref("vertical-align")}} property on a selector giving a <code><col></code> element. Because {{HTMLElement("td")}} elements are not descendant of the <code><col></code> element, they won't inherit it.</li> + <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the <code>vertical-align</code> property can be used.</li> + <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt> + <dd>This attribute specifies a default width for each column in the current column group. In addition to the standard pixel and percentage values, this attribute might take the special form <code>0*</code>, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents. Relative widths such as <code>0.5*</code> also can be used.</dd> +</dl> +</div> + +<h2 id="예제">예제</h2> + +<p><code><col></code> 요소의 예제는 {{htmlelement("table")}} 요소 문서에서 볼 수 있습니다.</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'tabular-data.html#the-col-element', '<col>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-col-element', '<col>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.4.2', '<col>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.col")}}</p> diff --git a/files/ko/web/html/element/colgroup/index.html b/files/ko/web/html/element/colgroup/index.html new file mode 100644 index 0000000000..24993546d1 --- /dev/null +++ b/files/ko/web/html/element/colgroup/index.html @@ -0,0 +1,142 @@ +--- +title: <colgroup> +slug: Web/HTML/Element/colgroup +tags: + - Element + - HTML + - HTML tabular data + - Reference + - Web +translation_of: Web/HTML/Element/colgroup +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><colgroup></code> 요소</strong>는 표의 열을 묶는 그룹을 정의합니다.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/colgroup.html","tabbed-taller")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>{{htmlattrxref("span", "colgroup")}} 특성이 존재하는 경우 없음. {{glossary("empty element", "빈 요소")}}입니다.<br> + 그렇지 않은 경우 0개 이상의 {{htmlelement("col")}} 요소.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>첫 번째 자식이 {{htmlelement("col")}} 요소이며, 바로 앞의 요소가 닫는 태그를 생략한 <code><colgroup></code> 요소가 아닐 때, 여는 태그를 생략할 수 있습니다.<br> + 바로 뒤에 스페이스나 주석이 오지 않으면 닫는 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{HTMLElement("table")}} 요소. <code><colgroup></code>은 모든 {{HTMLElement("thead")}}, {{HTMLElement("th")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("tr")}} 요소 앞에 위치해야 하며, <code><table></code> 안에 {{htmlelement("caption")}} 요소가 존재하는 경우 <code><caption></code> 뒤에 와야 합니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLTableColElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>열 그룹의 배경색. '#' 문자로 시작하는 <a href="/ko/docs/Web/CSS/color_value#RGB_색상">6자리 16진수 RGB 코드</a> 또는 <a href="/ko/docs/Web/CSS/color_value#색상_키워드">사전 정의된 색상 키워드</a>를 사용할 수 있습니다. + <div class="note"><strong>참고:</strong> 표준 특성이 아니므로 사용하지 마세요. 배경색을 적용하려면 CSS {{cssxref("background-color")}} 특성을 사용해야 합니다.</div> + </dd> + <dt>{{htmlattrdef("span")}}</dt> + <dd><code><colgroup></code>이 차지할 열의 수를 나타내는 양의 정수. 기본값은 1입니다. 내부에 {{htmlelement("col")}} 요소가 존재하면 사용할 수 없습니다.</dd> +</dl> + +<div class="hidden"> +<h3 id="Obsolete_attributes">Obsolete attributes</h3> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Do not use these attributes as they are obsolete (and not supported) in the latest standard.</p> +</div> + +<dl> + <dt>{{htmlattrdef("char")}} {{obsolete_inline}}</dt> + <dd>This attribute specifies the alignment of the content in a column group to a character. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "colgroup")}} is not set to <code>char</code>, this attribute is ignored, though it will still be used as the default value for the {{htmlattrxref("align", "col")}} of the {{HTMLElement("col")}} which are members of this column group. + <div class="note"><strong>Note: </strong>To achieve the same effect as the <code>char</code> attribute, in CSS3, you can use the character set using the <code>char</code> attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{obsolete_inline}}</dt> + <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment character specified by the <strong>char</strong> attribute.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{obsolete_inline}}</dt> + <dd>This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are: + <ul> + <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> + <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> + <li><code>middle</code>, which will center the text in the cell;</li> + <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> + </ul> + + <div class="note"><strong>Note: </strong> + + <ul> + <li>Do not try to set the {{cssxref("vertical-align")}} property on a selector giving a {{HTMLElement("colgroup")}} element. Because {{HTMLElement("td")}} elements are not descendant of the {{HTMLElement("colgroup")}} element, they won't inherit it.</li> + <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector per column, where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the {{cssxref("vertical-align")}} property can be used.</li> + <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li> + </ul> + </div> + </dd> +</dl> +</div> + +<h2 id="예제">예제</h2> + +<p><code><colgroup></code> 요소의 예제는 {{htmlelement("table")}} 요소 문서에서 볼 수 있습니다.</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'tabular-data.html#the-colgroup-element', '<colgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-colgroup-element', '<colgroup>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'tables.html#edef-COLGROUP', '<colgroup>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.colgroup")}}</p> diff --git a/files/ko/web/html/element/command/index.html b/files/ko/web/html/element/command/index.html new file mode 100644 index 0000000000..8353384f2a --- /dev/null +++ b/files/ko/web/html/element/command/index.html @@ -0,0 +1,111 @@ +--- +title: <command> +slug: Web/HTML/Element/command +tags: + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/command +--- +<div>{{obsolete_header()}}</div> + +<p><span class="seoSummary">The <strong>HTML Command element</strong> (<strong><code><command></code></strong>) represents a command which the user can invoke. Commands are often used as part of a context menu or toolbar.</span> However, they can be used anywhere on the page.</p> + +<div class="note"> +<p>The <code><command></code> element is included in the W3C specification, but not in the WHATWG specification, and browser support is nonexistent. You should use the {{HTMLElement("menuitem")}} element instead, although that element is non-standard and only supported in Edge and Firefox.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, metadata content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>The <span>start tag</span> is mandatory, but, as it is a void element, the <span>use of an end tag</span> is forbidden.</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>{{HTMLElement("colgroup")}} only, though it can be implicitly defined as its start tag is not mandatory. The {{HTMLElement("colgroup")}} must not have a {{HTMLElement("span")}} as child.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLCommandElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("checked")}}</dt> + <dd>Indicates whether the command is selected. Must be omitted unless the <code>type</code> attribute is <code>checkbox </code>or <code>radio</code>.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>Iindicates that the command is not available.</dd> + <dt>{{htmlattrdef("icon")}}</dt> + <dd>Gives a picture which represents the command.</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>The name of the command as shown to the user.</dd> + <dt>{{htmlattrdef("radiogroup")}}</dt> + <dd>This attribute gives the name of the group of commands, with a <code>type</code> of <code>radio</code>, that will be toggled when the command itself is toggled. This attribute must be omitted unless the <code>type</code> attribute is <code>radio</code>.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>This attribute indicates the kind of command. This can be one of three values. + <ul> + <li> + <p><code>command</code> or empty which is the default state and indicates that this is a normal command.</p> + </li> + <li> + <p><code>checkbox</code> indicates that the command can be toggled using a checkbox.</p> + </li> + <li> + <p><code>radio</code> indicates that the command can be toggled using a radio button.</p> + </li> + </ul> + </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: html"><command type="command" label="Save" + icon="icons/save.png" onclick="save()"> +</pre> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#commands')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.command")}}</p> + +<p>{{ HTMLRef }}</p> diff --git a/files/ko/web/html/element/content/index.html b/files/ko/web/html/element/content/index.html new file mode 100644 index 0000000000..31179154e3 --- /dev/null +++ b/files/ko/web/html/element/content/index.html @@ -0,0 +1,101 @@ +--- +title: <content> +slug: Web/HTML/Element/content +translation_of: Web/HTML/Element/content +--- +<div>{{Deprecated_header}}</div> + +<p><span class="seoSummary">The <strong>HTML <code><content></code> element</strong>—an obsolete part of the <a href="/en-US/docs/Web/Web_Components">Web Components</a> suite of technologies—was used inside of <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a> as an {{glossary("insertion point")}}, and wasn't meant to be used in ordinary HTML.</span> It has now been replaced by the {{HTMLElement("slot")}} element, which creates a point in the DOM at which a shadow DOM can be inserted.</p> + +<div class="note"> +<p><strong>Note: </strong>Though present in early draft of the specifications and implemented in several browsers, this element has been removed in later versions of the spec, and should not be used. It is documented here to assist in adapting code written during the time it was included in the spec to work with newer versions of the specification.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model" title="HTML/Content_categories#Transparent_content_model">Transparent content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts flow content.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLContentElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt><code>select</code></dt> + <dd>A comma-separated list of selectors. These have the same syntax as CSS selectors. They select the content to insert in place of the <code><content></code> element.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>Here is a simple example of using the <code><content></code> element. It is an HTML file with everything needed in it.</p> + +<div class="note"> +<p><strong>Note:</strong> For this code to work, the browser you display it in must support Web Components. See <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Enabling Web Components in Firefox</a>.</p> +</div> + +<pre class="brush: html"><html> + <head></head> + <body> + <!-- The original content accessed by <content> --> + <div> + <h4>My Content Heading</h4> + <p>My content text</p> + </div> + + <script> + // Get the <div> above. + var myContent = document.querySelector('div'); + // Create a shadow DOM on the <div> + var shadowroot = myContent.createShadowRoot(); + // Insert into the shadow DOM a new heading and + // part of the original content: the <p> tag. + shadowroot.innerHTML = + '<h2>Inserted Heading</h2> <content select="p"></content>'; + </script> + + </body> +</html> +</pre> + +<p>If you display this in a web browser it should look like the following.</p> + +<p><img alt="content example" src="https://mdn.mozillademos.org/files/10077/content-example.png" style="height: 383px; width: 716px;"></p> + +<h2 id="Specifications">Specifications</h2> + +<p>This element is no longer defined by any specifications.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.content")}}</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Web_Components">Web Components</a></li> + <li>{{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ko/web/html/element/data/index.html b/files/ko/web/html/element/data/index.html new file mode 100644 index 0000000000..3841ae04fe --- /dev/null +++ b/files/ko/web/html/element/data/index.html @@ -0,0 +1,104 @@ +--- +title: <data> +slug: Web/HTML/Element/data +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/data +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><data></code> 요소</strong>는 주어진 콘텐츠를 기계가 읽을 수 있는 해석본과 연결합니다.</span> 콘텐츠가 시간 혹은 날짜 관련 정보라면 대신 {{htmlelement("time")}} 요소를 사용하세요.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/data.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLDataElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다</p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>기계가 읽을 수 있는 형태의 콘텐츠 해석본.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<p>밑의 예제는 상품의 이름을 표시하면서, 각각의 상품 번호도 연결합니다.</p> + +<pre class="brush: html"><p>새로운 상품들</p> +<ul> + <li><data value="398">미니 케찹</data></li> + <li><data value="399">점보 케찹</data></li> + <li><data value="400">메가 점보 케찹</data></li> +</ul> +</pre> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-data-element', '<data>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-data-element', '<data>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.data")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>HTML {{HTMLElement("time")}} 요소.</li> +</ul> diff --git a/files/ko/web/html/element/datalist/index.html b/files/ko/web/html/element/datalist/index.html new file mode 100644 index 0000000000..dd17028126 --- /dev/null +++ b/files/ko/web/html/element/datalist/index.html @@ -0,0 +1,115 @@ +--- +title: <datalist> +slug: Web/HTML/Element/datalist +tags: + - Element + - HTML + - HTML forms + - HTML5 + - Reference + - Web +translation_of: Web/HTML/Element/datalist +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><datalist></code> 요소</strong>는 다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 {{htmlelement("option")}} 요소 여럿을 담습니다.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/datalist.html", "tabbed-standard")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 또는 0개 이상의 {{htmlelement("option")}} 요소.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="/ko/docs/Web/Accessibility/ARIA/Roles/listbox_role"><code>listbox</code></a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLDataListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><label for="myBrowser">아래 목록에서 브라우저를 선택하세요:</label> +<input list="browsers" id="myBrowser" name="myBrowser" /> +<datalist id="browsers"> + <option value="Chrome"> + <option value="Firefox"> + <option value="Internet Explorer"> + <option value="Opera"> + <option value="Safari"> + <option value="Microsoft Edge"> +</datalist> +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-datalist-element', '<datalist>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-datalist-element', '<datalist>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.datalist")}}</p> + +<h2 id="폴리필">폴리필</h2> + +<p><a href="https://github.com/mfranzke/datalist-polyfill">datalist-polyfill</a>을 추가해 구형 브라우저에서 <code><datalist></code> 지원을 추가하세요.</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("input")}} 요소와 {{htmlattrxref("list", "input")}} 특성</li> + <li>{{HTMLElement("option")}} 요소</li> +</ul> diff --git a/files/ko/web/html/element/dd/index.html b/files/ko/web/html/element/dd/index.html new file mode 100644 index 0000000000..3129bef964 --- /dev/null +++ b/files/ko/web/html/element/dd/index.html @@ -0,0 +1,111 @@ +--- +title: <dd> +slug: Web/HTML/Element/dd +tags: + - Element + - HTML + - HTML grouping element + - Reference + - Web + - 요소 +translation_of: Web/HTML/Element/dd +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><dd></code> 요소</strong>는 정의 목록 요소({{HTMLElement("dl")}})에서 앞선 용어({{htmlelement("dt")}})에 대한 설명, 정의, 또는 값을 제공합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dd.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 바로 다음 요소가 <code><dd></code> 또는 {{HTMLElement("dt")}}거나, 자신이 부모의 마지막 자식이라면 닫는 태그는 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{HTMLElement("dl")}} 또는 ({{glossary("WHATWG")}} HTML에서) {{HTMLElement("dl")}} 안의 {{htmlelement("div")}}</td> + </tr> + <tr> + <th scope="row">가능한 이전 형제 요소</th> + <td>{{HTMLElement("dt")}} 또는 다른 <code><dd></code>.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td>{{ARIARole("definition")}}</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("nowrap")}} {{Non-standard_inline}}</dt> + <dd>값이 <code>yes</code>면 너비의 끝에서 정의 텍스트의 줄이 바뀌지 않습니다. 기본값은 <code>no</code>입니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<p>예제를 보려면 <a href="/ko/docs/HTML/Element/dl#예제" title="HTML/Element/dl#examples"><code><dl></code> 예제</a>를 보세요.</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-dd-element', '<dd>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dd-element', '<dd>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dd>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.dd")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLELement("dl")}}</li> + <li>{{HTMLElement("dt")}}</li> +</ul> diff --git a/files/ko/web/html/element/del/index.html b/files/ko/web/html/element/del/index.html new file mode 100644 index 0000000000..47dd0c67da --- /dev/null +++ b/files/ko/web/html/element/del/index.html @@ -0,0 +1,140 @@ +--- +title: <del> +slug: Web/HTML/Element/del +tags: + - Element + - HTML + - HTML edits + - Reference + - Web +translation_of: Web/HTML/Element/del +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><del></code> 요소</strong>는 문서에서 제거된 텍스트의 범위를 나타냅니다.</span> 문서나 소스 코드의 변경점 추적 등에 사용할 수 있습니다. {{htmlelement("ins")}} 요소를 추가된 텍스트의 범위를 나타낼 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/del.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#투명_콘텐츠_모델">투명</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLModElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a><span style="line-height: 21px;">을 포함</span>합니다.</p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>회의록, 이슈 추적 시스템의 티켓 번호 등 변경점을 설명하는 리소스의 {{glossary("URI")}}.</dd> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>변경이 발생한 일시. 유효한 날짜 문자열이어야 하며, 시간을 지정할 경우 역시 유효해야 합니다. 유효하지 않은 값을 지정할 경우 일시를 지정하지 않은 것과 같습니다. 유효한 문자열의 종류는 <a href="/ko/docs/Web/HTML/Date_and_time_formats">HTML에서 사용하는 날짜와 시간 형식</a> 문서에서 확인할 수 있습니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><p><del>This text has been deleted</del>, +here is the rest of the paragraph.</p> +<del><p>This paragraph has been deleted.</p></del></pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>대부분의 스크린 리더는 기본값에서 <code><del></code> 요소의 존재를 표현하지 않습니다. 그러나 CSS {{cssxref("content")}} 속성과 {{cssxref("::before")}}, {{cssxref("::after")}} 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.</p> + +<pre class="brush: css">ins::before, +ins::after { + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +ins::before { + content: " [제거 부분 시작] "; +} + +ins::after { + content: " [제거 부분 끝] "; +}</pre> + +<p>스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 삭제 여부가 꼭 필요할 때만 사용해야 합니다.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible) | The Paciello Group</a></li> + <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles | Adrian Roselli</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'edits.html#the-del-element', '<del>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'edits.html#the-del-element', '<del>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<del>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.del")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>텍스트의 삽입을 위한 {{HTMLElement("ins")}} 요소</li> + <li>삭제 여부와 관계 없이 취소선을 위한 {{htmlelement("s")}} 요소</li> +</ul> diff --git a/files/ko/web/html/element/details/index.html b/files/ko/web/html/element/details/index.html new file mode 100644 index 0000000000..2ff1da8f03 --- /dev/null +++ b/files/ko/web/html/element/details/index.html @@ -0,0 +1,284 @@ +--- +title: <details> +slug: Web/HTML/Element/details +tags: + - Element + - HTML + - HTML interactive elements + - Reference + - Web +translation_of: Web/HTML/Element/details +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><details></code> 요소</strong>는 "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다.</span> 요약이나 레이블은 {{htmlelement("summary")}} 요소를 통해 제공할 수 있습니다.</p> + +<p>정보 공개 위젯은 보통 레이블 옆의 작은 삼각형이 돌아가면서 열림/닫힘 상태를 나타냅니다. <code><details></code> 요소의 첫 번째 자식이 <code><summary></code> 요소라면, <code><summary></code>의 콘텐츠를 위젯의 레이블로 사용합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/details.html", "tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<div class="hidden"> +<div class="note"> +<p><strong>Note:</strong> The common use of a triangle which rotates or twists around to represent opening or closing the widget is why these are sometimes called "twisties."</p> +</div> + +<p>A <code><details></code> widget can be in one of two states. The default <em>closed</em> state displays only the triangle and the label inside <code><summary></code> (or a {{Glossary("user agent")}}-defined default string if no <code><summary></code>). This might look like the following:</p> + +<figure style="margin: 1em 0; padding: 1em; border: 1px solid black; box-shadow: 0 0 4px 1px black; width: 640px;"><img alt="Screenshot of closed <details> widget. A black left-pointing triangle sits to the right of the text “System Requirements”." src="https://mdn.mozillademos.org/files/15717/details-closed.png" style="height: 26px; width: 191px;"></figure> + +<p>Here we see a standard disclosure widget with the label "System Requirements", in its default closed state. When the user clicks on the widget or focuses it then presses the space bar, it "twists" open, revealing its contents:</p> + +<figure style="margin: 1em 0; padding: 1em; border: 1px solid black; box-shadow: 0 0 4px 1px black; width: 640px;"><img alt="Screenshot of open <details> widget. The triangle now points downward, and a detailed description of what “System Requirements” means is shown." src="https://mdn.mozillademos.org/files/15718/details-open.png" style="height: 96px; width: 640px;"></figure> + +<p>From there, you can use CSS to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its {{htmlattrxref("open", "details")}} attribute.</p> + +<p>By default when closed, the widget is only tall enough to display the disclosure triangle and summary. When open, it expands to display the details contained within.</p> + +<div class="note"> +<p><strong>Note:</strong> Unfortunately, at this time there's no built-in way to animate the transition between open and closed.</p> +</div> + +<p>Fully standards-compliant implementations automatically apply the CSS <code>{{cssxref("display")}}: list-item</code> to the {{HTMLElement("summary")}} element. You can use this to customize its appearance further. See {{anch("Customizing the disclosure widget")}} for further details.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>플로우 콘텐츠, 구획 루트, 대화형 콘텐츠, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>하나의 {{htmlelement("summary")}}와, 그 뒤의 플로우 콘텐츠.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td>{{ARIARole("group")}}</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLDetailsElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("open")}}</dt> + <dd>상세 정보, 즉 <code><details></code> 요소의 콘텐츠가 현재 보이는 상태인지 나타냅니다. 기본값 <code>false</code>는 정보가 보이지 않는다는 뜻입니다.</dd> +</dl> + +<h2 id="이벤트">이벤트</h2> + +<p><code><details></code> 요소는 HTML 요소가 지원하는 일반적인 이벤트 외에도, <code><details></code> 요소의 상태가 열기와 닫기로 바뀔 때 발생하는 {{event("toggle")}} 이벤트도 지원합니다. 이벤트는 상태가 변한 후 발생하며, 브라우저에서 이벤트를 쏘기 전에 상태가 여러 번 바뀌는 경우 모두 통합하여 하나의 이벤트만 전송합니다.</p> + +<p><code>toggle</code> 이벤트 처리기를 부착해 위젯의 상태 변화를 감지할 수 있습니다.</p> + +<pre class="brush: js">details.addEventListener("toggle", event => { + if (details.open) { + /* the element was toggled open */ + } else { + /* the element was toggled closed */ + } +});</pre> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_예제">간단한 예제</h3> + +<p>이번 예제는 요약 없는 <code><details></code> 요소를 보입니다.</p> + +<pre class="brush: html"><details> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<p>이렇게 사용하는 경우, 브라우저는 기본 요약 문자열("상세", "세부정보" 등)을 사용합니다. 아래에서 직접 확인해보세요.</p> + +<p>{{EmbedLiveSample("간단한_예제", 650, 150)}}</p> + +<h3 id="요약_제공하기">요약 제공하기</h3> + +<p>이번 예제는 이전 코드에 {{htmlelement("summary")}} 요소를 추가합니다.</p> + +<pre class="brush: html"><details> + <summary>System Requirements</summary> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<p>결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("요약_제공하기", 650, 150)}}</p> + +<h3 id="열려있는_상태로_만들기">열려있는 상태로 만들기</h3> + +<p><code><details></code>가 처음부터 열려있는 상태로 나타나게 하려면 <code>open</code> 특성을 지정하세요.</p> + +<pre class="brush: html"><details open> + <summary>System Requirements</summary> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<p>결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("열려있는_상태로_만들기", 650, 150)}}</p> + +<h3 id="외형_바꾸기">외형 바꾸기</h3> + +<p>이제 CSS를 추가해서 외형을 바꿔보겠습니다.</p> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">details { + font: 16px "Open Sans", Calibri, sans-serif; + width: 620px; +} + +details > summary { + padding: 2px 6px; + width: 15em; + background-color: #ddd; + border: none; + box-shadow: 3px 3px 4px black; + cursor: pointer; +} + +details > p { + border-radius: 0 0 10px 10px; + background-color: #ddd; + padding: 2px 6px; + margin: 0; + box-shadow: 3px 3px 4px black; +} +</pre> + +<p>위의 CSS는 탭 인터페이스 같은 외형을 적용합니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><details> + <summary>System Requirements</summary> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("외형_바꾸기", 650, 150)}}</p> + +<h3 id="위젯_바꾸기">위젯 바꾸기</h3> + +<p>넓게 지원되지는 않지만, 열림/닫힘을 나타내는 삼각형의 외형도 바꿀 수 있습니다. 요소의 표준화 과정 중 추가된 실험적 구현이기 때문에 브라우저의 지원에 차이가 있으므로, 당분간 여러 방식을 함께 사용해야 합니다.</p> + +<p>{{HTMLElement("summary")}} 요소는 {{cssxref("list-style")}} 단축 속성과, 그 본디 속성인 {{cssxref("list-style-type")}} 등을 지원하므로, {{cssxref("list-style-image")}} 속성 등을 사용해 삼각형을 원하는대로 바꿀 수 있습니다. 삼각형을 아예 제거하려면 <code>list-style: none</code>을 지정하면 됩니다.</p> + +<p>그러나 Chrome은 위의 방법을 아직 지원하지 않습니다. 따라서 비표준 <code>::-webkit-details-marker</code> <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>를 사용해야 합니다.</p> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css; highlight:[12, 15-17]">details { + font: 16px "Open Sans", Calibri, sans-serif; + width: 620px; +} + +details > summary { + padding: 2px 6px; + width: 15em; + background-color: #ddd; + border: none; + box-shadow: 3px 3px 4px black; + cursor: pointer; + list-style: none; +} + +details > summary::-webkit-details-marker { + display: none; +} + +details > p { + border-radius: 0 0 10px 10px; + background-color: #ddd; + padding: 2px 6px; + margin: 0; + box-shadow: 3px 3px 4px black; +} +</pre> + +<p>위의 CSS도 탭 인터페이스같은 외형을 적용하며, 이에 더해 삼각형을 제거합니다.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><details> + <summary>System Requirements</summary> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample("위젯_바꾸기", 650, 150)}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-details-element', '<details>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'semantics.html#the-details-element', '<details>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.details")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("summary")}}</li> +</ul> diff --git a/files/ko/web/html/element/dfn/index.html b/files/ko/web/html/element/dfn/index.html new file mode 100644 index 0000000000..fd4069a35e --- /dev/null +++ b/files/ko/web/html/element/dfn/index.html @@ -0,0 +1,196 @@ +--- +title: '<dfn>: 정의 요소' +slug: Web/HTML/Element/dfn +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/dfn +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><dfn></code> 요소</strong>는 현재 맥락이나 문장에서 정의하고 있는 용어를 나타냅니다.</span> <code><dfn></code>에서 가장 가까운 {{htmlelement("p")}}, {{htmlelement("dt")}}/{{htmlelement("dd")}} 쌍, {{htmlelement("section")}} 조상 요소를 용어 정의로 간주합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dfn.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>. 단, 다른 {{htmlelement("dfn")}} 요소는 불가능.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td>{{ARIARole("definition")}}</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><dfn></code> 요소를 보는 것 만으로는 그다지 명확하지 않은 부분이 있습니다.</p> + +<h3 id="정의하고_있는_용어_지정하기">정의하고 있는 용어 지정하기</h3> + +<p>다음 규칙을 따라 현재 용어가 어느건지 판별합니다.</p> + +<ol> + <li><code><dfn></code> 요소가 {{htmlattrxref("title")}} 특성을 가지고 있으면 그 값을 현재 정의 중인 용어로 간주합니다. <code><dfn></code>은 여전히 텍스트 콘텐츠를 가지고 있겠지만, 완전한 용어 대신 준말({{htmlelement("abbr")}})을 넣을 수도 있고, 다른 대체 형태일 수도 있습니다.</li> + <li><code><dfn></code>이 다른 텍스트는 없이 하나의 자식만 가지는데, 그 자식이 <code>title</code> 특성을 가진{{htmlelement("abbr")}}인 경우, 자식 <code><abbr></code>의 <code>title</code> 특성 값을 현재 용어로 간주합니다.</li> + <li>모두 아닌 경우 <code><dfn></code>의 텍스트 콘텐츠를 현재 용어로 간주합니다. {{anch("기본적인 용어 식별", "아래의 첫 번째 예제")}}에서 확인할 수 있습니다.</li> +</ol> + +<div class="note"> +<p><strong>참고:</strong> <code><dfn></code> 요소가 <code>title</code> 특성을 가진 경우, 그 값은 정의 중인 용어여야 하며 다른 텍스트는 들어가선 안됩니다.</p> +</div> + +<h3 id="<dfn>_요소를_가리키는_링크"><code><dfn></code> 요소를 가리키는 링크</h3> + +<p><code><dfn></code> 요소에 {{htmlattrxref("id")}} 특성을 지정하면 {{HTMLElement("a")}} 요소로 <code><dfn></code>을 가리킬 수 있습니다. 사용자가 용어 뜻을 잘 모를 경우, 링크를 클릭해 빠르게 정의를 확인할 수 있습니다. 따라서 링크 콘텐츠는 용어의 사용 예시 등을 담고 있어야 합니다.</p> + +<p>{{anch("정의로 링크", "정의로 링크 예제")}}에서 확인할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<p>다양한 상황의 예제를 살펴보겠습니다.</p> + +<h3 id="기본적인_용어_식별">기본적인 용어 식별</h3> + +<p>아래 코드는 간단하게 <code><dfn></code> 요소를 사용해, 정의 문단 내의 용어를 식별합니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>The <strong>HTML Definition element</strong> +(<strong><dfn>&lt;dfn&gt;</dfn></strong>) is used to indicate the +term being defined within the context of a definition phrase or +sentence.</p></pre> + +<p><code><dfn></code> 요소에 <code>title</code>이 없으므로 <code><dfn></code>의 텍스트 콘텐츠가 현재 정의 중인 용어입니다.</p> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("기본적인_용어_식별", 650, 120)}}</p> + +<h3 id="정의로_링크">정의로 링크</h3> + +<p>용어의 정의로 링크하는 건 {{htmlelement("a")}} 요소로 다른 링크를 만드는 방법과 같습니다.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>The <strong>HTML Definition element</strong> +(<strong><dfn id="definition-dfn">&lt;dfn&gt;</dfn></strong>) is +used to indicate the term being defined within the context of a +definition phrase or sentence.</p> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece +donan, Latine voluptatem vocant. Confecta res esset. Duo Reges: +constructio interrete. Scrupulum, inquam, abeunti; </p> + +<p>Negare non possum. Dat enim intervalla et relaxat. Quonam modo? +Equidem e Cn. Quid de Pythagora? In schola desinis. </p> + +<p>Ubi ut eam caperet aut quando? Cur iustitia laudatur? Aperiendum +est igitur, quid sit voluptas; Quid enim? Non est igitur voluptas +bonum. Urgent tamen et nihil remittunt. Quid enim possumus hoc +agere divinius? </p> + +<p>Because of all of that, we decided to use the +<code><a href="#definition-dfn">&lt;dfn&gt;</a></code> element for +this project.</p></pre> + +<p>이번에는 {{htmlattrxref("id")}} 특성에 <code>"definition-dfn"</code>을 사용한 용어 정의입니다. 코드 뒤쪽에서는 <code><a></code> 태그와 {{htmlattrxref("href", "a")}} 특성 값 <code>"#definition-dfn"</code>으로, 정의를 가리키는 링크를 생성합니다.</p> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample("정의로_링크", 650, 300)}}</p> + +<h3 id="준말과_정의_같이_사용하기">준말과 정의 같이 사용하기</h3> + +<p>어떤 경우, 용어를 정의할 때 머리글자 등 준말을 사용하고 싶을 때가 있습니다. 그럴 땐 <code><dfn></code>과 {{HTMLElement("abbr")}} 요소를 조합하면 됩니다.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><p>The <dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn> +is among the most productive scientific instruments ever constructed. +It has been in orbit for over 20 years, scanning the sky and +returning data and photographs of unprecedented quality and +detail.</p> + +<p>Indeed, the <abbr title="Hubble Space Telescope">HST</abbr> has +arguably done more to advance science than any device ever built.</p></pre> + +<p><code><dfn></code> 요소 안에 배치한 <code><abbr></code>을 주목하세요. <code><abbr></code>은 준말("HST")과 함께 <code>title</code> 특성으로 전체 용어("Hubble Space Telescope")를 지정합니다. <code><dfn></code>은 <code><abbr></code>의 준말을 현재 정의하고 있음을 나타냅니다.</p> + +<h4 id="결과_3">결과</h4> + +<p>{{EmbedLiveSample("준말과_정의_같이_사용하기", 650, 200)}}</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dfn-element', '<dfn>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-dfn-element', '<dfn>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<dfn>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.dfn")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>용어 정의 관련 요소: {{HTMLElement("dl")}}, {{HTMLElement("dt")}}, {{HTMLElement("dd")}}</li> + <li>{{HTMLElement("abbr")}}</li> +</ul> diff --git a/files/ko/web/html/element/dialog/index.html b/files/ko/web/html/element/dialog/index.html new file mode 100644 index 0000000000..d54f8e313f --- /dev/null +++ b/files/ko/web/html/element/dialog/index.html @@ -0,0 +1,180 @@ +--- +title: '<dialog>: 대화 상자 요소' +slug: Web/HTML/Element/dialog +tags: + - Element + - HTML + - HTML interactive elements + - Reference + - Web + - polyfill + - 대화 상자 +translation_of: Web/HTML/Element/dialog +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><dialog></code> 요소</strong>는 닫을 수 있는 경고, 검사기, 창 등 대화 상자 및 기타 다른 상호작용 가능한 컴포넌트를 나타냅니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, 구획 루트.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="/ko/docs/Web/Accessibility/ARIA/Roles/dialog_role"><code>dialog</code> </a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("alertdialog")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLDialogElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<div class="blockIndicator warning"> +<p><code>tabindex</code> 특성을 <code><dialog></code> 요소에 사용해서는 안됩니다.</p> +</div> + +<dl> + <dt>{{htmlattrdef("open")}}</dt> + <dd>대화 상자가 활성 상태이며 상호작용할 수 있음을 나타냅니다. <code>open</code> 특성이 없을 때 대화 상자가 사용자에게 보여서는 안됩니다.</dd> +</dl> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li><code>method="dialog"</code> 특성을 사용한 {{htmlelement("form")}} 요소는 제출 시 대화 상자를 닫습니다. 이 때, 대화 상자의 {{domxref("HTMLDialogElement.returnValue", "returnValue")}} 속성은 양식을 제출할 때 사용한 버튼의 {{htmlattrxref("value", "button")}}으로 설정됩니다.</li> + <li>CSS {{cssxref('::backdrop')}} <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>를 사용하면, {{domxref("HTMLDialogElement.showModal()")}} 메서드를 사용해 활성화한 <code><dialog></code> 요소의 뒤에 스타일을 적용할 수 있습니다. 예를 들면, 모달 대화 상자가 활성화되어 있는 동안 접근할 수 없는 뒤쪽 요소를 어둡게 만들 때 사용합니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_예제">간단한 예제</h3> + +<pre class="brush: html"><dialog open> + <p>여러분 안녕하세요!</p> +</dialog> +</pre> + +<h3 id="고급_예제">고급 예제</h3> + +<p>다음 예제는 "상세정보 업데이트" 버튼을 클릭할 경우 양식을 포함한 팝업 대화 상자를 엽니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><!-- 간단한 양식을 포함한 팝업 대화 상자 --> +<dialog id="favDialog"> + <form method="dialog"> + <p><label>좋아하는 동물: + <select> + <option></option> + <option>아르테미아</option> + <option>레서판다</option> + <option>거미원숭이</option> + </select> + </label></p> + <menu> + <button value="cancel">취소</button> + <button id="confirmBtn" value="default">확인</button> + </menu> + </form> +</dialog> + +<menu> + <button id="updateDetails">상세정보 업데이트</button> +</menu> + +<output aria-live="polite"></output></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var updateButton = document.getElementById('updateDetails'); +var favDialog = document.getElementById('favDialog'); +var outputBox = document.getElementsByTagName('output')[0]; +var selectEl = document.getElementsByTagName('select')[0]; +var confirmBtn = document.getElementById('confirmBtn'); + +// “Update details” button opens the <dialog> modally +updateButton.addEventListener('click', function onOpen() { + if (typeof favDialog.showModal === "function") { + favDialog.showModal(); + } else { + alert("The <dialog> API is not supported by this browser"); + } +}); +// "Favorite animal" input sets the value of the submit button +selectEl.addEventListener('change', function onSelect(e) { + confirmBtn.value = selectEl.value; +}); +// "Confirm" button of form triggers "close" on dialog because of [method="dialog"] +favDialog.addEventListener('close', function onClose() { + outputBox.value = favDialog.returnValue + " button clicked - " + (new Date()).toString(); +});</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("고급_예제", "100%", 300)}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-dialog-element', '<dialog>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>최초 정의</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">이 호환성 표는 구조화된 데이터에서 자동 생성되었습니다. 이 데이터에 참여를 원하시면 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 으로 이동하셔서 pull request를 하시면 됩니다.</div> + +<p>{{Compat("html.elements.dialog")}}</p> + +<h2 id="폴리필">폴리필</h2> + +<p>지원하지 않는 브라우저에서 <code><dialog></code>를 사용하려면 <a href="https://github.com/GoogleChrome/dialog-polyfill">dialog-polyfill</a>을 추가하세요.</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{event("close")}} 이벤트</li> + <li>{{event("cancel")}} 이벤트</li> + <li>{{cssxref("::backdrop")}} 의사 요소</li> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms">HTML 양식</a> 안내서</li> +</ul> diff --git a/files/ko/web/html/element/div/index.html b/files/ko/web/html/element/div/index.html new file mode 100644 index 0000000000..3fd7ebd390 --- /dev/null +++ b/files/ko/web/html/element/div/index.html @@ -0,0 +1,147 @@ +--- +title: '<div>: 콘텐츠 분할 요소' +slug: Web/HTML/Element/div +tags: + - Element + - HTML + - HTML grouping content + - 'HTML:Flow content' + - Layout + - Reference + - Web +translation_of: Web/HTML/Element/div +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><div></code> 요소</strong>는 플로우 콘텐츠를 위한 통용 컨테이너입니다. {{glossary("CSS")}}로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p><code><div></code> 요소는 "순수" 컨테이너로서 아무것도 표현하지 않습니다. 대신 다른 요소 여럿을 묶어 {{htmlattrxref("class")}}나 {{htmlattrxref("id")}} 속성으로 꾸미기 쉽도록 돕거나, 문서의 특정 구역이 다른 언어임을 표시({{htmlattrxref("lang")}} 속성 사용)하는 등의 용도로 사용할 수 있습니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.<br> + 또는 ({{glossary("WHATWG")}} HTML에서): 부모가 {{HTMLElement("dl")}} 요소라면: 하나 이상의 {{HTMLElement("dt")}} 요소, 이후 하나 이상의 {{HTMLElement("dd")}} 요소, 선택적으로 {{HTMLElement("script")}}와 {{HTMLElement("template")}} 요소 혼합 가능.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 아무 요소.<br> + 또는 ({{glossary("WHATWG")}} HTML에서) {{HTMLElement("dl")}} 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLDivElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="예제" name="예제">사용 일람</h2> + +<ul> + <li><code><div></code> 요소는 의미를 가진 다른 요소({{htmlelement("article")}}, {{htmlelement("nav")}} 등)가 적절하지 않을 때만 사용해야 합니다.</li> +</ul> + +<h2 id="예제" name="예제">예제</h2> + +<h3 id="간단한_예제">간단한 예제</h3> + +<pre class="brush: html notranslate"><div> + <p>어떤 콘텐츠든 좋습니다. + &lt;p&gt;, &lt;table&gt;같이 말이죠. 써보세요!</p> +</div></pre> + +<p>결과는 다음과 같습니다.</p> + +<p>{{ EmbedLiveSample('간단한_예제') }}</p> + +<h3 id="스타일_예제">스타일 예제</h3> + +<p>다음 예제는 CSS로 <div>에 그림자를 입힙니다. <code><div></code>의 {{htmlattrxref("class")}} 속성을 통해 <code>"shadowbox"</code> 스타일을 적용한 점에 주목하세요.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="notranslate"><div class="shadowbox"> + <p>Here's a very interesting note displayed in a + lovely shadowed box.</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="notranslate">.shadowbox { + width: 15em; + border: 1px solid #333; + box-shadow: 8px 8px 5px #444; + padding: 8px 12px; + background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("스타일_예제", 650, 120)}}</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No changes since the latest snapshot</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Obsoleted <code>align</code></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.div")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>의미를 지닌 구획 요소: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li> + <li>구문 콘텐츠를 꾸밀 때 사용하는 {{HTMLElement("span")}} 요소</li> +</ul> diff --git a/files/ko/web/html/element/dl/index.html b/files/ko/web/html/element/dl/index.html new file mode 100644 index 0000000000..13739239ed --- /dev/null +++ b/files/ko/web/html/element/dl/index.html @@ -0,0 +1,223 @@ +--- +title: <dl> +slug: Web/HTML/Element/dl +tags: + - Element + - HTML + - HTML grouping content + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - Reference + - Web +translation_of: Web/HTML/Element/dl +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><dl></code> 요소</strong>는 설명 목록을 나타냅니다. <code><dl></code>은 {{htmlelement("dt")}}로 표기한 용어와 {{htmlelement("dd")}} 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dl.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>. <code><dl></code>의 자식 중 이름-값 그룹이 있으면 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td> + <p>하나 이상의 {{htmlelement("dt")}} 요소와 하나 이상의 {{htmlelement("dd")}} 요소로 구성한 그룹 0개 이상. 선택적으로 {{htmlelement("script")}}와 {{htmlelement("template")}}을 혼합 가능.<br> + 또는, 하나 이상의 {{htmlelement("div")}}. 선택적으로 {{htmlelement("script")}}, {{htmlelement("template")}} 혼합 가능.</p> + </td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLDListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="하나의_용어와_하나의_정의">하나의 용어와 하나의 정의</h3> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dd> + Mozilla 재단과 수 백명의 + 자원봉사자가 개발한 무료 + 오픈소스 크로스 플랫폼 + 그래픽 웹 브라우저. + </dd> + + <!-- 다른 용어 및 정의 --> +</dl> +</pre> + +<p>{{EmbedLiveSample("하나의_용어와_하나의_정의")}}</p> + +<h3 id="여러_개의_용어와_하나의_정의">여러 개의 용어와 하나의 정의</h3> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dt>Mozilla Firefox</dt> + <dt>Fx</dt> + <dd> + Mozilla 재단과 수 백명의 + 자원봉사자가 개발한 무료 + 오픈소스 크로스 플랫폼 + 그래픽 웹 브라우저. + </dd> + + <!-- 다른 용어 및 정의 --> +</dl> +</pre> + +<p>{{EmbedLiveSample("여러_개의_용어와_하나의_정의")}}</p> + +<h3 id="하나의_용어와_여러_개의_정의">하나의 용어와 여러 개의 정의</h3> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dd> + Mozilla 재단과 수 백명의 + 자원봉사자가 개발한 무료 + 오픈소스 크로스 플랫폼 + 그래픽 웹 브라우저. + </dd> + <dd> + 붉은 판다, 레서 판다, 랫서 판다, + 혹은 "Firefox"는 초식성 포유류이다. + 몸 길이는 애완용 고양이보다 약간 + 큰 정도인 60cm다. + </dd> + + <!-- 다른 용어 및 정의 --> +</dl> +</pre> + +<p>{{EmbedLiveSample("하나의_용어와_여러_개의_정의")}}</p> + +<h3 id="여러_개의_용어와_여러_개의_정의">여러 개의 용어와 여러 개의 정의</h3> + +<p>위의 예제를 결합하여 여러 용어를 여러 정의와 연결하는 것도 가능합니다.</p> + +<h3 id="메타데이터">메타데이터</h3> + +<p><code><dl></code>은 메타데이터를 키-값 쌍으로 표시할 때도 유용합니다.</p> + +<pre class="brush: html"><dl> + <dt>Name</dt> + <dd>Godzilla</dd> + <dt>Born</dt> + <dd>1952</dd> + <dt>Birthplace</dt> + <dd>Japan</dd> + <dt>Color</dt> + <dd>Green</dd> +</dl> +</pre> + +<p>팁: 아래처럼 키-값 구분자를 CSS로 지정하면 편리합니다.</p> + +<pre class="brush: css">dt:after { + content: ": "; +}</pre> + +<p>{{EmbedLiveSample("메타데이터")}}</p> + +<h3 id="이름-값_그룹을_htmlelementdiv로_감싸기">이름-값 그룹을 {{htmlelement("div")}}로 감싸기</h3> + +<p>{{glossary("WHATWG")}} HTML에서는 <code><dl></code> 안 각각의 이름-값 그룹을 {{htmlelement("div")}}로 감쌀 수 있습니다. 마이크로데이터를 사용할 때, 그룹에 전역 특성을 적용할 때, 아니면 스타일을 적용할 때 유용할 수 있습니다.</p> + +<pre class="brush: html"><dl> + <div> + <dt>Name</dt> + <dd>Godzilla</dd> + </div> + <div> + <dt>Born</dt> + <dd>1952</dd> + </div> + <div> + <dt>Birthplace</dt> + <dd>Japan</dd> + </div> + <div> + <dt>Color</dt> + <dd>Green</dd> + </div> +</dl> +</pre> + +<h2 id="참고">참고</h2> + +<p>페이지에서 들여쓰기를 하기 위한 목적으로 <code><dl></code> (또는 {{htmlelement("ul")}}) 요소를 사용하지 마세요. 작동할 수는 있으나 좋지 않은 방법이고, 설명 목록의 원래 목적을 흐립니다.</p> + +<p>용어의 들여쓰기를 수정하려면 <a href="/ko/docs/Web/CSS">CSS</a> {{cssxref("margin")}} 속성을 사용하세요.</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>각각의 스크린 리더는 <code><dl></code>을 다르게 표현합니다. iOS의 VoiceOver 등 일부 스크린 리더는 <code><dl></code>의 콘텐츠를 리스트로 표현하지 않습니다. 따라서, 각 아이템의 콘텐츠는 리스트 그룹 내 다른 항목과의 관계를 표현할 수 있는 방식으로 작성해야 합니다.</p> + +<ul> + <li><a href="https://s.codepen.io/aardrian/debug/NzGaKP">CodePen - HTML Buddies: dt & dd</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-dl-element', '<dl>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '<dl>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dl>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat("html.elements.dl")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("dt")}} 요소</li> + <li>{{HTMLElement("dd")}} 요소</li> +</ul> diff --git a/files/ko/web/html/element/dt/index.html b/files/ko/web/html/element/dt/index.html new file mode 100644 index 0000000000..0aa8c9d4d4 --- /dev/null +++ b/files/ko/web/html/element/dt/index.html @@ -0,0 +1,99 @@ +--- +title: <dt> +slug: Web/HTML/Element/dt +tags: + - Element + - HTML + - HTML grouping content + - Reference +translation_of: Web/HTML/Element/dt +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><dt></code> 요소</strong>는 설명 혹은 정의 리스트에서 용어를 나타냅니다. {{htmlelement("dl")}} 요소 안에 위치해야 합니다</span>. 보통 {{htmlelement("dd")}} 요소가 뒤따르지만, 여러 개의 <dt> 요소를 연속해 배치하면 바로 다음 {{htmlelement("dd")}} 요소로 한꺼번에 서술할 수 있습니다.</p> + +<p>뒤따르는 {{htmlelement("dd")}} 요소가 <code><dt></code>로 지정한 용어의 정의와 기타 관련 글을 제공합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dt.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>. 단, {{htmlelement("header")}}, {{htmlelement("footer")}}, 구획 콘텐츠, 제목 콘텐츠 자손은 불가능합니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 바로 다음 요소가 {{htmlelement("dd")}} 또는 <code><dt></code>거나, 자신이 부모의 마지막 자식이라면 닫는 태그는 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{HTMLElement("dl")}} 안의, {{htmlelement("dd")}} 혹은 다른 <code><dt></code> 앞. 또는 ({{glossary("WHATWG")}} HTML에서) {{htmlelement("dl")}} 안의 {{htmlelement("div")}}.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td>{{ARIARole("term")}}</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="예제">예제</h2> + +<p><a href="/ko/docs/Web/HTML/Element/dl#예제"><dl> 요소의 예제</a>를 확인하세요.</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-dt-element', '<dt>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dt-element', '<dt>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dt>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat("html.elements.dt")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("dd")}}, {{HTMLElement("dl")}}</li> +</ul> diff --git a/files/ko/web/html/element/element/index.html b/files/ko/web/html/element/element/index.html new file mode 100644 index 0000000000..be045093a5 --- /dev/null +++ b/files/ko/web/html/element/element/index.html @@ -0,0 +1,57 @@ +--- +title: <element> +slug: Web/HTML/Element/element +translation_of: Web/HTML/Element/element +--- +<div>{{HTMLRef}}{{obsolete_header}}</div> + +<p><span class="seoSummary">The obsolete <strong>HTML <code><element></code> element</strong> was part of the <a href="/en-US/docs/Web/Web_Components">Web Components</a> specification; it was intended to be used to define new custom DOM elements.</span> It was removed in favor of a JavaScript-driven approach for creating new custom elements.</p> + +<div class="warning"> +<p><strong>Note:</strong> This element has been removed from the specification. See <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">this</a> for more information from the editor of the specification.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content">Transparent content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>???</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>???</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<p>The <code><element></code> element was formerly in a draft specification of <a href="http://w3c.github.io/webcomponents/spec/custom/">Custom Elements</a> but it has been removed.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.element")}}</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, and {{HTMLElement("template")}}</li> +</ul> diff --git a/files/ko/web/html/element/em/index.html b/files/ko/web/html/element/em/index.html new file mode 100644 index 0000000000..7043cf1ce8 --- /dev/null +++ b/files/ko/web/html/element/em/index.html @@ -0,0 +1,124 @@ +--- +title: '<em>: 강세 요소' +slug: Web/HTML/Element/em +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/em +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><em></code> 요소</strong>는 텍스트의 강세를 나타냅니다. <code><em></code> 요소를 중첩하면 더 큰 강세를 뜻하게 됩니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/em.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><em></code> 요소는 주위 텍스트에 비해 강조된 부분을 나타냅니다. 보통 한 문장에서 단어 하나 혹은 몇 개로 제한되며, 문장의 의미에 영향을 미칠 수 있습니다.</p> + +<p><code><em></code>은 주로 기울임꼴을 적용해 표현합니다. 그러나 단순히 기울임꼴이 필요해서 <code><em></code>을 사용하면 안됩니다. CSS {{cssxref("font-style")}} 속성을 사용하세요. 그 외에 흔히 기울임꼴을 많이 쓰는 경우를 정리하자면 저작물(책, 연극, 음악 등등)의 제목은 {{htmlelement("cite")}}, 학명 등 과학적인 이름이나 다른 언어의 단어 등, 주변과 다른 톤을 가진 텍스트에는 {{htmlelement("i")}}를 사용하세요. 주변보다 훨씬 중요한 텍스트는 {{htmlelement("strong")}}으로 강조하면 됩니다.</p> + +<h3 id="<i>와_<em>"><code><i></code>와 <code><em></code></h3> + +<p>신입 개발자가 자주 혼란스러운 부분 중 하나가, 서로 다른 요소인데 비슷한 결과물을 내놓는 경우입니다. <code><em></code>과 {{htmlelement("i")}}가 그 예로서, 둘 다 글자를 기울이는데 그러면 차이가 뭘까요? 어떤 걸 써야 할까요?</p> + +<p>기본 설정에서 시각적 모습은 동일합니다. 그러나 의미는 다릅니다. <code><em></code>은 콘텐츠를 강조하지만, <code><i></code>는 외국어, 등장인물의 생각 등 일반적인 산문에서 벗어난 경우 사용합니다. (책이나 영화 등의 제목은 {{htmlelement("cite")}}를 사용하세요.)</p> + +<p>그러므로 요소 선택은 상황에 따라 달라야 하며, 순수하게 꾸밈을 위한 요소는 없습니다. 스타일은 CSS에 맡기세요.</p> + +<p><code><em></code>은 "Just <em>do</em> it already!"나 "We <em>had</em> to do something about it."처럼 쓸 수 있습니다. 이 글을 읽는 사람이나 소프트웨어는 기울임꼴 부분에 강세를 두고 말할 것입니다.</p> + +<p><code><i></code>는 "The <em>Queen Mary</em> sailed last night."처럼 사용합니다. "Queen Mary"를 강조하는 것도 아니고, 중요한 단어도 아닙니다. 다만 이 단어가 Mary라는 이름의 여왕이 아니고, <em>Queen Mary</em>라는 이름의 선박임을 나타낼 뿐입니다. "The word <em>the</em> is an article"도 좋은 예제가 되겠습니다.</p> + +<h2 id="예제">예제</h2> + +<p><code><em></code> 요소는 명시적이거나 암시적인 대조를 표현할 때 주로 사용합니다.</p> + +<pre class="brush: html"><p> + 과거에 <em>block-level</em>이라 불렸던 + 콘텐츠는 HTML 5부터 <em>flow</em> 콘텐츠라고 + 말합니다. +</p></pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-em-element', '<em>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-em-element', '<em>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<em>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.em")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("i")}}</li> +</ul> diff --git a/files/ko/web/html/element/embed/index.html b/files/ko/web/html/element/embed/index.html new file mode 100644 index 0000000000..33268299e2 --- /dev/null +++ b/files/ko/web/html/element/embed/index.html @@ -0,0 +1,81 @@ +--- +title: <embed> +slug: Web/HTML/Element/embed +tags: + - HTML + - HTML 포함된 컨텐츠 + - HTML5 + - 레퍼런스 + - 요소 + - 웹 +translation_of: Web/HTML/Element/embed +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><embed></code> 요소</strong>는 외부 어플리케이션이나 대화형 컨텐츠와의 통합점을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/embed.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">컨텐츠 범주</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">플로우 컨텐츠</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">구문 컨텐츠</a>, 포함된 컨텐츠, 대화형 컨텐츠, palpable 컨텐츠.</li> + <li><dfn>허용된 컨텐츠</dfn> 없음. 이것은 {{Glossary("empty element")}}.</li> + <li><dfn>태그 생략</dfn> 시작 태그는 있어야 하며, 종료태그는 있어서는 안됩니다.</li> + <li><dfn>허용된 부모 요소</dfn> 포함된 컨텐츠를 허용하는 모든 요소</li> + <li><dfn>DOM 인터페이스</dfn> {{domxref("HTMLEmbedElement")}}</li> +</ul> + +<h2 id="속성">속성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 속성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("height")}}</dt> + <dd>리소스의 표시될 높이 길이를 CSS 픽셀로 지정</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>포함된 리소스의 URL</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>인스턴스화할 플러그인을 고르기 위해 사용되는 MIME 타입</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>리소스의 표시될 가로 길이를 CSS 픽셀로 지정</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><embed type="video/quicktime" src="movie.mov" width="640" height="480"> +</pre> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-iframe-element.html#the-embed-element', '<embed>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-embed-element', '<embed>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.embed")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>다양한 타입의 포함된 컨텐츠를 위해 사용되는 다른 요소들 {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, and {{HTMLElement("video")}}.</li> +</ul> diff --git a/files/ko/web/html/element/fieldset/index.html b/files/ko/web/html/element/fieldset/index.html new file mode 100644 index 0000000000..951d0f385c --- /dev/null +++ b/files/ko/web/html/element/fieldset/index.html @@ -0,0 +1,151 @@ +--- +title: '<fieldset>: 필드셋 요소' +slug: Web/HTML/Element/fieldset +tags: + - Element + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/fieldset +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><fieldset></code> 요소</strong>는 웹 양식의 여러 컨트롤과 레이블({{htmlelement("label")}})을 묶을 때 사용합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>위의 예제에서 보듯, <code><fieldset></code> 요소는 HTML 양식 속에서 그룹을 만들 수 있으며 {{htmlelement("legend")}} 요소로 그룹의 설명을 제공할 수 있습니다. 여러 특성을 지정할 수 있는데, 그 중 중요한 것 하나는 페이지 내 {{htmlelement("form")}} 요소의 <code>id</code>를 받을 수 있는 <code>form</code> 특성으로, <code><form></code> 바깥의 <code><fieldset></code> 요소를 해당 양식에 포함해야 할 때 사용합니다. 다른 하나는 <code>disabled</code>로, <code><fieldset></code>의 모든 콘텐츠를 한 번에 비활성화할 수 있습니다.</p> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>지정한 경우, 모든 자손 컨트롤을 비활성화합니다. 비활성 컨트롤은 편집할 수 없고, {{htmlelement("form")}}을 제출할 때 데이터에 포함되지 않습니다. 마우스 클릭, 포커스 등 브라우저 이벤트도 모두 받지 않습니다. 브라우저는 비활성 컨트롤을 주로 회색으로 표시합니다. 단, {{htmlelement("legend")}} 안의 양식 요소는 비활성 상태로 전환되지 않습니다.</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd><code><fieldset></code> 요소와 연결할 {{htmlelement("form")}} 요소("양식 소유자")의 {{htmlattrxref("id")}}. <code><fieldset></code>이 해당 <code><form></code> 안에 위치하지 않아도 연결할 수 있습니다.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>그룹과 연관지을 이름. + <div class="note"><strong>참고:</strong> <code><fieldset></code>에 대한 설명은 자신이 포함한 첫 번째 {{htmlelement("legend")}} 요소가 담당합니다.</div> + </dd> +</dl> + +<h2 id="CSS_스타일링">CSS 스타일링</h2> + +<p><code><fieldset></code>에 스타일을 적용하기 전에 고려해야 하는 부분이 있습니다.</p> + +<p><code><fieldset></code>의 {{cssxref("display")}} 속성의 값은 기본적으로 <code>block</code>이며, 새로운 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 맥락</a>을 형성합니다. 인라인형 <code>display</code> 값을 지정하면 <code>inline-block</code>, 그렇지 않으면 <code>block</code>처럼 행동합니다. <code><fieldset></code>은 기본 스타일로 콘텐츠를 감싸는 <code>2px</code> 너비의 <code>groove</code> 테두리, 작은 양의 내부 여백, 그리고 {{cssxref("min-inline-size", "min-inline-size: min-content")}}를 갖습니다.</p> + +<p>{{htmlelement("legend")}} 요소는 <code><fieldset></code>의 블록 시작 방향(대개 위쪽) 테두리 위를 가로지르는 위치에 놓입니다. <code><legend></code> 또한 자신의 블록 서식 맥락을 만들며, 너비는 자신의 콘텐츠에 맞춰져 늘어나거나 줄어듭니다. <code>display</code>는 항상 블록형이 됩니다. 즉, <code>display: inline</code>도 <code>block</code>처럼 동작합니다.</p> + +<p><code><fieldset></code>의 콘텐츠는 별도의 익명 상자가 담게 됩니다. 익명 상자는 <code><fieldset></code>으로부터 특정 속성을 상속합니다. <code><fielset></code>에 <code>display: grid</code> 또는 <code>display: inline-grid</code>를 지정하면 익명 상자는 그리드 서식 맥락을 가지며, <code>display: flex</code> 또는 <code>display: inline-flex</code>를 지정하면 익명 상자가 플렉스 서식 맥락을 갖습니다. 그 외의 경우 블록 서식 맥락입니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 글 작성 시점에서, Microsoft Edge와 Google Chrome에는 {{htmlelement("fieldset")}} 내부에서 플렉스박스와 그리드 레이아웃을 사용할 수 없는 버그가 존재합니다. <a href="https://github.com/w3c/csswg-drafts/issues/321">GitHub 이슈</a>에서 버그 추적 링크를 확인할 수 있습니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_필드셋">간단한 필드셋</h3> + +<p>다음 예제는 {{htmlelement("legend")}}와 하나의 컨트롤을 가진 단순한 <code><fieldset></code>을 보입니다.</p> + +<pre class="brush: html"><form action="#"> + <fieldset> + <legend>Simple fieldset</legend> + <input type="radio" id="radio"> + <label for="radio">Spirit of radio</label> + </fieldset> +</form></pre> + +<p>{{ EmbedLiveSample('간단한_필드셋', '100%', '80') }}</p> + +<h3 id="비활성_필드셋">비활성 필드셋</h3> + +<p>다음 예제는 두 개의 컨트롤을 가진 비활성 <code><fieldset></code>을 보입니다. 각각의 컨트롤은 <code>disabled</code> 특성이 없으나, 필드셋으로 인해 함께 비활성 상태가 된 점을 확인할 수 있습니다.</p> + +<pre class="brush: html"><form action="#"> + <fieldset disabled> + <legend>Disabled fieldset</legend> + <div> + <label for="name">Name: </label> + <input type="name" id="text" value="Chris"> + </div> + <div> + <label for="pwd">Archetype: </label> + <input type="password" id="text" value="Wookie"> + </div> + </fieldset> +</form></pre> + +<p>{{ EmbedLiveSample('비활성_필드셋', '100%', '110') }}</p> + +<h2 id="Specifications" name="Specifications">기술 요약</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, 구획 루트, <a href="/ko/docs/Web/Guide/HTML/Content_categories#양식_관련_콘텐츠">양식 관련 콘텐츠</a>(<a href="/ko/docs/Web/Guide/HTML/Content_categories#나열됨">나열됨</a>), 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>선택적인 {{HTMLElement("legend")}} 요소와 그 이후의 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLFieldSetElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-fieldset-element', '<fieldset>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definition of the <code>fieldset</code> element</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-fieldset-element', '<fieldset>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '<fieldset>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.fieldset")}}</p> diff --git a/files/ko/web/html/element/figcaption/index.html b/files/ko/web/html/element/figcaption/index.html new file mode 100644 index 0000000000..467db8177b --- /dev/null +++ b/files/ko/web/html/element/figcaption/index.html @@ -0,0 +1,88 @@ +--- +title: <figcaption> +slug: Web/HTML/Element/figcaption +tags: + - Element + - HTML + - HTML grouping content + - Reference +translation_of: Web/HTML/Element/figcaption +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><figcaption></code> 요소는 </strong>부모 {{HTMLElement("figure")}} 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/figcaption.html","tabbed-shorter")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC" title="HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{htmlelement("figure")}} 요소의 처음 혹은 마지막.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ariarole("group")}}, {{ariarole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</span></p> + +<h2 id="예제">예제</h2> + +<p><code><figcaption></code>에 대한 예제는 {{HTMLElement("figure")}} 페이지에 포함되어 있습니다.</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-figcaption-element', '<figcaption>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figcaption-element', '<figcaption>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.figcaption")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("figure")}} 요소</li> +</ul> diff --git a/files/ko/web/html/element/figure/index.html b/files/ko/web/html/element/figure/index.html new file mode 100644 index 0000000000..3630515211 --- /dev/null +++ b/files/ko/web/html/element/figure/index.html @@ -0,0 +1,175 @@ +--- +title: <figure> +slug: Web/HTML/Element/figure +tags: + - Element + - HTML + - HTML grouping content + - Reference +translation_of: Web/HTML/Element/figure +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><figure></code> 요소</strong>는 독립적인 콘텐츠를 표현합니다. {{htmlelement("figcaption")}} 요소를 사용해 설명을 붙일 수 있습니다.</span> 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC" title="HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>, 구획 루트, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td> + <p>{{htmlelement("figcaption")}}과 뒤따르는 <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐</a>츠.<br> + 혹은 플로우 콘텐츠를 뒤따르는 <code><figcaption></code>.<br> + 혹은 플로우 콘텐츠.</p> + </td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>보통 <code><figure></code>는 주 문서 플로우가 참조하지만, 다른 부분이나 부록으로 이동해도 문제 없는 이미지, 삽화, 도표, 코드 조각 등을 맡습니다.</li> + <li><code><figure></code>는 구획 루트이므로 <code><figure></code> 요소의 콘텐츠는 문서의 주 개요에서 제외됩니다.</li> + <li>안에 (처음이나 마지막 자식으로) {{HTMLElement("figcaption")}}을 넣어서 설명을 덧붙일 수 있습니다. 제일 처음 <code><figcaption></code>을 설명으로 사용합니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="이미지">이미지</h3> + +<pre class="brush: html"><code><!-- Just an image --> +<figure> + <img + src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" + alt="A robotic monster over the letters MDN."> +</figure> + +<!-- Image with a caption --> +<figure> + <img + src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" + alt="A robotic monster over the letters MDN."> + <figcaption>MDN Logo</figcaption> +</figure></code> +</pre> + +<p>{{EmbedLiveSample("이미지", "100%", 250)}}</p> + +<h3 id="코드_조각">코드 조각</h3> + +<pre class="brush: html"><figure> + <figcaption><code>navigator</code>를 이용하여 브라우저 정보 얻기</figcaption> + <pre> +function NavigatorExample() { + var txt; + txt = "Browser CodeName: " + navigator.appCodeName; + txt+= "Browser Name: " + navigator.appName; + txt+= "Browser Version: " + navigator.appVersion ; + txt+= "Cookies Enabled: " + navigator.cookieEnabled; + txt+= "Platform: " + navigator.platform; + txt+= "User-agent header: " + navigator.userAgent; +} + </pre> +</figure> +</pre> + +<p>{{EmbedLiveSample("코드_조각", "100%", 250)}}</p> + +<h3 id="인용문">인용문</h3> + +<figure> +<pre class="brush: html"><code><figure> + <figcaption><cite>Edsger Dijkstra:</cite></figcaption> + <blockquote>If debugging is the process of removing software bugs, + then programming must be the process of putting them in.</blockquote> +</figure></code> +</pre> + +<p>{{EmbedLiveSample("인용문")}}</p> +</figure> + +<h3 id="시">시</h3> + +<figure> +<pre class="brush: html"><code><figure> + <p style="white-space:pre"> +Bid me discourse, I will enchant thine ear, + Or like a fairy trip upon the green, +Or, like a nymph, with long dishevell'd hair, + Dance on the sands, and yet no footing seen: +Love is a spirit all compact of fire, + Not gross to sink, but light, and will aspire.</p> + <figcaption><cite>Venus and Adonis</cite>, + by William Shakespeare</figcaption> +</figure></code> +</pre> + +<p>{{EmbedLiveSample("시", "100%", 250)}}</p> +</figure> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>No changes from HTML 5.0.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.figure")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("figcaption")}}</li> +</ul> diff --git a/files/ko/web/html/element/font/index.html b/files/ko/web/html/element/font/index.html new file mode 100644 index 0000000000..44d88447ae --- /dev/null +++ b/files/ko/web/html/element/font/index.html @@ -0,0 +1,48 @@ +--- +title: <font> +slug: Web/HTML/Element/font +tags: + - 요소 + - 폐기됨 +translation_of: Web/HTML/Element/font +--- +<div>{{obsolete_header}}</div> + +<h2 id="개요">개요</h2> + +<p><em>HTML에서의 Font 요소</em> (<code><font></code>) 는 본문의 글자 크기, 색상과 및면을 정의합니다.</p> + +<div class="note"> +<p><em>사용 참고: </em></p> + +<p><strong>이 요소를 사용하지 마세요! </strong>HTML 3.2에서 정규화되었지만, HTML 4.01에서는 사용되지 않는 요소로 지정되었으며, 동시에 스타일링과 관련된 모든 요소가 HTML5에서 폐기되었습니다.</p> + +<p>Starting with HTML 4, HTML does not convey styling information anymore (outside the {{HTMLElement("style")}} element or the <strong>style</strong> attribute of each element). For any new web development, styling should be written using <a href="/en-US/docs/CSS" title="CSS">CSS</a> only.</p> + +<p>The former behavior of the {{HTMLElement("font")}} element can be achieved, and even better controlled using the <a href="/en-US/docs/Web/CSS/CSS_Fonts">CSS Fonts</a> CSS properties.</p> +</div> + +<h2 id="속성">속성</h2> + +<p>다른 HTML 요소들과 같게, 이 요소도 <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">공용 속성</a>을 지원합니다.</p> + +<dl> + <dt>{{htmlattrdef("color")}}</dt> + <dd>This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format.</dd> + <dt>{{htmlattrdef("face")}}</dt> + <dd>This attribute contains a comma-separated list of one or more font names. The document text in the default style is rendered in the first font face that the client's browser supports. If no font listed is installed on the local system, the browser typically defaults to the proportional or fixed-width font for that system.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>This attribute specifies the font size as either a numeric or relative value. Numeric values range from <code>1</code> to <code>7</code> with <code>1</code> being the smallest and <code>3</code> the default. It can be defined using a relative value, like <code>+2</code> or <code>-3</code>, which set it relative to the value of the {{htmlattrxref("size", "basefont")}} attribute of the {{HTMLElement("basefont")}} element, or relative to <code>3</code>, the default value, if none does exist.</dd> +</dl> + +<h2 id="DOM_interface">DOM interface</h2> + +<p>This element implements the {{domxref("HTMLFontElement")}} interface.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.font")}}</p> + +<div>{{HTMLRef}}</div> diff --git a/files/ko/web/html/element/footer/index.html b/files/ko/web/html/element/footer/index.html new file mode 100644 index 0000000000..6c2e3973d0 --- /dev/null +++ b/files/ko/web/html/element/footer/index.html @@ -0,0 +1,109 @@ +--- +title: <footer> +slug: Web/HTML/Element/footer +tags: + - Element + - HTML + - HTML sections + - Reference +translation_of: Web/HTML/Element/footer +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><footer></code> 요소</strong>는 가장 가까운 <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽">구획 콘텐츠</a>나 <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽" title="Sections and Outlines of an HTML5 document#Sectioning root">구획 루트</a>의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/footer.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>. 단, {{htmlelement("header")}}와 다른 <code><footer></code>는 자손이 될 수 없습니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>를 허용하는 모든 요소. 단, <code><footer></code> 요소는 {{htmlelement("address")}}, {{htmlelement("header")}}, 혹은 다른 <code><footer></code>의 자손일 수 없습니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>{{HTMLElement("address")}} 요소로 감싼 작성자 정보를 <code><footer></code> 요소에 배치하세요.</li> + <li><code><footer></code> 요소는 구획 콘텐츠가 아니므로 <a href="/ko/docs/Web/HTML/HTML5_%EB%AC%B8%EC%84%9C%EC%9D%98_%EC%84%B9%EC%85%98%EA%B3%BC_%EC%9C%A4%EA%B3%BD">개요</a>에 새로운 구획을 추가하지 않습니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><footer> + Some copyright info or perhaps some author + info for an &lt;article&gt;? +</footer> +</pre> + +<h2 id="Specifications" name="Specifications">접근성 고려사항</h2> + +<p><a href="https://help.apple.com/voiceover/mac">VoiceOver</a> 스크린 리더는 랜드마크 로터에서 푸터의 랜드마크 역할을 표현하지 않는 문제가 있습니다. 해결하려면 <code><footer></code>에 <code>role="contentinfo"</code>를 추가하세요.</p> + +<ul> + <li><a href="https://bugs.webkit.org/show_bug.cgi?id=146930">WebKit Bugzilla: 146930 – AX: HTML native elements (header, footer, main, aside, nav) should work the same as ARIA landmarks, sometimes they don't</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-footer-element', '<footer>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-footer-element', '<footer>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.footer")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>다른 구획 관련 요소들: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}}</li> +</ul> diff --git a/files/ko/web/html/element/form/index.html b/files/ko/web/html/element/form/index.html new file mode 100644 index 0000000000..38ec4aa393 --- /dev/null +++ b/files/ko/web/html/element/form/index.html @@ -0,0 +1,186 @@ +--- +title: <form> +slug: Web/HTML/Element/form +tags: + - Element + - HTML + - HTML forms + - Reference + - Web + - 양식 +translation_of: Web/HTML/Element/form +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><form></code> 요소</strong>는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p><code><form></code> 요소를 꾸밀 땐, 모든 {{domxref("HTMLFormElement.elements", "elements")}}의 유효성을 나타내는 CSS {{cssxref(":valid")}}와 {{cssxref(":invalid")}} <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>를 사용할 수 있습니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>다른 <code><form></code> 요소를 제외한 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLFormElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt class="hidden">{{htmlattrdef("accept")}} {{obsolete_inline}}</dt> + <dd class="hidden">A comma-separated list of content types that the server accepts. + <div class="note"><strong>사용시 주의:</strong> 이 속성은 HTML5에서 제거되고 더 이상 사용되서는 안됩니다. 대신에, {{HTMLElement("input")}} 요소의 <span class="st">{{htmlattrxref("accept", "input")}} 속성을 사용하세요.</span></div> + </dd> + <dt>{{htmlattrdef("accept-charset")}}</dt> + <dd>스페이스로 구분한, 서버가 허용하는 문자 인코딩의 목록. 브라우저는 목록을 순서대로 사용합니다. 기본값은 <a href="/ko/docs/Web/HTTP/Headers/Content-Encoding">페이지 인코딩</a>과 같습니다.</dd> + <dt>{{htmlattrdef("action")}}</dt> + <dd>양식 데이터를 처리할 프로그램의 {{glossary("URI")}}. {{HTMLElement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 요소의 {{htmlattrxref("formaction", "button")}} 특성으로 재정의할 수 있습니다.</dd> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>양식 요소 내에서 영문을 입력할 때 자동으로 대문자 변환하는 방식. iOS Safari에서만 사용하는 비표준 특성입니다. 각 요소의 <code>autocapitalize</code> 특성이 <code><form></code>에 정의된 값을 재정의합니다. + <ul> + <li><code>none</code>: 자동 대문자 입력을 비활성화합니다.</li> + <li><code>sentences</code>: 문장의 첫 글자를 대문자로 변환합니다. 기본값.</li> + <li><code>words</code>: 각 단어의 첫 글자를 대문자로 변환합니다.</li> + <li><code>characters</code>: 모든 글자를 대문자로 변환합니다.</li> + </ul> + </dd> + <dt>{{htmlattrdef("autocomplete")}}</dt> + <dd>입력 요소가 자동완성된 값을 기본값으로 가질 수 있는지 나타냅니다. 각 요소의 <code>autocomplete</code> 특성이 <code><form></code>에 정의된 값을 재정의합니다. + <ul> + <li><code>off</code>: 브라우저가 각 항목에 자동으로 값을 채워 넣지 않습니다. (로그인 양식으로 의심되는 경우 보통 무시합니다)</li> + <li><code>on</code>: 사용자의 과거 입력값에 기반하여 브라우저가 자동으로 값을 채워 넣습니다.</li> + </ul> + </dd> + <dt>{{htmlattrdef("enctype")}}</dt> + <dd><code>method</code> 특성이 <code>post</code>인 경우, <code>enctype</code>은 양식 제출 시 데이터의 <a href="https://ko.wikipedia.org/wiki/%EB%AF%B8%EB%94%94%EC%96%B4_%ED%83%80%EC%9E%85">MIME 유형</a>을 나타냅니다. + <ul> + <li><code>application/x-www-form-urlencoded</code>: 기본값.</li> + <li><code>multipart/form-data</code>: <code><input type="file"></code>이 존재하는 경우 사용하세요.</li> + <li><code>text/plain</code>: HTML 5에서 디버깅 용으로 추가된 값.</li> + </ul> + + <p>{{HTMLElement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 요소의 {{htmlattrxref("formenctype", "button")}} 특성으로 재정의할 수 있습니다.</p> + </dd> + <dt>{{htmlattrdef("method")}}</dt> + <dd>양식을 제출할 때 사용할 <a href="/ko/docs/Web/HTTP" title="http://www.w3.org/Protocols/rfc2616/rfc2616.html">HTTP</a> 메서드. + <ul> + <li><code>post</code>: <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">POST 메서드</a>. 양식 데이터를 <a href="/ko/docs/Web/API/Body">요청 본문</a>으로 전송합니다.</li> + <li><code>get</code>: <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3">GET 메서드</a>. 양식 데이터를 <code>action</code> URL과 <code>?</code> 구분자 뒤에 이어 붙여서 전송합니다.</li> + <li>dialog: 양식이 {{htmlelement("dialog")}} 안에 위치한 경우, 제출과 함께 대화 상자를 닫습니다.</li> + </ul> + + <p>{{HTMLElement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 요소의 {{htmlattrxref("formmethod", "button")}} 특성으로 재정의할 수 있습니다.</p> + </dd> + <dt>{{htmlattrdef("name")}} {{deprecated_inline}}</dt> + <dd>양식의 이름. HTML 4부터 사용 중단됐습니다. {{htmlattrxref("id")}}를 사용하세요.</dd> + <dt>{{htmlattrdef("novalidate")}}</dt> + <dd>지정한 경우 양식의 유효성 검증을 건너뜁니다. <code>novalidate</code> 특성을 지정하지 않은(양식의 검증을 수행하는) 경우에도 {{HTMLElement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 요소의 {{htmlattrxref("formnovalidate", "button")}} 특성으로 재정의할 수 있습니다.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름. 가능한 값은 {{glossary("browsing context", "브라우징 맥락")}}(탭, 창, {{htmlelement("iframe")}})의 이름 또는 키워드입니다. 지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("target","form")}} 특성보다 우선합니다. 다음 키워드는 특별한 뜻을 가지고 있습니다. + <ul> + <li><code>_self</code>: 응답을 현재 브라우징 맥락에 표시합니다. 기본값.</li> + <li><code>_blank</code>: 응답을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.</li> + <li><code>_parent</code>: 응답을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li> + <li><code>_top</code>: 응답을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li> + </ul> + + <p>{{HTMLElement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 요소의 {{htmlattrxref("formtarget", "button")}} 특성으로 재정의할 수 있습니다.</p> + </dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><!-- Form which will send a GET request to the current URL --> +<form> + <label>Name: + <input name="submitted-name" autocomplete="name"> + </label> + <button>Save</button> +</form> + +<!-- Form which will send a POST request to the current URL --> +<form method="post"> + <label>Name: + <input name="submitted-name" autocomplete="name"> + </label> + <button>Save</button> +</form> + +<!-- Form with fieldset, legend, and label --> +<form method="post"> + <fieldset> + <legend>Title</legend> + <label><input type="radio" name="radio"> Select me</label> + </fieldset> +</form> +</pre> + +<p>{{ EmbedLiveSample('예제', '100%', 110) }}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-form-element', '<form>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-form-element', '<form>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.3', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.form")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><label><a href="/ko/docs/Web/Guide/HTML/Forms" title="/en-US/docs/Web/Guide/HTML/Forms">HTML 양식 안내서</a></label></li> +</ul> diff --git a/files/ko/web/html/element/frame/index.html b/files/ko/web/html/element/frame/index.html new file mode 100644 index 0000000000..d6d8f8ef0e --- /dev/null +++ b/files/ko/web/html/element/frame/index.html @@ -0,0 +1,56 @@ +--- +title: <frame> +slug: Web/HTML/Element/frame +translation_of: Web/HTML/Element/frame +--- +<div>{{Deprecated_header}}</div> + +<h2 id="요약">요약</h2> + +<p><code><frame></code>은 다른 HTML 문서가 표시될 수 있는 특정 영역을 정의하는 element이다. frame은 {{HTMLElement("frameset")}}내에서 사용되어야 한다.</p> + +<p><frame> element의 사용은 screen reader 사용자들의 접근성 부족과같은 기능문제같은 특정 단점 때문에 권장되지 않는다<br> + <frame> element 대신에 {{HTMLElement("iframe")}} 가 아마 더 적합할것이다.</p> + +<h2 id="속성(Attributes)">속성(=Attributes)</h2> + +<p>다른 모든 HTML elments와 마찬가지로, <frame> element는 전역속성(<a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>)이 적용된다.</p> + +<dl> + <dt>{{htmlattrdef("src")}}</dt> + <dd>이 속성은 frame으로 표시될 문서를 기입합니다.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd> + <p>이 속성은 프레임을 명명하는데 사용됩니다. 명명되지않은 모든 링크들은 그들이 속해있는 그 프레임 안에서 열릴것입니다</p> + </dd> + <dt> </dt> + <dt>{{htmlattrdef("noresize")}}</dt> + <dd>이 속성은 사용자가 프레임크기를 조정할수 없게합니다.</dd> + <dt>{{htmlattrdef("scrolling")}}</dt> + <dd><br> + 이 속성은 스크롤바의 유무를 결정합니다. 이 속성을 사용하지않으면 특정상황에서 자동으로 브라우져에 스크롤바가 생깁니다.<br> + 두가지를 선택할 수 있습니다. "yes"면 항상 스크롤바를 보여주고 "no"면 항상 스크롤바를 보여주지 않습니다.</dd> + <dt>{{htmlattrdef("marginheight")}}</dt> + <dd>이 속성은 프레임 사이의 여백 높이를 정의할때 사용됩니다.</dd> + <dt>{{htmlattrdef("marginwidth")}}</dt> + <dd>이 속성은 프레임 사이의 여백 넓이를 정의할때 사용됩니다.</dd> + <dt>{{htmlattrdef("frameborder")}}</dt> + <dd>이 속성을 사용하면 프레임에 대한 경계선을 넣을 수 있습니다.</dd> +</dl> + +<h2 id="예시">예시</h2> + +<pre class="brush: html"><frameset cols="50%,50%"> + <frame src="https://developer.mozilla.org/en/HTML/Element/iframe" /> + <frame src="https://developer.mozilla.org/en/HTML/Element/frame" /> +</frameset> +</pre> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{HTMLElement("frameset")}}</li> + <li>{{HTMLElement("iframe")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/ko/web/html/element/frameset/index.html b/files/ko/web/html/element/frameset/index.html new file mode 100644 index 0000000000..a65b4a20d7 --- /dev/null +++ b/files/ko/web/html/element/frameset/index.html @@ -0,0 +1,39 @@ +--- +title: <frameset> +slug: Web/HTML/Element/frameset +translation_of: Web/HTML/Element/frameset +--- +<div>{{Deprecated_header}}</div> + +<h2 id="요약">요약</h2> + +<p><code><frameset></code>은 HTML element로써 {{HTMLElement("frame")}} element을 포함하고 사용된다.</p> + +<p class="note"><strong>Note: </strong>frame의 사용이 지금 {{HTMLElement("iframe")}}의 사용에 따라줄어드는 추세이기 때문에 , 이 element는 최근 웹사이트에서 잘 쓰이지 않는다.</p> + +<h2 id="속성(Attributes)">속성(=Attributes)</h2> + +<p>다른 모든 HTML elments와 마찬가지로, <frameset> element는 전역속성(<a href="/en-US/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>)이 적용된다.</p> + +<dl> + <dt>{{htmlattrdef("cols")}}</dt> + <dd>이 속성은 프레임셋안의 가로공간의 갯수와 크기를 정합니다.</dd> + <dt>{{htmlattrdef("rows")}}</dt> + <dd>이 속성은 프레임셋안의 세로공간의 갯수와 크기를 정합니다.</dd> +</dl> + +<h2 id="예시">예시</h2> + +<pre class="brush:html"><frameset cols="50%,50%"> + <frame src="https://developer.mozilla.org/en/HTML/Element/frameset" /> + <frame src="https://developer.mozilla.org/en/HTML/Element/frame" /> +</frameset></pre> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{HTMLElement("frame")}}</li> + <li>{{HTMLElement("iframe")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/ko/web/html/element/head/index.html b/files/ko/web/html/element/head/index.html new file mode 100644 index 0000000000..4dd99da8dd --- /dev/null +++ b/files/ko/web/html/element/head/index.html @@ -0,0 +1,129 @@ +--- +title: '<head>: 문서 메타데이터 (헤더) 요소' +slug: Web/HTML/Element/head +tags: + - Element + - HTML + - HTML document metadata + - 'HTML:Metadata content' + - Reference + - Web + - 요소 +translation_of: Web/HTML/Element/head +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><head></code> 요소</strong>는 기계가 식별할 수 있는 문서 정보(메타데이터)를 담습니다. 정보로는 문서가 사용할 <a href="/ko/docs/Web/HTML/Element/title">제목</a>, <a href="/ko/docs/Web/HTML/Element/script">스크립트</a>, <a href="/ko/docs/Web/HTML/Element/style">스타일 시트</a> 등이 있습니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> <code><head></code>의 주 목적은 기계 처리를 위한 정보이고, 사람이 읽을 수 있는 정보가 아닙니다. 최상위 제목, 작성자 목록 등 사람에게 보여야 할 정보는 {{HTMLElement("header")}} 요소를 사용하세요.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td> + <p>현재 문서가 {{HTMLElement("iframe")}} {{htmlattrxref("srcdoc", "iframe")}} 문서거나, 제목 정보가 더 높은 단계의 규약에 존재하는 경우(HTML 이메일의 제목처럼) 0개 이상의 메타에이터 콘텐츠.</p> + + <p>이외에는 하나 이상의 메타데이터 콘텐츠. 단, 정확히 한 개의 {{htmlelement("title")}} 요소를 포함해야 합니다.</p> + </td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td><code><head></code> 요소 내의 첫 번째 것이 요소라면 여는 태그를 생략할 수 있습니다.<br> + <code><head></code> 요소 뒤의 첫 번째 항목이 공백문자나 주석이 아니라면 닫는 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{HTMLElement("html")}} 요소의 첫 번째 자식으로 배치.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 요소</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLHeadElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html notranslate"><!doctype html> +<html> + <head> + <title>문서 제목</title> + </head> +</html> +</pre> + +<h2 id="참고">참고</h2> + +<p>HTML5 호환 브라우저는 <code><head></code>가 없는 경우 자동으로 생성합니다. 하지만 <a href="https://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/">오래된 구형 브라우저에서는 그렇지 않습니다.</a></p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.1', '<head>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.head")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><code><head></code> 안에 배치할 수 있는 요소 + + <ul> + <li>{{HTMLElement("title")}}</li> + <li>{{HTMLElement("base")}}</li> + <li>{{HTMLElement("link")}}</li> + <li>{{HTMLElement("style")}}</li> + <li>{{HTMLElement("meta")}}</li> + <li>{{HTMLElement("script")}}</li> + <li>{{HTMLElement("noscript")}}</li> + <li>{{HTMLElement("template")}}</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/html/element/header/index.html b/files/ko/web/html/element/header/index.html new file mode 100644 index 0000000000..51a8f41d1f --- /dev/null +++ b/files/ko/web/html/element/header/index.html @@ -0,0 +1,109 @@ +--- +title: <header> +slug: Web/HTML/Element/header +tags: + - Element + - HTML + - HTML sections + - Reference + - Web +translation_of: Web/HTML/Element/header +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><header></code> 요소</strong>는 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/header.html", "tabbed-standard")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>. 단, 다른 <code><header></code> 또는 {{htmlelement("footer")}}가 자손으로 올 수 없습니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소. 단, {{htmlelement("address")}}, {{htmlelement("footer")}}, 또는 다른 <code><header></code>의 자손으로 사용할 수 없습니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><header></code> 요소는 구획 콘텐츠가 아니므로 개요에 구획을 생성하지 않습니다. 대신 주위 구획의 제목({{htmlelement("Heading_Elements", "<h1>-<h6>")}} 요소)을 감싸기 위한 요소지만, 필수 사항은 <strong>아닙니다</strong>.</p> + +<h3 id="역사적_사용처">역사적 사용처</h3> + +<p><code><header></code>는 {{glossary("HTML5")}}에서야 명세에 포함됐지만, 사실 HTML의 시작부터 존재했습니다. <a href="http://info.cern.ch/">세계 최초의 웹사이트</a>에서 확인할 수 있듯 원래는 {{htmlelement("head")}}요소로서 사용했지만, 어느 순간부터 다른 이름이 됐습니다. 덕분에 <code><header></code>는 나중에 다른 역할을 맡을 수 있었습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="페이지_제목">페이지 제목</h3> + +<pre class="brush: html"><header> + <h1>Main Page Title</h1> + <img src="mdn-logo-sm.png" alt="MDN logo"> +</header> +</pre> + +<h3 id="글_제목">글 제목</h3> + +<pre class="brush: html"><article> + <header> + <h2>The Planet Earth</h2> + <p>Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by Jane Smith</p> + </header> + <p>We live on a planet that's blue and green, with so many things still unseen.</p> + <p><a href="https://janesmith.com/the-planet-earth/">Continue reading....</a></p> +</article> +</pre> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.header")}}</p> diff --git a/files/ko/web/html/element/heading_elements/index.html b/files/ko/web/html/element/heading_elements/index.html new file mode 100644 index 0000000000..87e972e996 --- /dev/null +++ b/files/ko/web/html/element/heading_elements/index.html @@ -0,0 +1,242 @@ +--- +title: '<h1>–<h6>: HTML 구획 제목 요소' +slug: Web/HTML/Element/Heading_Elements +tags: + - Element + - HTML + - HTML sections + - Reference + - Web +translation_of: Web/HTML/Element/Heading_Elements +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><h1></code>–<code><h6></code> 요소</strong>는 6단계의 구획 제목을 나타냅니다. 구획 단계는 <code><h1></code>이 가장 높고 <code><h6></code>은 가장 낮습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#제목_콘텐츠">제목 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소. {{HTMLElement("hgroup")}} 요소의 자식으로 사용하지 마세요. 더 이상 쓰이지 않는 요소입니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLHeadingElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><code><h1></code>-<code><h6></code> 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>사용자 에이전트가 제목의 정보를 사용해 자동으로 문서 콘텐츠의 표를 만드는 등의 작업을 수행할 수 있습니다.</li> + <li>글씨 크기를 위해 제목 태그를 사용하지 마세요. 대신 {{glossary("CSS")}}의 {{cssxref("font-size")}} 속성을 사용하세요.</li> + <li>제목 단계를 건너뛰는 것을 피하세요. 언제나 <code><h1></code>로 시작해서, <code><h2></code><code>,</code> 순차적으로 기입하세요.</li> + <li>페이지 당 하나의 <code><h1></code>만 사용하세요. 여러 개를 써도 오류는 나지 않겠지만, 단일 <code><h1></code>이 모범 사례로 꼽힙니다. 논리적으로 생각했을 때도, <code><h1></code>은 가장 중요한 제목이므로 전체 페이지의 목적을 설명해야 할 것입니다. 두 개의 제목을 가진 책이나, 여러 개의 이름을 가진 영화는 볼 수 없죠! 또한 스크린 리더 사용자와 {{glossary("SEO")}}에도 더 적합합니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="모든_제목_단계">모든 제목 단계</h3> + +<p>다음 코드는 모든 단계의 제목을 보입니다.</p> + +<pre class="brush: html"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +<h5>Heading level 5</h5> +<h6>Heading level 6</h6> +</pre> + +<p>{{ EmbedLiveSample('모든_제목_단계', '280', '300', '') }}</p> + +<h3 id="예제_페이지">예제 페이지</h3> + +<p>다음 코드는 약간의 제목과 내용을 보여줍니다.</p> + +<pre class="brush: html"><h1>Heading elements</h1> +<h2>Summary</h2> +<p>Some text here...</p> + +<h2>Examples</h2> +<h3>Example 1</h3> +<p>Some text here...</p> + +<h3>Example 2</h3> +<p>Some text here...</p> + +<h2>See also</h2> +<p>Some text here...</p> +</pre> + +<p>{{ EmbedLiveSample('예제_페이지', '280', '480', '') }}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<h3 id="탐색">탐색</h3> + +<p>스크린 리더 사용자가 흔히 사용하는 탐색 기법은 제목에서 제목으로 뛰어넘으며 페이지 콘텐츠를 빠르게 파악하는 것입니다. 따라서 제목 단계를 뛰어넘으면 중간에 빠진 제목이 어디 있는 건지 모르므로 사용자의 혼란을 야기할 수 있습니다.</p> + +<h4 id="하지_말것">하지 말것</h4> + +<pre class="brush: html example-bad"><h1>Heading level 1</h1> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +</pre> + +<h4 id="할것">할것</h4> + +<pre class="brush: html example-good"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +</pre> + +<h4 id="중첩">중첩</h4> + +<p>하위 구획으로 제목을 중첩해 콘텐츠의 구조를 나타낼 수 있습니다. 대부분의 스크린 리더는 페이지의 제목을 정렬한 목록도 생성해 제공하므로, 사용자가 빠르게 콘텐츠 구조를 파악할 수 있도록 도와줍니다.</p> + +<ol> + <li><code>h1</code> Beetles + + <ol> + <li><code>h2</code> Etymology</li> + <li><code>h2</code> Distribution and Diversity</li> + <li><code>h2</code> Evolution + <ol> + <li><code>h3</code> Late Paleozoic</li> + <li><code>h3</code> Jurassic</li> + <li><code>h3</code> Cretaceous</li> + <li><code>h3</code> Cenozoic</li> + </ol> + </li> + <li><code>h2</code> External Morphology + <ol> + <li><code>h3</code> Head + <ol> + <li><code>h4</code> Mouthparts</li> + </ol> + </li> + <li><code>h3</code> Thorax + <ol> + <li><code>h4</code> Prothorax</li> + <li><code>h4</code> Pterothorax</li> + </ol> + </li> + <li><code>h3</code> Legs</li> + <li><code>h3</code> Wings</li> + <li><code>h3</code> Abdomen</li> + </ol> + </li> + </ol> + </li> +</ol> + +<p>중첩 제목에서, 하위 구획을 닫을 땐 제목 단계를 위로 "건너뛸" 수 있습니다.</p> + +<ul> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Headings • Page Structure • WAI Web Accessibility Tutorials</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html">Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="구획_콘텐츠_레이블">구획 콘텐츠 레이블</h3> + +<p>스크린 리더 사용자가 자주 사용하는 다른 기술은 <a href="/ko/docs/Web/HTML/Element#콘텐츠_구획">콘텐츠 구획</a>의 목록을 생성한 후, 이를 통해 페이지 레이아웃을 파악하는 것입니다.</p> + +<p>콘텐츠 구획에는 <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code>와 {{htmlattrxref("id")}} 특성을 함께 사용해 이름, 즉 레이블을 붙일 수 있습니다. 레이블은 현재 구획의 목적을 간결하게 설명해야 합니다. 레이블 기법은 한 페이지에 다수의 구획이 있을 때 유용하게 사용할 수 있습니다.</p> + +<h4 id="예제_2">예제</h4> + +<pre class="brush: html"><header> + <nav aria-labelledby="primary-navigation"> + <h2 id="primary-navigation">주 탐색창</h2> + <!-- navigation items --> + </nav> +</header> + +<!-- page content --> + +<footer> + <nav aria-labelledby="footer-navigation"> + <h2 id="footer-navigation">하단 탐색창</h2> + <!-- navigation items --> + </nav> +</footer> +</pre> + +<p>위의 예제에서 스크린 리더는 두 개의 {{HTMLElement("nav")}} 구획이 있으며, 하나는 "주 탐색창", 다른 하나는 "하단 탐색창"이라고 불린다는 사실을 표현합니다. 레이블을 지정하지 않았다면, 사용자가 각 <code><nav></code> 요소의 콘텐츠를 일일히 분석해 목적을 알아내야 했을 것입니다.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby">Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1-h2-h3-h4-h5-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.h1")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("p")}}</li> + <li>{{HTMLElement("div")}}</li> + <li>{{HTMLElement("section")}}</li> +</ul> diff --git a/files/ko/web/html/element/hgroup/index.html b/files/ko/web/html/element/hgroup/index.html new file mode 100644 index 0000000000..56244c233d --- /dev/null +++ b/files/ko/web/html/element/hgroup/index.html @@ -0,0 +1,105 @@ +--- +title: <hgroup> +slug: Web/HTML/Element/hgroup +tags: + - Element + - HTML + - HTML sections + - Reference + - Web +translation_of: Web/HTML/Element/hgroup +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><hgroup></code> 요소</strong>는 문서 구획의 다단계 제목을 나타냅니다. 다수의 <code>{{htmlelement("Heading_Elements", "<h1>-<h6>")}}</code> 요소를 묶을 때 사용합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, 제목 콘텐츠, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>하나 이상의 {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 규칙</th> + <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<div class="blockIndicator note"> +<p><code><hgroup></code> 요소는 W3C HTML5 명세에서 제거되었고, WHATWG판 HTML에만 남아있습니다. 그러나 대부분의 브라우저에서 부분적으로 구현 중이므로 사라지지는 않을 것으로 보입니다.<br> + 다만, <code><hgroup></code> 요소의 주요 목적이 <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽">HTML 명세의 개요 알고리즘</a>에서 제목의 표시 방법을 설정하기 위함이며, <strong>어떠한 브라우저도 개요 알고리즘을 구현하지 않았음</strong>을 고려할 때, <code><hgroup></code>의 의미는 이론적으로만 유효합니다.<br> + W3C HTML5 명세에서 <code><hgroup></code> 없이 <a href="https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements">부제, 보조 제목, 태그라인의 마크업 방법</a>에 대한 조언을 제공하고 있습니다.</p> +</div> + +<p><code><hgroup></code> 요소는 문서 구획의 주 제목과 2차 제목을 연결해, 제목-부제목과 같은 "다단계 제목"을 만들 수 있습니다.</p> + +<p>다른 말로 하면, <code><hgroup></code> 요소는 자신의 2차 <code>{{htmlelement("Heading_Elements", "<h1>-<h6>")}}</code>이 문서 개요에 자신의 구획을 생성하는 것을 방지합니다.</p> + +<p>따라서 <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽">HTML 개요 알고리즘</a>이 생성한 추상적 개요 내에서, <code><hgroup></code>은 논리적인 단일 제목을 형성하고, <code><hgroup></code>의 자식 제목 요소가 그 안에 하나로 포함됩니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><hgroup> + <h1>주요 제목</h1> + <h2>부제목</h2> +</hgroup> +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-hgroup-element', '<hgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.hgroup")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>구획 관련 다른 요소: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">HTML5 문서의 구획과 개요</a>.</li> +</ul> diff --git a/files/ko/web/html/element/hr/index.html b/files/ko/web/html/element/hr/index.html new file mode 100644 index 0000000000..80163cd763 --- /dev/null +++ b/files/ko/web/html/element/hr/index.html @@ -0,0 +1,131 @@ +--- +title: <hr> +slug: Web/HTML/Element/hr +tags: + - Element + - HTML + - HTML grouping content + - Reference +translation_of: Web/HTML/Element/hr +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><hr></code> 요소</strong>는 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/hr.html", "tabbed-shorter")}}</div> + + + +<p>역사적으로 <code><hr></code>은 가로줄로 표현했습니다. 시각적 브라우저에서도 가로줄로 그려질 수 있지만, 이제 시각 표현에 그치지 않고 의미를 가지게 됐습니다. 따라서 가로줄을 그리고 싶다면 적절한 CSS를 사용해야 합니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>없음. {{glossary("empt element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLHRElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt> + <dd>줄의 정렬을 지정합니다. 기본값은 <code>left</code>입니다.</dd> + <dt>{{htmlattrdef("color")}} {{Non-standard_inline}}</dt> + <dd>색깔 이름 또는 16 진수의 값으로 줄의 색깔을 지정합니다.</dd> + <dt>{{htmlattrdef("noshade")}} {{deprecated_inline}}</dt> + <dd>Sets the rule to have no shading.</dd> + <dt>{{htmlattrdef("size")}} {{deprecated_inline}}</dt> + <dd>줄의 높이를 픽셀 단위로 지정합니다.</dd> + <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt> + <dd>줄의 가로 길이를 픽셀이나 퍼센트 값으로 지정합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> +This is the first paragraph of text. +This is the first paragraph of text. +This is the first paragraph of text. +This is the first paragraph of text. +</p> + +<hr> + +<p> +This is second paragraph of text. +This is second paragraph of text. +This is second paragraph of text. +This is second paragraph of text. +</p> +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-hr-element', '<hr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definition of the <code><hr></code> element</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-hr-element', '<hr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.3', '<hr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>The <code>align</code>, <code>noshade</code>, <code>size</code>, and <code>width</code> attributes are deprecated</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.hr")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{htmlelement("p")}}</li> +</ul> diff --git a/files/ko/web/html/element/html/index.html b/files/ko/web/html/element/html/index.html new file mode 100644 index 0000000000..a9c634ebc5 --- /dev/null +++ b/files/ko/web/html/element/html/index.html @@ -0,0 +1,123 @@ +--- +title: '<html>: HTML 문서 / 루트 요소' +slug: Web/HTML/Element/html +tags: + - Element + - HTML + - HTML Root Element + - Reference + - Web +translation_of: Web/HTML/Element/html +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><html></code> 요소</strong>는 HTML 문서의 루트(최상단 요소)를 나타내며, "루트 요소"라고도 부릅니다. 모든 다른 요소는 <code><html></code> 요소의 후손이어야 합니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>하나의 {{HTMLElement("head")}} 요소와 그 뒤를 따르는 하나의 {{HTMLElement("body")}} 요소.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td><code><html></code> 요소 내부의 첫 번째 것이 주석이 아니라면 시작 태그를 생략할 수 있습니다.<br> + <code><html></code> 요소 바로 뒤에 주석이 따라오지 않는다면 종료 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>없음. <code><html></code>이 문서의 루트 요소입니다.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 역할</th> + <td>{{domxref("HTMLHtmlElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a><span style="line-height: 21px;">을 포함합니다.</span></p> + +<dl> + <dt>{{htmlattrdef("manifest")}} {{obsolete_inline}}</dt> + <dd>지역적으로 캐시되어야하는 리소스를 가리키는 매니페스트 리소스의 URI를 나타냅니다. 자세한 내용은 <a href="/en-US/docs/HTML/Using_the_application_cache" title="/en-US/docs/HTML/Using_the_application_cache">애플리케이션 캐시 사용하기</a>를 보세요.</dd> + <dt>{{htmlattrdef("version")}} {{obsolete_inline}}</dt> + <dd>현재 문서를 제어하는 HTML 문서 타입 정의의 버전을 나타냅니다. 하지만 이미 문서 타입 선언이 버전을 나타내고 있기 떄문에 이 속성은 필요하지 않습니다.</dd> + <dt>{{htmlattrdef("xmlns")}}</dt> + <dd>문서의 {{glossary("XML")}} {{glossary("네임스페이스")}}를 지정합니다. 기본값은 <code>"http://www.w3.org/1999/xhtml"</code>입니다. XML {{glossary("parser", "구문 분석기")}}로 분석한 문서에는 필수이고, <code>text/html</code> 문서에서는 선택사항입니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html lang="ko"> + <head>...</head> + <body>...</body> +</html> +</pre> + +<h2 id="Specifications" name="Specifications">접근성 고려사항</h2> + +<p><code>html</code> 요소의 {{htmlattrxref("lang")}} 특성에 <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">유효한 IETF 언어 식별 태그</a>를 지정하면 스크린 리더가 음성 표현에 사용할 언어를 선택할 때 도움이 됩니다. 언어 식별 태그는 페이지의 주 언어를 가리켜야 합니다. 아무런 값도 지정하지 않을 시 보통 운영체제의 언어 설정을 따라가므로, 잘못된 발음을 사용할 수 있습니다.</p> + +<p>또한 <code><html></code> 요소에 유효한 <code>lang</code> 선언이 존재해야 {{htmlelement("title")}}과 같은 {{htmlelement("head")}} 내부의 중요한 메타데이터를 정확한 발음으로 표현할 수 있습니다.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.1_%E2%80%94_Readable_Make_text_content_readable_and_understandable">MDN Understanding WCAG, Guideline 3.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/meaning-doc-lang-id.html">Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '<html>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.html")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>MathML 최상위 요소 {{MathMLElement("math")}}</li> + <li>SVG 최상위 요소 {{SVGElement("svg")}}</li> +</ul> diff --git a/files/ko/web/html/element/i/index.html b/files/ko/web/html/element/i/index.html new file mode 100644 index 0000000000..583115a20f --- /dev/null +++ b/files/ko/web/html/element/i/index.html @@ -0,0 +1,119 @@ +--- +title: <i> +slug: Web/HTML/Element/i +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/i +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><i></code> 요소</strong>는 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타냅니다.</span> 기술 용어, 외국어 구절, 등장인물의 생각 등을 예시로 들 수 있습니다. 보통 기울임꼴로 표시합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/i.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>일반 산문과 다른 문체를 가진 텍스트에 <code><i></code> 요소를 사용하세요. 주위 텍스트와 다른 의미를 가진 텍스트에 적용하면 됩니다.</li> + <li>초기 HTML 명세의 <code><i></code> 요소는, {{htmlelement("b")}} 요소가 굵은 글씨 적용에 그쳤던 것과 마찬가지로, 글자를 기울이기만 하는 단순한 시각적 요소였습니다. 그러나 지금은 글자 외형에 그치지 않고 특정한 의미를 지니는 요소이므로 시각적인 강조에 그치지 않습니다. 보통, 브라우저가 여전히 <code><i></code> 요소의 글자를 기울이겠지만, 명세에 따르면 꼭 그렇게 표시할 필요는 없습니다.</li> + <li><code><i></code> 요소가 글자를 기울이기는 하지만, 기울임꼴을 적용하기 위한 용도로 사용해서는 안됩니다. CSS {{cssxref("font-style")}} 속성을 사용하세요.</li> + <li>강조하려는 텍스트가 다른 요소에 더 적합하지 않은지 고려하세요. + <ul> + <li>{{htmlelement("em")}} 요소는 강세를 나타냅니다.</li> + <li>{{htmlelement("strong")}} 요소는 보다 강한 강조를 나타냅니다.</li> + <li>{{htmlelement("mark")}} 요소는 관련성을 나타냅니다.</li> + <li>{{htmlelement("cite")}} 요소는 책, 공연, 음악 등 저작물의 이름을 나타냅니다.</li> + <li>{{htmlelement("dfn")}} 요소는 정의 대상인 용어를 나타냅니다.</li> + </ul> + </li> +</ul> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 외국어를 강조하기 위해 <code><i></code> 요소를 사용합니다.</p> + +<pre class="brush: html"><p>라틴어 문구 <i>Veni, vidi, vici</i>는 음악과 예술, 문학에 자주 등장합니다.</p></pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-i-element', '<i>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-i-element', '<i>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.i")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("em")}}</li> +</ul> diff --git a/files/ko/web/html/element/iframe/index.html b/files/ko/web/html/element/iframe/index.html new file mode 100644 index 0000000000..bb4ecec354 --- /dev/null +++ b/files/ko/web/html/element/iframe/index.html @@ -0,0 +1,253 @@ +--- +title: '<iframe>: 인라인 프레임 요소' +slug: Web/HTML/Element/iframe +tags: + - Element + - HTML + - HTML embedded content + - Reference + - Web +translation_of: Web/HTML/Element/iframe +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><iframe></code> 요소</strong>는 중첩 {{glossary("browsing context", "브라우징 맥락")}}을 나타내는 요소로, 현재 문서 안에 다른 HTML 페이지를 삽입합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/iframe.html", "tabbed-standard")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<p>삽입된 브라우징 맥락은 각자 자신만의 <a href="/ko/docs/Web/API/History">세션 기록</a>과 <a href="/ko/docs/Web/API/Document">문서</a>를 가집니다. 다른 브라우징 맥락을 포함하고 있는 맥락은 "부모 브라우징 맥락"이라고 부릅니다. 부모를 가지지 않는, 즉 최상위 브라우징 맥락은 대개 브라우저 창으로서, {{domxref("Window")}} 객체로 나타냅니다.</p> + +<div class="blockIndicator warning"> +<p>각각의 브라우징 맥락은 완전한 문서 환경이므로, 페이지에 <code><iframe></code>을 추가할 때마다 메모리 및 기타 컴퓨터 자원 사용량이 늘어납니다. 이론상으로는 원하는 만큼 <code><iframe></code>을 사용할 수 있지만, 성능 문제가 없는지 확인하세요.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>플로우 콘텐츠, 구문 콘텐츠, 내장 콘텐츠, 대화형 콘텐츠, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>내장 콘텐츠를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLIFrameElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("allow")}}</dt> + <dd>Specifies a <a href="/en-US/docs/Web/HTTP/Feature_Policy">feature policy</a> for the <code><iframe></code>. See the article <a href="/en-US/docs/Web/Privacy">Privacy, permissions, and information security</a> for details on security issues and how <code><iframe></code> works with Feature Policy to keep systems safe.</dd> + <dt>{{htmlattrdef("allowfullscreen")}}</dt> + <dd>Set to <code>true</code> if the <code><iframe></code> can activate fullscreen mode by calling the {{domxref("Element.requestFullscreen", "requestFullscreen()")}} method.</dd> + <dd> + <div class="note">This attribute is considered a legacy attribute and redefined as <code>allow="fullscreen"</code>.</div> + </dd> + <dt>{{htmlattrdef("allowpaymentrequest")}}</dt> + <dd>Set to <code>true</code> if a cross-origin <code><iframe></code> should be allowed to invoke the <a href="/en-US/docs/Web/API/Payment_Request_API">Payment Request API</a>.</dd> + <dd> + <div class="note">This attribute is considered a legacy attribute and redefined as <code>allow="payment"</code>.</div> + </dd> + <dt>{{htmlattrdef("csp")}} {{experimental_inline}}</dt> + <dd>A <a href="/en-US/docs/Web/HTTP/CSP">Content Security Policy</a> enforced for the embedded resource. See {{domxref("HTMLIFrameElement.csp")}} for details.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>The height of the frame in CSS pixels. Default is <code>150</code>.</dd> + <dt id="name-attribute">{{htmlattrdef("importance")}} {{experimental_inline}}</dt> + <dd>The download priority of the resource in the <code><iframe></code>'s <code>src</code> attribute. Allowed values: + <dl> + <dt><code>auto</code> (default)</dt> + <dd>No preference. The browser uses its own heuristics to decide the priority of the resource.</dd> + <dt><code>high</code></dt> + <dd>The resource should be downloaded before other lower-priority page resources.</dd> + <dt><code>low</code></dt> + <dd>The resource should be downloaded after other higher-priority page resources.</dd> + </dl> + </dd> + <dt>{{htmlattrdef("loading")}} {{experimental_inline}}</dt> + <dd>Indicates how the browser should load the iframe: + <ul> + <li><code>eager</code>: Load the iframe immediately, regardless if it is outside the visible viewport (this is the default value).</li> + <li><code><font face="consolas, Liberation Mono, courier, monospace">lazy</font></code>: Defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser.</li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>A targetable name for the embedded browsing context. This can be used in the <code>target</code> attribute of the {{HTMLElement("a")}}, {{HTMLElement("form")}}, or {{HTMLElement("base")}} elements; the <code>formtarget</code> attribute of the {{HTMLElement("input")}} or {{HTMLElement("button")}} elements; or the <code>windowName</code> parameter in the {{domxref("Window.open()","window.open()")}} method.</dd> + <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt> + <dd>Indicates which <a href="/en-US/docs/Web/API/Document/referrer">referrer</a> to send when fetching the frame's resource: + <ul> + <li><code>no-referrer</code>: The {{HTTPHeader("Referer")}} header will not be sent.</li> + <li><code>no-referrer-when-downgrade</code> (default): The {{HTTPHeader("Referer")}} header will not be sent to {{Glossary("origin")}}s without {{Glossary("TLS")}} ({{Glossary("HTTPS")}}).</li> + <li><code>origin</code>: The sent referrer will be limited to the origin of the referring page: its <a href="/en-US/docs/Archive/Mozilla/URIScheme">scheme</a>, {{Glossary("host")}}, and {{Glossary("port")}}.</li> + <li><code>origin-when-cross-origin</code>: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.</li> + <li><code>same-origin</code>: A referrer will be sent for {{Glossary("Same-origin policy", "same origin")}}, but cross-origin requests will contain no referrer information.</li> + <li><code>strict-origin</code>: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).</li> + <li><code>strict-origin-when-cross-origin</code>: Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).</li> + <li><code>unsafe-url</code>: The referrer will include the origin <em>and</em> the path (but not the <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash">fragment</a>, <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/password">password</a>, or <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/username">username</a>). <strong>This value is unsafe</strong>, because it leaks origins and paths from TLS-protected resources to insecure origins.</li> + </ul> + </dd> + <dt>{{htmlattrdef("sandbox")}}</dt> + <dd>Applies extra restrictions to the content in the frame. The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions: + <ul> + <li><code>allow-downloads-without-user-activation</code> {{experimental_inline}}: Allows for downloads to occur without a gesture from the user.</li> + <li><code>allow-forms</code>: Allows the resource to submit forms. If this keyword is not used, form submission is blocked.</li> + <li><code>allow-modals</code>: Lets the resource <a href="https://html.spec.whatwg.org/multipage/origin.html#sandboxed-modals-flag">open modal windows</a>.</li> + <li><code>allow-orientation-lock</code>: Lets the resource <a href="/en-US/docs/Web/API/Screen/lockOrientation">lock the screen orientation</a>.</li> + <li><code>allow-pointer-lock</code>: Lets the resource use the <a href="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a>.</li> + <li><code>allow-popups</code>: Allows popups (such as <code>window.open()</code>, <code>target="_blank"</code>, or <code>showModalDialog()</code>). If this keyword is not used, the popup will silently fail to open.</li> + <li><code>allow-popups-to-escape-sandbox</code>: Lets the sandboxed document open new windows without those windows inheriting the sandboxing. For example, this can safely sandbox an advertisement without forcing the same restrictions upon the page the ad links to.</li> + <li><code>allow-presentation</code>: Lets the resource start a <a href="/en-US/docs/Web/API/PresentationRequest">presentation session</a>.</li> + <li><code>allow-same-origin</code>: If this token is not used, the resource is treated as being from a special origin that always fails the {{Glossary("same-origin policy")}}.</li> + <li><code>allow-scripts</code>: Lets the resource run scripts (but not create popup windows).</li> + <li><code>allow-storage-access-by-user-activation</code> {{experimental_inline}}: Lets the resource request access to the parent's storage capabilities with the <a href="/en-US/docs/Web/API/Storage_Access_API">Storage Access API</a>.</li> + <li><code>allow-top-navigation</code>: Lets the resource navigate the top-level browsing context (the one named <code>_top</code>).</li> + <li><code>allow-top-navigation-by-user-activation</code>: Lets the resource navigate the top-level browsing context, but only if initiated by a user gesture.</li> + </ul> + + <div class="note"><strong>Notes about sandboxing:</strong> + + <ul> + <li>When the embedded document has the same origin as the embedding page, it is <strong>strongly discouraged</strong> to use both <code>allow-scripts</code> and <code>allow-same-origin</code>, as that lets the embedded document remove the <code>sandbox</code> attribute — making it no more secure than not using the <code>sandbox</code> attribute at all.</li> + <li>Sandboxing is useless if the attacker can display content outside a sandboxed <code>iframe</code> — such as if the viewer opens the frame in a new tab. Such content should be also served from a <em>separate origin</em> to limit potential damage.</li> + <li>The <code>sandbox</code> attribute is unsupported in Internet Explorer 9 and earlier.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>The URL of the page to embed. Use a value of <code>about:blank</code> to embed an empty page that conforms to the <a href="/en-US/docs/Web/Security/Same-origin_policy#Inherited_origins">same-origin policy</a>. Also note that programatically removing an <code><iframe></code>'s src attribute (e.g. via {{domxref("Element.removeAttribute()")}}) causes <code>about:blank</code> to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari/iOS.</dd> + <dt>{{htmlattrdef("srcdoc")}}</dt> + <dd>Inline HTML to embed, overriding the <code>src</code> attribute. If a browser does not support the <code>srcdoc</code> attribute, it will fall back to the URL in the <code>src</code> attribute.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>The width of the frame in CSS pixels. Default is <code>300</code>.</dd> +</dl> + +<h3 id="Deprecated_attributes">Deprecated attributes</h3> + +<p>These attributes are deprecated and may no longer be supported by all user agents. You should not use them in new content, and try to remove them from existing content.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>The alignment of this element with respect to the surrounding context.</dd> + <dt>{{htmlattrdef("frameborder")}} {{obsolete_inline("html5")}}</dt> + <dd>The value <code>1</code> (the default) draws a border around this frame. The value <code>0</code> removes the border around this frame, but you should instead use the CSS property {{cssxref("border")}} to control <code><iframe></code> borders.</dd> + <dt>{{htmlattrdef("longdesc")}} {{obsolete_inline("html5")}}</dt> + <dd>A URL of a long description of the frame's content. Due to widespread misuse, this is not helpful for non-visual browsers.</dd> + <dt>{{htmlattrdef("marginheight")}} {{obsolete_inline("html5")}}</dt> + <dd>The amount of space in pixels between the frame's content and its top and bottom borders.</dd> + <dt>{{htmlattrdef("marginwidth")}} {{obsolete_inline("html5")}}</dt> + <dd>The amount of space in pixels between the frame's content and its left and right borders.</dd> + <dt>{{htmlattrdef("scrolling")}} {{obsolete_inline("html5")}}</dt> + <dd>Indicates when the browser should provide a scrollbar for the frame: + <ul> + <li><code>auto</code>: Only when the frame's content is larger than its dimensions.</li> + <li><code>yes</code>: Always show a scrollbar.</li> + <li><code>no</code>: Never show a scrollbar.</li> + </ul> + </dd> +</dl> + +<h3 id="Non-standard_attributes_non-standard_inline">Non-standard attributes {{non-standard_inline}}</h3> + +<dl> + <dt>{{htmlattrdef("mozbrowser")}} {{non-standard_inline}}</dt> + <dd> + <div class="note">See {{bug(1318532)}} for exposing this to WebExtensions in Firefox.</div> + Makes the <code><iframe></code> act like a top-level browser window. See <a href="/en-US/docs/Mozilla/Gecko/Chrome/API/Browser_API">Browser API</a> for details.<br> + <strong>Available only to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd> +</dl> + +<h2 id="스크립팅">스크립팅</h2> + +<p>Inline frames, like {{HTMLElement("frame")}} elements, are included in the {{domxref("window.frames")}} pseudo-array.</p> + +<p>With the DOM {{domxref("HTMLIFrameElement")}} object, scripts can access the {{domxref("window")}} object of the framed resource via the {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} property. The {{domxref("HTMLIFrameElement.contentDocument", "contentDocument")}} property refers to the <code>document</code> inside the <code><iframe></code>, same as <code>contentWindow.document</code>.</p> + +<p>From the inside of a frame, a script can get a reference to its parent window with {{domxref("window.parent")}}.</p> + +<p>Script access to a frame's content is subject to the {{Glossary("same-origin policy")}}. Scripts cannot access most properties in other <code>window</code> objects if the script was loaded from a different origin, including scripts inside a frame accessing the frame's parent. Cross-origin communication can be achieved using {{domxref("Window.postMessage()")}}.</p> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_프레임">간단한 프레임</h3> + +<p>An <code><iframe></code> in action. After creating the frame, when the user clicks a button, its title is displayed in an alert.</p> + +<div id="htmlOutputWrapper"> +<pre class="brush: html"><iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" + title="iframe Example 1" width="400" height="300"> +</iframe></pre> +</div> + +<h4 id="Result">Result</h4> + +<p>{{ EmbedLiveSample('간단한_프레임', 640,400)}}</p> + +<h3 id="프레임_안의_링크를_다른_탭에서_열기">프레임 안의 링크를 다른 탭에서 열기</h3> + +<div> +<pre class="brush: html"><iframe id="Example2" + title="iframe Example 2" + width="400" height="300" + style="border:none" + src="https://maps.google.com/maps?f=q&source=s_q&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,-58.381593&output=embed"> +</iframe></pre> + +<h4 id="결과">결과</h4> + +<p>{{ EmbedLiveSample('프레임_안의_링크를_다른_탭에서_열기', 640, 400)}}</p> +</div> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-iframe-element.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/frames.html#h-16.5', '<iframe>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.iframe", 3)}}</p> diff --git a/files/ko/web/html/element/img/index.html b/files/ko/web/html/element/img/index.html new file mode 100644 index 0000000000..bedbe7b074 --- /dev/null +++ b/files/ko/web/html/element/img/index.html @@ -0,0 +1,389 @@ +--- +title: '<img>: 이미지 삽입 요소' +slug: Web/HTML/Element/img +tags: + - Element + - HTML + - HTML embedded content + - Multimedia + - Reference + - Web + - 사진 + - 이미지 +translation_of: Web/HTML/Element/img +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><img></code> 요소</strong>는 문서에 이미지를 넣습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/img.html", "tabbed-standard")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<p>위의 예제를 통해 <code><img></code> 요소의 사용법을 알 수 있습니다.</p> + +<ul> + <li><code>src</code> 특성은 <strong>필수</strong>이며, 포함하고자 하는 이미지로의 경로를 지정합니다.</li> + <li><code>alt</code> 특성은 이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가 <code>alt</code>의 값을 읽어 사용자에게 이미지를 설명하므로, 접근성 차원에서 <strong>매우 유용</strong>합니다. 또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여줍니다.</li> +</ul> + +<div class="hidden"> +<p>다양한 목적을 위한 많은 수의 속성이 더 존재합니다.</p> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/Headers/Referrer-Policy">Referrer</a>/{{glossary("CORS")}} control for security and privacy: see {{htmlattrxref("crossorigin", "img")}} and {{htmlattrxref("referrerpolicy", "img")}}.</li> + <li>Setting an {{glossary("intrinsic size")}} using {{htmlattrxref("width", "img")}}, {{htmlattrxref("height", "img")}}, and {{htmlattrxref("intrinsicsize", "img")}}: this sets the space taken up by an image to ensure the page layout is stable before it loads.</li> + <li>Responsive image hints with {{htmlattrxref("sizes", "img")}} and {{htmlattrxref("srcset", "img")}} (see also the {{htmlelement("picture")}} element and our <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a> tutorial).</li> +</ul> +</div> + +<h2 id="지원하는_이미지_형식">지원하는 이미지 형식</h2> + +<p>HTML 표준은 지원해야 하는 이미지 형식을 명시하고 있지 않으므로, 각각의 {{glossary("user agent", "사용자 에이전트")}}는 서로 다른 형식을 지원합니다. 전체 목록은 <a href="/ko/docs/Web/Media/Formats/Image_types">웹 브라우저가 지원하는 이미지 형식 안내서</a>를 참고하세요.</p> + +<h2 id="이미지를_가져올_수_없을_때">이미지를 가져올 수 없을 때</h2> + +<p>이미지를 불러오거나 그릴 때 오류가 발생했고, {{htmlattrxref("onerror")}} 속성에 오류 처리기를 등록했다면 {{event("error")}} 이벤트와 함께 처리기를 호출합니다. 오류는 다양한 상황에서 발생할 수 있는데, 그 중 일부 원인은 다음과 같습니다.</p> + +<ul> + <li>{{htmlattrxref("src", "img")}} 속성이 비었거나 {{jsxref("null")}}임.</li> + <li><code>src</code>의 URL이 현재 사용자가 보는 페이지의 URL과 같음.</li> + <li>지정한 이미지가 손상돼 불러올 수 없음.</li> + <li>이미지의 메타데이터가 손상돼 원본 크기를 알아낼 수 없고, <code><img></code> 요소의 속성에도 크기를 지정하지 않음.</li> + <li>{{Glossary("user agent", "사용자 에이전트")}}가 지원하지 않는 이미지 형식임.</li> +</ul> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("alt")}}</dt> + <dd>이미지의 대체 텍스트 설명. + <div class="note"> + <p><strong>참고:</strong> 브라우저가 항상 이미지를 표시하는건 아닙니다. 예를 들어,</p> + + <ul> + <li>비 시각적 브라우저 (시각 장애인이 사용하는 일부 브라우저 등)</li> + <li>사용자가 이미지 불러오기 거부 (대역폭 절약, 개인정보 보호 등)</li> + <li>유효하지 않은 이미지거나, <a href="/ko/docs/Web/HTML/Element/img#지원하는_이미지_형식">지원하지 않는 형식</a></li> + </ul> + + <p>위와 같은 경우 브라우저가 이미지를 <code>alt</code> 특성의 텍스트로 대체할 수 있습니다. 그러므로 가능한 경우 <code>alt</code> 특성에 항상 유용한 값을 제공해야 합니다.</p> + </div> + + <p><code>alt</code> 특성을 아예 지정하지 않은 경우 이미지가 콘텐츠의 중요 부분이나 텍스트로 표현할 수 없음을 의미합니다. 빈 문자열(<code>alt=""</code>)을 사용한 경우, 이미지가 콘텐츠의 중요 부분이 <strong>아니므로</strong>(장식 또는 추적용 픽셀 등), 비 시각적 브라우저가 {{glossary("Rendering engine", "렌더링")}}을 하지 않아도 된다는 의미입니다. 시각적 브라우저도 <code>alt</code> 특성이 비어있을 경우 깨진 이미지 아이콘을 표시하지 않습니다.</p> + + <p>이미지를 텍스트로서 복사-붙여넣기할 때와, 이미지 링크를 북마크 할 때도 <code>alt</code>의 값을 사용합니다.</p> + </dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>CORS를 사용해 지정한 이미지 파일을 가져와야 하는지의 여부. <a href="/ko/docs/Web/HTML/CORS_enabled_image">교차 출처 활성화 리소스</a>는 {{HTMLElement("canvas")}} 요소에 사용해도 캔버스를 "오염"시키지 않습니다. 가능한 값은 다음과 같습니다. + <dl> + <dt><code>anonymous</code></dt> + <dd>자격 증명 없이 교차 출처 요청을 전송합니다. 즉, {{httpheader("Origin")}} {{glossary("HTTP")}} 헤더를 쿠키, <a href="https://tools.ietf.org/html/rfc5280">X.509 인증서</a>, <a href="/ko/docs/Web/HTTP/Authentication#Basic_인증_스킴">HTTP Basic 인증</a> 없이 전송합니다. 서버에서 {{httpheader("Access-Control-Allow-Origin")}} HTTP 헤더를 지정하지 않음으로써 요청 출처 사이트에 자격 증명을 보내지 않는다면 이미지는 "오염"되고, 사용처가 제한됩니다.</dd> + <dt><code>use-credentials</code></dt> + <dd>자격 증명과 함께 교차 출처 요청을 전송합니다. 즉, <code>Origin</code> HTTP 헤더를 쿠키, X 509 인증서, 또는 HTTP Basic 이증과 함께 전송합니다. 서버에서 <code>Access-Control-Allow-Credentials</code> HTTP 헤더를 통한 자격 증명을 요청 출처 사이트에 보내지 않는다면 이미지는 "오염"되고, 사용처가 제한됩니다.</dd> + </dl> + 특성이 존재하지 않으면 리소스를 CORS 요청 없이(<code>Origin</code> HTTP 헤더 없이) 가져오므로, {{htmlelement("canvas")}}를 오염시키게 됩니다. 유효하지 않은 값의 경우 <code>anonymous</code> 키워드를 사용한 것으로 간주합니다.</dd> + <dt>{{htmlattrdef("decoding")}}</dt> + <dd>이미지 디코딩에 관해 브라우저에 제공할 힌트. 가능한 값은 다음과 같습니다. + <dl> + <dt><code>sync</code></dt> + <dd>다른 콘텐츠와 함께 표시하기 위해 이미지를 동기적으로 디코딩 합니다.</dd> + <dt><code>async</code></dt> + <dd>다른 콘텐츠의 표시 지연을 피하기 위해 이미지를 비동기적으로 디코딩 합니다.</dd> + <dt><code>auto</code></dt> + <dd>선호하는 디코딩 모드가 없음을 나타내는 기본값입니다. 사용자에게 제일 적절한 값을 브라우저가 결정합니다.</dd> + </dl> + </dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>픽셀 단위의 이미지의 고유 크기. 단위 없는 정수여야 합니다.</dd> + <dt id="name-attribute">{{htmlattrdef("importance")}} {{experimental_inline}}</dt> + <dd>리소스의 상대적인 다운로드 중요도. 가능한 값은 다음과 같습니다.</dd> + <dd> + <p><code>auto</code>: <strong>설정 안함</strong>. 브라우저가 자체 휴리스틱을 사용해 이미지의 우선순위를 결정합니다.</p> + + <p><code>high</code>: 이미지가 <strong>높은</strong> 우선순위를 지님.</p> + + <p><code>low</code>: 이미지가 <strong>낮은</strong> 우선순위를 지님.</p> + </dd> + <dt class="hidden">{{htmlattrdef("intrinsicsize")}} {{deprecated_inline}}</dt> + <dd class="hidden">This attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute. Specifically, the image would raster at these dimensions and <code>naturalWidth</code>/<code>naturalHeight</code> on images would return the values specified in this attribute. <a href="https://github.com/ojanvafai/intrinsicsize-attribute">Explainer</a>, <a href="https://googlechrome.github.io/samples/intrinsic-size/index.html">examples</a></dd> + <dt>{{htmlattrdef("ismap")}}</dt> + <dd>이미지가 <a href="https://ko.wikipedia.org/wiki/%EC%9D%B4%EB%AF%B8%EC%A7%80_%EB%A7%B5">서버 사이드 맵</a>의 일부인지 나타냄. 서버 사이드 맵에 속하는 경우, 사용자가 이미지에서 클릭한 위치를 서버로 전송합니다. + <div class="note"> + <p><strong>참고:</strong> 포인팅 장치가 없는 사용자도 갈 수 있는 대체 목적지를 제공하기 위해, <code>ismap</code>은 <code><img></code> 요소가 유효한 {{htmlattrxref("href", "a")}} 특성을 가진 {{htmlelement("a")}} 요소의 자손인 경우에만 사용 가능합니다.</p> + </div> + </dd> + <dt>{{htmlattrdef("loading")}}</dt> + <dd>브라우저가 이미지를 불러올 때 사용할 방식을 지정합니다. + <ul> + <li><code>eager</code>: 뷰포트 안에 위치하는지 여부에 상관하지 않고 이미지를 즉시 불러옵니다. (기본값)</li> + <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">lazy</span></font>: 이미지가 뷰포트의 일정 거리 안으로 들어와야 불러옵니다. 거리는 브라우저가 정의합니다. 이미지를 보게 될 것으로 충분히 예상 가능한 상황에만 불러옴으로써, 불필요하게 네트워크와 저장소 대역폭을 낭비하지 않을 수 있습니다. 또한 일반적인 사용처에서는 대개 성능을 향상할 수 있습니다.</li> + </ul> + </dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>리소스를 가져올 때 사용할 리퍼러를 나타내는 문자열. + <ul> + <li><code>no-referrer:</code> {{httpheader("Referer")}} 헤더를 전송하지 않습니다.</li> + <li><code>no-referrer-when-downgrade:</code> TLS(HTTPS) 지원을 하지 않는 출처에 대해서는 <code>Referer</code> 헤더를 전송하지 않습니다. 따로 지정하지 않은 경우 사용하는 기본 정책입니다.</li> + <li><code>origin:</code> <code>Referer</code> 헤더가 요청 출처의 {{glossary("schema", "스킴")}}, {{glossary("host", "호스트")}}, {{glossary("port", "포트")}}를 포함합니다.</li> + <li><code>origin-when-cross-origin:</code> 다른 출처로 요청할 땐 리퍼럴 데이터를 스킴, 호스트, 포트로 제한합니다. 동일 출처로 요청할 땐 전체 경로와 쿼리 문자열도 포함합니다.</li> + <li><code>unsafe-url:</code> <code>Referrer</code> 헤더가 항상 출처, 경로, 쿼리 문자열을 포함합니다. 하지만 프래그먼트, 비밀번호, 사용자 이름은 포함하지 않습니다. TLS로 보호받는 리소스에서 그렇지 않은 출처로 정보를 누출할 수 있으므로 <strong>안전하지 않습니다</strong>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("sizes")}}</dt> + <dd>소스 크기를 나타내는, 쉼표로 구분한 하나 이상의 문자열. 각각의 문자열은 다음 구성요소로 이루어집니다. + <ol> + <li><a href="/ko/docs/Web/Guide/CSS/Media_queries#구문">미디어 조건</a>. 마지막 항목에서는 생략해야 합니다.</li> + <li>소스 크기 값.</li> + </ol> + + <p>미디어 조건은 이미지의 속성이 아니라<strong> {{glossary("viewport", "뷰포트")}}</strong> 속성을 가리킵니다. 예를 들어, <code>(max-height: 500px) 1000px</code>은 1000px 너비의 소스를 사용하려면 <strong>뷰포트</strong>가 500px 이하여야 한다는 뜻입니다.</p> + + <p>소스 크기는 의도한 이미지 표시 크기를 지정합니다. {{glossary("user agent", "사용자 에이전트")}}는 현재 소스 크기를 사용해, 너비(<code>w</code>) 서술자를 사용한 <code>srcset</code> 특성의 소스 중 하나를 선택합니다. 선택한 소스 크기는 이미지의 {{glossary("intrinsic size", "고유 크기")}}({{glossary("CSS")}} 스타일을 입히지 않은 경우 이미지의 표시 크기)에 영향을 줍니다. <code>srcset</code>이 비어있거나 너비 서술자를 사용하지 않은 경우, <code>sizes</code> 특성은 아무 효과도 없습니다.</p> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>이미지의 {{glossary("URL")}}. 필수 사항입니다. <code>srcset</code>을 지원하는 {{glossary("Browser", "브라우저")}}의 <code>srcset</code>에 픽셀 밀도 <code>1x</code>와 <code>w</code> 서술자가 없는 경우, <code>src</code>는 픽셀 밀도 <code>1x</code>의 이미지 후보로 취급합니다.</dd> + <dt>{{htmlattrdef("srcset")}}</dt> + <dd>{{glossary("user agent", "사용자 에이전트")}}가 사용할 수 있는 이미지 소스의 후보. 쉼표로 구분하는 한 개 이상의 문자열 목록입니다. 각각의 문자열은 다음 구성요소로 이루어집니다. + <ol> + <li>이미지의 {{glossary("URL")}}.</li> + <li>선택적으로, 공백과 함께 그 뒤를 잇는... + <ul> + <li>너비 서술자(양의 정수와 바로 뒤의 '<code>w</code>' 문자). 너비 서술자의 값을 <code>sizes</code> 특성으로 지정한 소스 크기로 나눠서 픽셀 밀도를 구합니다.</li> + <li>픽셀 밀도 서술자(양의 실수와 바로 뒤의 '<code>x</code>' 문자).</li> + </ul> + </li> + </ol> + + <p>서술자를 포함하지 않은 경우 기본값인 <code>1x</code>로 간주합니다.</p> + + <p>같은 <code>srcset</code> 특성에 너비와 픽셀 밀도 서술자를 함께 사용하거나, 동일한 서술자를 두 개 이상 사용하는건 유효하지 않습니다.</p> + + <p>사용자 에이전트 스스로 가능한 소스 중 하나를 선택합니다. 따라서 사용자 에이전트는 사용자의 개인 설정 또는 대역폭 상황에 따라 선택을 조절할 수 있는 상당한 여지를 가집니다. <a href="/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">반응형 이미지 자습서</a>를 방문해 예제를 살펴보세요.</p> + </dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>이미지의 픽셀 기준 고유 너비. 단위 없는 정수여야 합니다.</dd> + <dt>{{htmlattrdef("usemap")}}</dt> + <dd>요소와 연결할 <a href="/ko/docs/HTML/Element/map">이미지 맵</a>의 프래그먼트. + <div class="note"> + <p><strong>참고: </strong><code><img></code> 요소가 {{htmlelement("a")}} 또는 {{HTMLElement("button")}} 요소의 자손이면 사용할 수 없습니다.</p> + </div> + </dd> +</dl> + +<div class="hidden"> +<h3 id="Deprecated_attributes">Deprecated attributes</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{Obsolete_Inline}}</dt> + <dd>Aligns the image with its surrounding context. Use the {{cssxref('float')}} and/or {{cssxref('vertical-align')}} {{glossary("CSS")}} properties instead of this attribute. Allowed values:</dd> + <dd> + <dl> + <dt><code>top</code></dt> + <dd>Equivalent to <code style="white-space: nowrap;">vertical-align: top</code> or <code style="white-space: nowrap;">vertical-align: text-top</code></dd> + <dt><code>middle</code></dt> + <dd>Equivalent to <code style="white-space: nowrap;">vertical-align: -moz-middle-with-baseline</code></dd> + <dt><code>bottom</code></dt> + <dd>The default, equivalent to <code style="white-space: nowrap;">vertical-align: unset</code> or <code style="white-space: nowrap;">vertical-align: initial</code></dd> + <dt><code>left</code></dt> + <dd>Equivalent to <code style="white-space: nowrap;">float: left</code></dd> + <dt><code>right</code></dt> + <dd>Equivalent to <code style="white-space: nowrap;">float: right</code></dd> + </dl> + </dd> + <dt>{{htmlattrdef("border")}} {{Obsolete_Inline}}</dt> + <dd>The width of a border around the image. Use the {{cssxref('border')}} {{glossary("CSS")}} property instead.</dd> + <dt>{{htmlattrdef("hspace")}} {{Obsolete_Inline}}</dt> + <dd>The number of pixels of white space on the left and right of the image. Use the {{cssxref('margin')}} CSS property instead.</dd> + <dt>{{htmlattrdef("longdesc")}} {{Obsolete_Inline}}</dt> + <dd>A link to a more detailed description of the image. Possible values are a {{glossary("URL")}} or an element {{htmlattrxref("id")}}. + <div class="note"> + <p><strong>Note:</strong> This attribute is mentioned in the latest {{glossary("W3C")}} version, <a class="external external-icon" href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a>, but has been removed from the {{glossary("WHATWG")}}’s <a class="external external-icon" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">HTML Living Standard</a>. It has an uncertain future; authors should use a {{glossary("WAI")}}-{{glossary("ARIA")}} alternative such as <a class="external external-icon" href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby"><code>aria-describedby</code></a> or <a class="external external-icon" href="https://www.w3.org/TR/wai-aria-1.1/#aria-details"><code>aria-details</code></a>.</p> + </div> + </dd> + <dt>{{htmlattrdef("name")}} {{Obsolete_Inline}}</dt> + <dd>A name for the element. Use the {{htmlattrxref("id")}} attribute instead.</dd> + <dt>{{htmlattrdef("vspace")}} {{Obsolete_Inline}}</dt> + <dd>The number of pixels of white space above and below the image. Use the {{cssxref('margin')}} CSS property instead.</dd> +</dl> +</div> + +<h2 id="CSS_스타일링">CSS 스타일링</h2> + +<p><code><img></code>는 <a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a>입니다. 기본적으로 {{cssxref("display")}}는 <code>inline</code>이나, 기본 크기는 내장한 이미지의 고유 크기로 정해지므로 마치 <code>inline-block</code>처럼 보입니다. {{cssxref("border")}}/{{cssxref("border-radius")}}, {{cssxref("padding")}}/{{cssxref("margin")}}, {{cssxref("width")}}, {{cssxref("height")}} 등의 속성을 이미지에 지정할 수 있습니다.</p> + +<p><code><img></code>는 기준선을 갖지 않으므로, {{cssxref("vertical-align")}}<code>: baseline</code>을 지정한 인라인 서식 맥락에서는 이미지의 아래쪽 모서리가 텍스트 기준선으로 가게 됩니다.</p> + +<p>요소 박스 내의 이미지 위치는 {{cssxref("object-position")}} 속성으로 바꿀 수 있습니다. 크기는 {{cssxref("object-fit")}} 속성을 통해 요소 크기에 맞출지, 요소를 채울지 등을 지정할 수 있습니다.</p> + +<p>이미지는 고유 너비와 높이를 가질 수 있지만, 일부 유형의 이미지는 그렇지 않습니다. 예를 들어, {{glossary("SVG")}} 요소는 루트 {{svgelement("svg")}} 요소에 <code>width</code>와 <code>height</code>가 없는 경우 고유 크기를 가지지 않습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="보조_텍스트">보조 텍스트</h3> + +<p>페이지에 이미지를 삽입하고, 접근성을 높이기 위해 대체 텍스트를 제공하는 간단한 예제입니다.</p> + +<pre class="brush: html"><img src="https://developer.mozilla.org/static/img/favicon144.png" + alt="MDN logo"></pre> + +<p>{{ EmbedLiveSample('보조_텍스트', '100%', '70') }}</p> + +<h3 id="이미지_링크">이미지 링크</h3> + +<p>이 예제는 이전 코드에 더해 이미지를 링크로 바꾸는 법을 보입니다. 단순히 <code><img></code> 태그를 {{htmlelement("a")}} 안에 넣기만 하면 됩니다. 다만 고려할 점 하나는, 해당 링크가 가리키는 곳을 설명하는 대체 텍스트를 포함해야 한다는 것입니다.</p> + +<pre class="brush: html"><a href="https://developer.mozilla.org"> + <img src="https://developer.mozilla.org/static/img/favicon144.png" + alt="Visit the MDN site"> +</a></pre> + +<p>{{ EmbedLiveSample('이미지_링크', '100%', '70') }}</p> + +<h3 id="srcset_특성_사용하기"><code>srcset</code> 특성 사용하기</h3> + +<p>이번 예제에서는 {{htmlattrxref("srcset", "img")}} 특성에 고해상도 버전 로고를 추가했습니다. 그러면 고해상도 장치에서는 일반 <code>src</code> 이미지 대신 고해상도 이미지를 사용합니다. <code>srcset</code> 특성을 지원하는 {{glossary("user agent", "사용자 에이전트")}}는 <code>src</code> 특성을 <code>srcset</code> <code>1x</code> 로 간주합니다.</p> + +<pre class="brush: html"><img src="https://developer.mozilla.org/static/img/favicon72.png" + alt="MDN logo" + srcset="https://developer.mozilla.org/static/img/favicon144.png 2x"></pre> + +<p>{{EmbedLiveSample("srcset_특성_사용하기", "100%", "160")}}</p> + +<h3 id="srcset과_sizes_특성_사용하기"><code>srcset</code>과 <code>sizes</code> 특성 사용하기</h3> + +<p>{{htmlattrxref("srcset", "img")}}를 지원하는 {{glossary("user agent", "사용자 에이전트")}}는, <code>srcset</code>에 <code>w</code> 서술자를 사용한 경우 <code>src</code> 특성을 무시합니다. 다음 코드는 미디어 조건 <code>(max-width: 600px)</code>을 만족할 때 200px 너비의 이미지를 불러오고, 그 외의 경우엔 다른 이미지(400px)를 불러옵니다.</p> + +<pre class="brush: html"><img src="/files/16864/clock-demo-200px.png" + alt="Clock" + srcset="/files/16864/clock-demo-200px.png 200w, + /files/16797/clock-demo-400px.png 400w" + sizes="(max-width: 600px) 200px, 50vw"></pre> + +<p>{{EmbedLiveSample("srcset과_sizes_특성_사용하기", "100%", 350)}}</p> + +<div class="blockIndicator note"> +<p>직접 창 크기를 조절하면서 이미지의 변화를 관측하려면 <a href="https://mdn.mozillademos.org/ko/docs/Web/HTML/Element/img$samples/srcset%EA%B3%BC_sizes_%ED%8A%B9%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0">별도 페이지</a>를 방문하세요.</p> +</div> + +<h2 id="보안_및_개인정보_고려사항">보안 및 개인정보 고려사항</h2> + +<p><code><img></code> 요소를 사용하는 것에는 문제가 없으나, 의도치 않게 사용자 개인정보와 보안에 악영향을 줄 수 있습니다. <a href="/ko/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Referer 헤더: 개인정보 및 보안 고려사항</a> 문서를 방문해 더 많은 정보를 알아보세요.</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<h3 id="적합한_대체_설명_작성">적합한 대체 설명 작성</h3> + +<p>{{htmlattrxref("alt", "img")}} 특성의 값은 이미지 콘텐츠를 간단하고 명료하게 설명해야 합니다. 그러나 이미지의 존재 여부나, 이미지 파일의 이름을 나타내서는 안됩니다. 이미지를 텍스트로 설명할 방법이 없어서 의도적으로 <code>alt</code>를 지정하지 않은 경우, 해당 이미지가 나타내려는 바를 알려줄 수 있는 다른 방법을 고려해보세요.</p> + +<h4 id="부적절">부적절</h4> + +<pre class="brush: html example-bad"><img alt="이미지" src="penguin.jpg"> +</pre> + +<h4 id="적절">적절</h4> + +<pre class="brush: html example-good"><img alt="해변에 서있는 바위뛰기펭귄." src="penguin.jpg"> +</pre> + +<p>일부 스크린 리더는 <code>alt</code> 특성을 가지지 않는 이미지를 보면 파일 이름을 표현하는 경우가 있는데, 이 때 파일의 이름이 이미지의 콘텐츠를 설명하지 않는다면 사용자가 혼란스러울 수 있습니다.</p> + +<ul> + <li><a class="external" href="https://www.w3.org/WAI/tutorials/images/decision-tree/">An alt Decision Tree • Images • WAI Web Accessibility Tutorials</a></li> + <li><a class="external" href="https://axesslab.com/alt-texts/">Alt-texts: The Ultimate Guide — Axess Lab</a></li> + <li><a class="external" href="https://www.deque.com/blog/great-alt-text-introduction/">How to Design Great Alt Text: An Introduction | Deque</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> + <li><a class="external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="title_특성"><code>title</code> 특성</h3> + +<p>{{htmlattrxref("title")}} 특성은 {{htmlattrxref("alt", "img")}} 특성을 적합하게 대체할 수 없습니다. 또한, <code>alt</code>의 값을 <code>title</code>에도 반복하는 것을 피해야 합니다. 같은 값을 지정할 경우 일부 스크린 리더가 설명을 두 번씩 읽게 되므로 사용자가 혼란스러울 수 있습니다.</p> + +<p><code>title</code> 요소를 사용해 <code>alt</code> 설명에 대한 부연 설명을 제공해서도 안됩니다. 이미지가 설명을 필요로 하는 경우 {{htmlelement("figure")}}와 {{htmlelement("figcaption")}} 요소를 사용하세요.</p> + +<p><code>title</code> 특성은 보통 툴팁, 즉 사용자가 커서를 이미지 위에 올리고 가만히 있으면 짧은 시간 뒤에 나타나는 형태로 표현합니다. 따라서 추가 정보를 제공할 수는 있겠으나 터치 화면, 또는 키보드만 사용하는 경우도 존재하므로 사용자가 툴팁을 볼 수 있을 것이라고 기대해서는 안됩니다. 사용자에게 많이 중요한 정보를 포함해야 하면 <code>title</code> 특성 대신 위에 명시한 다른 방법을 사용하세요.</p> + +<ul> + <li><a class="external" href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute – updated | The Paciello Group</a></li> +</ul> + +<h2 id="기술_요약">기술 요약</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#내장_콘텐츠">내장 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#뚜렷한_콘텐츠">뚜렷한 콘텐츠</a>. <code>usemap</code> 특성을 가진 경우 <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#내장_콘텐츠">내장 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLImageElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Added the <code>referrerpolicy</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '<img>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.img")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("picture")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}} 요소</li> + <li>이미지 관련 CSS 속성: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li> +</ul> diff --git a/files/ko/web/html/element/index.html b/files/ko/web/html/element/index.html new file mode 100644 index 0000000000..9ecf2abe63 --- /dev/null +++ b/files/ko/web/html/element/index.html @@ -0,0 +1,102 @@ +--- +title: HTML 요소 참고서 +slug: Web/HTML/Element +tags: + - Basic + - Element + - HTML + - Reference + - Web + - 'l10n:priority' +translation_of: Web/HTML/Element +--- +<p>{{HTMLSidebar("Elements")}}<br> + <span class="seoSummary">이 페이지는 {{glossary("tag", "태그")}}를 사용해 만들 수 있는 모든 {{glossary("HTML")}} {{glossary("Element", "요소")}}의 목록을 제공합니다.</span> 필요로 하는 요소를 쉽게 찾을 수 있도록 기능별로 분류했으며, 각각의 요소 참조 페이지 사이드바에서는 사전 순으로 정렬된 목록도 확인할 수 있습니다.</p> + +<h2 id="메인_루트">메인 루트</h2> + +<p>{{HTMLRefTable("HTML Root Element")}}</p> + +<h2 id="문서_메타데이터" style="line-height: 30px; font-size: 2.14285714285714rem;">문서 메타데이터</h2> + +<p>{{glossary("metadata", "메타데이터")}}는 스타일, 스크립트, 각종 소프트웨어({{Glossary("search engine", "검색 엔진")}}, {{glossary("browser", "브라우저")}} 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에서 정의할 수도 있고, 해당하는 정보를 가진 다른 파일로 링크할 수도 있습니다.</p> + +<p>{{HTMLRefTable("HTML document metadata")}}</p> + +<h2 id="구획_루트" style="line-height: 30px; font-size: 2.14285714285714rem;">구획 루트</h2> + +<p>{{HTMLRefTable("Sectioning Root Element")}}</p> + +<h2 id="콘텐츠_구획" style="line-height: 30px; font-size: 2.14285714285714rem;">콘텐츠 구획</h2> + +<p>콘텐츠 구획 요소를 사용하면 문서의 콘텐츠를 논리적인 조각으로 체계화할 수 있습니다. 구획 요소를 사용해 탐색을 위한 헤더 및 푸터, 콘텐츠 판별을 위한 제목 요소 등 페이지 콘텐츠의 큰 틀을 잡으세요.</p> + +<p>{{HTMLRefTable("HTML sections")}}</p> + +<h2 id="텍스트_콘텐츠" style="line-height: 30px; font-size: 2.14285714285714rem;">텍스트 콘텐츠</h2> + +<p>HTML 텍스트 콘텐츠를 사용하여 여는 {{htmlelement("body")}}와 닫는 <code></body></code> 태그 사이의 블록이나 콘텐츠 구획을 정리할 수 있습니다. 해당 콘텐츠의 목적이나 구조 판별에 사용하므로 {{glossary("accessibility", "접근성")}}과 {{glossary("SEO")}}에 중요합니다.</p> + +<p>{{HTMLRefTable("HTML grouping content")}}</p> + +<h2 id="인라인_텍스트_시멘틱" style="line-height: 30px; font-size: 2.14285714285714rem;">인라인 텍스트 시멘틱</h2> + +<p>HTML 인라인 텍스트 시멘틱을 사용해서 단어, 줄, 혹은 아무 부분의 의미나 구조, 스타일을 정의할 수 있습니다.</p> + +<p>{{HTMLRefTable("HTML text-level semantics")}}</p> + +<h2 id="이미지_멀티미디어" style="line-height: 30px; font-size: 2.14285714285714rem;">이미지 & 멀티미디어</h2> + +<p>HTML은 사진, 오디오, 비디오 등 다양한 멀티미디어 리소스를 지원합니다..</p> + +<p>{{HTMLRefTable("multimedia")}}</p> + +<h2 id="내장_콘텐츠" style="line-height: 30px; font-size: 2.14285714285714rem;">내장 콘텐츠</h2> + +<p>HTML은 일반적인 멀티미디어 콘텐츠 외에도 다양한 종류의 기타 콘텐츠를 포함할 수 있습니다.</p> + +<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> + +<h2 id="스크립트" style="line-height: 30px; font-size: 2.14285714285714rem;">스크립트</h2> + +<p>HTML은 동적인 콘텐츠와 웹 어플리케이션을 위해 스크립트 언어, 그 중에서도 주로 JavaScript를 지원합니다. 특정 요소가 이런 기능을 가지고 있습니다.</p> + +<p>{{HTMLRefTable("HTML scripting")}}</p> + +<h2 id="수정사항_표시" style="line-height: 30px; font-size: 2.14285714285714rem;">수정사항 표시</h2> + +<p>텍스트의 특정 부분이 수정됐다는 것을 표시할 수 있습니다.</p> + +<p>{{HTMLRefTable("HTML edits")}}</p> + +<h2 id="표_콘텐츠" style="line-height: 30px; font-size: 2.14285714285714rem;">표 콘텐츠</h2> + +<p>표 형식의 데이터를 생성하고 처리할 때 사용합니다.</p> + +<p>{{HTMLRefTable("HTML tabular data")}}</p> + +<h2 id="양식" style="line-height: 30px; font-size: 2.14285714285714rem;">양식</h2> + +<p>HTML은 여러가지 입력 가능한 요소를 제공합니다. 이런 요소를 서로 조합하면 사용자가 내용을 채우고, 웹사이트나 어플리케이션에 제출할 수 있습니다. <a href="/ko/docs/Learn/HTML/Forms">HTML 폼 안내서</a>에 더욱 다양한 내용이 있습니다.</p> + +<p>{{HTMLRefTable("HTML forms")}}</p> + +<h2 id="대화형_요소" style="line-height: 30px; font-size: 2.14285714285714rem;">대화형 요소</h2> + +<p>HTML은 상호작용 가능한 사용자 인터페이스 객체를 만들 때 사용할 수 있는 요소를 지원합니다.</p> + +<p>{{HTMLRefTable("HTML interactive elements")}}</p> + +<h2 id="웹_컴포넌트" style="line-height: 30px; font-size: 2.14285714285714rem;">웹 컴포넌트</h2> + +<p>웹 컴포넌트는 완전히 새로운 형태의 요소를 생성한 후 일반적인 HTML처럼 사용할 수 있는 기술입니다. 또한 표준 HTML 요소의 맞춤 버전을 만들 수도 있습니다.</p> + +<p>{{HTMLRefTable({"include":["Web Components"],"exclude":["Deprecated", "Obsolete"]})}}</p> + +<h2 id="폐기됐거나_사용하지_않는_요소들" style="line-height: 30px; font-size: 2.14285714285714rem;">폐기됐거나 사용하지 않는 요소들</h2> + +<div class="warning" style="font-size: 14px;"> +<p><strong>경고</strong>: 다음은 더 이상 사용하지 않고, 사용해서도 안되는 오래된 HTML 요소입니다. <strong>새로운 프로젝트에서 절대 사용해서는 안되고, 오래된 프로젝트에서도 가능한 빨리 대체해야 합니다.</strong> 아래 목록은 정보성 목적으로만 존재합니다.</p> +</div> + +<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> diff --git a/files/ko/web/html/element/input/button/index.html b/files/ko/web/html/element/input/button/index.html new file mode 100644 index 0000000000..ff986a95d4 --- /dev/null +++ b/files/ko/web/html/element/input/button/index.html @@ -0,0 +1,343 @@ +--- +title: <input type="button"> +slug: Web/HTML/Element/Input/button +tags: + - Element + - Forms + - HTML + - HTML forms + - Input Element + - Input Type +translation_of: Web/HTML/Element/input/button +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong><code>button</code></strong> 유형의 {{htmlelement("input")}} 요소는 단순한 푸시 버튼으로 렌더링 됩니다. 이벤트 처리기(주로 {{event("click")}} 이벤트)를 부착하면, 사용자 지정 기능을 웹 페이지 어느 곳에나 제공할 수 있습니다. </span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<div class="note"> +<p><strong>참고</strong>: <code><input></code> 요소의 <code>button</code> 유형도 전혀 틀리지 않은 방법이지만, 이후에 생긴 {{HTMLElement("button")}} 요소를 사용하는 것이 선호되는 방식입니다. <code><button></code>의 레이블 텍스트는 여는 태그와 닫는 태그 사이에 넣기 때문에, 심지어 이미지까지도 포함할 수 있습니다.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("값")}}</strong></td> + <td>버튼의 레이블로 사용할 {{domxref("DOMString")}}</td> + </tr> + <tr> + <td>이벤트</td> + <td>{{event("click")}}</td> + </tr> + <tr> + <td>지원하는 공용 특성</td> + <td>{{htmlattrxref("type", "input")}}, {{htmlattrxref("value", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 특성</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td>메서드</td> + <td>없음</td> + </tr> + </tbody> +</table> + +<h2 id="값">값</h2> + +<p><code><input type="button"></code> 요소의 {{htmlattrxref("value", "input")}} 특성은 버튼의 레이블로 사용할 {{domxref("DOMString")}}을 담습니다.</p> + +<div id="summary-example3"> +<pre class="brush: html"><input type="button" value="클릭하세요"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> + +<p><code>value</code>를 지정하지 않으면 빈 버튼이 됩니다.</p> + +<div id="summary-example1"> +<pre class="brush: html"><input type="button"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> + +<h2 id="버튼_사용하기">버튼 사용하기</h2> + +<p><code><input type="button"></code> 요소는 아무런 기본 기능도 가지지 않습니다. (유사한 요소인 <code><a href="/ko/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>과 <code><a href="/ko/docs/Web/HTML/Element/input/reset"><input type="reset"></a></code>은 각각 양식을 제출하고 초기화할 수 있습니다.) 버튼이 뭐라도 하게 만들려면 JavaScript 코드를 작성해야 합니다.</p> + +<h3 id="간단한_버튼">간단한 버튼</h3> + +<p>{{event("click")}} 이벤트 처리기를 부착한 간단한 버튼을 통해 기계를 켜고 끄는 기능을 만드는 것으로 시작해보겠습니다. (기계라고는 하지만, 그냥 버튼의 <code>value</code>와 문단 내용을 바꾸는 것입니다.)</p> + +<pre class="brush: html"><form> + <input type="button" value="기계 켜기"> +</form> +<p>기계가 멈췄습니다.</p></pre> + +<pre class="brush: js">var btn = document.querySelector('input'); +var txt = document.querySelector('p'); + +btn.addEventListener('click', updateBtn); + +function updateBtn() { + if (btn.value === '기계 켜기') { + btn.value = '기계 끄기'; + txt.textContent = '기계가 켜졌습니다!'; + } else { + btn.value = '기계 켜기'; + txt.textContent = '기계가 멈췄습니다.'; + } +}</pre> + +<p>위의 스크립트는 DOM의 <code><input></code>을 나타내는 {{domxref("HTMLInputElement")}} 객체의 참조를 획득해 변수 <code>button</code>에 저장합니다. 그 후 {{domxref("EventTarget.addEventListener", "addEventListener()")}}를 사용해, {{event("click")}} 이벤트가 발생했을 때 실행할 함수를 생성합니다.</p> + +<p>{{EmbedLiveSample("간단한_버튼", 650, 100)}}</p> + +<h3 id="버튼에_키보드_단축키_추가하기">버튼에 키보드 단축키 추가하기</h3> + +<p>접근 키라고도 불리는 키보드 단축키는 사용자가 키보드의 키 혹은 키 조합을 통해 버튼을 누를 수 있는 방법을 제공합니다. 단축키를 추가하는 법은, 다른 {{htmlelement("input")}}과 마찬가지로, {{htmlattrxref("accesskey")}} 전역 특성을 추가하는 것입니다.</p> + +<p>이번 예제에서는 이전 예제에 더해 <kbd>s</kbd> 키를 접근 키로 지정합니다. (브라우저/운영체제에 따라 특정 조합키를 같이 눌러야 할 수도 있습니다. <code><a href="/ko/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code> 문서를 방문해 조합키 목록을 확인하세요.)</p> + +<div id="accesskey-example1"> +<pre class="brush: html"><form> + <input type="button" value="기계 켜기" accesskey="s"> +</form> +<p>기계가 멈췄습니다.</p> +</pre> +</div> + +<div class="hidden"> +<pre class="brush: js">var btn = document.querySelector('input'); +var txt = document.querySelector('p'); + +btn.addEventListener('click', updateBtn); + +function updateBtn() { + if (btn.value === '기계 켜기') { + btn.value = '기계 끄기'; + txt.textContent = '기계가 켜졌습니다!'; + } else { + btn.value = '기계 켜기'; + txt.textContent = '기계가 멈췄습니다.'; + } +}</pre> +</div> + +<p>{{EmbedLiveSample("버튼에_키보드_단축키_추가하기", 650, 100)}}</p> + +<div class="note"> +<p><strong>참고</strong>: 위 예제의 문제는, 사용자 입장에선 어떤 단축키가 있는지 알 수도 없다는 것입니다! 실제 웹 사이트에서는, 쉽게 접근 가능한 곳에 놓인 링크로 단축키 정보를 설명하는 문서를 가리키는 등 사이트 디자인을 방해하지 않는 선에서 단축키 정보를 제공해야 할 것입니다.</p> +</div> + +<h3 id="버튼_활성화와_비활성화">버튼 활성화와 비활성화</h3> + +<p>버튼을 비활성화하려면 간단히 {{htmlattrxref("disabled")}} 전역 특성을 지정하는 것으로 충분합니다.</p> + +<div id="disable-example1"> +<pre class="brush: html"><input type="button" value="Disable me" disabled></pre> +</div> + +<p>런타임에서 바꿀 땐 요소의 <code>disabled</code> 속성에 <code>true</code>나 <code>false</code>를 설정하면 끝입니다. 이번 예제의 버튼은 활성화 상태지만, 누르는 순간 <code>btn.disabled = true</code>를 통해 비활성화합니다. 그 후, {{domxref("WindowTimers.setTimeout","setTimeout()")}} 함수를 통해 2초 후 다시 활성화 상태로 되돌립니다.</p> + +<div class="hidden"> +<h6 id="Hidden_code_1">Hidden code 1</h6> + +<pre class="brush: html"><input type="button" value="활성"></pre> + +<pre class="brush: js">var btn = document.querySelector('input'); + +btn.addEventListener('click', disableBtn); + +function disableBtn() { + btn.disabled = true; + btn.value = '비활성'; + window.setTimeout(function() { + btn.disabled = false; + btn.value = '활성'; + }, 2000); +}</pre> +</div> + +<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p> + +<p><code>disabled</code> 특성을 지정하지 않은 경우 부모 요소의 <code>disabled</code>를 상속합니다. 이 점을 이용하면, 여러 개의 요소를 {{HTMLElement("fieldset")}} 등 부모 요소로 감싸고, 그 부모의 <code>disabled</code> 를 사용해 한꺼번에 상태를 통제할 수 있습니다.</p> + +<p>다음 예제로 한 번에 비활성화하는 예제를 볼 수 있습니다. 이전 예제와 거의 똑같지만, 다른 점은 <code>disabled</code> 특성을 <code><fieldset></code>에 설정한다는 점입니다. 1번 버튼을 눌러보세요. 모든 버튼이 비활성화되고, 2초 후 활성화됩니다.</p> + +<div class="hidden"> +<h6 id="Hidden_code_2">Hidden code 2</h6> + +<pre class="brush: html"><fieldset> + <legend>Button group</legend> + <input type="button" value="Button 1"> + <input type="button" value="Button 2"> + <input type="button" value="Button 3"> +</fieldset></pre> + +<pre class="brush: js">var btn = document.querySelector('input'); +var fieldset = document.querySelector('fieldset'); + +btn.addEventListener('click', disableBtn); + +function disableBtn() { + fieldset.disabled = true; + window.setTimeout(function() { + fieldset.disabled = false; + }, 2000); +}</pre> +</div> + +<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p> + +<h2 id="유효성_검사">유효성 검사</h2> + +<p>버튼은 제한할 값이 없으므로 유효성 검사의 대상이 아닙니다.</p> + +<h2 id="예제">예제</h2> + +<p>아래 예제는 {{htmlelement("canvas")}} 요소와 CSS(분량 조절을 위해 생략), JavaScript를 사용해 만든 매우 단순한 그림 그리기 앱입니다. 위쪽 두 컨트롤은 색과 펜 크기를 조절할 때 사용하고, 버튼은 클릭하면 캔버스의 그림을 모두 지우는 함수를 호출합니다.</p> + +<pre class="brush: html"><div class="toolbar"> + <input type="color" aria-label="펜 색상"> + <input type="range" min="2" max="50" value="30" aria-label="펜 크기"><span class="output">30</span> + <input type="button" value="캔버스 지우기"> +</div> + +<canvas class="myCanvas"> + <p>Add suitable fallback here.</p> +</canvas></pre> + +<div class="hidden"> +<pre class="brush: css">body { + margin: 0; + overflow: hidden; + background: #ccc; +} + +.toolbar { + width: 150px; + height: 75px; + background: #ccc; + padding: 5px; +} + +input[type="color"], input[type="button"] { + width: 90%; + margin: 0 auto; + display: block; +} + +input[type="range"] { + width: 70%; +} + + span { + position: relative; + bottom: 5px; + }</pre> +</div> + +<pre class="brush: js">var canvas = document.querySelector('.myCanvas'); +var width = canvas.width = window.innerWidth; +var height = canvas.height = window.innerHeight-85; +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = 'rgb(0,0,0)'; +ctx.fillRect(0,0,width,height); + +var colorPicker = document.querySelector('input[type="color"]'); +var sizePicker = document.querySelector('input[type="range"]'); +var output = document.querySelector('.output'); +var clearBtn = document.querySelector('input[type="button"]'); + +// covert degrees to radians +function degToRad(degrees) { + return degrees * Math.PI / 180; +}; + +// update sizepicker output value + +sizePicker.oninput = function() { + output.textContent = sizePicker.value; +} + +// store mouse pointer coordinates, and whether the button is pressed +var curX; +var curY; +var pressed = false; + +// update mouse pointer coordinates +document.onmousemove = function(e) { + curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); + curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); +} + +canvas.onmousedown = function() { + pressed = true; +}; + +canvas.onmouseup = function() { + pressed = false; +} + +clearBtn.onclick = function() { + ctx.fillStyle = 'rgb(0,0,0)'; + ctx.fillRect(0,0,width,height); +} + +function draw() { + if(pressed) { + ctx.fillStyle = colorPicker.value; + ctx.beginPath(); + ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false); + ctx.fill(); + } + + requestAnimationFrame(draw); +} + +draw();</pre> + +<p>{{EmbedLiveSample("예제", '100%', 600)}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.input.input-button")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("input")}} 요소와 그 인터페이스 {{domxref("HTMLInputElement")}}.</li> + <li>보다 현대적인 {{HTMLElement("button")}} 요소.</li> +</ul> diff --git a/files/ko/web/html/element/input/date/index.html b/files/ko/web/html/element/input/date/index.html new file mode 100644 index 0000000000..43675823de --- /dev/null +++ b/files/ko/web/html/element/input/date/index.html @@ -0,0 +1,497 @@ +--- +title: <input type="date"> +slug: Web/HTML/Element/Input/date +tags: + - Element + - HTML + - HTML forms + - Input + - Input Element + - Input Type + - Reference +translation_of: Web/HTML/Element/input/date +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong><code>date</code></strong> 유형의 {{HTMLElement("input")}} 요소는 유효성 검증을 포함하는 텍스트 상자 또는 특별한 날짜 선택 인터페이스를 사용해 날짜를 입력할 수 있는 입력 칸을 생성합니다.</span></p> + +<p>입력 칸의 값은 연, 월, 일을 포함하지만 시간은 포함하지 않습니다. {{HTMLElement("input/time", "time")}}과 {{HTMLElement("input/datetime-local", "datetime-local")}} 입력 유형이 시간과 시간+날짜 조합을 지원합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<p>입력 UI는 브라우저마다 다릅니다. {{anch("브라우저 호환성")}}에서 더 자세한 정보를 알아보세요. 날짜 입력 유형을 지원하지 않는 브라우저에서는 우아하게 <code><a href="/ko/docs/Web/HTML/Element/input/text"><input type="text"></a></code>로 저하됩니다.</p> + +<p>날짜 선택을 위한 별도의 인터페이스를 갖춘 브라우저 중, Chrome과 Opera는 다음과 같은 모양의 달력을 보여줍니다.</p> + +<p><img alt="A textbox containing “dd/mm/yyyy”, an increment/decrement button combo, and a downward arrow that opens into a calendar control." src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p> + +<p>구 Edge의 컨트롤입니다.</p> + +<p><img alt="A textbox containing “mm/dd/yyyy”, but when interacted with, opens a tri-column date selector." src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p> + +<p>Firefox의 날짜 컨트롤입니다.</p> + +<p><img alt="Another “dd/mm/yyyy” textbox that expands into a selectable calendar control." src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("값")}}</strong></td> + <td>YYYY-MM-DD 형식으로 날짜를 나타내거나, 빈 {{domxref("DOMString")}}.</td> + </tr> + <tr> + <td><strong>이벤트</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}}, {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>지원하는 공통 특성</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 특성</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td> + </tr> + <tr> + <td><strong>메서드</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="값">값</h2> + +<p>날짜 입력 칸의 값은 입력한 날짜를 나타내는 {{domxref("DOMString")}}입니다. 날짜는 유효한 날짜 문자열 문서에서 설명하듯, ISO8601을 따르는 서식을 취합니다.</p> + +<p>{{htmlattrxref("value", "input")}} 특성에 날짜를 지정해서 입력 칸의 기본값을 지정할 수 있습니다.</p> + +<pre class="brush: html"><input type="date" value="2017-06-01"></pre> + +<p>{{EmbedLiveSample('값', 600, 40)}}</p> + +<div class="blockIndicator note"> +<p><strong>표시 값과 실제 <code>value</code>의 불일치</strong> — 입력 칸에 표시되는 값은 사용자 브라우저의 로케일에 기반한 서식을 따라가지만, <code>value</code>는 항상 <code>yyyy-mm-dd</code>의 서식을 사용합니다.</p> +</div> + +<p>입력 요소의 날짜 값은 JavaScript의 {{domxref("HTMLInputElement.value", "value")}}와 {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} 속성으로 설정할 수도 있습니다. 다음 예제 코드를 보세요.</p> + +<pre class="brush: js">var dateControl = document.querySelector('input[type="date"]'); +dateControl.value = '2017-06-01'; +console.log(dateControl.value); // prints "2017-06-01" +console.log(dateControl.valueAsNumber); // prints 1496275200000, a UNIX timestamp</pre> + +<p>위의 코드는 <code>type</code>이 <code>date</code>인 첫 번째 {{HTMLElement("input")}} 요소를 찾아서, 값을 <code>2017-06-01</code>로 설정합니다. 그리고 값을 다시 문자열과 숫자 형태로 가져옵니다.</p> + +<h2 id="추가_특성">추가 특성</h2> + +<p>모든 {{htmlelement("input")}} 요소의 공용 특성 외에도, <code>date</code> 유형은 아래의 특성도 지원합니다.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">특성</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>허용하는 가장 늦은 날짜</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>허용하는 가장 이른 날짜</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>위/아래 조절 버튼을 눌렀을 때와, 날짜 유효성을 검증할 때 사용하는 스텝 간격.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> + +<p>받을 수 있는 제일 나중 날짜. 입력받은 {{htmlattrxref("value", "input")}}가 <code>max</code>보다 더 나중이라면 유효성 검증에 실패합니다. <code>max</code>의 값이 <code>yyyy-mm-dd</code> 형식의 유효한 날짜 문자열이 아니면 최댓값을 지정하지 않은 것으로 간주합니다.</p> + +<p><code>max</code>와 <code>min</code> 특성을 모두 사용할 경우, <code>max</code>는 <code>min</code>과 <strong>동일하거나 이후</strong>인 날짜 문자열이어야 합니다.</p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<p>받을 수 있는 제일 이전 날짜. 입력받은 {{htmlattrxref("value", "input")}}가 <code>min</code>보다 더 이전이라면 유효성 검증에 실패합니다. <code>min</code>의 값이 <code>yyyy-mm-dd</code> 형식의 유효한 날짜 문자열이 아니면 최솟값을 지정하지 않은 것으로 간주합니다.</p> + +<p><code>max</code>와 <code>min</code> 특성을 모두 사용할 경우, <code>min</code>은 <code>max</code>와 <strong>동일하거나 이전</strong>인 날짜 문자열이어야 합니다.</p> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p><code>date</code> 입력 칸의 <code>step</code> 값은 날짜 단위, 즉 밀리초 단위로 86,400,000 ✕ <code>step</code>로 처리합니다. 기본값은 1로, 하루를 나타냅니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> <code>date</code> 입력 칸에서 <code>step</code>의 값으로 <code>any</code>를 지정하면 <code>1</code>과 같습니다.</p> +</div> + +<h2 id="날짜_입력_칸_사용하기">날짜 입력 칸 사용하기</h2> + +<p>날짜 입력 칸은 꽤 편리하게 보입니다. 날짜를 선택할 수 있는 쉬운 인터페이스를 제공하고, 서버로 값을 전송할 땐 현재 사용자의 로케일과 관계 없이 정규화하니까요. 그러나, 지금은 제한적인 브라우저 지원으로 인한 문제가 존재합니다.</p> + +<p>이 구획에서는 <code><input type="date"></code>의 기본 사용법과 복잡한 사용법을 살펴볼 것이고, 뒤에서는 브라우저 지원 문제를 처리할 때 사용할 수 있는 조언을 드리겠습니다. ({{anch("미지원 브라우저 처리하기")}}로 가세요.)</p> + +<div class="blockIndicator note"> +<p>모든 브라우저에서 날짜 입력 칸을 지원하는 날이 오면 이 문제도 자연스럽게 사라질 것입니다.</p> +</div> + +<h3 id="기본_예제">기본 예제</h3> + +<p><code><input type="date"></code>의 가장 간단한 사용법은 아래 코드처럼 하나의 <code><input></code>과 그 {{htmlelement("label")}}로 이뤄집니다.</p> + +<pre class="brush: html"><form action="https://example.com"> + <label> + Enter your birthday: + <input type="date" name="bday"> + </label> + + <p><button>Submit</button></p> +</form></pre> + +<p>{{EmbedLiveSample('기본_예제', 600, 40)}}</p> + +<p>위의 HTML은 입력받은 날짜를 <code>bday</code>라는 키로 <code>https://example.com</code>에 제출합니다. 그래서, 최종 URL은 <code>https://example.com/?bday=1955-06-08</code>이 됩니다.</p> + +<h3 id="최대와_최소_날짜_설정">최대와 최소 날짜 설정</h3> + +<p>{{htmlattrxref("min", "input")}}과 {{htmlattrxref("max", "input")}} 특성을 사용하면 사용자가 선택할 수 있는 날짜를 제한할 수 있습니다. 다음 코드에서는 최소 날짜 <code>2017-04-01</code>, 최대 날짜 <code>2017-04-30</code>을 지정합니다.</p> + +<pre class="brush: html"><form> + <label for="party">Choose your preferred party date: + <input type="date" name="party" min="2017-04-01" max="2017-04-30"> + </label> +</form></pre> + +<p>{{EmbedLiveSample('최대와_최소_날짜_설정', 600, 40)}}</p> + +<p>실행 결과에서 2017년 4월의 날짜만 선택 가능함을 볼 수 있습니다. 입력 칸의 연과 월은 편집이 불가능해지며, 날짜 선택 위젯에서도 2017년 4월 바깥의 날짜는 선택할 수 없습니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 원래 {{htmlattrxref("step", "input")}} 특성을 사용해 날짜를 증감할 때 늘어날 일 수를 조절할 수 있어야 하고, 이를 이용해 토요일만 선택 가능하게 하는 등의 처리가 가능해야 합니다. 그러나 지금은 아무 브라우저에서도 구현하고 있지 않습니다.</p> +</div> + +<h3 id="입력_칸_크기_조절">입력 칸 크기 조절</h3> + +<p><code><input type="date"></code>는 {{htmlattrxref("size", "input")}} 등의 크기 조절 특성을 지원하지 않습니다. <a href="/ko/docs/Web/CSS">CSS</a>를 사용하세요.</p> + +<h2 id="유효성_검사">유효성 검사</h2> + +<p><code><input type="date"></code>는 기본값에선 값의 형식 외에 다른 유효성 검사는 수행하지 않습니다. 보통 날짜 입력 칸의 인터페이스가 날짜 이외의 값을 처음부터 허용하지 않는 것이 유용하긴 하나, 아무 값을 입력하지 않을 수도 있고, 미지원 브라우저에서 텍스트 입력 칸으로 대체된 경우 4월 32일처럼 유효하지 않은 날짜도 입력할 수 있습니다.</p> + +<p>{{htmlattrxref("min", "input")}}과 {{htmlattrxref("max", "input")}}를 사용해 가능한 날짜 범위를 제한({{anch("최대와 최소 날짜 설정")}})한 경우, 지원하는 브라우저에서는 범위 밖의 값을 받았을 때 오류를 표시합니다. 그러나 브라우저가 온전히 지원하지 않을 수도 있기 때문에, 제출받은 값을 이중으로 검증하는 것이 필요합니다.</p> + +<p>{{htmlattrxref("required", "input")}} 특성을 사용해 값을 필수로 요구할 수도 있으며, 빈 입력 칸을 제출하려고 하면 오류를 표시합니다. required는 대부분의 브라우저에서, 텍스트 입력 칸으로 대체되더라도 지원하고 있습니다.</p> + +<p>최소/최대 날짜와 필수 검증 예제를 보겠습니다.</p> + +<pre class="brush: html"><form> + <label> + Choose your preferred party date (required, April 1st to 20th): + <input type="date" name="party" min="2017-04-01" max="2017-04-20" required> + <span class="validity"></span> + </label> + + <p> + <button>Submit</button> + </p> +</form></pre> + +<p>날짜 입력 칸의 입력을 완전히 끝내지 않았거나, 범위 밖의 값으로 제출을 시도하면 브라우저가 오류를 표시하는 것을 확인할 수 있습니다. 아래 실행 결과에서 직접 해보세요.</p> + +<p>{{EmbedLiveSample('유효성_검사', 600, 100)}}</p> + +<p>지원하지 않는 브라우저를 사용하시는 경우엔 다음 스크린샷을 참고하세요.</p> + +<p><img alt="The input field has an overlaid speech balloon, with an orange exclamation mark icon and the message “Please fill in this field.”" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>다음은 위 코드에서 사용한 CSS로, {{cssxref(":valid")}}와 {{cssxref(":invalid")}} 의사 클래스를 사용해 입력한 값의 유효성 여부에 따라 다른 스타일을 적용하고 있습니다. 구체적으로는, 유효성에 따라 입력 칸의 옆에 배치한 {{htmlelement("span")}}에 아이콘을 추가합니다.</p> + +<pre class="brush: css">label { + display: flex; + align-items: center; +} + +span::after { + padding-left: 5px; +} + +input:invalid + span::after { + content: '✖'; +} + +input:valid+span::after { + content: '✓'; +}</pre> + +<div class="warning"> +<p><strong>중요</strong>: 클라이언트측 유효성 검사는 서버의 검사를 대체할 수 없습니다. HTML을 수정하는 것도 쉽지만, HTML을 완전히 우회하고 서버에 데이터를 직접 제출할 수도 있기 때문입니다. 서버가 받은 데이터의 검증을 하지 못하는 경우 잘못된 형식, 잘못된 유형, 너무 큰 데이터 등으로 인해 심각한 상황을 맞을 수도 있습니다.</p> +</div> + +<h2 id="미지원_브라우저_처리하기">미지원 브라우저 처리하기</h2> + +<p>위에서 언급했듯, 현재 날짜 입력 칸의 큰 문제는 {{anch("브라우저 호환성", "브라우저 지원")}}입니다. 예를 하나 들자면, Firefox for Android의 날짜 입력기는 다음과 같은 모습입니다.</p> + +<p><img alt="A popup calendar picker modal floats above the web page and browser UI." src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p> + +<p>지원하지 않는 브라우저에서는 단순한 텍스트 입력 칸으로 우아하게 저하되긴 하지만, 이는 (보여지는 컨트롤이 다르므로) 사용자 인터페이스와 데이터 처리가 일관적이지 못하다는 문제를 만듭니다.</p> + +<p>두 문제 중 데이터 처리가 더 심각합니다. 날짜 입력 칸을 지원하는 브라우저에서는 값을 <code>yyyy-mm-dd</code>의 형식으로 정규화합니다. 그러나 텍스트 입력만으로는 값의 형식을 브라우저가 알 수 없으며, 사람들은 다양한 형태로 날짜를 입력합니다. 다음은 그 일부입니다.</p> + +<ul> + <li><code>yymmdd</code></li> + <li><code>yyyymmdd</code></li> + <li><code>yyyy/mm/dd</code></li> + <li><code>yyyy-mm-dd</code></li> + <li><code>dd/mm/yyyy</code></li> + <li><code>mm-dd-yyyy</code></li> +</ul> + +<p>해결하는 방법 중 하나는 날짜 입력 칸에 {{htmlattrxref("pattern", "input")}} 특성을 사용하는 것입니다. 날짜 입력 칸은 사용하지 않는 특성이지만 텍스트 입력 칸으로 대체된 경우에는 사용하기 때문인데, 미지원 브라우저에서 다음 코드를 확인해보세요.</p> + +<pre class="brush: html"><form> + <label for="bday">Enter your birthday: + <input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}"> + <span class="validity"></span> + </label> + <p> + <button>Submit</button> + </p> +</form></pre> + +<p>{{EmbedLiveSample('미지원_브라우저_처리하기', 600, 100)}}</p> + +<p>입력한 값을 패턴 <code>####-##-##</code> (<code>#</code>은 0에서 9까지의 숫자)에 맞추지 않고 제출해보면 브라우저가 날짜 입력 칸을 강조하며 오류를 표시함을 볼 수 있습니다. 물론 아직도 사람들이 유효하지 않은 날짜나 잘못된 형태로 입력하는 것은 막을 수 없으므로, 문제를 해결한 것은 아닙니다.</p> + +<div class="hidden"> +<pre class="brush: css">span { + position: relative; +} + +span::after { + right: -18px; + position: absolute; +} + +input:invalid + span::after { + content: '✖'; +} + +input:valid + span::after { + content: '✓'; +}</pre> +</div> + +<p>그러므로 지금으로서는, 크로스 브라우저 날짜 처리를 지원하기 위한 가장 좋은 방법은 각각 다른 입력 칸에 연, 월, 일을 입력하도록 하는 방법과, 외부 JavaScript 라이브러리를 사용하는 편이 최선입니다.</p> + +<h2 id="예제">예제</h2> + +<p>이번 예제에서는 날짜를 선택할 수 있는 사용자 인터페이스 두 개를 만들어보겠습니다. 첫 번째는 네이티브 <code><input type="date"></code> 입력 칸을 사용한 것이고, 두 번째는 네이티브 입력 칸을 지원하지 않는 구형 브라우저에서 사용할 수 있도록 세 개의 {{htmlelement("select")}} 요소를 이용한 것입니다.</p> + +<p>{{EmbedLiveSample('예제', 600, 100)}}</p> + +<h3 id="HTML">HTML</h3> + +<p>HTML은 다음과 같습니다.</p> + +<pre class="brush: html"><form> + <label class="nativeDatePicker">Enter your birthday: + <input type="date" name="bday"> + <span class="validity"></span> + </label> + + <fieldset class="fallbackDatePicker" hidden> + <legend class="fallbackLabel">Enter your birthday:</legend> + + <label> + Day: + <select name="day"></select> + </label> + + <label> + Month: + <select name="month"> + <option>January</option> + <option>February</option> + <option>March</option> + <option>April</option> + <option>May</option> + <option>June</option> + <option>July</option> + <option>August</option> + <option>September</option> + <option>October</option> + <option>November</option> + <option>December</option> + </select> + </label> + + <label> + Year: + <select name="year"></select> + </label> + </fieldset> +</form></pre> + +<p>월은 변하지 않으므로 하드코딩합니다. 일과 연은 현재 선택 값에 따라 동적으로 생성하도록 비워놓습니다. (자세한 설명은 아래의 코드 주석을 참고하세요.)</p> + +<div class="hidden"> +<pre class="brush: css">span { + padding-left: 5px; +} + +input:invalid + span::after { + content: '✖'; +} + +input:valid + span::after { + content: '✓'; +}</pre> +</div> + +<h3 id="JavaScript">JavaScript</h3> + +<p>코드에서 관심을 가질만한 곳은 브라우저의 <code><input type="date"></code> 지원 여부를 알아내기 위한 기능 탐지 부분입니다.</p> + +<p>우선 새로운 {{htmlelement("input")}} 요소를 만들고, <code>type</code>을 <code>date</code>로 설정해봅니다. 그리고 즉시 <code><input></code>의 유형을 검사하는데, 지원하지 않는 브라우저에서 <code>date</code>는 <code>text</code>로 대체되므로 <code>text</code>를 반환합니다. <code><input type="date"></code>을 지원하지 않는다는 사실을 알아냈으면 네이티브 입력 칸을 숨기고, 대체 요소({{htmlelement("select")}})를 대신 노출합니다.</p> + +<pre class="brush: js">// define variables +var nativePicker = document.querySelector('.nativeDatePicker'); +var fallbackPicker = document.querySelector('.fallbackDatePicker'); + +var yearSelect = document.querySelector('[name=year]'); +var monthSelect = document.querySelector('[name=month]'); + +// Test whether a new date input falls back to a text input +var testElement = document.createElement('input'); + +try { + test.type = 'date'; +} catch (e) { + console.log(e.description); +} + +// If it does, run the code inside the if () {} block +if (testElement.type === 'text') { + // hide the native picker and show the fallback + nativePicker.hidden = true; + fallbackPicker.hidden = false; + + // populate the days and years dynamically + // (the months are always the same, therefore hardcoded) + populateDays(monthSelect.value); + populateYears(); +} + +function populateDays(month) { + const daySelect = document.querySelector('[name=day]'); + const month = monthSelect.value; + + // Create variable to hold new number of days to inject + let dayNum; + + // 31 or 30 days? + switch (month) { + case 'April': case 'June': case 'September': case 'November': + dayNum = 30; + break; + case 'February': + // If month is February, calculate whether it is a leap year or not + const year = yearSelect.value; + const isLeap = new Date(year, 1, 29).getMonth() === 1; + dayNum = isLeap ? 29 : 28; + break; + default: + dayNum = 31; + } + + // inject the right number of new <option>s into the <select> + daySelect.options = Array.from({ length: dayNum }, function(index) { + return index + 1; + }); + + // if previous day has already been set, set daySelect's value + // to that day, to avoid the day jumping back to 1 when you + // change the year + if (previousDay) { + daySelect.value = previousDay; + + // If the previous day was set to a high number, say 31, and then + // you chose a month with fewer days in it (like February), + // this code ensures that the highest day available + // is selected, rather than showing a blank daySelect + if (previousDay > daySelect.length + 1) { + daySelect.selectedIndex = daySelect.length; + } + } +} + +function populateYears() { + // get this year as a number + var year = (new Date()).getFullYear(); + + // Make this year and the 100 years before it available in the <select> + daySelect.options = Array.from({ length: 100 }, function(index) { + return index + year; + }); +} + +// when the month or year <select> values are changed, rerun populateDays() +// in case the change affected the number of available days +yearSelect.onchange = populateDays; +monthSelect.onchange = populateDays; + +// preserve day selection +var previousDay; + +// update what day has been set to previously +// see end of populateDays() for usage +daySelect.onchange = function() { + previousDay = daySelect.value; +}</pre> + +<div class="note"> +<p><strong>참고</strong>: 어떤 연도는 53주임을 기억하세요! (<a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Wikipedia</a>) 프로덕션 애플리케이션을 개발할 땐 고려해야 할 사항입니다.</p> +</div> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '<input type="date">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '<input type="date">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.input.input-date")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>일반 {{HTMLElement("input")}} 요소와, 그 인터페이스인 {{domxref("HTMLInputElement")}}.</li> +</ul> diff --git a/files/ko/web/html/element/input/file/index.html b/files/ko/web/html/element/input/file/index.html new file mode 100644 index 0000000000..a58f988d17 --- /dev/null +++ b/files/ko/web/html/element/input/file/index.html @@ -0,0 +1,509 @@ +--- +title: <input type="file"> +slug: Web/HTML/Element/Input/file +tags: + - HTML + - HTML forms + - Input Type + - Reference + - 파일 +translation_of: Web/HTML/Element/input/file +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong><code>file</code></strong> 유형의 {{htmlelement("input")}} 요소에는 저장 장치의 파일을 하나 혹은 여러 개 선택할 수 있습니다. 그 후, <a href="/ko/docs/Learn/HTML/Forms">양식을 제출</a>해 서버로 전송하거나, <a href="/ko/docs/Web/API/File/Using_files_from_web_applications">File API</a>를 사용한 JavaScript 코드로 조작할 수 있습니다.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("값")}}</strong></td> + <td>선택한 파일의 경로를 나타내는 {{domxref("DOMString")}}.</td> + </tr> + <tr> + <td><strong>이벤트</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}}, {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td> + <p><strong>지원하는 공통 특성</strong></p> + </td> + <td>{{htmlattrxref("required", "input")}}</td> + </tr> + <tr> + <td><strong>추가 특성</strong></td> + <td>{{htmlattrxref("accept", "input/file")}}, {{htmlattrxref("capture", "input/file")}}, {{htmlattrxref("files", "input/file")}}, {{htmlattrxref("multiple", "input/file")}}</td> + </tr> + <tr> + <td><strong>IDL 특성</strong></td> + <td><code>files</code>, <code>value</code></td> + </tr> + <tr> + <td><strong>DOM 인터페이스</strong></td> + <td>{{domxref("HTMLInputElement")}}</td> + </tr> + <tr> + <td><strong>메서드</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="값">값</h2> + +<p>파일 입력 칸의 {{htmlattrxref("value", "input")}} 특성은 선택한 파일의 경로를 나타내는 {{domxref("DOMString")}}을 담습니다. 사용자가 여러 개의 파일을 선택한 경우 <code>value</code>는 파일 목록의 첫 번째 파일을 가리키며, 나머지 파일은 요소의 {{domxref("HTMLInputElement.files")}} 속성으로 가져올 수 있습니다.</p> + +<div class="note"><strong>참고:</strong> + +<ol> + <li>아직 아무런 파일도 선택하지 않은 경우 빈 문자열(<code>""</code>)을 사용합니다.</li> + <li>악의적인 소프트웨어가 사용자의 파일 구조를 알아내는 것을 방지하기 위해, 값 문자열은 항상 <a href="https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly">C:\fakepath\를 앞에 포함</a>합니다.</li> +</ol> +</div> + +<h2 id="추가_특성">추가 특성</h2> + +<p>모든 {{htmlelement("input")}} 요소의 공용 특성 외에도, <code>file</code> 유형은 아래의 특성도 지원합니다.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">특성</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("accept")}}</code></td> + <td>허용하는 파일 유형을 나타내는 하나 이상의 {{anch("고유 파일 유형 지정자")}}</td> + </tr> + <tr> + <td><code>{{anch("capture")}}</code></td> + <td>이미지 또는 비디오 데이터를 캡처할 때 사용할 방법</td> + </tr> + <tr> + <td><code>{{anch("files")}}</code></td> + <td>선택한 파일을 나열하는 {{domxref("FileList")}}</td> + </tr> + <tr> + <td><code>{{anch("multiple")}}</code></td> + <td>지정할 경우 사용자가 여러 개의 파일을 선택할 수 있음</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefaccept">{{htmlattrdef("accept")}}</h3> + +<p><a href="/ko/docs/Web/HTML/Attributes/accept"><code>accept</code></a> 특성은 파일 입력 칸이 허용할 파일 유형을 나타내는 문자열로, 쉼표로 구분한 <strong>{{anch("고유 파일 유형 지정자")}}</strong>의 목록입니다. 주어진 파일 유형의 식별 방법이 여러 가지일 수도 있으므로, 특정 파일 형식이 필요할 땐 유형의 집합을 제공하는 것이 좋습니다.</p> + +<p>예를 들어, Microsoft Word 파일을 식별하는 방법은 여러가지이므로, Word 파일을 허용하는 <code><input></code>은 다음과 같은 형태를 갖게 됩니다.</p> + +<pre class="brush: html notranslate"><input type="file" id="docpicker" + accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"></pre> + +<h3 id="htmlattrdefcapture">{{htmlattrdef("capture")}}</h3> + +<p><a href="/ko/docs/Web/HTML/Attributes/accept"><code>accept</code></a> 특성이 이미지나 비디오 캡처 데이터를 요구할 경우, <a href="/ko/docs/Web/HTML/Attributes/capture"><code>capture</code></a> 특성으로는 어떤 카메라를 사용할지 지정할 수 있습니다. <code>user</code> 값은 전면 카메라(사용자를 향한 카메라)와 마이크를, <code>environment</code> 값은 후면 카메라와 마이크를 사용해야 함을 나타냅니다. <code>capture</code> 특성을 누락한 경우 {{Glossary("user agent", "사용자 에이전트")}}가 어떤 쪽을 선택할지 스스로 결정합니다. 요청한 방향의 카메라를 사용할 수 없는 경우 사용자 에이전트는 자신이 선호하는 기본 모드로 대체할 수 있습니다.</p> + +<div class="note"><strong>참고:</strong> <code>capture</code>는 과거 불리언 특성이었으며, 존재할 경우 파일 선택 창을 요청하는 대신 장치의 카메라나 마이크 등 미디어 캡처 장치를 요청했었습니다.</div> + +<h3 id="htmlattrdeffiles">{{htmlattrdef("files")}}</h3> + +<p>선택한 모든 파일을 나열하는 {{domxref("FileList")}} 객체입니다. {{htmlattrxref("multiple", "input/file")}} 특성을 지정하지 않았다면 두 개 이상의 파일을 포함하지 않습니다.</p> + +<h3 id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</h3> + +<p><a href="/ko/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a> 불리언 특성을 지정한 경우 사용자가 파일 선택 창에서 복수의 파일을 선택할 수 있습니다.</p> + +<h2 id="비표준_특성">비표준 특성</h2> + +<p>위의 표준 특성 외에도, 다음과 같이 일부 브라우저에서만 사용할 수 있는 비표준 특성도 존재합니다. 지원하지 않는 브라우저에서의 코드 동작에 제약이 생길 수 있으므로, 가능하면 사용을 피해야 합니다.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">특성</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("webkitdirectory")}}</code></td> + <td>사용자가 디렉토리를 선택할 수 있는지 나타내는 불리언 특성. <code>{{anch("multiple")}}</code> 특성을 지정한 경우 복수 선택 가능</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefwebkitdirectory_non-standard_inline">{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</h3> + +<p><code>webkitdirectory</code> 불리언 특성이 존재할 경우 사용자의 파일 선택 창에서 디렉토리만 선택 가능해야 함을 나타냅니다. {{domxref("HTMLInputElement.webkitdirectory")}} 문서를 방문해 보다 자세한 정보와 예제를 알아보세요.</p> + +<div class="note"> +<p><strong>참고:</strong> <code>webkitdirectory</code>는 원래 WebKit 기반 브라우저에서만 구현했었으나, Microsoft Edge와 Firefox(50 이상)도 지원합니다. 그러나, 비록 상대적으로 널리 지원하고는 있으나, 여전히 비표준 특성이므로 대안이 없는 경우에만 사용해야 합니다.</p> +</div> + +<h2 id="고유_파일_유형_지정자">고유 파일 유형 지정자</h2> + +<p><strong>고유 파일 유형 지정자</strong>는 <code>file</code> 유형의 {{htmlelement("input")}}에서 선택할 수 있는 파일의 종류를 설명하는 문자열입니다. 각각의 유형 지정자는 다음 형태 중 하나를 취할 수 있습니다.</p> + +<ul> + <li>마침표로 시작하는 유효한 파일 이름 확장자. 대소문자를 구분하지 않습니다. 예시: <code>.jpg</code>, <code>.pdf</code>, <code>.doc</code>.</li> + <li>확장자를 포함하지 않은 유효한 MIME 유형 문자열.</li> + <li><code>audio/*</code>는 "모든 오디오 파일"을 의미합니다.</li> + <li><code>video/*</code>는 "모든 비디오 파일"을 의미합니다.</li> + <li><code>image/*</code>는 "모든 이미지 파일"을 의미합니다.</li> +</ul> + +<p><code>accept</code> 특성이 고유 파일 유형 지정자를 값으로 받습니다. 쉼표로 구분하면 여러 개의 지정자도 사용할 수 있습니다. 예를 들어, 표준 이미지 형식 뿐만 아니라 PDF 파일도 받을 수 있어야 하는 입력 칸은 다음 코드처럼 작성할 수 있습니다.</p> + +<pre class="brush: html notranslate"><input type="file" accept="image/*,.pdf"></pre> + +<h2 id="파일_입력_칸_사용하기">파일 입력 칸 사용하기</h2> + +<h3 id="기본_예제">기본 예제</h3> + +<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> + <div> + <label for="file">Choose file to upload</label> + <input type="file" id="file" name="file" multiple> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample('기본_예제', 650, 60)}}</p> + +<div class="note"> +<p><strong>참고</strong>: 이 예제는 GitHub에서도 볼 수 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">소스 코드</a>와 <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">라이브 예제</a>를 확인하세요.</p> +</div> + +<p>사용자의 장치와 운영체제에 상관없이, 파일 입력 칸은 사용자가 파일을 선택할 수 있도록 파일 선택 대화창을 여는 하나의 버튼을 제공합니다.</p> + +<p>예제 코드와 같이 {{htmlattrxref("multiple", "input/file")}} 특성을 지정한 경우 파일 여러 개를 한 번에 선택할 수 있습니다. 사용자는 플랫폼이 허용하는 방법(<kbd>Shift</kbd>, <kbd>Ctrl</kbd> 누르기 등)을 통해 파일 선택 창에서 두 개 이상의 파일을 선택합니다. <code><input></code> 하나에 파일 하나씩만 선택을 허용하고 싶은 경우 <code>multiple</code> 특성을 제거하세요.</p> + +<h3 id="선택한_파일의_정보_가져오기">선택한 파일의 정보 가져오기</h3> + +<p>요소의 {{domxref("HTMLInputElement.files")}} 속성은 선택한 파일({{domxref("File")}}) 목록을 {{domxref("FileList")}} 객체로 반환합니다. <code>FileList</code>는 배열처럼 행동하므로, <code>length</code> 속성을 사용해 현재 선택한 파일의 수를 알 수 있습니다.</p> + +<p>각각의 <code>File</code> 객체는 다음과 같은 정보를 가지고 있습니다.</p> + +<dl> + <dt><code>name</code></dt> + <dd>파일 이름.</dd> + <dt><code>lastModified</code></dt> + <dd>파일을 마지막으로 수정한 시각을 나타내는 숫자. UNIX 표준시(1970년 1월 1일 자정)으로부터 지난 시간을 밀리초 단위로 나타낸 값입니다.</dd> + <dt><code>lastModifiedDate</code> {{deprecated_inline}}</dt> + <dd>파일을 마지막으로 수정한 시각을 나타내는 {{jsxref("Date")}} 객체. 더 이상 사용하지 않아야 합니다. <code>lastModified</code>를 대신 사용하세요.</dd> + <dt><code>size</code></dt> + <dd>파일의 크기를 바이트 단위로 나타낸 값.</dd> + <dt><code>type</code></dt> + <dd>파일의 <a href="/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME 유형</a>.</dd> + <dt><code>webkitRelativePath</code> {{non-standard_inline}}</dt> + <dd>{{htmlattrxref("webkitdirectory", "input/file")}} 특성을 사용한 경우, 기준 디렉토리에 대한 파일의 상대적인 경로. 비표준 특성이므로 사용에 주의가 필요합니다.</dd> +</dl> + +<div class="hidden note"> +<p><strong>Note</strong>: You can set as well as get the value of <code>HTMLInputElement.files</code> in all modern browsers; this was most recently added to Firefox, in version 57 (see {{bug(1384030)}}).</p> +</div> + +<h3 id="가능한_파일_유형_제한하기">가능한 파일 유형 제한하기</h3> + +<p>종종, 사용자가 아무 파일이나 선택하지 못하도록 제한하고, 받을 수 있는 파일의 유형을 정해두고 싶을 때가 있습니다. 예를 들어, 프로필 사진을 받는 입력 칸의 경우, {{glossary("JPEG")}}, {{glossary("PNG")}}처럼 웹 호환 가능한 이미지 형식을 선택하도록 해야 할 것입니다.</p> + +<p>허용하는 파일 유형은 {{htmlattrxref("accept","input/file")}} 특성을 사용해 지정할 수 있으며, 허용할 파일 확장자나 MIME 유형을 쉼표로 구분한 값을 제공해야 합니다. 다음은 몇 가지 예시입니다.</p> + +<ul> + <li><code>accept="image/png"</code> or <code>accept=".png"</code> — PNG 파일을 허용합니다.</li> + <li><code>accept="image/png, image/jpeg"</code> 또는 <code>accept=".png, .jpg, .jpeg"</code> — PNG와 JPEG를 허용합니다.</li> + <li><code>accept="image/*"</code> — <code>image/*</code> MIME 유형을 가진 모든 파일을 허용합니다. 많은 모바일 기기에서는, 이 값을 지정할 경우 사용자가 카메라로 사진을 찍을 수 있도록 설정합니다.</li> + <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — MS Word 문서처럼 보이는 파일을 모두 허용합니다.</li> +</ul> + +<p>보다 완전한 예제 코드를 보겠습니다.</p> + +<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> + <div> + <label for="profile_pic">Choose file to upload</label> + <input type="file" id="profile_pic" name="profile_pic" + accept=".jpg, .jpeg, .png"> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>위 코드는 이전 예제와 비슷하게 보이는 결과를 냅니다.</p> + +<p>{{EmbedLiveSample('가능한_파일_유형_제한하기', 650, 60)}}</p> + +<div class="note"> +<p><strong>참고</strong>: GitHub에서도 볼 수 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html">소스 코드</a>, <a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html">라이브 실행 결과</a>.</p> +</div> + +<p>외형은 유사해 보일지라도, 이번 예제에서 파일을 선택하려고 한다면 <code>accept</code>에 지정한 파일 유형만 선택 가능함을 확인할 수 있습니다. (정확한 동작은 브라우저와 운영체제에 따라 다를 수 있습니다)</p> + +<p><img alt="Screenshot of a macOS file picker dialog. Files other than JPEG are grayed-out and unselectable." src="https://mdn.mozillademos.org/files/15183/file-chooser.png" style="margin: 0 auto;"></p> + +<p><code>accept</code> 특성은 선택한 파일 유형을 검증하지는 않으며, 단순히 브라우저가 사용자를 올바른 파일 유형으로 유도하도록 힌트를 제공할 뿐입니다. (대부분의 경우) 사용자가 파일 선택 창의 옵션을 설정해 <code>accept</code>를 덮어쓰고 자신이 원하는 아무 파일이나 선택할 수 있으므로, 파일 입력 칸에 잘못된 유형의 파일이 올 수 있습니다.</p> + +<p>그러므로, 반드시 적절한 서버 사이드 유효성 검증을 통해 <code>accept</code> 특성을 보조해야 합니다.</p> + +<h3 id="참고">참고</h3> + +<ol> + <li> + <p>파일 입력 칸의 값을 스크립트에서 설정할 수는 없습니다. 따라서 다음 코드는 아무런 효과도 내지 않습니다.</p> + + <pre class="brush: js notranslate">const input = document.querySelector("input[type=file]"); +input.value = "foo"; +</pre> + </li> + <li> + <p><code><input type="file"></code>로 선택한 원본 파일의 실제 경로는 명확한 보안상 문제로 인해 알 수 없습니다. 대신 앞에 <code>C:\fakepath\</code> 를 붙인 파일 이름을 경로로 보여줍니다. 하필 이런 모습이 된 것에는 역사적인 이유가 있지만 이 동작은 모든 최신 브라우저에서 지원하고 있으며, 사실 <a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">명세에도 포함</a>되어 있습니다.</p> + </li> +</ol> + +<h2 id="예제">예제</h2> + +<p>이번 예제에서는 좀 더 발전된 파일 선책 창을 만들어 보겠습니다. <code>HTMLInputElement.files</code> 속성에서 알 수 있는 정보도 활용하면서, 몇 가지 재밌는 활용법도 보여드리겠습니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 전체 소스 코드는 GitHub에 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">라이브 실행 결과</a>). 주 목적이 JavaScript이므로 CSS는 따로 설명하지 않겠습니다.</p> +</div> + +<p>우선 HTML을 살펴보겠습니다.</p> + +<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> + <div> + <label for="image_uploads">Choose images to upload (PNG, JPG)</label> + <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple> + </div> + <div class="preview"> + <p>No files currently selected for upload</p> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +form { + width: 580px; + background: #ccc; + margin: 0 auto; + padding: 20px; + border: 1px solid black; +} + +form ol { + padding-left: 0; +} + +form li, div > p { + background: #eee; + display: flex; + justify-content: space-between; + margin-bottom: 10px; + list-style-type: none; + border: 1px solid black; +} + +form img { + height: 64px; + order: 1; +} + +form p { + line-height: 32px; + padding-left: 10px; +} + +form label, form button { + background-color: #7F9CCB; + padding: 5px 10px; + border-radius: 5px; + border: 1px ridge black; + font-size: 0.8rem; + height: auto; +} + +form label:hover, form button:hover { + background-color: #2D5BA3; + color: white; +} + +form label:active, form button:active { + background-color: #0D3F8F; + color: white; +}</pre> +</div> + +<p>지금까지 봤던 것과 거의 같으므로 설명할 부분은 없겠습니다.</p> + +<p>이제 JavaScript 차례입니다.</p> + +<p>우선 양식의 파일 입력 칸과, <code>.preview</code> 클래스를 가진 {{htmlelement("div")}} 요소에 대한 참조를 가져옵니다. 그 후, {{htmlelement("input")}} 요소를 숨겨버립니다. 파일 입력 칸은 보통 못생겼고, 스타일을 적용하기도 어려우며 브라우저마다 디자인이 다르기 때문입니다. <code><input></code>은 연결된 {{htmlelement("label")}}을 클릭해도 활성화할 수 있으므로, 시각적으로 <code><input></code>을 숨긴 후 레이블에 버튼처럼 스타일을 적용해서, 파일을 업로드하고 싶은 경우 레이블을 누르라는 것을 알려주는 편이 낫습니다.</p> + +<pre class="brush: js notranslate">var input = document.querySelector('input'); +var preview = document.querySelector('.preview'); + +input.style.opacity = 0;</pre> + +<div class="note"> +<p><strong>참고:</strong> {{cssxref("visibility", "visibility: hidden")}}, {{cssxref("display", "display: none")}}로 숨길 경우 접근성 보조 기술이 파일 입력 칸을 상호작용 할 수 없는 상태라고 인식하기 때문에 {{cssxref("opacity")}}를 대신 사용합니다.</p> +</div> + +<p>그 다음으로는 입력 칸에 <a href="/ko/docs/Web/API/EventTarget/addEventListener">이벤트 수신기</a>를 부착해 그 값이 달라지는지(예제의 경우, 파일을 선택할 때) 지켜봅니다. 이벤트 수신기는 밑에서 만들 <code>updateImageDisplay()</code> 함수를 호출하게 됩니다.</p> + +<pre class="brush: js notranslate">input.addEventListener('change', updateImageDisplay);</pre> + +<p><code>updateImageDisplay()</code> 함수를 호출하면 다음 작업을 수행하게 됩니다.</p> + +<ul> + <li>{{jsxref("Statements/while", "while")}} 반복문을 사용해 <code><div></code>에 존재하는 이전 파일의 미리보기를 제거합니다.</li> + <li>선택한 모든 파일의 정보를 들고 있는 {{domxref("FileList")}} 객체를 가져온 후 <code>curFiles</code> 변수에 저장합니다.</li> + <li><code>curFiles.length</code>가 0과 같은지 검사해 아무런 파일도 선택하지 않았는지 검사합니다. 그렇다면, <code><div></code>에 아무런 파일도 선택하지 않았다는 메시지를 출력합니다.</li> + <li>반면, 파일을 선택한 경우라면, 각각의 파일을 순회하며 각각의 정보를 미리보기 <code><div></code>에 출력합니다. 참고할 점:</li> + <li>뒤에서 작성할 <code>validFileType()</code> 함수를 사용해 순회 중인 파일이 올바른 유형, 즉 <code>accept</code> 특성에 속한 파일인지 판별합니다.</li> + <li>올바른 파일이라면, + <ul> + <li><code><div></code> 안의 목록에 해당 파일의 이름과 크기를 항목으로 추가합니다. 이름은 <code>file.name</code>과 <code>file.size</code>로 가져옵니다. 또 다른 함수인 <code>returnFileSize()</code>는 파일 크기를 보기 좋게 바이트/KB/MB로 서식해 출력합니다. (브라우저는 바이트 크기로만 알려줍니다)</li> + <li>{{domxref("URL.createObjectURL", "URL.createObjectURL(curFiles[i])")}}를 호출해 이미지 미리보기 썸네일을 생성하고, 새로 만든 {{htmlelement("img")}} 태그의 {{htmlattrxref("src", "img")}}에 지정한 후, 이미지도 목록의 항목에 추가합니다.</li> + </ul> + </li> + <li>파일 유형이 유효하지 않은 경우 사용자에게 다른 파일을 선택해야 한다고 알려주는 메시지를 표시합니다.</li> +</ul> + +<pre class="brush: js notranslate">function updateImageDisplay() { + while(preview.firstChild) { + preview.removeChild(preview.firstChild); + } + + const curFiles = input.files; + if(curFiles.length === 0) { + const para = document.createElement('p'); + para.textContent = 'No files currently selected for upload'; + preview.appendChild(para); + } else { + const list = document.createElement('ol'); + preview.appendChild(list); + + for(const file of curFiles) { + const listItem = document.createElement('li'); + const para = document.createElement('p'); + if(validFileType(file)) { + para.textContent = `File name ${file.name}, file size ${returnFileSize(file.size)}.`; + const image = document.createElement('img'); + image.src = URL.createObjectURL(file); + + listItem.appendChild(image); + listItem.appendChild(para); + } else { + para.textContent = `File name ${file.name}: Not a valid file type. Update your selection.`; + listItem.appendChild(para); + } + + list.appendChild(listItem); + } + } +}</pre> + +<p><code>validFileType()</code> 함수는 매개변수로 {{domxref("File")}} 객체를 받아서, 그 파일의 <code>type</code>이 <code>fileTypes</code>의 아무 값과 동일한지 판별합니다. {{jsxref("Array.prototype.includes()")}}를 사용하여 type과 일치하는 값이 존재하면 <code>true</code>, 아니면 <code>false</code>를 반환합니다.</p> + +<pre class="brush: js notranslate">// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types +const fileTypes = [ + "image/apng", + "image/bmp", + "image/gif", + "image/jpeg", + "image/pjpeg", + "image/png", + "image/svg+xml", + "image/tiff", + "image/webp", + "image/x-icon" +]; + +function validFileType(file) { + return fileTypes.includes(file.type); +}</pre> + +<p><code>returnFileSize()</code> 함수는 숫자(현재 파일의 <code>size</code> 속성에서 가져온, 파일의 바이트 크기)를 받은 후, 읽기 좋게 바이트/KB/MB 단위로 서식을 적용합니다.</p> + +<pre class="brush: js notranslate">function returnFileSize(number) { + if(number < 1024) { + return number + 'bytes'; + } else if(number >= 1024 && number < 1048576) { + return (number/1024).toFixed(1) + 'KB'; + } else if(number >= 1048576) { + return (number/1048576).toFixed(1) + 'MB'; + } +}</pre> + +<p>결과는 다음과 같습니다. 한번 직접 파일을 선택해보세요.</p> + +<p>{{EmbedLiveSample('예제', '100%', 200)}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#file-upload-state-(type=file)', '<input type="file">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '<input type="file">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','capture attribute')}}</td> + <td>{{Spec2('HTML Media Capture')}}</td> + <td>initial <code>capture</code> attribute</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.input.input-file")}}</p> + +<h2 id="같이_보_기">같이 보 기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/File/Using_files_from_web_applications">웹 애플리케이션에서 파일 사용하기</a> — <code><input type="file"></code>과 File API에 대한 유용한 예제를 더 가지고 있습니다.</li> + <li><a href="/ko/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS 속성 호환성</a></li> +</ul> diff --git a/files/ko/web/html/element/input/index.html b/files/ko/web/html/element/input/index.html new file mode 100644 index 0000000000..8ff435e12d --- /dev/null +++ b/files/ko/web/html/element/input/index.html @@ -0,0 +1,865 @@ +--- +title: '<input>: 입력 요소' +slug: Web/HTML/Element/Input +tags: + - Element + - Forms + - HTML + - HTML forms + - HTML input tag + - Reference + - Web +translation_of: Web/HTML/Element/input +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><input></code> 요소</strong>는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다.</span> {{glossary("user agent", "사용자 에이전트")}}에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 입력 유형과 특성의 다양한 조합 가능성으로 인해, <code><input></code> 요소는 HTML에서 제일 강력하고 복잡한 요소 중 하나입니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div> + + + +<h2 id="<input>_유형"><code><input></code> 유형</h2> + +<p><code><input></code> 요소의 동작 방식은 {{htmlattrxref("type")}} 특성에 따라 현격히 달라지므로, 각각의 유형은 별도의 참고 문서에서 더 자세히 확인할 수 있습니다. 특성을 지정하지 않은 경우, 기본값은 <code>text</code>입니다.</p> + +<p>가능한 유형은 다음과 같습니다.</p> + +<table class="standard-table"> + <colgroup> + <col> + <col style="width: 50%;"> + <col> + </colgroup> + <thead> + <tr> + <th>유형</th> + <th>설명</th> + <th>기본 예제</th> + <th>Spec</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("input/button", "button")}}</td> + <td>기본 행동을 가지지 않으며 {{htmlattrxref("value", "input")}}을 레이블로 사용하는 푸시 버튼.</td> + <td id="examplebutton"> + <pre class="brush: html hidden notranslate"> +<input type="button" name="button" /></pre> + {{EmbedLiveSample("examplebutton",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/checkbox", "checkbox")}}</td> + <td>단일 값을 선택하거나 선택 해제할 수 있는 체크박스.</td> + <td id="examplecheckbox"> + <pre class="brush: html hidden notranslate"> +<input type="checkbox" name="checkbox"/></pre> + {{EmbedLiveSample("examplecheckbox",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/color", "color")}}</td> + <td>색을 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 색상 선택기를 열어줍니다.</td> + <td id="examplecolor"> + <pre class="brush: html hidden notranslate"> +<input type="color" name="color"/></pre> + {{EmbedLiveSample("examplecolor",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/date", "date")}}</td> + <td>날짜(연월일, 시간 없음)를 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력 등을 열어줍니다.</td> + <td id="exampledate"> + <pre class="brush: html hidden notranslate"> +<input type="date" name="date"/></pre> + {{EmbedLiveSample("exampledate",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/datetime-local", "datetime-local")}}</td> + <td>날짜와 시간을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없습니다. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력과, 시계 등을 열어줍니다.</td> + <td id="exampledtl"> + <pre class="brush: html hidden notranslate"> +<input type="datetime-local" name="datetime-local"/></pre> + {{EmbedLiveSample("exampledtl",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/email", "email")}}</td> + <td>이메일 주소를 편집할 수 있는 필드. 텍스트 입력 필드처럼 보이지만 유효성 검증 매개변수가 존재하며, 브라우저와 장치가 동적 키보드를 지원하는 경우 이메일에 적합한 키보드를 보여줍니다.</td> + <td id="exampleemail"> + <pre class="brush: html hidden notranslate"> +<input type="email" name="email"/></pre> + {{EmbedLiveSample("exampleemail",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/file", "file")}}</td> + <td>파일을 지정할 수 있는 컨트롤. {{htmlattrxref("accept", "input")}} 특성을 사용하면 허용하는 파일 유형을 지정할 수 있습니다.</td> + <td id="examplefile"> + <pre class="brush: html hidden notranslate"> +<input type="file" accept="image/*, text/*" name="file"/></pre> + {{EmbedLiveSample("examplefile",'100%',55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/hidden", "hidden")}}</td> + <td>보이지 않지만 값은 서버로 전송하는 컨트롤. 오른쪽 칸에 예제가 있지만 숨겨져서 안보이네요!</td> + <td></td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/image", "image")}}</td> + <td><code>src</code> 특성에 지정한 이미지로 나타나는 시각적 제출 버튼. 이미지의 {{anch('src')}}를 누락한 경우 {{anch('alt')}} 특성의 텍스트를 대신 보여줍니다.</td> + <td id="exampleimage"> + <pre class="brush: html hidden notranslate"> +<input type="image" name="image" src="" alt="image input"/></pre> + {{EmbedLiveSample("exampleimage",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/month", "month")}}</td> + <td>연과 월을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없습니다.</td> + <td id="examplemonth"> + <pre class="brush: html hidden notranslate"> +<input type="month" name="month"/></pre> + {{EmbedLiveSample("examplemonth",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/number", "number")}}</td> + <td> + <p>숫자를 입력하기 위한 컨트롤. 스피너를 표시하고 지원되는 기본 확인을 추가합니다. 몇몇 장치에서는 동적 키패드들과 숫자 키패드를 표시합니다.</p> + </td> + <td id="examplenumber"> + <pre class="brush: html hidden notranslate"> +<input type="number" name="number"/></pre> + {{EmbedLiveSample("examplenumber",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/password", "password")}}</td> + <td> + <p>값이 가려진 한줄 텍스트 필드. 사이트가 안전하지 않으면 사용자에게 경고합니다.</p> + </td> + <td id="examplepassword"> + <pre class="brush: html hidden notranslate"> +<input type="password" name="password"/></pre> + {{EmbedLiveSample("examplepassword",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/radio", "radio")}}</td> + <td> + <p>같은 {{anch('name')}} 값을 가진 여러개의 선택중에서 하나의 값을 선택하게 하는 라디오 버튼입니다.</p> + </td> + <td id="exampleradio"> + <pre class="brush: html hidden notranslate"> +<input type="radio" name="radio"/></pre> + {{EmbedLiveSample("exampleradio",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/range", "range")}}</td> + <td> + <p>값이 가려진 숫자를 입력하는 컨트롤. 디폴트 값이 중간값인 범위 위젯으로 표시합니다. 접속사 {{anch('min')}} 와 {{anch('max')}} 사이에 사용되며 수용가능한 값의 범위를 정의합니다.</p> + </td> + <td id="examplerange"> + <pre class="brush: html hidden notranslate"> +<input type="range" name="range" min="0" max="25"/></pre> + {{EmbedLiveSample("examplerange",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/reset", "reset")}}</td> + <td>양식의 내용을 디폴트값(기본값)으로 초기화하는 버튼. 권장되지 않습니다.</td> + <td id="examplereset"> + <pre class="brush: html hidden notranslate"> +<input type="reset" name="reset"/></pre> + {{EmbedLiveSample("examplereset",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/search", "search")}}</td> + <td> + <p>검색문자열을 입력하는 한줄 텍스트 필드. 줄바꿈 문자는 입력값에서 자동으로 제거됩니다. 지원 브라우저에서 필드를 클리어하기 위해 사용되는 삭제 아이콘이 포함됩니다. 동적 키패드들이 있는 몇몇 장치에서 엔터키 대신에 검색 아이콘을 표시합니다.</p> + </td> + <td id="examplesearch"> + <pre class="brush: html hidden notranslate"> +<input type="search" name="search"/></pre> + {{EmbedLiveSample("examplesearch",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/submit", "submit")}}</td> + <td>양식을 전송하는 버튼</td> + <td id="examplesubmit"> + <pre class="brush: html hidden notranslate"> +<input type="submit" name="submit"/></pre> + {{EmbedLiveSample("examplesubmit",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/tel", "tel")}}</td> + <td>전화번호를 입력하는 컨트롤. 몇몇 장치에서 동적 키패드들과 전화번호 입력기를 표시한다.</td> + <td id="exampletel"> + <pre class="brush: html hidden notranslate"> +<input type="tel" name="tel"/></pre> + {{EmbedLiveSample("exampletel",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/text", "text")}}</td> + <td> + <p>디폴트 값. 한줄의 텍스트 필드입니다. 새줄 문자는 입력값으로부터 자동으로 제거됩니다.</p> + </td> + <td id="exampletext"> + <pre class="brush: html hidden notranslate"> +<input type="text" name="text"/></pre> + {{EmbedLiveSample("exampletext",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/time", "time")}}</td> + <td>시간대가 없는 시간값을 입력하는 콘트롤</td> + <td id="exampletime"> + <pre class="brush: html hidden notranslate"> +<input type="time" name="time"/></pre> + {{EmbedLiveSample("exampletime",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/url", "url")}}</td> + <td>URL을 입력하는 필드. 텍스트 입력처럼 보이지만, 검증 매개변수가 있습니다. 동적 키보드들을 지원하는 브라우저와 장치들에 관련된 키보드가 있습니다.</td> + <td id="exampleurl"> + <pre class="brush: html hidden notranslate"> +<input type="url" name="url"/></pre> + {{EmbedLiveSample("exampleurl",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/week", "week")}}</td> + <td>시간대가 없는 주-년 값과 주의 값을 구성하는 날짜를 입력하는 컨트롤입니다.</td> + <td id="exampleweek"> + <pre class="brush: html hidden notranslate"> +<input type="week" name="week"/></pre> + {{EmbedLiveSample("exampleweek",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <th colspan="4">퇴화한 값</th> + </tr> + <tr> + <td>{{HTMLElement("input/datetime", "datetime")}}</td> + <td> + <p>{{deprecated_inline}} {{obsolete_inline}} UTC 시간대에 기반한 날짜와 시간(시,분,초 그리고 초의 분수)을 입력하는 콘트롤입니다.</p> + </td> + <td id="exampledatetime"> + <pre class="brush: html hidden notranslate"> +<input type="datetime" name="datetime"/></pre> + {{EmbedLiveSample("exampledatetime",200,75,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + </tbody> +</table> + +<h2 id="속성">속성</h2> + +<p><code><input></code> 요소가 강력한 이유는 바로 다양한 속성 때문입니다. 그 중에서도, 위의 표에서 확인할 수 있는 {{htmlattrxref("type", "input")}} 속성이 제일 중요합니다. 모든 <code><input></code> 요소는 유형에 상관하지 않고 {{domxref("HTMLInputElement")}} 인터페이스에 기반하므로, 기술적으로는 모든 <code><input></code>이 동일한 속성을 가집니다. 그러나 사실 대부분의 속성은 일부 유형에서만 효과를 보입니다. 게다가, 어떤 속성은 유형별로 그 영향이 달라집니다.</p> + +<p>여기에서는 모든 속성값들에 대해 간략한 설명을 담은 표를 제공합니다. 이 표 다음에는 각각의 속성을 더욱 상세하게 설명하는 목록이 나오는데, 그들이 연관된 input 유형과 함께 나옵니다. 대부분의 혹은 모든 input 유형에 공통적인 속성들은 그 아래 더욱 상세하게 설명되어 있습니다. 몇몇 input 유형에만 특정하게 해당하는 속성들이나 모든 유형에 공통적으로 해당하지만 특정 유형에 사용될 때 특정한 행동양식을 나타내는 속성들은 그 유형의 해당 페이지에 대신 기술되어 있습니다. 이 요소에는 글로벌 속성들도 포함됩니다. input에 관련된 특별히 중요한 속성들은 하이라이트로 표시되었습니다. </p> + +<table class="standard-table"> + <caption>{{htmlelement('input')}} 요소는 전역 속성(Global Attributes)과 다음 특성을 포함합니다.</caption> + <thead> + <tr> + <th scope="col">특성</th> + <th scope="col">유형</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{anch('htmlattrdefaccept', 'accept')}}</td> + <td>file</td> + <td>파일을 업로드 컨트롤에서 기대하는 파일 유형을 암시</td> + </tr> + <tr> + <td>{{anch('htmlattrdefalt', 'alt')}}</td> + <td>image</td> + <td>이미지 유형에 대한 대체 속성. accessibiltiy 측면에서 필요.</td> + </tr> + <tr> + <td>{{anch('htmlattrdefautocomplete', 'autocomplete')}}</td> + <td>all</td> + <td>양식 자동생성 기능 (form autofill) 암시</td> + </tr> + <tr> + <td>{{anch('htmlattrdefautofocus', 'autofocus')}}</td> + <td>all</td> + <td>페이지가 로딩될때 양식 제어에 오토포커스</td> + </tr> + <tr> + <td>{{anch('htmlattrdefcapture', 'capture')}}</td> + <td>file</td> + <td>파일 업로드 제어에서 input 방식에서 미디어 capture </td> + </tr> + <tr> + <td>{{anch('htmlattrdefchecked', 'checked')}}</td> + <td>radio, checkbox</td> + <td>커맨드나 컨트롤이 체크 되었는지의 여부</td> + </tr> + <tr> + <td>{{anch('htmlattrdefdirname', 'dirname')}}</td> + <td>text, search</td> + <td>양식 전송시 요소의 방향성을 전송할 때 양식 필드의 Name</td> + </tr> + <tr> + <td>{{anch('htmlattrdefdisabled', 'disabled')}}</td> + <td>all</td> + <td>양식 컨트롤이 비활성화되었는지의 여부</td> + </tr> + <tr> + <td>{{anch('htmlattrdefform', 'form')}}</td> + <td>all</td> + <td>컨트롤을 양식 요소와 연결</td> + </tr> + <tr> + <td>{{anch('htmlattrdefformaction', 'formaction')}}</td> + <td>image, submit</td> + <td>양식 전송시 URL 사용하기</td> + </tr> + <tr> + <td>{{anch('htmlattrdefformenctype', 'formenctype')}}</td> + <td>image, submit</td> + <td>양식의 데이터 인코딩 유형이 양식 전송시 사용될 것</td> + </tr> + <tr> + <td>{{anch('htmlattrdefformmethod', 'formmethod')}}</td> + <td>image, submit</td> + <td>양식 전송시 HTTP 방식을 사용</td> + </tr> + <tr> + <td>{{anch('htmlattrdefformnovalidate', 'formnovalidate')}}</td> + <td>image, submit</td> + <td>양식 전송시 양식 컨트롤 확인을 무시하기</td> + </tr> + <tr> + <td>{{anch('htmlattrdefformtarget', 'formtarget')}}</td> + <td>image, submit</td> + <td>양식 전송시 브라우징 맥락</td> + </tr> + <tr> + <td>{{anch('htmlattrdefheight', 'height')}}</td> + <td>image</td> + <td>이미지 높이에서 <code>height</code> 속성과 같음</td> + </tr> + <tr> + <td>{{anch('htmlattrdeflist', 'list')}}</td> + <td>almost all</td> + <td>datalist 자동입력 옵션의 id 속성값</td> + </tr> + <tr> + <td>{{anch('htmlattrdefmax', 'max')}}</td> + <td>numeric types</td> + <td>최대값</td> + </tr> + <tr> + <td>{{anch('htmlattrdefmaxlength', 'maxlength')}}</td> + <td>password, search, tel, text, url</td> + <td><code>value</code>의 최대 길이 (문자수) </td> + </tr> + <tr> + <td>{{anch('htmlattrdefmin', 'min')}}</td> + <td>numeric types</td> + <td>최소값</td> + </tr> + <tr> + <td>{{anch('htmlattrdefminlength', 'minlength')}}</td> + <td>password, search, tel, text, url</td> + <td><code>value</code>의 최소 길이 (문자수)</td> + </tr> + <tr> + <td>{{anch('htmlattrdefmultiple', 'multiple')}}</td> + <td>email, file</td> + <td>불리언값. 여러 값을 허용할지의 여부</td> + </tr> + <tr> + <td>{{anch('htmlattrdefname', 'name')}}</td> + <td>all</td> + <td>input 양식 컨트롤의 이름. 이름/값 짝(name/value pair)의 일부로서 양식과 함께 전송된다</td> + </tr> + <tr> + <td>{{anch('htmlattrdefpattern', 'pattern')}}</td> + <td>password, text, tel</td> + <td><code>value</code> 가 유효하기 위해 일치해야 하는 패턴</td> + </tr> + <tr> + <td>{{anch('htmlattrdefplaceholder', 'placeholder')}}</td> + <td>password, search, tel, text, url</td> + <td>양식 컨트롤이 비어있는 때 양식 컨트롤에 나타나는 내용</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/HTML/Attributes/readonly">readonly</a></td> + <td>almost all</td> + <td>불리언값. 이 값은 수정이 불가능함</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></td> + <td>almost all</td> + <td>불리언값. 양식이 전송되기 위해서 반드시 입력하거나 확인이 필요한 값</td> + </tr> + <tr> + <td>{{anch('htmlattrdefsize', 'size')}}</td> + <td>email, password, tel, text</td> + <td>컨트롤의 크기</td> + </tr> + <tr> + <td>{{anch('htmlattrdefsrc', 'src')}}</td> + <td>image</td> + <td>이미지 출처의 주소에서 <code>src</code> 와 같은 속성</td> + </tr> + <tr> + <td>{{anch('htmlattrdefstep', 'step')}}</td> + <td>numeric types</td> + <td>유효한 증분적인 (Incremental)값</td> + </tr> + <tr> + <td>{{anch('htmlattrdeftype', 'type')}}</td> + <td>all</td> + <td>input 양식 컨트롤의 유형</td> + </tr> + <tr> + <td>{{anch('htmlattrdefvalue', 'value')}}</td> + <td>all</td> + <td>양식 컨트롤의 현재 값. 이름/값 짝(name/value pair)의 일부로서 양식과 함께 전송된다</td> + </tr> + <tr> + <td>{{anch('htmlattrdefwidth', 'width')}}</td> + <td>image</td> + <td>이미지의 <code>width</code> 속성과 같다</td> + </tr> + </tbody> +</table> + +<p>A few additional non-standard attributes are listed following the descriptions of the standard attributes</p> + +<h3 id="개별_속성">개별 속성</h3> + +<dl> + <dt id="htmlattrdefaccept">{{htmlattrdef("accept")}}</dt> + <dd> + <p>Valid for the <code>file</code> input type only, the <code>accept</code> property defines which file types are selectable in a <code>file</code> upload control. See the {{HTMLElement("input/file", "file")}} input type.</p> + </dd> + <dt id="htmlattrdefalt">{{htmlattrdef("alt")}}</dt> + <dd> + <p>Valid for the <code>image</code> button only, the alt attribute provides alternative text for the image, displaying the value of the attribute if the image {{anch("src")}} is missing or otherwise fails to load. See the {{HTMLElement("input/image", "image")}} input type.</p> + </dd> + <dt id="htmlattrdefautocomplete">{{htmlattrdef("autocomplete")}}</dt> + <dd> + <p><strong>Not</strong> a Boolean attribute, the <code><a href="/en-US/docs/Web/HTML/Attributes/autocomplete">autocomplete</a></code> attribute takes as its value a space separated string that describes what, if any, type of autocomplete functionality the input should provide. A typical implementation of autocomplete simply recalls previous values entered in the same input field, but more complex forms of autocomplete can exist. For instance, a browser could integrate with a device's contacts list to autocomplete email addresses in an email input field. See {{SectionOnPage("/en-US/docs/Web/HTML/Attributes/autocomplete", "Values")}} for permitted values.</p> + + <p>The <code>autocomplete</code> attribute is valid on <code>hidden</code>, <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code>, <code>color</code> and <code>password</code>. This attribute has no effect on input types that do not return numeric or text data, being valid for all input types except <code>checkbox</code>, <code>radio</code>, <code>file</code>, or any of the button types. See <a href="/en-US/docs/Web/HTML/Attributes/autocomplete">The HTML autocomplete attribute</a> for additional information, including information on password security and how <code>autocomplete</code> is slightly different for <code>hidden</code> than for other input types.</p> + </dd> + <dt id="htmlattrdefautofocus">{{htmlattrdef("autofocus")}}</dt> + <dd> + <p>A Boolean attribute which, if present, indicates that the input should automatically have focus when the page has finished loading (or when the {{HTMLElement("dialog")}} containing the element has been displayed).</p> + + <div class="note"> + <p><strong>Note:</strong> An element with the <code>autofocus</code> attribute may gain focus before the {{domxref("DOMContentLoaded")}} event is fired.</p> + </div> + + <p>No more than one element in the document may have the <code>autofocus</code> attribute, and <code>autofocus</code> cannot be used on inputs of type <code>hidden</code>, because hidden inputs can't be focused. If put on more than one element, the first one with the attribute receives focus .</p> + + <div class="warning"> + <p><strong>Warning:</strong> Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. When <code>autofocus</code> is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.</p> + </div> + + <p>For better usability, avoid using <code>autofocus</code>. Automatically focusing on a form control can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.</p> + </dd> + <dt id="htmlattrdefcapture">{{htmlattrdef("capture")}}</dt> + <dd> + <p>Introduced in the HTML Media Capture specification and valid for the <code>file</code> input type only, the <code>capture</code> attribute defines which media - microphone, video, or camera - should be used to capture a new file for upload with <code>file</code> upload control in supporting scenarios. See the {{HTMLElement("input/file", "file")}} input type.</p> + </dd> + <dt id="htmlattrdefchecked">{{htmlattrdef("checked")}}</dt> + <dd> + <p>Valid for both <code>radio</code> and <code>checkbox</code> types, <code>checked</code> is a Boolean attribute. If present on a radio type, it indicates that that radio button is the currently selected one in the group of same-named radio buttons. If present on a <code>checkbox</code> type, it indicates that the checkbox is checked by default (when the page loads). It does <em>not</em> indicate whether this checkbox is currently checked: if the checkbox’s state is changed, this content attribute does not reflect the change. (Only the <a href="/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code>’s <code>checked</code> IDL attribute</a> is updated.)</p> + + <div class="note"> + <p><strong>Note:</strong> Unlike other input controls, a checkboxes and radio buttons value are only included in the submitted data if they are currently <code>checked</code>. If they are, the name and the value(s) of the checked controls are submitted.</p> + + <p>For example, if a checkbox whose <code>name</code> is <code>fruit</code> has a <code>value</code> of <code>cherry</code>, and the checkbox is checked, the form data submitted will include <code>fruit=cherry</code>. If the checkbox isn't active, it isn't listed in the form data at all. The default <code>value</code> for checkboxes and radio buttons is <code>on</code>.</p> + </div> + </dd> + <dt id="htmlattrdefdirname">{{htmlattrdef("dirname")}}</dt> + <dd> + <p>Valid for <code>text</code> and <code>search</code> input types only, the <code>dirname</code> attribute enables the submission of the directionality of the element. When included, the form control will submit with two name/value pairs: the first being the {{anch('name')}} and {{anch('value')}}, the second being the value of the <code>dirname</code> as the name with the value of <code>ltr</code> or <code>rtl</code> being set by the browser.</p> + + <pre class="notranslate"><code class="html"><form action="page.html" method="post"> + <label>Fruit: <input type="text" name="fruit" dirname="fruit.dir" value="cherry"></label> + <input type="submit"/> +</form> +<!-- page.html?fruit=cherry&fruit.dir=ltr --></code> +</pre> + + <p>When the form above is submitted, the input cause both the <code>name</code> / <code>value</code> pair of <code>fruit=cherry</code> and the <code>dirname</code> / direction pair of <code>fruit.dir=ltr</code> to be sent.</p> + </dd> + <dt id="htmlattrdefdisabled">{{htmlattrdef("disabled")}}</dt> + <dd> + <p>A Boolean attribute which, if present, indicates that the user should not be able to interact with the input. Disabled inputs are typically rendered with a dimmer color or using some other form of indication that the field is not available for use.</p> + + <p>Specifically, disabled inputs do not receive the {{event("click")}} event, and disabled inputs are not submitted with the form.</p> + + <div class="note"> + <p><strong>Note:</strong> Although not required by the specification, Firefox will by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of an <code><input></code> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p> + </div> + </dd> + <dt id="htmlattrdefform">{{htmlattrdef("form")}}</dt> + <dd> + <p>A string specifying the {{HTMLElement("form")}} element with which the input is associated (that is, its <strong>form owner</strong>). This string's value, if present, must match the {{htmlattrxref("id")}} of a <code><form></code> element in the same document. If this attribute isn't specified, the <code><input></code> element is associated with the nearest containing form, if any.</p> + + <p>The <code>form</code> attribute lets you place an input anywhere in the document but have it included with a form elsewhere in the document.</p> + + <div class="note"> + <p><strong>Note:</strong> An input can only be associated with one form.</p> + </div> + </dd> + <dt id="htmlattrdefformaction">{{htmlattrdef('formaction')}}</dt> + <dd> + <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p> + </dd> + <dt id="htmlattrdefformenctype">{{htmlattrdef('formenctype')}}</dt> + <dd> + <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p> + </dd> + <dt id="htmlattrdefformmethod">{{htmlattrdef('formmethod')}}</dt> + <dd> + <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p> + </dd> + <dt id="htmlattrdefformnovalidate">{{htmlattrdef('formnovalidate')}}</dt> + <dd> + <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p> + </dd> + <dt id="htmlattrdefformtarget">{{htmlattrdef('formtarget')}}</dt> + <dd> + <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p> + </dd> + <dt id="htmlattrdefheight">{{htmlattrdef("height")}}</dt> + <dd> + <p>Valid for the <code>image</code> input button only, the <code>height</code> is the height of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.</p> + </dd> + <dt id="htmlattrdefheight">{{htmlattrdef("id")}}</dt> + <dd> + <p>Global attribute valid for all elements, including all the input types, it defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking. The value is used as the value of the {{htmlelement('label')}}'s <code>for</code> attribute to link the label with the form control. See the {{anch('the label element')}} below.</p> + </dd> + <dt id="htmlattrdefheight">{{htmlattrdef("inputmode")}}</dt> + <dd> + <p>Global value valid for all elements, it provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Values include none<br> + <code>text</code>, <code>tel</code>, <code>url</code>, <code>email</code>, <code>numeric</code>, <code>decimal</code>, and <code>search</code></p> + </dd> + <dt id="htmlattrdeflist">{{htmlattrdef("list")}}</dt> + <dd id="datalist"> + <p>The values of the list attribute is the {{domxref("Element.id", "id")}} of a {{HTMLElement("datalist")}} element located in the same document. The <code><datalist></code> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the {{htmlattrxref("type", "input")}} are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.</p> + + <pre class="brush: html hidden notranslate"><datalist id="colorsxx"> + <option>#ff0000</option> + <option>#ee0000</option> + <option>#dd0000</option> + <option>#cc0000</option> + <option>#bb0000</option> +</datalist> +<datalist id="numbersxx"> + <option>0</option> + <option>2</option> + <option>4</option> + <option>8</option> + <option>16</option> + <option>32</option> + <option>64</option> +</datalist> +<datalist id="fruitsxx"> + <option>cherry</option> + <option>banana</option> + <option>mango</option> + <option>orange</option> + <option>blueberry</option> +</datalist> +<datalist id="urlsxx"> + <option>https://developer.mozilla.org</option> + <option>https://caniuse.com/</option> + <option>https://mozilla.com</option> + <option>https://mdn.github.io</option> + <option>https://www.youtube.com/user/firefoxchannel</option> +</datalist> + +<p><label for="textx">Text</label> <input type="text" list="fruitsxx" id="textx"/></p> +<p><label for="colorx">Color</label> <input type="color" list="colorsxx" id="colorx"/></p> +<p><label for="rangex">Range</label> <input type="range" min="0" max="64" list="numbersxx" id="rangex"/></p> +<p><label for="numberx">Number</label> <input type="number" min="0" max="64" list="numbersxx" id="numberx"/></p> +<p><label for="urlx">URL</label> <input type="url" list="urlsxx" id="urlx"/></p></pre> + + <p>{{EmbedLiveSample("datalist",400,275,"","", "nobutton")}}</p> + + <p>It is valid on <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code>, and <code>color.</code>Per the specifications, the <code>list</code> attribute is not supported by the <code>hidden</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or any of the button types.</p> + + <p>Depending on the browser, the user may see a custom color palette suggested, tic marks along a range, or even a input that opens like a select but allows for non-listed values. Check out the <a href="/en-US/docs/Web/HTML/Element/datalist#Browser_compatibility">browser compatibility table</a> for the other input types.</p> + + <p>See the {{htmlelement('datalist')}} element.</p> + </dd> + <dt id="htmlattrdefmax"><a href="/en-US/docs/Web/HTML/Attributes/max">{{htmlattrdef("max")}}</a></dt> + <dd> + <p>Valid for <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, and <code>range</code>, it defines the greatest value in the range of permitted values. If the {{htmlattrxref("value", "input")}} entered into the element exceeds this, the element fails <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. If the value of the <code>max</code> attribute isn't a number, then the element has no maximum value.</p> + </dd> + <dt id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</dt> + <dd> + <p>Valid for <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, and <code>password</code>, it defines the maximum number of characters (as UTF-16 code units) the user can enter into the field. This must be an integer value 0 or higher. If no <code>maxlength</code> is specified, or an invalid value is specified, the field has no maximum length. This value must also be greater than or equal to the value of <code>minlength</code>.</p> + + <p>The input will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is greater than <code>maxlength</code> UTF-16 code units long. By default, browsers prevent users from entering more characters than allowed by the <code>maxlength</code> attribute. See {{anch("Client-side validation")}} for more information.</p> + </dd> + <dt id="htmlattrdefmin">{{htmlattrdef("min")}}</dt> + <dd> + <p>Valid for <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, and <code>range</code>, it defines the most negative value in the range of permitted values. If the {{htmlattrxref("value", "input")}} entered into the element is less than this this, the element fails <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. If the value of the <code>min</code> attribute isn't a number, then the element has no minimum value.</p> + + <p>This value must be less than or equal to the value of the <code>max</code> attribute. If the <code>min</code> attribute is present by is not specified or is invalid, no <code>min</code> value is applied. If the <code>min</code> attribute is valid and a non-empty value is less than the minimum allowed by the <code>min</code> attribute, constraint validation will prevent form submission. See {{anch("Client-side validation")}} for more information.</p> + </dd> + <dt id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</dt> + <dd> + <p>Valid for <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, and <code>password</code>, it defines the minimum number of characters (as UTF-16 code units) the user can enter into the entry field. This must be an non-negative integer value smaller than or equal to the value specified by <code>maxlength</code>. If no <code>minlength</code> is specified, or an invalid value is specified, the input has no minimum length.</p> + + <p>The input will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is fewer than <code>minlength</code> UTF-16 code units long, preventing form submission. See {{anch("Client-side validation")}} for more information.</p> + </dd> + <dt id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</dt> + <dd> + <p>The Boolean multiple attribute, if set, means the user can enter comma separated email addresses in the email widget or can choose more than one file with the <code>file</code> input. See the {{HTMLElement("input/email", "email")}} and {{HTMLElement("input/file", "file")}} input type.</p> + </dd> + <dt id="htmlattrdefname">{{htmlattrdef("name")}}</dt> + <dd> + <p>A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted.</p> + + <h5 id="Whats_in_a_name">What's in a name</h5> + + <p>Consider the <code>name</code> a required attribute (even though it's not). If an input has no <code>name</code> specified, or <code>name</code> is empty, the input's value is not submitted with the form. (Disabled controls, unchecked radio buttons, unchecked checkboxes, and reset buttons are also not sent.)</p> + + <p>There are two special cases:</p> + + <ol> + <li><code>_charset_</code> : If used as the name of an <code><input></code> element of type <code><a href="/en-US/docs/Web/HTML/Element/input/hidden">hidden</a></code>, the input's <code>value</code> is automatically set by the <a class="glossaryLink" href="/en-US/docs/Glossary/user_agent" title="user agent: A user agent is a computer program representing a person, for example, a browser in a Web context.">user agent</a> to the character encoding being used to submit the form.</li> + <li><code>isindex</code>: For historical reasons, the name <code><a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-name">isindex</a></code> is not allowed.</li> + </ol> + + <h5 id="name_and_radio_buttons"><code>name</code> and radio buttons</h5> + + <p>The {{anch('name')}} attribute creates a unique behavior for radio buttons.</p> + + <p>Only one radio button in a same-named group of radio buttons can be checked at a time. Selecting any radio button in that group automatically deselects any currently-selected radio button in the same group. The value of that one checked radio button is sent along with the name if the form is submitted,</p> + + <p>When tabbing into a series of same-named group of radio buttons, if one is checked, that one will receive focus. If they aren't grouped together in source order, if one of the group is checked, tabbing into the group starts when the first one in the group is encountered, skipping all those that aren't checked. In other words, if one is checked, tabbing skips the unchecked radio buttons in the group. If none are checked, the radio button group receives focus when the first button in the same name group is reached.</p> + + <p>Once one of the radio buttons in a group has focus, using the arrow keys will navigate thru all the radio buttons of the same name, even if the radio buttons are not grouped together in the source order.</p> + + <h5 id="domxrefHTMLFormElement.elements">{{domxref("HTMLFormElement.elements")}}</h5> + + <p>When an input element is given a <code>name</code>, that name becomes a property of the owning form element's {{domxref("HTMLFormElement.elements")}} property. If you have an input whose <code>name</code> is set to <code>guest</code> and another whose <code>name</code> is <code>hat-size</code>, the following code can be used:</p> + + <pre class="brush: js notranslate">let form = document.querySelector("form"); + +let guestName = form.elements.guest; +let hatSize = form.elements["hat-size"]; +</pre> + + <p>When this code has run, <code>guestName</code> will be the {{domxref("HTMLInputElement")}} for the <code>guest</code> field, and <code>hatSize</code> the object for the <code>hat-size</code> field.</p> + + <div class="warning"> + <p><strong>Warning:</strong> You should avoid giving form elements a <code>name</code> that corresponds to a built-in property of the form, since you would then override the predefined property or method with this reference to the corresponding input.</p> + </div> + </dd> + <dt id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</dt> + <dd> + <div id="pattern-include"> + <p>The <code>pattern</code> attribute, when specified, is a regular expression that the input's {{htmlattrxref("value")}} must match in order for the value to pass <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. It must be a valid JavaScript regular expression, as used by the {{jsxref("RegExp")}} type, and as documented in our <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">guide on regular expressions</a>; the <code>'u'</code> flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.</p> + + <p>If the <code>pattern</code> attribute is present but is not specified or is invalid, no regular expression is applied and this attribute is ignored completely. If the pattern attribute is valid and a non-empty value does not match the pattern, constraint validation will prevent form submission.</p> + + <div class="note"> + <p><strong>Tip:</strong> If using the <code>pattern</code> attribute, inform the user about the expected format by including explanatory text nearby. You can also include a {{htmlattrxref("title", "input")}} attribute to explain what the requirements are to match the pattern; most browsers will display this title as as a tooltip The visible explanation is required for accessibilty. The tooltip is an enhancement.</p> + </div> + </div> + + <p>See {{anch("Client-side validation")}} for more information.</p> + </dd> + <dt id="htmlattrdefplaceholder">{{htmlattrdef("placeholder")}}</dt> + <dd> + <p>The <code>placeholder</code> attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text <em>must not</em> include carriage returns or line feeds.</p> + + <div class="note"> + <p><strong>Note:</strong> The <code>placeholder</code> attribute is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}} for more information.</p> + </div> + </dd> + <dt id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</dt> + <dd> + <p>A Boolean attribute which, if present, indicates that the user should not be able to edit the value of the input. The <code>readonly</code> attribute is supported <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, and <code>password</code> input types.</p> + + <p>See the <a href="/en-US/docs/Web/HTML/Attributes/readonly">HTML attribute: <code>readonly</code></a> for more information.</p> + </dd> + <dt id="htmlattrdefrequired">{{htmlattrdef("required")}}</dt> + <dd> + <p><code>required</code> is a Boolean attribute which, if present, indicates that the user must specify a value for the input before the owning form can be submitted. The <code>required</code> attribute is supported <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, and <code>file</code>.</p> + + <p>See {{anch("Client-side validation")}} and the <a href="/en-US/docs/Web/HTML/Attributes/required">HTML attribute: <code>required</code></a> for more information.</p> + </dd> + <dt id="htmlattrdefsize">{{htmlattrdef("size")}}</dt> + <dd>Valid for <code>email</code>, <code>password</code>, <code>tel</code>, and text <code>input</code> types only. Specifies how much of the input is shown. Basically creates same result as setting CSS <code>width</code> property with a few specialities. The actual unit of the value depends on the input type. For password and text it's number of characters (or <code>em</code> units) and <code>pixel</code>s for others. CSS width takes precedence over size attribute.</dd> + <dt id="htmlattrdefsrc">{{htmlattrdef("src")}}</dt> + <dd> + <p>Valid for the <code>image</code> input button only, the <code>src</code> is string specifying the URL of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.</p> + </dd> + <dt id="htmlattrdefstep">{{htmlattrdef("step")}}</dt> + <dd> + <div id="step-include"> + <p>Valid for the numeric input types, including <code>number</code>, date/time input types, and <code>range</code>, the <code><a href="/en-US/docs/Web/HTML/Attributes/step">step</a></code> attribute is a number that specifies the granularity that the value must adhere to.</p> + + <p>If not explicitly included, <code>step</code> defaults to 1 for <code>number</code> and <code>range</code>, and 1 unit type (second, week, month, day) for the date/time input types. The value can must be a positive number - integer or float -- or the special value <code>any</code>, which means no stepping is implied, and any value is allowed (barring other constraints, such as <code>{{anch("min")}}</code> and <code>{{anch("max")}}</code>).</p> + + <p>If <code>any</code> is not explicity set, valid values for the <code>number</code>, date/time input types, and <code>range</code> input types are equal to the basis for stepping - the <code>{{anch("min")}}</code> value and increments of the step value, up to the <code>{{anch("max")}}</code> value, if specified. For example, if we have <code><input type="number" min="10" step="2"></code> any even integer, 10 or great, is valid. If omitted, <code><input type="number"></code>, any integer is valid, but floats, like 4.2, are not valid, as <code>step</code> defaults to 1. For 4.2 to be valid, <code>step</code> would have had to be set to <code>any</code>, 0.1, 0.2, or any the min value would have had to be a number ending in .2, such as <code><input type="number" min="-5.2"></code></p> + + <div class="note"> + <p><strong>Note:</strong> When the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in contraint validation and will match the :invalid pseudoclass</p> + </div> + </div> + + <p>The default stepping value for <code>number</code> inputs is 1, allowing only integers to be entered, <em>unless</em> the stepping base is not an integer. The default stepping value for <code>time</code> is 1 second, with 900 being equal to 15 minutes.</p> + + <p>See {{anch("Client-side validation")}} for more information.</p> + </dd> + <dt id="htmlattrdeftype">{{htmlattrdef("tabindex")}}</dt> + <dd> + <p>Global attribute valid for all elements, including all the input types, an integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. As all input types except for input of type hidden are focusable, this attribute should not be used on form controls, because doing so would require the management of the focus order for all elements within the document with the risk of harming usability and accessibility if done incorrectly.</p> + </dd> + <dt id="htmlattrdefformenctype">{{htmlattrdef('title')}}</dt> + <dd> + <p>Global attribute valid for all elements, including all input types, containing a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip. The title should NOT be used as the primary explanation of the purpose of the form control. Instead, use the {{htmlelement('label')}} element with a <code>for</code> attribute set to the form control's {{htmlattrdef('id')}} attribute. See {{anch("Labels")}} below.</p> + </dd> + <dt id="htmlattrdeftype">{{htmlattrdef("type")}}</dt> + <dd> + <p>A string specifying the type of control to render. For example, to create a checkbox, a value of <code>checkbox</code> is used. If omitted (or an unknown value is specified), the input type <code>text</code> is used, creating a plaintext input field.</p> + + <p>Permitted values are listed in {{anch("<input> types")}} above.</p> + </dd> + <dt id="htmlattrdefvalue">{{htmlattrdef("value")}}</dt> + <dd> + <p>The input control's value. When specified in the HTML, this is the initial value, and from then on it can be altered or retrieved at any time using JavaScript to access the respective {{domxref("HTMLInputElement")}} object's <code>value</code> property. The <code>value</code> attribute is always optional, though should be considered mandatory for <code>checkbox</code>, <code>radio</code>, and <code>hidden</code>.</p> + </dd> + <dt id="htmlattrdefwidth">{{htmlattrdef("width")}}</dt> + <dd> + <p>Valid for the <code>image</code> input button only, the <code>width</code> is the width of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.</p> + </dd> +</dl> + +<h3 id="Non-standard_attributes">Non-standard attributes</h3> + +<p>The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can't be helped.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>A string indicating whether or not autocorrect is <code>on</code> or <code>off</code>. <strong>Safari only.</strong></td> + </tr> + <tr> + <td><code>{{anch("incremental")}}</code></td> + <td>Whether or not to send repeated {{event("search")}} events to allow updating live search results while the user is still editing the value of the field. <strong>WebKit and Blink only (Safari, Chrome, Opera, etc.).</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>A string indicating the type of action that will be taken when the user presses the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. <strong>Firefox for Android only.</strong></td> + </tr> + <tr> + <td><code>{{anch("orient")}}</code></td> + <td>Sets the orientation of the range slider. <strong>Firefox only.</strong></td> + </tr> + <tr> + <td><code>{{anch("results")}}</code></td> + <td>The maximum number of items that should be displayed in the drop-down list of previous search queries. <strong>Safari only.</strong></td> + </tr> + <tr> + <td><code>{{anch("webkitdirectory")}}</code></td> + <td>A Boolean indicating whether or not to only allow the user to choose a directory (or directories, if <code>{{anch("multiple")}}</code> is also present)</td> + </tr> + </tbody> +</table> + +<dl> + <dt>{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</dt> + <dd>{{page("/en-US/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</dd> + <dt>{{htmlattrdef("incremental")}} {{non-standard_inline}}</dt> + <dd>{{page("/en-US/docs/Web/HTML/Element/input/search", "incremental-include")}}</dd> + <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt> + <dd>{{page("/en-US/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</dd> + <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt> + <dd>{{page("/en-US/docs/Web/HTML/Element/input/range", "orient-include")}}</dd> + <dt>{{htmlattrdef("results")}} {{non-standard_inline}}</dt> + <dd>{{page("/en-US/docs/Web/HTML/Element/input/search", "results-include")}}</dd> + <dt>{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</dt> + <dd>{{page("/en-US/docs/Web/HTML/Element/input/file", "webkitdirectory-include")}}</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="A_simple_input_box">A simple input box</h3> + +<pre class="brush: html notranslate"><!-- A basic input --> +<input type="text" name="input" value="Type here"> +</pre> + +<p><input></p> + +<h3 id="A_common_use-case_scenario">A common use-case scenario</h3> + +<pre class="brush: html notranslate"><!-- A common form that includes input tags --> +<form action="getform.php" method="get"> + <label>First name: <input type="text" name="first_name" /></label><br /> + <label>Last name: <input type="text" name="last_name" /></label><br /> + <label>E-mail: <input type="email" name="user_email" /></label><br /> + <input type="submit" value="Submit" /> +</form> +</pre> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-input-element.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.input")}}</p> diff --git a/files/ko/web/html/element/input/radio/index.html b/files/ko/web/html/element/input/radio/index.html new file mode 100644 index 0000000000..827c5005d5 --- /dev/null +++ b/files/ko/web/html/element/input/radio/index.html @@ -0,0 +1,367 @@ +--- +title: <input type="radio"> +slug: Web/HTML/Element/Input/radio +tags: + - Element + - HTML + - HTML Input Types + - HTML forms + - HTML input + - Input + - Input Types + - Reference + - 라디오 + - 라디오 그룹 + - 라디오 버튼 +translation_of: Web/HTML/Element/input/radio +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong><code>radio</code></strong> 유형의 {{htmlelement("input")}} 요소는 보통 서로 관련된 옵션을 나타내는 라디오 버튼 콜렉션, <strong>라디오 그룹</strong>에 사용합니다.</span> 임의의 그룹 내에서는 동시에 하나의 라디오 버튼만 선택할 수 있습니다. 라디오 버튼은 흔히 원형으로 그려지며, 선택한 경우 속을 채우거나 강조 표시를 합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}}</div> + + + +<div id="Basic_example"> +<p>오래된 라디오의 버튼과 비슷한 형태와 동작 방식을 가졌기에 라디오 버튼이라고 부릅니다.</p> + +<p><img alt="Shows what radio buttons looked like in the olden days." src="https://mdn.mozillademos.org/files/15610/old-radio.jpg" style="height: 400px; width: 600px;" title="Photo of an old-time radio"></p> +</div> + +<div class="note"> +<p><strong>참고</strong>: <a href="/ko/docs/Web/HTML/Element/input/checkbox">체크박스</a>도 라디오 버튼과 비슷하지만 중요한 차이점이 하나 있습니다. 라디오 버튼은 여러 값에서 단 하나만 선택할 때 사용하지만, 체크박스는 각각의 값을 켜고 끌 수 있다는 점입니다. 다수의 컨트롤이 존재할 때 라디오 버튼은 전체에서 하나를 허용하고, 체크박스는 여러 개 선택을 허용합니다.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("값")}}</strong></td> + <td>라디오 버튼의 값을 나타내는 {{domxref("DOMString")}}.</td> + </tr> + <tr> + <td><strong>이벤트</strong></td> + <td>{{event("change")}}, {{event("input")}}</td> + </tr> + <tr> + <td><strong>지원하는 공통 특성</strong></td> + <td><code>checked</code>, <code>value</code></td> + </tr> + <tr> + <td><strong>IDL 특성</strong></td> + <td><code>{{anch("checked")}}</code>, <code>{{anch("value")}}</code></td> + </tr> + <tr> + <td><strong>메서드</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="값">값</h2> + +<p>The <code>value</code> attribute is a {{domxref("DOMString")}} containing the radio button's value. The value is never shown to the user by their {{Glossary("user agent")}}. Instead, it's used to identify which radio button in a group is selected.</p> + +<h3 id="라디오_그룹_정의하기">라디오 그룹 정의하기</h3> + +<p>A radio group is defined by giving each of radio buttons in the group the same {{htmlattrxref("name", "input")}}. Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.</p> + +<p>You can have as many radio groups on a page as you like, as long as each has its own unique <code>name</code>.</p> + +<p>For example, if your form needs to ask the user for their preferred contact method, you might create three radio buttons, each with the <code>name</code> property set to <code>contact</code> but one with the {{htmlattrxref("value", "input")}} <code>email</code>, one with the value <code>phone</code>, and one with the value <code>mail</code>. The user never sees the <code>value</code> or the <code>name</code> (unless you expressly add code to display it).</p> + +<p>The resulting HTML looks like this:</p> + +<pre class="brush: html"><form> + <p>Please select your preferred contact method:</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email"> + <label for="contactChoice1">Email</label> + + <input type="radio" id="contactChoice2" + name="contact" value="phone"> + <label for="contactChoice2">Phone</label> + + <input type="radio" id="contactChoice3" + name="contact" value="mail"> + <label for="contactChoice3">Mail</label> + </div> + <div> + <button type="submit">Submit</button> + </div> +</form></pre> + +<p>Here you see the three radio buttons, each with the <code>name</code> set to <code>contact</code> and each with a unique <code>value</code> that uniquely identifies that individual radio button within the group. They each also have a unique {{domxref("Element.id", "id")}}, which is used by the {{HTMLElement("label")}} element's {{htmlattrxref("for", "label")}} attribute to associate the labels with the radio buttons.</p> + +<p>You can try out this example here:</p> + +<p>{{EmbedLiveSample('Defining_a_radio_group', 600, 130)}}</p> + +<h3 id="라디오_그룹의_데이터_표현">라디오 그룹의 데이터 표현</h3> + +<p>When the above form is submitted with a radio button selected, the form's data includes an entry in the form <code>contact=<var>value</var></code>. For example, if the user clicks on the "Phone" radio button then submits the form, the form's data will include the line <code>contact=phone</code>.</p> + +<p>If you omit the <code>value</code> attribute in the HTML, the submitted form data assigns the value <code>on</code> to the group. In this scenario, if the user clicked on the "Phone" option and submitted the form, the resulting form data would be <code>contact=on</code>, which isn't helpful. So don't forget to set your <code>value</code> attributes!</p> + +<div class="note"> +<p><strong>Note</strong>: If no radio button is selected when the form is submitted, the radio group is not included in the submitted form data at all, since there is no value to report.</p> +</div> + +<p>It's fairly uncommon to actually want to allow the form to be submitted without any of the radio buttons in a group selected, so it is usually wise to have one default to the <code>checked</code> state. See {{anch("Selecting a radio button by default")}} below.</p> + +<p>Let's add a little bit of code to our example so we can examine the data generated by this form. The HTML is revised to add a {{HTMLElement("pre")}} block to output the form data into:</p> + +<pre class="brush: html"><form> + <p>Please select your preferred contact method:</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email"> + <label for="contactChoice1">Email</label> + <input type="radio" id="contactChoice2" + name="contact" value="phone"> + <label for="contactChoice2">Phone</label> + <input type="radio" id="contactChoice3" + name="contact" value="mail"> + <label for="contactChoice3">Mail</label> + </div> + <div> + <button type="submit">Submit</button> + </div> +</form> +<pre id="log"> +</pre> +</pre> + +<p>Then we add some <a href="/en-US/docs/Web/JavaScript">JavaScript</a> to set up an event listener on the {{domxref("HTMLFormElement/submit_event", "submit")}} event, which is sent when the user clicks the "Submit" button:</p> + +<pre class="brush: js">var form = document.querySelector("form"); +var log = document.querySelector("#log"); + +form.addEventListener("submit", function(event) { + var data = new FormData(form); + var output = ""; + for (const entry of data) { + output = output + entry[0] + "=" + entry[1] + "\r"; + }; + log.innerText = output; + event.preventDefault(); +}, false);</pre> + +<p>Try this example out and see how there's never more than one result for the <code>contact</code> group.</p> + +<p>{{EmbedLiveSample("Data_representation_of_a_radio_group", 600, 130)}}</p> + +<h2 id="추가_특성">추가 특성</h2> + +<p>In addition to the common attributes shared by all {{HTMLElement("input")}} elements, <code>radio</code> inputs support the following attributes:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("checked")}}</code></td> + <td>A Boolean indicating whether or not this radio button is the currently-selected item in the group</td> + </tr> + <tr> + <td><code>{{anch("value")}}</code></td> + <td>The string to use as the value of the radio when submitting the form, if the radio is currently toggled on</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefchecked">{{htmlattrdef("checked")}}</h3> + +<p>A Boolean attribute which, if present, indicates that this radio button is the currently selected one in the group.</p> + +<p>Unlike other browsers, Firefox by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persists the dynamic checked state</a> of an <code><input></code> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p> + +<h3 id="htmlattrdefvalue">{{htmlattrdef("value")}}</h3> + +<p>The <code>value</code> attribute is one which all {{HTMLElement("input")}}s share; however, it serves a special purpose for inputs of type <code>radio</code>: when a form is submitted, only radio buttons which are currently checked are submitted to the server, and the reported value is the value of the <code>value</code> attribute. If the <code>value</code> is not otherwise specified, it is the string <code>on</code> by default. This is demonstrated in the section {{anch("Value")}} above.</p> + +<h2 id="라디오_입력_칸_사용하기">라디오 입력 칸 사용하기</h2> + +<p>We already covered the fundamentals of radio buttons above. Let's now look at the other common radio-button-related features and techniques you may need to know about.</p> + +<h3 id="기본_선택_항목_지정하기">기본 선택 항목 지정하기</h3> + +<p>To make a radio button selected by default, you simply include <code>checked</code> attribute, as shown in this revised version of the previous example:</p> + +<pre class="brush: html"><form> + <p>Please select your preferred contact method:</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email" checked> + <label for="contactChoice1">Email</label> + + <input type="radio" id="contactChoice2" + name="contact" value="phone"> + <label for="contactChoice2">Phone</label> + + <input type="radio" id="contactChoice3" + name="contact" value="mail"> + <label for="contactChoice3">Mail</label> + </div> + <div> + <button type="submit">Submit</button> + </div> +</form></pre> + +<p>{{EmbedLiveSample('기본_선택_항목_지정하기', 600, 130)}}</p> + +<p>In this case, the first radio button is now selected by default.</p> + +<div class="note"> +<p><strong>Note</strong>: If you put the <code>checked</code> attribute on more than one radio button, later instances will override earlier ones; that is, the last <code>checked</code> radio button will be the one that is selected. This is because only one radio button in a group can ever be selected at once, and the user agent automatically deselects others each time a new one is marked as checked.</p> +</div> + +<h3 id="라디오_버튼의_클릭_범위_키우기">라디오 버튼의 클릭 범위 키우기</h3> + +<p>In the above examples, you may have noticed that you can select a radio button by clicking on its associated {{htmlelement("label")}} element, as well as on the radio button itself. This is a really useful feature of HTML form labels that makes it easier for users to click the option they want, especially on small-screen devices like smartphones.</p> + +<p>Beyond accessibility, this is another good reason to properly set up <code><label></code> elements on your forms.</p> + +<h2 id="유효성_검사">유효성 검사</h2> + +<p>Radio buttons don't participate in constraint validation; they have no real value to be constrained.</p> + +<h2 id="스타일링">스타일링</h2> + +<p>The following example shows a slightly more thorough version of the example we've seen throughout the article, with some additional styling, and with better semantics established through use of specialized elements. The HTML looks like this:</p> + +<pre class="brush: html"><form> + <fieldset> + <legend>Please select your preferred contact method:</legend> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email" checked> + <label for="contactChoice1">Email</label> + + <input type="radio" id="contactChoice2" + name="contact" value="phone"> + <label for="contactChoice2">Phone</label> + + <input type="radio" id="contactChoice3" + name="contact" value="mail"> + <label for="contactChoice3">Mail</label> + </div> + <div> + <button type="submit">Submit</button> + </div> + </fieldset> +</form></pre> + +<p>There's not much new to note here except for the addition of {{htmlelement("fieldset")}} and {{htmlelement("legend")}} elements, which help to group the functionality nicely and in a semantic way.</p> + +<p>The CSS involved is a bit more significant:</p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +div:first-of-type { + display: flex; + align-items: flex-start; + margin-bottom: 5px; +} + +label { + margin-right: 15px; + line-height: 32px; +} + +input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + border-radius: 50%; + width: 16px; + height: 16px; + + border: 2px solid #999; + transition: 0.2s all linear; + margin-right: 5px; + + position: relative; + top: 4px; +} + +input:checked { + border: 6px solid black; +} + +button, +legend { + color: white; + background-color: black; + padding: 5px 10px; + border-radius: 0; + border: 0; + font-size: 14px; +} + +button:hover, +button:focus { + color: #999; +} + +button:active { + background-color: white; + color: black; + outline: 1px solid black; +}</pre> + +<p>Most notable here is the use of the {{cssxref("-moz-appearance")}} property (with prefixes needed to support some browsers). By default, radio buttons (and <a href="/en-US/docs/Web/HTML/Element/input/checkbox">checkboxes</a>) are styled with the operating system's native styles for those controls. By specifying <code>appearance: none</code>, you can remove the native styling altogether, and create your own styles for them. Here we've used a {{cssxref("border")}} along with {{cssxref("border-radius")}} and a {{cssxref("transition")}} to create a nice animating radio selection. Notice also how the {{cssxref(":checked")}} pseudo-class is used to specify the styles for the radio button's appearance when selected.</p> + +<div class="note"> +<p><strong>Compatibility note</strong>: If you wish to use the {{cssxref("appearance")}} property, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies widely. In older browsers, even the keyword <code>none</code> does not have the same effect across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.</p> +</div> + +<p>{{EmbedLiveSample('Styling_radio_inputs', 600, 120)}}</p> + +<p>Notice that when clicking on a radio button, there's a nice, smooth fade out/in effect as the two buttons change state. In addition, the style and coloring of the legend and submit button are customized to have strong contrast. This might not be a look you'd want in a real web application, but it definitely shows off the possibilities.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th></th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.input.input-radio")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface that implements it.</li> + <li>{{domxref("RadioNodeList")}}: the interface that describes a list of radio buttons</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li> +</ul> diff --git a/files/ko/web/html/element/ins/index.html b/files/ko/web/html/element/ins/index.html new file mode 100644 index 0000000000..669da42046 --- /dev/null +++ b/files/ko/web/html/element/ins/index.html @@ -0,0 +1,137 @@ +--- +title: <ins> +slug: Web/HTML/Element/ins +tags: + - Element + - HTML + - HTML edits + - Reference + - Web +translation_of: Web/HTML/Element/ins +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><ins></code> 요소</strong>는 문서에 추가된 텍스트의 범위를 나타냅니다.</span> {{htmlelement("del")}} 요소를 사용하면 삭제된 텍스트의 범위를 나타낼 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ins.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>투명.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLModElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a><span style="line-height: 21px;">을 포함</span>합니다.</p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>회의록, 이슈 추적 시스템의 티켓 번호 등 변경점을 설명하는 리소스의 {{glossary("URI")}}.</dd> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>변경이 발생한 일시. 유효한 날짜 문자열이어야 하며, 시간을 지정할 경우 역시 유효해야 합니다. 유효하지 않은 값을 지정할 경우 일시를 지정하지 않은 것과 같습니다. 유효한 문자열의 종류는 <a href="/ko/docs/Web/HTML/Date_and_time_formats">HTML에서 사용하는 날짜와 시간 형식</a> 문서에서 확인할 수 있습니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><ins>This text has been inserted</ins></pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="Specifications" name="Specifications">접근성 고려사항</h2> + +<p>대부분의 스크린 리더는 기본값에서 <code><ins></code> 요소의 존재를 표현하지 않습니다. 그러나 CSS {{cssxref("content")}} 속성과 {{cssxref("::before")}}, {{cssxref("::after")}} 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.</p> + +<pre class="brush: css">ins::before, +ins::after { + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +ins::before { + content: " [추가 부분 시작] "; +} + +ins::after { + content: " [추가 부분 끝] "; +}</pre> + +<p>스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 삽입 여부가 꼭 필요할 때만 사용해야 합니다.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible) | The Paciello Group</a></li> + <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles | Adrian Roselli</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'edits.html#the-ins-element', '<ins>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'edits.html#the-ins-element', '<ins>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<ins>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.ins")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>문서에서 삭제된 부분을 나타내는 {{HTMLElement("del")}} 요소.</li> +</ul> diff --git a/files/ko/web/html/element/kbd/index.html b/files/ko/web/html/element/kbd/index.html new file mode 100644 index 0000000000..55f724224e --- /dev/null +++ b/files/ko/web/html/element/kbd/index.html @@ -0,0 +1,208 @@ +--- +title: '<kbd>: 키보드 입력 요소' +slug: Web/HTML/Element/kbd +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/kbd +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><kbd></code> 요소</strong>는 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다.</span> 관례에 따라 {{glossary("user agent", "사용자 에이전트")}}의 고정폭 글꼴로 표시하지만, HTML 표준은 그런 점을 강제하지 않습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/kbd.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row">콘텐츠 카테고리</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><kbd></code> 요소를 다른 요소와 조합해 더 상세한 상황을 표현할 수 있습니다.</p> + +<ul> + <li><code><kbd></code> 요소를 다른 <code><kbd></code> 요소 안에 배치해, 하나의 입력 안의 작은 부분이나, 실제 타이핑 키를 하나씩 나타낼 수 있습니다. 아래의 {{anch("입력 안의 키입력 나타내기")}} 예제를 참고하세요.</li> + <li><code><kbd></code> 요소를 {{htmlelement("samp")}} 요소 안에 배치하면 시스템이 에코로써 다시 출력한 사용자 입력을 나타낼 수 있습니다. 아래의 {{anch("재출력된 입력")}} 예제를 참고하세요.</li> + <li>반면, <code><samp></code> 요소를 <code><kbd></code> 요소 안에 배치하면 화면에 표시된 메뉴 이름, 메뉴 항목, 버튼 이름 등 시스템이 출력한 텍스트를 기반으로 한 입력을 나타낼 수 있습니다. 아래의 {{anch("화면에 표시된 입력 옵션 나타내기")}} 예제를 참고하세요.</li> +</ul> + +<div class="blockIndicator note"> +<p>사용자 지정 CSS 파일을 정의해 <code><kbd></code> 요소의 브라우저 기본 글꼴을 바꿀 수 있지만, 사용자 설정이 더 우선할 수도 있습니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="기본_예제">기본 예제</h3> + +<pre class="brush: html"><p><kbd>help mycommand</kbd> 명령어를 입력해 "mycommand" 명령에 대한 문서를 확인하세요.</p></pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("기본_예제", 350, 80)}}</p> + +<h3 id="입력_안의_키입력_나타내기">입력 안의 키입력 나타내기</h3> + +<p>다수의 키입력으로 구성된 입력을 설명할 땐 여러 개의 <code><kbd></code> 요소를 중첩할 수 있습니다. 바깥 <code><kbd></code>는 전체 입력을, 각각의 키입력 또는 구성요소는 안쪽의 <code><kbd></code>로 나타냅니다.</p> + +<h4 id="스타일_없이">스타일 없이</h4> + +<p>우선 기본 HTML에서 어떻게 나타나나 확인해보겠습니다.</p> + +<h5 id="HTML">HTML</h5> + +<pre class="brush: html"><p>새로운 문서는 키보드 단축키 +<kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd>으로 만들 수 있습니다.</p> +</pre> + +<p>단축키 조합 전체를 하나의 <code><kbd></code>로 감싼 후, 조합 구성요소를 나타내기 위해 각각의 키보드 키를 다른 <code><kbd></code>로 감싼 모습입니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> 꼭 이렇게 중첩할 필요는 없습니다. 바깥 <code><kbd></code>를 생략하고, <code><kbd>Ctrl</kbd>+<kbd>N</kbd></code>로 작성하더라도 완벽하게 유효한 표기법입니다.</p> + +<p>다만 현재 사용 중인 스타일에 따라 중첩이 유용할 때도 있습니다.</p> +</div> + +<h5 id="결과_2">결과</h5> + +<p>스타일 시트 없는 출력은 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("스타일_없이", 650, 80)}}</p> + +<h4 id="스타일_적용">스타일 적용</h4> + +<p>CSS를 좀 더해서 명확하게 바꿀 수 있습니다.</p> + +<h5 id="CSS">CSS</h5> + +<p>키보드 버튼을 렌더링 할 때 사용할 수 있는, <code><kbd></code> 요소의 <code>"key"</code> 스타일을 추가합니다.</p> + +<pre class="brush: css">kbd.key { + border-radius: 3px; + padding: 1px 2px 0; + border: 1px solid black; +} +</pre> + +<h5 id="HTML_2">HTML</h5> + +<p>HTML을 업데이트해 앞선 스타일을 적용합니다.</p> + +<pre class="brush: html"><p>새로운 문서는 키보드 단축키 +<kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd>으로 만들 수 있습니다.</p> +</pre> + +<h5 id="결과_3">결과</h5> + +<p>원하던 바로 그 결과입니다!</p> + +<p>{{EmbedLiveSample("스타일_적용", 650, 80)}}</p> + +<h3 id="재출력된_입력">재출력된 입력</h3> + +<p><code><kbd></code> 요소를 {{htmlelement("samp")}} 요소 안에 배치하면 시스템이 다시 출력한 입력을 나타낼 수 있습니다.</p> + +<pre class="brush: html"><p>구문 오류가 발생하면, 오류 원인을 찾을 수 있도록 +입력받은 명령을 다시 출력합니다.</p> +<blockquote> + <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp> +</blockquote> +</pre> + +<p>결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("재출력된_입력", 650, 120)}}</p> + +<h3 id="화면에_표시된_입력_옵션_나타내기">화면에 표시된 입력 옵션 나타내기</h3> + +<p>{{htmlelement("samp")}} 요소를 <code><kbd></code> 요소 안에 배치하면 시스템이 화면에 표시하는 입력 선택지(메뉴, 버튼...)에 기반한 사용자 입력을 나타냅니다.</p> + +<p>예를 들면, "파일" 메뉴의 "새 문서" 옵션을 선택하는 방법에 대해 설명하는 HTML은 다음과 같은 형태를 가집니다.</p> + +<pre class="brush: html"><p>새로운 파일을 생성하려면, <kbd> +<kbd><samp>파일</samp></kbd>⇒<kbd><samp>새 문서</samp></kbd> +</kbd> 메뉴를 선택하세요. + +<p>파일의 이름을 입력한 후, <kbd><samp>확인</samp></kbd>을 +누르는 걸 잊지 마세요.</p> +</pre> + +<p>흥미로운 중첩 사용법을 볼 수 있습니다. 메뉴 옵션 설명을 보면, 전체 입력 시퀀스가 하나의 <code><kbd></code> 요소에 들어간 것을 볼 수 있으며, 메뉴 이름("파일")과 메뉴 항목("새 문서") 둘 다 각자의 <code><kbd></code>와 <code><samp></code>로 표시한 것을 볼 수 있습니다. <code><kbd></code> 안에 <code><samp></code>가 존재하므로, "파일"과 "새 문서"는 화면 위의 위젯을 사용한 입력임을 알 수 있습니다.</p> + +<h4 id="결과_4">결과</h4> + +<p>{{EmbedLiveSample("화면에_표시된_입력_옵션_나타내기", 650, 120)}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-kbd-element', '<kbd>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-kbd-element', '<kbd>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Expanded to include any user input, like voice input and individual keystrokes.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<kbd>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.kbd")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{htmlelement("code")}}</li> +</ul> diff --git a/files/ko/web/html/element/keygen/index.html b/files/ko/web/html/element/keygen/index.html new file mode 100644 index 0000000000..45910b8a24 --- /dev/null +++ b/files/ko/web/html/element/keygen/index.html @@ -0,0 +1,122 @@ +--- +title: <keygen> +slug: Web/HTML/Element/keygen +tags: + - Deprecated + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/keygen +--- +<p>{{HTMLRef}}{{Obsolete_Header}}</p> + +<p>The HTML <code><keygen></code> element exists to facilitate generation of key material, and submission of the public key as part of an <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML form</a>. This mechanism is designed for use with Web-based certificate management systems. It is expected that the <code><keygen></code> element will be used in an HTML form along with other information needed to construct a certificate request, and that the result of the process will be a signed certificate.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, interactive content, <a href="/en-US/docs/Web/HTML/Content_categories#Form_listed">listed</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_labelable">labelable</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_submittable">submittable</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_resettable">resettable</a> <a href="/en-US/docs/Web/HTML/Content_categories#Form-associated_content">form-associated element</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>Must have a start tag and must not have an end tag.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>None</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{DOMxRef("HTMLKeygenElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{HTMLAttrDef("autofocus")}}</dt> + <dd>This Boolean attribute lets you specify that the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the <code>autofocus</code> attribute, which is a Boolean.</dd> + <dt>{{HTMLAttrDef("challenge")}}</dt> + <dd>A challenge string that is submitted along with the public key. Defaults to an empty string if not specified.</dd> + <dt>{{HTMLAttrDef("disabled")}}</dt> + <dd>This Boolean attribute indicates that the form control is not available for interaction.</dd> + <dt>{{HTMLAttrDef("form")}}</dt> + <dd>The form element that this element is associated with (its <em>form owner</em>). The value of the attribute must be an <code>id</code> of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place <code><keygen> </code>elements anywhere within a document, not just as descendants of their form elements.</dd> + <dt>{{HTMLAttrDef("keytype")}}</dt> + <dd>The type of key generated. The default value is <code>RSA</code>.</dd> + <dt>{{HTMLAttrDef("name")}}</dt> + <dd>The name of the control, which is submitted with the form data.</dd> +</dl> + +<p>The element is written as follows:</p> + +<pre class="brush: html"><keygen name="<var>name</var>" challenge="<var>challenge string</var>" keytype="<var>type</var>" + keyparams="<var>pqg-params</var>"></pre> + +<p>The <code>keytype</code> parameter is used to specify what type of key is to be generated. Valid values are "<code>RSA</code>", which is the default, "<code>DSA</code>" and "<code>EC</code>". The <code>name</code> and <code>challenge</code> attributes are required in all cases. The <code>keytype</code> attribute is optional for RSA key generation and required for DSA and EC key generation. The <code>keyparams</code> attribute is required for DSA and EC key generation and ignored for RSA key generation. <code>PQG</code> is a synonym for <code>keyparams</code>. That is, you may specify <code>keyparams="pqg-params"</code> or <code>pqg="pqg-params"</code>.</p> + +<p>For RSA keys, the <code>keyparams</code> parameter is not used (ignored if present). The user may be given a choice of RSA key strengths. Currently, the user is given a choice between "high" strength (2048 bits) and "medium" strength (1024 bits).</p> + +<p>For DSA keys, the <code>keyparams</code> parameter specifies the DSA PQG parameters which are to be used in the keygen process. The value of the <code>pqg</code> parameter is the the BASE64 encoded, DER encoded Dss-Parms as specified in IETF <a class="link-ftp" href="ftp://ftp.rfc-editor.org/in-notes/rfc3279.txt">RFC 3279</a>. The user may be given a choice of DSA key sizes, allowing the user to choose one of the sizes defined in the DSA standard.</p> + +<p>For EC keys, the <code>keyparams</code> parameter specifies the name of the elliptic curve on which the key will be generated. It is normally a string from the table in <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/security/manager/ssl/src/nsKeygenHandler.cpp?mark=179-185,187-206,208-227,229-256#177" title="http://mxr.mozilla.org/mozilla-central/source/security/manager/ssl/src/nsKeygenHandler.cpp?mark=179-185,187-206,208-227,229-256#177">nsKeygenHandler.cpp</a>. (Note that only a subset of the curves named there may actually be supported in any particular browser.) If the <code>keyparams</code> parameter string is not a recognized curve name string, then a curve is chosen according to the user's chosen key strength (low, medium, high), using the curve named "<code>secp384r1</code>" for high, and the curve named "<code>secp256r1</code>" for medium keys. (Note: choice of the number of key strengths, default values for each strength, and the UI by which the user is offered a choice, are outside of the scope of this specification.)</p> + +<p>The <code><keygen></code> element is only valid within an HTML form. It will cause some sort of selection to be presented to the user for selecting key size. The UI for the selection may be a menu, radio buttons, or possibly something else. The browser presents several possible key strengths. Currently, two strengths are offered, high and medium. If the user's browser is configured to support cryptographic hardware (e.g. "smart cards") the user may also be given a choice of where to generate the key, i.e., in a smart card or in software and stored on disk.</p> + +<p>When the submit button is pressed, a key pair of the selected size is generated. The private key is encrypted and stored in the local key database.</p> + +<pre>PublicKeyAndChallenge ::= SEQUENCE { + spki SubjectPublicKeyInfo, + challenge IA5STRING +} +SignedPublicKeyAndChallenge ::= SEQUENCE { + publicKeyAndChallenge PublicKeyAndChallenge, + signatureAlgorithm AlgorithmIdentifier, + signature BIT STRING +}</pre> + +<p>The public key and challenge string are DER encoded as <code>PublicKeyAndChallenge</code>, and then digitally signed with the private key to produce a <code>SignedPublicKeyAndChallenge</code>. The <code>SignedPublicKeyAndChallenge</code> is {{Glossary("Base64")}} encoded, and the ASCII data is finally submitted to the server as the value of a form name/value pair, where the name is <var>name</var> as specified by the <code>name</code> attribute of the <code>keygen</code> element. If no challenge string is provided, then it will be encoded as an <code>IA5STRING</code> of length zero.</p> + +<p>Here is an example form submission as it would be delivered to a CGI program by the HTTP server:</p> + +<pre> commonname=John+Doe&email=doe@foo.com&org=Foobar+Computing+Corp.& + orgunit=Bureau+of+Bureaucracy&locality=Anytown&state=California&country=US& + key=MIHFMHEwXDANBgkqhkiG9w0BAQEFAANLADBIAkEAnX0TILJrOMUue%2BPtwBRE6XfV%0AWtKQbsshxk5ZhcUwcwyvcnIq9b82QhJdoACdD34rqfCAIND46fXKQUnb0mvKzQID%0AAQABFhFNb3ppbGxhSXNNeUZyaWVuZDANBgkqhkiG9w0BAQQFAANBAAKv2Eex2n%2FS%0Ar%2F7iJNroWlSzSMtTiQTEB%2BADWHGj9u1xrUrOilq%2Fo2cuQxIfZcNZkYAkWP4DubqW%0Ai0%2F%2FrgBvmco%3D</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML5 W3C", "forms.html#the-keygen-element", 'the <code><keygen></code> element')}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.keygen")}}</p> diff --git a/files/ko/web/html/element/label/index.html b/files/ko/web/html/element/label/index.html new file mode 100644 index 0000000000..2d99a140c5 --- /dev/null +++ b/files/ko/web/html/element/label/index.html @@ -0,0 +1,189 @@ +--- +title: <label> +slug: Web/HTML/Element/label +tags: + - Element + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/label +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><label></code> 요소</strong>는 사용자 인터페이스 항목의 설명을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/label.html", "tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<p><code><label></code> 을 {{htmlelement("input")}} 요소와 연결하면 몇 가지 이점이 있습니다:</p> + +<ul> + <li>label 텍스트는 텍스트 입력과 시각적으로 관련이 있을뿐만 아니라 프로그래밍적으로도 관련이 있습니다. 예를 들어, 화면리더기(screenreader) 는 폼 입력(form input)에서 label 을 읽어서 보조기술(assistive technology) 사용자가 입력해야하는 텍스트가 무엇인지 더 쉽게 이해할 수 있게 합니다. </li> + <li>관련 label 을 클릭해서 input 자체에 초점을 맞추거나 활성화를 시킬 수 있습니다. (활성되어서)늘어난 누를 수 있는 영역(hit area)은 터치스크린 사용자를 포함해 입력하려하는 모든 사람에게 이점을 줍니다.</li> +</ul> + +<p><code><label></code> 을 <code><input></code> 요소와 연관시키려면, <code><input></code> 에 <code>id</code> 속성을 넣어야합니다. 그런 다음 <code><label></code> 에 <code>id</code> 와 같은 값의 <code>for</code> 속성을 넣어야합니다. </p> + +<p>또는, <code><label></code> 안에 <code><input></code> 을 중첩시킬 수 있습니다. 이 경우 연관이 암시적이므로 <code>for</code> 및 <code>id</code>속성이 필요없습니다.</p> + +<pre class="brush: html"><label>Do you like peas? + <input type="checkbox" name="peas"> +</label> +</pre> + +<p>다른 사용법 메모:</p> + +<ul> + <li>label 이 붙여진 양식 컨트롤(form control) 은 <em>레이블된 제어 labeled control</em> 라고 불립니다. 하나의 input 은 여러 label들에 연관되어있습니다.</li> + <li>연관된 양식 컨트롤(form control) 이 있는 <code><label></code> 이 클릭되거나 터치되면, 이 label의 <code>click</code> 이벤트는 연관된 control 도 동작시킵니다.</li> +</ul> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("for")}}</dt> + <dd>같은 문서 내의 <code><label></code> 요소로서, <a href="/ko/docs/Web/Guide/HTML/Content_categories#레이블_가능">레이블 가능</a>한 form-related 요소의 {{htmlattrxref("id")}}. 레이블 가능한 요소일 때, <code>for</code> 속성값과 일치하는 <code>id</code>를 가진 문서의 첫 번째 요소는 그 label 요소의 <em>라벨 제어(labeled control)</em>라고 합니다. label을 지정할 수 없으면 <code>for</code> 속성은 영향을 미치지 않습니다. 문서의 뒷부분에 <code>id</code> 값과 일치하는 다른 요소들은 무시합니다. + <div class="note"> <code><label></code> 요소는 <code>for</code> 속성과 제어control 요소를 동시에 가질 수 있습니다. 이 때 <code>for</code> 속성은 포함되어있는 제어control 요소를 가리키고 있어야 합니다.</div> + </dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd>label과 연관된 {{htmlelement ( "form")}} 요소(<em>양식 소유자 form owner</em>). 이 속성이 지정된 경우, 이 속성 값은 동일한 문서의 {{HTMLElement ( "form")}} 요소의 id입니다. 따라서 label 요소를 양식 요소의 자손이 아닌 문서의 어느 곳에나 배치 할 수 있습니다.</dd> +</dl> + +<h2 id="CSS_스타일링">CSS 스타일링</h2> + +<p><code><label></code> 요소에 대한 특별한 스타일 고려 사항은 없습니다. 구조적으로 단순한 인라인 요소이므로 {{htmlelement ( "span")}} 또는 {{htmlelement ( "a")}} 요소와 같은 방식으로 스타일을 지정할 수 있습니다 }}. 텍스트를 읽기 어렵게하지 않는 한 원하는 방식으로 스타일을 적용 할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_label_예제">간단한 label 예제</h3> + +<pre class="brush: html"><label>Click me <input type="text"></label></pre> + +<p>{{EmbedLiveSample('Simple_label_example', '200', '50', '')}}</p> + +<h3 id="for_속성_예제">"for" 속성 예제</h3> + +<pre class="brush: html"><label for="username">Click me</label> +<input type="text" id="username"></pre> + +<p>{{EmbedLiveSample('Using_the_for_attribute', '200', '50', '')}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<h3 id="인터랙티브_콘텐츠">인터랙티브 콘텐츠</h3> + +<p>Don't place interactive elements such as {{HTMLElement("a", "anchors")}} or {{HTMLElement("button", "buttons")}} inside a <code>label</code>. Doing so makes it difficult for people to activate the form input associated with the <code>label</code>.</p> + +<p><code>label</code> 안에 {{HTMLElement ( "a", "anchors")}} 또는 {{HTMLElement ( "button", "buttons")}}와 같은 인터랙티브 요소를 배치하지 마십시오. 그렇게하면 사람들이 <code>label</code>과 관련된 양식을 입력하기 어렵습니다.</p> + +<h4 id="하지_마세요">하지 마세요</h4> + +<pre class="brush: html example-bad"><label for="tac"> + <input id="tac" type="checkbox" name="terms-and-conditions"> + I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a> +</label> +</pre> + +<h4 id="이렇게_하세요">이렇게 하세요</h4> + +<pre class="brush: html example-good"><label for="tac"> + <input id="tac" type="checkbox" name="terms-and-conditions"> + I agree to the Terms and Conditions +</label> +<p> + <a href="terms-and-conditions.html">Read our Terms and Conditions</a> +</p> +</pre> + +<h3 id="제목">제목</h3> + +<p>제목은 일반적으로 <a href="/en-US/docs/Web/HTML/Element/Heading_Elements#Navigation">탐색 목적</a>의 보조 도구로 사용되므로 <code><label></code> 내에 <a href="/en-US/docs/Web/HTML/Element/Heading_Elements">제목 요소</a>를 배치하면 많은 종류의 보조 기술을 방해합니다. label의 텍스트를 시각적으로 조정해야하는 경우, <code><label></code> 요소에 적용된 CSS 클래스를 사용하십시오.</p> + +<p><a href="/en-US/docs/Web/HTML/Element/form">양식(form)</a> 또는 양식의 섹션에 제목이 필요한 경우 {{HTMLElement ( "fieldset")}} 내에 배치 된 {{HTMLElement ( "legend")}} 요소를 사용하십시오.</p> + +<h4 id="하지_마세요_2">하지 마세요</h4> + +<pre class="brush: html example-bad"><label for="your-name"> + <h3>Your name</h3> + <input id="your-name" name="your-name" type="text"> +</label> +</pre> + +<h4 id="이렇게_하세요_2">이렇게 하세요</h4> + +<pre class="brush: html example-good"><label class="large-label" for="your-name"> + Your name + <input id="your-name" name="your-name" type="text"> +</label> </pre> + +<h3 id="버튼">버튼</h3> + +<p><code>type="button"</code>선언과 유효한 <code>value</code> 속성을 가진 {{HTMLElement ( "input")}} 요소에는 연관된 레이블이 필요하지 않습니다. 그렇게하면 보조 기술이 버튼 입력을 구문 분석하는 방법을 실제로 방해 할 수 있습니다. {{HTMLElement ( "button")}} 요소에도 동일하게 적용됩니다.</p> + +<h2 id="기술_요약">기술 요약</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#양식_관련_콘텐츠">양식 관련 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>. 단, 다른 <code><label></code> 요소는 자손으로 올 수 없습니다. 레이블을 지정한 컨트롤 외의 다른 <a href="/ko/docs/Web/Guide/HTML/Content_categories#레이블_가능">레이블 가능</a> 요소는 자손으로 사용할 수 없습니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLLabelElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-label-element', '<label>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-label-element', '<label>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '<label>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>최초 정의</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.label")}}</p> diff --git a/files/ko/web/html/element/legend/index.html b/files/ko/web/html/element/legend/index.html new file mode 100644 index 0000000000..522f96e610 --- /dev/null +++ b/files/ko/web/html/element/legend/index.html @@ -0,0 +1,91 @@ +--- +title: <legend> +slug: Web/HTML/Element/legend +tags: + - Element + - Forms + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/legend +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><legend></code> 요소</strong>는 부모 {{HTMLElement("fieldset")}} 콘텐츠의 설명을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/legend.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{htmlelement("fieldset")}} 요소. <code><legend></code>가 첫 번째 자식이어야 합니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLLegendElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만<span style="line-height: 21px;"> 포함합니다.</span></p> + +<h2 id="예제">예제</h2> + +<p>{{HTMLElement("form")}}의 예제를 참고하세요.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "forms.html#the-legend-element", "<legend>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Definition of the <code>legend</code> element</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "sec-forms.html#the-legend-element", "<legend>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "interact/forms.html#h-17.10", "<legend>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.legend")}}</p> diff --git a/files/ko/web/html/element/li/index.html b/files/ko/web/html/element/li/index.html new file mode 100644 index 0000000000..03d7df653a --- /dev/null +++ b/files/ko/web/html/element/li/index.html @@ -0,0 +1,154 @@ +--- +title: <li> +slug: Web/HTML/Element/li +tags: + - Element + - HTML + - HTML grouping content + - Reference +translation_of: Web/HTML/Element/li +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><li></code> 요소</strong>는 목록의 항목을 나타냅니다.</span> 반드시 정렬 목록({{htmlelement("ol")}}), 비정렬 목록({{htmlelement("ul")}}, 혹은 메뉴({{htmlelement("menu")}}) 안에 위치해야 합니다. 메뉴와 비정렬 목록에서는 보통 불릿으로 항목을 나타내고, 정렬 목록에서는 숫자나 문자를 사용한 오름차순 카운터로 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/li.html", "tabbed-shorter")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>다른 <code><li></code> 요소 바로 뒤따르거나 자신이 부모의 마지막 자식인 경우 닫는 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("menu")}} 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("presentation")}}, {{ARIARole("radio")}}, {{ARIARole("separator")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLLIElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>{{HTMLElement("ol")}} 요소 내부에서 항목의 현재 서수 값을 나타내는 정수. 리스트가 로마 숫자나 문자로 표시되더라도 이 특성에는 숫자만 넣을수 있습니다. <code>value</code>를 지정한 항목을 뒤따르는 다른 항목은 이 값에서부터 번호를 매깁니다. <code>value</code> 속성은 비정렬 목록({{HTMLElement("ul")}})과 메뉴({{HTMLElement("menu")}})에서는 아무 의미가 없습니다. + <div class="note"><strong>참고</strong>: HTML4에서는 <code>value</code>의 사용을 중단했지만 HTML5에서 다시 도입했습니다.</div> + </dd> + <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt> + <dd>넘버링 타입을 나타내는 문자. + <ul> + <li><code>a</code>: 소문자 글자</li> + <li><code>A</code>: 대문자 글자</li> + <li><code>i</code>: 소문자 로마 숫자</li> + <li><code>I</code>: 대문자 문자 숫자</li> + <li><code>1</code>: 숫자</li> + </ul> + 부모 {{HTMLElement("ol")}} 요소에서 지정하는 유형을 덮어씁니다. + + <div class="note"><strong>참고:</strong> 이 속성은 사용 중단됐습니다. 대신 CSS {{cssxref("list-style-type")}} 속성을 사용하세요.</div> + </dd> +</dl> + +<h2 id="예제">예제</h2> + +<p>더 자세한 예제는 {{htmlelement("ol")}}과 {{htmlelement("ul")}}을 참고하세요.</p> + +<h3 id="정렬_목록">정렬 목록</h3> + +<pre class="brush: html"><ol> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ol> +</pre> + +<p>{{EmbedLiveSample("정렬_목록")}}</p> + +<h3 id="사용자_지정_값을_가진_정렬_목록">사용자 지정 값을 가진 정렬 목록</h3> + +<pre class="brush: html"><ol type="I"> + <li value="3">third item</li> + <li>fourth item</li> + <li>fifth item</li> +</ol> +</pre> + +<p>{{EmbedLiveSample("사용자_지정_값을_가진_정렬_목록")}}</p> + +<h3 id="비정렬_목록">비정렬 목록</h3> + +<pre class="brush: html"><ul> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ul></pre> + +<p>{{EmbedLiveSample("비정렬_목록")}}</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-li-element', '<li>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-li-element.html#the-li-element', '<li>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'lists.html#h-10.2', '<li>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>The <code>type</code> attribute has been deprecated.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.li")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>리스트 관련 다른 요소: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}.</li> + <li><code><li></code> 요소와 유용하게 사용할 수 있는 CSS 속성 + <ul> + <li>서수를 표현할 방식을 지정하는 {{cssxref("list-style")}} 속성.</li> + <li>복잡한 중첩 목록을 처리하기 위한 <a href="/ko/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS 카운터</a></li> + <li>항목의 들여쓰기를 조정하기 위한 {{cssxref("margin")}} 속성.</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/html/element/link/index.html b/files/ko/web/html/element/link/index.html new file mode 100644 index 0000000000..fcbf91c85b --- /dev/null +++ b/files/ko/web/html/element/link/index.html @@ -0,0 +1,365 @@ +--- +title: '<link>: 외부 리소스 연결 요소' +slug: Web/HTML/Element/link +tags: + - Element + - HTML + - HTML document metadata + - Reference + - Web + - favicon + - metadata + - 메타데이터 + - 파비콘 +translation_of: Web/HTML/Element/link +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><link></code></strong> 요소는 현재 문서와 외부 리소스의 관계를 명시합니다. <code><link></code>는 {{glossary("CSS", "스타일 시트")}}를 연결할 때 제일 많이 사용하지만, 사이트 아이콘("파비콘"과 홈 화면 아이콘) 연결 등 여러가지로 쓰일 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/link.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<p>외부 스타일 시트를 연결하려면 {{htmlelement("head")}} 안에 다음과 같은 <code><link></code> 요소를 배치하세요.</p> + +<pre class="brush: html no-line-numbers notranslate"><link href="main.css" rel="stylesheet"></pre> + +<p>위의 간단한 예제는 <code>href</code> 특성에 스타일 시트의 경로를, <code>rel</code> 특성에 <code>stylesheet</code>을 사용합니다. <code>rel</code>은 관계(<em>rel</em>ationship)를 뜻하며, 현재 문서와 연결한 아이템의 관계가 어떻게 되는지 설명합니다. 따라서 <code><link></code> 요소의 제일 중요한 기능 중 하나라고 볼 수 있습니다. <a href="/ko/docs/Web/HTML/Link_types">링크 유형</a> 참고서에서 볼 수 있듯 관계에는 다양한 종류가 있습니다.</p> + +<p>그중에서도 몇 가지 자주 쓰이는 유형이 있습니다. 사이트의 파비콘을 연결하려면 다음과 같이 사용합니다.</p> + +<pre class="brush: html no-line-numbers notranslate"><link rel="icon" href="favicon.ico"></pre> + +<p>아이콘을 위한 <code>rel</code> 값도 여러개가 있으며, 주 용도는 다양한 휴대기기 플랫폼의 특별한 아이콘을 나타내기 위함입니다.</p> + +<pre class="brush: html no-line-numbers notranslate"><link rel="apple-touch-icon-precomposed" sizes="114x114" + href="apple-icon-114.png" type="image/png"></pre> + +<p><code>sizes</code> 특성은 아이콘 크기를, <code>type</code> 특성은 연결한 리소스의 MIME을 포함합니다. 브라우저는 이런 여러가지 정보를 통해 가장 적합한 아이콘을 선택합니다.</p> + +<p><code>media</code> 특성을 사용해 미디어 유형이나 쿼리를 지정할 수도 있습니다. 그러면 해당 미디어 조건을 만족할 때만 리소스를 불러옵니다.</p> + +<pre class="brush: html no-line-numbers notranslate"><link href="print.css" rel="stylesheet" media="print"> +<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"></pre> + +<p>새로운 성능 및 보안 관련 기능도 <code><link></code> 요소에 추가됐습니다. 다음 코드로 살펴보겠습니다.</p> + +<pre class="brush: html no-line-numbers notranslate"><link rel="preload" href="myFont.woff2" as="font" + type="font/woff2" crossorigin="anonymous"></pre> + +<p><code>rel</code>의 <code>preload</code> 값은 브라우저가 이 리소스를 미리 불러와야 한다는 것(자세한 정보는 <a href="/ko/docs/Web/HTML/Preloading_content">이 문서</a>를 참고하세요)을 나타내고, <code>as</code> 특성은 가져오는 리소스가 어떤 리소스인지 나타냅니다. <code>crossorigin</code> 특성은 리소스를 {{glossary("CORS")}} 요청으로 불러와야 하는지에 대한 값입니다.</p> + +<div class="hidden"> +<p>Other usage notes:</p> + +<ul> + <li>A <code><link></code> element can occur either in the {{HTMLElement("head")}} or {{HTMLElement("body")}} element, depending on whether it has a <a href="https://html.spec.whatwg.org/multipage/links.html#body-ok">link type</a> that is <strong>body-ok</strong>. For example, the <code>stylesheet</code> link type is body-ok, and therefore <code><link rel="stylesheet"></code> is permitted in the body. However, this isn't a good practice to follow; it makes more sense to separate your <code><link></code> elements from your body content, putting them in the <code><head></code>.</li> + <li>When using <code><link></code> to establish a favicon for a site, and your site uses a Content Security Policy (CSP) to enhance its security, the policy applies to the favicon. If you encounter problems with the favicon not loading, verify that the {{HTTPHeader("Content-Security-Policy")}} header's <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> directive</a> is not preventing access to it.</li> + <li>The HTML and XHTML specifications define event handlers for the <code><link></code> element, but it is unclear how they would be used.</li> + <li>Under XHTML 1.0, empty elements such as <code><link></code> require a trailing slash: <code><link /></code>.</li> + <li>WebTV supports the use of the value <code>next</code> for <code>rel</code> to preload the next page in a document series.</li> +</ul> +</div> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다</p> + +<dl> + <dt>{{HTMLAttrDef("as")}}</dt> + <dd><code><link></code> 요소에 <code>rel="preload"</code> 또는 <code>rel="prefetch"</code> 특성을 지정했을 때만 사용합니다. <code>as</code> 특성은 <code><link></code> 요소가 불러오는 콘텐츠의 유형을 지정합니다. 요청 매칭, 올바른 콘텐츠 보안 정책의 적용, 올바른 {{HTTPHeader("Accept")}} 요청 헤더 적용에 필요합니다. 이에 더해, <code>rel="preload"</code>는 <code>as</code> 특성을 사용해 요청 우선순위를 매깁니다. 다음 표는 특성의 유효한 값과, 해당 값이 적용되는 요소 또는 리소스를 나열합니다.</dd> + <dd> + <table class="standard-table"> + <thead> + <tr> + <th scope="col">값</th> + <th scope="col">적용 대상</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audio</code></td> + <td><code><audio></code> 요소</td> + </tr> + <tr> + <td><code>document</code></td> + <td><code><iframe></code>과 <code><frame></code> 요소</td> + </tr> + <tr> + <td><code>embed</code></td> + <td><code><embed></code> 요소</td> + </tr> + <tr> + <td><code>fetch</code></td> + <td> + <p><code>fetch</code>, XHR</p> + + <div class="blockIndicator note"> + <p><code>fetch</code> 값은 <code><link></code> 요소에 <code>crossorigin</code> 특성도 요구합니다.</p> + </div> + </td> + </tr> + <tr> + <td><code>font</code></td> + <td>CSS <code>@font-face</code></td> + </tr> + <tr> + <td><code>image</code></td> + <td><code>srcset</code> 또는 <code>imageset</code> 특성을 가진 <code><img></code>와 <code><picture></code> 요소, SVG <code><image></code> 요소, CSS <code>*-image</code> 규칙</td> + </tr> + <tr> + <td><code>object</code></td> + <td><code><object></code> 요소</td> + </tr> + <tr> + <td><code>script</code></td> + <td><code><script></code> 요소, 워커 <code>importScripts</code></td> + </tr> + <tr> + <td><code>style</code></td> + <td><code><link rel=stylesheet></code> 요소, CSS <code>@import</code></td> + </tr> + <tr> + <td><code>track</code></td> + <td><code><track></code> 요소</td> + </tr> + <tr> + <td><code>video</code></td> + <td><code><video></code> 요소</td> + </tr> + <tr> + <td><code>worker</code></td> + <td>워커, 공유 워커</td> + </tr> + </tbody> + </table> + </dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>리소스를 가져올 때 {{glossary("CORS")}}를 사용해야 하는지 나타내는 열거형 특성입니다. <a href="/ko/docs/Web/HTML/CORS_Enabled_Image">CORS 활성화 이미지</a>는 {{HTMLElement("canvas")}} 요소를 "오염"(taint)시키지 않고 재사용할 수 있습니다. 가능한 값은 다음과 같습니다. + <dl> + <dt><code>anonymous</code></dt> + <dd>교차 출처 요청({{HTTPHeader("Origin")}} HTTP 헤더를 가진 요청)을 수행하지만 인증 정보, 즉 쿠키, X.509 인증서, HTTP Basic 인증 중 어떠한 것도 전송하지 않습니다. 서버에서 {{HTTPHeader("Access-Control-Allow-Origin")}} HTTP 헤더를 설정하지 않아서 출처 사이트에 인증 정보를 전달하지 않으면 리소스가 오염되어 사용처가 제한됩니다.</dd> + <dt><code>use-credentials</code></dt> + <dd>교차 출처 요청({{HTTPHeader("Origin")}} HTTP 헤더를 가진 요청)을 수행하면서 인증 정보, 즉 쿠키, X.509 인증서, HTTP Basic 인증 중 한 가지 이상을 수행합니다. 서버에서 {{HTTPHeader("Access-Control-Allow-Origin")}} HTTP 헤더를 설정하지 않아서 출처 사이트에 인증 정보를 전달하지 않으면 리소스가 오염되어 사용처가 제한됩니다.</dd> + </dl> + <code> crossorigin</code> 특성이 존재하지 않으면 리소스를 {{Glossary("CORS")}} 요청 없이 가져오므로 리소스의 오염 없이는 사용이 불가능합니다. 유효하지 않은 값은 <strong>anonymous</strong>를 지정한 것으로 간주합니다. <a href="/ko/docs/Web/HTML/Attributes/crossorigin">CORS 설정 특성</a> 문서에서 더 자세한 정보를 알아보세요.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p><code>rel="stylesheet"</code>에 한정하여, <code>disabled</code> 불리언 특성은 스타일시트를 불러와서 문서에 적용할지 나타냅니다. HTML을 불러오는 시점에 <code>disabled</code>를 지정한 경우 스타일시트는 페이지 로딩 시점에 불러오지 않습니다. 이후에 <code>disabled</code> 특성이 <code>false</code>로 바뀌거나 아예 제거될 때는 불러옵니다.</p> + + <p>DOM에서 <code>disabled</code> 속성을 지정하면 문서의 {{domxref("document.styleSheets")}} 리스트에서 스타일시트를 제거합니다.</p> + </dd> + <dt>{{HTMLAttrDef("href")}}</dt> + <dd>연결할 리소스의 {{glossary("URL")}}입니다. 절대와 상대 URL 모두 가능합니다.</dd> + <dt>{{HTMLAttrDef("hreflang")}}</dt> + <dd>연결할 리소스가 사용하는 언어입니다. 오직 제안하는 용도로만 사용합니다. 가능한 값은 <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>에 따릅니다. {{htmlattrxref("href", "link")}} 특성이 존재할 때만 사용하세요.</dd> + <dt id="name-attribute">{{HTMLAttrDef("importance")}} {{Experimental_Inline}}</dt> + <dd>리소스의 상대적인 중요도입니다. 가능한 값은 다음과 같습니다.</dd> + <dd> + <p><strong><code>auto</code></strong>: <strong>설정 안함</strong>. 브라우저가 자체 휴리스틱을 사용해 리소스의 우선순위를 결정합니다.</p> + + <p><strong><code>high</code></strong>: 브라우저에게 리소스가 <strong>높은</strong> 우선순위를 지님을 알려줍니다.</p> + + <p><strong><code>low</code></strong>: 브라우저에게 리소스가 <strong>낮은</strong> 우선순위를 지님을 알려줍니다.</p> + + <div class="blockIndicator note"> + <p><strong>참고: </strong><code>importance</code> 특성은 <code><link></code> 요소가 <code>rel="preload"</code> 또는 <code>rel="prefetch"</code>를 가지고 있어야 사용할 수 있습니다.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("integrity")}} {{Experimental_Inline}}</dt> + <dd>Contains inline metadata — a base64-encoded cryptographic hash of the resource (file) you’re telling the browser to fetch. The browser can use this to verify that the fetched resource has been delivered free of unexpected manipulation. See <a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd> + <dt>{{htmlattrdef("media")}}</dt> + <dd>연결된 리소스를 적용할 미디어를 명시합니다. 값으로는 반드시 미디어 유형이나 미디어 쿼리를 사용해야 합니다. <code>media</code> 특성은 사용자 에이전트가 현재 장치에 맞춰 최적의 스타일시트를 선택하도록 할 수 있으므로 주로 외부 스타일시트를 연결할 때 유용합니다. + <div class="note"><strong>참고: </strong> + <ul> + <li>HTML 4에서는 이 특성의 값으로 사용할 수 있는<code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>등과 같은 값을 공백으로 구분한 미디어 설명 문자열 목록, 예를 들어, 미디어 유형 및 그룹(<a href="/en-US/docs/CSS/@media">media types and groups</a>)일 수 있습니다.HTML5에서는 이를 확장하여 HTML 4에서 허용되는 값 외에 어떤 유형의<a href="/en-US/docs/CSS/Media_queries">media queries</a>든 사용할 수 있습니다.</li> + <li><a href="/en-US/docs/CSS/Media_queries">CSS3 Media Queries</a>를 지원하지 않는 브라우저는 이를 타당한 링크로 인식하지 않을 수 있으므로HTML 4에 정의되어 있는제한된 media query의 집합을 이용한 폴백(fallback) 링크를 설정하는 것을 잊지 말기바랍니다.</li> + </ul> + </div> + </dd> + <dt>{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}</dt> + <dd>A string indicating which referrer to use when fetching the resource: + <ul> + <li><code>no-referrer</code> means that the {{HTTPHeader("Referer")}} header will not be sent.</li> + <li><code>no-referrer-when-downgrade</code> means that no {{HTTPHeader("Referer")}} header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.</li> + <li><code>origin</code> means that the referrer will be the origin of the page, which is roughly the scheme, the host, and the port.</li> + <li><code>origin-when-cross-origin</code> means that navigating to other origins will be limited to the scheme, the host, and the port, while navigating on the same origin will include the referrer's path.</li> + <li><code>unsafe-url</code> means that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.</li> + </ul> + </dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>연결할 리소스와 현재 문서의 관계. <a href="/ko/docs/Web/HTML/Link_types">링크 유형</a>의 값을 공백으로 구분한 리스트를 지정해야 합니다.</dd> + <dt>{{HTMLAttrDef("sizes")}}</dt> + <dd>This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the {{HTMLAttrxRef("rel", "link")}} contains a value of <code>icon</code> or a non-standard type such as Apple's <code>apple-touch-icon</code>. It may have the following values: + <ul> + <li><code>any</code>, meaning that the icon can be scaled to any size as it is in a vector format, like <code>image/svg+xml</code>.</li> + <li>a white-space separated list of sizes, each in the format <code><em><width in pixels></em>x<em><height in pixels></em></code> or <code><em><width in pixels></em>X<em><height in pixels></em></code>. Each of these sizes must be contained in the resource.</li> + </ul> + + <div class="blockIndicator note"> + <p><strong>Note: </strong>Most icon formats are only able to store one single icon; therefore most of the time the {{HTMLAttrxRef("sizes")}} attribute contains only one entry. MS's ICO format does, as well as Apple's ICNS. ICO is more ubiquitous, so you should use this format if cross-browser support is a concern (especially for old IE versions).</p> + </div> + </dd> + <dt>{{htmlattrdef("title")}}</dt> + <dd>The <code>title</code> attribute has special semantics on the <code><link></code> element. When used on a <code><link rel="stylesheet"></code> it defines a <a href="/ko/docs/Web/CSS/Alternative_style_sheets">preferred or an alternate stylesheet</a>. Incorrectly using it may <a href="/ko/docs/Correctly_Using_Titles_With_External_Stylesheets">cause the stylesheet to be ignored</a>.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>이 특성은 링크된 콘텐츠의 타입을 정의하는데 사용됩니다. 특성의 값은<strong> text/html</strong>, <strong>text/css</strong>와 같은 MIME 타입이여야합니다. 이 특성은 링크된 스타일시트의 타입을 지정하는데 쓰이는것이 보통이며, text/css 값이 가장 흔합니다.</dd> +</dl> + +<h3 id="비표준_특성">비표준 특성</h3> + +<dl> + <dt>{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}</dt> + <dd>The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the <strong>title</strong> attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4.</dd> + <dt>{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}</dt> + <dd>This attribute identifies a resource that might be required by the next navigation and that the user agent should retrieve it. This allows the user agent to respond faster when the resource is requested in the future.</dd> + <dt>{{HTMLAttrDef("target")}} {{Non-standard_Inline}}</dt> + <dd>Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.</dd> +</dl> + +<div class="hidden"> +<h3 id="폐기된_특성">폐기된 특성</h3> + +<dl> + <dt>{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}</dt> + <dd>This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in {{rfc(2045)}}. The default value is <code>iso-8859-1</code>. + <div class="note"><strong>Usage note:</strong> To produce the same effect as this obsolete attribute, use the {{HTTPHeader("Content-Type")}} HTTP header on the linked resource.</div> + </dd> + <dt>{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}</dt> + <dd>The value of this attribute shows the relationship of the current document to the linked document, as defined by the {{HTMLAttrxRef("href", "link")}} attribute. The attribute thus defines the reverse relationship compared to the value of the <code>rel</code> attribute. <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Link_types">Link type values</a> for the attribute are similar to the possible values for {{HTMLAttrxRef("rel", "link")}}.</dd> + <dd> + <div class="blockIndicator note"> + <p><strong>Note:</strong> This attribute is considered obsolete by the WHATWG HTML living standard (which is the specification MDN treats as canonical). However, it's worth noting that <code>rev</code> is <em>not</em> considered obsolete in the W3C specification. That said, given the uncertainty, relying on <code>rev</code> is unwise.</p> + + <p>Instead, you should use the {{HTMLAttrxRef("rel", "link")}} attribute with the opposite <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Link_types">link type value</a>. For example, to establish the reverse link for <code>made</code>, specify <code>author</code>. Also this attribute doesn't stand for "revision" and must not be used with a version number, even though many sites misuse it in this way.</p> + </div> + </dd> +</dl> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="스타일_시트_포함하기">스타일 시트 포함하기</h3> + +<p>페이지에 스타일 시트를 포함하려면 다음 구문을 사용하세요.</p> + +<pre class="brush: html notranslate"><link href="style.css" rel="stylesheet"> +</pre> + +<h3 id="대체_스타일시트_제공하기">대체 스타일시트 제공하기</h3> + +<p><a href="/en-US/docs/Web/CSS/Alternative_style_sheets">대체 스타일시트</a>를 제공할 수도 있습니다.</p> + +<p>유저는 View>Page Style 메뉴에서 사용할 스타일시트를 고를수 있습니다. 이것은 유저가 페이지를 여러 버전으로 볼수 있는 방법을 제공합니다.</p> + +<pre class="brush: html notranslate"><link href="default.css" rel="stylesheet" title="Default Style"> +<link href="fancy.css" rel="alternate stylesheet" title="Fancy"> +<link href="basic.css" rel="alternate stylesheet" title="Basic"> +</pre> + +<h3 id="Providing_icons_for_different_usage_contexts">Providing icons for different usage contexts</h3> + +<p>You can include links to several different icons on the same page, and the browser will choose which one works best for its particular context using the <code>rel</code> and <code>sizes</code> values as hints.</p> + +<pre class="brush: html no-line-numbers notranslate"><!-- third-generation iPad with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"> +<!-- iPhone with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> +<!-- first- and second-generation iPad: --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"> +<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> +<link rel="apple-touch-icon-precomposed" href="favicon57.png"> +<!-- basic favicon --> +<link rel="icon" href="favicon32.png"></pre> + +<h3 id="스타일_시트_load_이벤트">스타일 시트 load 이벤트</h3> + +<p>당신은 load 이벤트를 통해 스타일시트가 언제 로드되는지 확인할수 있습니다. 비슷한 방법으로, 당신은 error 이벤트를 통해 스타일시트를 처리하는 도중 에러가 발생했는지 확인할 수 있습니다:</p> + +<pre class="brush: html notranslate"><script> +function sheetLoaded() { + // Do something interesting; the sheet has been loaded +} + +function sheetError() { + alert("An error occurred loading the stylesheet!"); +} +</script> + +<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()"> +</pre> + +<div class="note"><strong>참고:</strong> The <code>load</code> event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content.</div> + +<h2 id="기술_요약">기술 요약</h2> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>메타데이터 콘텐츠. <code><a href="/ko/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code>이 존재하면 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a> 및 <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th>가능한 콘텐츠</th> + <td>없음. {{Glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th>태그 생략</th> + <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th>가능한 부모 요소</th> + <td>메타데이터 콘텐츠를 허용하는 모든 요소. <code><a href="/ko/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code>이 존재하면 <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th>DOM 인터페이스</th> + <td>{{DOMxRef("HTMLLinkElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '<link>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No changes from latest snapshot</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '<link>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Added <code>crossorigin</code> and <code>sizes</code> attributes; extended values of <code>media</code> to any media queries; added numerous new values for <code>rel</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.3', '<link>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.link", 3)}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTTPHeader("Link")}} HTTP 헤더</li> +</ul> diff --git a/files/ko/web/html/element/main/index.html b/files/ko/web/html/element/main/index.html new file mode 100644 index 0000000000..3ac94eb7d0 --- /dev/null +++ b/files/ko/web/html/element/main/index.html @@ -0,0 +1,172 @@ +--- +title: <main> +slug: Web/HTML/Element/main +tags: + - Element + - HTML + - HTML grouping content + - HTML sections + - Reference +translation_of: Web/HTML/Element/main +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><main></code> 요소</strong>는 문서 {{HTMLElement("body")}}의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/main.html","tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>{{htmlattrxref("hidden")}} 속성 없이는 문서에 하나보다 많은 <code><main></code> 요소가 존재해선 안됩니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content_categories#Flow_content">플로우 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content_categories#Flow_content">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 요소. 단, <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element">구조적으로 올바른 <code><main></code> 요소</a>여야 합니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>기본적으로 <code>main</code> 역할 포함, {{ARIARole("presentation")}} 가능.</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><main></code> 요소의 콘텐츠는 문서의 유일한 내용이어야 합니다. 사이드바, 탐색 링크, 저작권 정보, 사이트 로고, 검색 폼 등 여러 문서에 걸쳐 반복되는 콘텐츠는 포함해선 안됩니다. 그러나 검색 폼이 페이지의 주요 기능이라면 예외로 둘 수 있습니다.</p> + +<p><code><main></code>은 요소 개요에 영향을 주지 않습니다. {{htmlelement("body")}} 등의 요소나 {{htmlelement("h2")}}와 같은 제목 요소와 달리 <code><main></code>은 페이지의 개념적 구조를 바꾸지 않으며 온전히 정보 제공용입니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><!-- other content --> + +<main> + <h1>Apples</h1> + <p>The apple is the pomaceous fruit of the apple tree.</p> + + <article> + <h2>Red Delicious</h2> + <p>These bright red apples are the most common found in many + supermarkets.</p> + <p>... </p> + <p>... </p> + </article> + + <article> + <h2>Granny Smith</h2> + <p>These juicy, green apples make a great filling for + apple pies.</p> + <p>... </p> + <p>... </p> + </article> + +</main> + +<!-- other content --></pre> + +<h2 id="Specifications" name="Specifications">접근성 고려사항</h2> + +<h3 id="랜드마크">랜드마크</h3> + +<p><code><main></code> 요소는 <a href="/ko/docs/Web/Accessibility/ARIA/Roles/Main_role"><code>main</code> 랜드마크</a> 역할과 동일하게 행동합니다. <a href="/ko/docs/Web/Accessibility/ARIA/ARIA_Techniques">랜드마크</a>는 접근성 보조기술이 문서의 큰 구획을 찾고 이동할 때 쓰입니다. 구형 브라우저를 지원할 필요가 없다면, <code>role="main"</code>보다 <code><main></code> 요소를 사용하세요.</p> + +<h3 id="건너뛰기_링크">건너뛰기 링크</h3> + +<p>건너뛰기 링크, 스킵 내비게이션(skipnav)은 접근성 보조기술이 주요 탐색 구획, 정보 배너 등 반복되는 큰 구획을 빠르게 넘어갈 수 있도록 지원하는 기법으로, 사용자가 페이지의 주요 내용으로 신속하게 접근할 수 있도록 도와줍니다.</p> + +<p><code><main></code> 요소에 {{htmlattrxref("id")}} 요소를 추가해 건너뛰기 링크의 대상으로 지정하세요.</p> + +<pre class="brush: html"><body> + <a href="#main-content">Skip to main content</a> + + <!-- navigation and header content --> + + <main id="main-content"> + <!-- main page content --> + </main> +</body> +</pre> + +<ul> + <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li> +</ul> + +<h3 id="읽기_모드">읽기 모드</h3> + +<p>브라우저 읽기 모드는 문서 콘텐츠를 변환할 때 <code><main></code> 요소와 더불어 <a href="/ko/docs/Web/HTML/Element/Heading_Elements">제목</a>과 <a href="/ko/docs/Web/HTML/Element#콘텐츠_구획">콘텐츠 구획</a> 요소를 사용합니다.</p> + +<ul> + <li><a href="https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9">Building websites for Safari Reader Mode and other reading apps.</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<p>대부분의 브라우저에서 <code><main></code> 요소를 지원합니다. 그러나 Internet Explorer 11 이하를 지원할 땐 <code><main></code> 요소에 <code>"main"</code> {{glossary("ARIA")}} 역할을 명시해 접근성을 확보하는 것이 좋습니다.</p> + +<pre class="brush: html"><main role="main"> + ... +</main> +</pre> + + + +<p>{{Compat("html.elements.main")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>기본 구조 요소: {{HTMLElement("html")}}, {{HTMLElement("head")}}, {{HTMLElement("body")}}</li> + <li>구획 관련 요소: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, {{HTMLElement("nav")}}</li> + <li><a href="/ko/docs/Web/Accessibility/ARIA/Roles/Main_role">ARIA: Main role</a></li> +</ul> diff --git a/files/ko/web/html/element/map/index.html b/files/ko/web/html/element/map/index.html new file mode 100644 index 0000000000..a990f09dce --- /dev/null +++ b/files/ko/web/html/element/map/index.html @@ -0,0 +1,121 @@ +--- +title: <map> +slug: Web/HTML/Element/map +tags: + - Element + - HTML + - HTML embedded content + - Multimedia + - Reference + - Web +translation_of: Web/HTML/Element/map +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><map></code> 요소</strong>는 {{htmlelement("area")}} 요소와 함께 이미지 맵(클릭 가능한 링크 영역)을 정의할 때 사용합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/map.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>모든 <a href="/ko/docs/Web/Guide/HTML/Content_categories#투명_콘텐츠_모델">투명한</a> 콘텐츠.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLMapElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("name")}}</dt> + <dd>맵을 참조할 때 사용할 수 있는 이름. 반드시 존재해야 하고, 값이 비면 안되며, 값에 공백 문자가 포함되어도 안됩니다. <code>name</code> 특성은 문서 내의 모든 <code><map></code>에서 유일해야 합니다. {{htmlattrxref("id")}} 특성이 존재하는 경우 <code>name</code>과 값이 동일해야 합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><map name="primary"> + <area shape="circle" coords="75,75,75" href="left.html"> + <area shape="circle" coords="275,75,75" href="right.html"> +</map> +<img usemap="#primary" src="https://placehold.it/350x150" alt="350 x 150 pic"></pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제", "350", "150")}}</p> + +<h3 id="예상_결과">예상 결과</h3> + +<p>키보드의 탭을 눌렀을 때, 위의 예제는 아래 사진처럼 나와야 합니다.</p> + +<p><code>left.html</code> 링크:<br> + <img alt="" src="https://mdn.mozillademos.org/files/14595/Screen%20Shot%202017-02-02%20at%2010.48.40%20PM.png" style="height: 156px; width: 356px;"></p> + +<p><code>right:html</code> 링크:<br> + <img alt="" src="https://mdn.mozillademos.org/files/14597/Screen%20Shot%202017-02-02%20at%2010.49.04%20PM.png" style="height: 157px; width: 355px;"></p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-map-element', '<map>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-map-element', '<map>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<map>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.map")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("a")}}</li> + <li>{{HTMLElement("area")}}</li> +</ul> diff --git a/files/ko/web/html/element/mark/index.html b/files/ko/web/html/element/mark/index.html new file mode 100644 index 0000000000..77a5325fc5 --- /dev/null +++ b/files/ko/web/html/element/mark/index.html @@ -0,0 +1,161 @@ +--- +title: <mark> +slug: Web/HTML/Element/mark +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/mark +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><mark></code> 요소</strong>는 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/mark.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p>일반적인 <code><mark></code> 요소의 사용처는 다음과 같습니다.</p> + +<ul> + <li>인용문({{HTMLElement("q")}}, {{HTMLElement("blockquote")}})에서는, 원본엔 별도 표시가 없으나 특별히 봐야 하는 부분을, 그리고 원저자는 특별히 중요하다고는 생각하지 않았으나 주시해야 할 필요가 있는 부분을 표시합니다. 형광펜을 사용해 중요해 보이는 책에 강조 표시를 추가하는 것처럼 생각하면 됩니다.</li> + <li>다른 경우, <code><mark></code>는 문서 콘텐츠에서 사용자의 현재 행동과 관련 있는 부분을 나타낼 때 사용합니다. 예를 들어, 현재 검색 키워드를 강조 표시할 때 사용할 수 있습니다.</li> + <li><code><mark></code>를 표시만을 위한 용도로 사용하지 마세요. {{htmlelement("span")}}과 적절한 CSS를 대신 사용해야 합니다.</li> +</ul> + +<div class="blockIndicator note"> +<p><code><mark></code>와 {{HTMLElement("strong")}} 요소의 차이점을 기억하세요. 텍스트에서, <code><mark></code>는 연관성을 가진 부분을, <code><strong></code>은 중요도를 가진 부분을 나타낼 때 사용합니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="관심_부분_표시하기">관심 부분 표시하기</h3> + +<p>첫 예제의 <code><mark></code> 요소는 인용문에서 사용자가 관심을 가질 텍스트를 강조할 때 사용합니다.</p> + +<pre class="brush: html"><blockquote> + It is a period of civil war. Rebel spaceships, striking from a + hidden base, have won their first victory against the evil + Galactic Empire. During the battle, <mark>Rebel spies managed + to steal secret plans</mark> to the Empire’s ultimate weapon, + the DEATH STAR, an armored space station with enough power to + destroy an entire planet. +</blockquote></pre> + +<p>{{EmbedLiveSample("관심_부분_표시하기", 650, 130)}}</p> + +<h3 id="상황에_맞는_구절_식별">상황에 맞는 구절 식별</h3> + +<p>다음 예제는 글의 검색 결과를 강조할 용도로 <code><mark></code>를 사용합니다.</p> + +<pre class="brush: html"><p>It is a dark time for the Rebellion. Although the Death +Star has been destroyed, <mark class="match">Imperial</mark> +troops have driven the Rebel forces from their hidden base and +pursued them across the galaxy.</p> + +<p>Evading the dreaded <mark class="match">Imperial</mark> +Starfleet, a group of freedom fighters led by Luke Skywalker +has established a new secret base on the remote ice world of +Hoth.</p></pre> + +<p>다른 <code><mark></code>와 검색 결과 표시를 구별하기 위해 사용자 지정 클래스 <code>"match"</code>를 추가로 적용했습니다.</p> + +<p>{{EmbedLiveSample("상황에_맞는_구절_식별", 650, 130)}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>대부분의 스크린 리더는 기본값에서 <code><mark></code> 요소의 존재를 표현하지 않습니다. 그러나 CSS {{cssxref("content")}} 속성과 {{cssxref("::before")}}, {{cssxref("::after")}} 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.</p> + +<pre class="brush: css">mark::before, +mark::after { + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +mark::before { + content: " [강조 시작] "; +} + +mark::after { + content: " [강조 끝] "; +} +</pre> + +<p>스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 강조표시의 유무가 꼭 필요할 때만 사용해야 합니다.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible) | The Paciello Group</a></li> + <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles | Adrian Roselli</a></li> +</ul> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-mark-element', '<mark>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-mark-element', '<mark>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.mark")}}</p> diff --git a/files/ko/web/html/element/menu/index.html b/files/ko/web/html/element/menu/index.html new file mode 100644 index 0000000000..c6034eb98e --- /dev/null +++ b/files/ko/web/html/element/menu/index.html @@ -0,0 +1,132 @@ +--- +title: <menu> +slug: Web/HTML/Element/menu +translation_of: Web/HTML/Element/menu +--- +<div>{{HTMLRef}}{{SeeCompatTable}}</div> + +<p><strong>HTML <code><menu></code> 요소</strong>는 사용자가 수행하거나 하는 명령 묶음을 말합니다. 이것은 스크린 위에 나오는 목록 메뉴와 눌려진 버튼 아래에 나오는 것과 같은 맥락 메뉴를 포함합니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>. Additionally, if in the <em>list menu</em> state, palpable content. (<em>list menu</em> is the default state, unless the parent element is a {{HTMLElement("menu")}} in the <em>context menu</em> state.)</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>If the element is in the <em>list menu</em> state: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, or alternatively, zero or more occurrences of {{HTMLElement("li")}}, {{HTMLElement("script")}}, and {{HTMLElement("template")}}.<br> + If the element is in the <em>context menu</em> state: zero or more occurrences, in any order, of {{HTMLElement("menu")}} (<em>context menu</em> state only), {{HTMLElement("menuitem")}}, {{HTMLElement("hr")}}, {{HTMLElement("script")}}, and {{HTMLElement("template")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLMenuElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="속성">속성</h2> + +<p>이 요소는 <a href="/en-US/docs/Web/HTML/Global_attributes">전역 속성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("label")}}</dt> + <dd>사용자에게 보여지는 메뉴의 이름입니다. Used within nested menus, to provide a label through which the submenu can be accessed. Must only be specified when the parent element is a {{HTMLElement("menu")}} in the <em>context menu</em> state.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>This attribute indicates the kind of menu being declared, and can be one of two values. + <ul> + <li><code>context</code>: The <em>context menu</em> state, which represents a group of commands activated through another element. This might be through the {{htmlattrxref("menu", "button")}} attribute of a {{HTMLElement("button")}}, or an element with a <a href="/en-US/docs/HTML/Global_attributes#attr-contextmenu"><code>contextmenu</code></a> attribute. When nesting {{HTMLElement("menu")}} elements directly within one another, this is the missing value default if the parent is already in this state.</li> + <li><code>list</code>: The <em>list menu</em> state, which represents a series of commands for user interaction. This is the missing value default, except where the parent element is a {{HTMLElement("menu")}} in the <em>context menu</em> state.</li> + </ul> + </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Example_1">Example 1</h3> + +<pre class="brush: html"><!-- A button, which displays a menu when clicked. --> +<button type="menu" menu="dropdown-menu"> + Dropdown +</button> + +<menu type="context" id="dropdown-menu"> + <menuitem label="Action"> + <menuitem label="Another action"> + <hr> + <menuitem label="Separated action"> +</menu> +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Example_1')}}</p> + +<h3 id="Example_2">Example 2</h3> + +<pre class="brush: html"><!-- A context menu for a simple editor, containing two menu buttons. --> +<menu> + <li> + <button type="menu" value="File" menu="file-menu"> + <menu type="context" id="file-menu"> + <menuitem label="New..." onclick="newFile()"> + <menuitem label="Save..." onclick="saveFile()"> + </menu> + </li> + <li> + <button type="menu" value="Edit" menu="edit-menu"> + <menu type="context" id="edit-menu"> + <menuitem label="Cut..." onclick="cutEdit()"> + <menuitem label="Copy..." onclick="copyEdit()"> + <menuitem label="Paste..." onclick="pasteEdit()"> + </menu> + </li> +</menu> +</pre> + +<h3 id="Result_2">Result</h3> + +<p>{{EmbedLiveSample('Example_2')}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-menu-element', '<menu>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-menu-element', '<menu>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.menu")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>Other list-related HTML Elements: {{HTMLElement("ol")}}, {{HTMLElement("ul")}}, {{HTMLElement("li")}} and the obsolete {{HTMLElement("dir")}}.</li> + <li>The <a href="/en-US/docs/HTML/Global_attributes#attr-contextmenu"><code>contextmenu</code></a> <a href="/en-US/docs/HTML/Global_attributes">global attribute</a> can be used on an element to refer to the <code>id</code> of a <code>menu</code> with the <code>context</code> {{htmlattrxref("type","menu")}}.</li> +</ul> diff --git a/files/ko/web/html/element/meta/index.html b/files/ko/web/html/element/meta/index.html new file mode 100644 index 0000000000..3454e4d866 --- /dev/null +++ b/files/ko/web/html/element/meta/index.html @@ -0,0 +1,151 @@ +--- +title: '<meta>: 문서 레벨 메타데이터 요소' +slug: Web/HTML/Element/meta +tags: + - Element + - HTML + - HTML document metadata + - Reference + - Web + - metadata +translation_of: Web/HTML/Element/meta +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><meta></code> 요소</strong>는 {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}}과 같은 다른 메타관련 요소로 나타낼 수 없는 {{glossary("Metadata", "메타데이터")}}를 나타냅니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td>메타데이터 콘텐츠. <code><a href="/ko/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code>이 존재하면 <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a> 및 <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th>가능한 콘텐츠</th> + <td>없음. {{Glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th>태그 생략</th> + <td>빈 요소이므로 여는 태그는 존재해야 하고 닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th>가능한 부모 요소</th> + <td><code><meta charset></code>, <code><meta http-equiv></code>인 경우 {{htmlelement("head")}} 요소. {{htmlattrxref("http-equiv", "meta")}}가 인코딩 선언이 아닌 경우 <code><head></code> 내의 {{htmlelement("noscript")}} 요소도 가능합니다.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th>DOM 인터페이스</th> + <td>{{domxref("HTMLMetaElement")}}</td> + </tr> + </tbody> +</table> + +<p><code>meta</code> 요소가 제공하는 메타데이터는 다음 네 유형 중 하나입니다.</p> + +<ul> + <li>{{htmlattrxref("name", "meta")}} 특성을 지정하면 전체 페이지에 적용되는 "문서 레벨 메타데이터"를 제공합니다.</li> + <li>{{htmlattrxref("http-equiv", "meta")}} 특성을 지정하면 유사한 이름의 HTTP 헤더가 제공하는 정보와 동일한 "프래그마 지시문"이 됩니다.</li> + <li>{{htmlattrxref("charset", "meta")}} 특성을 지정하면 문서 인코딩에 사용한 문자 인코딩을 나타내는 "문자 집합 선언"이 됩니다.</li> + <li>{{htmlattrxref("itemprop")}} 특성을 지정하면 "사용자 정의 메타데이터"를 제공합니다.</li> +</ul> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> {{htmlattrxref("name", "meta")}} 특성은 <code><meta></code> 요소에 대해 특정한 의미를 가집니다. 하나의 <code><meta></code> 요소에서, {{htmlattrxref("itemprop", "meta")}} 특성을 {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} 또는 {{htmlattrxref("charset", "meta")}} 특성과 함께 설정할 수 없습니다.</p> +</div> + +<dl> + <dt>{{htmlattrdef("charset")}}</dt> + <dd>페이지의 문자 인코딩을 선언합니다. 이 특성이 존재할 경우, 그 값은 반드시 문자열 "<code>utf-8</code>"의 대소문자 구분 없는 {{glossary("ASCII")}} 표현이어야 합니다.</dd> + <dt>{{htmlattrdef("content")}}</dt> + <dd>{{htmlattrxref("http-equiv", "meta")}} 또는 {{htmlattrxref("name", "meta")}} 특성의 값을 담습니다.</dd> + <dt>{{htmlattrdef("http-equiv")}}</dt> + <dd> + <p>프래그마 지시문을 정의합니다. 특성의 이름(<code><strong>http-equiv</strong>(alent)</code>)에서 알 수 있듯이, 가능한 값은 특정 HTTP 헤더입니다.</p> + + <ul> + <li><code>content-security-policy</code> + + <p>현재 페이지의 <a href="/ko/docs/Web/HTTP/Headers/Content-Security-Policy">콘텐츠 정책</a>을 정의할 수 있습니다. 대부분의 콘텐츠 정책은 허용하는 서버 출처와 스크립트 엔드포인트를 지정해 사이트 간 스크립트 공격 방어에 도움을 줍니다.</p> + </li> + <li><code>content-type</code> + <p>지정할 경우, <code>content</code> 특성의 값은 반드시 "<code>text/html; charset=utf-8</code>"이어야 합니다. <strong>참고:</strong> <code>text/html</code> <a href="/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME 유형</a>으로 제공하는 문서에서만 사용할 수 있으며, XML MIME 유형의 문서에서는 사용할 수 없습니다.</p> + </li> + <li><code>default-style</code> + <p>기본 <a href="/ko/docs/Web/CSS">CSS 스타일 시트</a> 세트의 이름을 지정합니다.</p> + </li> + <li><code>x-ua-compatible</code> + <p>지정할 경우, <code>content</code> 특성의 값은 반드시 "<code>IE=edge</code>"여야 합니다. 사용자 에이전트는 이 프래그마를 무시해야 합니다.</p> + </li> + <li><code>refresh</code> + <div>다음을 지정합니다.</div> + + <ul> + <li>{{htmlattrxref("content", "meta")}} 특성에 양의 정수 값을 설정한 경우, 페이지를 다시 불러오기 전까지의 초 단위 대기시간.</li> + <li>{{htmlattrxref("content", "meta")}} 특성이 양의 정수 값을 가지고 그 뒤를 문자열 <code>;url=</code>과 유효한 URL이 뒤따른다면, 해당 URL로 이동하기 전까지의 초 단위 대기시간.</li> + </ul> + + <h5 id="접근성_고려사항">접근성 고려사항</h5> + + <div><code>refresh</code> 값을 지정한 페이지의 경우 새로고침 사이 간격이 너무 짧을 우려가 있습니다. 스크린 리더 등의 보조 기술로 탐색하는 사용자는 자동 새로고침 이전에 페이지의 내용을 읽고 이해하지 못할 수 있습니다. 또한 저시력 사용자에게 있어, 갑작스럽고 사전 안내도 없는 콘텐츠 업데이트는 어지러울 수 있습니다.</div> + + <ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_—_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.1 explanations</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN Understanding WCAG, Guideline 3.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html">Understanding Success Criterion 2.2.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html">Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html">Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0</a></li> + </ul> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd> + <p><code>name</code>과 <code>content</code> 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공할 수 있습니다. <code>name</code>은 이름, <code>content</code>는 값을 담당합니다.</p> + + <p><a href="/ko/docs/Web/HTML/Element/meta/name">표준 메타데이터 이름</a> 문서에서 HTML 명세에 포함된 표준 메타데이터 목록을 살펴보세요.</p> + </dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html notranslate"><meta charset="utf-8"> + +<!-- 3초 후 리다이렉트 --> +<meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '<meta>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Added <code>itemprop</code> attribute</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<div>{{Compat("html.elements.meta")}}</div> diff --git a/files/ko/web/html/element/meta/name/index.html b/files/ko/web/html/element/meta/name/index.html new file mode 100644 index 0000000000..76333202b1 --- /dev/null +++ b/files/ko/web/html/element/meta/name/index.html @@ -0,0 +1,312 @@ +--- +title: 표준 메타데이터 이름 +slug: Web/HTML/Element/meta/name +tags: + - Attribute + - HTML + - HTML document metadata + - Reference + - metadata + - 메타데이터 +translation_of: Web/HTML/Element/meta/name +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{htmlelement("meta")}} 요소는 {{htmlattrxref("name", "meta")}} 특성을 메타데이터 이름으로, {{htmlattrxref("content", "meta")}} 특성을 값으로 하여 문서 메타데이터를 이름-값 쌍의 형태로 제공할 때 사용할 수 있습니다.</span></p> + +<h3 id="HTML_명세가_정의하는_표준_메타데이터_이름">HTML 명세가 정의하는 표준 메타데이터 이름</h3> + +<p>HTML 명세는 다음과 같은 표준 메타데이터 이름을 정의하고 있습니다.</p> + +<ul> + <li> + <p><code>application-name</code>: 웹 페이지에서 구동 중인 애플리케이션의 이름.</p> + + <div class="note"><strong>참고:</strong> + + <ul> + <li>브라우저가 이 값을 사용해 애플리케이션을 식별할 수 있습니다. {{htmlelement("title")}} 요소 역시 보통 애플리케이션 이름을 포함하지만, <code>application-name</code>과는 달리 문서 이름이나 상태 등 다른 정보도 존재할 수 있다는 점에서 차이가 있습니다.</li> + <li>단순한 웹 페이지에서는 <code>application-name</code>을 지정하지 말아야 합니다.</li> + </ul> + </div> + </li> + <li><code>author</code>: 문서 저작자.</li> + <li><code>description</code>: 페이지에 대한 짧고 정확한 요약. Firefox, Opera 등 여러 브라우저는 즐겨찾기 페이지의 기본 설명 값으로 <code>description</code> 메타데이터를 사용합니다.</li> + <li><code>generator</code>: 페이지를 생성한 소프트웨어의 식별자.</li> + <li><code>keywords</code>: 페이지의 콘텐츠와 관련된, 쉼표로 구분한 키워드 목록.</li> + <li><code>referrer</code>: 문서에서 시작하는 요청의 HTTP {{httpheader("Referer")}} 헤더를 아래 표와 같이 통제합니다. + <table class="standard-table"> + <caption><code><meta name="referrer"></code> 특성에 대한 <code>content</code> 특성의 값</caption> + <tbody> + <tr> + <td><code>no-referrer</code></td> + <td>HTTP {{httpheader("Referer")}} 헤더를 전송하지 않습니다.</td> + </tr> + <tr> + <td><code>origin</code></td> + <td>문서의 {{glossary("origin", "출처")}}를 전송합니다.</td> + </tr> + <tr> + <td><code>no-referrer-when-downgrade</code></td> + <td>목적지가 현재 문서와 동일하거나 더 높은(HTTP(S)→HTTPS) 보안 수준을 가진 경우 전체 URL을 전송하고, 더 취약(HTTPS→HTTP)한 경우 전송하지 않습니다. 기본 동작 방식입니다.</td> + </tr> + <tr> + <td><code>origin-when-cross-origin</code></td> + <td>동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 교차 출처 요청에는 출처만 전송합니다.</td> + </tr> + <tr> + <td><code>same-origin</code></td> + <td>동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 교차 출처 요청에는 아무 레퍼러 정보도 보내지 않습니다.</td> + </tr> + <tr> + <td><code>strict-origin</code></td> + <td>목적지가 현재 문서와 동일하거나 더 높은(HTTP(S)→HTTPS) 보안 수준을 가진 경우 출처를 전송하고, 더 취약(HTTPS→HTTP)한 경우 전송하지 않습니다.</td> + </tr> + <tr> + <td><code>strict-origin-when-cross-origin</code></td> + <td>동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 목적지가 현재 문서와 동일하거나 더 높은 보안 수준(HTTP(S)→HTTPS)을 가진 경우 자신의 출처를 전송합니다. 그 외의 경우 아무 레퍼러 정보도 보내지 않습니다.</td> + </tr> + <tr> + <td><code>unsafe-URL</code></td> + <td>동일 출처와 교차 출처 요청 모두에 대해서 전체 URL을 전송합니다.</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>참고:</strong> + + <ul> + <li><code><meta name="referrer"></code>의 값을 {{domxref("Document.write", "document.write()")}} 또는 {{domxref("Node.appendChild", "appendChild()")}}를 사용해 동적으로 삽입할 경우 레퍼러 동작을 예측할 수 없습니다.</li> + <li>여러 정책이 서로 충돌할 경우에는 <code>no-referrer</code> 정책을 사용합니다.</li> + </ul> + </div> + </li> + <li><code><a href="/ko/docs/Web/HTML/Element/meta/name/theme-color">theme-color</a></code>: 사용자 에이전트가 페이지 혹은 주위의 사용자 인터페이스를 표시할 때 사용해야 할 색상에 대한 힌트. <code>content</code> 특성은 유효한 CSS {{cssxref("<color>")}} 색상을 포함해야 합니다.</li> +</ul> + +<h3 id="다른_명세가_정의하는_표준_메타데이터_이름">다른 명세가 정의하는 표준 메타데이터 이름</h3> + +<p>CSS Color Adjustment 명세는 다음과 같은 메타데이터 이름을 정의합니다.</p> + +<ul> + <li> + <p><code>color-scheme</code>: 문서와 호환되는 하나 이상의 색채 조합.</p> + + <p>브라우저는 이 정보에 더해 자신과 장치의 사용자 설정을 함께 사용해 배경, 전경, 양식 컨트롤, 스크롤 바 등 대부분의 색상을 결정합니다. <code><meta name="color-scheme"></code>의 주 용도는 문서의 "다크 모드"와 "라이트 모드"중 호환 가능한 조합 및 둘 중 선호하는 쪽을 나타내는 것입니다.</p> + + <p><code>color-scheme</code>과 사용 가능한 {{htmlattrxref("content", "meta")}} 특성의 값은 다음과 같습니다.</p> + + <dl> + <dt><code>normal</code></dt> + <dd>문서가 특별한 색채 조합을 알지 못합니다. 렌더링 시 기본 색상 팔레트를 사용해야 합니다.</dd> + <dt>[<code>light</code> | <code>dark</code>]+</dt> + <dd>문서와 호환되는 하나 이상의 색채 조합. 동일한 색채 조합을 여러 번 지정하더라도 한 번 지정한 것과 다르지 않습니다. 여러 색채 조합을 명시하는 경우 문서는 맨 앞 항목을 선호하지만, 사용자가 원할 경우 다른 조합도 사용할 수 있음을 나타냅니다.</dd> + <dt><code>only light</code></dt> + <dd>문서가 오직 라이트 모드, 즉 밝은 배경과 어두운 전경색만 지원함을 나타냅니다. 명세에 따라 <code>only dark</code>는 유효하지 않습니다. 완전히 호환되지 않음에도 불구하고 문서를 다크 모드로만 렌더링 할 경우 콘텐츠를 읽을 수 없기 때문입니다. 지정하지 않은 경우, 모든 주요 브라우저는 라이트 모드를 기본값으로 사용합니다.</dd> + </dl> + + <p>예를 들어, 문서가 다크 모드를 선호하나 라이트 모드도 지원 가능하다는 것을 알리려면 다음과 같이 작성하세요.</p> + + <pre class="brush: html notranslate"><meta name="color-scheme" content="dark light"></pre> + + <p><code>name="color-scheme"</code>은 문서 전체의 선호 및 가능한 색채 조합을 지정한다면, CSS {{cssxref("color-scheme")}} 속성은 개별 요소 단위로 지정합니다. CSS {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} 미디어 기능을 사용하면 스타일이 현재 색채 조합에 적응하도록 작성할 수도 있습니다.</p> + </li> +</ul> + +<p>CSS Device Adaptation 명세는 다음과 같은 메타데이터 이름을 정의합니다.</p> + +<ul> + <li> + <p><code>viewport</code>: {{glossary("viewport", "뷰포트")}}의 초기 사이즈에 대한 힌트. 모바일 장치에서만 사용합니다.</p> + + <table class="fullwidth-table"> + <caption><code><meta name="viewport"></code>의 값</caption> + <thead> + <tr> + <th scope="col">값</th> + <th scope="col">가능한 하위 값</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>width</code></td> + <td>양의 정수 또는 <code>device-width</code></td> + <td>웹 사이트를 렌더링 하고자 하는 뷰포트 너비를 정의합니다.</td> + </tr> + <tr> + <td><code>height</code></td> + <td>양의 정수 또는 <code>device-height</code></td> + <td>웹 사이트를 렌더링 하고자 하는 뷰포트 높이를 정의합니다.</td> + </tr> + <tr> + <td><code>initial-scale</code></td> + <td><code>0.0</code>과 <code>10.0</code> 사이의 수</td> + <td>장치 너비(세로 모드에서는 <code>device-width</code>, 가로 모드에서는 <code>device-height</code>)와 뷰포트 너비의 비율을 정의합니다.</td> + </tr> + <tr> + <td><code>maximum-scale</code></td> + <td><code>0.0</code>과 <code>10.0</code> 사이의 수</td> + <td>가능한 최대 확대 비율을 정의합니다. <code>minimum-scale</code> 이상이어야 하며, 미만으로 지정한 경우의 동작은 정의되지 않았습니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다.</td> + </tr> + <tr> + <td><code>minimum-scale</code></td> + <td><code>0.0</code>과 <code>10.0</code> 사이의 수</td> + <td>가능한 최소 확대 비율을 정의합니다. <code>maximum-scale</code> 이하여야 하며, 초과한 값을 지정한 경우의 동작은 정의되지 않았습니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다.</td> + </tr> + <tr> + <td><code>user-scalable</code></td> + <td><code>yes</code> 또는 <code>no</code></td> + <td><code>no</code>인 경우 사용자가 웹 페이지를 확대할 수 없습니다. 기본값은 <code>yes</code>입니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다.</td> + </tr> + <tr> + <td><code>viewport-fit</code></td> + <td><code>auto</code>, <code>contain</code>, <code>cover</code></td> + <td> + <p><code>auto</code> 값은 초기 뷰포트 레이아웃에 영향을 주지 않으며, 전체 웹 페이지를 볼 수 있습니다.</p> + + <p><code>contain</code> 값은 디스플레이 내에 맞출 수 있는 가장 큰 사각형에 맞춰 뷰포트의 크기를 조절합니다.</p> + + <p><code>cover</code> 값은 뷰포트의 크기를 조절해 디스플레이 전체를 채웁니다. <a href="/ko/docs/Web/CSS/env">안전 영역</a> 환경 변수를 사용해 중요한 콘텐츠가 화면 밖에 놓이는 불상사가 없도록 하는 것이 좋습니다.</p> + </td> + </tr> + </tbody> + </table> + + <div class="note"><strong>참고:</strong> + + <ul> + <li>비록 표준은 아니지만, <code>viewport</code>의 사실상 표준적인 위치로 인해 대부분의 모바일 브라우저가 선언을 준수합니다.</li> + <li>장치와 브라우저마다 기본값이 다를 수 있습니다.</li> + </ul> + </div> + + <h5 id="Accessibility_concerns_with_viewport_scaling">Accessibility concerns with viewport scaling</h5> + + <div><code>user-scalable</code>을 <code>no</code>로 지정해 확대 기능을 비활성화하면 저시력 사용자가 페이지의 내용을 읽고 이해하는 것을 방해합니다.</div> + + <ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> + </ul> + + <h5 id="같이_보기">같이 보기</h5> + + <p>CSS {{cssxref("@viewport")}} @-규칙</p> + </li> +</ul> + +<h3 id="다른_메타데이터_이름">다른 메타데이터 이름</h3> + +<p><a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions 페이지</a>는 거대한 수의 비표준 메타데이터 목록을 포함합니다. 그러나 다음 메타데이터 이름을 포함한 일부 항목은 실제로도 꽤 자주 사용하고 있습니다.</p> + +<ul> + <li><code>creator</code>: 단체, 협회 등 문서 저작자의 이름. 다수의 저작자가 존재할 경우 다수의 {{HTMLElement("meta")}} 요소를 사용해야 합니다.</li> + <li><code>googlebot</code>은 <code>robots</code>의 동의어로, Googlebot(Google의 색인 크롤러)만 준수합니다..</li> + <li><code>publisher</code>: 문서를 출판한 자의 이름.</li> + <li><code>robots</code>: 협조적인 크롤러, 또는 "로봇"의 동작을 지정합니다. 아래 표의 항목을 쉼표로 구분한 목록을 값으로 사용합니다 + <table class="standard-table"> + <caption><code><meta name="robots"></code>의 값</caption> + <thead> + <tr> + <th scope="col">값</th> + <th scope="col">설명</th> + <th scope="col">사용처</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>index</code></td> + <td>크롤러가 페이지를 색인할 수 있습니다. (기본값)</td> + <td>모두</td> + </tr> + <tr> + <td><code>noindex</code></td> + <td>크롤러가 페이지를 색인하지 않도록 요청합니다.</td> + <td>모두</td> + </tr> + <tr> + <td><code>follow</code></td> + <td>크롤러가 페이지 내의 링크를 따라갈 수 있습니다. (기본값)</td> + <td>모두</td> + </tr> + <tr> + <td><code>nofollow</code></td> + <td>크롤러가 페이지 내의 링크를 따라가지 않도록 요청합니다.</td> + <td>모두</td> + </tr> + <tr> + <td><code>all</code></td> + <td><code>index, follow</code>와 동일합니다.</td> + <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td> + </tr> + <tr> + <td><code>none</code></td> + <td><code>noindex, nofollow</code>와 동일합니다.</td> + <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td> + </tr> + <tr> + <td><code>noarchive</code></td> + <td>크롤러가 페이지를 캐시에 포함하지 않도록 요청합니다.</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + <tr> + <td><code>nosnippet</code></td> + <td>검색 엔진 결과에 어떤 설명도 표시하지 않도록 지정합니다.</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + <tr> + <td><code>noimageindex</code></td> + <td>크롤러가 페이지 이미지를 색인하지 않도록 요청합니다.</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a></td> + </tr> + <tr> + <td><code>nocache</code></td> + <td><code>noarchive</code>와 동일합니다.</td> + <td><a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + </tbody> + </table> + + <div class="note"><strong>참고:</strong> + + <ul> + <li>협조적인 크롤러만 규칙을 존중합니다. 이메일 주소 수집기가 요청을 따를 것이라고 기대하지 마세요.</li> + <li>메타 태그의 규칙을 읽기 위해선 크롤러가 페이지에 접근을 하긴 해야 합니다. 대역폭을 아끼려면 {{glossary("robots.txt")}}를 사용하세요.</li> + <li>이미 등록된 페이지를 검색 결과에서 제거할 수단으로 <code>noindex</code>를 사용하는 것도 가능하지만, 수정 후 크롤러가 페이지에 재방문해야만 반영되므로 <code>robots.txt</code> 파일이 방문을 방지하고 있지는 않은지 확인하세요.</li> + <li><code>index</code>와 <code>noindex</code>, <code>follow</code>와 <code>nofollow</code>처럼 특정 값은 서로 배타적입니다. 그러나 같은 페이지에서 동시에 사용한 경우 크롤러의 행동은 정의되지 않았으며 둘 중 어느 것이라도 취할 수 있습니다.</li> + <li>Google과 Bing 등 일부 크롤러는 위의 값을 HTTP <code>X-Robot-Tags</code> 헤더에 추가해도 인식하므로, 이미지처럼 HTML이 아닌 문서에서도 동일한 설정을 적용할 수 있습니다.</li> + </ul> + </div> + </li> +</ul> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#standard-metadata-names', 'standard metadata names')}}</td> + </tr> + <tr> + <td>{{SpecName('CSS Color Adjust', '#color-scheme-meta', 'the "color-scheme" metadata name')}}</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Device', '#viewport-meta', 'the "viewport" metadata name')}}</td> + </tr> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', 'the "referrer" metadata name')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.meta.name")}}</p> diff --git a/files/ko/web/html/element/meter/index.html b/files/ko/web/html/element/meter/index.html new file mode 100644 index 0000000000..c2f6a8fcbf --- /dev/null +++ b/files/ko/web/html/element/meter/index.html @@ -0,0 +1,142 @@ +--- +title: <meter> +slug: Web/HTML/Element/meter +tags: + - Element + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/meter +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><meter></code> 요소</strong>는 특정 범위 내에서의 스칼라 값, 또는 백분율 값을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/meter.html", "tabbed-shorter")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#레이블_가능">레이블 가능</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>. 단, 다른 <code><meter></code> 요소는 사용할 수 없습니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLMeterElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>현재의 값. 최소와 최댓값(<code>min</code>과 <code>max</code> 특성)을 지정한 경우, 그 사이여야 합니다. 지정하지 않았거나 잘못된 값인 경우 <code>0</code>으로 간주합니다. 지정했으나 범위 바깥인 경우, 범위에 맞춰 나머지 값을 버립니다. + <div class="note"><strong>참고: </strong><code>value</code>가 <code>0</code> 이상 <code>1</code> 이하가 아닌 이상, <code>min</code>과 <code>max</code>를 정의해 <code>value</code> 값이 그 안에 들어가도록 해야 합니다.</div> + </dd> + <dt>{{htmlattrdef("min")}}</dt> + <dd>측정 범위의 가능한 최솟값. 지정할 경우 최댓값(<code>max</code> 특성) 미만이어야 합니다. 지정하지 않은 경우 <code>0</code>입니다.</dd> + <dt>{{htmlattrdef("max")}}</dt> + <dd>측정 범위의 가능한 최댓값. 지정할 경우 최솟값(<code>min</code> 특성)을 초과해야 합니다. 지정하지 않은 경우 <code>1</code>입니다.</dd> + <dt>{{htmlattrdef("low")}}</dt> + <dd>측정 범위 중 낮은 범위의 최댓값. 지정할 경우 전체 범위 최솟값(<code>min</code> 특성)을 초과해야 하며, 높은 범위 최댓값과 전체 범위 최댓값(각각 <code>high</code>와 <code>max</code> 특성) 미만이어야 합니다. 지정하지 않았거나 전체 범위 최솟값 미만인 경우, 전체 범위 최솟값과 같아집니다.</dd> + <dt>{{htmlattrdef("high")}}</dt> + <dd>측정 범위 중 높은 범위의 최솟값. 지정할 경우 전체 범위 최댓값(<code>max</code> 특성) 미만이어야 하며, 낮은 범위의 최댓값과 전체 범위 최솟값(각각 <code>low</code>와 <code>min</code> 특성)을 초과해야 합니다. 지정하지 않았거나 전체 범위 최댓값을 초과할 경우 전체 범위 최댓값과 같아집니다.</dd> + <dt>{{htmlattrdef("optimum")}}</dt> + <dd>이상적인 값. <code>min</code>과 <code>max</code> 특성으로 정의한 범위 내에 위치해야 합니다. <code>low</code>와 <code>high</code> 특성을 함께 사용한 경우, <code>optimum</code>은 어느 범위가 이상적인지 나타냅니다. 예를 들어, 값이 <code>min</code>과 <code>low</code> 사이에 위치한 경우, 측정 범위 중 낮은 범위가 이상적인 범위입니다.</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd><code><meter></code>와 연결할 {{htmlelement("form")}} 요소("양식 소유자"). 같은 문서에 존재하는 <code><form></code> 요소의 {{htmlattrxref("id")}} 특성 값을 사용해야 합니다. <code>form</code> 특성을 지정하지 않았으나 조상 중 <code><form></code> 요소가 존재하면 해당 <code><form></code>과 연결됩니다. <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number"><code><input type="number"></code></a>의 값 범위를 보여주는 등 <code><meter></code>를 양식 관련 콘텐츠로서 사용할 때만 지정하세요.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_예제">간단한 예제</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Heat the oven to <meter min="200" max="500" + value="350">350 degrees</meter>.</p> +</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("간단한_예제", 300, 60)}}</p> + +<p>Google Chrome에서는 다음 그림처럼 보입니다.</p> + +<p><img alt="meter1.png" class="default internal" src="/@api/deki/files/4940/=meter1.png"></p> + +<h3 id="높은_범위와_낮은_범위">높은 범위와 낮은 범위</h3> + +<p>{{htmlattrxref("min", "meter")}} 특성의 기본값이 0이므로 생략한 것을 참고하세요.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>He got a <meter low="69" high="80" max="100" + value="84">B</meter> on the exam.</p> +</pre> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample("높은_범위와_낮은_범위", 300, 60)}}</p> + +<p>Google Chrome에서는 다음 그림처럼 보입니다.</p> + +<p><img alt="meter2.png" class="default internal" src="/@api/deki/files/4941/=meter2.png"></p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-meter-element', '<meter>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-meter-element', '<meter>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.meter")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("progress")}}</li> +</ul> diff --git a/files/ko/web/html/element/nav/index.html b/files/ko/web/html/element/nav/index.html new file mode 100644 index 0000000000..35a952cc43 --- /dev/null +++ b/files/ko/web/html/element/nav/index.html @@ -0,0 +1,101 @@ +--- +title: '<nav>: 탐색 구획 요소' +slug: Web/HTML/Element/nav +tags: + - Element + - HTML + - HTML sections + - HTML5 + - Reference + - Web +translation_of: Web/HTML/Element/nav +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><nav></code> 요소</strong>는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/nav.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구획_콘텐츠">구획 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 규칙</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>문서의 모든 링크가 <code><nav></code> 요소 안에 있을 필요는 없습니다. <code><nav></code> 요소는 주요 탐색 링크 블록을 위한 요소입니다. 대개 {{htmlelement("footer")}} 요소가 <code><nav></code>에 들어가지 않아도 되는 링크를 포함합니다.</li> + <li><code><nav></code> 하나는 사이트 전체 탐색, 다른 하나는 현재 페이지 내 탐색으로 사용하는 등, 하나의 문서에서 여러 개의 {{HTMLElement("nav")}} 태그를 가질 수 있습니다. 이럴 때 <code><a href="/ko/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code>를 사용해 접근성을 향상할 수 있습니다.</li> + <li>스크린 리더 등 장애를 가진 사용자를 위한 사용자 에이전트는 최초 렌더링에서 탐색 전용 콘텐츠를 제외할지 결정할 때 <code><nav></code>를 참고합니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<pre class="brush:xml"><nav> + <ul> + <li><a href="#">Home</a></li> + <li><a href="#">About</a></li> + <li><a href="#">Contact</a></li> + </ul> +</nav> +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since latest W3C snapshot.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.nav")}}</p> diff --git a/files/ko/web/html/element/noscript/index.html b/files/ko/web/html/element/noscript/index.html new file mode 100644 index 0000000000..b4045a4008 --- /dev/null +++ b/files/ko/web/html/element/noscript/index.html @@ -0,0 +1,113 @@ +--- +title: <noscript> +slug: Web/HTML/Element/noscript +tags: + - Element + - HTML + - HTML scripting + - Reference + - Web +translation_of: Web/HTML/Element/noscript +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><noscript></code> 요소</strong>는 페이지의 스크립트 유형을 지원하지 않거나, 브라우저가 스크립트를 비활성화한 경우 보여줄 HTML 구획을 정의합니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#메타데이터_콘텐츠">메타데이터 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td> + <p>스크립트가 비활성 상태이며 자신이 {{HTMLElement("head")}} 요소의 자손인 경우, 순서대로</p> + + <ul> + <li>0개 이상의 {{htmlelement("link")}} 요소</li> + <li>0개 이상의 {{htmlelement("style")}} 요소</li> + <li>0개 이상의 {{htmlelement("meta")}} 요소</li> + </ul> + + <p>스크립트가 비활성 상태이나 <code><head></code> 요소의 자손이 아닌 경우 모든 투명 콘텐츠. 단, 다른 <code><noscript></code> 요소는 불가능합니다.</p> + + <p>그 외의 경우 플로우 콘텐츠와 구문 콘텐츠.</p> + </td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>구문 콘텐츠를 허용하는 모든 요소, 또는 {{htmlelement("head")}}. 단, 두 경우 모두 다른 <code><noscript></code> 요소가 존재하는 경우 불가능합니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><noscript> + <!-- anchor linking to external file --> + <a href="http://www.mozilla.com/">External Link</a> +</noscript> +<p>Rocks!</p> +</pre> + +<h3 id="스크립트_활성화_상태에서의_결과">스크립트 활성화 상태에서의 결과</h3> + +<p>Rocks!</p> + +<h3 id="스크립트_비활성화_상태에서의_결과">스크립트 비활성화 상태에서의 결과</h3> + +<p><a class="external" href="http://www.mozilla.com/">External Link</a></p> + +<p>Rocks!</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#the-noscript-element', '<noscript>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-scripting.html#the-noscript-element', '<noscript>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/scripts.html#h-18.3.1', '<noscript>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.noscript")}}</p> diff --git a/files/ko/web/html/element/object/index.html b/files/ko/web/html/element/object/index.html new file mode 100644 index 0000000000..b6b1c5da99 --- /dev/null +++ b/files/ko/web/html/element/object/index.html @@ -0,0 +1,117 @@ +--- +title: <object> +slug: Web/HTML/Element/object +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/object +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><object></code> 요소</strong>는 이미지나, 중첩된 브라우저 컨텍스트, 플러그인에 의해 다뤄질수 있는 리소스와 같은 외부 리소스를 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/object.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">컨텐츠 범주</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">플로우 컨텐츠</a>; <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">구문 컨텐츠</a>; <a href="/en-US/docs/HTML/Content_categories#Embedded_content" title="HTML/Content categories#Embedded content">포함된 컨텐츠</a>, palpable 컨텐츠; 만약 요소가 <strong>usemap </strong>속성을 가지고 있다면, <a href="/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">대화형 컨텐츠</a>; <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_content" title="HTML/Content categories#Form-associated content">form-associated</a> element.</li> + <li><dfn>허용된 컨텐츠</dfn> 0개 이상의 {{HTMLElement("param")}} elements, then <a href="/en-US/docs/HTML/Content_categories#Transparent_content_models" title="HTML/Content categories#Transparent content models">Transparent content</a>.</li> + <li><dfn>태그 생략</dfn> {{no_tag_omission}}</li> + <li><dfn>허용된 부모 요소</dfn><a href="/en-US/docs/HTML/Content_categories#Embedded_content" title="HTML/Content categories#Embedded content">포함된 컨텐츠</a>를 허용하는 모든 요소</li> + <li><dfn>DOM 인터페이스</dfn> {{domxref("HTMLObjectElement")}}</li> +</ul> + +<h2 id="속성">속성</h2> + +<p><span style="line-height: 21px;">이 속성은 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 속성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("archive")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>A space-separated list of URIs for archives of resources for the object.</dd> + <dt>{{htmlattrdef("border")}} {{deprecatedGeneric('inline','HTML4.01')}}; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>The width of a border around the control, in pixels.</dd> + <dt>{{htmlattrdef("classid")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>The URI of the object's implementation. It can be used together with, or in place of, the <strong>data</strong> attribute.</dd> + <dt>{{htmlattrdef("codebase")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>The base path used to resolve relative URIs specified by <strong>classid</strong>, <strong>data</strong>, or <strong>archive</strong>. If not specified, the default is the base URI of the current document.</dd> + <dt>{{htmlattrdef("codetype")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>The content type of the data specified by <strong>classid</strong>.</dd> + <dt>{{htmlattrdef("data")}}</dt> + <dd>리소스의 URL. 최소 하나의 <strong>data</strong>와 <strong>type</strong>가 정의되어야 합니다.</dd> + <dt>{{htmlattrdef("declare")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>The presence of this Boolean attribute makes this element a declaration only. The object must be instantiated by a subsequent <code><object></code> element. In HTML5, repeat the <object> element completely each that that the resource is reused.</dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> + <dd>object 요소와 관련된 form 요소. 이 속성의 값은 같은 문서의 {{HTMLElement("form")}} 요소의 ID 속성의 값이여야 합니다.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>표시될 리소스의 높이를 CSS 픽셀 단위로 지정합니다.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>유효한 브라우징 컨텍스트의 이름(HTML5) 또는, 컨트롤의 이름(HTML 4)</dd> + <dt>{{htmlattrdef("standby")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>A message that the browser can show while loading the object's implementation and data.</dd> + <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>The position of the element in the tabbing navigation order for the current document.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd><strong>data</strong>에 의해 지정된 리소스의 <a href="/en-US/docs/Glossary/Content_type">컨텐츠 타입</a>. 최소 한 개의 <strong>data</strong>와 <strong>type</strong>가 정의되어야 합니다.</dd> + <dt>{{htmlattrdef("typemustmatch")}} {{HTMLVersionInline(5)}}</dt> + <dd><strong>type</strong>와 리소스의 실제 <a href="/en-US/docs/Glossary/Content_type">컨텐츠 타입</a>이 일치해야되는지를 나타내는 불리언 속성</dd> + <dt>{{htmlattrdef("usemap")}}</dt> + <dd>{{HTMLElement("map")}} 요소에 대한 해쉬-이름 참조; #와 그 뒤에 map 요소의 {{htmlattrxref("name", "map")}} 값이 붙음</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>표시될 리소스의 가로 길이를 CSS 픽셀단위로 지정합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="포함된_플래시_무비">포함된 플래시 무비</h3> + +<pre class="brush: html"><!-- Embed a flash movie --> +<object data="move.swf" type="application/x-shockwave-flash"></object> + +<!-- Embed a flash movie with parameters --> +<object data="move.swf" type="application/x-shockwave-flash"> + <param name="foo" value="bar"> +</object> +</pre> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-iframe-element.html#the-object-element', '<object>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-object-element', '<object>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.3', '<object>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.object")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("embed")}}</li> + <li>{{HTMLElement("param")}}</li> +</ul> diff --git a/files/ko/web/html/element/ol/index.html b/files/ko/web/html/element/ol/index.html new file mode 100644 index 0000000000..52f8ef6dca --- /dev/null +++ b/files/ko/web/html/element/ol/index.html @@ -0,0 +1,207 @@ +--- +title: <ol> +slug: Web/HTML/Element/ol +tags: + - Element + - HTML + - HTML grouping content + - 'HTML:Flow content' + - Reference +translation_of: Web/HTML/Element/ol +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><ol></code> 요소</strong>는 정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>. 또한, 최소 하나의 {{htmlelement("li")}} 요소를 자식으로 둔다면 <a href="/ko/docs/Web/Guide/HTML/Content_categories#뚜렷한_컨텐츠">뚜렷한 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>0개 이상의 {{htmlelement("li")}}, {{htmlelement("script")}}, {{htmlelement("template")}} 요소.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{DOMxRef("HTMLOListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("reversed")}}</dt> + <dd>목록의 순서 역전 여부. 즉, 내부에 지정한 항목이 역순으로 배열된 것인지 나타냅니다.</dd> + <dt>{{htmlattrdef("start")}}</dt> + <dd>항목을 셀 때 시작할 수. <code>type</code>이 로마 숫자나 영어 문자인 경우에도 아라비아 숫자로 나타낸 정수(1, 2, 3...)만 가능합니다. 그러므로 영어 문자 "d"나 로마 숫자 "iv"부터 세려고 한다면 <code>start="4"</code>를 사용하세요.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>항목을 셀 때 사용할 카운터 유형. + <ul> + <li><code>'a'</code>는 소문자 알파벳,</li> + <li><code>'A'</code>는 대문자 알파벳,</li> + <li><code>'i'</code>는 소문자 로마 숫자,</li> + <li><code>'I'</code>는 대문자 로마 숫자,</li> + <li><code>'1'</code> 는 숫자(기본값)을 나타냅니다.</li> + </ul> + + <p><code>type</code>은 아래의 모든 {{htmlelement("li")}}에 적용되지만, {{htmlattrxref("type", "li")}} 특성을 가진 <code><li></code>는 그 값을 대신 사용합니다.</p> + + <div class="note"><strong>참고:</strong> 항목을 각각의 숫자/문자로 참조하는 기술적 또는 법률적 문서가 아니라면 CSS {{cssxref("list-style-type")}} 속성을 대신 사용하세요.</div> + </dd> +</dl> + +<h2 id="사용_일람">사용 일람</h2> + +<p>보통 정렬 목록의 항목은 선행하는 숫자나 문자 등 <a href="/ko/docs/Web/CSS/::marker">마커</a>와 함께 표시합니다.</p> + +<p><code><ol></code>과 {{htmlelement("ul")}}은 필요한 만큼 중첩할 수 있고, 서로 교차할 수도 있습니다.</p> + +<p><code><ol></code>과 {{htmlelement("ul")}}은 모두 목록을 나타냅니다. 차이가 있다면 <code><ol></code>에서는 순서가 중요하다는 점입니다. 예를 들어,</p> + +<ul> + <li>단계별 요리법</li> + <li>내비게이션</li> + <li>영양정보에서 비율의 내림차순으로 정렬한 원재료 목록</li> +</ul> + +<p>항목의 순서를 바꿨을 때 의미도 바뀐다면 <code><ol></code>을 사용하세요. 그렇지 않으면 {{htmlelement("ul")}}을 사용할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_예제">간단한 예제</h3> + +<pre class="brush: html"><ol> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ol> +</pre> + +<p>{{EmbedLiveSample("간단한_예제", 400, 100)}}</p> + +<h3 id="로마_숫자로_표기">로마 숫자로 표기</h3> + +<pre class="brush: html"><ol type="i"> + <li>Introduction</li> + <li>List of Greivances</li> + <li>Conclusion</li> +</ol> </pre> + +<p>{{EmbedLiveSample("로마_숫자로_표기", 400, 100)}}</p> + +<h3 id="start_특성_사용하기"><code>start</code> 특성 사용하기</h3> + +<pre class="brush: html"><p>Finishing places of contestants not in the winners’ circle:</p> + +<ol start="4"> + <li>Speedwalk Stu</li> + <li>Saunterin’ Sam</li> + <li>Slowpoke Rodriguez</li> +</ol> +</pre> + +<p>{{EmbedLiveSample("start_특성_사용하기", 400, 100)}}</p> + +<h3 id="중첩_목록">중첩 목록</h3> + +<pre class="brush: html"><ol> + <li>first item</li> + <li>second item <!-- closing </li> tag not here! --> + <ol> + <li>second item first subitem</li> + <li>second item second subitem</li> + <li>second item third subitem</li> + </ol> + </li> <!-- Here's the closing </li> tag --> + <li>third item</li> +</ol> +</pre> + +<p>{{EmbedLiveSample("중첩_목록", 400, 150)}}</p> + +<h3 id="정렬_목록_안의_비정렬_목록">정렬 목록 안의 비정렬 목록</h3> + +<pre class="brush: html"><ol> + <li>first item</li> + <li>second item <!-- Look, the closing </li> tag is not placed here! --> + <ul> + <li>second item first subitem</li> + <li>second item second subitem</li> + <li>second item third subitem</li> + </ul> + </li> <!-- Here is the closing </li> tag --> + <li>third item</li> +</ol> +</pre> + +<p>{{EmbedLiveSample("정렬_목록_안의_비정렬_목록", 400, 150)}}</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-ol-element', '<ol>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<ol>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.ol")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>리스트 관련 다른 요소: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}</li> + <li><code><ol></code> 요소와 유용하게 사용할 수 있는 CSS 속성 + <ul> + <li>서수를 표현할 방식을 지정하는 {{cssxref("list-style")}} 속성.</li> + <li>복잡한 중첩 목록을 처리하기 위한 <a href="/ko/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS 카운터</a></li> + <li>더 이상 사용하지 않는 <code>compact</code> 특성을 대체할 수 있는 {{cssxref("line-height")}}</li> + <li>항목의 들여쓰기를 조정하기 위한 {{cssxref("margin")}} 속성.</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/html/element/optgroup/index.html b/files/ko/web/html/element/optgroup/index.html new file mode 100644 index 0000000000..b735d6ec1b --- /dev/null +++ b/files/ko/web/html/element/optgroup/index.html @@ -0,0 +1,120 @@ +--- +title: <optgroup> +slug: Web/HTML/Element/optgroup +tags: + - Element + - Forms + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/optgroup +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><optgroup></code> 요소</strong>는 {{HTMLElement("select")}} 요소의 옵션을 묶을 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/optgroup.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>0개 이상의 {{htmlelement("option")}} 요소.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 바로 뒤따르는 요소가 다른 <code><optgroup></code>이거나, 자신이 부모의 마지막 자식이라면 닫는 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{HTMLElement("select")}} 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLOptGroupElement")}}</td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> <code><optgroup></code> 요소는 중첩할 수 없습니다.</p> +</div> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>지정한 경우 모든 하위 옵션을 선택할 수 없습니다. 브라우저에서, 비활성화 옵션은 주로 회색으로 보이며, 클릭과 포커스 등 모든 이벤트를 받지 않습니다.</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>옵션 그룹의 이름. 브라우저가 그룹의 이름을 표시할 때 사용할 수 있습니다. 필수로 지정해야 합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><select> + <optgroup label="Group 1"> + <option>Option 1.1</option> + </optgroup> + <optgroup label="Group 2"> + <option>Option 2.1</option> + <option>Option 2.2</option> + </optgroup> + <optgroup label="Group 3" disabled> + <option>Option 3.1</option> + <option>Option 3.2</option> + <option>Option 3.3</option> + </optgroup> +</select> +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-optgroup-element', '<optgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-optgroup-element', '<optgroup>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<optgroup>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.optgroup")}}</p> diff --git a/files/ko/web/html/element/option/index.html b/files/ko/web/html/element/option/index.html new file mode 100644 index 0000000000..8120464d9f --- /dev/null +++ b/files/ko/web/html/element/option/index.html @@ -0,0 +1,101 @@ +--- +title: <option> +slug: Web/HTML/Element/option +tags: + - Element + - Forms + - HTML + - HTML forms + - Reference +translation_of: Web/HTML/Element/option +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><option></code> 요소</strong>는 {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("datalist")}} 요소의 항목을 정의합니다.</span> 그러므로, <code><option></code>을 사용해 팝업 메뉴 등 목록에서 하나의 항목을 나타낼 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/option.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>텍스트. 이스케이프 처리한 문자(<code>&eacute;</code> 등)도 가능.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 바로 뒤따르는 요소가 {{htmlelement("optgroup")}}, 다른 <code><option></code>이거나, 자신이 부모의 마지막 자식이라면 닫는 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("datalist")}} 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLOptionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>지정한 경우 이 옵션을 선택할 수 없습니다. 브라우저에서, 비활성화 옵션은 주로 회색으로 보이며, 클릭과 포커스 등 모든 이벤트를 받지 않습니다. <code><option></code>에 <code>disabled</code> 특성을 추가하지 않더라도, {{HTMLElement("optgroup")}} 등 조상 요소로 인해 비활성화될 수 있습니다.</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>옵션의 뜻을 나타내는 텍스트. 지정하지 않은 경우, 요소의 텍스트 콘텐츠를 대신 사용합니다.</dd> + <dt>{{htmlattrdef("selected")}}</dt> + <dd>지정한 경우 초기에 이 옵션을 선택한 상태로 설정합니다. {{htmlattrxref("multiple", "select")}}를 지정하지 않은 {{HTMLElement("select")}} 요소의 자손인 경우, 하나의 <code><option></code>만 <code>selected</code> 특성을 가질 수 있습니다.</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>양식 데이터를 구성할 때 사용할 값. 지정하지 않은 경우, 요소의 텍스트 콘텐츠를 대신 사용합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<p>{{HTMLElement("select")}} 요소를 참고하세요.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-option-element', '<option>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-option-element', '<option>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<option>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.option")}}</p> diff --git a/files/ko/web/html/element/output/index.html b/files/ko/web/html/element/output/index.html new file mode 100644 index 0000000000..24e154783d --- /dev/null +++ b/files/ko/web/html/element/output/index.html @@ -0,0 +1,104 @@ +--- +title: '<output>: 출력 요소' +slug: Web/HTML/Element/output +tags: + - Element + - HTML + - HTML forms + - 'HTML:Flow content' + - Reference + - Web +translation_of: Web/HTML/Element/output +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><output></code> 요소</strong>는 웹 사이트나 앱에서 계산이나 사용자 행동의 결과를 삽입할 수 있는 컨테이너 요소입니다.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#양식_관련_콘텐츠">양식 관련 콘텐츠</a>(나열됨, 레이블 가능, 초기화 가능), 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLOutputElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("for")}}</dt> + <dd>스페이스로 구분한, 다른 여러 요소 {{htmlattrxref("id")}}의 목록. 목록에 포함된 요소가 출력 결과에 공헌했거나 영향을 주었음을 나타냅니다.</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd><code><output></code>과 연결할 {{HTMLElement("form")}} 요소("양식 소유자"). 같은 문서에 존재하는 <code><form></code> 요소의 {{htmlattrxref("id")}} 특성 값을 사용해야 합니다. <code>form</code> 특성을 지정하지 않았으나 조상 중 <code><form></code> 요소가 존재하면 해당 <code><form></code>과 연결됩니다.</dd> + <dd><code>form</code> 특성을 사용하면 <code><output></code>을 <code><form></code> 요소에 넣지 않고도 연결할 수 있고, 조상 중 <code><form></code>이 있더라도 소유자를 재정의할 수 있습니다.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>요소의 이름. {{domxref("HTMLFormElement.elements", "form.elements")}} API에서 사용합니다.</dd> +</dl> + +<p><code><output></code>의 값, 이름, 콘텐츠는 양식 전송 시 제출되지 않습니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> + <input type="range" id="b" name="b" value="50" /> + + <input type="number" id="a" name="a" value="10" /> = + <output name="result" for="a b">60</output> +</form></pre> + +<p>{{ EmbedLiveSample('예제')}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>많은 브라우저는 <code><output></code>을 마치 <code><a href="/ko/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">aria-live</a></code> 특성이 존재하는 것처럼 구현합니다. 따라서 접근성 기술은 포커스가 바뀌지 않더라도 <code><output></code> 내부의 UI 상호작용 결과를 표현할 것입니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-output-element', '<output>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-output-element', '<output>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.output")}}</p> diff --git a/files/ko/web/html/element/p/index.html b/files/ko/web/html/element/p/index.html new file mode 100644 index 0000000000..9a993c089e --- /dev/null +++ b/files/ko/web/html/element/p/index.html @@ -0,0 +1,175 @@ +--- +title: <p> +slug: Web/HTML/Element/p +tags: + - Element + - HTML + - HTML grouping content + - Reference + - Web +translation_of: Web/HTML/Element/p +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><p></code> 요소</strong>는 하나의 문단을 나타냅니다.</span> 시각적인 매체에서, 문단은 보통 인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있습니다.</p> + +<p>문단은 블록 레벨 요소이며, 자신의 닫는 태그(<code></p></code>) 이전에 다른 블록 레벨 태그가 분석되면 자동으로 닫힙니다. 아래의 "태그 생략" 항목을 참고하세요.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/p.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>시작 태그는 필수입니다. 닫는 태그는 {{HTMLElement("p")}} 요소의 바로 뒤에 {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}}, {{HTMLElement("p")}} 요소가 위치하는 경우, 또는 부모 태그의 콘텐츠가 더 존재하지 않고 부모가 {{HTMLElement("a")}} 요소가 아닐 때 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLParagraphElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>첫 번째 문단입니다. + 첫 번째 문단입니다. + 첫 번째 문단입니다. + 첫 번째 문단입니다.</p> +<p>두 번째 문단입니다. + 두 번째 문단입니다. + 두 번째 문단입니다. + 두 번째 문단입니다.</p></pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제')}}</p> + +<h2 id="문단_꾸미기">문단 꾸미기</h2> + +<p>브라우저 기본 스타일은 문단끼리 한 줄의 간격으로 분리합니다. 첫 줄 들여쓰기 등 다른 구분 방법은 {{glossary("CSS")}}를 통해 사용할 수 있습니다.</p> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><p>독자 입장에선 문단 사이를 여백으로 구분하는게 제일 읽기 쉽지만, +첫 줄 들여쓰기로도 구분할 수 있습니다. 들여쓰기는 보통 인쇄매체에서 +공간과 종이를 아끼기 위해 사용합니다.</p> + +<p>학교 과제나 초안 등 나중에 편집할 글은 여백과 들여쓰기 둘 다 사용합니다. +그러나 완성한 글에 둘 다 사용하는건 불필요하고 초보적으로 여겨집니다.</p> + +<p>아주 오래된 글에서는 문단을 특수기호 ¶, <i>필크로</i>(단락 기호)로 +구분했습니다. 그러나 답답하고 읽기 힘들어 지금은 사용하지 않습니다.</p> + +<p>얼마나 읽기 힘들까요? 직접 알아보세요. + <button data-toggle-text="안돼! 다시 돌려놔요!">단락 기호 써보기</button> +</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { + margin: 0; + text-indent: 3ch; +} + +p.pilcrow { + text-indent: 0; + display: inline; +} +p.pilcrow + p.pilcrow::before { + content: " ¶ "; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">document.querySelector('button').addEventListener('click', function (event) { + document.querySelectorAll('p').forEach(function (paragraph) { + paragraph.classList.toggle('pilcrow'); + }); + var newButtonText = event.target.dataset.toggleText; + var oldText = event.target.innerText; + event.target.innerText = newButtonText; + event.target.dataset.toggleText = oldText; +});</pre> + +<h3 id="결과_2">결과</h3> + +<p>{{EmbedLiveSample('문단_꾸미기')}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>콘텐츠를 문단으로 나누면 페이지의 접근성을 높입니다. 스크린 리더 등 보조 기술은 다음 문단으로 넘어갈 수 있는 단축키 등을 제공하므로, 시각적 매체의 여백이 사용자의 빠른 콘텐츠 탐색을 돕는 것과 같은 효과를 얻을 수 있습니다.</p> + +<p>빈 <code><p></code> 요소를 사용해 문단 사이에 여백을 추가하면 스크린 리더 사용자에게 부정적인 경험을 줄 수 있습니다. 스크린 리더가 문단의 존재는 알려주겠지만, 더 읽을 내용이 없기 때문입니다. 따라서 스크린 리더 사용자가 혼란을 느낄 수 있습니다.</p> + +<p>여분의 공간이 필요하다면 {{cssxref("margin")}} 등 {{glossary("CSS")}} 속성을 통해 적용하세요.</p> + +<pre class="brush: html">p { + margin-bottom: 2em; // 문단 다음 여백을 늘림 +}</pre> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '<p>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.p")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("hr")}}</li> + <li>{{HTMLElement("br")}}</li> +</ul> diff --git a/files/ko/web/html/element/param/index.html b/files/ko/web/html/element/param/index.html new file mode 100644 index 0000000000..73cc02c32f --- /dev/null +++ b/files/ko/web/html/element/param/index.html @@ -0,0 +1,116 @@ +--- +title: '<param>: 객체 매개변수 요소' +slug: Web/HTML/Element/param +tags: + - Element + - HTML + - HTML embedded content + - Reference + - Web +translation_of: Web/HTML/Element/param +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><param></code> 요소</strong>는 {{HTMLElement("object")}} 요소의 매개변수를 정의합니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리 </a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>없음. {{Glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{HTMLElement("object")}}. 모든 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a> 이전에 위치해야 함.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLParamElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("name")}}</dt> + <dd>매개변수의 이름.</dd> + <dt>{{ htmlattrdef("value") }}</dt> + <dd>매개변수의 값.</dd> +</dl> + +<div class="hidden"> +<h3 id="Deprecated_attributes">Deprecated attributes</h3> + +<dl> + <dt>{{htmlattrdef("type")}} {{deprecated_inline}}</dt> + <dd>Only used if the <code>valuetype</code> is set to <code>ref</code>. Specifies the MIME type of values found at the URI specified by value.</dd> + <dt>{{htmlattrdef("valuetype")}} {{deprecated_inline}}</dt> + <dd>Specifies the type of the <code>value</code> attribute. Possible values are: + <ul> + <li><code>data</code>: Default value. The value is passed to the object's implementation as a string.</li> + <li><code>ref</code>: The value is a URI to a resource where run-time values are stored.</li> + <li><code>object</code>: An ID of another {{HTMLElement("object")}} in the same document.</li> + </ul> + </dd> +</dl> +</div> + +<h2 id="예제">예제</h2> + +<p>{{HTMLElement("object")}} 페이지의 예제를 확인해주세요.</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'iframe-embed-object.html#the-param-element', '<param>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-param-element', '<param>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.3.2', '<param>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.param")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("object")}}</li> +</ul> diff --git a/files/ko/web/html/element/pre/index.html b/files/ko/web/html/element/pre/index.html new file mode 100644 index 0000000000..9cc0ef51ca --- /dev/null +++ b/files/ko/web/html/element/pre/index.html @@ -0,0 +1,150 @@ +--- +title: <pre> +slug: Web/HTML/Element/pre +tags: + - Element + - HTML + - HTML grouping content + - 'HTML:Flow content' + - Reference + - Web +translation_of: Web/HTML/Element/pre +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><pre></code> 요소</strong>는 미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현합니다.</span> 텍스트는 보통 고정폭 글꼴을 사용해 렌더링하고, 요소 내 공백문자를 그대로 유지합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLPreElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> + +<div class="hidden"> +<dl> + <dt>{{htmlattrdef("cols")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Contains the <em>preferred</em> count of characters that a line should have. It was a non-standard synonym of {{htmlattrxref("width", "pre")}}. To achieve such an effect, use CSS styling instead.</dd> + <dt>{{htmlattrdef("width")}} {{obsolete_inline}}</dt> + <dd>Contains the <em>preferred</em> count of characters that a line should have. Though technically still implemented, this attribute has no visual effect; to achieve such an effect, use CSS styling instead.</dd> + <dt>{{htmlattrdef("wrap")}} {{non-standard_inline}}</dt> + <dd>Is a <em>hint</em> indicating how the overflow must happen. In modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use CSS styling instead.</dd> +</dl> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>CSS로 글자 색을 바꾸는건 쉽습니다.</p> +<pre> +body { + color:red; +} +</pre> +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="Specifications" name="Specifications">접근성 고려사항</h2> + +<p><code><pre></code> 요소로 만든 이미지나 도표에 대한 대체 설명을 지정하는 것이 중요합니다. 대체 설명은 분명하고 간결하게 이미지 또는 도표 콘텐츠를 설명해야 합니다.</p> + +<p>시력이 낮은 사용자가 스크린 리더와 같은 보조 기술을 사용 중이라면, 미리 서식 적용한 텍스트의 문자를 차례대로 읽어서는 이게 무엇을 의미하는지 이해하지 못할 수 있습니다.</p> + +<p>{{htmlelement("figure")}}과 {{htmlelement("figcaption")}}에 더해 {{htmlattrxref("id")}}와 <a href="/ko/docs/Web/Accessibility/ARIA">ARIA</a> <code>role</code>과 <code>aria-labelledby</code> 특성을 조합하면 <code><pre></code>를 마치 이미지처럼 표현하면서 <code><figcaption></code>을 대체 설명으로 사용할 수 있습니다.</p> + +<h3 id="예제_2">예제</h3> + +<pre><figure role="img" aria-labelledby="cow-caption"> + <pre> + _______________________ +< 나는 이 분야의 전문가다. > + ----------------------- + \ ^__^ + \ (oo)\_______ + (__)\ )\/\ + ||----w | + || || + </pre> + <figcaption id="cow-caption"> + 소 한 마리가 "나는 이 분야의 전문가다"라고 말하고 있습니다. 소는 미리 서식을 적용한 텍스트로 그려져있습니다. + </figcaption> +</figure> +</pre> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-pre-element', '<pre>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No significant change from {{SpecName("HTML WHATWG")}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '<pre>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>No significant change from {{SpecName("HTML4.01")}}</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '<dl>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Deprecated the <code>cols</code> attribute</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat("html.elements.pre")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>CSS: {{ Cssxref('white-space') }}, {{ Cssxref('word-break') }}</li> +</ul> diff --git a/files/ko/web/html/element/progress/index.html b/files/ko/web/html/element/progress/index.html new file mode 100644 index 0000000000..c586671c0d --- /dev/null +++ b/files/ko/web/html/element/progress/index.html @@ -0,0 +1,122 @@ +--- +title: <progress> +slug: Web/HTML/Element/progress +tags: + - Element + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/progress +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><progress></code> 요소</strong>는 어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띕니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 레이블 가능, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC#%EA%B5%AC%EB%AC%B8_%EC%BD%98%ED%85%90%EC%B8%A0">.</a> 단, 다른 <code><progress></code> 요소는 사용할 수 없습니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLProgressElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{ htmlattrdef("max") }}</dt> + <dd><code><progress></code> 요소가 나타내는 작업에 필요한 작업량. 지정하는 경우, 반드시 0보다 크고 유효한 부동소수점 숫자여야 합니다. 기본값은 1입니다.</dd> + <dt>{{ htmlattrdef("value") }}</dt> + <dd><code><progress></code> 요소가 나타내는 작업을 완료한 양. 유효현 부동소수점 숫자여야 하고, <code>max</code> 특성을 지정한 경우 0 이상 <code>max</code> 이하, 그렇지 않으면 0 이상 1 이하여야 합니다. <code>value</code> 특성이 없으면 미결정 상태로, 현재 작업의 종료 시점을 예측할 수 없음을 나타냅니다.</dd> +</dl> + +<div class="note"> +<p><strong>참고:</strong> {{htmlelement("meter")}} 요소와 달리, 최솟값은 항상 0이며 <code>min</code> 특성을 지정할 수 없습니다.</p> +</div> + +<div class="note"> +<p><strong>참고:</strong> CSS {{cssxref(":indeterminate")}} <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>를 사용하면 미결정 상태의 진행 표시줄을 선택할 수 있습니다. 값을 지정한 진행 표시줄을 미결정 상태로 바꾸려면 {{domxref("Element.removeAttribute", "element.removeAttribute('value')")}}를 사용해 <code>value</code> 특성을 제거해야 합니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><progress value="70" max="100">70 %</progress> +</pre> + +<h3 id="결과">결과</h3> + +<p>{{ EmbedLiveSample("예제", 200, 50) }}</p> + +<p>Windows 7에서는 다음과 같은 모습으로 나타납니다.</p> + +<p><img alt="progress-firefox.JPG" class="default internal" src="/@api/deki/files/6031/=progress-firefox.JPG"></p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-progress-element', '<progress>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-progress-element', '<progress>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.progress")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{htmlelement("meter")}}</li> + <li>{{ cssxref(":indeterminate") }}</li> + <li>{{ cssxref("-moz-orient") }}</li> + <li>{{ cssxref("::-moz-progress-bar") }}</li> + <li>{{ cssxref("::-ms-fill") }}</li> + <li>{{ cssxref("::-webkit-progress-bar") }}</li> + <li>{{ cssxref("::-webkit-progress-value") }}</li> + <li>{{ cssxref("::-webkit-progress-inner-element") }}</li> +</ul> diff --git a/files/ko/web/html/element/q/index.html b/files/ko/web/html/element/q/index.html new file mode 100644 index 0000000000..2634e98b63 --- /dev/null +++ b/files/ko/web/html/element/q/index.html @@ -0,0 +1,111 @@ +--- +title: '<q>: 인라인 인용문 요소' +slug: Web/HTML/Element/q +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/q +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><q></code>요소</strong>는 둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다.</span> 대부분의 브라우저에서는 앞과 뒤에 따옴표를 붙여 표현합니다. <code><q></code>는 줄 바꿈이 없는 짧은 경우에 적합합니다. 긴 인용문은 {{htmlelement("blockquote")}} 요소를 사용하세요.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/q.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLQuoteElement")}}</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>참고:</strong> 오래된 브라우저에서는 앞뒤 따옴표를 적용하려면 추가 스타일을 사용해야 할 수 있습니다.</p> +</div> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>인용문의 출처 문서나 메시지를 가리키는 URL. 인용문의 맥락 혹은 출처 정보를 가리킬 용도입니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><p>Mozilla 재단의 웹사이트에 따르면, + <q + cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0 + 은 2004년 처음 공개되어 큰 성공을 거두었습니다.</q></p></pre> + +<p>{{EmbedLiveSample('예제')}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-q-element', '<q>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-q-element', '<q>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<q>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.q")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>긴 인용문을 위한 {{HTMLElement("blockquote")}} 요소.</li> + <li>출처 표기를 위한 {{HTMLElement("cite")}} 요소.</li> +</ul> diff --git a/files/ko/web/html/element/rb/index.html b/files/ko/web/html/element/rb/index.html new file mode 100644 index 0000000000..b34272a9e3 --- /dev/null +++ b/files/ko/web/html/element/rb/index.html @@ -0,0 +1,150 @@ +--- +title: '<rb>: 루비 베이스 요소' +slug: Web/HTML/Element/rb +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Ruby + - Text + - Web +translation_of: Web/HTML/Element/rb +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><rb></code> 요소</strong>는 {{HTMLElement("ruby")}} 표기의 기반 텍스트 구성요소(루비 주석을 적용하려는 글자)를 나눌 때 사용합니다.</span> 하나의 <code><rb></code> 요소는 기반 텍스트에서의 최소 단위를 하나 감싸야 합니다.</p> + +<div class="hidden">\{{EmbedInteractiveExample("pages/tabbed/rb.html", "tabbed-standard")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>{{htmlelement("ruby")}} 요소의 자손.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>바로 뒤따르는 요소가 {{HTMLElement("rt")}}, {{HTMLElement("rtc")}}, {{HTMLElement("rp")}}, 다른 <code><rb></code> 요소거나, 자신이 부모의 마지막 요소라면 닫는 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{htmlelement("ruby")}} 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>루비 주석은 일본어 후리가나, 타이완어 주음부호와 같이 동아시아 문자의 발음 표기에 사용합니다. <code><rb></code> 요소는 기반 텍스트의 각 조각을 나타내는 용도입니다.</li> + <li><code><rb></code>는 {{glossary("empty element", "빈 요소")}}가 아니지만, 보통 소스 코드에는 여는 태그만 사용해 루비 마크업을 덜 복잡하고 읽기 쉽게 합니다. 브라우저가 렌더링 때 알아서 닫는 태그를 추가합니다.</li> + <li>각각의 <code><rb></code> / 기반 조각 하나마다 {{htmlelement("rt")}} 요소 하나를 작성해야 합니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 "경복궁"의 한자/한글 표기를 병행합니다.</p> + +<pre class="brush: html"><ruby> + <rb>景<rb>福<rb>宮 + <rp>(</rp><rt>경<rt>복<rt>궁<rp>)</rp> +</ruby></pre> + +<p>세 개의 <code><rb></code> 요소를 사용해 기반 글자(한자)를 세 개로 나눴습니다. 반면, 한글 표기는 세 개의 {{htmlelement("rt")}} 요소를 사용합니다.</p> + +<p>세 개의 기반 조각을 완전히 분리해 작성할 수도 있다는 점을 알아두세요. 이 때는 <code><rb></code> 요소를 사용하지 않아도 됩니다.</p> + +<pre class="brush: html"><ruby> + 景 <rp>(</rp><rt>경</rt><rp>)</rp> + 福 <rp>(</rp><rt>복</rt><rp>)</rp> + 宮 <rp>(</rp><rt>궁</rt><rp>)</rp> +</ruby></pre> + +<div class="hidden"> +<div id="with-ruby"> +<pre class="brush: html"><ruby> <rb>景<rb>福<rb>宮 <rp>(</rp><rt>경<rt>복<rt>궁<rp>)</rp> </ruby> +</pre> + +<pre class="brush: css">body { + font-size: 22px; +}</pre> +</div> +</div> + +<p>결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("with-ruby", "100%", 60)}}</p> + +<p>루비 주석을 지원하지 않는 브라우저에서는 아래와 같이 출력합니다.</p> + +<div id="without-ruby"> +<div class="hidden"> +<pre class="brush: html">景福宮 (경복궁)</pre> + +<pre class="brush: css">body { + font-size: 22px; +} +</pre> +</div> +</div> + +<p>{{EmbedLiveSample("without-ruby", "100%", 60)}}</p> + +<div class="note"> +<p><strong>참고</strong>: {{HTMLElement("ruby")}} 요소 참고서를 방문해 다른 예제도 살펴보세요.</p> +</div> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-rb-element', '<rb>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.rb")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("ruby")}}</li> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li> + <p>{{HTMLElement("rtc")}}</p> + </li> +</ul> diff --git a/files/ko/web/html/element/rp/index.html b/files/ko/web/html/element/rp/index.html new file mode 100644 index 0000000000..9a803de3c5 --- /dev/null +++ b/files/ko/web/html/element/rp/index.html @@ -0,0 +1,134 @@ +--- +title: '<rp>: 루비 대체 괄호 요소' +slug: Web/HTML/Element/rp +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Ruby + - Web +translation_of: Web/HTML/Element/rp +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><rp></code> 요소</strong>는 {{htmlelement("ruby")}} 요소를 사용한 루비 주석을 지원하지 않는 경우 보여줄 괄호를 제공할 때 사용합니다.</span> {{htmlelement("rt")}} 요소를 감싸는 여는 괄호와 닫는 괄호를 각각의 <code><rp></code> 요소로 나타내야 합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/rp.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>텍스트.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>바로 뒤따르는 요소가 {{HTMLElement("rt")}}, 다른 <code><rp></code> 요소거나, 자신이 부모의 마지막 요소라면 닫는 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{htmlelement("ruby")}} 요소. <code><rp></code>는 {{htmlelement("rt")}} 요소의 바로 앞 또는 바로 뒤에 위치해야 합니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만을 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>루비 주석은 일본어 후리가나, 타이완어 주음부호와 같이 동아시아 문자의 발음 표기에 사용합니다. <code><rp></code> 요소는 {{htmlelement("ruby")}} 요소를 지원하지 않는 브라우저에서 루비 주석을 구분할 수 있는 텍스트(주로 괄호)를 제공합니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 한자료 표기한 "경복궁"의 각 글자에 루비 주석을 적용합니다.</p> + +<div id="with-ruby"> +<pre class="brush: html"><ruby> + 景 <rp>(</rp><rt>경</rt><rp>)</rp> + 福 <rp>(</rp><rt>복</rt><rp>)</rp> + 宮 <rp>(</rp><rt>궁</rt><rp>)</rp> +</ruby></pre> + +<div class="hidden"> +<pre class="brush: css">body { + font-size: 22px; +}</pre> +</div> +</div> + +<p>결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("with-ruby", "100%", 60)}}</p> + +<p>루비 주석을 지원하지 않는 브라우저에서는 아래와 같이 출력합니다.</p> + +<div id="without-ruby"> +<div class="hidden"> +<pre class="brush: html">景 (경) 福 (복) 宮 (궁)</pre> + +<pre class="brush: css">body { + font-size: 22px; +} +</pre> +</div> +</div> + +<p>{{EmbedLiveSample("without-ruby", "100%", 60)}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-rp-element', '<rp>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-rp-element', '<rp>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.rp")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("ruby")}}</li> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li>{{HTMLElement("rtc")}}</li> +</ul> diff --git a/files/ko/web/html/element/rt/index.html b/files/ko/web/html/element/rt/index.html new file mode 100644 index 0000000000..5cde18c84c --- /dev/null +++ b/files/ko/web/html/element/rt/index.html @@ -0,0 +1,129 @@ +--- +title: '<rt>: 루비 텍스트 요소' +slug: Web/HTML/Element/rt +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Ruby + - Web +translation_of: Web/HTML/Element/rt +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><rt></code> 요소</strong>는 동아시아 문자의 루비 주석에서 발음, 번역 등을 나타내는 텍스트 부분을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/rt.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>바로 뒤따르는 요소가 {{htmlelement("rp")}}, 다른 <code><rt></code> 요소거나 자신이 부모의 마지막 요소라면 닫는 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{htmlelement("ruby")}} 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 {{htmlelement("ruby")}} 요소를 사용해 한자의 발음을 표기합니다.</p> + +<div id="with-ruby"> +<pre class="brush: html"><ruby> + 漢 <rt>한</rt> + 字 <rt>자</rt> +</ruby> +</pre> + +<div class="hidden"> +<pre class="brush: css">body { + font-size: 22px; +} +</pre> +</div> +</div> + +<p>결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("with-ruby", 600, 60)}}</p> + +<p>브라우저가 루비를 지원하지 않는 경우엔 다음처럼 보일 것입니다.</p> + +<div id="without-ruby"> +<div class="hidden"> +<pre class="brush: html">漢 한 字 자</pre> + +<pre class="brush: css">body { + font-size: 22px; +} +</pre> +</div> +</div> + +<p>{{EmbedLiveSample("without-ruby", 600, 60)}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-rt-element', '<rt>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-rt-element', '<rt>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.rt")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("ruby")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li>{{HTMLElement("rtc")}}</li> +</ul> diff --git a/files/ko/web/html/element/rtc/index.html b/files/ko/web/html/element/rtc/index.html new file mode 100644 index 0000000000..9fd51a5c36 --- /dev/null +++ b/files/ko/web/html/element/rtc/index.html @@ -0,0 +1,121 @@ +--- +title: '<rtc>: 루비 텍스트 콘테이너 요소' +slug: Web/HTML/Element/rtc +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/rtc +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><rtc></code> 요소</strong>는 {{htmlelement("rb")}} 요소가 표시하는 문자의 의미에 대한 주석을 나타냅니다.</span> <code><rb></code>는 발음({{htmlelement("rt")}})과 의미(<code><rtc></code>) 둘 다 가질 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/rtc.html", "tabbed-standard")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a> 또는 {{htmlelement("rt")}} 요소.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>바로 뒤따르는 요소가 {{htmlelement("rb")}}, {{htmlelement("rt")}}, 다른 <code><rtc></code> 요소거나, 자신이 부모의 마지막 요소라면 닫는 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{htmlelement("ruby")}} 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html highlight[8]"><div class="info"> + <ruby> + <rbc> + <rb>馬</rb><rt>마</rt> + <rb>來</rb><rt>래</rt> + <rb>西</rb><rt>서</rt> + <rb>亞</rb><rt>아</rt> + </rbc> + <rtc>말레이시아</rtc> + </ruby> +</div> +</pre> + +<div class="hidden"> +<pre class="brush: css">.info { + padding-top: 10px; + font-size: 36px; +} +</pre> +</div> + +<p>{{EmbedLiveSample("예제", 600, 120)}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML5.2', 'textlevel-semantics.html#the-rtc-element', '<rtc>')}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'textlevel-semantics.html#the-rtc-element', '<rtc>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rtc-element', '<rtc>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.rtc")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("ruby")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rbc")}}</li> +</ul> diff --git a/files/ko/web/html/element/ruby/index.html b/files/ko/web/html/element/ruby/index.html new file mode 100644 index 0000000000..7a8dffa036 --- /dev/null +++ b/files/ko/web/html/element/ruby/index.html @@ -0,0 +1,110 @@ +--- +title: <ruby> +slug: Web/HTML/Element/ruby +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/ruby +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><ruby></code> 요소</strong>는 루비 주석을 나타냅니다. 루비 주석은 동아시아 문자의 발음을 표기할 때 사용합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ruby.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="Examples" name="Examples">예제</h2> + +<h3 id="문자별_표기">문자별 표기</h3> + +<pre class="brush:html"><ruby> + 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> + 字 <rp>(</rp><rt>ji</rt><rp>)</rp> +</ruby></pre> + +<p>{{EmbedLiveSample("문자별_표기")}}</p> + +<h3 id="단어별_표기">단어별 표기</h3> + +<pre class="brush:html"><ruby> + 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> +</ruby></pre> + +<p>{{EmbedLiveSample("단어별_표기")}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ruby-element', '<ruby>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-ruby-element', '<ruby>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.ruby")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li>{{HTMLElement("rtc")}}</li> + <li>{{HTMLElement("rbc")}}</li> +</ul> diff --git a/files/ko/web/html/element/s/index.html b/files/ko/web/html/element/s/index.html new file mode 100644 index 0000000000..8edc9424cc --- /dev/null +++ b/files/ko/web/html/element/s/index.html @@ -0,0 +1,126 @@ +--- +title: <s> +slug: Web/HTML/Element/s +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/s +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><s></code> 요소</strong>는 글자에 취소선, 즉 글자를 가로지르는 선을 그립니다.</span> <code><s></code> 요소를 사용해 이제 관계 없거나 더 이상 정확하지 않은 부분을 나타내세요. 그러나, <code><s></code>는 문서의 편집 기록을 나타내는 용도로는 적합하지 않습니다. 상황에 따라 {{HTMLElement("del")}}과 {{HTMLElement("ins")}} 요소를 대신 사용하세요.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/s.html", "tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 요소</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><s>Today's Special: Salmon</s> SOLD OUT<br> +</pre> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>대부분의 스크린 리더는 기본값에서 <code><s></code> 요소의 존재를 표현하지 않습니다. 그러나 CSS {{cssxref("content")}} 속성과 {{cssxref("::before")}}, {{cssxref("::after")}} 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.</p> + +<pre class="brush: css">s::before, +s::after { + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +s::before { + content: " [취소선 시작] "; +} + +s::after { + content: " [취소선 끝] "; +} +</pre> + +<p>스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 취소선의 유무가 꼭 필요할 때만 사용해야 합니다.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible) | The Paciello Group</a></li> + <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles | Adrian Roselli</a></li> +</ul> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','semantics.html#the-s-element','s element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','textlevel-semantics.html#the-s-element','s element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.s")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>자료가 <strong>삭제</strong>된 경우 사용하는 {{HTMLElement("del")}} 요소.</li> + <li><code><s></code> 요소의 시각적 요소를 재현할 수 있는 CSS {{cssxref("text-decoration-line")}} 속성.</li> +</ul> diff --git a/files/ko/web/html/element/samp/index.html b/files/ko/web/html/element/samp/index.html new file mode 100644 index 0000000000..44c10296f9 --- /dev/null +++ b/files/ko/web/html/element/samp/index.html @@ -0,0 +1,156 @@ +--- +title: '<samp>: 출력 예시 요소' +slug: Web/HTML/Element/samp +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/samp +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><samp></code> 요소</strong>는 컴퓨터 프로그램 출력의 예시(혹은 인용문)를 나타냅니다.</span> 보통 브라우저의 기본 고정폭 글씨체(보통 Courier, Lucida Console)를 사용해 렌더링합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/samp.html", "tabbed-shorter")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p>브라우저가 <code><samp></code> 요소에 사용하는 기본 글씨체는 CSS를 사용해 바꿀 수 있습니다. 그러나 브라우저의 사용자 설정값이 모든 CSS보다 우선할 수도 있습니다.</p> + +<p>기본 글씨체를 덮어쓸 수 있는 CSS는 다음과 같은 형태입니다.</p> + +<pre class="brush: css">samp { + font-family: "Courier"; +}</pre> + +<div class="note"> +<p><strong>참고:</strong> 웹사이트나 앱의 JavaScript 코드 출력을 담을 컨테이너 요소가 필요하다면 {{HTMLElement("output")}} 요소를 사용해야 합니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="기본_예제">기본 예제</h3> + +<p>다음 간단한 예제는 문단이 프로그램 출력 예시를 포함하고 있습니다.</p> + +<pre class="brush: html"><p>프로세스가 완료되면 유틸리티가 <samp>Scan complete. Found <em>N</em> results.</samp> +를 출력합니다. 출력을 확인한 후 다음 단계로 진행하세요.</p></pre> + +<p>결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("기본_예제", 650, 100)}}</p> + +<h3 id="사용자_입력을_포함한_출력_예시">사용자 입력을 포함한 출력 예시</h3> + +<p><code><samp></code> 블록 안에 {{htmlelement("kbd")}} 요소를 중첩해서 사용자가 입력하는 텍스트 예제를 나타낼 수 있습니다. 다음 예제 코드는 Linux 또는 macOS 콘솔 세션의 텍스트 복사본을 나타냅니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><pre> +<samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "Hello world"</kbd> +MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62 + +<span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre></pre> + +<p>{{HTMLElement("span")}}을 사용해 셸 프롬프트, 콘솔 커서 등 예제 텍스트의 특정 부분에 다른 스타일을 적용했습니다. 또, <code><kbd></code>를 사용해 사용자가 입력한 텍스트를 나타내고 있습니다.</p> + +<h4 id="CSS">CSS</h4> + +<p>원하는 외형을 얻을 수 있는 CSS는 다음과 같습니다.</p> + +<pre class="brush: css">.prompt { + color: #b00; +} + +samp > kbd { + font-weight: bold; +} + +.cursor { + color: #00b; +}</pre> + +<p>프롬프트와 커서에 강렬하지 않은 색을 입히고, 예제 텍스트의 입력 부분을 굵게 하는 단순한 코드입니다.</p> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("사용자_입력을_포함한_출력_예시", 650, 120)}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-samp-element', '<samp>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-samp-element', '<samp>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<samp>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.samp")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>관련 요소: {{HTMLElement("kbd")}}, {{HTMLElement("code")}}, {{HTMLElement("pre")}}</li> + <li>스크립트로 생성한 출력을 담는 {{HTMLElement("output")}} 요소</li> +</ul> diff --git a/files/ko/web/html/element/script/index.html b/files/ko/web/html/element/script/index.html new file mode 100644 index 0000000000..15c1b924b4 --- /dev/null +++ b/files/ko/web/html/element/script/index.html @@ -0,0 +1,220 @@ +--- +title: '<script>: 스크립트 요소' +slug: Web/HTML/Element/script +tags: + - Element + - HTML + - HTML scripting + - 'HTML:Flow content' + - 'HTML:Metadata content' + - 'HTML:Phrasing content' + - 'HTML:Script-supporting element' + - Reference + - Web +translation_of: Web/HTML/Element/script +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><script></code> 요소</strong>는 데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 JavaScript 코드와 함께 씁니다.</span> <a href="/ko/docs/Web/API/WebGL_API">WebGL</a>의 GLSL 셰이더 프로그래밍 언어, <a href="/ko/docs/Glossary/JSON">JSON</a> 등 다른 언어와도 사용할 수 있습니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#메타데이터_콘텐츠">메타데이터 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><code>text/javascript</code>와 같은 동적 스크립트.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#메타데이터_콘텐츠">메타데이터 콘텐츠</a> 또는 <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용한 아무 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLScriptElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("async")}}</dt> + <dd> + <p>일반 스크립트에 <code>async</code> 속성이 존재하면 HTML 구문 분석 중에도 스크립트를 가져오며, 사용 가능해지는 즉시 평가를 수행합니다.</p> + + <p><a href="/ko/docs/Web/JavaScript/Guide/Modules">모듈 스크립트</a>에 <code>async</code> 속성이 존재하면 모듈 스크립트와 모든 의존 스크립트를 지연 큐에서 실행하므로 함께 병렬로 불러오며, 이와 동시에 구문 분석을 수행하고 사용 가능해지는 즉시 평가합니다.</p> + + <p>기존 방식은 브라우저가 HTML 분석을 계속하기 전에 스크립트를 불러오고 평가했어야 하므로, <code>async</code> 속성을 사용하면 <strong>분석기를 멈추는 JavaScript</strong>를 제거할 수 있습니다. <code>defer</code>도 비슷한 효력을 냅니다.</p> + + <p><code>async</code>는 불리언 속성입니다. 속성이 존재하면 참을 나타내고, 속성이 존재하지 않으면 거짓을 나타냅니다.</p> + + <p>{{anch("브라우저 호환성")}}을 참고하세요.</p> + </dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>일반 <code>script</code> 요소는 표준 {{glossary("CORS")}}를 통과하지 못했을 때 {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}}에 최소한의 정보만 넘깁니다. <code>crossorigin</code> 속성은 정적 미디어에 대해 별도의 도메인을 사용하는 사이트의 오류 기록을 허용하기 위해 사용할 수 있습니다. 유효한 인수에 대한 보다 자세한 설명은 <a href="/ko/docs/Web/HTML/Attributes/crossorigin">CORS 설정 속</a>성 문서를 참고하세요.</dd> + <dt>{{htmlattrdef("defer")}}</dt> + <dd> + <p>브라우저가 스크립트를 문서 분석 이후에, 그러나 {{event("DOMContentLoaded")}} 발생 이전에 실행해야 함을 나타내는 불리언 속성입니다.</p> + + <p><code>defer</code> 속성을 가진 스크립트는 자신의 평가가 끝나기 전까지 <code>DOMContentLoaded</code> 이벤트의 발생을 막습니다.</p> + + <div class="warning"> + <p><code>src</code> 속성이 존재하지 않을 때(인라인 스크립트인 경우 등)에는 아무런 효과도 없으므로 사용해서는 안됩니다.</p> + + <p>또한 <a href="/ko/docs/Web/JavaScript/Guide/Modules">모듈 스크립트</a>는 기본적으로 지연 평가하므로, <code>defer</code>를 지정해도 변화가 없습니다.</p> + </div> + + <p><code>defer</code> 속성을 가진 스크립트는 문서상의 순서를 따라 실행됩니다.</p> + + <p>기존 방식은 브라우저가 HTML 분석을 계속하기 전에 스크립트를 불러오고 평가했어야 하므로, <code>defer</code> 속성을 사용하면 <strong>분석기를 멈추는 JavaScript</strong>를 제거할 수 있습니다. <code>async</code>도 비슷한 효과를 가집니다.</p> + </dd> + <dt>{{htmlattrdef("integrity")}}</dt> + <dd>{{glossary("user agent", "사용자 에이전트")}}가 가져온 리소스에 예기치 못한 변형이 존재하는지 검사할 때 사용할 인라인 메타데이터입니다. <a href="/ko/docs/Web/Security/Subresource_Integrity">하위 리소스 무결성</a> 문서를 참고하세요.</dd> + <dt>{{htmlattrdef("nomodule")}}</dt> + <dd><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES2015 모듈</a>을 지원하는 브라우저에서는 실행하지 않을 스크립트임을 나타내는 불리언 특성입니다. 모듈화 JavaScript를 지원하지 않는 오래된 브라우저가 사용할 대체 스크립트에 사용할 수 있습니다.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("nonce")}}</dt> + <dd><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src"><code>script-src</code> <code>Content-Security-Policy</code></a>의 화이트리스트에 스크립트를 등록하기 위한, 암호화된 일회용 숫자(논스, nonce)입니다. 서버는 고유한 일회용 숫자값을 정책을 전송할 때마다 생성해야 합니다. 자원의 정책을 우회할 수 없도록, 추측할 수 없는 임시값을 제공하는 것이 중요합니다.</dd> + <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt> + <dd>스크립트를 가져올 때, 또는 스크립트가 다른 리소스를 가져올 때 전송할 <a href="/ko/docs/Web/API/Document/referrer">리퍼러</a>를 나타냅니다. + <ul> + <li><code>no-referrer</code>: {{HTTPHeader("Referer")}} 헤더를 전송하지 않습니다.</li> + <li><code>no-referrer-when-downgrade</code> (기본값): {{glossary("TLS")}}({{glossary("HTTPS")}}) 지원을 하지 않는 {{glossary("origin", "출처")}}에 대해서는 {{HTTPHeader("Referer")}} 헤더를 전송하지 않습니다.</li> + <li><code>origin</code>: <code>Referer</code> 헤더가 요청 출처({{glossary("protocol", "스킴")}}, {{glossary("host", "호스트")}}, {{glossary("port", "포트")}})를 포함합니다.</li> + <li><code>origin-when-cross-origin</code>: <a href="/ko/docs/Web/Security/Same-origin_policy">동일 출처</a> 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 교차 출처 요청에는 출처만 전송합니다.</li> + <li><code>same-origin</code>: 동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 교차 출처 요청에는 아무 레퍼러 정보도 보내지 않습니다.</li> + <li><code>strict-origin</code>: 목적지가 현재 문서와 동일하거나 더 높은(HTTP(S)→HTTPS) 보안 수준을 가진 경우 출처를 전송하고, 더 취약(HTTPS→HTTP)한 경우 전송하지 않습니다.</li> + <li><code>strict-origin-when-cross-origin</code>: 동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 목적지가 현재 문서와 동일하거나 더 높은 보안 수준(HTTP(S)→HTTPS)을 가진 경우 자신의 출처를 전송합니다. 그 외의 경우 아무 레퍼러 정보도 보내지 않습니다.</li> + <li><code>unsafe-url</code>: 동일 출처와 교차 출처 요청 모두에 대해서 전체 URL을 전송합니다. TLS로 보호하는 리소스에서 안전하지 않은 출처에 경로까지 노출하므로 <strong>안전하지 않습니다</strong>.</li> + </ul> + + <div class="blockIndicator note"> + <p><strong>참고</strong>: 빈 문자열 값(<code>""</code>)은 기본값이자 <code>referrerpolicy</code> 특성을 지원하지 않는 경우 사용하는 대체값입니다. <code>referrerpolicy</code>를 <code><script></code> 요소에 명시하지 않은 경우 더 상위 단계의 정책, 즉 문서 자체나 도메인의 정책을 따라갑니다. 상위 단계 정책도 사용할 수 없을 땐 빈 문자열을 <code>no-referrer-when-downgrade</code>로 간주합니다.</p> + </div> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>외부 스크립트를 가리키는 {{glossary("URI")}}입니다. 문서 내에 스크립트를 직접 삽입하는 것 대신 사용할 수 있습니다.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd> + <p>스크립트의 유형을 나타냅니다. 다음 다섯개의 범주 중 하나에 속할 수 있습니다.</p> + + <ul> + <li><strong>생략 또는 JavaScript MIME 유형:</strong> 스크립트가 JavaScript임을 나타냅니다. 이 경우, HTML5 명세는 웹 작성자가 불필요한 <code>type</code>을 포함하지 않고 완전히 제외할 것을 촉구합니다. 보다 오래된 브라우저에서는 <code>type</code> 특성의 값으로 삽입 혹은 (<code>src</code> 특성으로) 불러온 스크립트의 언어를 표시하곤 했습니다. JavaScript MIME 유형은 <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types">명세에 나열</a>되어 있습니다.</li> + <li><strong><code>module</code>:</strong> 스크립트를 JavaScript 모듈로 간주합니다. 스크립트 콘텐츠 처리가 <code>charset</code>과 <code>defer</code> 특성의 영향을 받지 않습니다. <code>module</code>의 더 자세한 사용법은 MDN의 <a href="/ko/docs/Web/JavaScript/Guide/Modules">JavaScript 모듈 안내서</a>를 참고하세요. 기존 스크립트와 달리, 모듈 스크립트는 교차 출처 가져오기 시 CORS 프로토콜을 사용해야 합니다.</li> + <li><strong>다른 모든 값:</strong> 내장 콘텐츠를 브라우저가 처리하지 않을 데이터 블록으로 간주합니다. 개발자는 반드시 유효하면서 JavaScript가 아닌 MIME 유형을 지정해야 합니다. <code>src</code> 특성을 무시합니다.</li> + </ul> + </dd> +</dl> + +<div class="hidden"> +<h3 id="Deprecated_attributes">Deprecated attributes</h3> + +<dl> + <dt>{{htmlattrdef("charset")}} {{Deprecated_inline}}</dt> + <dd>If present, its value must be an ASCII case-insensitive match for "<code>utf-8</code>". It’s unnecessary to specify the <code>charset</code> attribute, because documents must use UTF-8, and the <code>script</code> element inherits its character encoding from the document.</dd> + <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt> + <dd>Like the <code>type</code> attribute, this attribute identifies the scripting language in use. Unlike the <code>type</code> attribute, however, this attribute’s possible values were never standardized. The <code>type</code> attribute should be used instead.</dd> +</dl> +</div> + +<h2 id="참고">참고</h2> + +<p>브라우저가 구문 분석을 진행하다 인라인 스크립트 또는 {{htmlattrxref("async", "script")}}, {{htmlattrxref("defer", "script")}}, <code>type="module"</code> 특성이 없는 스크립트에 도달하면 스크립트를 가져온 후 실행하기 전까지 분석을 중단합니다.</p> + +<p>스크립트는 <code>text/javascript</code> MIME 유형을 설정해야 하나, 브라우저는 관대한 규칙을 적용하여 이미지 형태(<code>image/*</code>), 비디오 형태(<code>video/*</code>), 오디오 형태(<code>audio/*</code>), <code>text/csv</code> 형태로 스크립트를 불러오려는 경우만 차단하고 나머지는 허용합니다. 스크립트를 차단한 경우 {{event("load")}} 대신 {{event("error")}} 이벤트를 요소에 전송합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="기본">기본</h3> + +<p>다음 예제는 <code><script></code> 요소를 사용해 외부 스크립트를 가져오는 법을 보입니다.</p> + +<pre class="brush: html notranslate"><script src="javascript.js"></script> +</pre> + +<p>그리고 아래 코드는 <code><script></code> 요소 내부에 인라인 스크립트를 작성하는 예시입니다.</p> + +<pre class="brush: html notranslate"><script> + alert("Hello World!"); +</script></pre> + +<h3 id="모듈_대체_스크립트">모듈 대체 스크립트</h3> + +<p>{{htmlattrxref("type", "script")}} 특성이 <code>module</code>을 지원하는 브라우저는 <code>nomodule</code> 특성을 가진 모든 <code><script></code>를 무시합니다. 그러므로 모듈 스크립트를 사용하면서도, 미지원 브라우저를 위한 대체 스크립트를 <code>nomodule</code>로 표시해 제공할 수 있습니다.</p> + +<pre class="brush: js notranslate"><script type="module" src="main.mjs"></script> +<script nomodule src="fallback.js"></script></pre> + +<h3 id="HTML에_데이터_삽입하기">HTML에 데이터 삽입하기</h3> + +<p><script> 요소와 JavaScript 외의 유효한 MIME 유형을 사용하면 서버사이드 렌더링을 통해 HTML에 데이터를 삽입할 수 있습니다.</p> + +<pre class="brush: html notranslate"><!-- Generated by the server --> +<script id="data" type="application/json">{"userId":1234,"userName":"John Doe","memberSince":"2000-01-01T00:00:00.000Z"}</script> + +<!-- Static --> +<script> + const userInfo = JSON.parse(document.getElementById("data").text); + console.log("User information: %o", userInfo); +</script></pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Removed the {{HTMLAttrxRef("charset", "script")}} attribute</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "semantics-scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "interact/scripts.html#h-18.2.1", "<script>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<div>{{Compat("html.elements.script", 2)}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{domxref("document.currentScript")}}</li> + <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove의 <code><script></code>와 <code><link></code> 노드 이벤트 호환성 차트</a></li> +</ul> diff --git a/files/ko/web/html/element/section/index.html b/files/ko/web/html/element/section/index.html new file mode 100644 index 0000000000..46efafc2b0 --- /dev/null +++ b/files/ko/web/html/element/section/index.html @@ -0,0 +1,123 @@ +--- +title: '<section>: 일반 구획 요소' +slug: Web/HTML/Element/section +tags: + - Element + - HTML + - HTML sections + - Reference + - Web +translation_of: Web/HTML/Element/section +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><section></code> 요소</strong>는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다.</span> 보통 <code><section></code>은 제목을 포함하지만, 항상 그런 것은 아닙니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/section.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<div class="note"> +<p><strong>참고</strong>: 요소의 콘텐츠를 외부와 구분하여 단독으로 묶는 것이 나아보인다면 {{htmlelement("article")}} 요소가 더 좋은 선택일 수 있습니다.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구획_콘텐츠">구획 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.<br> + 단, <code><section></code> 요소는 {{HTMLElement("address")}}의 자손이 될 수 없습니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>각각의 <code><section></code>을 식별할 수단이 필요합니다. 주로 제목({{htmlelement('h1')}}-{{htmlelement('h6')}}) 요소를 <code><section></code>의 자식으로 포함하는 방법을 사용합니다.</li> + <li>요소의 콘텐츠를 따로 구분해야 할 필요가 있으면 {{htmlelement("article")}} 요소를 고려하세요.</li> + <li><code><section></code> 요소를 일반 컨테이너로 사용하지 마세요. 특히 단순한 스타일링이 목적이라면 {{htmlelement("div")}} 요소를 사용해야 합니다. 대개, 문서 요약에 해당 구획이 논리적으로 나타나야 하면 <code><section></code>이 좋은 선택입니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="이전">이전</h3> + +<pre class="brush: html"><div> + <h2>Heading</h2> + <img>some image</img> +</div> +</pre> + +<h3 id="이후">이후</h3> + +<pre class="brush: html"><section> + <h2>Heading</h2> + <img>some image</img> +</section> +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.section")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/Accessibility/ARIA/Roles/Region_role">ARIA: Region role</a></li> +</ul> diff --git a/files/ko/web/html/element/select/index.html b/files/ko/web/html/element/select/index.html new file mode 100644 index 0000000000..59ae3e90ed --- /dev/null +++ b/files/ko/web/html/element/select/index.html @@ -0,0 +1,210 @@ +--- +title: <select> +slug: Web/HTML/Element/select +tags: + - Element + - Forms + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/select +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><select></code> 요소</strong>는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/select.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples +<https://github.com/mdn/interactive-examples>">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>위의 예제는 일반적인 <code><select></code> 사용법을 시연합니다. {{htmlelement("label")}}과 연결해 접근성을 향상할 수 있도록 {{htmlattrxref("id")}} 특성을, 서버로 전송할 데이터의 이름을 위해 {{htmlattrxref("name", "select")}} 특성을 적용했습니다. 메뉴의 각 옵션은 <code><select></code> 안의 {{htmlelement("option")}}으로 정의합니다.</p> + +<p>모든 <code><option></code>은 자신이 선택됐을 때 값으로써 사용할 {{htmlattrxref("value", "option")}} 특성이 필요합니다. 그러나 <code>value</code> 특성을 지정하지 않은 경우, 대신 자기 안의 텍스트를 값으로 사용합니다. {{htmlattrxref("selected", "option")}} 특성을 지정하면 해당 옵션을 선택한 상태로 페이지를 불러옵니다.</p> + +<p><code><select></code> 요소를 조작할 때 사용할 수 있는 여러가지 고유 특성이 존재합니다. {{htmlattrxref("multiple", "select")}} 특성을 사용하면 다수의 항목을 동시에 선택할 수 있고, {{htmlattrxref("size", "select")}} 특성은 한 번에 노출되는 항목의 수를 조절할 수 있습니다. <code>required</code>, <code>disabled</code>, <code>autofocus</code> 등 일반적인 양식 입력 요소의 특성도 사용할 수 있습니다.</p> + +<p><code><option></code> 요소를 {{htmlelement("optgroup")}} 요소 안에 배치하면 드롭다운 내에서 옵션 그룹을 나눌 수 있습니다.</p> + +<p class="hidden">For further examples, see <a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets#Drop-down_content">The native form widgets: Drop-down content</a>.</p> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("autocomplete")}}</dt> + <dd>{{glossary("user agent", "사용자 에이전트")}}의 자동완성 기능을 지원하는 {{domxref("DOMString")}}. 가능한 값의 전체 목록과, 자동완성의 상세 사용법은 <a href="/ko/docs/Web/HTML/Attributes/autocomplete">HTML <code>autocomplete</code> 특성</a> 문서를 참고하세요.</dd> + <dt>{{htmlattrdef("autofocus")}}</dt> + <dd>지정한 경우, 페이지를 불러왔을 때 자동으로 포커스를 부여합니다. 문서 내에서 하나의 양식 요소만 <code>autofocus</code> 특성을 가질 수 있습니다.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>지정한 경우, 사용자와 <code><select></code> 요소의 모든 상호작용을 막습니다. 지정하지 않은 경우에도 {{htmlelement("fieldset")}} 등 부모 요소의 <code>disabled</code> 특성을 상속하므로 비활성 상태가 될 수 있습니다.</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd><code><select></code>와 연결할 {{HTMLElement("form")}} 요소("양식 소유자"). 같은 문서에 존재하는 <code><form></code> 요소의 {{htmlattrxref("id")}} 특성 값을 사용해야 합니다. <code>form</code> 특성을 지정하지 않았으나 조상 중 <code><form></code> 요소가 존재하면 해당 <code><form></code>과 연결됩니다.</dd> + <dd><code>form</code> 특성을 사용하면 <code><select></code>를 <code><form></code> 요소에 넣지 않고도 연결할 수 있고, 조상 중 <code><form></code>이 있더라도 소유자를 재정의할 수 있습니다.</dd> + <dt>{{htmlattrdef("multiple")}}</dt> + <dd>지정한 경우, 메뉴에서 다수의 옵션을 선택할 수 있습니다. 지정하지 않은 경우 하나만 선택 가능합니다. 대부분의 브라우저는 <code>multiple</code> 특성이 존재하면 드롭다운 메뉴 대신 스크롤 가능한 목록 상자를 보여줍니다.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>컨트롤의 이름.</dd> + <dt>{{htmlattrdef("required")}}</dt> + <dd>옵션 중 값으로 비어있지 않은 문자열을 값으로 하는 항목을 반드시 선택해야 함을 나타냅니다.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd><code><select></code>를 (<code>multiple</code> 특성 사용 등의 이유로) 스크롤 가능한 목록 상자로 표현할 때 지정한 경우, 목록에서 한 번에 볼 수 있는 옵션 줄 수를 나타냅니다. 브라우저가 <code><select></code> 요소를 반드시 스크롤 가능한 목록 상자로 표현해야 하는 것은 아닙니다. 기본값은 0입니다.</dd> +</dl> + +<div class="note"><strong>참고:</strong> HTML5 명세에 따르면 <code>size</code>의 기본값은 1이어야 합니다. 그러나 실제로 기본값을 1로 적용하면 일부 웹 사이트가 망가지는 것으로 밝혀졌으며 어떠한 브라우저도 기본값으로 1을 사용하지 않습니다. Mozilla도 당분간 Firefox의 기본값을 0으로 유지하기로 결정했습니다.</div> + +<dl> +</dl> + +<ul> +</ul> + +<div class="hidden"> +<h2 id="Usage_notes">Usage notes</h2> + +<h3 id="Selecting_multiple_options">Selecting multiple options</h3> + +<p>On a desktop computer, there are a number of ways to select multiple options in a <code><select></code> element with a <code>multiple</code> attribute:</p> + +<p>Mouse users can hold the <kbd>Ctrl</kbd>, <kbd>Command</kbd>, or <kbd>Shift</kbd> keys (depending on what makes sense for your operating system) and then click multiple options to select/deselect them.</p> + +<div class="blockIndicator warning"> +<p><strong>Warning</strong>: The mechanism for selecting multiple non-contiguous items via the keyboard described below currently only seems to work in Firefox. Also note that on macOS, the <kbd>Ctrl</kbd> + <kbd>Up</kbd> and <kbd>Ctrl</kbd> + <kbd>Down</kbd> shortcuts conflict with the OS default shortcuts for <em>Mission Control</em> and <em>Application windows</em>, so you'll have to turn these off before it will work.</p> +</div> + +<p>Keyboard users can select multiple contiguous items by:</p> + +<ul> + <li>Focusing on the <code><select></code> element (e.g. using <kbd>Tab</kbd>).</li> + <li>Selecting an item at the top or bottom of the range they want to select using the <kbd>Up</kbd> and <kbd>Down</kbd> cursor keys to go up and down the options.</li> + <li>Holding down the <kbd>Shift</kbd> key and then using the <kbd>Up</kbd> and <kbd>Down</kbd> cursor keys to increase or decrease the range of items selected.</li> +</ul> + +<p>Keyboard users can select multiple non-contiguous items by:</p> + +<ul> + <li>Focusing on the <code><select></code> element (e.g. using <kbd>Tab</kbd>).</li> + <li>Holding down the <kbd>Ctrl</kbd> key then using the <kbd>Up</kbd> and <kbd>Down</kbd> cursor keys to change the "focused" select option, i.e. the one that will be selected if you choose to do so. The "focused" select option is highlighted with a dotted outline, in the same way as a keyboard-focused link.</li> + <li>Pressing <kbd>Space</kbd> to select/deselect "focused" select options.</li> +</ul> +</div> + +<h2 id="CSS_스타일링">CSS 스타일링</h2> + +<p><code><select></code> 요소는 CSS를 사용해 스타일을 적용하기 어렵기로 유명합니다. 물론 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">박스 모델</a>이나 <a href="/ko/docs/Web/CSS/CSS_Fonts">글씨체</a> 등 일부분은 다른 요소처럼 바꿀 수 있으며, {{cssxref("appearance")}} 속성을 사용하면 기본 시스템 외형을 제거할 수도 있습니다.</p> + +<p>그러나 <code><select></code> 요소의 내부 구조는 복잡해 통제하기 힘들며, 브라우저간의 차이로 인해 일관적이지 않은 결과가 나올 수도 있습니다. 요소의 모든 부분을 통제해야 할 경우 적합한 스타일링 방법을 제공하는 라이브러리를 고려하세요. 아니면 다른 요소와 JavaScript, <a href="/ko/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a>를 사용해 완전히 별도의 드롭다운 메뉴를 만들어보세요.</p> + +<h2 id="예제">예제</h2> + +<h3 id="기본_메뉴">기본 메뉴</h3> + +<pre class="brush: html"><!-- 두 번째 값이 처음부터 선택된 상태 --> +<select name="choice"> + <option value="first">First Value</option> + <option value="second" selected>Second Value</option> + <option value="third">Third Value</option> +</select></pre> + +<p>{{EmbedLiveSample("기본_메뉴", "", "100")}}</p> + +<h3 id="여러_기능을_갖춘_복잡한_메뉴">여러 기능을 갖춘 복잡한 메뉴</h3> + +<pre class="brush: html"><label>Please choose one or more pets: + <select name="pets" multiple size="4"> + <optgroup label="4-legged pets"> + <option value="dog">Dog</option> + <option value="cat">Cat</option> + <option value="hamster" disabled>Hamster</option> + </optgroup> + <optgroup label="Flying pets"> + <option value="parrot">Parrot</option> + <option value="macaw">Macaw</option> + <option value="albatross">Albatross</option> + </optgroup> + </select> +</label> +</pre> + +<p>{{EmbedLiveSample("여러_기능을_갖춘_복잡한_메뉴", "", "100")}}</p> + +<ul> + <li><code>multiple</code> 특성으로 인해 여러 옵션을 같이 선택할 수 있습니다.</li> + <li><code>size</code> 특성으로 인해 최대 4개의 옵션만 보입니다.</li> + <li>{{htmlelement("optgroup")}} 요소를 사용해 옵션을 두 개의 분리된 그룹으로 나눴습니다. 옵션 그룹은 순전히 시각적인 구분으로, 보통 굵은 글씨체의 옵션명 및 들여쓰기한 옵션 구성원으로 표현합니다.</li> + <li>"Hamster" 옵션에는 <code>disabled</code> 특성이 있으므로 선택할 수 없습니다.</li> +</ul> + +<h2 id="기술_요약">기술 요약</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#양식_관련_콘텐츠">양식 관련 콘텐츠</a>(<a href="/ko/docs/Web/Guide/HTML/Content_categories#나열됨">나열됨</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#레이블_가능">레이블 가능</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#초기화_가능">초기화 가능</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#제출_가능">제출 가능</a>).</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>0개 이상의 {{HTMLElement("option")}} 또는 {{HTMLElement("optgroup")}} 요소.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("menu")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLSelectElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-select-element', '<select>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-select-element', '<select>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<select>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.select")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><code><select></code>가 발사하는 이벤트: {{event("change")}}, {{event("input")}}</li> +</ul> diff --git a/files/ko/web/html/element/slot/index.html b/files/ko/web/html/element/slot/index.html new file mode 100644 index 0000000000..b710ceb7f6 --- /dev/null +++ b/files/ko/web/html/element/slot/index.html @@ -0,0 +1,122 @@ +--- +title: <slot> +slug: Web/HTML/Element/slot +tags: + - Element + - HTML + - HTML Web Components + - Reference + - Web + - Web Components + - 웹 컴포넌트 +translation_of: Web/HTML/Element/slot +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><slot></code> 요소</strong>는 웹 컴포넌트 사용자가 자신만의 마크업으로 채워 별도의 DOM 트리를 생성하고, 컴포넌트와 함께 표현할 수 있는 웹 컴포넌트 내부의 플레이스홀더입니다.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#투명_콘텐츠_모델">투명</a>.</td> + </tr> + <tr> + <th scope="row">이벤트</th> + <td>{{event("slotchange")}}</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLSlotElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/en-US/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("name")}}</dt> + <dd>슬롯의 이름.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><template id="element-details-template"> + <style> + details {font-family: "Open Sans Light", Helvetica, Arial, sans-serif } + .name {font-weight: bold; color: #217ac0; font-size: 120% } + h4 { + margin: 10px 0 -8px 0; + background: #217ac0; + color: white; + padding: 2px 6px; + border: 1px solid #cee9f9; + border-radius: 4px; + } + .attributes { margin-left: 22px; font-size: 90% } + .attributes p { margin-left: 16px; font-style: italic } + </style> + <details> + <summary> + <code class="name">&lt;<slot name="element-name">NEED NAME</slot>&gt;</code> + <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i> + </summary> + <div class="attributes"> + <h4>Attributes</h4> + <slot name="attributes"><p>None</p></slot> + </div> + </details> + <hr> +</template></pre> + +<div class="note"> +<p><strong>참고</strong>: 온전한 예제는 <a class="external external-icon" href="https://github.com/mdn/web-components-examples/tree/master/element-details" rel="noopener">element-details</a>(<a class="external external-icon" href="https://mdn.github.io/web-components-examples/element-details/" rel="noopener">라이브로 보기</a>)에서 볼 수 있습니다. 설명은 <a href="/ko/docs/Web/Web_Components/Using_templates_and_slots">템플릿과 슬롯 사용하기</a>에서 확인할 수 있습니다.</p> +</div> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','scripting.html#the-slot-element','<slot>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#shadow-tree-slots','Slots')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.slot")}}</p> diff --git a/files/ko/web/html/element/small/index.html b/files/ko/web/html/element/small/index.html new file mode 100644 index 0000000000..efc0a62cd5 --- /dev/null +++ b/files/ko/web/html/element/small/index.html @@ -0,0 +1,117 @@ +--- +title: '<small>: 덧붙임 글 요소' +slug: Web/HTML/Element/small +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/small +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><small></code></strong> <strong>요소</strong>는 덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타냅니다.</span> 기본 상태에서 <code><small></code>은 자신의 콘텐츠를 한 사이즈 작은 글꼴(<code>small</code>에서 <code>x-small</code> 등)로 표시하지만, 스타일을 적용한 후에도 글씨 크기가 작을 필요는 없습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/small.html", "tabbed-shorter")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소, 또는 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 class="editable" id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="기본_사용법">기본 사용법</h3> + +<pre class="brush: html"><p>This is the first sentence. + <small>This whole sentence is in small letters.</small> +</p> +</pre> + +<p>{{EmbedLiveSample("기본_사용법")}}</p> + +<h3 id="CSS_예제">CSS 예제</h3> + +<pre class="brush: html"><p>This is the first sentence. + <span style="font-size:0.8em">This whole sentence is in small + letters.</span> +</p> +</pre> + +<p>{{EmbedLiveSample("CSS_예제")}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-small-element', '<small>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-small-element', '<small>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#edef-SMALL', '<small>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="참고">참고</h2> + +<p>{{htmlelement("b")}}, {{htmlelement("i")}}, <code><small></code> 요소는 구조와 표현을 분리하는 원칙을 위배하는 것처럼 보이지만, 셋 모두 HTML5에서 유효합니다. 작성자는 <code><small></code>과 CSS 중 어느 것을 사용할지 결정하기 전에 심사숙고해야 합니다.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.small")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("b")}}</li> +</ul> diff --git a/files/ko/web/html/element/span/index.html b/files/ko/web/html/element/span/index.html new file mode 100644 index 0000000000..ffa73e9f9a --- /dev/null +++ b/files/ko/web/html/element/span/index.html @@ -0,0 +1,125 @@ +--- +title: <span> +slug: Web/HTML/Element/span +tags: + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - Reference + - Web +translation_of: Web/HTML/Element/span +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><span></code> 요소</strong>는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 {{htmlattrxref("lang")}} 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다.</span> 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다. <code><span></code>은 {{htmlelement("div")}}와 매우 유사하지만, {{htmlelement("div")}}는 <a href="/ko/docs/Web/HTML/Block-level_elements">블록 레벨 요소</a>인 반면 <code><span></code>은 <a href="/ko/docs/Web/HTML/Inline_elements">인라인 요소</a>입니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/span.html", "tabbed-standard")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_컨텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_컨텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_컨텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_컨텐츠">구문 콘텐츠</a> 또는 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_컨텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLSpanElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="예제_1">예제 1</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html gutter:false"><p><span>Some text</span></p></pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('예제_1')}}</p> + +<h3 id="예제_2">예제 2</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush:html gutter:false"><li><span> + <a href="portfolio.html" target="_blank">See my portfolio</a> +</span></li> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">li span { + background: gold; + } +</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('예제_2')}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>The {{glossary("DOM")}} interface is now {{domxref("HTMLSpanElement")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.span")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>HTML {{HTMLElement("div")}} 요소</li> +</ul> diff --git a/files/ko/web/html/element/strong/index.html b/files/ko/web/html/element/strong/index.html new file mode 100644 index 0000000000..50bfe6f78c --- /dev/null +++ b/files/ko/web/html/element/strong/index.html @@ -0,0 +1,135 @@ +--- +title: '<strong>: 높은 중요도 요소' +slug: Web/HTML/Element/strong +tags: + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - 'HTML:Phrasing content' + - Reference + - Web +translation_of: Web/HTML/Element/strong +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><strong></code> 요소</strong>는 중대하거나 긴급한 콘텐츠를 나타냅니다. 보통 브라우저는 굵은 글씨로 표시합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/strong.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a> 또는 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p>The <code><strong></code> element is for content that is of "strong importance," including things of great seriousness or urgency (such as warnings). This could be a sentence that is of great importance to the whole page, or you could merely try to point out that some words are of greater importance compared to nearby content.</p> + +<p>Typically this element is rendered by default using a bold font weight. However, it should <em>not</em> be used simply to apply bold styling; use the CSS {{cssxref("font-weight")}} property for that purpose. Use the {{HTMLElement("b")}} element to draw attention to certain text without indicating a higher level of importance. Use the {{HTMLElement("em")}} element to mark text that has stress emphasis.</p> + +<p>Another accepted use for <code><strong></code> is to denote the labels of paragraphs which represent notes or warnings within the text of a page.</p> + +<h3 id="<b>_vs._<strong>"><code><b></code> vs. <code><strong></code></h3> + +<p>It is often confusing to new developers why there are so many ways to express the same thing on a rendered website. {{HTMLElement("b")}} and <code><strong></code> are perhaps one of the most common sources of confusion, causing developers to ask "Should I use <code><b></code> or <code><strong></code>? Don't they both do the same thing?"</p> + +<p>Not exactly. The <code><strong></code> element is for content that is of greater importance, while the <code><b></code> element is used to draw attention to text without indicating that it's more important.</p> + +<p>It may help to realize that both are valid and semantic elements in HTML5 and that it's a coincidence that they both have the same default styling (boldface) in most browsers (although some older browsers actually underline <code><strong></code>). Each element is meant to be used in certain types of scenarios, and if you want to bold text simply for decoration, you should instead actually use the CSS {{cssxref("font-weight")}} property.</p> + +<p>The intended meaning or purpose of the enclosed text should be what determines which element you use. Communicating meaning is what semantics are all about.</p> + +<h3 id="<em>_vs._<strong>"><code><em></code> vs. <code><strong></code></h3> + +<p>Adding to the confusion is the fact that while HTML 4 defined <code><strong></code> as simply indicating a stronger emphasis, HTML 5 defines <code><strong></code> as representing "strong importance for its contents." This is an important distinction to make.</p> + +<p>While <code><em></code> is used to change the meaning of a sentence as spoken emphasis does ("I <em>love</em> carrots" vs. "I love <em>carrots</em>"), <code><strong></code> is used to give portions of a sentence added importance (e.g., "<strong>Warning!</strong> This is <strong>very dangerous.</strong>") Both <code><strong></code> and <code><em></code> can be nested to increase the relative degree of importance or stress emphasis, respectively.</p> + +<h2 id="예제">예제</h2> + +<h3 id="기본_예제">기본 예제</h3> + +<pre class="brush: html"><p>Before proceeding, <strong>make sure you put on your safety goggles</strong>.</p></pre> + +<p>{{EmbedLiveSample("기본_예제", 650, 80)}}</p> + +<h3 id="경고_표시">경고 표시</h3> + +<pre class="brush: html"><p><strong>Important:</strong> Before proceeding, make sure you add plenty of butter.</p></pre> + +<p>{{EmbedLiveSample("경고_표시", 650, 80)}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-strong-element', '<strong>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-strong-element', '<strong>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-STRONG', '<strong>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.strong")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("b")}} 요소</li> + <li>{{HTMLElement("em")}} 요소</li> + <li>{{cssxref("font-weight")}} 속성</li> +</ul> diff --git a/files/ko/web/html/element/style/index.html b/files/ko/web/html/element/style/index.html new file mode 100644 index 0000000000..4e166704bc --- /dev/null +++ b/files/ko/web/html/element/style/index.html @@ -0,0 +1,201 @@ +--- +title: '<style>: 스타일 정보 요소' +slug: Web/HTML/Element/style +tags: + - CSS + - Element + - HTML + - HTML document metadata + - Reference + - Web +translation_of: Web/HTML/Element/style +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><style></code> 요소</strong>는 문서나 문서 일부에 대한 스타일 정보를 포함합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/style.html", "tabbed-standard")}}</div> + + + +<p><code><style></code> 요소는 문서의 {{htmlelement("head")}} 안에 위치해야 합니다. 그러나, 일반적으로 스타일은 외부 스타일 시트에 작성하고, {{htmlelement("link")}} 요소로 연결하는 편이 좋습니다.</p> + +<p>문서가 다수의 <code><style></code>과 <code><link></code> 요소를 포함하면 서로의 순서대로 {{glossary("DOM")}}에 스타일을 적용합니다. 따라서 예상치 못한 종속 문제를 피하려면 올바른 순서를 따라 <code><style></code> 및 <code><link></code> 요소를 배치해야 합니다.</p> + +<p><code><link></code> 요소와 동일하게, <code><style></code> 요소도 미디어 쿼리를 값으로 가지는 {{htmlattrxref("media", "style")}} 특성을 포함할 수 있습니다. 이를 통해 {{glossary("viewport", "뷰포트")}} 너비 등 매체 기능에 따라 선택적으로 스타일 시트를 적용할 수 있습니다.</p> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("type")}}</dt> + <dd>스타일 언어의 MIME 유형. 문자셋은 지정하지 않아야 합니다. 선택 사항이며, 기본값은 <code>text/css</code>입니다. 빈 문자열과 <code>text/css</code> 외의 값은 사용하지 않습니다. + <div class="note"><strong>참고:</strong> 현대적인 웹 문서에서 이 특성을 포함할 이유는 거의 존재하지 않습니다.</div> + </dd> + <dt>{{htmlattrdef("media")}}</dt> + <dd>스타일을 적용할 매체. 값은 <a href="/ko/docs/Web/Guide/CSS/Media_queries">미디어 쿼리</a>이며, 누락할 경우 기본값은 <code>all</code>입니다.</dd> + <dt>{{htmlattrdef("nonce")}}</dt> + <dd><code><a href="/ko/docs/Web/HTTP/Headers/Content-Security-Policy/style-src">style-src Content-Security-Policy</a></code>에서 인라인 스타일을 화이트리스트에 추가할 때 사용하는 논스(임시 값). 서버는 매번 정책을 전송할 때마다 새로운 고유 논스를 생성해야 합니다. 논스 값을 알고 있는 공격자라면 리소스 정책을 우회하는 것은 매우 간단한 일이므로, 사전에 유추할 수 없는 값을 생성하는 것이 중요합니다.</dd> + <dt>{{htmlattrdef("title")}}</dt> + <dd><a href="/ko/docs/Web/CSS/Alternative_style_sheets">대체 스타일 시트</a> 세트를 지정합니다.</dd> +</dl> + +<h3 id="사용_중단된_특성">사용 중단된 특성</h3> + +<dl> + <dt>{{htmlattrdef("scoped")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>지정한 경우, <code><style></code> 요소의 부모 및 부모의 자식에만 스타일을 적용합니다. + <div class="note"> + <p><strong>참고:</strong> <code>scoped</code> 특성은 <a href="https://github.com/w3c/csswg-drafts/issues/3547">https://github.com/w3c/csswg-drafts/issues/3547</a>에 따라 나중에 다시 추가될 수도 있습니다. 지금 사용하고 싶은 경우 <a href="https://github.com/samthor/scoped">폴리필</a>을 추가하세요.</p> + </div> + </dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_스타일_시트">간단한 스타일 시트</h3> + +<pre class="brush:html"><!doctype html> +<html> +<head> + <style> + p { + color: red; + } + </style> +</head> +<body> + <p>This is my paragraph.</p> +</body> +</html></pre> + +<p>{{EmbedLiveSample('간단한_스타일_시트', '100%', '60')}}</p> + +<h3 id="다수의_<style>_요소">다수의 <code><style></code> 요소</h3> + +<p>다음 예제는 두 개의 <code><style></code> 요소를 사용합니다. 같은 명시도를 가진 경우, 뒤쪽 <code><style></code>이 앞쪽을 덮어쓰는 것에 주목하세요.</p> + +<pre class="brush:html"><!doctype html> +<html> +<head> + <style> + p { + color: white; + background-color: blue; + padding: 5px; + border: 1px solid black; + } + </style> + <style> + p { + color: blue; + background-color: yellow; + } + </style> +</head> +<body> + <p>This is my paragraph.</p> +</body> +</html></pre> + +<p>{{EmbedLiveSample('다수의_style_요소', '100%', '60')}}</p> + +<h3 id="미디어_쿼리_포함">미디어 쿼리 포함</h3> + +<p>이번 예제에서는 앞선 코드의 두 번째 <code><style></code> 요소에 <code>media</code> 특성을 추가하고, {{glossary("viewport", "뷰포트")}}의 너비가 500px 미만일 때에만 스타일을 적용하도록 지정합니다.</p> + +<pre class="brush:html"><!doctype html> +<html> +<head> + <style> + p { + color: white; + background-color: blue; + padding: 5px; + border: 1px solid black; + } + </style> + <style media="all and (max-width: 500px)"> + p { + color: blue; + background-color: yellow; + } + </style> +</head> +<body> + <p>This is my paragraph.</p> +</body> +</html></pre> + +<p>{{EmbedLiveSample('미디어_쿼리_포함', '100%', '60')}}</p> + +<h2 id="기술_요약">기술 요약</h2> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#메타데이터_콘텐츠">메타데이터 콘텐츠</a>. <code>scoped</code> 특성이 존재하면 <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th>가능한 콘텐츠</th> + <td><code>type</code> 특성에 맞는 텍스트, 즉 <code>text/css</code>.</td> + </tr> + <tr> + <th>태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th>가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#메타데이터_콘텐츠">메타데이터 콘텐츠</a>를 허용하는 모든 요소</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th>DOM 인터페이스</th> + <td>{{domxref("HTMLStyleElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + <tr> + <td>{{ SpecName('HTML WHATWG', 'document-metadata.html#the-style-element', 'style') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>{{ SpecName('HTML5 W3C') }} 에서 변화 없음.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td><code>scoped</code> 특성이 추가됨</td> + </tr> + <tr> + <td>{{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }}</td> + <td>{{ Spec2('HTML4.01') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.style")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>외부 스타일 시트를 사용하기 위한 {{HTMLElement("link")}} 요소.</li> +</ul> diff --git a/files/ko/web/html/element/sub/index.html b/files/ko/web/html/element/sub/index.html new file mode 100644 index 0000000000..a94f6a7f01 --- /dev/null +++ b/files/ko/web/html/element/sub/index.html @@ -0,0 +1,137 @@ +--- +title: '<sub>: 아래 첨자 요소' +slug: Web/HTML/Element/sub +tags: + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - 'HTML:Phrasing content' + - Reference + - Web +translation_of: Web/HTML/Element/sub +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML </strong><strong><code><sub></code></strong> 요소는 활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정합니다.</span> 아래 첨자는 보통 더 작은 글씨 크기를 가지고, 기준선을 아래로 내려 렌더링 합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/sub.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><sub></code> 요소는 타이포그래피적인 이유에 맞춰서만 사용해야 합니다. 타이포그래피적 이유란 기존의 관례나 표준이 아래 첨자로 나타내는 경우를 말하며, 단순히 작은 글자를 아래로 올려야 할 때는 사용해서는 안됩니다.</p> + +<p>예를 들어 비즈니스나 상품의 <a href="https://en.wikipedia.org/wiki/Wordmark">워드마크</a> 글씨 기준선을 내려야 한다면 <code><sub></code> 대신 CSS(대개 {{cssxref("vertical-align")}})를 사용해야 합니다. <code>vertical-align: sub</code>를 사용할 수도 있고, 기준선을 25% 내려야 한다면 <code>vertical-align: -25%</code>로도 쓸 수 있습니다.</p> + +<p><code><sub></code>의 적절한 사용처 몇 가지는 다음과 같습니다.</p> + +<ul> + <li>각주 표기. 아래의 {{anch("각주 표기")}} 예제를 참고하세요.</li> + <li>수학 변수의 숫자 표기. <a href="/ko/docs/Web/MathML">MathML</a>을 사용하는 방향을 고려하세요. {{anch("변수 표기")}} 예제를 참고하세요.</li> + <li>화학식에서 원소의 수를 나타낼 때. (개발자의 친구, C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, 카페인) 아래의 {{anch("화학식")}} 예제를 참고하세요.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="각주_표기">각주 표기</h3> + +<p>각주의 숫자를 아래 첨자로 나타내는 경우도 있으며, <code><sub></code>가 흔히 쓰이는 경우입니다.</p> + +<pre class="brush: html"><p>According to the computations by Nakamura, Johnson, and +Mason<sub>1</sub> this will result in the complete annihilation +of both particles.</p></pre> + +<p>{{EmbedLiveSample("각주_표기", 650, 80)}}</p> + +<h3 id="변수_표기">변수 표기</h3> + +<p>수학에서는 같은 축 위의 점 여럿과 같이, 동일한 개념을 가리키는 변수의 무리는 같은 변수명을 사용하며, 뒤의 아래 첨자 숫자로 서로 구분합니다.</p> + +<pre class="brush: html"><p>The horizontal coordinates' positions along the X-axis are +represented as <var>x<sub>1</sub></var> ... <var>x<sub>n</sub></var>.</p></pre> + +<p>{{EmbedLiveSample("변수_표기", 650, 80)}}</p> + +<h3 id="화학식">화학식</h3> + +<p>화학식에서 특정 원자의 수를 나타낼 때 아래 첨자를 사용합니다. H<sub>2</sub>0의 아래 첨자 "2"는 화학식이 나타내는 물질에 수소 원자가 2개 존재한다는 뜻입니다.:</p> + +<pre class="brush: html"><p>Almost every developer's favorite molecule is +C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, which is +commonly known as "caffeine."</p></pre> + +<p>{{EmbedLiveSample("화학식", 650, 120)}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>;')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.sub")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>위 첨자를 나타내는 {{HTMLElement("sup")}} 요소. 위 첨자와 아래 첨자가 같은 공간에 공존할 수는 없습니다. 따라서 화학의 질량수/원자 번호 표기 등을 구현하려면 <a href="/ko/docs/Web/MathML">MathML</a>이 필요합니다.</li> + <li><a href="/ko/docs/Web/MathML/Element/msub"><code><msub></code></a>, <a href="/ko/docs/Web/MathML/Element/msup"><code><msup></code></a>, <a href="/ko/docs/Web/MathML/Element/msubsup"><code><msubsup></code></a> MathML 요소.</li> + <li>CSS {{cssxref("vertical-align")}} 속성.</li> +</ul> diff --git a/files/ko/web/html/element/summary/index.html b/files/ko/web/html/element/summary/index.html new file mode 100644 index 0000000000..4339470b59 --- /dev/null +++ b/files/ko/web/html/element/summary/index.html @@ -0,0 +1,151 @@ +--- +title: <summary> +slug: Web/HTML/Element/summary +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/summary +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML 공개 요약 요소</strong> (<strong><code><요약></code></strong>) 요소는 ("상세") 요소의 공개 상자에 대한 요약, 캡션 또는 범례를 지정한다. </span> <code><요약></code> 요소를 클릭하면 부모 <code><상세></code> 요소의 상태가 열리거나 닫힌다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Phrasing content</a> or one element of <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Heading_content">Heading content</a></td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>None, both the start tag and the end tag are mandatory.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>The {{HTMLElement("details")}} element.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("button")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element only includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>The <code><summary></code> element's contents can be any heading content, plain text, or HTML that can be used within a paragraph.</p> + +<p>A <code><summary></code> element may <em>only</em> be used as the first child of a <code><details></code> element. When the user clicks on the summary, the parent <code><details></code> element is toggled open or closed, and then a {{event("toggle")}} event is sent to the <code><details></code> element, which can be used to let you know when this state change occurs.</p> + +<h3 id="Default_label_text">Default label text</h3> + +<p>If a <code><details></code> element's first child is not a <code><summary></code> element, the {{Glossary("user agent")}} will use a default string (typically "Details") as the label for the disclosure box.</p> + +<h3 id="Default_style">Default style</h3> + +<p>Per the HTML specification, the default style for <code><summary></code> elements includes <code>display: list-item</code>. This makes it possible to change or remove the icon displayed as the disclosure widget next to the label from the default, which is typically a triangle.</p> + +<p>You can also change the style to <code>display: block</code> to remove the disclosure triangle.</p> + +<p>See the {{anch("Browser compatibility")}} section for details, as not all browsers support full functionality of this element yet.</p> + +<h2 id="Examples">Examples</h2> + +<p>Below are some examples showing <code><summary></code> in use. You can find more examples in the documentation for the {{HTMLElement("details")}} element.</p> + +<h3 id="Basic_example">Basic example</h3> + +<p>A simple example showing the use of <code><summary></code> in a {{HTMLElement("details")}} element:</p> + +<pre class="brush: html"><details open> + <summary>Overview</summary> + <ol> + <li>Cash on hand: $500.00</li> + <li>Current invoice: $75.30</li> + <li>Due date: 5/6/19</li> + </ol> +</details></pre> + +<p>{{EmbedLiveSample("Basic_example", 650, 120)}}</p> + +<h3 id="Summaries_as_headings">Summaries as headings</h3> + +<p>You can use heading elements in <code><summary></code>, like this:</p> + +<pre class="brush: html"><details open> + <summary><h4>Overview</h4></summary> + <ol> + <li>Cash on hand: $500.00</li> + <li>Current invoice: $75.30</li> + <li>Due date: 5/6/19</li> + </ol> +</details></pre> + +<p>{{EmbedLiveSample("Summaries_as_headings", 650, 120)}}</p> + +<p>This currently has some spacing issues that could be addressed using CSS.</p> + +<h3 id="HTML_in_summaries">HTML in summaries</h3> + +<p>This example adds some semantics to the <code><summary></code> element to indicate the label as important:</p> + +<pre class="brush: html"><details open> + <summary><strong>Overview</strong></summary> + <ol> + <li>Cash on hand: $500.00</li> + <li>Current invoice: $75.30</li> + <li>Due date: 5/6/19</li> + </ol> +</details></pre> + +<p>{{EmbedLiveSample("HTML_in_summaries", 650, 120)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.summary")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("details")}}</li> +</ul> diff --git a/files/ko/web/html/element/sup/index.html b/files/ko/web/html/element/sup/index.html new file mode 100644 index 0000000000..f9478cdd6d --- /dev/null +++ b/files/ko/web/html/element/sup/index.html @@ -0,0 +1,142 @@ +--- +title: '<sup>: 위 첨자 요소' +slug: Web/HTML/Element/sup +tags: + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - 'HTML:Phrasing content' + - Reference + - Web +translation_of: Web/HTML/Element/sup +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML </strong><strong><code><sup></code></strong> 요소는 활자 배치를 위 첨자로 해야 하는 인라인 텍스트를 지정합니다.</span> 위 첨자는 보통 더 작은 글씨 크기를 가지고, 기준선을 위로 올려 렌더링 합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/sup.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><sup></code> 요소는 타이포그래피적인 이유에 맞춰서만 사용해야 합니다. 타이포그래피적 이유란 기존의 관례나 표준이 위 첨자로 나타내는 경우를 말하며, 단순히 작은 글자를 위로 올려야 할 때는 사용해서는 안됩니다.</p> + +<p>예를 들어 비즈니스나 상품의 <a href="https://en.wikipedia.org/wiki/Wordmark">워드마크</a> 글씨 기준선을 올려야 한다면 <code><sup></code> 대신 CSS(대개 {{cssxref("vertical-align")}})를 사용해야 합니다. <code>vertical-align: super</code>를 사용할 수도 있고, 기준선을 50% 올려야 한다면 <code>vertical-align: 50%</code>로도 쓸 수 있습니다.</p> + +<p><code><sup></code>의 적절한 사용처의 몇 가지는 다음과 같습니다.</p> + +<ul> + <li>"x<sup>3</sup>" 등 거듭제곱 연산의 지수 표기. 더 복잡한 표기를 해야 할 경우 <a href="/ko/docs/Web/MathML">MathML</a>을 고려하세요. 아래의 {{anch("지수 표기")}} 예제를 참고하세요.</li> + <li class="hidden">Displaying {{interwiki("wikipedia", "superior letter", "superior lettering")}}, which is used in some languages when rendering certain abbreviations. For example, in French, the word "mademoiselle" can be abbreviated "M<sup>lle</sup>"); this is an acceptable use case. See {{anch("Superior lettering")}} for examples.</li> + <li>"4<sup>th</sup>" 등 서수 표기. 아래의 {{anch("서수 표기")}} 예제를 참고하세요.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="지수_표기">지수 표기</h3> + +<p>위 첨자를 가장 많이 사용할만한 곳 중 하나는 거듭제곱의 지수 표기입니다.</p> + +<pre class="brush: html"><p>One of the most common equations in all of physics is +<var>E</var>=<var>m</var><var>c</var><sup>2</sup>.<p></pre> + +<p>{{EmbedLiveSample("지수_표기", 650, 80)}}</p> + +<div class="hidden"> +<h3 id="Superior_lettering">Superior lettering</h3> + +<p>Superior lettering is not technically the same thing as superscript. However, it is common to use <code><sup></code> to present superior lettering in HTML. Among the most common uses of superior lettering is the presentation of certain abbreviations in French:</p> + +<pre class="brush: html"><p>Robert a présenté son rapport à M<sup>lle</sup> Bernard.</p></pre> + +<p>The resulting output:</p> + +<p>{\{EmbedLiveSample("Superior_lettering", 650, 80)}}</p> +</div> + +<h3 id="서수_표기">서수 표기</h3> + +<p>영어 "fourth", 스페인어 "quinto" 등 서수는 숫자와, 위 첨자로 표기한 언어별 특정 텍스트를 사용해 축약할 수 있습니다.</p> + +<pre class="brush: html"><p>The ordinal number "fifth" can be abbreviated in various +languages as follows:</p> +<ul> + <li>English: 5<sup>th</sup></li> + <li>French: 5<sup>ème</sup></li> +</ul></pre> + +<p>{{EmbedLiveSample("서수_표기", 650, 160)}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>;')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.sup")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>아래 첨자를 나타내는 {{HTMLElement("sub")}} 요소. 위 첨자와 아래 첨자가 같은 공간에 공존할 수는 없습니다. 따라서 화학의 질량수/원자 번호 표기 등을 구현하려면 <a href="/ko/docs/Web/MathML">MathML</a>이 필요합니다.</li> + <li><a href="/ko/docs/Web/MathML/Element/msub"><code><msub></code></a>, <a href="/ko/docs/Web/MathML/Element/msup"><code><msup></code></a>, <a href="/ko/docs/Web/MathML/Element/msubsup"><code><msubsup></code></a> MathML 요소.</li> + <li>CSS {{cssxref("vertical-align")}} 속성.</li> +</ul> diff --git a/files/ko/web/html/element/table/index.html b/files/ko/web/html/element/table/index.html new file mode 100644 index 0000000000..2579638730 --- /dev/null +++ b/files/ko/web/html/element/table/index.html @@ -0,0 +1,370 @@ +--- +title: <table> +slug: Web/HTML/Element/table +tags: + - Element + - HTML + - HTML tabular data + - Reference + - Web + - 표 +translation_of: Web/HTML/Element/table +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><table></code> 요소</strong>는 행과 열로 이루어진 표를 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/table.html","tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>순서대로, + <div class="content-models"> + <div id="table-mdls"> + <ol> + <li>선택적인 {{HTMLElement("caption")}} 요소</li> + <li>0개 이상의 {{HTMLElement("colgroup")}} 요소</li> + <li>선택적인 {{HTMLElement("thead")}} 요소</li> + <li>다음 중 하나 + <ul> + <li>0개 이상의 {{HTMLElement("tbody")}} 요소</li> + <li>0개 이상의 {{HTMLElement("tr")}} 요소</li> + </ul> + </li> + <li>선택적인 {{HTMLElement("tfoot")}} 요소</li> + </ol> + </div> + </div> + </td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLTableElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<div class="hidden"> +<h3 id="Deprecated_attributes">Deprecated attributes</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt> + <dd> + <p>This enumerated attribute indicates how the table must be aligned inside the containing document. It may have the following values:</p> + + <ul> + <li><code>left</code>: the table is displayed on the left side of the document;</li> + <li><code>center</code>: the table is displayed in the center of the document;</li> + <li><code>right</code>: the table is displayed on the right side of the document.</li> + </ul> + + <p>Set {{cssxref("margin-left")}} and {{cssxref("margin-right")}} to <code>auto</code> or {{cssxref("margin")}} to <code>0 auto</code> to achieve an effect that is similar to the align attribute.</p> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd> + <p>The background color of the table. It is a <a href="/en-US/docs/Web/CSS/color_value#RGB_colors">6-digit hexadecimal RGB code</a>, prefixed by a '<code>#</code>'. One of the predefined <a href="/en-US/docs/Web/CSS/color_value#Color_keywords">color kewords</a> can also be used.</p> + + <p>To achieve a similar effect, use the CSS {{cssxref("background-color")}} property.</p> + </dd> + <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt> + <dd> + <p>This integer attribute defines, in pixels, the size of the frame surrounding the table. If set to 0, the {{htmlattrxref("frame", "table")}} attribute is set to void.</p> + + <p>To achieve a similar effect, use the CSS {{cssxref("border")}} shorthand property.</p> + </dd> + <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt> + <dd> + <p>This attribute defines the space between the content of a cell and its border, displayed or not. If the cellpadding's length is defined in pixels, this pixel-sized space will be applied to all four sides of the cell's content. If the length is defined using a percentage value, the content will be centered and the total vertical space (top and bottom) will represent this value. The same is true for the total horizontal space (left and right).</p> + + <p>To achieve a similar effect, apply the {{cssxref("border-collapse")}} property to the <code><table></code> element, with its value set to collapse, and the {{cssxref("padding")}} property to the {{HTMLElement("td")}} elements.</p> + </dd> + <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt> + <dd> + <p>This attribute defines the size of the space between two cells in a percentage value or pixels. The attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row.</p> + + <p>To achieve a similar effect, apply the {{cssxref("border-spacing")}} property to the <code><table></code> element. <code>border-spacing</code> does not have any effect if {{cssxref("border-collapse")}} is set to collapse.</p> + </dd> + <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt> + <dd> + <p>This enumerated attribute defines which side of the frame surrounding the table must be displayed.</p> + + <p>To achieve a similar effect, use the {{cssxref("border-style")}} and {{cssxref("border-width")}} properties.</p> + </dd> + <dt>{{htmlattrdef("rules")}} {{Deprecated_inline}}</dt> + <dd> + <p>This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values:</p> + + <ul> + <li><code>none</code>, which indicates that no rules will be displayed; it is the default value;</li> + <li><code>groups</code>, which will cause the rules to be displayed between row groups (defined by the {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} elements) and between column groups (defined by the {{HTMLElement("col")}} and {{HTMLElement("colgroup")}} elements) only;</li> + <li><code>rows</code>, which will cause the rules to be displayed between rows;</li> + <li><code>columns</code>, which will cause the rules to be displayed between columns;</li> + <li><code>all</code>, which will cause the rules to be displayed between rows and columns.</li> + </ul> + + <p>To achieve a similar effect, apply the {{cssxref("border")}} property to the appropriate {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}}, or {{HTMLElement("colgroup")}} elements.</p> + </dd> + <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt> + <dd>This attribute defines an alternative text that summarizes the content of the table. Use the {{htmlelement("caption")}} element instead.</dd> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt> + <dd> + <p>This attribute defines the width of the table. Use the CSS {{cssxref("width")}} property instead.</p> + </dd> +</dl> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_표">간단한 표</h3> + +<pre class="brush: html"><table> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> +</pre> + +<p>{{ EmbedLiveSample('간단한_표', '100%', '100') }}</p> + +<h3 id="추가_예제">추가 예제</h3> + +<pre class="brush: html"><p>Simple table with header</p> +<table> + <tr> + <th>First name</th> + <th>Last name</th> + </tr> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> + +<p>Table with thead, tfoot, and tbody</p> +<table> + <thead> + <tr> + <th>Header content 1</th> + <th>Header content 2</th> + </tr> + </thead> + <tfoot> + <tr> + <td>Footer content 1</td> + <td>Footer content 2</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>Body content 1</td> + <td>Body content 2</td> + </tr> + </tbody> +</table> + +<p>Table with colgroup</p> +<table> + <colgroup span="4" class="columns"></colgroup> + <tr> + <th>Countries</th> + <th>Capitals</th> + <th>Population</th> + <th>Language</th> + </tr> + <tr> + <td>USA</td> + <td>Washington D.C.</td> + <td>309 million</td> + <td>English</td> + </tr> + <tr> + <td>Sweden</td> + <td>Stockholm</td> + <td>9 million</td> + <td>Swedish</td> + </tr> +</table> + +<p>Table with colgroup and col</p> +<table> + <colgroup> + <col class="column1"> + <col class="columns2plus3" span="2"> + </colgroup> + <tr> + <th>Lime</th> + <th>Lemon</th> + <th>Orange</th> + </tr> + <tr> + <td>Green</td> + <td>Yellow</td> + <td>Orange</td> + </tr> +</table> + +<p>Simple table with caption</p> +<table> + <caption>Awesome caption</caption> + <tr> + <td>Awesome data</td> + </tr> +</table> +</pre> + +<div class="hidden"> +<pre class="brush: css">table +{ +border-collapse: collapse; +border-spacing: 0px; +} +table, th, td +{ +padding: 5px; +border: 1px solid black; +}</pre> +</div> + +<p>{{ EmbedLiveSample('추가_예제', '100%', '700') }}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<h3 id="설명문">설명문</h3> + +<p>표의 목적에 대한 명확하고 상세한 설명을 포함하는 {{HTMLElement("caption")}} 요소를 제공하여 사용자가 표 콘텐츠를 확인할지, 넘어갈지 결정할 때 도움을 줄 수 있습니다.</p> + +<p>특히 스크린 리더 등 보조 기술 사용자와 낮은 시력의 사용자, 그리고 인지능력의 저하를 겪고 있는 사용자에게 도움이 됩니다.</p> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#Adding_a_caption_to_your_table_with_<caption>">MDN Adding a caption to your table with <caption></a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/caption-summary/">Caption & Summary • Tables • W3C WAI Web Accessibility Tutorials</a></li> +</ul> + +<h3 id="행과_열_범위_지정">행과 열 범위 지정</h3> + +<p>간단한 표의 경우 범위를 자동으로 유추할 수 있기 때문에, 헤더 요소의 {{htmlattrxref("scope", "th")}} 특성은 불필요합니다. 그러나 일부 보조 기술이 잘못된 범위를 유추하는 경우도 있기 때문에, 범위를 지정하는 것이 사용자 경험에 도움이 될 수도 있습니다. 복잡한 표에서는 범위를 명시해서 특정 헤더와 연관된 칸에 대한 정보를 제공할 수 있습니다.</p> + +<h4 id="예제_2">예제</h4> + +<pre class="brush: html"><table> + <caption>Color names and values</caption> + <tbody> + <tr> + <th scope="col">Name</th> + <th scope="col">HEX</th> + <th scope="col">HSLa</th> + <th scope="col">RGBa</th> + </tr> + <tr> + <th scope="row">Teal</th> + <td><code>#51F6F6</code></td> + <td><code>hsla(180, 90%, 64%, 1)</code></td> + <td><code>rgba(81, 246, 246, 1)</code></td> + </tr> + <tr> + <th scope="row">Goldenrod</th> + <td><code>#F6BC57</code></td> + <td><code>hsla(38, 90%, 65%, 1)</code></td> + <td><code>rgba(246, 188, 87, 1)</code></td> + </tr> + </tbody> +</table> +</pre> + +<p>{{htmlelement("th")}} 요소에 <code>scope="col"</code>을 선언함으로써, 해당 칸이 열의 맨 위에 위치함을 설명할 수 있습니다. 마찬가지로, <code>scope="row"</code>를 추가하면 해당 칸이 행의 맨 앞에 위치함을 설명합니다.</p> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/two-headers/">Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/irregular/">Tables with irregular headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H63.html">H63: Using the scope attribute to associate header cells and data cells in data tables | W3C Techniques for WCAG 2.0</a></li> +</ul> + +<h3 id="복잡한_표">복잡한 표</h3> + +<p>너무나 복잡해서 헤더 칸을 확실히 가로 또는 세로로 연결할 수 없는 표의 경우, 스크린 리더와 같은 보조 기술이 분석할 때 어려움을 겪을 수 있습니다. 보통 {{htmlattrxref("colspan", "td")}}과 {htmlattrxref("rowspan", "td")}} 특성이 존재하는 경우 이 정도로 복잡한 표라고 할 수 있습니다.</p> + +<p>이상적으로 보자면, 테이블의 콘텐츠를 나타내는 다른 방법을 생각하는 것이 좋습니다. 이를테면 서로 관련된 더 작은 표로 나눠서 <code>colspan</code>, <code>rowspan</code> 특성의 필요를 제거하는 것입니다. 보조 기술 사용자의 테이블 콘텐츠 이해에 도움을 줄 뿐 아니라, 인지력 문제를 겪고 있어 기존 표의 레이아웃을 이해하는 것이 곤란한 사용자의 경험도 개선할 수 있습니다.</p> + +<p>표를 나눌 수 없는 경우 {{htmlattrxref("id")}}와 {{htmlattrxref("headers", "td")}} 특성을 통해 표의 각 칸을 연관된 헤더 칸과 직접 연결하세요.</p> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/multi-level/">Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H43.html">H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0</a></li> +</ul> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-table-element','table element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.table")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><code><table></code> 요소 스타일링에 특히 도움이 되는 CSS 속성 + + <ul> + <li>표의 너비를 조절하는 {{cssxref("width")}}.</li> + <li>표의 테두리를 설정하는 {{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}}.</li> + <li>각 칸의 콘텐츠를 꾸밀 때 사용할 수 있는 {{cssxref("margin")}}, {{cssxref("padding")}}.</li> + <li>각 칸의 텍스트와 콘텐츠를 정렬할 때 사용하는 {{cssxref("text-align")}}, {{cssxref("vertical-align")}}.</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/html/element/tbody/index.html b/files/ko/web/html/element/tbody/index.html new file mode 100644 index 0000000000..e7d89d1488 --- /dev/null +++ b/files/ko/web/html/element/tbody/index.html @@ -0,0 +1,320 @@ +--- +title: '<tbody>: 표 본문 요소' +slug: Web/HTML/Element/tbody +tags: + - Element + - HTML + - HTML tabular data + - Reference + - Web +translation_of: Web/HTML/Element/tbody +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML </strong><strong><code><tbody></code></strong> 요소는 표의 여러 행({{htmlelement("tr")}})을 묶어서 표 본문을 구성합니다.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/tbody.html","tabbed-taller")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p><code><tbody></code> 요소와 그 사촌인 {{HTMLElement("thead")}}, {{HTMLElement("tfoot")}} 요소는 화면과 프린터에 렌더링 할 때 뿐만 아니라 {{Glossary("accessibility", "접근성")}} 차원에서도 유용한 의미를 표의 행에 부여합니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>0개 이상의 {{htmlelement("tr")}} 요소.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td><code><tbody></code> 요소는 부모 {{HTMLElement("table")}} 요소의 렌더링에 반드시 필요한 요소는 아닙니다. 그러나 <code><table></code> 요소의 자식 중 {{ HTMLElement("tr") }} 요소가 존재하면 사용할 수 없습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{ HTMLElement("table") }} 요소. {{ HTMLElement("caption") }}, {{HTMLElement("colgroup") }}, {{ HTMLElement("thead") }} 요소가 존재하는 경우, 그 뒤에 위치할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLTableSectionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<div class="hidden"> +<h3 id="Deprecated_attributes">Deprecated attributes</h3> + +<dl> + <dt>{{ htmlattrdef("align") }} {{deprecated_inline}}</dt> + <dd>This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are: + <ul> + <li><code>left</code>, aligning the content to the left of the cell</li> + <li><code>center</code>, centering the content in the cell</li> + <li><code>right</code>, aligning the content to the right of the cell</li> + <li><code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li> + <li><code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the {{ htmlattrxref("char", "tbody") }} and {{ htmlattrxref("charoff", "tbody") }} attributes.</li> + </ul> + + <p>If this attribute is not set, the <code>left</code> value is assumed.</p> + + <p>As this attribute is deprecated, use the CSS {{cssxref("text-align")}} property instead.</p> + + <div class="note"><strong>Note: </strong>The equivalent <code>text-align</code> property for the <code>align="char"</code> is not implemented in any browsers yet. See the <a href="/en-US/docs/Web/CSS/text-align#Browser_compatibility"><code>text-align</code>'s browser compatibility section</a> for the <code><string></code> value.</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd> + <p>The background color of the table. It is a <a href="/en-US/docs/Web/CSS/color_value#RGB_colors">6-digit hexadecimal RGB code</a>, prefixed by a '<code>#</code>'. One of the predefined <a href="/en-US/docs/Web/CSS/color_value#Color_keywords">color kewords</a> can also be used.</p> + + <p>As this attribute is deprecated, use the CSS {{cssxref("background-color")}} property instead.</p> + </dd> + <dt>{{ htmlattrdef("char") }} {{deprecated_inline}}</dt> + <dd> + <p>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (<code>.</code>) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "tbody")}} is not set to <code>char</code>, this attribute is ignored.</p> + </dd> + <dt>{{ htmlattrdef("charoff") }} {{deprecated_inline}}</dt> + <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <code>char</code> attribute.</dd> + <dt>{{ htmlattrdef("valign") }} {{deprecated_inline}}</dt> + <dd>This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are: + <ul> + <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> + <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> + <li><code>middle</code>, which will center the text in the cell;</li> + <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> + </ul> + + <p>As this attribute is deprecated, use the CSS {{cssxref("vertical-align")}} property instead.</p> + </dd> +</dl> +</div> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>표의 헤더 행을 나타내기 위해 {{HTMLElement("thead")}} 요소를 사용한 경우, <code><tbody></code> 요소는 반드시 그 뒤에 위치해야 합니다.</li> + <li><code><tbody></code>를 사용할 경우, {{HTMLElement("table")}}의 바로 밑 자식이면서 <code><tbody></code>에 속하지 않는 {{htmlelement("tr")}} 요소는 사용할 수 없습니다. 모든 비 헤더, 비 푸터 행은 반드시 <code><tbody></code>의 자식으로 존재해야 합니다.</li> + <li>문서 출력 시, <code><thead></code>와 {{htmlelement("tfoor")}} 요소는 모든 페이지에서 같거나 거의 같은 정보를 나타내고, <code><tbody></code> 요소는 서로 다른 정보를 나타냅니다.</li> + <li>표를 화면 맥락(브라우저 창 등)에서 표시할 때, 화면이 표 전체를 보여주기에 충분히 크지 않은 경우 {{Glossary("user agent", "사용자 에이전트")}}는 같은 부모의 <code><thead></code>, <code><tbody></code>, <code><tfoot></code>, {{HTMLElement("caption")}} 요소를 서로 따로 스크롤 가능토록 설정할 수 있습니다.</li> + <li>하나의 표에 다수의 <code><tbody></code>를 연속적으로 사용할 수 있으며, 이를 통해 커다란 표의 행을 구획으로 나눌 수 있습니다. 필요한 경우 각 구획에 서로 다른 서식을 적용할 수도 있습니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<p>다음은 <code><tbody></code> 요소 사용법을 보이는 예제입니다. 더 많은 예제는 {{ HTMLElement("table", "", "#예제") }}에서도 볼 수 있습니다.</p> + +<h3 id="기본_예제">기본 예제</h3> + +<p>이번 예제는 {{HTMLElement("thead")}}와 {{HTMLElement("tbody")}}를 사용해 학생 그룹의 정보를 나열하는 표를 생성합니다.</p> + +<h4 id="HTML">HTML</h4> + +<p>표의 HTML은 다음과 같습니다. 학생의 정보를 나타내는 표 본문 칸이 모두 하나의 <code><tbody></code> 요소에 속함에 주의하세요.</p> + +<pre class="brush: html"><table> + <thead> + <tr> + <th>Student ID</th> + <th>Name</th> + <th>Major</th> + </tr> + </thead> + <tbody> + <tr> + <td>3741255</td> + <td>Jones, Martha</td> + <td>Computer Science</td> + </tr> + <tr> + <td>3971244</td> + <td>Nim, Victor</td> + <td>Russian Literature</td> + </tr> + <tr> + <td>4100332</td> + <td>Petrov, Alexandra</td> + <td>Astrophysics</td> + </tr> + </tbody> +</table></pre> + +<h4 id="CSS">CSS</h4> + +<p>다음은 표에 적용할 CSS 스타일입니다.</p> + +<pre class="brush: css">table { + border: 2px solid #555; + border-collapse: collapse; + font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif; +}</pre> + +<p>우선 표의 전반적인 스타일을 설정합니다.외부 테두리의 굵기, 스타일, 색을 설정하고, {{cssxref("border-collapse")}}를 이용해 각 칸의 테두리가 서로 분리되지 않고 공유하도록 지정합니다. {{cssxref("font")}}를 사용해 표의 기본 글씨체도 설정합니다.</p> + +<pre class="brush: css">th, td { + border: 1px solid #bbb; + padding: 2px 8px 0; + text-align: left; +}</pre> + +<p>그 다음은 대부분의 칸에 적용할 스타일입니다. 1픽셀 두께의 밝은 회색 테두리를 추가하고 안쪽 여백을 조정하며, {{cssxref("text-align")}}을 사용해 모두 좌측 정렬로 설정합니다.</p> + +<pre class="brush: css">thead > tr > th { + background-color: #cce; + font-size: 18px; + border-bottom: 2px solid #999; +}</pre> + +<p>마지막으로 {{HTMLElement("thead")}} 안에 위치하는 헤더 칸에 추가 스타일을 부여합니다. 보다 어두운 {{cssxref("background-color")}}, 더 큰 글씨 크기, 그리고 다른 테두리보다 두껍고 어두운 아래쪽 테두리를 적용합니다.</p> + +<h4 id="결과">결과</h4> + +<p>결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("기본_예제", 650, 150)}}</p> + +<h3 id="다중_본문">다중 본문</h3> + +<p>You can create multiple sections within a table by using multiple <code><tbody></code> elements. Each may potentially have its own header row or rows; however, <em>there can be only one {{HTMLElement("thead")}} per table!</em> Because of that, you need to use a {{HTMLElement("tr")}} filled with {{HTMLElement("th")}} elements to create headers within each <code><tbody></code>. Let's see how that's done.</p> + +<p>Let's take the previous example, add some more students to the list, and update the table so that instead of listing each student's major on every row, the students are grouped by major, with heading rows for each major.</p> + +<h4 id="Result">Result</h4> + +<p>First, the resulting table, so you know what we're building:</p> + +<p>{{EmbedLiveSample("다중_본문", 650, 250)}}</p> + +<h4 id="HTML_2">HTML</h4> + +<p>The revised HTML looks like this:</p> + +<pre class="brush: html"><table> + <thead> + <tr> + <th>Student ID</th> + <th>Name</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="2">Computer Science</th> + </tr> + <tr> + <td>3741255</td> + <td>Jones, Martha</td> + </tr> + <tr> + <td>4077830</td> + <td>Pierce, Benjamin</td> + </tr> + <tr> + <td>5151701</td> + <td>Kirk, James</td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="2">Russian Literature</th> + </tr> + <tr> + <td>3971244</td> + <td>Nim, Victor</td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="2">Astrophysics</th> + </tr> + <tr> + <td>4100332</td> + <td>Petrov, Alexandra</td> + </tr> + <tr> + <td>8892377</td> + <td>Toyota, Hiroko</td> + </tr> + </tbody> +</table></pre> + +<p>Notice that each major is placed in a separate <code><tbody></code> block, the first row of which contains a single {{HTMLElement("th")}} element with a {{htmlattrxref("colspan", "th")}} attribute that spans the entire width of the table. That heading lists the name of the major contained within the <code><tbody></code>.</p> + +<p>Then each remaining row in each major's <code><tbody></code> consists of two cells: the first for the student's ID and the second for their name.</p> + +<h4 id="CSS_2">CSS</h4> + +<div class="hidden"> +<pre class="brush: css">table { + border: 2px solid #555; + border-collapse: collapse; + font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif; +} + +th, td { + border: 1px solid #bbb; + padding: 2px 8px 0; + text-align: left; +} + +thead > tr > th { + background-color: #cce; + font-size: 18px; + border-bottom: 2px solid #999; +}</pre> +</div> + +<p>Most of the CSS is unchanged. We do, however, add a slightly more subtle style for header cells contained directly within a <code><tbody></code> (as opposed to those which reside in a {{HTMLElement("thead")}}). This is used for the headers indicating each table section's corresponding major.</p> + +<pre class="brush: css">tbody > tr > th { + background-color: #dde; + border-bottom: 1.5px solid #bbb; + font-weight: normal; +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-tbody-element','tbody element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tbody-element','tbody element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.tbody")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>CSS properties and <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> that may be specially useful to style the <code><tbody></code> element: + + <ul> + <li>the {{ cssxref(":nth-child") }} pseudo-class to set the alignment on the cells of the column;</li> + <li>the {{ cssxref("text-align") }} property to align all cells content on the same character, like '.'.</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/html/element/td/index.html b/files/ko/web/html/element/td/index.html new file mode 100644 index 0000000000..1f6c363834 --- /dev/null +++ b/files/ko/web/html/element/td/index.html @@ -0,0 +1,213 @@ +--- +title: <td> +slug: Web/HTML/Element/td +tags: + - Element + - HTML + - Reference +translation_of: Web/HTML/Element/td +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><em>Table cell</em> <a href="/en-US/docs/Web/HTML">HTML</a> 요소 (<strong><code><td></code></strong>) 는 데이터를 포함하는 표의 셀을 정의합니다. 이것은 <em>표 모델</em>에 참여합니다.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/td.html","tabbed-taller")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th><a href="/en-US/docs/Web/HTML/Content_categories">컨텐츠 범주</a></th> + <td>없음.</td> + </tr> + <tr> + <th>허용된 컨텐츠</th> + <td>플로우 컨텐츠</td> + </tr> + <tr> + <th>태그 생략</th> + <td>시작 태그는 있어야 합니다.<br> + 종료 태그는 요소 바로 뒤에 {{HTMLElement("th")}}이나 {{HTMLElement("td")}} 요소가 뒤따르거나, 부모 요소에 더 이상 다른 데이터가 없을 경우 생략 가능합니다.</td> + </tr> + <tr> + <th>허용된 부모 요소</th> + <td>{{HTMLElement("tr")}} 요소</td> + </tr> + <tr> + <th>표준 문서</th> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-td-element" rel="external">HTML5, section 4.9.9</a> (<a href="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6">HTML4.01, section 11.2.6</a>)</td> + </tr> + </tbody> +</table> + +<h2 id="속성">속성</h2> + +<p>이 요소는 <a href="/en-US/docs/Web/HTML/Global_attributes">전역 속성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("abbr")}} {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>This attribute contains a short abbreviated description of the content of the cell. Some user-agents, such as speech readers, may present this description before the content itself. + <div class="note"><strong>참고: </strong>이 속성은 최신 표준에서 폐기되었기 떄문에 사용해서는 안됩니다: instead either consider starting the cell content by an independent abbreviated content itself or use the abbreviated content as the cell content and use the long content as the description of the cell by putting it in the <strong>title</strong> attribute.</div> + </dd> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt> + <dd>This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are: + <ul> + <li><code>left</code>, aligning the content to the left of the cell</li> + <li><code>center</code>, centering the content in the cell</li> + <li><code>right</code>, aligning the content to the right of the cell</li> + <li><code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li> + <li><code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the {{htmlattrxref("char", "td")}} and {{htmlattrxref("charoff", "td")}} attributes {{unimplemented_inline(2212)}}.</li> + </ul> + + <p>If this attribute is not set, the <code>left</code> value is assumed.</p> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard. + + <ul> + <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code>, or <code>justify</code> values, use the CSS {{cssxref("text-align")}} property on it.</li> + <li>To achieve the same effect as the <code>char</code> value, in CSS3, you can use the value of the {{htmlattrxref("char", "td")}} as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("axis")}} {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt> + <dd>This attribute contains a list of space-separated strings. Each string is the ID of a group of cells that this header applies to. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete in the latest standard: instead use the {{htmlattrxref("scope", "td")}} attribute.</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>This attribute defines the background color of each cell of the column. It is one of the 6-digit hexadecimal codes as defined in <a href="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, prefixed by a '#'. One of the sixteen predefined color strings may be used: + <table style="width: 80%;"> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Usage note:</strong> Do not use this attribute, as it is non-standard and only implemented in some versions of Microsoft Internet Explorer: the {{HTMLElement("td")}} element should be styled using <a href="/en-US/docs/CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en-US/docs/Web/CSS">CSS</a> property {{cssxref("background-color")}} instead.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt> + <dd>This attribute is used to set the character to align the cells in a column. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "td")}} is not set to <code>char</code>, this attribute is ignored. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{htmlattrxref("char", "thead")}}, in CSS3, you can use the character set using the {{htmlattrxref("char", "th")}} attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div> + </dd> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt> + <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div> + </dd> + <dt>{{htmlattrdef("colspan")}}</dt> + <dd>This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is <code>1</code>; if its value is set to <code>0</code>, it extends until the end of the {{HTMLElement("colgroup")}}, even if implicitly defined, that the cell belongs to. Values higher than 1000 will be considered as incorrect and will be set to the default value (1). + <div class="note"><strong>Note: </strong>In {{HTMLVersionInline(5)}} this attribute only accepts values greater than zero since it <a href="http://dev.w3.org/html5/spec/single-page.html#attr-tdth-colspan">must not be used to overlap cells</a>. Besides, Firefox is the only browser to support the 0 value as defined in the {{HTMLVersionInline(4.01)}} specification.</div> + </dd> + <dt>{{htmlattrdef("headers")}}</dt> + <dd>This attribute contains a list of space-separated strings, each corresponding to the <strong>id</strong> attribute of the {{HTMLElement("th")}} elements that apply to this element.</dd> + <dt>{{htmlattrdef("rowspan")}}</dt> + <dd>This attribute contains a non-negative integer value that indicates for how many rows the cell extends. Its default value is <code>1</code>; if its value is set to <code>0</code>, it extends until the end of the table section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, even if implicitly defined, that the cell belongs to. Values higher than 65534 are clipped down to 65534.</dd> + <dt>{{htmlattrdef("scope")}} {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt> + <dd> </dd> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt> + <dd>This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are: + <ul> + <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a href="http://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom of them. If characters are all of the same size, this has the same effect as <code>bottom</code>.</li> + <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible</li> + <li><code>middle</code>, which will center the text in the cell</li> + <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> + </ul> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{cssxref("vertical-align")}} property on it.</div> + </dd> +</dl> + +<h2 id="DOM_인터페이스">DOM 인터페이스</h2> + +<p>이 요소는 {{domxref("HTMLTableDataCellElement")}} 인터페이스를 구현합니다.</p> + +<h2 id="예제">예제</h2> + +<p>Please see the {{HTMLElement("table")}} page for examples on <code><td></code>.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-td-element','td element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-td-element','td element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("html.elements.td")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>다른 표 관련 요소들: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/ko/web/html/element/template/index.html b/files/ko/web/html/element/template/index.html new file mode 100644 index 0000000000..d1a7e32486 --- /dev/null +++ b/files/ko/web/html/element/template/index.html @@ -0,0 +1,165 @@ +--- +title: '<template>: 콘텐츠 템플릿 요소' +slug: Web/HTML/Element/template +tags: + - Element + - HTML + - HTML Web Components + - 'HTML:Flow content' + - 'HTML:Metadata content' + - 'HTML:Phrasing content' + - 'HTML:Script-supporting element' + - Reference + - Web + - Web Components + - 웹 컴포넌트 +translation_of: Web/HTML/Element/template +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><template></code> 요소</strong>는 페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 JavaScript를 사용해 인스턴스를 생성할 수 있는 {{glossary("HTML")}} 코드를 담을 방법을 제공합니다.</p> + +<p>템플릿은 콘텐츠 조각을 나중에 사용하기 위해 담아놓는 컨테이너로 생각하세요. 페이지를 불러오는 동안 구문 분석기가 <code><template></code> 요소의 콘텐츠도 읽기는 하지만, 이는 유효성을 검증하기 위함이며 렌더링 하기 위함은 아닙니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#메타데이터_콘텐츠">메타데이터 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#스크립트_지원_요소">스크립트 지원 요소</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>제한 없음.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>메타데이터 콘텐츠, 구문 콘텐츠, 또는 스크립트 지원 요소를 허용하는 모든 요소. 또한, {{htmlattrxref("span", "colgroup")}} 특성이 없는 {{htmlelement("colgroup")}} 요소도 가능.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLTemplateElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<p>다만, {{domxref("HTMLTemplateElement")}}는 읽기 전용 {{domxref("HTMLTemplateElement.content", "content")}} 속성을 가집니다. <code>content</code>는 템플릿이 담고 있는 DOM 하위 트리를 나타내는 {{domxref("DocumentFragment")}}입니다.</p> + +<h2 id="예제">예제</h2> + +<p>우선 예제의 HTML부터 보겠습니다.</p> + +<pre class="brush: html"><table id="producttable"> + <thead> + <tr> + <td>UPC_Code</td> + <td>Product_Name</td> + </tr> + </thead> + <tbody> + <!-- 존재하는 데이터는 선택적으로 여기에 포함됩니다 --> + </tbody> +</table> + +<template id="productrow"> + <tr> + <td class="record"></td> + <td></td> + </tr> +</template> +</pre> + +<p>먼저, 나중에 JavaScript 코드를 사용해 컨텐츠를 삽입할 테이블이 있습니다. 그 다음 테이블의 열을 표현하는 HTML 조각의 구조를 설명하는 템플릿이 옵니다.</p> + +<p>이제 테이블이 생성되었고 템플릿이 정의되었으므로, JavaScript 를 사용해 템플릿을 사용해 구성된 열을 기반으로 각 열을 테이블로 삽입합니다.</p> + +<pre class="brush: js">// 템플릿 엘리먼트의 컨텐츠 존재 유무를 통해 +// 브라우저가 HTML 템플릿 엘리먼트를 지원하는지 확인합니다 +if ('content' in document.createElement('template')) { + + // 기존 HTML tbody 와 템플릿 열로 테이블을 인스턴스화합니다 + var t = document.querySelector('#productrow'); + + // 새로운 열을 복제하고 테이블에 삽입합니다 + var tb = document.querySelector("tbody"); + var clone = document.importNode(t.content, true); + td = clone.querySelectorAll("td"); + td[0].textContent = "1235646565"; + td[1].textContent = "Stuff"; + + tb.appendChild(clone); + + // 새로운 열을 복제하고 테이블에 삽입합니다 + var clone2 = document.importNode(t.content, true); + td = clone2.querySelectorAll("td"); + td[0].textContent = "0384928528"; + td[1].textContent = "Acme Kidney Beans 2"; + + tb.appendChild(clone2); + +} else { + // HTML 템플릿 엘리먼트를 지원하지 않으므로 + // 테이블에 열을 추가하는 다른 방법을 찾습니다. +}</pre> + +<p>결과는 JavaScript 를 통해 추가된 두 개의 새로운 열을 포함하는 기존 HTML 테이블입니다.</p> + +<div class="hidden"> +<pre class="brush: css">table { + background: #000; +} +table td { + background: #fff; +}</pre> +</div> + +<p>{{EmbedLiveSample("예제", 500, 120)}}</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','scripting.html#the-template-element','template element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','semantics-scripting.html#the-template-element','template element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden"> +<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("html.elements.template")}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">같이 보기</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ko/docs/Web/Web_Components/Using_templates_and_slots">템플릿과 슬롯 사용하기</a></li> +</ul> diff --git a/files/ko/web/html/element/textarea/index.html b/files/ko/web/html/element/textarea/index.html new file mode 100644 index 0000000000..a59be6f9dc --- /dev/null +++ b/files/ko/web/html/element/textarea/index.html @@ -0,0 +1,158 @@ +--- +title: <textarea> +slug: Web/HTML/Element/textarea +tags: + - Element + - Forms + - HTML + - HTML forms + - Web +translation_of: Web/HTML/Element/textarea +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><textarea></code> 요소</strong>는 멀티라인 일반 텍스트 편집 컨트롤을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/textarea.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<h2 id="사용_문맥">사용 문맥</h2> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">컨텐츠 범주</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">플로우 컨텐츠</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">구문 컨텐츠</a>, <a href="/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">대화형 컨텐츠</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">labelable</a>, <a href="/en/HTML/Content_categories#form_resettable" title="en/HTML/Content categories#form resettable">resettable</a>, and <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">form-associated</a> element.</li> + <li><dfn>허용되는 컨텐츠</dfn> 문자 데이터</li> + <li><dfn>태그 생략</dfn> {{no_tag_omission}}</li> + <li><dfn>허용되는 부모 요소</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">구문 컨텐츠</a>를 허용하는 모든 요소</li> + <li><dfn>DOM 인터페이스</dfn> {{domxref("HTMLTextAreaElement")}}</li> +</ul> + +<h2 id="속성">속성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 속성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>This is a nonstandard attribute used by iOS Safari Mobile which controls whether and how the text value should be automatically capitalized as it is entered/edited by the user. The non-deprecated values are available in iOS 5 and later. Possible values are: + <ul> + <li><code>none</code>: Completely disables automatic capitalization</li> + <li><code>sentences</code>: Automatically capitalize the first letter of sentences.</li> + <li><code>words</code>: Automatically capitalize the first letter of words.</li> + <li><code>characters</code>: Automatically capitalize all characters.</li> + <li><code>on</code>: {{deprecated_inline()}} Deprecated since iOS 5.</li> + <li><code>off</code>: {{deprecated_inline()}} Deprecated since iOS 5.</li> + </ul> + </dd> + <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute indicates whether the value of the control can be automatically completed by the browser. Possible values are: + <ul> + <li><code>off</code>: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.</li> + <li><code>on</code>: The browser can automatically complete the value based on values that the user has entered during previous uses.</li> + </ul> + + <p>If the <strong>autocomplete</strong> attribute is not specified on an textarea element, then the browser uses the <strong>autocomplete</strong> attribute value of the <code><textarea></code> element's form owner. The form owner is either the <code>form</code> element that this <code><textarea></code> element is a descendant of or the form element whose <strong>id</strong> is specified by the <strong>form</strong> attribute of the input element. For more information, see the {{htmlattrxref("autocomplete", "form")}} attribute in {{HTMLElement("form")}}.</p> + </dd> + <dt>{{ htmlattrdef("autofocus") }} {{ HTMLVersionInline("5") }}</dt> + <dd>이 불리언 속성은 페이지가 로드 됬을때, 포커스를 오버라이드(예:사용자가 다른 컨트롤에 타이핑) 하지 않는다면, 폼 컨트롤이 입력 포커스를 받을지를 지정합니다.문서에서 오직 하나의 폼 관련 요소만이 이 속성이 지정될수 있습니다.</dd> + <dt>{{ htmlattrdef("cols") }}</dt> + <dd>The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is <span style="font-family: courier new;">20</span> (HTML5).</dd> + <dt>{{ htmlattrdef("disabled") }}</dt> + <dd>사용자가 컨트롤과 상호작용할수 없다는것을 가리키는 불리언 속성 (만약 속성이 지정되지 않았다면, 이 요소를 포함하는 컨테이닝 요소(예: {{ HTMLElement("fieldset") }})에게서 값을 상속받습니다. 예를 들면, disabled 속성을 가진 컨테이닝 요소가 없다면, 컨트롤은 사용 가능합니다)</dd> + <dt>{{ htmlattrdef("form") }} {{ HTMLVersionInline("5") }}</dt> + <dd>The form element that the textarea element is associated with (its "form owner"). The value of the attribute must be an ID of a form element in the same document. If this attribute is not specified, the textarea element must be a descendant of a form element. This attribute enables you to place textarea elements anywhere within a document, not just as descendants of their form elements.</dd> + <dt>{{ htmlattrdef("maxlength") }} {{ HTMLVersionInline("5") }}</dt> + <dd>사용자가 입력할 수 있는 문자(Unicode code points)의 최대 개수. 만약 명시하지 않을 경우 사용자는 무한으로 입력 가능.</dd> + <dt>{{ htmlattrdef("minlength") }} {{ HTMLVersionInline("5") }}</dt> + <dd>사용자가 입력해야 할 문자(Unicode code points)의 최소 개수</dd> + <dt>{{ htmlattrdef("name") }}</dt> + <dd>컨트롤의 이름</dd> + <dt>{{ htmlattrdef("placeholder") }} {{ HTMLVersionInline("5") }}</dt> + <dd>A hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds.</dd> + <dt>{{ htmlattrdef("readonly") }}</dt> + <dd>이 불리언 속성은 사용자가 컨트롤의 값을 수정할수 없다는것을 가리킵니다. <code>disabled</code> 속성과는 다르게, <code>readonly</code> 속성은 사용자가 컨트롤을 클릭하거나 선택하는것을 막지 않습니다.<code> readonly</code> 컨트롤의 값은 여전히 폼과 함께 제출 됩니다..</dd> + <dt>{{ htmlattrdef("required") }} {{ HTMLVersionInline("5") }}</dt> + <dd>이 속성은 사용자가 폼을 제출하기 전에 반드시 채워야 한다는 것을 가리킵니다.</dd> + <dt>{{ htmlattrdef("rows") }}</dt> + <dd>The number of visible text lines for the control.</dd> + <dt>{{ htmlattrdef("selectionDirection") }} {{ HTMLVersionInline("5") }}</dt> + <dd>The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.</dd> + <dt>{{ htmlattrdef("selectionEnd") }}</dt> + <dd>The index to the last character in the current selection.</dd> + <dt>{{ htmlattrdef("selectionStart") }}</dt> + <dd>The index to the first character in the current selection.</dd> + <dt>{{ htmlattrdef("spellcheck") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Setting the value of this attribute to <code>true</code> indicates that the element needs to have its spelling and grammar checked. The value <code>default</code> indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code>spellcheck</code> value. The value <code>false</code> indicates that the element should not be checked.</dd> + <dt>{{ htmlattrdef("wrap") }} {{ HTMLVersionInline("5") }}</dt> + <dd>Indicates how the control wraps text. Possible values are: + <ul> + <li><span style="font-family: courier new;">hard</span>: The browser automatically inserts line breaks (CR+LF) so that each line has no more than the width of the control; the <code>cols</code> attribute must be specified.</li> + <li><span style="font-family: courier new;">soft</span>: The browser ensures that all line breaks in the value consist of a CR+LF pair, but does not insert any additional line breaks.</li> + </ul> + + <p>If this attribute is not specified, <span style="font-family: courier new;">soft</span> is its default value.</p> + </dd> +</dl> + +<h2 id="DOM_인터페이스">DOM 인터페이스</h2> + +<p>이 요소는 <code><a href="/en/DOM/HTMLTextAreaElement" title="en/DOM/textarea">HTMLTextAreaElement</a></code> 인터페이스를 구현합니다.</p> + +<p>{{ h1_gecko_minversion("Resizable textareas", "2.0") }}</p> + +<p>{{ gecko("2.0") }} introduced support for resizable textareas. This is controlled by the {{ cssxref("resize") }} CSS property. Resizing of textareas is enabled by default, but you can explicitly disable it by including the following CSS:</p> + +<pre>textarea { + resize: none; +} +</pre> + +<h2 id="CSS와_상호작용_하기">CSS와 상호작용 하기</h2> + +<p>In regards to CSS, an <code><textarea></code> is a <a href="https://developer.mozilla.org/en-US/docs/CSS/Replaced_element" title="/en-US/docs/CSS/Replaced_element">replaced element</a>. The HTML specification doesn't define where the baseline of a <code><textarea></code> is. So different browsers set it to different positions. For Gecko, the <code><textarea></code> baseline is set on the baseline of the first line of the textarea's first line, on another browser it may be set on the bottom of the <code><textarea></code> box. Don't use {{cssxref("vertical-align")}}<code>: baseline</code> on it, as the behavior will be unpredictable.</p> + +<p><em>Textarea</em> 는 래스터 이미지 처럼 고유한 넓이를 가지고 있습니다.</p> + +<h2 id="Example" name="Example">예제</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><textarea name="textarea" rows="10" cols="50">Write something here</textarea></pre> + +<p>{{ EmbedLiveSample('Example','600','200') }}</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-textarea-element', '<textarea>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-textarea-element', '<textarea>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '<textarea>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.textarea")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<p>다른 폼 관련 요소들: {{ HTMLElement("form") }}, {{ HTMLElement("button") }}, {{ HTMLElement("datalist") }}, {{ HTMLElement("legend") }}, {{ HTMLElement("label") }}, {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }} and {{ HTMLElement("meter") }}.</p> diff --git a/files/ko/web/html/element/th/index.html b/files/ko/web/html/element/th/index.html new file mode 100644 index 0000000000..f2bafce38e --- /dev/null +++ b/files/ko/web/html/element/th/index.html @@ -0,0 +1,226 @@ +--- +title: <th> +slug: Web/HTML/Element/th +tags: + - HTML + - 레퍼런스 + - 요소 + - 웹 + - 표 +translation_of: Web/HTML/Element/th +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">The <strong>HTML <code><th></code> element</strong> defines a cell as header of a group of table cells. The exact nature of this group is defined by the {{htmlattrxref("scope", "th")}} and {{htmlattrxref("headers", "th")}} attributes.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/th.html","tabbed-taller")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Content categories</a></th> + <td>None.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Flow content</a>, but with no header, footer, sectioning content, or heading content descendants.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>The start tag is mandatory.<br> + The end tag may be omitted, if it is immediately followed by a {{HTMLElement("th")}} or {{HTMLElement("td")}} element or if there are no more data in its parent element.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>A {{HTMLElement("tr")}} element.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLTableHeaderCellElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("abbr")}}</dt> + <dd>This attribute contains a short abbreviated description of the cell's content. Some user-agents, such as speech readers, may present this description before the content itself.</dd> + <dt>{{htmlattrdef("align")}} {{obsolete_inline("html5")}}</dt> + <dd>This enumerated attribute specifies how the cell content's horizontal alignment will be handled. Possible values are: + <ul> + <li><code>left</code>: The content is aligned to the left of the cell.</li> + <li><code>center</code>: The content is centered in the cell.</li> + <li><code>right</code>: The content is aligned to the right of the cell.</li> + <li><code>justify</code> (with text only): The content is stretched out inside the cell so that it covers its entire width.</li> + <li><code>char</code> (with text only): The content is aligned to a character inside the <code><th></code> element with minimal offset. This character is defined by the {{htmlattrxref("char", "th")}} and {{htmlattrxref("charoff", "th")}} attributes.</li> + </ul> + + <p>The default value when this attribute is not specified is <code>left</code>.</p> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete in the latest standard. + + <ul> + <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values, apply the CSS {{cssxref("text-align")}} property to the element.</li> + <li>To achieve the same effect as the <code>char</code> value, give the {{cssxref("text-align")}} property the same value you would use for the {{htmlattrxref("char", "th")}}. {{unimplemented_inline}} in CSS3.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("axis")}} {{obsolete_inline("html5")}}</dt> + <dd>This attribute contains a list of space-separated strings. Each string is the <code>id</code> of a group of cells that this header applies to. + <div class="note"><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard: use the {{htmlattrxref("scope", "th")}} attribute instead.</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>This attribute defines the background color of each cell in a column. It consists of a 6-digit hexadecimal code as defined in <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a> and is prefixed by '#'. This attribute may be used with one of sixteen predefined color strings: + <table> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Note:</strong> Do not use this attribute, as it is non-standard and only implemented in some versions of Microsoft Internet Explorer: The {{HTMLElement("th")}} element should be styled using <a href="/en-US/docs/Web/CSS">CSS</a>. To create a similar effect use the {{cssxref("background-color")}} property in <a href="/en-US/docs/Web/CSS">CSS</a> instead.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{obsolete_inline("html5")}}</dt> + <dd>The content in the cell element is aligned to a character. Typical values include a period (.) to align numbers or monetary values. If {{htmlattrxref("align", "th")}} is not set to <code>char</code>, this attribute is ignored. + <div class="note"><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard. To achieve the same effect, you can specify the character as the first value of the {{cssxref("text-align")}} property, {{unimplemented_inline}} in CSS3.</div> + </dd> + <dt>{{htmlattrdef("charoff")}} {{obsolete_inline("html5")}}</dt> + <dd>This attribute is used to shift column data to the right of the character specified by the <strong>char</strong> attribute. Its value specifies the length of this shift. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete in the latest standard.</div> + </dd> + <dt>{{htmlattrdef("colspan")}}</dt> + <dd>This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is <code>1</code>. Values higher than 1000 will be considered as incorrect and will be set to the default value (1).</dd> + <dt>{{htmlattrdef("headers")}}</dt> + <dd>This attribute contains a list of space-separated strings, each corresponding to the <strong>id</strong> attribute of the {{HTMLElement("th")}} elements that apply to this element.</dd> + <dt>{{htmlattrdef("height")}} {{Deprecated_inline("html 4")}}, {{obsolete_inline("html5")}}</dt> + <dd>This attribute is used to define a recommended cell height. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete in the latest standard: use the CSS {{cssxref("height")}} property instead.</div> + </dd> + <dt>{{htmlattrdef("rowspan")}}</dt> + <dd>This attribute contains a non-negative integer value that indicates for how many rows the cell extends. Its default value is <code>1</code>; if its value is set to <code>0</code>, it extends until the end of the table section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, even if implicitly defined), that the cell belongs to. Values higher than 65534 are clipped down to 65534.</dd> + <dt>{{htmlattrdef("scope")}}</dt> + <dd>This enumerated attribute defines the cells that the header (defined in the {{HTMLElement("th")}}) element relates to. It may have the following values: + <ul> + <li><code>row</code>: The header relates to all cells of the row it belongs to.</li> + <li><code>col</code>: The header relates to all cells of the column it belongs to.</li> + <li><code>rowgroup</code>: The header belongs to a rowgroup and relates to all of its cells. These cells can be placed to the right or the left of the header, depending on the value of the <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> attribute in the {{HTMLElement("table")}} element.</li> + <li><code>colgroup</code>: The header belongs to a colgroup and relates to all of its cells.</li> + <li><code>auto</code></li> + </ul> + + <p>The default value when this attribute is not specified is <code>auto</code>.</p> + </dd> + <dt>{{htmlattrdef("valign")}} {{obsolete_inline("html5")}}</dt> + <dd>This attribute specifies how a text is vertically aligned inside a cell. Possible values for this attribute are: + <ul> + <li><code>baseline</code>: Positions the text near the bottom of the cell and aligns it with the <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom. If characters don't descend below the baseline, the baseline value achieves the same effect as <code>bottom</code>.</li> + <li><code>bottom</code>: Positions the text near the bottom of the cell.</li> + <li><code>middle</code>: Centers the text in the cell.</li> + <li>and <code>top</code>: Positions the text near the top of the cell.</li> + </ul> + + <div class="note"><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard: use the CSS {{cssxref("vertical-align")}} property instead.</div> + </dd> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline("html 4")}}, {{obsolete_inline("html5")}}</dt> + <dd>This attribute is used to define a recommended cell width. Additional space can be added with the {{domxref("HTMLTableElement.cellSpacing", "cellspacing")}} and {{domxref("HTMLTableElement.cellPadding", "cellpadding")}} properties and the width of the {{HTMLElement("col")}} element can also create extra width. But, if a column's width is too narrow to show a particular cell properly, it will be widened when displayed. + <div class="note"><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard: use the CSS {{cssxref("width")}} property instead.</div> + </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>See {{HTMLElement("table")}} for examples on <code><th></code>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-th-element','th element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-th-element','th element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.th")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li> +</ul> diff --git a/files/ko/web/html/element/thead/index.html b/files/ko/web/html/element/thead/index.html new file mode 100644 index 0000000000..50164bfebc --- /dev/null +++ b/files/ko/web/html/element/thead/index.html @@ -0,0 +1,270 @@ +--- +title: <thead> +slug: Web/HTML/Element/thead +translation_of: Web/HTML/Element/thead +--- +<h2 id="개요">개요</h2> + +<p>The <em>HTML Table Head Element</em> (<code><thead></code>) defines a set of rows defining the head of the columns of the table.</p> + +<h2 id="사용_문맥">사용 문맥</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">콘텐츠 범주</a></td> + <td>None.</td> + </tr> + <tr> + <td>허용되는 콘텐츠</td> + <td>Zero or more {{ HTMLElement("tr") }} elements.</td> + </tr> + <tr> + <td>태그 생략</td> + <td>The start tag is mandatory. The end tag may be omitted if the {{ HTMLElement("thead") }} element is immediately followed by a {{ HTMLElement("tbody") }} or {{ HTMLElement("tfoot") }} element.</td> + </tr> + <tr> + <td>허용되는 부모 요소</td> + <td>A {{ HTMLElement("table") }} element. The {{ HTMLElement("thead") }} must appear after any {{ HTMLElement("caption") }} or {{ HTMLElement("colgroup") }} element, even implicitly defined, but before any {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }} and {{ HTMLElement("tr") }} element.</td> + </tr> + <tr> + <td>Normative document</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-thead-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-thead-element">HTML5, section 4.9.6</a> (<a href="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-THEAD" title="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-THEAD">HTML4.01, section 11.2.3</a>)</td> + </tr> + </tbody> +</table> + +<h2 id="속성">속성</h2> + +<p><span style="line-height: 21px;">This element includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{ htmlattrdef("align") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</dt> + <dd>This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are: + <ul> + <li><code>left</code>, aligning the content to the left of the cell</li> + <li><code>center</code>, centering the content in the cell</li> + <li><code>right</code>, aligning the content to the right of the cell</li> + <li><code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li> + <li><code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the {{ htmlattrxref("char", "thead") }} and {{ htmlattrxref("charoff", "thead") }} attributes {{ unimplemented_inline("2212") }}.</li> + </ul> + + <p>If this attribute is not set, the <span style="font-family: courier new;">left</span> value is assumed.</p> + + <div class="note"><strong>참고: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard. + + <ul> + <li>To achieve the same effect as the <span style="font-family: courier new;">left</span>, <span style="font-family: courier new;">center</span>, <span style="font-family: courier new;">right</span> or <span style="font-family: courier new;">justify</span> values, use the CSS {{ cssxref("text-align") }} property on it.</li> + <li>To achieve the same effect as the <span style="font-family: courier new;">char</span> value, in CSS3, you can use the value of the {{ htmlattrxref("char", "thead") }} as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("bgcolor") }} {{ Non-standard_inline() }}</dt> + <dd>This attribute defines the background color of each cell of the column. It is one of the 6-digit hexadecimal code as defined in <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, prefixed by a '#'. One of the sixteen predefined color strings may be used: + <table style="width: 80%;"> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">black</span> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">green</span> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">silver</span> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">lime</span> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">gray</span> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">olive</span> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">white</span> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">yellow</span> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">maroon</span> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">navy</span> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">red</span> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">blue</span> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">purple</span> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">teal</span> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">fuchsia</span> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">aqua</span> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it is non-standard and only implemented in some versions of Microsoft Internet Explorer: the {{ HTMLElement("thead") }} element should be styled using <a href="/en/CSS" title="en/CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en/CSS" title="en/CSS">CSS</a> property {{ cssxref("background-color") }}, on the relevant {{ HTMLElement("td") }} or {{ HTMLElement("th") }} elements.</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("char") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</dt> + <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{ htmlattrxref("align", "tr") }} is not set to <span style="font-family: courier new;">char</span>, this attribute is ignored. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{ htmlattrxref("char", "thead") }}, in CSS3, you can use the character set using the {{ htmlattrxref("char", "thead") }} attribute as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("charoff") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</dt> + <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute. + <div class="note"><strong>참고: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("valign") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</dt> + <dd>This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are: + <ul> + <li><span style="font-family: courier new;">baseline</span>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="http://en.wikipedia.org/wiki/Baseline_%28typography%29" title="http://en.wikipedia.org/wiki/Baseline_(typography)">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <span style="font-family: courier new;">bottom</span>.</li> + <li><span style="font-family: courier new;">bottom</span>, which will put the text as close to the bottom of the cell as it is possible;</li> + <li><span style="font-family: courier new;">middle</span>, which will center the text in the cell;</li> + <li><span style="font-family: courier new;">top</span>, which will put the text as close to the top of the cell as it is possible.</li> + </ul> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{ cssxref("vertical-align") }} property on it.</div> + </dd> +</dl> + +<h2 id="DOM_인터페이스">DOM 인터페이스</h2> + +<p>This element implements the <code><a href="/en/DOM/HTMLTableSectionElement" title="en/DOM/HTMLTableSectionElement">HTMLTableSectionElement</a></code> interface.</p> + +<h2 id="예제">예제</h2> + +<p>See {{ HTMLElement("table") }} for examples on<code> <thead></code>.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>기능</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code>align/valign</code> 속성</td> + <td>1.0</td> + <td>{{ CompatNo() }} {{ bug("915") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code>char/charoff</code> 속성</td> + <td>1.0</td> + <td>{{ CompatNo() }} {{ bug("2212") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code>bgcolor</code> 속성 {{ Non-standard_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>기능</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code>align/valign</code> 속성</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} {{ bug("915") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>char/charoff</code> 속성</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} {{ bug("2212") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>bgcolor</code> 속성 {{ Non-standard_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>Other table-related HTML Elements: {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }};</li> + <li>CSS properties and pseudo-classes that may be specially useful to style the <span style="font-family: courier new;"><thead></span> element: + <ul> + <li>the {{ cssxref(":nth-child") }} pseudo-class to set the alignment on the cells of the column;</li> + <li>the {{ cssxref("text-align") }} property to align all cells content on the same character, like '.'.<</li> + </ul> + </li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/ko/web/html/element/time/index.html b/files/ko/web/html/element/time/index.html new file mode 100644 index 0000000000..291c05b2b8 --- /dev/null +++ b/files/ko/web/html/element/time/index.html @@ -0,0 +1,169 @@ +--- +title: <time> +slug: Web/HTML/Element/time +tags: + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - 'HTML:Phrasing content' + - Reference + - Web +translation_of: Web/HTML/Element/time +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><time></code> 요소</strong>는 시간의 특정 지점 또는 구간을 나타냅니다.</span> <code>datetime</code> 특성의 값을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 때 사용할 수 있습니다.</p> + +<p><code><time></code> 요소가 나타낼 수 있는 시간은 다음과 같습니다.</p> + +<ul> + <li>24시간 표기법 시계의 시간.</li> + <li>정확한 <a href="https://ko.wikipedia.org/wiki/%EA%B7%B8%EB%A0%88%EA%B3%A0%EB%A6%AC%EB%A0%A5">그레고리력</a> 날짜. (시간대 정보 포함 가능)</li> + <li><a href="https://www.w3.org/TR/2014/REC-html5-20141028/infrastructure.html#valid-duration-string">유효한 시간 범위</a>.</li> +</ul> + +<div>{{EmbedInteractiveExample("pages/tabbed/time.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLTimeElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>요소의 시간 또는 날짜 값. 아래에서 설명하는 형식 중 하나여야 합니다.</dd> +</dl> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><time></code> 요소는 기계가 읽을 수 있는 형태로 날짜와 시간을 표현할 때 사용합니다. 예를 들어, 일정의 경우 사용자 에이전트가 자동으로 달력에 일정을 추가할 수 있도록 정확한 일시를 나타낼 수 있습니다.</p> + +<p>복잡한 계산상 문제로 인해, 그레고리력의 도입 이전 시간을 나타낼 때 사용해서는 안됩니다.</p> + +<p>기계가 읽을 날짜와 시간 값은 <code>datetime</code> 특성의 값으로, 아래의 적절한 형식 중 하나여야 합니다. <code>datetime</code> 특성이 없는 경우 <strong>어떠한 자식 요소도 두어서는 안되며</strong>, 요소의 텍스트 콘텐츠를 <code>datetime</code> 특성 값으로 간주합니다.</p> + +<h3 id="유효한_datetime_값">유효한 <code>datetime</code> 값</h3> + +<dl> + <dt>유효한 연도 문자열</dt> + <dd><code>2011</code></dd> + <dt>유효한 연-월 문자열</dt> + <dd><code>2011-11</code></dd> + <dt>유효한 연-월-일 문자열</dt> + <dd><code>2011-11-18</code></dd> + <dt>유효한 월-일 문자열</dt> + <dd><code>11-18</code></dd> + <dt>유효한 주차 문자열</dt> + <dd><code>2011-W47</code></dd> + <dt>유효한 시간 문자열</dt> + <dd><code>14:54</code></dd> + <dd><code>14:54:39</code></dd> + <dd><code>14:54:39.929</code></dd> + <dt>유효한 현지 날짜 및 시간 문자열</dt> + <dd><code>2011-11-18T14:54:39.929</code></dd> + <dd><code>2011-11-18 14:54:39.929</code></dd> + <dt>유효한 국제 날짜 및 시간 문자열</dt> + <dd><code>2011-11-18T14:54:39.929Z</code></dd> + <dd><code>2011-11-18T14:54:39.929-0400</code></dd> + <dd><code>2011-11-18T14:54:39.929-04:00</code></dd> + <dd><code>2011-11-18 14:54:39.929Z</code></dd> + <dd><code>2011-11-18 14:54:39.929-0400</code></dd> + <dd><code>2011-11-18 14:54:39.929-04:00</code></dd> + <dt>유효한 기간 문자열</dt> + <dd><code>PT4H18M3S</code></dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_예제">간단한 예제</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>The concert starts at <time>20:00</time>.</p> +</pre> + +<h4 id="결과">결과</h4> + +<p>{{ EmbedLiveSample('간단한_예제', 250, 60) }}</p> + +<h3 id="datetime_예제"><code>datetime</code> 예제</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p> +</pre> + +<h4 id="결과_2">결과</h4> + +<p>{{ EmbedLiveSample('datetime_예제', 250, 60) }}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'textlevel-semantics.html#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.time")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>날짜와 시간 외 다른 종류의 값을 나타낼 수 있는 {{htmlelement("data")}} 요소.</li> +</ul> diff --git a/files/ko/web/html/element/title/index.html b/files/ko/web/html/element/title/index.html new file mode 100644 index 0000000000..178a0d05ff --- /dev/null +++ b/files/ko/web/html/element/title/index.html @@ -0,0 +1,134 @@ +--- +title: '<title>: 문서 제목 요소' +slug: Web/HTML/Element/title +tags: + - Element + - HTML + - HTML document metadata + - 'HTML:Metadata content' + - Reference + - Web + - 제목 + - 창 제목 + - 탭 제목 + - 페이지 제목 +translation_of: Web/HTML/Element/title +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><title></code> 요소</strong>는 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의합니다.</span> 텍스트만 포함할 수 있으며 태그를 포함하더라도 무시합니다.</p> + +<pre class="brush: html"><title>Grandma's Heavy Metal Festival Journal</title></pre> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#메타데이터_콘텐츠">메타데이터 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>비어있지 않는 텍스트.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그와 닫는 태그 모두 필수입니다. <code></title></code>이 없으면 브라우저가 페이지의 나머지 내용을 무시합니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>다른 <code><title></code> 요소를 포함하지 않은 {{htmlelement("head")}}.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLTitleElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><title></code> 요소는 페이지의 {{HTMLElement("head")}} 안에서 사용해야 합니다.</p> + +<h3 id="페이지_제목과_SEO">페이지 제목과 SEO</h3> + +<p>페이지 제목은 {{glossary("SEO")}}에 큰 영향을 줍니다. 보통, 짧고 일반적인 이름보다 길고 상세한 제목이 더 좋은 성과를 내곤 합니다. {{glossary("search engine", "검색 엔진")}}이 결과 페이지의 순서를 결정하는 구성 요소 중 하나가 페이지 제목의 내용이기 때문입니다. 또한, 검색 결과에서 잠재적 독자의 주목을 끌 수 있는 최초 "훅"이 바로 제목입니다.</p> + +<p>다음은 좋은 제목을 작성할 때 참고할 수 있는 몇 가지 지침입니다.</p> + +<ul> + <li>하나 혹은 두 개의 단어로만 제목을 구성하는걸 피하세요. 콘텐츠를 설명하는 문장을 넣거나, 사전과 참고 문서의 경우 용어와 정의를 짝지어 사용하세요.</li> + <li>검색 결과는 보통 페이지 제목의 첫 55~60글자만 노출합니다. 이후 텍스트는 보이지 않을 수도 있으므로 글자 수를 제한하세요. 긴 제목을 반드시 사용해야 하는 경우, 중요한 부분을 앞에 배치해서 뒷부분이 없어지더라도 내용을 잃지 않도록 주의하세요.</li> + <li>"키워드 뭉치" 스타일의 제목은 피하세요. 제목이 단순한 단어 나열에 불과하다면 검색 알고리즘이 결과에서 순서를 내리곤 합니다.</li> + <li>웹 사이트 내에서 제목을 최대한 겹치지 않도록 하세요. 중복, 혹은 유사한 제목은 검색 결과의 정확도를 떨어트리는 요인입니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><title>엄청 흥미로운 내용</title> +</pre> + +<p>예제 코드를 포함한 문서를 연 브라우저 창이나 탭의 제목이 "엄청 흥미로운 내용"으로 바뀌게 됩니다.</p> + +<h2 id="Specifications" name="Specifications">접근성 고려사항</h2> + +<p>페이지의 목적을 설명하는 <code>title</code>을 제공하는 것이 중요합니다.</p> + +<p>보조 기술 사용자가 자주 사용하는 탐색 기술 중 하나는 페이지의 제목을 읽고 어떤 내용일지 유추하는 것입니다. 일일히 탐색해가며 콘텐츠를 찾는건 시간도 많이 들 뿐더러 어려운 일이기 때문입니다.</p> + +<h3 id="예제_2">예제</h3> + +<pre class="brush: html"><title>메뉴 - 블루 하우스 치즈 - FoodYum: 지금 바로 온라인으로 주문하세요!</title> +</pre> + +<p>사용자를 도와주려면 페이지의 <code>title</code> 값이 중요한 상태의 변화(입력 폼 유효성 문제 등)를 반영하도록 바꾸세요.</p> + +<pre class="brush: html"><title>오류 2개 - 주문서 - 블루 하우스 치즈 - FoodYum: 지금 바로 온라인으로 주문하세요!</title> +</pre> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html">Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '<title>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.title")}}</p> diff --git a/files/ko/web/html/element/tr/index.html b/files/ko/web/html/element/tr/index.html new file mode 100644 index 0000000000..116e664557 --- /dev/null +++ b/files/ko/web/html/element/tr/index.html @@ -0,0 +1,217 @@ +--- +title: <tr> +slug: Web/HTML/Element/tr +translation_of: Web/HTML/Element/tr +--- +<h2 id="개요">개요</h2> + +<p>The <em>HTML Table Row Element</em> (<code><tr></code>) defines a row of cells in a table. Those can be a mix of {{HTMLElement("td")}} and {{HTMLElement("th")}} elements.</p> + +<h2 id="사용_문맥">사용 문맥</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">콘텐츠 범주</a></td> + <td>None.</td> + </tr> + <tr> + <td>허용되는 콘텐츠</td> + <td>Zero or more {{HTMLElement("td")}} or {{HTMLElement("th")}} elements, or a mix of them</td> + </tr> + <tr> + <td>태그 생략</td> + <td>The start tag is mandatory. The end tag may be omitted if the {{HTMLElement("tr")}} element is immediately followed by a {{HTMLElement("tr")}} element, or if the parent table group ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}} or {{HTMLElement("tfoot")}}) element doesn't have any more content.</td> + </tr> + <tr> + <td>허용되는 부모 요소</td> + <td>A {{HTMLElement("table")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} or {{HTMLElement("tfoot")}} element.</td> + </tr> + <tr> + <td>Normative document</td> + <td><a class="external" href="http://www.whatwg.org/html/#the-tr-element">HTML, "The <code>tr</code> element"</a></td> + </tr> + </tbody> +</table> + +<h2 id="속성">속성</h2> + +<p><span style="line-height: 21px;">This element includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are: + <ul> + <li><code>left</code>, aligning the content to the left of the cells</li> + <li><code>center</code>, centering the content in the cells</li> + <li><code>right</code>, aligning the content to the right of the cells</li> + <li><code>justify</code>, widening the spaces in the textual content so that the content is justified in the cells</li> + <li><code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the {{htmlattrxref("char", "tr")}} and {{htmlattrxref("charoff", "tr")}} attributes {{unimplemented_inline("2212")}}.</li> + </ul> + + <p>If this attribute is not set, the parent node's value is inherited.</p> + + <div class="note"><strong>참고: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard. + + <ul> + <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values, use the CSS {{cssxref("text-align")}} property on it.</li> + <li>To achieve the same effect as the <code>char</code> value, in CSS3, you can use the value of the {{htmlattrxref("char", "tr")}} as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>This attribute defines the background color of each cell of the row. It can be either an <a href="/en-US/docs/CSS/color_value#HTML.2fSVG.2fX11.c2.a0_Color_Keywords" title="CSS/color value#HTML.2fSVG.2fX11.c2.a0 Color Keywords">#RRGGBB code</a> or an <a href="/#HTML.2fSVG.2fX11.c2.a0_Color_Keywords" title="#HTML.2fSVG.2fX11.c2.a0 Color Keywords">SVG color keyword</a>. + <div class="note"><strong>Usage note: </strong>the {{HTMLElement("tr")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("background-color")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "tr")}} is not set to <code>char</code>, this attribute is ignored. + <div class="note"><strong>참고: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{htmlattrxref("char", "tr")}}, in CSS3, you can use the character set using the {{htmlattrxref("char", "tr")}} attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute. + <div class="note"><strong>참고: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are: + <ul> + <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="http://en.wikipedia.org/wiki/Baseline_%28typography%29" title="http://en.wikipedia.org/wiki/Baseline_(typography)">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> + <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> + <li><code>middle</code>, which will center the text in the cell;</li> + <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> + </ul> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{cssxref("vertical-align")}} property on it.</div> + </dd> +</dl> + +<h2 id="DOM_인터페이스">DOM 인터페이스</h2> + +<p>This element implements the {{domxref("HTMLTableRowElement")}} interface.</p> + +<h2 id="예제">예제</h2> + +<p>See {{HTMLElement("table")}} for examples on <code><tr></code>.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>기능</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>align/valign</code> 속성</td> + <td>1.0</td> + <td>{{CompatNo}} {{bug("915")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>char/charoff</code> 속성</td> + <td>1.0</td> + <td>{{CompatNo}} {{bug("2212")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>bgcolor</code> 속성 {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>기능</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>align/valign</code> 속성</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} {{bug("915")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>char/charoff</code> 속성</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} {{bug("2212")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>bgcolor</code> 속성 {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}};</li> + <li>CSS properties and pseudo-classes that may be specially useful to style the <code><tr></code> element: + <ul> + <li>the {{cssxref(":nth-child")}} pseudo-class to set the alignment on the cells of the column;</li> + <li>the {{cssxref("text-align")}} property to align all cells content on the same character, like '.'.<</li> + </ul> + </li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/ko/web/html/element/track/index.html b/files/ko/web/html/element/track/index.html new file mode 100644 index 0000000000..02726500ed --- /dev/null +++ b/files/ko/web/html/element/track/index.html @@ -0,0 +1,175 @@ +--- +title: '<track>: 텍스트 트랙 삽입 요소' +slug: Web/HTML/Element/track +tags: + - Accessibility + - Element + - HTML + - HTML embedded content + - HTML5 + - Multimedia + - Reference + - Web + - 자막 +translation_of: Web/HTML/Element/track +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><track></code> 요소</strong>는 미디어 요소({{HTMLElement("audio")}}, {{HTMLElement("video")}})의 자식으로서, 자막 등 시간별 텍스트 트랙(시간 기반 데이터)를 지정할 때 사용합니다.</span> 트랙은 <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a>(Web Video Text Tracks, <code>.vtt</code> 파일) 또는 <a href="https://w3c.github.io/ttml2/index.html">Timed Text Markup Language(TTML)</a>형식을 사용해야 합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>미디어 요소. 다른 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a> 자식보다 앞에 위치해야 합니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLTrackElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("default")}}</dt> + <dd>사용자 설정이 다른 자막을 가리키지 않는다면 활성화할 기본 트랙을 나타냅니다. 하나의 미디어 요소 당 하나의 <code><track></code> 요소에만 사용할 수 있습니다.</dd> + <dt>{{htmlattrdef("kind")}}</dt> + <dd>텍스트 트랙의 종류. 생략할 경우 <code>subtitles</code>로 간주합니다. 유효하지 않은 값을 가진 경우 <code>metadata</code>로 간주합니다. (Chrome 52 미만에서는 <code>subtitles</code>) 가능한 키워드는 다음과 같습니다. + <ul> + <li><code>subtitles</code> + <ul> + <li>자막은 시청자가 이해할 수 없는 언어에 대한 번역을 제공합니다. 예를 들면, 비영어권 시청자에게 영어 영상을 보여줄 때 제공할 대화문이나 텍스트 등입니다.</li> + <li>자막은 배경 설명과 같은 추가 콘텐츠를 포함할 수 있습니다. 예를 들면, 스타워즈 영화 오프닝 텍스트, 혹은 현재 장면의 날짜와 시간, 장소 등입니다.</li> + </ul> + </li> + <li><code>captions</code> + <ul> + <li>폐쇄자막은 오디오 트랜스크립션을 제공하며, 번역도 포함할 수 있습니다.</li> + <li>음악 신호, 소리 효과와 같은 비언어적 소리 효과도 나타낼 수 있습니다. 효과의 원인(음악, 글자, 등장인물...)도 설명할 수 있습니다.</li> + <li>음소거로 시청하는 경우와 청각 장애를 가진 시청자에게 적합합니다.</li> + </ul> + </li> + <li><code>descriptions</code> + <ul> + <li>비디오 콘텐츠의 텍스트 설명입니다.</li> + <li>비디오를 볼 수 없는 환경과 시각 장애를 가진 시청자에게 적합합니다.</li> + </ul> + </li> + <li><code>chapters</code> + <ul> + <li>챕터 타이틀은 미디어 리소스를 탐색할 때 사용합니다.</li> + </ul> + </li> + <li><code>metadata</code> + <ul> + <li>트랙을 스크립트가 사용합니다. 사용자에게 보이지 않습니다.</li> + </ul> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>사용자가 읽을 수 있는 형태의 텍스트 트랙 제목. 브라우저에서 사용 가능한 트랙의 이름 목록을 생성할 때 사용합니다.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>자막의 주소(<code>.vtt</code> 파일). 유효한 {{glossary("URL")}}이어야 합니다. 필수 특성이며, <code><track></code>의 부모 {{htmlelement("audio")}}/{{htmlelement("video")}} 요소에 <code><a href="/ko/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code> 특성이 없다면 문서와 같은 {{glossary("origin", "출처")}}여야 합니다.</dd> + <dt>{{htmlattrdef("srclang")}}</dt> + <dd>텍스트 트랙의 언어. 유효한 <a href="https://ko.wikipedia.org/wiki/IETF_%EC%96%B8%EC%96%B4_%ED%83%9C%EA%B7%B8">IETF 언어 태그</a>여야 합니다. <code>kind</code> 특성이 <code>subtitle</code>인 경우 필수 항목입니다.</dd> +</dl> + +<h2 id="사용_일람">사용 일람</h2> + +<h3 id="트랙_데이터_유형">트랙 데이터 유형</h3> + +<p><code><track></code> 요소가 미디어에 추가하는 데이터의 유형은 <code>kind</code> 특성으로 나타낼 수 있습니다. 사용자가 추가 데이터를 요청하는 경우, 브라우저는 <code><track></code> 요소가 가리키는 시간별 텍스트 데이터를 보여줍니다.</p> + +<p>미디어 요소는 동일한 <code>kind</code>, <code>srclang</code>, <code>label</code>을 가진 <code><track></code>을 하나보다 많이 포함할 수 없습니다.</p> + +<div class="hidden"> +<h3 id="Detecting_cue_changes">Detecting cue changes</h3> + +<p>{{page("/en-US/docs/Web/API/TextTrack/cuechange_event", "On the track element")}}</p> +</div> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><video controls poster="/images/sample.gif"> + <source src="sample.mp4" type="video/mp4"> + <source src="sample.ogv" type="video/ogv"> + <track kind="captions" src="sampleCaptions.vtt" srclang="en"> + <track kind="descriptions" + src="sampleDescriptions.vtt" srclang="en"> + <track kind="chapters" src="sampleChapters.vtt" srclang="en"> + <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de"> + <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en"> + <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja"> + <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz"> + <track kind="metadata" src="keyStage1.vtt" srclang="en" + label="Key Stage 1"> + <track kind="metadata" src="keyStage2.vtt" srclang="en" + label="Key Stage 2"> + <track kind="metadata" src="keyStage3.vtt" srclang="en" + label="Key Stage 3"> + <!-- Fallback --> + ... +</video> +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','embedded-content.html#the-track-element','track element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "semantics-embedded-content.html#the-track-element", "track element")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.track")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/HTML/WebVTT">WebVTT 텍스트 트랙 형식</a></li> + <li>{{domxref("HTMLMediaElement.textTracks")}}</li> +</ul> diff --git a/files/ko/web/html/element/u/index.html b/files/ko/web/html/element/u/index.html new file mode 100644 index 0000000000..79d516a41f --- /dev/null +++ b/files/ko/web/html/element/u/index.html @@ -0,0 +1,206 @@ +--- +title: <u> +slug: Web/HTML/Element/u +tags: + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - 'HTML:Phrasing content' + - Reference + - Web +translation_of: Web/HTML/Element/u +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><u></code> 요소</strong>는 글자로 표현하지 않는 주석을 가진 것으로 렌더링 해야 하는 텍스트를 나타냅니다.</span> 기본값에서는 단순한 밑줄로 표시하지만 CSS를 사용해 바꿀 수 있습니다.</p> + +<div class="blockIndicator warning"> +<p><code><u></code> 요소는 과거 HTML에서 밑줄(Underline) 요소로 불렸으며 지금도 밑줄을 추가할 목적으로 남용하는 경우가 있습니다. 그러나 밑줄을 위해서는 CSS {{cssxref("text-decoration")}} 속성을 <code>underline</code>으로 지정하는 방법을 대신 사용해야 합니다.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p>다른 순수 스타일 요소와 마찬가지로, 원래의 HTML 밑줄 요소(<code><u></code>)는 HTML 4부터 사용을 중단했으나, HTML 5에서 새로운 의미를 얻으며 돌아왔습니다. HTML 5에서 <code><u></code> 요소는 텍스트가 일종의 문자가 아닌 주석을 가지고 있음을 나타냅니다.</p> + +<div class="blockIndicator note"> +<p><code><u></code>와 하이퍼링크 둘 다 기본 스타일이 밑줄이므로, <code><u></code>를 기본 스타일로 사용하는건 피해야 합니다.</p> +</div> + +<h3 id="사용처">사용처</h3> + +<p><code><u></code> 요소의 유효한 사용처는 철자 오류 강조, <a href="https://en.wikipedia.org/wiki/Proper_name_mark">중국어의 고유명사 표시</a> 등이 있습니다.</p> + +<p><code><u></code>를 사용해 밑줄만 추가하거나, 책 제목 등을 강조해서는 안됩니다.</p> + +<h3 id="고려할만한_다른_요소">고려할만한 다른 요소</h3> + +<p>대부분의 경우 <code><u></code> 대신 다른 요소를 사용해야 합니다.</p> + +<ul> + <li>{{htmlelement("em")}} 요소는 강세를 나타냅니다.</li> + <li>{{htmlelement("b")}} 요소는 사용자의 주의를 텍스트로 돌립니다.</li> + <li>{{htmlelement("mark")}} 요소는 관련성을 나타냅니다.</li> + <li>{{htmlelement("strong")}} 요소는 강한 중요성을 나타냅니다.</li> + <li>{{htmlelement("cite")}} 요소는 책, 공연, 음악 등 저작물의 이름을 나타냅니다.</li> + <li>{{htmlelement("i")}} 요소는 기술 용어, 외국어, 등장인물의 생각 등을 나타냅니다.</li> +</ul> + +<p><code><u></code>가 비 텍스트 표기라면, {{htmlelement("ruby")}}는 텍스트 표기를 제공합니다.</p> + +<p>별도의 의미 없이 밑줄만 추가하려면 CSS {{cssxref("text-decoration")}} 속성의 값을 <code>underline</code>으로 지정하세요.</p> + +<h2 id="예제">예제</h2> + +<h3 id="맞춤법_오류_표시">맞춤법 오류 표시</h3> + +<p>이번 예제는 <code><u></code>와 약간의 CSS를 사용해, 문단에서 철자 오류가 존재하는 부분을 빨간색 물결 밑줄로 표시합니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>맞춤법을 틀리면 <u class="spelling">않돼요</u>.</p></pre> + +<p><code>spelling</code> 클래스를 가진 <code><u></code> 요소가 "안돼요"의 잘못된 철자를 나타내고 있음을 볼 수 있습니다.</p> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">u.spelling { + text-decoration: red wavy underline; +}</pre> + +<p>CSS는 <code>spelling</code> 클래스를 가진 <code><u></code> 요소에 빨간 물결 밑줄을 적용하고 있습니다. 빨간 물결 밑줄은 맞춤법 오류를 표시할 때 흔히 쓰이는 스타일입니다. 또 다른 스타일은 <code>red dashed underline</code>입니다.</p> + +<h4 id="결과">결과</h4> + +<p>최근 워드 프로세서를 사용해본 경우 친숙한 모습일 것입니다.</p> + +<p>{{EmbedLiveSample("맞춤법_오류_표시", 650, 80)}}</p> + +<h3 id="<u>_피하기"><code><u></code> 피하기</h3> + +<p>대부분의 경우, 사실 <code><u></code> 요소를 피하는게 좋습니다. 다음은 다른 요소를 사용해야 하는 몇 가지 경우입니다.</p> + +<h4 id="의미를_가지지_않는_밑줄">의미를 가지지 않는 밑줄</h4> + +<p>아무런 의미를 나타내지 않고 밑줄만 추가할 경우 {{HTMLElement("span")}} 요소를 사용하고, {{cssxref("text-decoration")}} 속성의 값은 <code>underline</code>으로 지정하세요.</p> + +<h5 id="HTML_2">HTML</h5> + +<pre class="brush: html"><span class="underline">Today's Special</span> +<br> +Chicken Noodle Soup With Carrots</pre> + +<h5 id="CSS_2">CSS</h5> + +<pre class="brush: css">.underline { + text-decoration: underline; +}</pre> + +<h5 id="Result">Result</h5> + +<p>{{EmbedLiveSample("의미를_가지지_않는_밑줄", 650, 80)}}</p> + +<h4 id="책_제목_표현하기">책 제목 표현하기</h4> + +<div id="example-unstyled-cite"> +<p>책 제목은 <code><u></code> 대신 {{htmlelement("cite")}}를 사용해 나타내야 합니다.</p> + +<h5 id="HTML_3">HTML</h5> + +<pre class="brush: html"><p>The class read <cite>Moby Dick</cite> in the first term.</p></pre> + +<h5 id="기본_스타일_결과">기본 스타일 결과</h5> + +<p>{{EmbedLiveSample("example-unstyled-cite", 650, 80)}}</p> +</div> + +<p><code><cite></code> 요소의 기본 스타일은 기울임꼴을 적용합니다. 원한다면 CSS를 사용해 재정의할 수 있습니다.</p> + +<pre class="brush: css">cite { + font-style: normal; + text-decoration: underline; +}</pre> + +<h5 id="사용자_지정_스타일_결과">사용자 지정 스타일 결과</h5> + +<p>{{EmbedLiveSample("Presenting_a_book_title", 650, 80)}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-u-element', '<u>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-u-element', '<u>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.u")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>보통 {{HTMLElement("span")}}, {{HTMLElement("i")}}, {{HTMLElement("em")}}, {{HTMLElement("b")}}, {{HTMLElement("cite")}} 요소를 사용하는 편이 더 적합합니다.</li> + <li>특별한 의미를 가지지 않는 밑줄은 CSS {{cssxref("text-decoration")}} 속성을 사용해야 합니다.</li> +</ul> diff --git a/files/ko/web/html/element/ul/index.html b/files/ko/web/html/element/ul/index.html new file mode 100644 index 0000000000..b3a33aa627 --- /dev/null +++ b/files/ko/web/html/element/ul/index.html @@ -0,0 +1,188 @@ +--- +title: <ul> +slug: Web/HTML/Element/ul +tags: + - Element + - HTML + - HTML grouping content + - Reference + - Web +translation_of: Web/HTML/Element/ul +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><ul></code> 요소</strong>는 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ul.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>. 또한, 최소 하나의 {{htmlelement("li")}} 요소를 자식으로 둔다면 <a href="/ko/docs/Web/Guide/HTML/Content_categories#뚜렷한_컨텐츠">뚜렷한 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>0개 이상의 {{htmlelement("li")}}, {{htmlelement("script")}}, {{htmlelement("template")}} 요소.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLUListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<div class="hidden"> +<dl> + <dt>{{ htmlattrdef("compact") }} {{Deprecated_inline}}</dt> + <dd>This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the {{glossary("user agent")}}, and it doesn't work in all browsers.</dd> + <dd> + <div class="warning"><strong>Warning:</strong> Do not use this attribute, as it has been deprecated: use <a href="/en-US/docs/CSS">CSS</a> instead. To give a similar effect as the <code>compact</code> attribute, the CSS property {{cssxref("line-height")}} can be used with a value of <code>80%</code>.</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("type") }} {{Deprecated_inline}}</dt> + <dd>This attribute sets the bullet style for the list. The values defined under <a href="/en-US/docs/HTML3.2">HTML3.2</a> and the transitional version of <a href="/en-US/docs/HTML4.01">HTML 4.0/4.01</a> are: + <ul> + <li><code>circle</code></li> + <li><code>disc</code></li> + <li><code>square</code></li> + </ul> + + <p>A fourth bullet type has been defined in the WebTV interface, but not all browsers support it: <code>triangle</code>.</p> + + <p>If not present and if no <a href="/en-US/docs/CSS">CSS</a> {{ cssxref("list-style-type") }} property applies to the element, the user agent selects a bullet type depending on the nesting level of the list.</p> + + <div class="warning"><strong>Warning:</strong> Do not use this attribute, as it has been deprecated; use the <a href="/en-US/docs/Web/CSS">CSS</a> {{ cssxref("list-style-type") }} property instead.</div> + </dd> +</dl> +</div> + +<h2 id="사용_일람">사용 일람</h2> + +<p>보통 비정렬 목록의 항목은 선행하는 불릿 <a href="/ko/docs/Web/CSS/::marker">마커</a>와 함께 표시합니다.</p> + +<p><code><ul></code>과 {{htmlelement("ol")}}은 필요한 만큼 중첩할 수 있고, 서로 교차할 수도 있습니다.</p> + +<p><code><ul></code>과 {{htmlelement("ol")}}은 모두 목록을 나타냅니다. 차이가 있다면 <code><ul></code>에서는 순서가 중요하지 않다는 점입니다. 항목의 순서를 바꿨을 때 의미도 바뀐다면 {{htmlelement("ol")}}을 사용하세요. 그렇지 않으면 <code><ul></code>을 사용할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_예제">간단한 예제</h3> + +<pre class="brush: html"><ul> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ul> +</pre> + +<p>{{EmbedLiveSample("간단한_예제", 400, 100)}}</p> + +<h3 id="중첩_목록">중첩 목록</h3> + +<pre class="brush: html"><ul> + <li>first item</li> + <li>second item + <!-- Look, the closing </li> tag is not placed here! --> + <ul> + <li>second item first subitem</li> + <li>second item second subitem + <!-- Same for the second nested unordered list! --> + <ul> + <li>second item second subitem first sub-subitem</li> + <li>second item second subitem second sub-subitem</li> + <li>second item second subitem third sub-subitem</li> + </ul> + </li> <!-- Closing </li> tag for the li that + contains the third unordered list --> + <li>second item third subitem</li> + </ul> + <!-- Here is the closing </li> tag --> + </li> + <li>third item</li> +</ul></pre> + +<p>{{EmbedLiveSample("중첩_목록", 400, 220)}}</p> + +<h3 id="비정렬_목록_안의_정렬_목록">비정렬 목록 안의 정렬 목록</h3> + +<pre class="brush: html"><ul> + <li>first item</li> + <li>second item + <!-- Look, the closing </li> tag is not placed here! --> + <ol> + <li>second item first subitem</li> + <li>second item second subitem</li> + <li>second item third subitem</li> + </ol> + <!-- Here is the closing </li> tag --> + </li> + <li>third item</li> +</ul> +</pre> + +<p>{{EmbedLiveSample("비정렬_목록_안의_정렬_목록", 400, 150)}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ul-element', '<ul>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-ul-element', '<ul>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.ul")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>리스트 관련 다른 요소: {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}</li> + <li><code><ol></code> 요소와 유용하게 사용할 수 있는 CSS 속성 + <ul> + <li>서수를 표현할 방식을 지정하는 {{cssxref("list-style")}} 속성.</li> + <li>복잡한 중첩 목록을 처리하기 위한 <a href="/ko/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS 카운터</a></li> + <li>더 이상 사용하지 않는 <code>compact</code> 특성을 대체할 수 있는 {{cssxref("line-height")}}</li> + <li>항목의 들여쓰기를 조정하기 위한 {{cssxref("margin")}} 속성.</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/html/element/var/index.html b/files/ko/web/html/element/var/index.html new file mode 100644 index 0000000000..8b55934a46 --- /dev/null +++ b/files/ko/web/html/element/var/index.html @@ -0,0 +1,116 @@ +--- +title: '<var>: 변수 요소' +slug: Web/HTML/Element/var +tags: + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - 'HTML:Phrasing content' + - Reference + - Web +translation_of: Web/HTML/Element/var +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTM <code><var></code> 요소</strong>는 수학 표현 또는 프로그래밍에서 변수의 이름을 나타냅니다.</span> 보통 현재 글씨체의 기울임꼴로 표시하지만, 브라우저마다 다를 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/var.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<h3 id="관련_요소">관련 요소</h3> + +<p><code><var></code>와 함께 자주 사용하는 요소는 다음과 같습니다.</p> + +<ul> + <li>{{htmlelement("code")}}: HTML 코드 요소</li> + <li>{{htmlelement("kbd")}}: HTML 키보드 입력 요소</li> + <li>{{htmlelement("smap")}}: HTML 출력 예시 요소</li> +</ul> + +<p><code><var></code>의 의미에 맞춰 사용하지 않고, 기울임꼴을 적용하기 위해 잘못 사용한 경우, 적절한 CSS와 {{htmlelement("span")}}를 사용해야 합니다. 혹은, 의미에 맞는 요소를 다음 목록에서 골라 사용하세요.</p> + +<ul> + <li>{{htmlelement("em")}}</li> + <li>{{htmlelement("i")}}</li> + <li>{{htmlelement("q")}}</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="기본_예제">기본 예제</h3> + +<p><code><var></code>를 사용해 수학 등식의 변수명을 나타내는 간단한 예제입니다.</p> + +<pre><p>간단한 등식: + <var>x</var> = <var>y</var> + 2</p> +</pre> + +<p>{{EmbedLiveSample("Basic_example", 650,80)}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-var-element', '<var>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-var-element', '<var>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.var")}}</p> diff --git a/files/ko/web/html/element/video/index.html b/files/ko/web/html/element/video/index.html new file mode 100644 index 0000000000..9007343baa --- /dev/null +++ b/files/ko/web/html/element/video/index.html @@ -0,0 +1,145 @@ +--- +title: '<video>: 비디오 삽입 요소' +slug: Web/HTML/Element/Video +tags: + - Element + - HTML + - HTML embedded content + - Media + - Multimedia + - Reference + - Web + - 동영상 + - 비디오 +translation_of: Web/HTML/Element/video +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><video></code> 요소</strong>는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다.</span> 오디오 콘텐츠에도 사용할 수 있으나, {{htmlelement("audio")}} 요소가 사용자 경험에 좀 더 적합합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/video.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>위 예제는 <code><video></code> 요소의 간단한 사용법을 보입니다. <code><video></code> 또한 {{htmlelement("img")}} 요소와 비슷하게, 표시하고자 하는 미디어로의 경로를 <code>src</code> 특성에 제공합니다. 또한 비디오의 너비와 높이, 자동재생과 반복 여부, 브라우저 기본 컨트롤 노출 여부 등 다른 정보도 특성을 통해 지정할 수 있습니다.</p> + +<p><code><video></video></code> 태그 안의 콘텐츠는 브라우저가 <code><video></code> 요소를 지원하지 않을 때 보여집니다.</p> + +<h2 id="Attributes" name="Attributes">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("autoplay")}}</dt> + <dd>부울(boolean) 속성. 이 값이 설정되면, 데이터 로딩이 완료되지 않더라도 재생 가능한 시점에 자동으로 재생이 시작됩니다.</dd> + <dt>{{htmlattrdef("buffered")}}</dt> + <dd>미디어의 어느 시간대가 버퍼에 들어 있는지 확인할 수 있는 속성입니다. 이 속성은 {{domxref("TimeRanges")}} 객체를 포함합니다.</dd> + <dt>{{htmlattrdef("controls")}}</dt> + <dd>이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다.</dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>This enumerated attribute indicates if the fetching of the related image must be done using CORS or not. <a href="/en-US/docs/CORS_Enabled_Image" title="CORS_Enabled_Image">CORS-enabled resources</a> can be reused in the {{HTMLElement("canvas")}} element without being <em>tainted</em>. The allowed values are: + <dl> + <dt>anonymous</dt> + <dd>A cross-origin request (i.e. with <code>Origin:</code> HTTP header) is performed. But no credential is sent (i.e. no cookie, no X.509 certificate and no HTTP Basic authentication is sent). If the server does not give credentials to the origin site (by not setting the <code>Access-Control-Allow-Origin:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted..</dd> + <dt>use-credentials</dt> + <dd>A cross-origin request (i.e. with <code>Origin:</code> HTTP header) is performed with credential is sent (i.e. a cookie, a certificate and HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through <code>Access-Control-Allow-Credentials:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted.</dd> + </dl> + When not present, the resource is fetched without a CORS request (i.e. without sending the <code>Origin:</code> HTTP header), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword <strong>anonymous</strong> was used. See <a href="/en-US/docs/HTML/CORS_settings_attributes" title="CORS settings attributes">CORS settings attributes</a> for additional information.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>비디오의 출력 영역 높이이며, CSS 픽셀 단위 입니다.</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>부울(boolean) 속성, 이 값이 설정되면, 동영상 재생이 마친 후(동영상의 마지막에 도달하면) 자동으로 처음으로 돌아갑니다.</dd> + <dt>{{htmlattrdef("muted")}}</dt> + <dd>비디오에 포함되어 있는 오디오의 기본 설정을 나타내는 부울 속성입니다. 설정하면 오디오가 나오지 않습니다. 기본 값은 false이며 이는 비디오가 재생되면 오디오도 같이 재생됨을 의미합니다.</dd> + <dt>{{htmlattrdef("played")}}</dt> + <dd>재생된 동영상 영역을 나타내는 {{domxref("TimeRanges")}} 객체 입니다.</dd> + <dt>{{htmlattrdef("preload")}}</dt> + <dd>이 속성은 저작자가 생각하는 가장 좋은 사용자 경험이 어떠한 것인지 브라우저에 미리 정보를 알려주는 용도록 사용됩니다. 다음 값들 중 하나를 가질 수 있습니다: + <ul> + <li><span style="font-family: courier new;">none: </span>저작자가 생각하기에 사용자가 비디오를 보지 않거나 서버가 최소한의 트래픽을 유지하고자 함을 의미합니다. 다시 말해서 비디오가 캐시되지 않아야 함을 의미합니다.</li> + <li><span style="font-family: courier new;">metadata</span>: 저작자가 생각하기에 사용자가 비디오를 보지 않을 수도 있지만 메타데이터(예를 들어서 길이)를 미리 가져오는 것은 합리적임을 의미합니다.</li> + <li><span style="font-family: courier new;">auto</span>: 사용자가 우선순위를 가지고 있음을 의미합니다. 다시 말해서 사용자가 이를 사용하지 않을 지라도 필요하다면 전체 비디오가 다운로드 될 수 있음을 의미합니다.</li> + <li><em>빈 문자열</em>: <span style="font-family: courier new;">auto </span>와 동일합니다.</li> + </ul> + + <p>스펙에서는 기본값으로 <span style="font-family: courier new;">metadata</span>를 권장하지만 설정하지 않았다면 각 브라우저가 정한 기본값을 설정하게 됩니다.</p> + + <div class="note"><strong>사용 정보:</strong> + + <ul> + <li>비디오를 자동으로 재생하려 한다면 브라우저가 이를 다운로드 해야 하기 때문에 <code>autoplay</code>이 이 속성보다 우선시 됩니다. <code>autoplay</code> 속성과 <code>preload</code> 속성을 둘 다 설정하는 것은 스펙상 가능합니다.</li> + <li>브라우저가 이 속성을 반드시 스팩대로 따라야 하는 것은 아닙니다. 단지 힌트일 뿐입니다.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("poster")}}</dt> + <dd>사용자가 동영상을 재생하거나 탐색하기 전까지 출력되는 포스터 프레임 주소입니다. 이 속성이 명시되지 않으면, 첫 번째 프레임이 사용 가능하게 될때까지 아무것도 출력되지 않다가, 가능하게 되면 첫 번째 프레임을 포스터 프레임으로 출력합니다.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>삽입(embed)할 동영상의 주소(url)입니다. 이 속성은 선택 사항으로, 비디오 블록 내의 {{HTMLElement("source")}} 요소를 사용하여 삽입할 동영상을 명시할 수도 있습니다.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>비디오의 출력 영역 너비이며, CSS 픽셀 단위입니다.</dd> +</dl> + +<h2 id="Examples" name="Examples">이벤트</h2> + +<p><code><video></code> 요소는 많은 <a href="/en-US/docs/Web/Guide/Events/Media_events">이벤트</a>를 발생시킬 수 있습니다.</p> + +<h2 id="Examples" name="Examples">예제</h2> + +<pre class="brush: html language-html"><code class="language-html"><span class="comment token"><!-- Simple video example --></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>video</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>videofile.ogg<span class="punctuation token">"</span></span> <span class="attr-name token">autoplay</span> <span class="attr-name token">poster</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>posterimage.jpg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + Sorry, your browser doesn't support embedded videos, + but don't worry, you can <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>videofile.ogg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>download it<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span> + and watch it with your favorite video player! +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>video</span><span class="punctuation token">></span></span> + +<span class="comment token"><!-- Video with subtitles --></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>video</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>foo.ogg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>track</span> <span class="attr-name token">kind</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>subtitles<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>foo.en.vtt<span class="punctuation token">"</span></span> <span class="attr-name token">srclang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span> <span class="attr-name token">label</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>English<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>track</span> <span class="attr-name token">kind</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>subtitles<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>foo.sv.vtt<span class="punctuation token">"</span></span> <span class="attr-name token">srclang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sv<span class="punctuation token">"</span></span> <span class="attr-name token">label</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Svenska<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>video</span><span class="punctuation token">></span></span></code></pre> + +<p>첫번째 예제는 동영상을 더 다운받기 위해서 멈추지 않아도 될 정도로 영상이 다운로드 되면 바로 영상이 재생됩니다. 동영상이 재생되기 전까지 "posterimage.jpg" 이미지가 표현됩니다.</p> + +<p>두번째 예제에서는 사용자가 서로다른 자막을 선택할 수 있습니다.</p> + +<h2 id="Server_support" name="Server_support">서버 지원</h2> + +<p>동영상 MIME 타입이 올바르게 설정되어 있지 않다면 동영상이 보이지 않거나 X표시가 된 회색 박스가 나오게 됩니다(JavaScript가 활성화 된 경우).</p> + +<p>Ogg Theora 동영상을 사용할 경우 아파치 웹 서버에 동영상에서 사용하는 확장자(보통 ".ogm", ".ogv", ".ogg"를 사용합니다)를 "/etc/apache"에 있는 "mime.types" 파일에 "video/ogg" MIME 타입을 추가하거나 httpd.conf에 "AddType" 디렉티브를 이용해서 추가하면 해결됩니다.</p> + +<pre>AddType video/ogg .ogm +AddType video/ogg .ogv +AddType video/ogg .ogg +</pre> + +<p>WebM 동영상을 사용할 경우 아파치 웹 서버에 동영상에서 사용하는 확장자(보통 ".webm"을 사용합니다)를 "/etc/apache"에 있는 "mime.types" 파일에 "video/webm" MIME 타입을 추가하거나 httpd.conf에 "AddType" 디렉티브를 이용해서 추가하면 해결됩니다.</p> + +<pre>AddType video/webm .webm +</pre> + +<p>여러분의 웹 호스트에서 새로운 기술이 범용적으로 적용되어 업데이트 되기 전까지 편하게 MIME 타입을 설정하는 인터페이스를 제공할지도 모릅니다.</p> + +<h2 id="DOM_interface" name="DOM_interface">DOM 인터페이스</h2> + +<p>이 요소는 <code><a href="/en-US/docs/Web/API/HTMLVideoElement" title="DOM/HTMLVideoElementInterface">HTMLVideoElement</a></code> 인터페이스를 구현하고 있습니다.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.video")}}</p> + +<h2 id="See_also" name="See_also">참고</h2> + +<ul> + <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a></li> + <li>{{htmlelement("audio")}}</li> + <li><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using audio and video in Firefox">Using HTML5 audio and video</a></li> + <li><a href="/en-US/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">Manipulating video using canvas</a></li> + <li><a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li> + <li><a class="external" href="http://tinyvid.tv/" title="http://tinyvid.tv/">TinyVid</a> - examples using ogg files in HTML5.</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#video" title="http://www.whatwg.org/specs/web-apps/current-work/#video">The <code>video</code> element</a> (HTML5 specification)</li> + <li><a href="/en-US/docs/Configuring_servers_for_Ogg_media" title="Configuring servers for Ogg media">Configuring servers for Ogg media</a></li> +</ul> diff --git a/files/ko/web/html/element/wbr/index.html b/files/ko/web/html/element/wbr/index.html new file mode 100644 index 0000000000..4168ea677d --- /dev/null +++ b/files/ko/web/html/element/wbr/index.html @@ -0,0 +1,111 @@ +--- +title: <wbr> +slug: Web/HTML/Element/wbr +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/wbr +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><wbr></code> 요소</strong>는 현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/wbr.html", "tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="참고">참고</h2> + +<p>UTF-8 인코딩을 사용한 페이지의 <code><wbr></code>은 <code>U+200B</code><code> ZERO-WIDTH SPACE</code> 코드 포인트처럼 동작합니다. 특히, {{glossary("Unicode")}} bidi BN 코드 포인트처럼 행동하므로 {{glossary("bidi")}} 정렬의 영향을 받지 않습니다. 즉 <code><div dir=rtl>123,<wbr>456</div></code>의 줄이 바뀌지 않은 경우, <code>456,123</code>이 아니라 <code>123,456</code>으로 나타납니다.</p> + +<p>같은 이유로 인해 <code><wbr></code> 요소로 인한 줄바꿈으로는 붙임표가 나타나지 않습니다. 줄의 끝에 하이픈이 필요한 경우 소프트 하이픈 문자 개체(soft hyphen character entity, <code>&shy;</code>)를 사용하세요.</p> + +<p><code><wbr></code>은 Internet Explorer 5.5에서 처음 구현됐고, HTML5가 정식으로 정의했습니다.</p> + +<h2 id="예제">예제</h2> + +<p>URL의 줄을 바꿀 때, 문장 부호 다음에 잘린 경우 독자가 URL이 끝난 것으로 혼동할 수 있으므로, <em><a class="external" href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/">The Yahoo Style Guide</a></em>는 <a href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/editing/treat-abbreviations-capitalization-and-titles-consistently/website-names-and-addresses">URL의 줄바꿈을 문장 부호 이전에 하라</a>고 추천합니다.</p> + +<pre class="brush: html notranslate"><p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p> +</pre> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-wbr-element', '<wbr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-wbr-element', '<wbr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.wbr")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("overflow-wrap")}}</li> + <li>{{cssxref("word-break")}}</li> + <li>{{cssxref("hyphens")}}</li> + <li>{{htmlelement("br")}} 요소</li> +</ul> diff --git a/files/ko/web/html/global_attributes/accesskey/index.html b/files/ko/web/html/global_attributes/accesskey/index.html new file mode 100644 index 0000000000..82cd6c49c3 --- /dev/null +++ b/files/ko/web/html/global_attributes/accesskey/index.html @@ -0,0 +1,139 @@ +--- +title: accesskey +slug: Web/HTML/Global_attributes/accesskey +tags: + - Global attributes + - HTML + - Reference + - 단축키 +translation_of: Web/HTML/Global_attributes/accesskey +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><code><strong>accesskey</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 현재 요소에 대한 키보드 단축키를 생성할 때 사용할 힌트를 제공합니다.</span> <code>accesskey</code> 속성의 값은 반드시 출력 가능한 단일 문자(키보드로 입력할 수 있는 글자)여야 합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<div class="note"> +<p><strong>참고</strong>: WHATWG 명세는 <code>accesskey</code>의 값에 공백으로 구분한 여러 개의 문자를 사용할 수 있고, 브라우저는 그 중 지원하는 첫 번째 문자를 사용한다고 되어 있습니다. 하지만 대부분의 브라우저는 이렇게 동작하지 않습니다. 단, 다른 명령과 충돌하지 않는 경우, IE/Edge에서는 지원되는 첫 번째 문자를 문제 없이 사용합니다.</p> +</div> + +<p>단축키를 활성화하는 방법은 브라우저와 플랫폼에 따라 다를 수 있습니다.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th></th> + <th>Windows</th> + <th>Linux</th> + <th>Mac</th> + </tr> + <tr> + <th>Firefox</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + <td>Firefox 57 이상에서는 <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd> 또는 <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + Firefox 14 이상에서는 <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + Firefox 13 이하에서는 <kbd>Control</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Internet Explorer</th> + <td rowspan="3" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + <td colspan="2" rowspan="1" style="text-align: center;">없음</td> + </tr> + <tr> + <th>Edge</th> + <td style="text-align: center;">없음</td> + <td rowspan="3" style="text-align: center;"><kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd><br> + <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Google Chrome</th> + <td style="text-align: center;"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Safari</th> + <td colspan="2" style="text-align: center;">없음</td> + </tr> + <tr> + <th>Opera 15+</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Opera 12</th> + <td colspan="3" rowspan="1"><kbd>Shift</kbd> + <kbd>Esc</kbd>를 통해 접근 가능한 단축키 목록을 열고, 그 중에서 <kbd>key</kbd>를 눌러 선택합니다.</td> + </tr> + </tbody> +</table> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p><code>accesskey</code> 특성은 빈약한 브라우저 지원을 포함해, 사용하기 전 고려해야 할 수많은 사항이 있습니다.</p> + +<ul> + <li><code>accesskey</code> 값은 시스템이나 브라우저 키보드 단축키 또는 보조 기술 기능과 충돌할 수 있습니다. 운영 체제, 보조 기술, 브라우저의 어떤 조합에서 동작하는 키가 다른 조합에서는 동작하지 않을 수 있습니다.</li> + <li>특정 <code>accesskey</code> 값은 특정 키보드에 존재하지 않을 수 있으며, 국제화가 중요한 경우 많은 키보드 종류로 인해 문제가 될 가능성이 커집니다. 따라서 특정 언어에 맞추는 것은 미래의 문제를 유발할 수 있습니다.</li> + <li>숫자에 의존하는 <code>accesskey</code> 값은, 해당 숫자와 그 동작에 연관성이 없는 경우 인지력 문제를 겪고 있는 사용자에게 혼란스러울 수 있습니다.</li> + <li>사용자에게 <code>accesskey</code>가 존재한다고 알리세요. 시스템에 해당 기능을 알리는 기능이 없다면, 사용자가 실수로 <code>accesskey</code>를 사용할수도 있습니다.</li> +</ul> + +<p>이러한 문제로 인해, 일반적인 목적을 갖는 웹 사이트와 웹 앱에서는 <code>accesskey</code>를 사용하지 않는 것을 권장합니다.</p> + +<ul> + <li><a href="https://webaim.org/techniques/keyboard/accesskey#spec">WebAIM: Keyboard Accessibility - Accesskey</a></li> +</ul> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + <tr> + <td>{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>실제로 구현된 것에 대한 더 현실적인 동작 설명.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>최신 W3C {{SpecName('HTML5.1')}} 스펙으로부터 변경 사항 없음.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML5 W3C')}} 로부터 변경 사항 없음.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML4.01')}} 로부터, 일부 문자들은 <code>accesskey</code> 로 설정될 수 있음. 또한, 모든 엘리먼트에서 설정될 수 있음.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }}, {{ HTMLElement("textarea") }} 에서만 지원됨.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.accesskey")}}</p> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li>{{domxref("Element.accessKey")}}</li> + <li>{{domxref("HTMLElement.accessKeyLabel")}}</li> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts">aria-keyshortcuts</a></code></li> +</ul> diff --git a/files/ko/web/html/global_attributes/autocapitalize/index.html b/files/ko/web/html/global_attributes/autocapitalize/index.html new file mode 100644 index 0000000000..b0a42ef76a --- /dev/null +++ b/files/ko/web/html/global_attributes/autocapitalize/index.html @@ -0,0 +1,47 @@ +--- +title: autocapitalize +slug: Web/HTML/Global_attributes/autocapitalize +tags: + - Global attributes + - HTML + - Reference + - 자동 대문자화 +translation_of: Web/HTML/Global_attributes/autocapitalize +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p><span class="seoSummary"><code><strong>autocapitalize</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 사용자가 입력하거나 수정하는 텍스트를 자동으로 대문자로 바꾸는 방식을 제거하는 열거형 특성입니다.</span> 가능한 값은 다음과 같습니다.</p> + +<ul> + <li><code>off</code> 또는 <code>none</code>: 대문자로 변환하지 않음 (모든 문자의 기본값 소문자)</li> + <li><code>on</code> 또는 <code>sentences</code>: 각 문장의 첫 번째 문자는 기본값 대문자, 다른 모든 문자는 기본값 소문자</li> + <li><code>words</code>: 각 단어의 첫 번째 문자는 기본값 대문자, 다른 모든 문자는 기본값 소문자.</li> + <li><code>characters</code>: 모든 문자의 기본값 대문자</li> +</ul> + +<p><code>autocapitalize</code> 특성은 물리적인 키보드에서 입력하는 경우 아무런 영향도 주지 않으며, 대신 음성 입력이나 모바일 장치의 가상 키보드 등, 문장 첫 글자를 자동으로 대문자로 변환해서 사용자를 돕곤 하는 방식에 영향을 줍니다. <code>autocapitalize</code> 특성을 사용하면 이런 동작을 HTML 작성자가 재정의할 수 있습니다.</p> + +<p><code>autocapitalize</code> 특성을 {{htmlattrxref("type", "input")}} 특성의 값이 <code>url</code>, <code>email</code>, <code>password</code>인 {{HTMLElement("input")}} 요소에 적용해도 자동 대문자 변환은 되지 않습니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.autocapitalize")}}</p> diff --git a/files/ko/web/html/global_attributes/contenteditable/index.html b/files/ko/web/html/global_attributes/contenteditable/index.html new file mode 100644 index 0000000000..8c8d2fabb6 --- /dev/null +++ b/files/ko/web/html/global_attributes/contenteditable/index.html @@ -0,0 +1,76 @@ +--- +title: contenteditable +slug: Web/HTML/Global_attributes/contenteditable +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/contenteditable +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><code><strong>contenteditable</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 사용자가 요소를 편집할 수 있는지 나타내는 열거형 특성입니다.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.html","tabbed-shorter")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>가능한 값은 다음과 같습니다.</p> + +<ul> + <li><code>true</code> 또는 빈 문자열은 요소가 편집 가능함을 나타냅니다.</li> + <li><code>false</code>는 요소가 편집 불가능함을 나타냅니다.</li> +</ul> + +<p>값 없이, <code><label contenteditable>예제</label></code>처럼 사용할 경우 빈 문자열 값으로 간주합니다.</p> + +<p>특성이 없거나, 갑이 유효하지 않은 경우 부모 요소로부터 상속합니다. 즉, 부모 요소를 편집 가능한 경우 자신도 편집 가능합니다.</p> + +<p>가능한 값에 <code>true</code>와 <code>false</code>가 있긴 하지만, <code>contenteditable</code> 특성은 불리언 특성이 아닌 열거형 특성입니다.</p> + +<p>텍스트 삽입 시 표시되는 커서의 색은 CSS {{cssxref("caret-color")}} 특성으로 바꿀 수 있습니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}, no change from {{SpecName("HTML5.1")}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.contenteditable")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li>{{domxref("HTMLElement.contentEditable")}}, {{domxref("HTMLElement.isContentEditable")}}</li> +</ul> diff --git a/files/ko/web/html/global_attributes/contextmenu/index.html b/files/ko/web/html/global_attributes/contextmenu/index.html new file mode 100644 index 0000000000..819295f11b --- /dev/null +++ b/files/ko/web/html/global_attributes/contextmenu/index.html @@ -0,0 +1,121 @@ +--- +title: contextmenu +slug: Web/HTML/Global_attributes/contextmenu +tags: + - Deprecated + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/contextmenu +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div class="warning"> +<p><a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu">contextmenu 특성은 폐기되었으며</a>, 모든 브라우저에서 제거될 것입니다.</p> +</div> + +<p><code><strong>contextmenu</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 이 요소의 컨텍스트 메뉴로 사용될 {{HTMLElement("menu")}}의 <code><a href="/ko/docs/Web/HTML/Global_attributes/id">id</a></code>입니다.</p> + +<p>컨텍스트 메뉴는 마우스의 우클릭(right-click)과 같은 사용자 상호작용 중에 나타나는 메뉴를 말합니다. HTML5에서는 이 메뉴를 커스터마이징할 수 있습니다. 다음은 계층 메뉴(nested menu)를 포함한 구현 예제입니다.</p> + +<h2 id="Example">Example</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html; highlight:[1,10,15] notranslate"><body contextmenu="share"> + <menu type="context" id="share"> + <menu label="share"> + <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem> + <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem> + </menu> + </menu> + <ol> + <li> + Anywhere in the example you can share the page on Twitter and + Facebook using the Share menu from your context menu. + </li> + <li contextmenu="changeFont" id="fontSizing"> + On this specific list element, you can change the size of the text + by using the "Increase/Decrease font" actions from your context menu + </li> + <menu type="context" id="changeFont"> + <menuitem label="Increase Font" onclick="incFont()"></menuitem> + <menuitem label="Decrease Font" onclick="decFont()"></menuitem> + </menu> + <li contextmenu="ChangeImage" id="changeImage"> + On the image below, you can fire the "Change Image" action + in your Context Menu.<br /> + <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" + contextmenu="ChangeImage" id="promoButton" /> + <menu type="context" id="ChangeImage"> + <menuitem label="Change Image" onclick="changeImage()"></menuitem> + </menu> + </li> + </ol> +</body> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush:js notranslate">function shareViaTwitter() { + window.open("https://twitter.com/intent/tweet?text=" + + "Hurray! I am learning ContextMenu from MDN via Mozilla"); +} + +function shareViaFacebook() { + window.open("https://facebook.com/sharer/sharer.php?u=" + + "https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus"); +} + +function incFont() { + document.getElementById("fontSizing").style.fontSize = "larger"; +} + +function decFont() { + document.getElementById("fontSizing").style.fontSize = "smaller"; +} + +function changeImage() { + var index = Math.ceil(Math.random() * 39 + 1); + document.images[0].src = + "https://developer.mozilla.org/media/img/promote/promobutton_mdn" + + index + ".png"; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example", "100%", 400)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "interactive-elements.html#context-menus", "contextmenu")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}, initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.global_attributes.contextmenu")}}</p> + +<p>[1] An experimental implementation was originally available via the command line option <code>--enable-blink-features=ContextMenu</code>. Until Chrome 52 and Opera 39 it was additionally available by enabling the <em>Experimental Web Platform features</em> option, but got removed from that due to a <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=412945">Web compatibility issue</a>. In June 2017, it was removed entirely from the browsers. This is documented in <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=87553">Chrome bug 87553</a>.</p> + +<p>[2] Support for the <code>contextmenu</code> attribute has been removed from Firefox Mobile ({{bug(1424252)}}).</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a></li> + <li>{{domxref("HTMLElement.contextMenu")}}</li> +</ul> diff --git a/files/ko/web/html/global_attributes/data-_star_/index.html b/files/ko/web/html/global_attributes/data-_star_/index.html new file mode 100644 index 0000000000..4aed70b1e4 --- /dev/null +++ b/files/ko/web/html/global_attributes/data-_star_/index.html @@ -0,0 +1,79 @@ +--- +title: data-* +slug: Web/HTML/Global_attributes/data-* +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/data-* +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>data-*</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 <strong>사용자 지정 데이터 특성</strong>(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 <a href="/ko/docs/Web/HTML" title="en/HTML">HTML</a>과 <a href="/ko/docs/Web/API/Document_Object_Model" title="en/DOM">DOM</a> 사이에서 교환할 수 있는 방법입니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<p>모든 사용자 지정 데이터는 해당 데이터를 지정한 요소의 {{domxref("HTMLElement")}} 인터페이스, {{domxref("HTMLElement.dataset", "dataset")}} 속성을 통해 사용할 수 있습니다. <code>data-*</code>의 <code>*</code>은 <a href="https://www.w3.org/TR/REC-xml/#NT-Name">XML 이름 생성 규칙</a>을 따르는 모든 이름으로 대체할 수 있습니다.</p> + +<ul> + <li>대소문자 여부에 상관없이 <code>xml</code>로 시작하면 안 됩니다.</li> + <li>세미콜론(<code>U+003A</code>)을 포함해서는 안 됩니다.</li> + <li>대문자를 포함해서는 안 됩니다.</li> +</ul> + +<p>{{domxref("HTMLElement.dataset")}}은 {{domxref("DOMStringMap")}}이라는 점을 참고하세요. 사용할 땐, 예를 들어 <code>data-test-value</code>라는 이름의 특성을 지정했다면, 모든 대시(<code>U+002D</code>)는 다음 문자를 대문자로 만들고 자신은 사라지므로 <code>HTMLElement.dataset.testValue</code>로 접근할 수 있습니다.</p> + +<h3 id="용도">용도</h3> + +<p><code>data-*</code><strong> </strong>속성을 추가함으로써, 평범한 HTML 요소조차 복잡하고 강력한 프로그램 객체가 될 수 있습니다. 예컨대, 게임의 우주선 스프라이트는 단순한 {{htmlelement("img")}} 태그와 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class"><code>class</code></a> 특성, 그리고 여러 <code>data-*</code> 특성으로 나타낼 수 있습니다.</p> + +<pre class="brush: html"><img class="spaceship cruiserX3" src="shipX3.png" + data-ship-id="324" data-weapons="laserI laserII" data-shields="72%" + data-x="414354" data-y="85160" data-z="31940" + onclick="spaceships[this.dataset.shipId].blasted()"> +</pre> + +<p>HTML 데이터 특성 사용법에 관한 보다 자세한 자습서는 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">데이터 특성 사용하기</a>를 확인하세요.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#element-attrdef-global-data", "data-*")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#element-attrdef-global-data", "data-*")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.global_attributes.data_attributes")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li>데이터 특성 값에 접근하고 수정할 수 있는 {{domxref("HTMLElement.dataset")}} 속성.</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">데이터 특성 사용하기</a></li> +</ul> diff --git a/files/ko/web/html/global_attributes/dir/index.html b/files/ko/web/html/global_attributes/dir/index.html new file mode 100644 index 0000000000..ae64e173b2 --- /dev/null +++ b/files/ko/web/html/global_attributes/dir/index.html @@ -0,0 +1,89 @@ +--- +title: dir +slug: Web/HTML/Global_attributes/dir +tags: + - BiDi + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/dir +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>dir</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소의 쓰기 방향을 나타내는 열거형 특성입니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-dir.html","tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>가능한 값은 다음과 같습니다.</p> + +<ul> + <li><code>ltr</code>은 왼쪽에서 오른쪽을 뜻하며, 좌횡서 언어인 한국어나 영어에 사용합니다.</li> + <li><code>rtl</code>은 오른쪽에서 왼쪽을 뜻하며, 우횡서 언어인 아랍어 등을 사용합니다.</li> + <li><code>auto</code>는 {{glossary("user agent", "사용자 에이전트")}}가 결정합니다. 사용자 에이전트는 기본적인 알고리즘을 사용해 요소 내부의 문자를 분석한 후, 명확한 방향성을 가진 문자가 존재하는 경우 전체 요소에 해당 방향성을 적용합니다.</li> +</ul> + +<div class="note"> +<p><strong>참고:</strong> <code>dir</code> 특성은{{HTMLElement("bdo")}} 요소에 필수로 지정해야 하며, 다른 뜻을 가집니다.</p> + +<ul> + <li> + <p>{{ HTMLElement("bdi") }} 요소는 <code>dir</code> 특성을 상속하지 않으며, 지정하지 않은 경우 <code>auto</code>를 기본값으로 사용합니다.</p> + </li> + <li> + <p>{{ cssxref("direction") }}과 {{ cssxref("unicode-bidi") }}를 지원하며 CSS를 활성화한 경우, 특성 값은 무시하고 CSS 값을 대신 사용합니다.</p> + </li> + <li> + <p>글자의 쓰기 방향은 외형이 아니라 그 의미에 관여하므로, 웹 개발자로서 되도록 CSS 속성 대신 <code>dir</code> 특성을 사용하세요. 관련 속성을 지원하지 않거나, CSS를 비활성화한 브라우저에서도 텍스트가 올바른 방향으로 나타납니다.</p> + </li> + <li> + <p>데이터베이스에 저장된 사용자 입력 값처럼 방향성을 알 수 없는 데이터에는 <code>auto</code> 값을 사용해야 합니다.</p> + </li> +</ul> +</div> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, from {{SpecName('HTML4.01')}} it added the <code>auto</code> value, and is now a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.dir")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li>이 특성을 나타내는 {{domxref("HTMLElement.dir")}}.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/draggable/index.html b/files/ko/web/html/global_attributes/draggable/index.html new file mode 100644 index 0000000000..e3d4b5df39 --- /dev/null +++ b/files/ko/web/html/global_attributes/draggable/index.html @@ -0,0 +1,66 @@ +--- +title: draggable +slug: Web/HTML/Global_attributes/draggable +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/draggable +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><code><strong>draggable</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소의 드래그 가능 여부를 나타내는 열거형 특성으로, 네이티브 브라우저 동작 방식과 <a href="/ko/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a> 모두 통제합니다.</span></p> + +<p><code>draggable</code>은 다음 두 값 중 하나를 가질 수 있습니다.</p> + +<ul> + <li><code>true</code>: 요소를 드래그 할 수 있습니다.</li> + <li><code>false</code>: 요소를 드래그 할 수 없습니다.</li> +</ul> + +<div class="blockIndicator warning"> +<p><code>draggable</code> 특성은 불리언이 아니고 열거형 특성이므로, <code>true</code> 또는 <code>false</code>의 지정 또한 필수입니다. 그러므로 <code><img draggable></code>처럼 사용할 수 없고, 올바른 사용법은 <code><img draggable="false"></code>입니다.</p> +</div> + +<p><code>draggable</code>을 지정하지 않은 경우의 기본값은 <code>auto</code>로, 브라우저 기본 동작을 따릅니다. 즉, 텍스트 선택 영역, 이미지, 링크 외에는 드래그가 불가능합니다. <a href="/ko/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations">종합 예제</a>에서 볼 수 있듯, 다른 요소에 드래그 앤 드롭을 적용하려면 {{domxref('GlobalEventHandlers.ondragstart', 'ondragstart')}} 이벤트 처리기가 필요합니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "interaction.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.draggable")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/dropzone/index.html b/files/ko/web/html/global_attributes/dropzone/index.html new file mode 100644 index 0000000000..15d26aad15 --- /dev/null +++ b/files/ko/web/html/global_attributes/dropzone/index.html @@ -0,0 +1,53 @@ +--- +title: dropzone +slug: Web/HTML/Global_attributes/dropzone +tags: + - Deprecated + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/dropzone +--- +<div>{{HTMLSidebar("Global_attributes")}}{{deprecated_header}}</div> + +<p><strong><code>dropzone</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 열거형 속성으로 한 요소에 어떤 형식의 컨텐츠가 <a href="/En/DragDrop/Drag_and_Drop">Drag and Drop API</a>를 이용해 드랍될 수 있는지를 나타냅니다. 이 속성은 다음의 값을 가질 수 있습니다:</p> + +<ul> + <li><code>copy</code>, 드랍할 때 드래그되는 요소의 사본이 생성됨을 나타냅니다.</li> + <li><code>move</code>, 드래그되는 요소가 새로운 위치로 이동할 것임을 나타냅니다.</li> + <li><code>link</code>, 드래그되는 데이터에 대한 링크가 생성될 것임을 나타냅니다.</li> +</ul> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.dropzone")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/hidden/index.html b/files/ko/web/html/global_attributes/hidden/index.html new file mode 100644 index 0000000000..7e4cc9f05f --- /dev/null +++ b/files/ko/web/html/global_attributes/hidden/index.html @@ -0,0 +1,69 @@ +--- +title: hidden +slug: Web/HTML/Global_attributes/hidden +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/hidden +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>hidden</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 해당 요소가 아직, 또는 더 이상 관련이 없음을 나타내는 불리언 특성입니다.</span> 브라우저는 <code>hidden</code> 속성을 설정한 요소를 렌더링 하지 않습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-hidden.html","tabbed-shorter")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>하나의 표시 방식에서만 숨기려 할 땐 <code>hidden</code> 특성이 적합하지 않습니다. 임의의 요소에 <code>hidden</code>을 추가하면, 그 요소는 시각적 방식 외에도 스크린 리더 등 다른 모든 표시 방식에서 숨겨집니다.</p> + +<p>숨겨지지 않은 요소에서 숨겨진 요소로 연결해서는 안됩니다. 또한, 숨겨진 요소의 자손 요소는 여전히 활성 상태이므로, {{htmlelement("script")}} 요소를 실행할 수 있고 양식 요소도 제출할 수 있습니다. 그러나 스크립트와 요소는 다른 맥락에서 숨겨진 요소를 참조할 수 있습니다.</p> + +<p>예를 들어, <code>hidden</code> 특성을 적용한 구획으로 링크하는 <code>href</code> 특성은 유효하지 않습니다. 콘텐츠가 사용할 수 없거나 더는 관련이 없으면 연결할 이유도 없기 때문입니다.</p> + +<p>하지만, 숨겨진 설명문을 참조하기 위해 ARIA <code>aria-</code><code>describedby</code> 특성을 사용하는 것은 괜찮습니다. 숨겨진 설명문 자체로는 쓸모가 없음을 나타내지만 특정 문맥, 즉 자신이 설명하는 요소에서 참조하는 경우 쓸모가 생깁니다.</p> + +<p>위와 유사하게, <code>hidden</code> 특성을 적용한 {{htmlelement("canvas")}} 요소는 스크립트로 작성한 그래픽 엔진에 의해 화면 외 버퍼로 쓰일 수 있고, 숨겨진 양식 요소도 <code>form</code> 특성을 통해 양식 컨트롤에서 참조할 수 있습니다.</p> + +<div class="note"> +<p><strong>참고:</strong> <code>hidden</code> 특성을 가진 요소의 CSS {{cssxref("display")}} 속성 값을 변경하면 특성으로 인한 동작을 재정의합니다. 예컨대 <code>display: flex</code>를 지정한 요소는 <code>hidden</code> 특성이 존재하더라도 화면에 보이게 됩니다.</p> +</div> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Defines the suggested default rendering of the <code>hidden</code> attribute using CSS</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.hidden")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/en-US/docs/Web/HTML/Global_attributes">전역 속성</a>.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/id/index.html b/files/ko/web/html/global_attributes/id/index.html new file mode 100644 index 0000000000..034fc62ac1 --- /dev/null +++ b/files/ko/web/html/global_attributes/id/index.html @@ -0,0 +1,72 @@ +--- +title: id +slug: Web/HTML/Global_attributes/id +tags: + - Global attributes + - HTML + - Reference + - Web +translation_of: Web/HTML/Global_attributes/id +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><code><strong>id</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 문서 전체에서 유일한 고유식별자(ID)를 정의합니다.</span> 고유식별자의 목적은 <a href="/ko/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#프래그먼트">프래그먼트 식별자</a>를 사용해 요소를 가리킬 때와 스크립트 및 스타일 적용 시 특정 요소를 식별하기 위함입니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<div class="blockIndicator warning"> +<p><code>id</code> 특성의 값은 불투명 문자열(opaque string)입니다. 그 말은, 웹 작성자가 <code>id</code> 특성을 통해 사람이 읽을 수 있는 정보를 나타내서는 안된다는 것입니다. (코드 가독성 차원에서는 유용할 수 있습니다. <code>ticket-18569</code>와 <code>r45tgfe-freds&$@</code>을 비교해보세요.)</p> +</div> + +<p><code>id</code> 특성의 값이 공백(스페이스나 탭 등)을 포함해서는 안됩니다. 공백으로 값을 구분하는 {{htmlattrxref("class")}} 속성과 달리, 하나의 요소는 하나의 ID만 가질 수 있습니다. 만약 ID에 공백을 넣는다면, 브라우저는 그 공백마저 ID의 일부로 취급합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> {{glossary("ASCII")}} 문자, 숫자, <code>'_'</code>, <code>'-'</code> 및 <code>'.'</code>를 제외한 문자는 HTML 4에서 허용하지 않았으므로 호환성 문제가 발생할 수 있습니다. 이런 제한은 HTML 5에서는 해제되었으나, 호환성을 위해, ID는 위의 문자로 시작해야 합니다.</p> +</div> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, now accept <code>'_'</code>, <code>'-'</code> and <code>'.'</code> if not at the beginning fo the id. It is also a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.id")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li><code>id</code> 특성을 반영하는 {{domxref("Element.id")}} 속성.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/index.html b/files/ko/web/html/global_attributes/index.html new file mode 100644 index 0000000000..ea6735bd27 --- /dev/null +++ b/files/ko/web/html/global_attributes/index.html @@ -0,0 +1,166 @@ +--- +title: 전역 특성 +slug: Web/HTML/Global_attributes +tags: + - Attribute + - HTML + - Reference + - Web + - 특성 +translation_of: Web/HTML/Global_attributes +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div class="summary"> +<p><strong>전역 특성</strong>(Global attributes)은 모든 HTML에서 공통으로 사용할 수 있는 특성입니다. 그러나 일부 요소에는 아무런 효과도 없을 수 있습니다.</p> +</div> + +<p>전역 특성은 모든 <a href="/ko/docs/Web/HTML/Element">HTML 요소</a>에 지정할 수 있으며, 심지어 표준에 명시되지 않은 요소에도 지정할 수 있습니다. 이는, 비표준 요소를 사용하는 순간 문서가 HTML5를 준수하지 않음에도 불구하고, 비표준 요소 역시 전역 특성을 허용해야 함을 의미합니다. 예를 들어, HTML5를 준수하는 브라우저라면, <code><foo></code>라는 요소는 유효하지 않지만 그래도 <code><foo hidden>...</foo></code>는 화면에 나타내지 않을 것입니다.</p> + +<p>기본 HTML 전역 특성 외에 아래와 같은 전역 특성도 존재합니다.</p> + +<ul> + <li>{{htmlattrdef("xml:lang")}}과 {{htmlattrdef("xml:base")}}는 XHTML 명세에서 상속받은 것으로 더 사용하지 않지만, 호환성 유지를 위해 아직 존재합니다.</li> + <li>여러 개의 <code><strong><a href="/ko/docs/Web/Accessibility/ARIA">aria-*</a></strong></code> 특성은 접근성 향상을 위해 사용됩니다.</li> + <li><a href="/ko/docs/Web/Guide/Events/Event_handlers">이벤트 처리기</a> 특성: <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li> +</ul> + +<h2 id="전역_특성_목록">전역 특성 목록</h2> + +<dl> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/accesskey">{{htmlattrdef("accesskey")}}</a></dt> + <dd>현재 요소에 대한 키보드 단축키 생성을 위한 힌트를 제공합니다. 이 특성은 공백으로 구분한 문자 목록으로 구성됩니다. 브라우저는 주어진 여러 개의 값 중 장치의 키보드 레이아웃에 존재하는 첫 번째 키를 사용해야 합니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/autocapitalize">{{htmlattrdef("autocapitalize")}}</a></dt> + <dd>사용자가 입력 또는 수정하는 텍스트를 자동으로 대문자로 변환할지 여부와 변환하는 방법을 제어합니다. 다음과 같은 값이 가능합니다. + <ul> + <li><code>off</code> 또는 <code>none</code>, 대소문자 자동 변환이 발생하지 않음 (모든 글자가 기본값 소문자)</li> + <li><code>on</code> 또는 <code>sentences</code>, 각 문장의 첫 글자를 대문자로 변환, 나머지 글자는 기본값 소문자</li> + <li><code>words</code>, 각 단어의 첫 글자를 대문자로 변환, 나머지 글자는 기본값 소문자</li> + <li><code>characters</code>, 모든 글자의 기본값이 대문자</li> + </ul> + </dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/class">{{htmlattrdef("class")}}</a></dt> + <dd>공백으로 구분된 해당 요소의 클래스의 목록입니다. 클래스를 이용하면 CSS나 JavaScript에서 <a href="/ko/docs/Web/CSS/Class_selectors">클래스 선택자</a>나 {{domxref("Document.getElementsByClassName()")}}과 같은 메서드를 이용해 특정 요소를 선택하거나 접근할 수 있습니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/contenteditable">{{htmlattrdef("contenteditable")}}</a></dt> + <dd>해당 요소를 사용자가 편집할 수 있는지를 나타내는 열거형 특성입니다. 편집 가능한 경우에 브라우저는 편집을 허용하도록 위젯을 수정합니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/data-*">{{htmlattrdef("data-*")}}</a></dt> + <dd>사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 <a href="/ko/docs/Web/HTML" title="en/HTML">HTML</a>과 <a href="/ko/docs/Web/API/Document_Object_Model" title="en/DOM">DOM</a> 사이에서 교환할 수 있는 방법을 제공합니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/dir">{{htmlattrdef("dir")}}</a></dt> + <dd>요소의 쓰기 방향을 나타내는 열거형 특성입니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/draggable">{{htmlattrdef("draggable")}}</a></dt> + <dd><a href="/ko/docs/Web/API/HTML_드래그_앤_드롭_API">Drag and Drop API</a>를 사용해 요소를 드래그할 수 있는지 나타내는 열거형 특성입니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/exportparts">{{htmlattrdef("exportparts")}}</a> {{experimental_inline}}</dt> + <dd>중첩 섀도우 트리에서 섀도우 파트를 전이적으로 라이트 파트에 내보낼 때 사용합니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/hidden">{{htmlattrdef("hidden")}}</a></dt> + <dd>해당 요소가 아직, 또는 더 이상 관련이 없음을 나타내는 불리언 특성입니다. 브라우저는 <code>hidden</code> 특성을 가진 요소를 렌더링 하지 않습니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/id">{{htmlattrdef("id")}}</a></dt> + <dd>문서 전체에서 유일해야 하는 고유 식별자(ID)를 정의합니다. (프래그먼트 식별자를 사용한) 링크, 스크립트, 스타일 적용 시 요소를 식별할 때 사용합니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/inputmode">{{htmlattrdef("inputmode")}}</a></dt> + <dd>사용자가 요소나 요소의 콘텐츠를 편집할 때, 브라우저가 제공해야 하는 가상 키보드 설정을 알려줍니다. 주로 {{htmlelement("input")}} 요소에 사용하지만, {{htmlattrxref("contenteditable")}} 특성을 가진 요소라면 종류 불문하고 사용할 수 있습니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/is">{{htmlattrdef("is")}}</a></dt> + <dd>표준 HTML 요소가 사용자 정의 기본 요소처럼 동작하도록 지정합니다. (자세한 내용은 <a href="/ko/docs/Web/Web_Components/Using_custom_elements">사용자 정의 요소 사용하기</a>를 참고하세요<a href="/ko/docs/Web/Web_Components/Using_custom_elements">)</a></dd> +</dl> + +<div class="note"> +<p><strong>참고: </strong><code>item*</code> 특성은 <a class="external" href="https://html.spec.whatwg.org/multipage/microdata.html#microdata">WHATWG HTML Microdata feature</a>의 일부입니다.</p> +</div> + +<dl> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/itemid">{{htmlattrdef("itemid")}}</a></dt> + <dd>아이템의 고유하고 전역적인 식별자입니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/itemprop">{{htmlattrdef("itemprop")}}</a></dt> + <dd>아이템에 특성(properties)을 추가할 때 사용합니다. 모든 HTML 요소에는 이름과 값의 쌍으로 구성된 <code>itemprop</code> 특성을 명시할 수 있습니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/itemref">{{htmlattrdef("itemref")}}</a></dt> + <dd><code>itemscope</code> 특성을 가진 요소에 속하지 않는 특성들(properties)은 <code>itemref</code>를 사용하여 item에 연결할 수 있습니다. 여기에는 문서 내의 다른 위치에 있는 추가적인 특성을 갖는 요소 id(<code>itemid</code>s 가 아닌)목록이 제공됩니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/itemscope">{{htmlattrdef("itemscope")}}</a></dt> + <dd><code>itemscope</code>은 (일반적으로) {{htmlattrxref("itemtype")}}과 같이 사용하여 블록에 포함된 HTML이 특정 item에 대한 것임을 나타냅니다. <code>itemscope</code>은 item을 생성하고 그 item에 연결된 <code>itemtype</code>의 범위를 정의합니다. <code>itemtype</code>은 item과 특성 컨텍스트를 설명하는 (<a class="external external-icon" href="https://schema.org/">schema.org</a>와 같은) 어휘(vocabulary)에 대한 유효한 URL입니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/itemtype">{{htmlattrdef("itemtype")}}</a></dt> + <dd>데이터 구조에서 <code>itemprop</code>s (item properties)을 정의하는 데 사용할 단어의 URL을 지정합니다. <code><a href="/ko/docs/Web/HTML/Global_attributes/itemscope">itemscope</a></code>은 데이터 구조 내에서 <code>itemtype</code>에 의해 설정된 어휘가 활성화되는 범위를 설정하는 데 사용됩니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/lang">{{htmlattrdef("lang")}}</a></dt> + <dd>요소의 언어를 정의하는데 도움을 줍니다: 편집할 수 없는 요소가 있는 언어 또는 사용자가 요소를 편집할 수 있는 언어를 정의하는 데 도움이 됩니다(the language that non-editable elements are in, or the language that editable elements should be written in by the user). 이 특성은 언어 식별 태그(<a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a>)에 정의된 형식의 하나의 "언어 태그"(하이픈으로 구분된 "언어 하위 태그(language subtags)"로 구성된)를 포함합니다. <a href="#attr-xml:lang"><strong>xml:lang</strong></a>은 이보다 우선합니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/part">{{htmlattrdef("part")}}</a></dt> + <dd>A space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the {{CSSxRef("::part")}} pseudo-element.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/slot">{{htmlattrdef("slot")}}</a></dt> + <dd>요소에 <a href="/ko/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a>의 shadow tree에 있는 슬롯을 할당합니다: <code>slot</code> 특성을 가진 요소는 {{htmlattrxref("name", "slot")}} 특성의 값이 해당 <code>slot</code> 특성의 값과 일치하는 {HTMLElement("slot")}} 요소가 생성한 슬롯에 할당됩니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/spellcheck">{{htmlattrdef("spellcheck")}}</a></dt> + <dd>요소의 맞춤법 검사 여부를 지정합니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/style">{{htmlattrdef("style")}}</a></dt> + <dd>요소에 적용할 <a href="/ko/docs/Web/CSS">CSS</a> 스타일 선언을 담습니다. 단, 스타일은 별도 파일에 정의하는 것이 추천하는 방식임을 유의하세요. 이 특성과 {{HTMLElement("style")}} 요소는 테스트 등을 위한 빠른 스타일링이 주 용도입니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/tabindex">{{htmlattrdef("tabindex")}}</a></dt> + <dd>An integer attribute indicating if the element can take input focus (is <em>focusable</em>), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values: + <ul> + <li>a <em>negative value</em> means that the element should be focusable, but should not be reachable via sequential keyboard navigation;</li> + <li><code>0</code> means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;</li> + <li>a <em>positive value</em> means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the <a href="#attr-tabindex"><strong>tabindex</strong></a>. If several elements share the same tabindex, their relative order follows their relative positions in the document.</li> + </ul> + </dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/title">{{htmlattrdef("title")}}</a></dt> + <dd>요소에 대한 추가 정보를 제공하는 텍스트입니다. 사용자에게는 보통 툴팁으로서 보여집니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/translate">{{htmlattrdef("translate")}}</a> {{experimental_inline}}</dt> + <dd>페이지를 지역화할 때 요소의 {{domxref("Text")}} 노드 자식 및 번역 가능한 특성의 값을 번역해야 되는지, 아니면 그대로 유지해야 하는지 나타냅니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS Shadow Parts", "#exposing")}}</td> + <td>{{Spec2("CSS Shadow Parts")}}</td> + <td>Added the <code>part</code> and <code>exportparts</code> global attributes.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML5.1")}}, <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, and <code>itemtype</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML5 W3C")}}, <code>contextmenu</code>, <code>draggable</code>, <code>dropzone</code>, and <code>spellcheck</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, and <code>title</code> are now true global attributes.<br> + <code>xml:lang</code> which was initially part of XHTML, is now also part of HTML.<br> + <code>hidden</code>, <code>data-*</code>, <code>contenteditable</code>, and <code>translate</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td>There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.<br> + <code>class</code> and <code>style</code> are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>dir</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>id</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>lang</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>tabindex</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br> + <code>accesskey</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}.<br> + <code>title</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>대부분의 전역 특성에 접근할 수 있는 {{domxref("Element")}}와 {{domxref("GlobalEventHandlers")}} 인터페이스.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/inputmode/index.html b/files/ko/web/html/global_attributes/inputmode/index.html new file mode 100644 index 0000000000..9f33550c8f --- /dev/null +++ b/files/ko/web/html/global_attributes/inputmode/index.html @@ -0,0 +1,64 @@ +--- +title: inputmode +slug: Web/HTML/Global_attributes/inputmode +tags: + - Attribute + - Global attributes + - HTML + - Reference + - Web +translation_of: Web/HTML/Global_attributes/inputmode +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>inputmode</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 사용자가 요소나 요소의 콘텐츠를 편집할 때 입력할 수 있는 데이터 유형의 힌트를 제공하는 열거형 특성입니다.</span> 가능한 값은 다음과 같습니다.</p> + +<dl> + <dt><code>none</code></dt> + <dd>가상 키보드를 사용하지 않습니다. 페이지가 자체 키보드나 입력 컨트롤을 구현할 때 사용합니다.</dd> + <dt><code>text</code> (기본값)</dt> + <dd>사용자의 현재 로케일에 맞는 표준 키보드를 제공합니다.</dd> + <dt><code>decimal</code></dt> + <dd>사용자의 로케일에 맞는 소숫점(보통 <kbd>,</kbd> 또는 <kbd>.</kbd>)을 제공하는 숫자형 키보드를 제공합니다. 장치에 따라 음의 부호(<kbd>-</kbd>)는 제공할 수도, 제공하지 않을 수도 있습니다.</dd> + <dt><code>numeric</code></dt> + <dd>숫자형 키보드를 제공합니다. 소숫점은 없으며, 음의 부호는 제공할 수도, 제공하지 않을 수도 있습니다.</dd> + <dt><code>tel</code></dt> + <dd>전화번호 키보드를 제공합니다. 숫자 0~9, 별표(<kbd>*</kbd>), 해시(샵, <kbd>#</kbd>) 키를 포함합니다. 일반적인 경우, 반드시 전화번호를 필요로 하는 입력 칸에는 <code>{{htmlelement("input/tel", '<input type="tel">')}}</code>을 사용해야 합니다.</dd> + <dt><code>search</code></dt> + <dd>검색 입력 칸에 최적화한 가상 키보드를 제공합니다. 예를 들면, 엔터/제출 키가 "검색" 아이콘이나 레이블을 가질 수 있습니다. 일반적인 경우, 반드시 검색 질의를 필요로 하는 입력 칸에는 <code>{{HTMLElement("input/search", '<input type="search">')}}</code>를 사용해야 합니다.</dd> + <dt><code>email</code></dt> + <dd>이메일 입력에 최적화한 가상 키보드를 제공합니다. 보통 <kbd>@</kbd> 키 등을 제공합니다. 일반적인 경우, 반드시 이메일을 필요로 하는 입력 칸에는 <code>{{htmlelement("input/email", '<input type="email">')}}</code>을 사용해야 합니다.</dd> + <dt><code>url</code></dt> + <dd>{{glossary("URL")}} 입력에 최적화한 가상 키보드를 제공합니다. 보통 <kbd>/</kbd> 키를 누르기 편한 곳에 배치하며, 세션 히스토리 접근 기능 등을 추가하기도 합니다. 일반적인 경우, 반드시 URL을 필요로 하는 입력 칸에는 <code>inputmode</code> 대신 <code>{{htmlelement("input/url", '<input type="url">')}}</code>을 사용해야 합니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.inputmode")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/is/index.html b/files/ko/web/html/global_attributes/is/index.html new file mode 100644 index 0000000000..99e72adade --- /dev/null +++ b/files/ko/web/html/global_attributes/is/index.html @@ -0,0 +1,64 @@ +--- +title: is +slug: Web/HTML/Global_attributes/is +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/is +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong><code>is</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 표준 HTML 요소가 사용자 지정 요소처럼 행동하도록 지정합니다. <a href="/ko/docs/Web/Web_Components/Using_custom_elements">사용자 지정 요소 사용하기</a>를 방문해 더 자세한 정보를 알아보세요.</p> + +<p>이 특성은 주어진 사용자 지정 요소의 이름을 현재 문서에 성공적으로 <a href="/ko/docs/Web/API/CustomElementRegistry/define">정의</a>했고, <code>is</code> 특성을 적용하려는 요소를 확장하는 경우에만 사용할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<p>다음 코드는 <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> 예제에서 발췌한 것입니다. (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">실제 동작 보기</a>)</p> + +<pre class="brush: js notranslate">// Create a class for the element +class WordCount extends HTMLParagraphElement { + constructor() { + // Always call super first in constructor + super(); + + // Constructor contents ommitted for brevity + ... + + } +} + +// Define the new element +customElements.define('word-count', WordCount, { extends: 'p' });</pre> + +<pre class="brush: html notranslate"><<span class="pl-ent">p</span> <span class="pl-e">is</span>=<span class="pl-s"><span class="pl-pds">"</span>word-count<span class="pl-pds">"</span></span>></<span class="pl-ent">p</span>></pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.is")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/itemid/index.html b/files/ko/web/html/global_attributes/itemid/index.html new file mode 100644 index 0000000000..1253ac90b7 --- /dev/null +++ b/files/ko/web/html/global_attributes/itemid/index.html @@ -0,0 +1,105 @@ +--- +title: itemid +slug: Web/HTML/Global_attributes/itemid +tags: + - Global attribute + - HTML + - HTML Microdata + - Microdata + - Reference + - 마이크로데이터 +translation_of: Web/HTML/Global_attributes/itemid +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>itemid</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 아이템의 고유한 전역 식별자의 형태로 마이크로데이터를 제공합니다. <code>itemid</code> 특성은 {{htmlattrxref("itemscope")}}, {{htmlattrxref("itemtype")}} 특성 모두 가진 요소에만 지정할 수 있습니다. 또한 <code>itemscope</code> 특성에 대응하는 <code>itemtype</code>이 전역 식별자 어휘를 참조하거나 정의해야 합니다.</p> + +<p><code>itemtype</code>의 전역 식별자에 대한 정확한 의미는 지정한 어휘 내에서의 해당 식별자 정의가 제공합니다. 어휘는 동일한 전역 식별자를 가지는 여러 아이템이 공존할 수 있는지, 공존한다면 동일한 식별자를 가진 아이템을 어떻게 처리할 것인지를 정의합니다.</p> + +<p class="note"><strong>참고:</strong> {{glossary("WHATWG")}} 명세는 <code>itemid</code>가 반드시 {{glossary("URL")}}이어야 한다고 되어 있습니다. 하지만, 다음 예제에서는 {{glossary("URN")}} 역시 사용 가능하다는 것을 명확히 보여주고 있습니다. 이런 불일치는 마이크로데이터 명세의 불완전성을 반영한다고 볼 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><dl itemscope + itemtype="http://vocab.example.net/book" + itemid="urn:isbn:0-330-34032-8"> +<dt>Title <dd itemprop="title">The Reality Dysfunction +<dt>Author <dd itemprop="author">Peter F. Hamilton +<dt>Publication date +<dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time> </dl></pre> + +<h3 id="구조화된_데이터">구조화된 데이터</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype: itemid</td> + <td colspan="2" rowspan="1"> + <div class="jyrRxf-eEDwDf jcd3Mb IZ65Hb-hUbt4d">http://vocab.example.net/book: urn:isbn:0-330-34032-8</div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td>title</td> + <td>The Reality Dysfunction</td> + </tr> + <tr> + <td>itemprop</td> + <td>author</td> + <td> + <div class="jyrRxf-eEDwDf jcd3Mb">Peter F. Hamilton</div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td>pubdate</td> + <td>1996-01-26</td> + </tr> + </tbody> +</table> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemid", "itemid")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.itemid")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li>마이크로데이터 관련 다른 전역 특성: + <ul> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/html/global_attributes/itemprop/index.html b/files/ko/web/html/global_attributes/itemprop/index.html new file mode 100644 index 0000000000..5cb1a45e45 --- /dev/null +++ b/files/ko/web/html/global_attributes/itemprop/index.html @@ -0,0 +1,472 @@ +--- +title: itemprop +slug: Web/HTML/Global_attributes/itemprop +tags: + - Attribute + - Global attribute + - HTML + - HTML Microdata + - Microdata + - Reference + - 마이크로데이터 +translation_of: Web/HTML/Global_attributes/itemprop +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>itemprop</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 아이템에 속성을 추가할 때 사용합니다. 모든 요소는 <code>itemprop</code> 특성을 가질 수 있으며, 하나의 <code>itemprop</code>은 키-값 쌍으로 구성됩니다. 각각의 키-값 쌍은 <strong>속성</strong>이라고 부르고, 하나 이상의 속성으로 구성한 그룹을 <strong>아이템</strong>이라고 부릅니다. 속성의 값으로는 문자열이나 {{glossary("URL")}}을 사용할 수 있고, {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}}, {{HTMLElement("video")}} 등 다양한 요소와 연관지을 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 일련의 요소에 <code>itemprop</code> 특성을 표기한 소스 코드와, 그 결과인 구조화된 데이터를 나타내는 표를 보입니다.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div itemscope itemtype ="http://schema.org/Movie"> + <h1 <strong>itemprop="name"</strong>>Avatar</h1> + <span>Director: + <span <strong>itemprop="director"</strong>>James Cameron</span> + (born August 16, 1954)</span> + <span <strong>itemprop="genre"</strong>>Science fiction</span> + <a href="../movies/avatar-theatrical-trailer.html" + <strong>itemprop="trailer"</strong>>Trailer</a> +</div></pre> + +<h3 id="구조화된_데이터">구조화된 데이터</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="2"></td> + <th colspan="2" rowspan="1"><strong>Item</strong></th> + </tr> + <tr> + <th><strong>itemprop name</strong></th> + <th><strong>itemprop value</strong></th> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Avatar</td> + </tr> + <tr> + <td>itemprop</td> + <td>director</td> + <td>James Cameron</td> + </tr> + <tr> + <td>itemprop</td> + <td>genre</td> + <td>Science fiction</td> + </tr> + <tr> + <td>itemprop</td> + <td>trailer</td> + <td>../movies/avatar-theatrical-trailer.html</td> + </tr> + </tbody> +</table> + +<h2 id="속성">속성</h2> + +<p>속성은 문자열이나 {{glossary("URL")}}을 값으로 가질 수 있습니다. 문자열 값으로 URL을 지정할 경우 {{htmlelement("a")}}와 {{htmlattrxref("href", "a")}} 특성, {{htmlelement("img")}} 요소와 {{htmlelement("src", "img")}} 특성, 또는 그 외의 외부 리소스를 연결하는 기타 요소를 사용해 표현합니다.</p> + +<h3 id="문자열을_값으로_갖는_세_개의_속성">문자열을 값으로 갖는 세 개의 속성</h3> + +<pre class="brush: html notranslate"><div itemscope> + <p>My name is + <span itemprop="name">Neil</span>.</p> + <p>My band is called + <span itemprop="band">Four Parts Water</span>.</p> + <p>I am + <span itemprop="nationality">British</span>.</p> +</div></pre> + +<h3 id="값이_URL인_image_속성">값이 URL인 "image" 속성</h3> + +<pre class="brush: html notranslate"><div itemscope> + <img itemprop="image" + src="google-logo.png" alt="Google"> +</div></pre> + +<p>숫자와 문자로 구성된 긴 문자열처럼 사람이 쉽게 읽고 이해할 수 없는 문자열이 값일 경우, {{htmlelement("data")}} 요소의 {{htmlattrxref("value", "data")}} 특성 값을 사용해 나타내고, 사람이 보다 쉽게 읽을 수 있도록 표현한 문자열을 <code><data></code>의 콘텐츠로 지정할 수 있습니다. (<code><data></code> 콘텐츠는 구조화된 데이터의 일부가 아닙니다. 아래 예제를 참고하세요.)</p> + +<h3 id="값이_상품_ID인_속성을_가진_아이템">값이 상품 ID인 속성을 가진 아이템</h3> + +<p>ID가 사람에게 친화적인 형태가 아니므로, 사람이 읽을 수 있는 텍스트로는 ID 대신 상품 ID를 사용합니다.</p> + +<pre class="brush: html notranslate"><h1 itemscope> + <data itemprop="product-id" + value="9678AOU879">The Instigator 2000</data> +</h1></pre> + +<p>숫자 값으로는 {{htmlelement("meter")}} 요소와 그 {{htmlattrxref("value", "meter")}} 특성을 대신 사용할 수 있습니다.</p> + +<h3 id="<meter>_요소"><code><meter></code> 요소</h3> + +<pre class="brush: html notranslate"><div itemscope itemtype="http://schema.org/Product"> + <span itemprop="name">Panasonic White + 60L Refrigerator</span> + <img src="panasonic-fridge-60l-white.jpg" alt=""> + <div itemprop="aggregateRating" + itemscope + itemtype="http://schema.org/AggregateRating"> + <meter itemprop="ratingValue" + min=0 value=3.5 max=5>Rated 3.5/5</meter> + (based on <span + itemprop="reviewCount">11</span> + customer reviews) + </div> +</div></pre> + +<p>비슷하게, 날짜와 시간 관련 데이터는 {{htmlelement("time")}}과 그 {{htmlattrxref("datetime", "time")}} 특성을 사용할 수 있습니다.</p> + +<h3 id="날짜_값인_생년월일_속성을_가지는_아이템">날짜 값인 생년월일 속성을 가지는 아이템</h3> + +<pre class="brush: html notranslate"><div itemscope> + I was born on <time + itemprop="birthday" + datetime="2009-05-10">May 10th 2009</time>. +</div></pre> + +<p>속성을 선언하는 요소에 <code>itemscope</code> 특성을 지정해, 이름-값 쌍의 그룹으로 만들 수도 있습니다. 각 값은 문자열이거나, 이름-값 쌍 그룹(즉, 아이템)이어야 합니다.</p> + +<h3 id="사람을_나타내는_바깥쪽_아이템과_밴드를_나타내는_안쪽_아이템">사람을 나타내는 바깥쪽 아이템과 밴드를 나타내는 안쪽 아이템</h3> + +<pre class="brush: html notranslate"><div itemscope> + <p>Name: + <span itemprop="name">Amanda</span></p> + <p>Band: + <span itemprop="band" itemscope> + <span itemprop="name">Jazz Band</span> + (<span itemprop="size">12</span> + players)</span></p> +</div></pre> + +<p>위의 코드에서 바깥쪽 아이템은 <code>name</code>과 <code>band</code> 두 개의 속성을 가지고 있습니다. <code>name</code>은 <code>Amanda</code>이고 <code>band</code>는 그 자체로 <code>name</code>과 <code>size</code>라는 두 가지 속성을 가진 아이템입니다. 밴드의 <code>name</code>은 <code>Jazz Band</code>이고, <code>size</code>는 <code>12</code>입니다. 이 예제에서, 바깥쪽 아이템은 최상위 마이크로데이터 아이템입니다. 다른 아이템의 일부가 아닌 아이템을 최상위 마이크로데이터 아이템이라고 합니다.</p> + +<h3 id="모든_속성이_아이템에서_분리된_경우">모든 속성이 아이템에서 분리된 경우</h3> + +<p>이 예제는 앞의 예제와 동일하지만 모든 속성이 아이템에서 분리되어 있습니다.</p> + +<pre class="brush: html notranslate"><div itemscope id="amanda" itemref="a b"></div> +<p id="a">Name: + <span itemprop="name">Amanda</span></p> +<div id="b" + itemprop="band" + itemscope itemref="c"></div> +<div id="c"> + <p>Band: + <span itemprop="name">Jazz Band</span></p> + <p>Size: + <span itemprop="size">12</span> players</p> +</div></pre> + +<p>이 예제의 결과는 이전 예제와 동일합니다. 첫 번째 아이템은 두 가지 속성을 가지고 있는데, "name"은 "Amanda"로 설정했고, "band"는 다른 아이템으로 연결되어 있습니다. "band"가 가리킨 아이템은 또 다시 두 가지 속성을 가지고 있는데, "name"은 "Jazz Band"이고, "size"는 "12"입니다.</p> + +<p>아이템은 같은 이름을 가지나 서로 다른 값을 갖는 다수의 속성을 가질 수 있습니다.</p> + +<h3 id="두_가지_맛의_아이스크림">두 가지 맛의 아이스크림</h3> + +<pre class="brush: html notranslate"><div itemscope> + <p>Flavors in my favorite ice cream:</p> + <ul> + <li itemprop="flavor">Lemon sorbet</li> + <li itemprop="flavor">Apricot sorbet</li> + </ul> +</div></pre> + +<p>이 예제는 두 가지 프로퍼티를 가지고 있는 아이템을 보여주고 있는데, 두 프로퍼티 모두 "flavor"라는 이름을 가지고 "Lemon sorbet"와 "Apricot sorbet"라는 값을 각각 가지고 있습니다.</p> + +<p>어떤 속성을 가진 요소는 프로퍼티 중 일부가 동일한 값을 가질 때 중복을 피하기 위해 한 번에 여러 프로퍼티를 가질 수도있습니다(An element introducing a property can also introduce multiple properties at once, to avoid duplication when some of the properties have the same value).</p> + +<h3 id="값이_모두_orange인_favorit-color와_favorite-fruit_두_프로퍼티를_가진_아이템">값이 모두 "orange"인 "favorit-color"와 "favorite-fruit" 두 프로퍼티를 가진 아이템</h3> + +<pre class="brush: html notranslate"><div itemscope> + <span + itemprop="favorite-color + favorite-fruit">orange</span> +</div></pre> + +<div class="note"> +<p>참고: 마이크로 데이터와 마이크로 데이터가 표시된 문서의 컨텐츠 사이에는 아무런 연관관계가 없습니다.</p> +</div> + +<h3 id="구조화된_데이터를_두_가지_다른_방식으로_표시하기">구조화된 데이터를 두 가지 다른 방식으로 표시하기</h3> + +<p id="There_is_no_semantic_difference_between_the_following_two_examples">다음의 두 예제는 의미상 차이는 없습니다.</p> + +<pre class="brush: html notranslate"><figure> + <img src="castle.jpeg"> + <figcaption><span + itemscope><span + itemprop="name">The Castle</span></span> + (1986)</figcaption> +</figure></pre> + +<pre class="brush: html notranslate"><span itemscope><meta + itemprop="name" + content="The Castle"></span> +<figure> + <img src="castle.jpeg"> + <figcaption>The Castle + (1986)</figcaption> +</figure></pre> + +<p>두 예제 모두 caption을 가지고 있으며 figure와 전혀 관계가 없고 "name" 이라는 이름과 "The Castle"이라는 값의 쌍을 가진 아이템을 가지고 있습니다. 단 한 가지 차이는 사용자가 문서의 바깥쪽으로 figcaption을 드래그하면 drag-and-drop 데이터에 그 아이템이 포함된다는 점입니다다. 그 아이템과 연관된 이미지는 포함되지 않습니다.</p> + +<h2 id="이름과_값">이름과 값</h2> + +<p>프로퍼티는 고유한 토큰으로 이루어진 순서가 없는(unordered) 집합으로 대소문자를 구분하고 이름-값의 쌍을 나타냅니다. 프로퍼티 값은 하나 이상의 토큰을 가지고 있어야 합니다. 다음의 예제에서 각 데이터 셀이 토큰입니다.</p> + +<h3 id="이름_예제">이름 예제</h3> + +<table class="standard-table"> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="col"></th> + <th colspan="2" rowspan="1" scope="col">Item</th> + </tr> + <tr> + <th scope="col">itemprop <strong>name</strong></th> + <th scope="col">itemprop <strong>value</strong></th> + </tr> + </thead> + <tbody> + <tr> + <th>itemprop</th> + <td>country</td> + <td>Ireland</td> + </tr> + <tr> + <th>itemprop</th> + <td>Option</td> + <td>2</td> + </tr> + <tr> + <th>itemprop</th> + <td>https://www.flickr.com/photos/nlireland/6992065114/</td> + <td>Ring of Kerry</td> + </tr> + <tr> + <th>itemprop</th> + <td>img</td> + <td>https://www.flickr.com/photos/nlireland/6992065114/</td> + </tr> + <tr> + <th>itemprop</th> + <td>website</td> + <td>flickr</td> + </tr> + <tr> + <th>itemprop</th> + <td>(token)</td> + <td>(token)</td> + </tr> + </tbody> +</table> + +<p><strong>토큰(Tokens)</strong>은 문자열이거나 URL일 수 있습니다. item이 URL일 경우는 <strong>typed item</strong>이라고 하고 그렇지 않은 경우는 문자열(string)이라고 합니다. 문자열에는 마침표(period)나 콜론(colon)이 포함되어서는 안됩니다(아래 참고).</p> + +<ol> + <li>아이템이 typed item일 경우 다음 중 하나이어야 합니다: + <ol> + <li>정의된 프로퍼티 이름이거나</li> + <li>어휘(vocabulary)의 정의를 참조하는 유효한 URL이거나</li> + <li>전용(proprietary) 아이템 프로퍼티(예: 공개된 명세서에 정의되지 않은)로 사용되는 유효한 URL이어야 합니다.</li> + </ol> + </li> + <li>아이템이 typed item이 아닐 경우 다음을 따라야 합니다: + <ol> + <li>"<strong>.</strong>" (U+002E FULL STOP) 문자나 "<strong>:</strong>" characters (U+003A COLON) 문자를 포함하지 않는 문자열로 전용(proprietary) 아이템 프로퍼티(예: 공개된 명세서에 정의되지 않은)로 사용되는 유효한 URL이어야 합니다.</li> + </ol> + </li> +</ol> + +<p class="note"><strong>참고:</strong> 위에서 금지한, URL 값이 아닌 경우 ":" 문자가 포함되면 안되는 이유는 이 문자가 문자열에 포함되어 있으면 URL과 구분할 수 없기 때문입니다. "."를 포함하는 문자는 향후 확장을 고려해 예약된 것입니다. 공백(space) 문자는 공백이 포함되어 있을 경우 여러 개의 토큰으로 파싱될 수 있기 때문에 금지되어 있습니다.</p> + +<h2 id="값">값</h2> + +<p>이름-값 쌍의 프로퍼티 값은 다음 목록에서 처음으로 일치하는 값입니다:</p> + +<ul> + <li>해당 요소가 <strong>itemscope </strong>속성을 가지고 있을 경우 + + <ul> + <li>그 값은 해당 요소가 생성한 <strong>아이템(item)</strong>입니다.</li> + </ul> + </li> + <li>해당 요소가 <strong>meta </strong>요소일 경우 + <ul> + <li>그 값은 해당 요소의 <strong>content </strong>속성의 값입니다.</li> + </ul> + </li> + <li>해당 요소가 <strong>audio</strong>, <strong>embed</strong>, <strong>iframe</strong>, <strong>img</strong>, <strong>source</strong>, <strong>track</strong>, 또는 <strong>video</strong>일 경우 + <ul> + <li>그 값은 src 속성이 해당 요소에 설정될 당시 노드 문서(node document;<a href="/en-US/docs/Web/API/Microdata_DOM_API">Microdata DOM API</a>의 일부)에 상대적인 src 속성의 값을 파싱한 URL 문자열입니다.</li> + </ul> + </li> + <li>해당 요소가 <strong>a</strong>, <strong>area</strong>, 또는 <strong>link </strong>요소일 경우 + <ul> + <li>그 값은 href 속성이 해당 요소에 설정될 당시 노드 문서에 상대적인 href 속성의 값을 파싱한 URL 문자열입니다.</li> + </ul> + </li> + <li>해당 요소가 <strong>object </strong>요소일 경우 + <ul> + <li>그 값은 data 속성이 해당 요소에 설정될 당시 노드 문서에 상대적인 data 속성의 값을 파싱한 URL 문자열입니다.</li> + </ul> + </li> + <li>해당 요소가 <strong>data</strong>일 경우 + <ul> + <li>그 값은 해당 요소의 value 속성의 값입니다.</li> + </ul> + </li> + <li>해당 요소가 <strong>meter</strong>일 경우 + <ul> + <li>그 값은 해당 요소의 <strong>value </strong>속성의 값입니다.</li> + </ul> + </li> + <li>해당 요소가 <strong>time</strong>일 경우 + <ul> + <li>그 값은 해당 요소의 <strong>datetime</strong> 값 입니다.</li> + </ul> + </li> +</ul> + +<p>그 외의 경우</p> + +<ul> + <li>그 값은 해당 요소의 <strong>textContent</strong> 입니다.</li> +</ul> + +<p>어떤 프로퍼티의 값이 <strong>URL</strong>이라면, 그 프로퍼티는 URL 속성 요소를 이용해 지정되어야 합니다. URL 속성 요소는 <strong>a</strong>, <strong>area</strong>, <strong>audio</strong>, <strong>embed</strong>, <strong>iframe</strong>, <strong>img</strong>, <strong>link</strong>, <strong>object</strong>, <strong>source</strong>, <strong>track</strong>, 그리고 <strong>video </strong>요소입니다.</p> + +<h3 id="이름_순서">이름 순서</h3> + +<p>이름은 서로 순서가 없지만, 특정한 이름이 여러 값을 가지는 경우라면 상대적인 순서를 가집니다.</p> + +<h4 id="다음_예제에서_a_프로퍼티는_순서대로_1과_2의_값을_가지지만_a_프로퍼티가_b_프로퍼티_보다_먼저_오는지_아닌지는_중요하지_않습니다.">다음 예제에서 "a" 프로퍼티는 순서대로 "1"과 "2"의 값을 가지지만, "a" 프로퍼티가 "b" 프로퍼티 보다 먼저 오는지 아닌지는 중요하지 않습니다.</h4> + +<pre class="brush: html notranslate"><div itemscope> + <p itemprop="a">1</p> + <p itemprop="a">2</p> + <p itemprop="b">test</p> +</div></pre> + +<h4 id="다음_세_예제는_모두_같습니다.">다음 세 예제는 모두 같습니다.</h4> + +<pre class="brush: html notranslate"><div itemscope> + <p itemprop="b">test</p> + <p itemprop="a">1</p> + <p itemprop="a">2</p> +</div></pre> + +<pre class="brush: html notranslate"><div itemscope> + <p itemprop="a">1</p> + <p itemprop="b">test</p> + <p itemprop="a">2</p> +</div></pre> + +<pre class="brush: html notranslate"><div id="x"> + <p itemprop="a">1</p> +</div> +<div itemscope itemref="x"> + <p itemprop="b">test</p> + <p itemprop="a">2</p> +</div> +</pre> + +<h2 id="다른_예제">다른 예제</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html notranslate"><dl itemscope + itemtype="http://vocab.example.net/book" + itemid="urn:isbn:0-330-34032-8"> + <dt>Title + <dd + itemprop="title">The Reality Dysfunction + <dt>Author + <dd + itemprop="author">Peter F. Hamilton + <dt>Publication date + <dd><time + itemprop="pubdate" + datetime="1996-01-26">26 January 1996</time> +</dl> +</pre> + +<h3 id="구조화된_데이터_2">구조화된 데이터</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype: itemid</td> + <td colspan="2" rowspan="1">http://vocab.example.net/book: urn:isbn:0-330-34032-8</td> + </tr> + <tr> + <td>itemprop</td> + <td>title</td> + <td>The Reality Dysfunction</td> + </tr> + <tr> + <td>itemprop</td> + <td>author</td> + <td>Peter F. Hamilton</td> + </tr> + <tr> + <td>itemprop</td> + <td>pubdate</td> + <td>1996-01-26</td> + </tr> + </tbody> +</table> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('HTML_2', '', '', '', 'Web/HTML/Global_attributes/itemprop')}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML Microdata', "#dfn-attr-itemprop", "itemprop")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#names:-the-itemprop-attribute", "itemprop")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.itemprop")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/HTML/Global_attributes">다른 전역 특성</a></li> + <li>다른 마이크로데이터와 관련된 전역 속성: + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/html/global_attributes/itemref/index.html b/files/ko/web/html/global_attributes/itemref/index.html new file mode 100644 index 0000000000..3b9f63afea --- /dev/null +++ b/files/ko/web/html/global_attributes/itemref/index.html @@ -0,0 +1,95 @@ +--- +title: itemref +slug: Web/HTML/Global_attributes/itemref +tags: + - Global attribute + - HTML + - HTML Microdata + - Reference +translation_of: Web/HTML/Global_attributes/itemref +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong><code>itemref</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 사용하면 {{htmlattrxref("itemscope")}} 특성을 가진 요소 바깥의 속성도 아이템과 연결할 수 있습니다.</p> + +<p><code>itemref</code> 특성에는 문서 내 다른 요소의 {{htmlattrxref("id")}} 목록({{htmlattrxref("itemid")}} 아님)을 제공해야 합니다.</p> + +<p><code>itemref</code> 특성은 <code>itemscope</code> 특성을 지정한 요소에만 추가할 수 있습니다.</p> + +<p class="note"><strong>참고: </strong><code>itemref</code> 특성은 마이크로데이터 데이터 모델의 일부가 아니며, 트리 구조를 따르지 않는 데이터에 웹 작성자가 주석을 추가하는 것을 돕는 구문 구조에 불과합니다. 예를 들어, 표의 열이 별개의 아이템인데 데이터 속성은 열을 구성하는 칸에 포함하고 싶은 경우 사용할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div itemscope id="amanda" itemref="a b"></div> +<p id="a">Name: <span itemprop="name">Amanda</span> </p> +<div id="b" itemprop="band" itemscope itemref="c"></div> +<div id="c"> + <p>Band: <span itemprop="name">Jazz Band</span> </p> + <p>Size: <span itemprop="size">12</span> players</p> +</div> +</pre> + +<h3 id="구조화_데이터">구조화 데이터</h3> + +<p><small>(<a href="https://json-ld.org/" rel="external">JSON-LD</a> 형식)</small></p> + +<pre class="brush: json">{ + "@id": "amanda", + "name": "Amanda", + "band": { + "@id": "b", + "name": "Jazz Band", + "size": 12 + } +} +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제')}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML Microdata', "#dfn-itemref", "itemref")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemref", "itemref")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.itemref")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>다른 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li>마이크로데이터 관련 다른 전역 특성 + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/html/global_attributes/itemscope/index.html b/files/ko/web/html/global_attributes/itemscope/index.html new file mode 100644 index 0000000000..8d9b8368fc --- /dev/null +++ b/files/ko/web/html/global_attributes/itemscope/index.html @@ -0,0 +1,284 @@ +--- +title: itemscope +slug: Web/HTML/Global_attributes/itemscope +tags: + - Global attribute + - HTML + - HTML Microdata + - Microdata + - Reference + - 마이크로데이터 +translation_of: Web/HTML/Global_attributes/itemscope +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>itemscope</strong></code> 전역 특성은 연관된 메타데이터의 범위를 지정하는 불리언 특성입니다. 요소에 <code>itemscope</code> 특성을 지정하면 새로운 아이템을 생성하고, 그 결과로 요소에 관련된 키-값 쌍 다수를 낳습니다. 관련 특성인 {{htmlattrxref("itemtype")}}은 어휘(<a href="https://schema.org/">schema.org</a> 등)의 유효한 {{glossary("URL")}}을 지정할 때 사용합니다. 아래 각각의 예제는 <a href="https://schema.org/">schema.org</a>의 어휘를 사용합니다.</p> + +<p>모든 HTML 요소는 <code>itemscope</code> 특성을 가질 수 있습니다. <code>itemscope</code>를 가졌으나 연결된 <code>itemtype</code>이 없는 경우 반드시 연관된 <code>itemref</code>를 가져야 합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> <code>itemtype</code> 특성을 더 알아보려면 <a href="http://schema.org/Thing">http://schema.org/Thing</a>을 방문하세요.</p> +</div> + +<h3 id="간단한_예제">간단한 예제</h3> + +<h4 id="HTML">HTML</h4> + +<p>다음의 예제는 <code>itemscope</code> 특성의 사용법을 보입니다. <code>itemtype</code>은 <a href="http://schema.org/Movie"> http://schema.org/Movie</a>로 지정하고, 세 개의 관련 <code>itemprop</code> 특성을 가집니다.</p> + +<pre class="brush:html"><div itemscope itemtype="http://schema.org/Movie"> + <h1 itemprop="name">Avatar</h1> + <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span> + <span itemprop="genre>Science fiction</span> + <a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a> +</div> +</pre> + +<h4 id="구조화된_데이터">구조화된 데이터</h4> + +<p>다음 표는 앞선 코드의 구조화된 데이터를 나타냅니다.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td rowspan="6">itemscope</td> + <td>Itemtype</td> + <td colspan="2">Movie</td> + </tr> + <tr> + <td>itemprop</td> + <td>(itemprop name)</td> + <td>(itemprop value)</td> + </tr> + <tr> + <td>itemprop</td> + <td>director</td> + <td>James Cameron</td> + </tr> + <tr> + <td>itemprop</td> + <td>genre</td> + <td>Science Fiction</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Avatar</td> + </tr> + <tr> + <td>itemprop</td> + <td>https://youtu.be/0AY1XIkX7bY</td> + <td>Trailer</td> + </tr> + </tbody> +</table> + +<h3 id="itemscope_id_특성"><code>itemscope</code> id 특성</h3> + +<p>요소에 <code>itemscope</code> 특성을 지정하면 새로운 아이템이 생성됩니다. 아이템은 이름-값 쌍 그룹으로 이루어집니다. <code>itemscope</code>와 <code>itemtype</code> 특성을 가진 요소의 경우, {{htmlattrxref("id")}} 특성도 지정할 수 있습니다. <code>id</code>를 사용하면 새로운 아이템에 대한 전역 식별자를 설정할 수 있으며, 전역 식별자를 사용하면 웹에서 찾을 수 있는 다른 아이템과 연결할 수 있습니다.</p> + +<h3 id="예제">예제</h3> + +<p>다음 예제는 네 개의 <code>itemscope</code> 특성을 가지고 있습니다. 각각의 <code>itemscope</code> 특성은 대응하는 <code>itemtype</code> 특성의 범위를 지정합니다. <code>itemtype</code>, <code>Recipe</code>, <code>AggregateRating</code>, <code>NutritionInformation</code>은 요리법에 관한 <a href="https://www.schema.org">schema.org</a> 구조화된 데이터로, 첫 번째 <code>itemtype</code>의 값인 http://schema.org/Recipe에 정의되어 있습니다.</p> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/Recipe"> + <h2 itemprop="name">Grandma's Holiday Apple Pie</h2> + <img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50" /> + <p> + By <span itemprop="author" itemscope itemtype="http://schema.org/Person"> + <span itemprop="name">Carol Smith</span> + </span> + </p> + <p> + Published: <time datetime="2009-11-05" itemprop="datePublished">November 5, 2009</time> + </p> + <span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</span> + <br> + <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> + <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews + </span> + <br> + Prep time: <time datetime="PT30M" itemprop="prepTime">30 min</time><br> + Cook time: <time datetime="PT1H" itemprop="cookTime">1 hou</time>r<br> + Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time><br> + Yield: <span itemprop="recipeYield">1 9" pie (8 servings)</span><br> + <span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"> + Serving size: <span itemprop="servingSize">1 medium slice</span><br> + Calories per serving: <span itemprop="calories">250 cal</span><br> + Fat per serving: <span itemprop="fatContent">12 g</span><br> + </span> + <p> + Ingredients:<br> + <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span> + <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span> + ... + </p> + Directions: <br> + <div itemprop="recipeInstructions"> + 1. Cut and peel apples<br> + 2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br> + ... + </div> +</div></pre> + +<h3 id="결과">결과</h3> + +<h4 id="HTML_2">HTML</h4> + +<p>다음은 위의 코드를 렌더링한 예제입니다.</p> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h4 id="구조화된_데이터_2">구조화된 데이터</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype</td> + <td colspan="2" rowspan="1">Recipe</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Grandma's Holiday Apple Pie</td> + </tr> + <tr> + <td>itemprop</td> + <td>image</td> + <td>https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg</td> + </tr> + <tr> + <td>itemprop</td> + <td>datePublished</td> + <td>2009-11-05</td> + </tr> + <tr> + <td>itemprop</td> + <td>description</td> + <td>This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</td> + </tr> + <tr> + <td>itemprop</td> + <td>prepTime</td> + <td>PT30M</td> + </tr> + <tr> + <td>itemprop</td> + <td>cookTime</td> + <td>PT1H</td> + </tr> + <tr> + <td>itemprop</td> + <td>totalTime</td> + <td>PT1H30M</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeYield</td> + <td>1 9" pie (8 servings)</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeIngredient</td> + <td>Thinly-sliced apples: 6 cups</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeIngredient</td> + <td>White sugar: 3/4 cup</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeInstructions</td> + <td>1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .</td> + </tr> + <tr> + <td>itemprop</td> + <td colspan="2" rowspan="1">author [Person]</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Carol Smith</td> + </tr> + <tr> + <td colspan="1" rowspan="3">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1">aggregateRating [AggregateRating]</td> + </tr> + <tr> + <td>itemprop</td> + <td>ratingValue</td> + <td>4.0</td> + </tr> + <tr> + <td>itemprop</td> + <td>reviewCount</td> + <td>35</td> + </tr> + <tr> + <td colspan="1" rowspan="4">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1">nutrition [NutritionInformation]</td> + </tr> + <tr> + <td>itemprop</td> + <td>servingSize</td> + <td>1 medium slice</td> + </tr> + <tr> + <td>itemprop</td> + <td>calories</td> + <td>250 cal</td> + </tr> + <tr> + <td>itemprop</td> + <td>fatContent</td> + <td>12 g</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>참고</strong>: HTML에서 마이크로데이터를 추출할 때 유용하게 사용할 수 있는 Google의 <a href="https://search.google.com/structured-data/testing-tool">구조화된 데이터 테스트 도구</a>가 있습니다. 위의 HTML 예제 코드를 넣어보세요.</p> +</div> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">이 페이지의 호환성 테이블은 구조화된 데이터에서 만려면 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 을 방문하셔서 요청해주시길 바랍니다.</div> + +<p>{{Compat("html.global_attributes.itemscope")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>다른 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li>마이크로데이터 관련 다른 전역 특성 + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/html/global_attributes/lang/index.html b/files/ko/web/html/global_attributes/lang/index.html new file mode 100644 index 0000000000..db9e80e1f2 --- /dev/null +++ b/files/ko/web/html/global_attributes/lang/index.html @@ -0,0 +1,90 @@ +--- +title: lang +slug: Web/HTML/Global_attributes/lang +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/lang +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong><code>lang</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소 내의 수정 불가한 텍스트의 언어와, 수정 가능한 텍스트가 사용해야 하는 언어를 정의합니다. 특성의 값은 <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt">Tags for Identifying Languages (BCP47)</a>에 정의된 형식의 "언어 태그" 한 개입니다.</p> + +<p class="note"><code>lang</code>의 기본값은 "알 수 없음"이므로 항상 적절한 값을 지정하는 것이 좋습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>특성의 값이 빈 문자열(<code>lang=""</code>)일 때의 값은 "알 수 없음"(unknown)이며, 지정한 값이 BCP47의 유효한 값이 아닌 경우 "유효하지 않음"(invalid)입니다.</p> + +<div class="note"> +<h2 id="언어_태그_구문">언어 태그 구문</h2> + +<p>BCP47의 전체 구문은 매우 상세하여 어떤 언어의 세세한 방언을 나타낼 수도 있지만, 대부분의 사용법은 훨씬 단순합니다.</p> + +<p>언어 태그는 붙임표로 구분하는 "언어 하위태그"로 구성하며, 각각의 하위태그가 언어의 특정 속성을 나타냅니다. 가장 흔히 쓰이는 세 개의 하위 태그는 다음과 같습니다.</p> + +<dl> + <dt>언어 하위태그</dt> + <dd>필수. 두 세 글자로 구성된 코드로 기본 언어를 정의하며, 보통 모두 소문자로 표기합니다. 예를 들어 영어의 언어 태그는 <code>en</code>이고, 한국어의 언어 태그는 <code>ko</code>입니다.</dd> + <dt>활자 하위태그</dt> + <dd>선택사항. 언어의 문자 체계를 나타내며 항상 네 글자이고, 첫 글자는 대문자입니다. 예를 들어, 점자로 쓴 프랑스어는 <code>fr-Brai</code>이고, 일본어 가타카나는 <code>ja-Kana</code>입니다. 라틴 알파벳으로 작성한 영어와 같이 굉장히 흔히 쓰이는 체계의 경우 활자 하위태그를 지정할 필요가 없습니다.</dd> + <dt>지역 하위태그</dt> + <dd>선택사항. 기본 언어 안에서 특정 지역의 방언을 정의하며, 국가 코드와 일치하는 전체 대문자의 두 글자이거나, 국가 외 지역과 일치하는 세 글자 숫자로 구성됩니다. <code>es-ES</code>는 스페인에서 사용하는 스페인어, <code>es-013</code>은 중앙 아메리카에서 사용하는 스페인어이며 "국제 스페인어"는 짧게 <code>es</code>가 됩니다.</dd> +</dl> + +<p>활자와 지역 하위태그가 모두 존재할 경우 활자 태그가 더 앞에 배치됩니다. 예를 들어, <code>ru-Cyrl-BY</code>는 키릴 문자로 작성한 벨라루스의 러시아어입니다.</p> + +<p>언어에 적합한 하위태그를 찾아보시려면 <a href="https://r12a.github.io/app-subtags/" rel="external">Language Subtag Lookup</a>을 사용해보세요.</p> +</div> + +<p>CSS {{cssxref(":lang")}} 의사 클래스에서는 유효하지 않은 언어의 이름 두 가지가 이 서로 다르다면 별도로 취급합니다. 예컨대, <code>:lang(es)</code> <code>lang="es-ES"</code>와 <code>lang="es-419"</code> 모두 선택하지만, <code>:lang(xyzzy)</code>는 <code>lang="xyzzy-Zorp!"</code>를 선택하지 못합니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, behavior with <code>xml:lang</code> and language determination algorithm defined. It also is a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.lang")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li><a href="/ko/docs/Web/HTTP/Headers/Content-Language"><code>Content-Language</code> HTTP 헤더</a></li> +</ul> diff --git a/files/ko/web/html/global_attributes/part/index.html b/files/ko/web/html/global_attributes/part/index.html new file mode 100644 index 0000000000..839639f470 --- /dev/null +++ b/files/ko/web/html/global_attributes/part/index.html @@ -0,0 +1,43 @@ +--- +title: part +slug: Web/HTML/Global_attributes/part +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/part +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>part</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소의 파트 이름을 공백으로 구분한 목록을 지정합니다. CSS에서는 {{CSSxRef("::part")}} 의사 요소를 사용해, 섀도 트리 내의 특정 요소에 스타일을 적용할 수 있습니다.</p> + +<p><a href="https://mdn.github.io/web-components-examples/shadow-part/">섀도 파트 예제</a>에서 사용 예를 살펴보세요.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("CSS Shadow Parts", "#part-attr", "part")}}</td> + <td>{{Spec2('CSS Shadow Parts')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.part")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/slot/index.html b/files/ko/web/html/global_attributes/slot/index.html new file mode 100644 index 0000000000..b29c786b7f --- /dev/null +++ b/files/ko/web/html/global_attributes/slot/index.html @@ -0,0 +1,48 @@ +--- +title: slot +slug: Web/HTML/Global_attributes/slot +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/slot +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>slot</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소에 <a href="/ko/docs/Web/Web_Components/Using_shadow_DOM">섀도우 DOM</a> 섀도우 트리를 할당합니다. <code>slot</code> 특성을 지정한 요소는 {{htmlattrxref("name", "slot")}} 특성의 값이 요소의 <code>slot</code> 값과 일치하는 {{htmlelement("slot")}} 요소에 할당됩니다.</p> + +<p>예제는 <a href="/ko/docs/Web/Web_Components/Using_templates_and_slots">템플릿과 슬롯 사용하기</a> 안내서에서 확인할 수 있습니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.slot")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/spellcheck/index.html b/files/ko/web/html/global_attributes/spellcheck/index.html new file mode 100644 index 0000000000..c367bcd6a0 --- /dev/null +++ b/files/ko/web/html/global_attributes/spellcheck/index.html @@ -0,0 +1,67 @@ +--- +title: spellcheck +slug: Web/HTML/Global_attributes/spellcheck +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/spellcheck +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>spellcheck</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소의 맞춤법 검사 여부를 지정하는 열거형 특성입니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<p>가능한 값은 다음과 같습니다.</p> + +<ul> + <li><code>true</code>는 가능한 경우 요소의 맞춤법을 검사해야 함을 나타냅니다.</li> + <li><code>false</code>는 요소의 맞춤법을 검사하지 않아야 함을 나타냅니다.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> <code>spellcheck</code> 특성은 불리언이 아니고 열거형 특성이므로 <code>true</code> 또는 <code>false</code>를 반드시 지정해야 합니다. 즉, <code><textarea spellcheck></textarea></code>처럼은 사용할 수 없으며, <code><textarea spellcheck="true"></textarea></code>와 같이 사용해야 합니다.</p> +</div> + +<p>특성을 지정하지 않았을 때의 기본값은 브라우저 및 요소에 따라 다릅니다. 또한, <code>spellcheck</code> 특성은 상속 대상이므로, 부모 요소의 값에도 영향을 받습니다.</p> + +<p><code>spellcheck</code>는 권장사항에 불과하며, 브라우저가 맞춤법을 검사해야 할 의무는 없습니다. 보통 <code>spllcheck</code> 특성을 <code>true</code>로 지정하더라도, 요소를 편집할 수 없다면 맞춤법 검사를 하지 않습니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.spellcheck")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/style/index.html b/files/ko/web/html/global_attributes/style/index.html new file mode 100644 index 0000000000..6400ef008f --- /dev/null +++ b/files/ko/web/html/global_attributes/style/index.html @@ -0,0 +1,69 @@ +--- +title: style +slug: Web/HTML/Global_attributes/style +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/style +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><code><strong>style</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소에 적용할 <a href="/ko/docs/Web/CSS">CSS</a> 스타일 선언을 담습니다.</span> 스타일은 별도의 파일에 정의하는 것이 권장된다는 점을 참고하세요. 이 특성과 {{HTMLElement("style")}} 요소는 주로 테스트 등 빠른 스타일링을 위한 목적으로 사용됩니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-style.html","tabbed-shorter")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<div class="note"> +<p><strong>참고:</strong> <code>style</code> 특성에 의미를 담으면 안됩니다. 페이지의 모든 스타일을 제거하더라도, 그 의미는 옳게 남아있어야 합니다. 보통 <code>style</code>을 사용해 불필요한 정보를 숨기기보단 <code><a href="/ko/docs/Web/HTML/Global_attributes/hidden">hidden</a></code> 특성을 사용해야 합니다.</p> +</div> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, it is now a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Style", "", "")}}</td> + <td>{{Spec2("CSS3 Style")}}</td> + <td>Defines the content of the <code>style</code> attribute.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.style")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/tabindex/index.html b/files/ko/web/html/global_attributes/tabindex/index.html new file mode 100644 index 0000000000..898852f852 --- /dev/null +++ b/files/ko/web/html/global_attributes/tabindex/index.html @@ -0,0 +1,92 @@ +--- +title: tabindex +slug: Web/HTML/Global_attributes/tabindex +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/tabindex +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>tabindex</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소가 포커스 가능함을 나타내며, 이름에서도 알 수 있듯, 주로 <kbd>Tab</kbd> 키를 사용하는 연속적인 키보드 탐색에서 어느 순서에 위치할지 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>값으로는 정수를 지정할 수 있으며, 수에 따라 결과가 달라집니다.</p> + +<ul> + <li><strong>음의 정숫값</strong>(보통 <code>tabindex="-1"</code>)은 연속 키보드 탐색으로 접근할 수는 없으나 JavaScript나 시각적(마우스 클릭)으로는 포커스 가능함을 뜻합니다. 보통 JavaScript를 사용한 위젯의 접근성 확보를 위해 사용합니다. + + <div class="note"> + <p><strong>참고:</strong> 음의 값은 특정 이벤트에만 나타나는 요소에 유용합니다. 사용자는 키보드를 계속 눌러도 접근할 수 없으나, 스크립트에서는 {{domxref("HTMLOrForeignElement.focus", "focus()")}} 메서드를 호출해 포커스를 부여할 수 있기 때문입니다.</p> + </div> + </li> + <li><code>tabindex="0"</code>은 기본값으로, 연속 키보드 탐색으로 요소에 접근할 수 있으며 문서 소스 코드의 순서에 따른다는 것을 나타냅니다. 양의 정숫값을 가진 요소가 존재할 경우 순서는 그 이후가 됩니다.</li> + <li><strong>양의 정숫값</strong>은 요소를 연속 키보드 탐색으로 접근할 수 있으며, 그 순서는 해당 값으로 지정하겠다는 것을 뜻합니다. 즉, <code>tabindex="4"</code>인 요소는 <code>tabindex="5"</code>와 <code>tabindex="0"</code>인 요소 이전에, 그러나 <code>tabindex="3"</code>인 요소 이후에 접근할 수 있습니다. 다수의 요소가 하나의 값을 공유할 경우 그 안에서 문서 소스 코드의 순서를 따릅니다. 최댓값은 <code>32767</code>입니다. + <div class="warning"> + <p>0보다 큰 <code>tabindex</code> 값을 피하세요. 접근성 보조기술 사용자의 페이지 탐색과 조작에 방해될 수 있습니다. 대신, 문서의 요소 순서를 논리적인 순서대로 배치하세요.</p> + </div> + </li> +</ul> + +<p>{{htmlelement("div")}}에 <code>tabindex</code>를 설정할 경우, 콘텐츠에도 <code>tabindex</code>를 지정하지 않는 한 화살표 키로 스크롤 할 수 없습니다. <a href="https://jsfiddle.net/jainakshay/0b2q4Lgv/">fiddle을 방문해 tabindex가 스크롤에 주는 영향을 확인하세요.</a></p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>키보드 입력을 통해 포커스 가능한 상호작용 항목을 만들기 위해 비 <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a>에 <code>tabindex</code>를 추가하는 것을 피하세요. 이를테면 버튼을 나타내기 위해 {{htmlelement("button")}} 대신 {{htmlelement("div")}}를 사용하는 것을 말합니다.</p> + +<p>비 대화형 요소를 사용해 만든 대화형 컴포넌트는 접근성 트리에 나타나지 않으므로, 보조 기술이 해당 컴포넌트로 탐색하거나 조작하는 것을 방지합니다. 상호작용 가능한 항목은 대화형 요소({{htmlelement("a")}}, {{htmlelement("button")}}, {{htmlelement("details")}}, {{htmlelement("input")}}, {{htmlelement("select")}}, {{htmlelement("textarea")}} 등)를 사용해 적절한 의미와 함께 나타내야 합니다. 대화형 콘텐츠 요소는 보통 <a href="/ko/docs/Web/Accessibility/ARIA">ARIA</a>가 관리하는, 접근성 기술에 알려줄 수 있는 자신의 역할과 상태를 내장하고 있습니다.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/">Using the tabindex attribute | The Paciello Group</a></li> +</ul> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-tabindex-attribute", "tabindex")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the attribute is now supported on all elements (global attributes).</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.global_attributes.tabindex")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></li> + <li>이 속성을 나타내는 {{domxref("HTMLElement.tabIndex")}}</li> +</ul> diff --git a/files/ko/web/html/global_attributes/title/index.html b/files/ko/web/html/global_attributes/title/index.html new file mode 100644 index 0000000000..e0dbe671c1 --- /dev/null +++ b/files/ko/web/html/global_attributes/title/index.html @@ -0,0 +1,125 @@ +--- +title: title +slug: Web/HTML/Global_attributes/title +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/title +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><code><strong>title</strong></code> <a href="/en-US/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소와 관련된 추가 정보를 제공하는 텍스트를 나타냅니다.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-title.html","tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<p>다음과 같은 경우 많이 쓰입니다.</p> + +<ul> + <li>보조 기술을 위해 {{HTMLElement("iframe")}} 요소에 이름 붙이기</li> + <li>진짜 {{HTMLElement("label")}}을 표시하지 못할 때에 대비해 {{htmlelement("input")}} 요소에 프로그래밍을 통한 레이블 추가하기</li> + <li>{{htmlelement("table")}} 요소 컨트롤에 레이블 추가하기</li> +</ul> + +<p>{{HTMLElement("link")}}, {{HTMLElement("abbr")}}, {{HTMLElement("input")}}, {{HTMLElement("menuitem")}} 요소의 <code>title</code> 특성은 추가적인 뜻을 가지고 있습니다..</p> + +<h2 id="여러_줄의_제목">여러 줄의 제목</h2> + +<p><code>title</code> 특성은 여러 줄을 가질 수 있으며, 모든 <code>U+000A LINE FEED</code> (<code>LF</code>) 문자가 줄을 바꿉니다. 즉, 다음의 경우 툴팁이 두 줄로 나타나므로 주의를 요해야 합니다.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p><code>title</code> 안에서 줄을 바꿀 땐 조심해야 합니다. +이 <abbr title="This is a +multiline title">예제</abbr>처럼요.</p></pre> + +<h3 id="결과">결과</h3> + +<div>{{EmbedLiveSample('여러_줄의_제목')}}</div> + +<h2 id="특성_상속">특성 상속</h2> + +<p>요소가 <code>title</code> 특성을 가지고 있지 않을 땐 부모 요소로부터 상속합니다. 부모 요소 또한 자신의 부모로부터 상속할 수 있습니다.</p> + +<p><code>title</code>에 빈 문자열을 지정한 경우 조상의 <code>title</code>이 더 이상 관련되지 않았으며 해당 요소에 툴팁을 표시하지 말아야 함을 나타냅니다.</p> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><div title="CoolTip"> + <p>여기 어디에 마우스를 올리면 “CoolTip”이 나타납니다.</p> + <p title="">하지만 여기에서는 나타나지 않죠.</p> +</div></pre> + +<h3 id="결과_2">결과</h3> + +<div>{{EmbedLiveSample('특성_상속')}}</div> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p><code>title</code> 특성은 다음과 같은 경우에 문제가 많습니다.</p> + +<ul> + <li>터치 전용 장치 사용자</li> + <li>키보드로 탐색하는 사용자</li> + <li>스크린 리더, 화면 돋보기 등 보조 기술로 탐색하는 사용자</li> + <li>섬세한 운동조절이 힘든 사용자</li> + <li>인지력 문제를 가진 사용자</li> +</ul> + +<p>일관적이지 못한 브라우저 지원 문제에 더불어, 브라우저가 렌더링 한 페이지를 보조 기술이 분석함으로써 문제가 심해집니다. 툴팁 효과가 필요한 경우, <a href="https://inclusive-components.design/tooltips-toggletips/">위에 해당하는 사용자도 접근하기 좋은 다른 기법</a>을 사용하는 것이 좋습니다.</p> + +<ul> + <li><a href="https://www.w3.org/TR/html/dom.html#the-title-attribute">3.2.5.1. The title attribute | W3C HTML 5.2: 3. Semantics, structure, and APIs of HTML documents</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute – updated | The Paciello Group</a></li> + <li><a href="https://inclusive-components.design/tooltips-toggletips/">Tooltips & Toggletips - Inclusive Components</a></li> + <li><a href="https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/">The Trials and Tribulations of the Title Attribute - 24 Accessibility</a></li> +</ul> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, it is now a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.title")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> + <li>{{domxref("HTMLElement.title")}} that reflects this attribute.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/translate/index.html b/files/ko/web/html/global_attributes/translate/index.html new file mode 100644 index 0000000000..12ec6e9833 --- /dev/null +++ b/files/ko/web/html/global_attributes/translate/index.html @@ -0,0 +1,64 @@ +--- +title: translate +slug: Web/HTML/Global_attributes/translate +tags: + - Experimental + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/translate +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><code><strong>translate</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 페이지를 지역화할 때 요소의 {{domxref("Text")}} 노드 자식 및 번역 가능한 특성의 값을 번역해야 되는지, 아니면 그대로 유지해야 하는지 나타내는 열거형 속성입니다.</span> 가능한 값은 다음과 같습니다.</p> + +<ul> + <li>빈 문자열 또는 <code>"yes"</code>는 페이지 지역화 과정에서 요소를 번역해야 함을 나타냅니다.</li> + <li><code>"no"</code>는 요소의 내용을 그대로 유지해야 함을 나타냅니다.</li> +</ul> + +<p>비록 모든 브라우저가 <code>translate</code> 특성을 인식하는건 아니지만, Google 번역 등의 자동 번역 시스템과 번역가가 사용하는 도구가 값을 존중할 수 있습니다. 그러므로 웹 작성자로서 번역되어선 안될 요소를 표시하는 것이 중요합니다.</p> + +<h2 id="예제">예제</h2> + +<p>다음 예제에서의 <code>translate</code> 특성은 푸터에 배치한 회사의 브랜드 이름을 번역하지 말 것을 요청합니다.</p> + +<pre class="brush: html notranslate"><footer> + <small>© 2020 <span translate="no">BrandName</span></small> +</footer></pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.translate")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li>이 특성을 반영하는 {{domxref("HTMLElement.translate")}} 속성.</li> + <li><a href="https://www.w3.org/International/questions/qa-translate-flag">HTML의 translate 특성 사용하기</a></li> +</ul> diff --git a/files/ko/web/html/global_attributes/클래스/index.html b/files/ko/web/html/global_attributes/클래스/index.html new file mode 100644 index 0000000000..d0aa89b606 --- /dev/null +++ b/files/ko/web/html/global_attributes/클래스/index.html @@ -0,0 +1,64 @@ +--- +title: class +slug: Web/HTML/Global_attributes/클래스 +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/class +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>class</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 공백으로 구분한 요소 클래스의 목록으로, 대소문자를 구분하지 않습니다. 클래스는 CSS나 JavaScript에서 <a href="/ko/docs/Web/CSS/Class_selectors">클래스 선택자</a>나 DOM 메서드의 {{domxref("document.getElementsByClassName()")}}과 같은 메서드를 통해 요소에 접근할 수 있는 방법입니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>명세서가 클래스의 명칭에 대한 요구사항을 제시하지는 않았지만, 웹 개발자는 해당 요소의 표시 방식보다는 요소의 의미와 목적을 설명하는 명칭을 사용하는 것이 좋습니다. 예를 들어, 클래스 특성을 가진 어떤 요소가 기울임꼴로 나타난다 하더라도, 클래스 이름은 "기울임꼴"을 설명하는 것이 아니라 요소를 설명하는 것입니다. 의미를 가진 이름은 해당 페이지의 표현 방식이 바뀌더라도 논리성을 잃지 않습니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML4.01')}}, <code>class</code> is now a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">이 페이지에 있는 호환성 테이블은 구조적 데이터로부터 생성된 것입니다. 이 데이터에 기여하고 싶다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>를 살펴보시고 pull request를 보내주시기 바랍니다.</div> + +<p>{{Compat("html.global_attributes.class")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li>{{domxref("element.className")}}</li> + <li>{{domxref("element.classList")}}</li> +</ul> diff --git a/files/ko/web/html/html5/index.html b/files/ko/web/html/html5/index.html new file mode 100644 index 0000000000..2d64ce56d6 --- /dev/null +++ b/files/ko/web/html/html5/index.html @@ -0,0 +1,122 @@ +--- +title: HTML5 +slug: Web/HTML/HTML5 +translation_of: Web/Guide/HTML/HTML5 +--- +<p><strong>HTML5</strong>는 HTML를 정의하는 표준화에 있어서의 최신 표준 명세입니다. <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML5 명세</a>는 아직도 표준 지정이 완료되지 않았고 변경이 계속 진행 중입니다. 하지만, Mozilla 및 다른 웹 브라우저 벤더는 이미 사양 중 많은 부분에 대한 구현을 시작하고 있습니다. 여기에 링크 하고 있는 문서에서는 <a class="external" href="http://www.mozilla.com/en-US/firefox/" title="http://www.mozilla.com/en-US/firefox/">Firefox</a> 및 <a href="/ko/List_of_Mozilla-Based_Applications" title="ko/List of Mozilla-Based Applications">다른 많은 제품</a>으로 사용되어 있는 Mozilla의 <a href="/ko/Gecko" title="ko/Gecko">Gecko</a> 엔진에 있어서 이미 기술 지원되어 있는 HTML5의 기능에 대해 설명하고 있습니다. 각각의 기능을 기술 지원하고 있는 Gecko 버전 및 다른 브라우저 엔진에 대해서는 지정된 페이지를 참조해 주십시오.</p> + +<p>(<a href="/ko/HTML/HTML5/HTML5_Thematic_Classification" title="ko/HTML/HTML5/HTML5 Thematic Classification">HTML5의 문서에 대한 다른 분류</a>도 참고하세요.)</p> + +<h2 id="HTML5_소개">HTML5 소개</h2> + +<dl> + <dt><a href="/ko/HTML/HTML5/Introduction_to_HTML5" title="ko/HTML/Introduction to HTML5"><strong>HTML5의 소개</strong></a></dt> + <dd>이 문서에서는 웹 디자인이나 웹 애플리케이션으로 HTML5 이용 방법을 소개합니다.</dd> +</dl> + +<h2 id="HTML5의_요소">HTML5의 요소</h2> + +<dl> + <dt><a href="/ko/HTML/HTML5/HTML5_Tags_List" title="ko/HTML/HTML5/HTML5 Tags List"><strong>HTML5 요소·태그의 목록</strong></a></dt> + <dd>현재 사양 초안에 근거한 HTML5 요소(태그)의 목록표입니다.</dd> + <dt><a href="/Ja/Using_HTML5_audio_and_video" title="ko/Using_audio_and_video_in_Firefox">오디오/비디오 사용하기</a></dt> + <dd>Firefox 3.5이상에서 HTML5의 {{ HTMLElement("audio") }} 요소와 {{ HTMLElement("video") }} 요소의 기술 지원이 추가되었습니다.</dd> + <dt><a href="/ko/HTML/Forms_in_HTML" title="ko/HTML/HTML5/Forms in HTML5">HTML5 웹 폼양식</a></dt> + <dd>HTML5에서는 웹 폼양식이 개선됩니다. {{ HTMLElement("input") }} 요소의 {{ htmlattrxref("type", "input") }} 속성에 새로운 값이나 새 요소인 {{ HTMLElement("output") }} 요소 등이 새롭게 추가되었습니다.</dd> + <dt><a href="/ko/Sections_and_outlines_of_an_HTML5_document" title="ko/Sections and Outlines of an HTML5 document">HTML5 섹션과 아웃라인</a></dt> + <dd>HTML5 에서는 아웃라인과 섹션에 관한 요소가 추가되었습니다.: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("hgroup") }}.</dd> + <dt>{{ HTMLElement("mark") }} 요소</dt> + <dd>mark 요소는 텍스트중에서의 특별한<em> 관련성</em>을 강조시키기 위해서 이용합니다.</dd> + <dt>{{ HTMLElement("figure") }} 및 {{ HTMLElement("figcaption") }} 요소</dt> + <dd>주로 사용된 문장과 느슨하게 연결된, 최종 캡션을 수반한 도식이나 그림을 추가할 수 있습니다.</dd> +</dl> + +<h3 id="Canvas_기술_지원">Canvas 기술 지원</h3> + +<dl> + <dt><a href="/ko/Canvas_tutorial" title="https://developer.mozilla.org/ko/Canvas_tutorial">Canvas 튜토리얼</a></dt> + <dd>새로운 요소인 {{ HTMLElement("canvas") }} 요소와 그것을 사용하여 Firefox에 그래프나 다른 객체를 재생 하는 방법에 대해 배웁니다.</dd> + <dt><a href="/ko/Drawing_text_using_a_canvas" title="ko/Drawing_text_using_a_canvas"><code>canvas</code> 요소의 HTML5 text API</a></dt> + <dd>{{ HTMLElement("canvas") }} 요소가 HTML5 text API를 기술 지원합니다.</dd> +</dl> + +<h2 id="웹_애플리케이션_기능">웹 애플리케이션 기능</h2> + +<dl> + <dt><a href="/ko/HTML/Using_the_application_cache" title="ko/Offline_resources_in_Firefox">Firefox 오프 라인 자원</a></dt> + <dd>Firefox는 HTML5의 오프 라인 자원 사양을 완전하게 구현 및 지원하고 있습니다. 대다수 브라우저의 몇 가지 레벨로 오프 라인 자원을 기술 지원하고 있습니다.</dd> + <dt><a href="/ko/Online_and_offline_events" title="ko/Online_and_offline_events">Online 이벤트와 Offline 이벤트</a></dt> + <dd>Firefox 3은 WHATWG의 online 및 offline 이벤트를 기술 지원하고 있습니다. 이러한 이벤트는 애플리케이션이나 확장 기능에 현재 인터넷 접속 상태의 연결 여부를 확인할 수 있습니다.</dd> + <dt><a href="/ko/DOM/Storage" title="ko/DOM/Storage">WHATWG 클라이언트 사이드 세션 스토리지 및 영구 스토리지 (DOM Storage)</a></dt> + <dd>클라이언트 사이드 세션 스토리지와 영구 스토리지에 의하고 웹 애플리케이션이 구조화 데이터를 클라이언트 측에 저장할 수 있도록 합니다.</dd> + <dt><a href="/ko/HTML/Content_Editable" title="ko/HTML/Content Editable"><code>contentEditable</code> 속성： 웹 사이트 및 위키 편집 용이성</a></dt> + <dd>HTML5 에서는 <code>contentEditable</code> 속성이 표준화 되었습니다. 이 기능에 대해 살펴봅니다.</dd> + <dt><a href="/ko/Using_files_from_web_applications" title="ko/Using_files_from_web_applications">로컬 파일 사용하기</a></dt> + <dd>새로운 HTML5 File API 지원이 Gecko에 추가되었습니다. 이 API는 웹 애플리케이션이 사용자가 선택한 로컬 파일에 접근 하는 것을 가능하게 합니다. 이것에는 <a href="/ko/HTML/Element/Input#attr-type" title="ko/HTML/Element/input#attr-type"><strong>type</strong></a> 속성의 값에 <code>file</code>를 지정한 <code>{{ HTMLElement("input") }}</code> 요소에 새롭게 추가된 <a href="/ko/HTML/Element/Input#attr-multiple" title="ko/HTML/Element/input#attr-multiple"><strong>multiple</strong></a> 속성을 이용하는 것으로 복수 파일을 선택할 수 있게 되는 기술 지원가 포함되어 있습니다.</dd> +</dl> + +<h2 id="DOM_주요_기능">DOM 주요 기능</h2> + +<dl> + <dt><a href="/ko/DOM/document.getElementsByClassName" title="ko/DOM/document.getElementsByClassName">getElementsByClassName</a></dt> + <dd>Document 및 Element 노드에 있어서의 <code>getElementsByClassName</code> 메소드가 지원되어 있습니다. 이러한 메소드를 이용하는 것으로 지정한 클래스 또는 지정한 클래스의 목록를 가지는 요소를 찾아낼 수 있습니다.</dd> + <dt><a href="/Ja/DragDrop/Drag_and_Drop" title="ko/DragDrop/Drag_and_Drop">드래그 앤 드롭</a></dt> + <dd>HTML5의 드래그앤 드롭 API는 웹 사이트간에 있어서의 아이템의 끌어오기 및 놓기 기능을 지원합니다. 또, 확장 기능이나 Mozilla 기반의 애플리케이션으로 사용할 수 있는 단순한 API 도 제공합니다.</dd> + <dt><a href="/ko/Focus_management_in_HTML" title="ko/Focus_management_in_HTML">HTML 내 포커스 관리</a></dt> + <dd>HTML5가 새로운 <code>activeElement</code> 속성과 <code>hasFocus</code> 속성이 지원되어 있습니다.</dd> + <dt><a href="/ko/Web-based_protocol_handlers" title="ko/Web-based_protocol_handlers">웹 기반 프로토콜 핸들러</a></dt> + <dd><code>navigator.registerProtocolHandler()</code>메소드를 사용하여, 웹 애플리케이션을 프로토콜 핸들러로서 등록할 수 있게 되었습니다.</dd> +</dl> + +<h2 id="HTML_파서">HTML 파서</h2> + +<p>Gecko의 <a href="/ko/HTML/HTML5/HTML5_Parser" title="ko/HTML/HTML5/HTML5 parser">HTML5 표준 파서</a>(HTML 문서를 DOM으로 변환하는 엔진)는 2010 년 3 월에 기본적으로 사용됩니다(Gecko 1.9.2 / Firefox 3.6에 탑재되어 있는 시점의 HTML5 파서는 매우 불안정한 버전이며 실제 이용하는 것을 추천 하지 않습니다).{{ fx_minversion_inline(4.0) }}</p> + +<h2 id="추가_변경사항">추가 변경사항</h2> + +<ul> + <li>HTML 문서에 있어서의 <code>localName</code> 및 <code>namespaceURI</code>는 XML 문서 때와 같은 행동을 하게 되었습니다. 예를 들면, <code>localName</code>는 소문자를 돌려주어, HTML 요소의 <code>namespaceURI</code>는 <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="external nofollow" title="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"</code>를 돌려줍니다.</li> + <li>페이지 URI 문서 단편 식별자 ("#" (해시) 문자에서 후의 부분)가 변경되었을 때, 새로운 <code>hashchange</code> 이벤트가 페이지에 보내집니다. 자세한 것은 <code><a href="/ko/DOM/window.onhashchange" title="ko/DOM/window.onhashchange">window.onhashchange</a></code>를 참조해 주십시오.</li> + <li><code>class</code> 속성을 보다 간단하게 취급할 수 있도록 HTML5의 <code><a href="/ko/DOM/element.classList" title="ko/DOM/element.classList">element.classList</a></code>이 기술 지원되었습니다.</li> + <li>문서에 즉시 생성되는 이벤트에 응하는 <code><a href="/ko/DOM/document.onreadystatechange" title="ko/DOM/document.onreadystatechange">document.onreadystatechange</a></code>와 <code><a href="/ko/DOM/document.readyState" title="ko/DOM/document.readyState">document.readyState</a></code>가 기술 지원되었습니다.</li> + <li>표시에 관련하는 속성으로 지정한 색은 HTML5의 사양에 따라서 해석됩니다.</li> +</ul> + +<h2 id="HTML5의_일부로서_포함된_기술">HTML5의 일부로서 포함된 기술</h2> + +<p>아래 기술들은 "HTML5"의 광의의 영역에 포함되어 있습니다만 W3C의 HTML5 사양에 없는 것들입니다.</p> + +<ul> + <li><a href="/ko/WebGL" title="ko/WebGL">WebGL</a></li> + <li><a href="/ko/DOM/FileReader" title="ko/DOM/FileReader">FileReader</a></li> + <li><a href="/ko/DOM/XMLHttpRequest" title="ko/XMLHttpRequest">XMLHttpRequest</a></li> + <li><a href="/ko/DOM/Locating_DOM_elements_using_selectors" title="ko/DOM/Locating DOM elements using selectors">querySelector(All)</a></li> + <li><a href="/Ja/Using_geolocation" title="ko/Using geolocation">Geolocation</a></li> + <li><a href="/ko/JavaScript/ECMAScript_5_support_in_Mozilla" title="ko/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript5</a></li> + <li><a href="/ko/CSS/CSS3" title="CSS3">CSS3</a></li> + <li><a href="/ko/XBL2_specification_(external)" title="ko/XBL2 specification (external)">XBL2</a></li> + <li><a href="/ko/DOM/Using_web_workers" title="ko/Using web workers">Web Workers</a></li> + <li><a href="/ko/WebSockets" title="https://developer.mozilla.org/ko/WebSockets">Web Sockets</a></li> + <li>JavaScript의 고속화</li> +</ul> + +<h2 id="관련_문서">관련 문서</h2> + +<p>웹 발자에게 영향이 있는 Firefox 출시 버전에 따른 변경점：</p> + +<ul> + <li><a href="/ko/Firefox_12_for_developers" title="Firefox 12 for developers">Firefox 12</a></li> + <li><a href="/ko/Firefox_11_for_developers" title="Firefox 11 for developers">Firefox 11</a></li> + <li><a href="/ko/Firefox_10_for_developers" title="Firefox 10 for developers">Firefox 10</a></li> + <li><a href="/ko/Firefox_9_for_developers" title="Firefox 9 for developers">Firefox 9</a></li> + <li><a href="/ko/Firefox_8_for_developers" title="Firefox 8 for developers">Firefox 8</a></li> + <li><a href="/ko/Firefox_7_for_developers" title="Firefox 7 for developers">Firefox 7</a></li> + <li><a href="/ko/Firefox_6_for_developers" title="Firefox 6 for developers">Firefox 6</a></li> + <li><a href="/ko/Firefox_5_for_developers" title="Firefox 5 for developers">Firefox 5</a></li> + <li><a href="/ko/Firefox_4_for_developers" rel="internal">Firefox 4 </a></li> + <li><a href="/ko/Firefox_3.6_for_developers" title="ko/Firefox 3.6 for developers">Firefox 3.6 </a></li> + <li><a href="/Ja/Firefox_3.5_for_developers" title="ko/Firefox 3.5 for developers">Firefox 3.5 </a></li> + <li><a href="/ko/Firefox_3_for_developers" title="ko/Firefox 3 for developers">Firefox 3 </a></li> + <li><a href="/ko/Firefox_2_for_developers" title="ko/Firefox 2 for developers">Firefox 2 </a></li> + <li><a href="/ko/Firefox_1.5_for_developers" title="ko/Firefox 1.5 for developers">Firefox 1.5</a></li> +</ul> diff --git a/files/ko/web/html/html5/introduction_to_html5/index.html b/files/ko/web/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..8b9698dc53 --- /dev/null +++ b/files/ko/web/html/html5/introduction_to_html5/index.html @@ -0,0 +1,40 @@ +--- +title: HTML5 소개 +slug: Web/HTML/HTML5/Introduction_to_HTML5 +tags: + - HTML5 + - 웹개발 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a>는 HTML 표준의 가장 새로운 버전입니다. HTML5를 통해 리치 미디어의 기술 지원 뿐만이 아니라, 사용자 및 로컬 데이터를 웹 서버 사이에 보다 간편하면서도 효과적으로 교환할 수 있는 웹 애플리케이션을 개발하기 위한 확장 기술 지원를 제공하는 새로운 기능도 제공됩니다.</p> + +<p>HTML5는 아직 표준 제정 단계에 있기 때문에 현재 사양에 대한 변경이 있을 것입니다. 따라서 모든 브라우저에 HTML5 기능 모든 것이 기술 지원되어 있는 것은 아닙니다. 하지만, Gecko (그리고 이를 사용하는 Firefox)에는 훌륭하게 HTML5의 최초 단계 기술 지원이 포함되어 있어 새로운 기능에 대한 대처를 계속하고 있습니다. Gecko는 버전 1.8.1에서 HTML5의 기능을 기술 지원하기 시작했습니다. <a href="/ko/HTML/HTML5" title="ko/HTML/HTML5">HTML5의 메인 페이지</a>에 Gecko가 기술 지원하고 있는 HTML5기능 목록이 있습니다. 여러 브라우저의 기술 지원 상황의 상세한 정보에 대해서는 <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a> 웹 사이트를 참조해 주십시오.</p> + +<h2 id="HTML5_DOCTYPE">HTML5 DOCTYPE</h2> + +<p>HTML5의 DOCTYPE는 매우 간단합니다. HTML 콘텐트로 HTML5를 사용하는 것을 나타내려면 단순하게 아래와 같이 합니다：</p> + +<pre><!DOCTYPE html> +</pre> + +<p>이 DOCTYPE은 현재 HTML5를 기술 지원하고 있지 않는 브라우저조차, HTML의 호환성을 유지함과 동시에 HTML5의 규격 대로 기능이 지원되지 않더라도 신기능을 무시하는 것을 의미하는 표준 모드로 전환합니다.</p> + +<p>이것은 이전의 doctype들 보다 훨씬 간단하고 짧으며, 기억하기 쉽고, 다운로드 받아야 하는 바이트의 양을 줄여줍니다.</p> + +<h2 id="<meta_charset>으로_문자셋_정의하기"><code><meta charset>으로 문자셋 정의하기</code></h2> + +<p>보통 문서의 처음에는 사용된 문자셋을 정의합니다. 이전 버전의 HTML에서는 매우 복잡한 {{HTMLElement("meta")}} 엘리먼트를 통해서 문자셋을 정의했습니다. 이제는 이렇게 간단해졌습니다.</p> + +<pre class="brush:html; line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> + +<p><code>이것을 {{HTMLElement("head") }} 뒤에 가져다 놓으세요. 몇몇 브라우저는 HTML에 기대했던것과 다른 문자셋이 정의되어 있으면 문서를 다시 해석합니다. 또한, 여러분이 현재 다른 문자셋을 사용하고 있다면 UTF-8로 여러분 웹 페이지의 문자셋을 변경하는것을 추천합니다. 이것이 여러 스크립트를 사용한 문서의 문자 처리를 단순화시켜줍니다.</code></p> + +<p><code>HTML5는 ASCII와 호환되며 적어도 8비트의 크기를 가지는 문자셋만을 지원합니다. 이렇게 함으로서 보안을 강화하고 특정형태의 공격을 방지할수 있습니다.</code></p> + +<h2 id="새로운_HTML5_해석기의_사용">새로운 HTML5 해석기의 사용</h2> + +<p>HTML5에서는 마크업의 의미를 분석하는 해석 룰이 더 정확하게 정의 되었습니다. HTML5가 나오기 전까지는 단지 유효한 마크업의 의미만 정의되었기 때문에 마크업에 작은 에러라도 있을 때 문서를 어떻게 해석해야 할지는 정의되지 않았습니다. 결국 모든 브라우저가 서로 다르게 작동했습니다. 이제는 그렇지 않습니다. 이제 마크업에 에러가 있을 때는 모든 호환 브라우저가 똑같이 반응해야 합니다.</p> + +<p>이 요구사항이 웹 개발자들의 삶을 꽤 편하게 해줍니다. 이제 모든 최신 브라우저가 HTML5의 해석 룰을 따르지만 HTML5-비호환 브라우저들도 여전히 사용되고 있습니다. 유효한 마크업을 사용하면 읽기 편하고 유지보수에 좋을 뿐 아니라, 여러 오래된 브라우저에서 호환되지 않을 가능성을 매우 줄여주기 때문에 이를 매우 추천합니다.</p> + +<p>걱정하지 마세요 — 여러분 웹사이트를 손 댈 필요는 없습니다 — 웹브라우저 개발자들이 여러분을 위해 모두 준비해놓았습니다!</p> diff --git a/files/ko/web/html/html5_문서의_섹션과_윤곽/index.html b/files/ko/web/html/html5_문서의_섹션과_윤곽/index.html new file mode 100644 index 0000000000..87cae41ebd --- /dev/null +++ b/files/ko/web/html/html5_문서의_섹션과_윤곽/index.html @@ -0,0 +1,367 @@ +--- +title: HTML 구획과 개요 사용하기 +slug: Web/HTML/HTML5_문서의_섹션과_윤곽 +tags: + - HTML + - HTML5 +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +<div>{{HTMLSidebar}}</div> + +<div class="warning"> +<p><strong>중요</strong>: 개요 알고리즘은 W3C의 최종 명세에 포함된 적이 없고, 브라우저와 보조 기술 중 알고리즘을 구현한 경우도 없습니다. 따라서 <a href="https://html.spec.whatwg.org/multipage/sections.html#outline">개요</a> 알고리즘을 사용해 사용자에게 문서 구조를 나타내서는 <strong>안됩니다</strong>. 문서 작성자는 대신 제목 <a href="https://html.spec.whatwg.org/multipage/sections.html#rank">순위</a>(<a href="https://html.spec.whatwg.org/multipage/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1-h6</a>)를 사용해 문서 구조를 나타내는 것이 좋습니다.</p> +</div> + +<p>HTML5 표준 명세서에서는 웹 개발자가 표준화된 의미론적 체계를 가지고 웹 문서의 구조를 표현할 수 있게 해주는 몇 개의 새로운 요소들을 선보였습니다. 이 문서에서는 이 새로운 요소들과 문서의 아웃라인을 의도한 대로 정의하는 법을 설명하고 있습니다.</p> + +<p>예를 들면 <div>는 콘텐츠에 대한 어떠한 내용도 포함하지 않지만, <figcaption>은 콘텐츠에 어떤 내용을 포함하고 있는지를 명확하게 포함합니다.</p> + +<p>새로운 의미론적 요소들은 HTML5에서 웹사이트의 내용을 구분하는 것을 향상시키기 위해 추가되었습니다. 개발자들은 표시된 목적 이외의 용도로 의미론적 요소를 사용하지 않도록 하는 것이 중요합니다.</p> + +<h2 id="HTML4에서의_문서_구조">HTML4에서의 문서 구조</h2> + +<p><span style="line-height: inherit;">문서의 구조, 즉 <code><body></code>와 <code></body></code> 사이에 있는 것의 의미론적 구조는, 페이지 내용을 사용자에게 전달하는 데 중요한 토대가 됩니다.</span> HTML4에선 일종의 섹션과 그 하위 섹션으로 구분하는 개념을 써서 문서의 구조를 표현합니다. 섹션은 HTML 구획({{HTMLElement("div")}})요소와 함께 그 안에 있는 제목을 정의하는 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, 혹은 {{HTMLElement("h6")}})를 써서 정의됩니다. 이런 HTML 구획 요소와 HTML 제목 요소의 관계가 문서의 구조와 그 아웃라인을 결정짓게 됩니다.</p> + +<p>그래서 다음과 같은 마크업은:</p> + +<pre class="brush: xml"><div class="section" id="forest-elephants"> + <h1>둥근귀코끼리</h1> + <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다. + ...섹션 내용 진행 중... + <div class="subsection" id="forest-habitat"> + <h2>서식지</h2> + <p><span style="color: #323333; font-family: courier new;">둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</span> + ...하위 섹션 내용 진행 중... + </div> +</div></pre> + +<p><span style="line-height: inherit;">다음과 같은 문서 아웃라인을 가지게 됩니다:</span></p> + +<pre>1. 둥근귀코끼리 + 1.1 서식지 +</pre> + +<p>새로운 섹션을 정의할 때 {{HTMLElement("div")}} 요소가 꼭 필요한 것은 아닙니다. 단순히 HTML 제목 요소만 있으면 새로운 섹션이 시작됨을 자동으로 암시해 줍니다. 그래서,</p> + +<pre class="brush: xml"><h1>둥근귀코끼리</h1> +<p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다. +...섹션 내용 진행 중... +<h2>서식지</h2> +<p>둥근귀<span style="color: #323333; font-family: courier new;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</span> +...하위 섹션 내용 진행 중... +<h2>먹이</h2> +<h1>몽골 게르빌루스쥐</h1></pre> + +<p>앞의 문서는 다음과 같은 아웃라인을 가지게 됩니다:</p> + +<pre>1. 둥근귀코끼리 + 1.1 서식지 + 1.2 먹이 +2. 몽골 게르빌루스쥐 +</pre> + +<h2 id="HTML5에서_해결한_문제들">HTML5에서 해결한 문제들</h2> + +<p>HTML4에서의 문서 구조에 대한 정의와 여기에 내포된 암묵적인 문서 알고리듬은 매우 투박해서 다음과 같은 많은 문제점을 가지고 있습니다:</p> + +<ol> + <li>의미론적으로 섹션을 정의하는데 {{HTMLElement("div")}}을 사용하면, 특히나 <strong>class</strong> 속성에 어떠한 값도 지정하지 않았을 땐, 문서의 아웃라인을 파악하는 알고리듬을 자동화하는 <font color="#000000">것은 불가능합니다</font>("사용된 {{HTMLElement("div")}}이 문서 아웃라인에 포함되는가, 만약 포함된다면 섹션인가 아니면 하위 섹션인가?" 혹은 "오로지 스타일 목적으로만 쓰인 표상적인 {{HTMLElement("div")}}일 뿐인가?"). 바꾸어 말하면, HTML4 표준 명세서에는 무엇이 섹션이고 어떻게 그 범위를 구분 짓는지에 대해 매우 모호하게 정의해 놓았습니다. 문서의 윤곽을 자동으로 생성하는 작업은 매우 중요하며, 특히나 <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology" title="http://en.wikipedia.org/wiki/Assistive_technology">보조 장비에 사용되는 기술</a>에선 더욱 그러한데, 이를 이용해서 파악된 문서의 구조를 바탕으로 사용자에게 정보를 전달해 주게 된다는 것을 고려하면 그 중요성은 더욱 명확해집니다. HTML5에선 HTML 섹션 요소로 새롭게 {{HTMLElement("section")}} 요소를 도입하면서 문서 아웃라인 알고리듬에서 {{HTMLElement("div")}} 요소의 사용 필요성을 없애버렸습니다.</li> + <li>여러 문서를 하나로 합치는 일은 복잡하고 어려운 일입니다: 주 문서에 어떤 하위 문서를 추가할 때 원래 문서의 아웃라인을 온전히 보전하려면 HTML 제목 요소의 계급을 고쳐야만 하는 일이 생깁니다. HTML5에서 새로 소개된 섹션을 구분 짓는 요소들({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} 그리?고 {{HTMLElement("aside")}})은, 내부에 포함된 제목 요소와 관계없이, 항상 그들이 속한 가장 가까운 상위 섹션의 바로 밑 하위 섹션으로 자리 잡게 되면서 이 문제를 해결하였습니다.</li> + <li>HTML4에선 모든 섹션이 문서 아웃라인에 영향을 주게 됩니다. 하지만 문서?가 언제나 그렇게 선형적이지만은 않지요. 문서에는 가령 광고 표시 문구를 담고 있는 구역이나 설명 문구를 담은 구획처럼 주 내용의 흐름에는 포함되진 않지만, 간접적으로 연관되는 정보를 가진 특별한 섹션이 포함될 수도 있습니다. HTML5에선 이렇게 문서의 주요 내용 윤곽에는 포함되지 않는 {{HTMLElement("aside")}} 요소가 소개되었습니다.</li> + <li>반복되는 얘기지만, HTML4에선 모든 섹션이 문서의 아웃라인에 포함되기 때문에 로고나 메뉴, 문서의 목차, 혹은 저작권 정보나 법률적 고지처럼 특정 문서가 아닌 사이트 전체와 관련된 정보를 포함하는 섹션을 표현할 수가 없었습니다. 이러한 목적으로, HTML5에서 다음과 같은 세 가지 특수 목적의 섹션 요소를 소개하였습니다: 예를 들어 콘텐츠의 목차처럼 링크들의 모음을 감싸줄 때 쓰는 {{HTMLElement("nav")}} 그리고 사이트와 관련된 정보 표시를 위한 {{HTMLElement("footer")}}와 {{HTMLElement("header")}}가 있습니다.</li> +</ol> + +<p>좀 더 포괄적으로 말하면 HTML5에선 문서를 구획하고 이들에게 제목을 부여하는 방법이 좀 더 세밀해지면서, 문서의 아웃라인 파악이 좀 더 예측 가능해지고 덩달아 이를 이용한 브라우저를 통해서 사용자 경험도 향상됩니다.</p> + +<h2 id="HTML5_문서_아웃라인_알고리즘">HTML5 문서 아웃라인 알고리즘</h2> + +<p>HTML이 섹션과 문서 아웃라인을 다루는 방식에 기반한 알고리즘을 생각해 보겠습니다.</p> + +<h3 id="HTML5에서의_섹션_정의">HTML5에서의 섹션 정의</h3> + +<p>우선 {{HTMLElement("body")}} 요소 안에 배치된 콘텐츠는 모두 적어도 하나의 섹션 안에 포함되어 자리하게 됩니다. 그리고 HTML5에서 섹션은 서로 중첩되서 표시될 수도 있습니다. {{HTMLElement("body")}} 요소에 의해 정의된 주요 섹션을 제외하고, 모든 섹션은 명시적으로나 혹은 은연중 자동으로 구분되어 정의될 수 있습니다. 명시적으로 정의되는 섹션은 {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, 그리고 {{HTMLElement("nav")}} 태그들 안에 포함된 콘텐츠입니다.</p> + +<div class="note">각 섹션은 자기들만의 제목 계층을 가질 수 있습니다. 그래서, 중첩된 섹션이라도 {{HTMLElement("h1")}} 제목을 가질 수 있습니다. <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽#HTML5.EC.97.90.EC.84.9C_.EC.A0.9C.EB.AA.A9_.EC.A7.80.EC.A0.95.ED.95.98.EB.8A.94_.EB.B2.95" title="en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">HTML5에서 제목 지정하는 법</a>을 보십시오.</div> + +<p>보기:</p> + +<pre class="brush:xml"><section> + <h1>둥근귀코끼리</h1> + <section> + <h1>소개</h1> + <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p> + </section> + <section> + <h1>서식지</h1> + <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p> + </section> + <aside> + <p>광고 구역</p> + </aside> +</section> +<footer> + <p>(c) 2013 회사 이름</p> +</footer></pre> + +<p>위에 있는 HTML 코드에선 가장 윗 단계에 두 개의 섹션이 정의되었습니다:</p> + +<pre><span style="color: red;"><section> + <h1></span>둥근귀<span style="color: red;">코끼리</h1> + <section> + <h1>소개</h1> + <p>이번 섹션에선, 잘 알려지지 않은 </span>둥근귀<span style="color: red;">코끼리에 관해 알아보겠습니다.</p> + </section> + <section> + <h1>서식지</h1> + <p></span>둥근귀<span style="color: red;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p> + </section> + <aside> + <p>광고 구역</p> + </aside> +</section></span> + +<span style="color: green;"><footer> + <p>(c) 2013 회사 이름?</p> +</footer></span></pre> + +<p>첫 번째 섹션에선 세 개의 하위 섹션이 존재합니다:</p> + +<pre><section> + <h1>둥근귀코끼리</h1> + + <span style="color: red;"><section> + <h1>소개</h1> + <p>이번 섹션에선, 잘 알려지지 않은 </span>둥근귀<span style="color: red;">코끼리에 관해 알아보겠습니다.</p></span> +<span style="color: red;"> </section></span> + + <span style="color: green;"><section> + <h1>서식지</h1> + <p></span>둥근귀<span style="color: green;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p> + </section></span> + + <span style="color: blue;"><aside> + <p>광고 구역</p> + </aside></span> +</section> + +<footer> + <p>(c) 2013 회사 이름</p> +</footer></pre> + +<p>그래서 다음과 같은 구조를 가지게 됩니다:</p> + +<pre>1. 둥근귀코끼리 + 1.1 소개 + 1.2 서식지 + 1.3 광고 구역 (aside) +</pre> + +<h3 id="HTML5에서_제목_지정하는_법">HTML5에서 제목 지정하는 법</h3> + +<p>비록 명시적 HTML 섹션 요소가 문서의 전체 구조를 정해주기는 하지만, 그 아웃라인을 좀 더 명확하게 표현하려면 제목의 사용도 중요합니다. 기본 규칙은 단순합니다: 처음 쓰인 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} 중 하나)가 해당 섹션의 제목으로 정해집니다.</p> + +<p><span style="line-height: inherit;">제목 요소엔 요소 이름에 붙은 숫자를 가지고 <em>계급</em>을 매기는데,</span> {{HTMLElement("h1")}}이 <em>최상위</em> 계급이며 {{HTMLElement("h6")}}는 <em>최하위</em> 계급이 됩니다. 제목 간 계급의 상대적 등급은 오로지 같은 섹션 안에서만 중요해집니다; 이 말은 섹션의 구조가 문서의 아웃라인을 결정짓는 데 중요한 변수로 작용하지만, 섹션 안에서 사용된 제목의 계급은 여기에 아무런 관련이 없다는 얘기입니다. 예를 들어, 아래와 같은 코드를 살펴보면:</p> + +<pre class="brush:xml"><section> + <h1>둥근귀코끼리</h1> + <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다. + ...계속 된 섹션 내용... + <section> + <h2>서식지</h2> + <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다. + ...계속 된 하위 섹션 내용... + </section> +</section> +<section> + <h3>몽골 게르빌루스쥐</h3> + <p>이번 섹션에선, 잘 알려진 몽골 게르빌루스쥐에 관해 알아보겠습니다. + ...계속 된 섹션 내용... +</section></pre> + +<p>이는 다음과 같은 아웃라인을 갖게 됩니다:</p> + +<pre>1. 둥근귀코끼리 + 1.1 서식지 +2. 몽골 게르빌루스쥐</pre> + +<p>여기서 쓰인 제목 요소의 계급(위 보기에선 처음 최상위 섹션의 {{HTMLElement("h1")}}, 그 하위 섹션의 {{HTMLElement("h2")}} 그리고 두 번째 최상위 섹션에서 사용된 {{HTMLElement("h3")}})은 중요하지 않다는 점을 주목하십시오. (명시적으로 정의된 섹션의 제목으로 어떠한 계급을 써도 상관은 없지만, 이 방식이 권장되는 것은 아닙니다.)</p> + +<h3 id="은연중_자동으로_정의되는_섹션">은연중 자동으로 정의되는 섹션</h3> + +<p>HTML5에서 소개된 명시적 섹션 요소들만이 문서의 아웃라인을 정의하는 데 <span style="line-height: inherit;">절대적으로 </span><span style="line-height: inherit;">필요한 요소는 아니므로, 기존 웹에서 지배적으로 사용되는 HTML4와의 호환성을 지키려는 노력의 일환으로, 이들 없이도 섹션을 정의하는 또 하나의 방법이 있습니다. 이를 </span><em>은연중 자동으로 정의되는 섹션</em><span style="line-height: inherit;">이라 하겠습니다</span><span style="line-height: inherit;">.</span></p> + +<p>HTML 제목 요소({{HTMLElement("h1")}}부터 {{HTMLElement("h6")}})는 만약에 그들이 속한 상위 명시적 섹션의 첫 번째 제목으로 사용되지 않았다면, 자동으로 또 하나의 새로운 암묵적인 섹션으로 분류/정의되어 집니다. 이들 암묵적 섹션이 문서 아웃라인에서 위치하게 되는 기준은 기존 이들 제목을 포함하고 있는 상위 섹션에서 사용된 제목과의 상대적 계급에 따라 결정됩니다. 만약 전에 사용된 제목보다 계급이 더 낮다면, 은연중으로 해당 섹션의 하위 섹션으로 자리 잡게 됩니다. 아래 코드를 살펴보면:</p> + +<pre class="brush:xml"><section> + <h1>둥근귀코끼리</h1> + <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다. + ...섹션 내용 진행 중... + <h3 class="implicit subsection">서식지</h3> + <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다. + ...하위 섹션 내용 진행 중... +</section></pre> + +<p>이는 다음과 같은 문서 아웃라인을 갖게 됩니다:</p> + +<pre>1. 둥근귀코끼리 + 1.1 서식지 <em>(</em>h3 요소에 의해 은연중 자동으로 정의됨<em>)</em> +</pre> + +<p>만약에 이전에 사용된 제목과 같은 계급이라면, (명시적으로 정의되었을 수도 있지요!) 바로 이전 섹션과 구분되면서 같은 계급의 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:</p> + +<pre class="brush:xml"><section> + <h1>둥근귀코끼리</h1> + <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다. + ...섹션 내용 진행 중... + <h1 class="implicit section">몽골 게르빌루스쥐</h1> + <p>몽골 게르빌루스쥐는 귀엽고 작은 포유 동물입니다. + ...<span style="color: #323333; font-family: courier new;">섹션 내용</span> 진행 중... +</section></pre> + +<p>위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:</p> + +<pre>1. 둥근귀코끼리 +2. 몽골 게르빌루스쥐 (h1 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐) +</pre> + +<p>만약에 이전에 사용된 제목보다 더 높은 계급의 제목이 사용되었다면, 이전 섹션과 구분되면서 더 높은 제목의 계급을 가진 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:</p> + +<pre class="brush:xml"><body> + <h1>포유 동물</h1> + <h2>고래</h2> + <p>이번 섹션에선, 유영하는 고래에 관해 알아보겠습니다. + ...<span style="color: #323333; font-family: courier new;">섹션 내용</span> 진행 중... + <section> + <h3>둥근귀코끼리</h3> + <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다. + ...<span style="color: #323333; font-family: courier new;">섹션 내용</span> 진행 중... + <h3>몽골 게르빌루스쥐</h3> + <p>몽골 게르빌루스쥐의 무리는 몽골을 훨씬 벗어나는 구역까지 퍼져있습니다. + ...<span style="color: #323333; font-family: courier new;">하위 섹션 내용</span> 진행 중... + <h2>파충류</h2> + <p>파충류는 냉혈 동물입니다. + ...<span style="color: #323333; font-family: courier new;">하위 섹션 내용</span> 진행 중... + </section> +</body></pre> + +<p>위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:</p> + +<pre dir="rtl">1. 포유 동물 + 1.1 고래 <em>(</em>h2 요소에 의해 자동으로 정의됨<em>)</em> + 1.2 둥근귀코끼리 <em>(</em>섹션 요소에 의해 명시적으로 정의됨<em>)</em> + 1.3 몽골 게르빌루스쥐 <em>(</em>h3 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐<em>)</em> +2. 파충류 <em>(</em>h2 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐<em>)</em></pre> + +<p>단순히 써진 제목의 태그들만 살펴본다면, 이것은 결코 예상했던 문서의 아웃라인은 아닐 것입니다. 그래서 작성한 마크업이 다른 사람에게도 쉽게 이해되도록 하려면, 섹션을 구분할 때 명시적 섹션 요소의 태그들을 쓰는 것이 바람직하며, 원래 의도하는 섹션의 중첩 수준을 고려해서 그에 어울리는 제목의 계급을 써야 합니다. 그런데 이것이 꼭 HTML5 명세서에서 요구하는 필수 준수 사항은 아닙니다. 만약에 작성한 문서의 아웃라인을 <span style="line-height: inherit;">브라우저가 </span><span style="line-height: inherit;">원래 의도한 방향으로 표시해 주지 못한다면, 혹시 사용한 제목 요소가 은연중 자동으로 기존 섹션과 구분되게 사용되었는지 확인해 보시기 바랍니다.</span></p> + +<p>제목의 계급은 항상 해당 섹션의 중첩 수준과 일치하도록 쓰라는 규칙의 예외도 있을 수 있는데, 그 중 하나 여러 문서에서 공통으로 재사용되는 섹션의 경우가 있습니다. 예를 들면, 섹션 내용이 어떤 콘텐츠 관리 시스템에 저장되어 실시간으로 여러 다른 저장된 내용과 함께 조합되어 문서에 표시될 때가 있습니다. 이 경우엔, 재사용되는 섹션의 가장 최상위 제목으로 {{HTMLElement("h1")}}부터 시작해서 사용하실 것을 권장합니다. 그러면 재사용되는 섹션의 중첩 수준은 문서의 섹션 계층 중 해당 섹션이 삽입되어 보이는 위치에 따라 자동으로 결정될 것입니다. 이 경우에도 명시적 섹션 태그가 문서 아웃라인을 명확히 하는 데 도움을 줍니다.</p> + +<h3 id="섹션_구분의_근원점"><a name="sectioning_root">섹션 구분의 근원점</a></h3> + +<p>섹션 구분의 근원점은 HTML 요소 중 자기만의 아웃라인을 가질 수는 있지만, 그 안의 섹션이나 제목이 자기 위에 있는 요소의 아웃라인에는 어떠한 영향도 끼치지 않는 것들을 가리킵니다. 논리적으로 따지면 당연히 문서의 섹션을 구분하는데 그 근본이 되는 {{HTMLElement("body")}}가 여기에 포함되고, 이 외에도 종종 외부 콘텐츠를 페이지에 표시하는 데 사용되는 다음과 같은 요소들도 있습니다: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} 마지막으로 {{HTMLElement("td")}}.</p> + +<p>보기:</p> + +<pre class="brush:xml"><section> + <h1>숲 코끼리</h1> + <section> + <h2>소개</h2> + <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p> + </section> + <section> + <h2>서식지</h2> + <p>둥근귀<span style="color: #323333; font-family: courier new;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다. +</span> 과학자들은 "<cite>보르네오 섬의 둥근귀코끼리</cite>"라는 제목의 책에서 다음과 같이 서술하고 있습니다:</p> + <blockquote> + <h1>보르네오 섬</h1> + <p>보르네오 섬에 서식하는 둥근귀코끼리...</p> + </blockquote> + </section> +</section> +</pre> + +<p>위의 보기에선 다음과 같은 문서 아웃라인을 가지게 됩니다:</p> + +<pre>1. 숲 코끼리 + 1.1 소개 + 1.2 서식지</pre> + +<p>이 문서의 아웃라인을 살펴보면 외부 인용 문구로 사용된 {{HTMLElement("blockquote")}} 요소의 경우, 섹션 구분의 근원이 되는 요소 중 하나로서 자기가 포함하고 있는 내부 내용의 아웃라인이 외부의 것과 완전히 차단되면서, 전체 문서의 아웃라인에는 포함되지 않았습니다.</p> + +<h3 id="문서의_아웃라인_밖에_존재하는_섹션">문서의 아웃라인 밖에 존재하는 섹션</h3> + +<p><span style="line-height: inherit;">HTML5에선 웹 문서의 주요 아웃라인에 속하지 않는 섹션을 정의할 수 있도록 하는 새로운 네 가지의 요소들을 소개하고 있습니다:</span></p> + +<ol> + <li>HTML Aside 섹션 요소({{HTMLElement("aside")}})는 주요 문맥을 담은 요소와 어떤 관련성을 지니고 있지만, 어떤 부연 설명 표시 영역이나 광고처럼 문맥의 주요 흐름 줄기엔 속하지 않는 섹션을 나타냅니다. 물론 자기만의 아웃라인을 가지고 있어서, 문서의 주요 아웃라인엔 포함되지 않습니다.</li> + <li>HTML Navigational 섹션 요소({{HTMLElement("nav")}})는 내비게이션 링크들을 포함하고 있는 섹션입니다. 이런 링크들은 문서에 여러 개가 있을 수 있는데, 예를 들어, 콘텐츠 목차와 같은 페이지 내부 링크나 사이트의 내비게이션 링크가 있습니다. 이런 링크는 문서의 주요 문맥과 아웃라인에 포함되지 않아서 보통 처음에는 스크린 리더나 비슷한 보조 기술을 사용하는 장치에서 읽어드리지 않을 수도 있습니다.</li> + <li>HTML Header 섹션 요소({{HTMLElement("header")}})는 페이지의 도입부로서 보통 로고나 사이트 이름 그리고 수평 메뉴를 포함하고 있습니다. 이름에서 풍기는 느낌과는 달리 꼭 페이지 처음에 있을 필요는 없습니다.</li> + <li>HTML Footer 섹션 요소({{HTMLElement("footer")}})는 페이지의 종결부로서 보통 저작권이나 법률적 고지 혹은 약간의 링크들을 포함하고 있습니다. 이것도 역시 이름이 가진 직설적 의미와 달리 페이지 끝에 있을 필요는 없습니다.</li> +</ol> + +<h2 id="섹션을_구분짓는_요소의_주소와_발행_시간">섹션을 구분짓는 요소의 주소와 발행 시간</h2> + +<p>문서를 작성하다 보면 종종 저자의 이름이나 주소와 같은 연락 정보를 공개하고 싶을 때가 있습니다. HTML4에선 이런 목적으로 {{HTMLElement("address")}} 요소가 쓰였는데, HTML5에선 여기에 더 보완된 내용이 추가되었습니다.</p> + +<p>가끔 문서에는 여러 명의 저자가 작성한 여러 개의 섹션이 포함되어 있을 수도 있습니다. 메인 페이지의 저자와 다른 또 다른 사람?이 작성한 콘텐츠가 포함된 섹션은 {{HTMLElement("article")}} 요소를 써서 정의합니다. 이렇게 하면, {{HTMLElement("address")}} 요소는 지정?된 위치에 따라 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}}과 연관된 정보로 표시됩니다.</p> + +<p>비슷하게, HTML5의 새 {{HTMLElement("time")}} 요소에 pubdate boolean 속성이 지정되었다면 문서 전체의 발행 날짜를 표시해 주는데, article에서처럼, 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}} 과 연관된 정보로 표시됩니다.</p> + +<h2 id="HTML5_미지원_브라우저에서_HTML5_요소를_사용하는_법">HTML5 미지원 브라우저에서 HTML5 요소를 사용하는 법</h2> + +<p>섹션과 제목 요소들은 대부분의 HTML5 미지원 브라우저에서도 정상적으로 사용하실 수 있습니다. 지원하진 않더라도, 어떤 특별한 DOM 인터페이스가 필요한 것은 아니고 단지 인식하지 못하는 요소는 기본적으로 <code>display:inline</code> 으로 표시되기 때문에 다음과 같이 특별한 CSS 스타일을 지정해 주어야 합니다:</p> + +<pre class="brush: css">section, article, aside, footer, header, nav, hgroup { + display:block; +} +</pre> + +<p>물론 웹 개발자가 이들의 스타일을 달리 표시해 줄 수도 있는데, HTML5 미지원 브라우저에선 해당 요소들의 기본 표시 스타일이 원래의 정상적인 것과 다르다는 점을 명심해야 합니다. 또한, 여기엔 {{HTMLElement("time")}} 요소가 포함되지 않았는데, 그 이유는 기본 스타일이 HTML5 미지원 브라우저의 것과 HTML5 호환 브라우저의 것과 서로 같기 때문입니다.</p> + +<div>그런데 이 방법도 약간의 제약이 있어서, 어떤 브라우저에선 지원하지 않은 요소의 스타일을 애초에 지정할 수도 없게 되어 있습니다. Internet Explorer(버전 8 이하)가 여기에 해당하는데, 제대로 스타일을 지정해 주려면 다음과 같은 스크립트가 필요합니다:</div> + +<pre class="brush:xml"><!--[if lt IE 9]> + <script> + document.createElement("header" ); + document.createElement("footer" ); + document.createElement("section"); + document.createElement("aside" ); + document.createElement("nav" ); + document.createElement("article"); + document.createElement("hgroup" ); + document.createElement("time" ); + </script> +<![endif]--></pre> + +<p>이 스크립트가 하는 일은, Internet Explorer(8 혹은 그 이하)일 경우, HTML5의 섹션 요소와 제목 요소가 제대로 표시될 수 있도록 실행됩니다. 여기에 언급된 요소들은 전체 페이지의 구조를 정의하는 데 필요한 아주 중요한 요소이기 때문에, 만약에 스크립트의 힘을 빌리지 않다면 표시조차 되지 않게 되면서 문제 될 수 있습니다. 그래서 이런 때를 대비해서 명시적으로 다음과 같은 {{HTMLElement("noscript")}} 요소도 추가되어야 합니다:</p> + +<pre class="brush:xml"><noscript> + <strong>주의 !</strong> + 귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다. + 그런데 안타깝게도 귀하의 브라우저에선 스크립트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다. +</noscript></pre> + +<p>그래서 결국, Internet Explorer(8 혹은 그 이하)처럼 HTML5 미지원 브라우저에서도 HTML5의 섹션과 제목 요소를 제대로 지원하도록 하고, 또 만약을 대비해 이런 미지원 브라우저에서 스크립팅 기능이 꺼져있을 때를 대비해서 다음과 같은 코드를 추가해 줘야 합니다:</p> + +<pre class="brush:xml"><!--[if lt IE 9]> + <script> + document.createElement("header" ); + document.createElement("footer" ); + document.createElement("section"); + document.createElement("aside" ); + document.createElement("nav" ); + document.createElement("article"); + document.createElement("hgroup" ); + document.createElement("time" ); + </script> + <noscript> + <strong>주의 !</strong> + 귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다. + 그런데 안타깝게도 귀하의 브라우저에선 스크리트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다. + <code></noscript> +</code><![endif]--> +</pre> + +<h2 id="맺음말">맺음말</h2> + +<p>HTML5에서 소개된 새로운 섹션과 제목 요소는 웹 문서의 구조와 아웃라인을 표준화된 방법으로 작성할 수 있게 도와줍니다. 또한, HTML5를 지원하는 브라우저 사용자나 페이지 내용을 제대로 전달하는데 그 구조 파악이 중요한, 예를 들어 보조 지원 기술의 도움으로 페이지의 내용을 파악하는, 사용자 모두에게 커다란 이득을 안겨다 줍니다. 새로 소개된 의미가 담긴 요소들은, 약간의 노력만 기울인다면, 사용이 간편해서 HTML5 미지원 브라우저에서도 온전히 사용하실 수 있습니다. 그러므로 아무런 제약 없이 마음 놓고 사용하시기 바랍니다.</p> diff --git a/files/ko/web/html/index.html b/files/ko/web/html/index.html new file mode 100644 index 0000000000..e3ae601efc --- /dev/null +++ b/files/ko/web/html/index.html @@ -0,0 +1,117 @@ +--- +title: 'HTML: Hypertext Markup Language' +slug: Web/HTML +tags: + - HTML + - HTML 강의 + - HTML 강좌 + - HTML 튜토리얼 + - HTML 프로그래밍 + - HTML5 + - Landing + - Web + - 'l10n:priority' +translation_of: Web/HTML +--- +<div>{{HTMLSidebar}}</div> + +<p><span class="seoSummary"><strong>HTML</strong>(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소입니다. HTML은 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 말고도 웹 페이지의 외형과 표현을 서술하고(<a href="/ko/docs/Web/CSS">CSS</a>), 기능과 동작을 서술하는(<a href="/ko/docs/Web/JavaScript">JavaScript</a>) 기술도 있습니다.</span></p> + +<p>"Hypertext(하이퍼텍스트)"란 웹 페이지를 다른 페이지로 연결하는 링크를 말합니다. 링크는 웹의 근본적인 속성입니다. 인터넷에 자료를 올리고 다른 사람이 만든 페이지로 링크함으로써, 여러분은 월드 와이드 웹 세계의 능동적인 일원이 될 수 있습니다.</p> + +<p>HTML은 웹 브라우저에 표시되는 글, 이미지 등의 다양한 컨텐츠를 표시하기 위해 "마크업"을 사용합니다. HTML 마크업은 {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}} 처럼, 수많은 "요소"를 사용합니다.</p> + +<p>HTML 요소는 문서의 다른 텍스트와 "태그"로 구분합니다. 태그는 "<code><</code>", 태그 이름, "<code>></code>"로 이루어집니다. 태그 안의 요소명은 대소문자를 구분하지 않습니다. 즉, 대문자, 소문자, 아니면 섞어서도 작성할 수 있습니다. 예를 들어 <code><title></code>요소는 <code><Title></code>, <code><TITLE></code>, 그 외 기타 가능한 모든 방법으로 작성할 수 있습니다.</p> + +<p>아래에서 HTML을 더 깊이 배워보세요.</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li><span>HTML 소개</span> + + <p>웹 개발을 새로 시작하는 분이라면 <a href="/ko/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML 기초</a>를 읽고, HTML이 무엇인지와 어떻게 사용하는지 배워보세요.</p> + </li> + <li><span>HTML 자습서</span> + <p>HTML 사용법, 자습서, 완전한 예제 등은 <a href="/ko/docs/Learn/HTML">HTML 익힘장</a>에서 확인할 수 있습니다.</p> + </li> + <li><span>HTML 참고서</span> + <p><a href="/ko/docs/Web/HTML/Reference">방대한 참고서</a>는 HTML을 구성하는 요소와 속성에 대한 자세한 내용을 담고 있습니다.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Tools" id="초보자_자습서">초보자 자습서</h2> + +<p>MDN의 <a href="/ko/docs/Learn/HTML">HTML 익힘장</a>은 HTML을 가장 기초부터 알려주는 여러 개의 장을 가지고 있습니다. 이전 경험은 필요하지 않습니다.</p> + +<dl> + <dt><a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a></dt> + <dd>이 모듈은 기초를 다져서 당신이 HTML을 텍스트에 적용하거나, 하이퍼링크를 작성하거나, HTML을 이용해 웹 페이지를 만드는 등 중요한 개념과 구문에 익숙해지도록 합니다.</dd> + <dt><a href="/ko/docs/Learn/HTML/Multimedia_and_embedding">멀티미디어와 임베딩</a></dt> + <dd>이 모듈은 HTML을 사용해 웹페이지에 멀티미디어를 삽입하는 방법을 살펴봅니다. 이미지를 삽입하는 여러 방법과 오디오, 비디오, 혹은 다른 웹 페이지 자체를 삽입하는 방법을 설명합니다.</dd> + <dt><a href="/ko/docs/Learn/HTML/Tables">HTML 표</a></dt> + <dd>표 형태의 데이터를 이해하기 쉽고 접근성 높은 방식으로 웹페이지에 표현하는 것은 어려울 수 있습니다. 이 모듈은 기본적은 표 마크업과 캡션, 요약을 사용하는 복잡한 요소들을 다룹니다.</dd> + <dt><a href="/ko/docs/Learn/HTML/Forms">HTML 양식</a></dt> + <dd>양식은 웹의 매우 중요한 부분으로, 회원가입과 로그인, 피드백 전송, 상품 구매 등등 웹 사이트와 상호작용에 필요한 많은 기능을 제공합니다. 이 모듈은 양식의 클라이언트 사이드/프론트 엔드 부분을 만들며 시작합니다.</dd> + <dt><a href="/ko/docs/Learn/HTML/Howto">HTML로 일반적인 문제 해결하기</a></dt> + <dd>제목 다루기, 이미지와 비디오 추가하기, 콘텐츠 강조하기, 기본적인 양식 만들기 등 일반적인 문제를 HTML로 해결하는 법을 설명한 문서로의 링크를 제공합니다.</dd> +</dl> + +<h2 id="고급_주제">고급 주제</h2> + +<dl> + <dt class="landingPageList"><a href="/ko/docs/Web/HTML/CORS_enabled_image">CORS 활성화한 이미지</a></dt> + <dd class="landingPageList"> + <p>{{htmlattrxref("crossorigin", "img")}} 속성을 적절한 {{glossary("CORS")}} 헤더와 조합하면 {{htmlelement("img")}} 요소의 이미지를 외부 {{glossary("origin", "출처")}}에서 가져올 수 있으며, 마치 현재 출처의 이미지인 것처럼 {{htmlelement("canvas")}}에서도 사용할 수 있습니다.</p> + </dd> + <dt class="landingPageList"><a href="/ko/docs/Web/HTML/CORS_settings_attributes">CORS 설정 특성</a></dt> + <dd class="landingPageList"> + <p>{{htmlelement("img")}}, {{htmlelement("video")}} 등 {{glossary("CORS")}}를 지원하는 일부 HTML 요소는 <code>crossorigin</code> 특성(<code>crossOrigin</code> 속성)을 보유하며, 해당 요소가 데이터를 가져올 때의 CORS 요청을 통제할 수 있습니다.</p> + </dd> + <dt class="landingPageList"><a href="/ko/docs/Web/HTML/Preloading_content">rel="preload"로 콘텐츠 미리 불러오기</a></dt> + <dd class="landingPageList"> + <p>{{htmlelement("link")}}요소의 {{htmlattrxref("rel", "link")}} 속성의 프리로드 값을 사용하면, 브라우저의 메인 렌더링 작업이 시작되기 전 페이지 로드 과정 중 라이프사이클 초기에 프리로딩을 시작하고자 하는 리소스를 지정하여 HTML {{htmlelement("head")}}에 선언적인 가져오기 요청을 쓸 수 있습니다. 이것은 리소스들이 더 일찍 이용가능 하도록 만들고 페이지의 첫 번째 렌더를 차단할 가능성을 감소시켜 성능 향상에 이르게 합니다. 이 글은 프리로드(<code>preload</code>) 작동 방법에 대한 기본적인 지침을 제공합니다.</p> + </dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="참고서">참고서</h2> + +<dl> + <dt class="landingPageList"><a href="/ko/docs/Web/HTML/Reference">HTML 참고서</a></dt> + <dd class="landingPageList">HTML은 <strong>요소</strong>로 이루어져있으며, 각각의 요소는 몇 가지 <strong>특성</strong>을 사용해 수정할 수 있습니다. HTML 문서는 서로 <a href="/ko/docs/Web/HTML/Link_types">링크</a>로 연결되어 있습니다.</dd> + <dt class="landingPageList"><a href="/ko/docs/Web/HTML/Element">HTML 요소 참고서</a></dt> + <dd class="landingPageList">모든 {{glossary("HTML")}} {{glossary("Element", "요소")}}의 목록을 살펴보세요.</dd> + <dt class="landingPageList"><a href="/ko/docs/Web/HTML/Attributes">HTML 특성 참고서</a></dt> + <dd class="landingPageList">HTML 요소는 <strong>특성</strong>을 가집니다. 특성은 요소와 요소의 동작 방식을 다양하게 설정하고 수정하는 일련의 추가 값입니다.</dd> + <dt class="landingPageList"><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></dt> + <dd class="landingPageList">전역 특성은 모든 <a href="/ko/docs/Web/HTML/Element">HTML 요소</a>에 지정할 수 있으며, 심지어 표준에 명시되지 않은 요소에도 지정할 수 있습니다. 이는, 비표준 요소를 사용하는 순간 문서가 HTML5를 준수하지 않음에도 불구하고, 비표준 요소 역시 전역 특성을 허용해야 함을 의미합니다.</dd> + <dt class="landingPageList"><a href="/ko/docs/Web/HTML/Inline_elements">인라인 요소</a>와 <a href="/ko/docs/Web/HTML/Block-level_elements">블록 레벨 요소</a></dt> + <dd class="landingPageList">HTML의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다. 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다.</dd> + <dt class="landingPageList"><a href="/ko/docs/Web/HTML/Link_types">링크 유형</a></dt> + <dd class="landingPageList">HTML에선 두 문서간의 관계를 명시할 때 여러 링크 유형을 사용합니다. 유형을 설정할 수 있는 링크 타입 요소들은 <code><a></code>, <code><area></code>, 또는 <code><link></code>가 있습니다.</dd> + <dt class="landingPageList"><a href="/ko/docs/Web/Media/Formats">HTML 미디어 유형과 형식 안내서</a></dt> + <dd class="landingPageList"> + <p>{{HTMLElement("audio")}}와 {{HTMLElement("video")}} 요소를 통해 외부 프로그램 없이 오디오와 비디오 미디어를 재생할 수 있습니다.</p> + </dd> + <dt class="landingPageList"><a href="/ko/docs/Web/Guide/HTML/Content_categories">HTML 콘텐츠 카테고리</a></dt> + <dd class="landingPageList"> + <p>HTML 요소는 공통 특성을 공유하는 요소끼리 묶는 콘텐츠 카테고리 한 가지 이상에 속할 수 있습니다. 콘텐츠 카테고리는 느슨한 관계로 서로 간에 어떤 관계를 형성하지는 않지만, 카테고리에서 공유하는 동작이나 관련 규칙을 정의하고 설명할 때, 특히 복잡한 세부사항을 포함할 때는 더욱 도움이 됩니다.</p> + </dd> + <dt class="landingPageList"><a href="/ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">호환성 모드와 표준 모드</a></dt> + <dd class="landingPageList">호환성 모드와 표준 모드에 대한 역사적인 정보.</dd> +</dl> + +<h2 class="landingPageList" id="관련_주제">관련 주제</h2> + +<dl> + <dt><a href="/ko/docs/Web/HTML/Applying_color">CSS를 사용해 HTML 요소에 색 입히기</a></dt> + <dd> + <p>이 문서는 HTML 문서의 어떤 부분에 색을 적용할 수 있는지와, 이 때 사용할 수 있는 CSS 속성을 나열합니다. 예제와 함께 각종 도구로의 링크도 제공합니다.</p> + </dd> +</dl> +</div> +</div> +<span class="alllinks"><a href="/ko/docs/tag/HTML">모두 보기...</a></span></section> diff --git a/files/ko/web/html/index/index.html b/files/ko/web/html/index/index.html new file mode 100644 index 0000000000..dde859c07d --- /dev/null +++ b/files/ko/web/html/index/index.html @@ -0,0 +1,10 @@ +--- +title: HTML documentation index +slug: Web/HTML/Index +tags: + - HTML + - Index + - MDN Meta +translation_of: Web/HTML/Index +--- +<p>{{Index("/ko/docs/Web/HTML")}} <span class="seoSummary">전체 HTML 문서의 목록입니다.</span></p> diff --git a/files/ko/web/html/inline_elements/index.html b/files/ko/web/html/inline_elements/index.html new file mode 100644 index 0000000000..b5e0219a01 --- /dev/null +++ b/files/ko/web/html/inline_elements/index.html @@ -0,0 +1,169 @@ +--- +title: 인라인 요소 +slug: Web/HTML/Inline_elements +tags: + - Beginner + - Development + - Guide + - HTML + - Layout + - Web +translation_of: Web/HTML/Inline_elements +--- +<p>HTML(<strong>Hypertext Markup Language</strong>)의 요소는 역사적으로 <a href="/ko/docs/HTML/Block-level_elements">"블록 레벨" 요소</a>와 "인라인" 요소로 분류됐습니다. 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다. 이 글은 인라인 요소란 무엇인지와 블록 레벨 요소와의 차이점을 살펴봅니다.</p> + +<div class="blockIndicator note"> +<p>인라인 요소는 새로운 줄을 만들지 않으며 필요한 너비만 차지합니다.</p> +</div> + +<h2 id="인라인_vs._블록_레벨_요소">인라인 vs. 블록 레벨 요소</h2> + +<p>간단한 예제만으로 쉽게 설명할 수 있습니다. 우선 다음 CSS를 사용하겠습니다.</p> + +<pre class="brush: css">.highlight { + background-color: #ee3; +} +</pre> + +<h3 id="인라인">인라인</h3> + +<p>인라인 요소를 보이는 다음 예제를 확인해주세요.</p> + +<pre class="brush: html"><div>다음 span은 <span class="highlight">인라인 요소</span>로, +영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.</div></pre> + +<p>이 예제에서 {{HTMLElement("div")}}는 텍스트를 가진 블록 레벨 요소입니다. 그 텍스트 안에는 인라인 요소인 {{HTMLElement("span")}}이 존재합니다. <code><span></code>은 인라인이기 때문에 전체 문단이 끊기지 않고 하나로 그려집니다. 결과도 확인해보세요.</p> + +<p>{{EmbedLiveSample("인라인", 600, 80)}}</p> + +<div class="hidden"> +<p>For looks, this CSS (not displayed in standard reading mode) is also used:</p> + +<pre class="brush: css">body { + margin: 0; + padding: 4px; + border: 1px solid #333; +} + +.highlight { + background-color:#ee3; +}</pre> +</div> + +<h3 id=".EC.97.98.EB.A6.AC.EB.A8.BC.ED.8A.B8" name=".EC.97.98.EB.A6.AC.EB.A8.BC.ED.8A.B8">블록 레벨</h3> + +<p>이제 아까 만든 <code><span></code>을 마치 {{htmlelement("p")}}처럼 블록 레벨인 요소로 바꿔보겠습니다.</p> + +<pre class="brush: html"><div>다음 p는 <p class="highlight">블록 레벨 요소</p>로, +영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.</pre> + +<div class="hidden"> +<p>The CSS (not displayed in standard reading mode) is also used:</p> + +<pre class="brush: css">body { + margin: 0; + padding: 4px; + border: 1px solid #333; +} + +.highlight { + background-color:#ee3; +}</pre> +</div> + +<p>아까와 같은 CSS를 사용했을 때, 결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("블록_레벨", 600, 150)}}</p> + +<p>차이가 보이나요? <code><p></code> 요소는 텍스트의 레이아웃을 완전히 바꿔, <code><p></code> 이전과 자기 자신의 텍스트, 그리고 <code><p></code> 이후의 세 부분으로 나눠버렸습니다.</p> + +<h3 id="요소_레벨_변경">요소 레벨 변경</h3> + +<p>CSS {{cssxref("display")}} 속성을 사용해 요소의 시각적 표현 레벨을 바꿀 수 있습니다. 예컨대 <code>display</code>의 값을 <code>inline</code>에서 <code>block</code>으로 바꾸면, 브라우저에게 이 인라인 요소를 인라인 박스 대신 블록 박스를 사용해 그리라고 알리는 것입니다. 그러나 이 방법을 사용해도 요소의 카테고리와 콘텐츠 모델은 바뀌지 않습니다. 즉 <code><span></code> 요소의 <code>display</code>를 <code>block</code>으로 지정한다 해도, 그 안에 <code><div></code>를 넣을 수는 없습니다.</p> + +<h2 id="개념적_차이">개념적 차이</h2> + +<p>다음은 인라인과 블록 레벨 요소의 간략한 개념적 차이입니다.</p> + +<dl> + <dt>콘텐츠 모델</dt> + <dd>보통 인라인 요소는 데이터와 다른 인라인 요소만 포함할 수 있으며, 블록 요소는 포함할 수 없습니다.</dd> + <dt>서식</dt> + <dd>기본적으로, 인라인 요소는 문서 흐름에서 줄바꿈을 강제하지 않습니다. 반면 블록 요소는 줄바꿈을 유발합니다. (물론 언제나처럼 CSS로 바꿀 수 있습니다)</dd> +</dl> + +<h2 id="요소_목록">요소 목록</h2> + +<p>다음은 기본값이 인라인인 요소의 목록입니다. (사실 HTML5는 블록과 인라인 요소를 정의하지 않습니다. <a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a>를 사용하세요)</p> + +<div class="threecolumns"> +<dl> + <dt>{{ HTMLElement("a") }}</dt> + <dt>{{ HTMLElement("abbr") }}</dt> + <dt>{{ HTMLElement("acronym") }}</dt> + <dt>{{ HTMLElement("audio") }} (컨트롤이 보이면)</dt> + <dt>{{ HTMLElement("b") }}</dt> + <dt>{{ HTMLElement("bdi") }}</dt> + <dt>{{ HTMLElement("bdo") }}</dt> + <dt>{{ HTMLElement("big") }}</dt> + <dt>{{ HTMLElement("br") }}</dt> + <dt>{{ HTMLElement("button") }}</dt> + <dt>{{ HTMLElement("canvas") }}</dt> + <dt>{{ HTMLElement("cite") }}</dt> + <dt>{{ HTMLElement("code") }}</dt> + <dt>{{ HTMLElement("data") }}</dt> + <dt>{{ HTMLElement("datalist") }}</dt> + <dt>{{ HTMLElement("del") }}</dt> + <dt>{{ HTMLElement("dfn") }}</dt> + <dt>{{ HTMLElement("em") }}</dt> + <dt>{{ HTMLElement("embed") }}</dt> + <dt>{{ HTMLElement("i") }}</dt> + <dt>{{ HTMLElement("iframe") }}</dt> + <dt>{{ HTMLElement("img") }}</dt> + <dt>{{ HTMLElement("input") }}</dt> + <dt>{{ HTMLElement("ins") }}</dt> + <dt>{{ HTMLElement("kbd") }}</dt> + <dt>{{ HTMLElement("label") }}</dt> + <dt>{{ HTMLElement("map") }}</dt> + <dt>{{ HTMLElement("mark") }}</dt> + <dt>{{ HTMLElement("meter") }}</dt> + <dt>{{ HTMLElement("noscript") }}</dt> + <dt>{{ HTMLElement("object") }}</dt> + <dt>{{ HTMLElement("output") }}</dt> + <dt>{{ HTMLElement("picture") }}</dt> + <dt>{{ HTMLElement("progress") }}</dt> + <dt>{{ HTMLElement("q") }}</dt> + <dt>{{ HTMLElement("ruby") }}</dt> + <dt>{{ HTMLElement("s") }}</dt> + <dt>{{ HTMLElement("samp") }}</dt> + <dt>{{ HTMLElement("script") }}</dt> + <dt>{{ HTMLElement("select") }}</dt> + <dt>{{ HTMLElement("slot") }}</dt> + <dt>{{ HTMLElement("small") }}</dt> + <dt>{{ HTMLElement("span") }}</dt> + <dt>{{ HTMLElement("strong") }}</dt> + <dt>{{ HTMLElement("sub") }}</dt> + <dt>{{ HTMLElement("sup") }}</dt> + <dt>{{ HTMLElement("svg") }}</dt> + <dt>{{ HTMLElement("template") }}</dt> + <dt>{{ HTMLElement("textarea") }}</dt> + <dt>{{ HTMLElement("time") }}</dt> + <dt>{{ HTMLElement("u") }}</dt> + <dt>{{ HTMLElement("tt") }}</dt> + <dt>{{ HTMLElement("var") }}</dt> + <dt>{{ HTMLElement("video") }}</dt> + <dt>{{ HTMLElement("wbr") }}</dt> +</dl> +</div> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/HTML/Block-level_elements">블록 레벨 요소</a></li> + <li><a href="/ko/docs/Web/HTML/Element">HTML 요소 참고서</a></li> + <li>{{cssxref("display")}}</li> + <li><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">일반 플로우에서의 블록과 인라인 레이아웃</a></li> +</ul> + +<p>{{QuickLinksWithSubpages("/ko/docs/Web/HTML/")}}</p> diff --git a/files/ko/web/html/link_types/index.html b/files/ko/web/html/link_types/index.html new file mode 100644 index 0000000000..ab23f9b35e --- /dev/null +++ b/files/ko/web/html/link_types/index.html @@ -0,0 +1,332 @@ +--- +title: Link types +slug: Web/HTML/Link_types +tags: + - Attribute + - HTML + - Link + - Link types + - Reference +translation_of: Web/HTML/Link_types +--- +<div>{{HTMLSidebar}}</div> + +<p>다음 표에 나열된 링크 타입 속성은 HTML에서 두 문서간의 관계를 명시할 때 사용합니다. 이 때 {{HTMLElement("a")}}, {{HTMLElement("area")}}, 또는 {{HTMLElement("link")}} 요소를 사용해 한 쪽에서 다른 쪽으로 향하는 연결고리를 만듭니다.</p> + +<table class="standard-table"> + <caption>링크 타입 및 HTML에서의 중요도</caption> + <thead> + <tr> + <th scope="col">링크 타입</th> + <th scope="col">설명</th> + <th scope="col" style="width: 12em;">적용 가능한 요소</th> + <th scope="col">적용 불가능한 요소</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>alternate</code></td> + <td> + <ul> + <li>만약 요소가 {{HTMLElement("link")}}이고, {{htmlattrxref("rel", "link")}} 속성값에 <code>stylesheet</code>라는 값이 들어 있다면, 링크가 <a href="/en-US/docs/Alternative_style_sheets">대체 스타일 시트</a>로 정의된 것입니다. 이 경우, {{htmlattrxref("title", "link")}} 속성은 반드시 존재해야 하고 빈 문자열 값을 가지고 있으면 안됩니다.</li> + <li>만약 {{htmlattrxref("type","link")}}의 값이 <code>application/rss+xml</code>이거나 <code>application/atom+xml</code>로 설정되어 있다면, 링크를 <a href="/en-US/docs/RSS/Getting_Started/Syndicating">syndication feed</a>(기고 알림)로 정의된 것입니다. 페이지에서 정의된 것 중 첫번째 것이 기본값입니다.</li> + <li>위의 두 경우를 제외하면, 링크는 아래 대체 페이지 항목 중 한가지로 정의된 것입니다. + <ul> + <li>휴대용 기기와 같은 다른 매체에서 보여질 페이지({{htmlattrxref("media","link")}} 속성이 정의되어 있을 시)</li> + <li>외국어로 된 페이지({{htmlattrxref("hreflang","link")}} 속성이 정의되어 있을 시)</li> + <li>PDF처럼 다른 형식으로 된 페이지({{htmlattrxref("type","link")}} 속성이 정의되어 있을 시)</li> + <li>위 세가지 속성 중 2개 이상 같이 쓰인 페이지</li> + </ul> + </li> + </ul> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>없음.</em></td> + </tr> + <tr> + <td><code>archives</code> {{obsolete_inline}}</td> + <td> + <p>'이 요소는 본인 페이지에 대한 아카이브 링크를 포함하고 있는 문서로 연결해 주는 하이퍼링크임'이라고 정의하는 값입니다. 예를 들어, 이 속성값을 사용해 블로그 대문(entry)에서 월별 인덱스 페이지로 이동할 수 있는 링크를 걸 수 있습니다.<br> + <br> + <strong>알아두기:</strong> <code>archive</code> 값 하나만 써도 인식이 되기는 하나, 올바른 사용법이 아니므로 이런 식의 사용은 하지 말아 주십시오.</p> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>없음.</em></td> + </tr> + <tr> + <td><code>author</code></td> + <td> + <p>'저자에 대한 정보 및 저자와 연락 가능한 연락처 정보가 담긴 페이지로 향하는 하이퍼링크임'이라고 정의하는 값입니다.<br> + <br> + <strong>알아두기:</strong> mailto: 하이퍼링크가 동일한 역할을 하긴 하나, 웹 크롤러(robot harvester)에 의해 이 주소로 많은 스팸이 보내질 가능성이 높으므로 사용을 권할만하지는 않습니다. 이이런 경우에는 연락처 폼 요소가 들어있는 페이지로 사용자를 이끄는 편이 더 낫습니다.</p> + + <p>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}} 요소에 {{htmlattrxref("rev", "link")}} 속성을 사용하고 링크 타입을 <code>made</code>로 넣으면 인식이 되기는 하지만 부정확한 값이므로 {{htmlattrxref("rel", "link")}} 속성값을 <code>author</code>로 대체해야 합니다.</p> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>없음.</em></td> + </tr> + <tr> + <td><code>bookmark</code></td> + <td> + <p>'가장 가까운 조상 {{HTMLElement("article")}} 요소에 대해 퍼머링크(<a href="/en-US/docs/Permalink">permalink</a>)를 제공하는 하이퍼링크임'이라고 정의하는 값입니다. 만약 <code>article</code> 요소가 없다면, 링크 요소와 가장 가까운 관계를 맺고 있는 <code><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document">section</a></code>에 대한 퍼머링크로 인식이 됩니다.</p> + + <p>이 속성을 사용하면 (월별 블로그 총결산 페이지라던가 블로그 aggregator 사이트 등에서) 한 페이지 내에 존재하는 여러 편의 글(article)이 존재할 때, 특정한 하나의 글에 대한 즐겨찾기를 표시 해 둘 수 있습니다.</p> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>canonical</code></td> + <td>캐노니컬 링크 요소는 웹 마스터의 {{glossary("SEO")}} 작업 중, 중복 콘텐츠 이슈를 해소하기 위해 웹 페이지의 "공식" 혹은 "선호" URL을 지정할 수 있는 HTML 요소입니다.</td> + <td>{{htmlelement("link")}}</td> + <td> + <p>{{htmlelement("a")}}, {{htmlelement("area")}}, {{htmlelement("form")}}</p> + </td> + </tr> + <tr> + <td><a href="/ko/docs/Web/HTML/Link_types/dns-prefetch"><code>dns-prefetch</code> </a>{{experimental_inline}}</td> + <td>브라우저에게 해당 리소스가 필요하다고 알려줘서 사용자가 링크를 클릭하기 전에 미리 DNS 조회와 프로토콜 핸드셰이크를 수행할 수 있도록 허용합니다.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>external</code></td> + <td>하이퍼링크가 현재 사이트 바깥의 리소스를 가리킴을 나타냅니다. 즉, 이 링크를 따라가면 사이트를 떠나게 됩니다.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>first</code> {{obsolete_inline}}</td> + <td> + <p>하이퍼링크가 현재 페이지가 속한 시퀀스(<em>sequence</em>) 중 첫번째 리소스로 이동하는 링크임을 정의합니다.<br> + <br> + <strong>알아두기:</strong> 이것 말고도 리소스를 같은 시퀀스로 연결할 때 이와 관련있는 링크 타입으로 <code>last</code>, <code>prev</code>, <code>next</code>가 있습니다.</p> + + <p><code>begin</code>이나 <code>start</code>라고 쓰면 인식이 되긴 하나 부정확한 값이므로 사용하지 말아야 합니다.</p> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>help</code></td> + <td> + <ul> + <li>만약 요소가 {{HTMLElement("a")}}거나 {{HTMLElement("area")}}이면, <code>help</code>는 하이퍼링크가 부모와 자손 요소에 대한 추가 도움말을 제공하는 리소스를 가리킴을 나타냅니다.</li> + <li>만약 요소가 {{HTMLElement("link")}}라면 help는 하이퍼링크가 페이지 전체에 대한 추가 도움말을 제공하는 리소스를 가리킴을 나타냅니다.</li> + </ul> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>icon</code></td> + <td> + <p>사용자 인터페이스에서 페이지를 나타낼 때 사용하는 리소스, 보통 아이콘을 정의합니다.<br> + <br> + {{htmlattrxref("media","link")}}, {{htmlattrxref("type","link")}}, {{htmlattrxref("sizes","link")}} 특성을 사용하면 브라우저가 현재 맥락에서 제일 적합한 아이콘을 선택할 수 있습니다. 다수의 적합한 리소스가 존재하는 경우, 브라우저는 트리 순서에서 제일 뒤에 정의된 리소스를 사용합니다. 위의 특성은 단순히 힌트에 불과하며, 추가 조사 결과 더 적합한 리소스를 찾았다면 이전 선택을 스스로 바꿀 수 있습니다.<br> + <br> + <strong>참고:</strong> Apple의 iOS는 Web Clip 또는 시작 화면 플레이스 홀더에 사용할 아이콘을 고를 때, 다른 모바일 브라우저와는 달리 <code>icon</code> 링크 유형은 물론 {{htmlattrxref("sizes","link")}} 특성을 사용하지 않습니다. 대신, 각각에 대응ㅇ하는 비표준 <a class="external external-icon" href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4"><code>apple-touch-icon</code></a>과 <a class="external external-icon" href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6"><code>apple-touch-startup-image</code></a>를 사용합니다.<br> + <br> + 종종 <code>icon</code> 앞에 <code>shortcut</code> 링크 유형이 존재하나, <code>shortcut</code>은 비표준이며 브라우저가 무시하므로 웹 작성자는 <strong>이제 사용해서는 안되는 유형</strong>입니다.</p> + </td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>index</code> {{obsolete_inline}}</td> + <td>Indicates that the page is part of a <em>hierarchical</em> structure and that the hyperlink leads to the top level resource of that structure.<br> + <br> + If one or several <code>up</code> link types are also present, the number of these <code>up</code> indicates the depth of the current page in the hierarchy.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>last</code> {{obsolete_inline}}</td> + <td>Indicates that the hyperlink leads to the <em>last</em> resource of the <em>sequence</em> the current page is in.<br> + <br> + <strong>Note:</strong> Other link types related to linking resources in the same sequence are <code>first</code>, <code>prev</code>, <code>next</code>.<br> + <br> + Although recognized, the synonym <code>end</code> is incorrect and must be avoided.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>license</code></td> + <td>하이퍼링크가 라이선스 정보를 담은 문서를 가리킴을 나타냅니다. {{HTMLElement("head")}} 요소 밖에 위치한 경우, 표준에서는 <code>license</code>에 대해 문서 전체에 대한 것인지, 문서 일부에 대한 것인지 구분하지 않으며 해당 페이지 내의 데이터로만 알 수 있습니다.<br> + <br> + <strong>참고: </strong><code>copyright</code>은 잘못된 동의어로, 브라우저가 인식하긴 하나 사용을 지양해야 합니다.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code><a href="/ko/docs/Web/HTML/Link_types/manifest">manifest</a></code></td> + <td>연결한 파일이 <a href="/ko/docs/Web/Manifest">Web App Manifest</a>임을 나타냅니다.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>next</code></td> + <td>Indicates that the hyperlink leads to the <em>next</em> resource of the <em>sequence</em> the current page is in.<br> + <br> + <strong>Note:</strong> Other link types related to linking resources in the same sequence are <code>first</code>, <code>prev</code>, <code>last</code>.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>nofollow</code></td> + <td>Indicates that the linked document is not endorsed by the author of this one, for example if it has no control over it, if it is a bad example or if there is commercial relationship between the two (sold link). This link type may be used by some search engines that use popularity ranking techniques.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>noopener</code></td> + <td> + <p>해당 속성을 사용하여 링크를 클릭하면, 브라우저 컨텍스트 권한 없이 열립니다. 이 말은 곧, 새 창에서 {{domxref("Window.opener")}} 속성이 <code>null</code> 값을 반환하는것과 같습니다.</p> + + <p>해당 속성은 특히나 신뢰할 수 없는 링크를 열 때 유용합니다. {{domxref("Window.opener")}} 속성을 통한 컨트롤을 막아주고, (더욱 자세한 사항은 링크를 참조하세요. <a href="https://mathiasbynens.github.io/rel-noopener/">About rel=noopener</a>) <code>Referer</code> HTTP 헤더를 사용합니다.</p> + + <p><code>noopener</code> 속성을 사용한다면, target 속성의 값으로 <code>_top</code>, <code>_self</code>, <code>_parent</code> 속성을 제외한 다른 속성은, 새 브라우저 창을 열 것인가에 대하여 <code>_blank</code> 속성으로써 적용됨을 주의하세요.</p> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>noreferrer</code></td> + <td> + <p>Prevents the browser, when navigating to another page, to send this page address, or any other value, as referrer via the <code>Referer:</code> HTTP header.<br> + (In Firefox, before Firefox 37, this worked only in links found in pages. Links clicked in the UI, like "Open in a new tab" via the contextual menu, ignored this).</p> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>pingback</code></td> + <td>Defines an external resource URI to call if one wishes to make a comment or a citation about the webpage. The protocol used to make such a call is defined in the <a href="http://www.hixie.ch/specs/pingback/pingback">Pingback 1.0</a> specification.<br> + <br> + <strong>Note:</strong> if the <code>X-Pingback:</code> HTTP header is also present, it supersedes the {{HTMLElement("link")}} element with this link type.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>preconnect</code> {{experimental_inline}}</td> + <td>Provides a hint to the browser suggesting that it open a connection to the linked web site in advance, without disclosing any private information or downloading any content, so that when the link is followed the linked content can be fetched more quickly.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>prefetch</code></td> + <td>Suggests that the browser fetch the linked resource in advance, as it is likely to be requested by the user. Starting with Firefox 44, the value of the {{htmlattrxref("crossorigin", "link")}} attribute is taken into consideration, making it possible to make anonymous prefetches.<br> + <br> + <strong>Note:</strong> The <a href="/en-US/docs/Link_prefetching_FAQ">Link Prefetch FAQ</a> has details on which links can be prefetched and on alternative methods.</td> + <td>{{HTMLElement("a")}} {{unimplemented_inline}},<br> + {{HTMLElement("area")}} {{unimplemented_inline}},<br> + {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>preload</code></td> + <td>Tells the browser to download a resource because this resource will be needed later during the current navigation. See <a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with rel="preload"</a> for more details.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>prerender</code> {{experimental_inline}}</td> + <td>Suggests that the browser fetch the linked resource in advance, and that it also render the prefetched content offscreen so it can be quickly presented to the user once needed.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>prev</code></td> + <td>Indicates that the hyperlink leads to the <em>preceding</em> resource of the <em>sequence</em> the current page is in.<br> + <br> + <strong>Note:</strong> You can also use the <code>next</code> keyword to specify a link to the next page in the sequence.<br> + <br> + Although recognized, the synonym <code>previous</code> is incorrect and must be avoided.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>search</code></td> + <td>Indicates that the hyperlink references a document whose interface is specially designed for searching in this document, or site, and its resources.<br> + <br> + If the {{htmlattrxref("type","link")}} attribute is set to <code>application/opensearchdescription+xml </code>the resource is an <a href="/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">OpenSearch plugin</a> that can be easily added to the interface of some browsers like Firefox or Internet Explorer.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>stylesheet</code></td> + <td>Defines an external resource to be used as a stylesheet. If the <code>type</code> is not set, the browser should assume it is a <code>text/css</code> stylesheet until further inspection.<br> + <br> + If used in combination with the <code>alternate</code> keyword, it defines an <a href="/en-US/docs/Alternative_style_sheets">alternative style sheet</a>; in that case the {{htmlattrxref("title", "link")}} attribute must be present and not be the empty string.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>sidebar</code> {{non-standard_inline}}</td> + <td>Indicates that the hyperlink leads to a resource that would be better suited for a secondary browsing context, like a <em>sidebar</em>. Browsers, that don't have such a context will ignore this keyword.<br> + <br> + While once part of the HTML specification, this has been removed from the spec and is only implemented by Firefox at this time.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>tag</code></td> + <td>Indicates that the hyperlink refers to a document describing a <em>tag</em> that applies to this document.<br> + <br> + <strong>Note:</strong> This link type should not be set on links to a member of a tag cloud as these do not apply to a single document but to a set of pages.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>up</code> {{obsolete_inline}}</td> + <td>Indicates that the page is part of a <em>hierarchical</em> structure and that the hyperlink leads to the higher level resource of that structure.<br> + <br> + The number of <code>up</code> link types indicates the depth difference between the current page and the linked resource.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td> + <td>{{Spec2('Preload')}}</td> + <td>Added <code>preload</code>.</td> + </tr> + <tr> + <td>{{SpecName('Resource Hints', '#dfn-preconnect', 'preconnect')}}</td> + <td>{{Spec2('Resource Hints')}}</td> + <td>Added <code>dns-prefetch</code>, <code>preconnect</code>, and <code>prerender</code> values.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '<link>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since last snapshot ({{SpecName('HTML WHATWG')}})</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '<link>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Added <code>tag</code>, <code>stylesheet</code>, <code>search</code>, <code>prev</code>, <code>prefetch</code>, <code>noreferrer</code>, <code>nofollow</code>, <code>next</code>, <code>license</code>, <code>icon</code>, <code>help</code>, <code>bookmark</code>, <code>author</code>, and <code>alternate</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.3', '<link>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("html.elements.link.rel")}}</div> diff --git a/files/ko/web/html/preloading_content/index.html b/files/ko/web/html/preloading_content/index.html new file mode 100644 index 0000000000..30e602fbca --- /dev/null +++ b/files/ko/web/html/preloading_content/index.html @@ -0,0 +1,233 @@ +--- +title: Preloading content with rel="preload" +slug: Web/HTML/Preloading_content +translation_of: Web/HTML/Preloading_content +--- +<p class="summary"><span class="seoSummary"> {{htmlelement("link")}}엘리먼트의 {{htmlattrxref("rel", "link")}} 속성에 <code>preload</code>라는 값이 부여되면 페이지 라이프사이클 초기에 필요한 자원에 대해서 HTML {{htmlelement("head")}} 에서 fetch 요청을 선언할 수 있다. 이는 해당 자원의 가용시점을 앞당기고 렌더링의 방해가 일어나지 않게 함으로서 성능을 개선한다. </span></p> + +<p class="summary">이 문서는 <code><link rel="preload"></code> 이 어떻게 동작하는지 기본적인 가이드를 제공한다.</p> + +<h2 id="The_basics">The basics</h2> + +<p>You most commonly use <code><link></code> to load a CSS file to style your page with:</p> + +<pre class="brush: html notranslate"><link rel="stylesheet" href="styles/main.css"></pre> + +<p>Here however, we will use a <code>rel</code> value of <code>preload</code>, which turns <code><link></code> into a preloader for any resource we want. You will also need to specify:</p> + +<ul> + <li>The path to the resource in the {{htmlattrxref("href", "link")}} attribute.</li> + <li>The type of resource in the {{htmlattrxref("as", "link")}} attribute.</li> +</ul> + +<p>A simple example might look like this (see our <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">JS and CSS example source</a>, and <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">also live</a>):</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>JS and CSS preload example</title> + + <link rel="preload" href="style.css" as="style"> + <link rel="preload" href="main.js" as="script"> + + <link rel="stylesheet" href="style.css"> +</head> + +<body> + <h1>bouncing balls</h1> + <canvas></canvas> + + <script src="main.js" defer></script> +</body></pre> + +<p>Here we preload our CSS and JavaScript files so they will be available as soon as they are required for the rendering of the page later on. This example is trivial, as the browser probably discovers the <code><link rel="stylesheet"></code> and <code><script></code> elements in the same chunk of HTML as the preloads, but the benefits can be seen much more clearly the later resources are discovered and the larger they are. For example:</p> + +<ul> + <li>Resources that are pointed to from inside CSS, like fonts or images.</li> + <li>Resources that JavaScript can request, like JSON, imported scripts, or web workers.</li> + <li>Larger images and video files.</li> +</ul> + +<p><code>preload</code> has other advantages too. Using <code>as</code> to specify the type of content to be preloaded allows the browser to:</p> + +<ul> + <li>Prioritize resource loading more accurately.</li> + <li>Store in the cache for future requests, reusing the resource if appropriate.</li> + <li>Apply the correct <a href="/en-US/docs/Web/HTTP/CSP">content security policy</a> to the resource.</li> + <li>Set the correct {{HTTPHeader("Accept")}} request headers for it.</li> +</ul> + +<h3 id="What_types_of_content_can_be_preloaded">What types of content can be preloaded?</h3> + +<p>Many different content types can be preloaded. The possible <code>as</code> attribute values are:</p> + +<ul> + <li><code>audio</code>: Audio file, as typically used in {{htmlelement("audio")}}.</li> + <li><code>document</code>: An HTML document intended to be embedded by a {{htmlelement("frame")}} or {{htmlelement("iframe")}}.</li> + <li><code>embed</code>: A resource to be embedded inside an {{htmlelement("embed")}} element.</li> + <li><code>fetch</code>: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.</li> + <li><code>font</code>: Font file.</li> + <li><code>image</code>: Image file.</li> + <li><code>object</code>: A resource to be embedded inside an {{htmlelement("object")}} element.</li> + <li><code>script</code>: JavaScript file.</li> + <li><code>style</code>: CSS stylesheet.</li> + <li><code>track</code>: WebVTT file.</li> + <li><code>worker</code>: A JavaScript web worker or shared worker.</li> + <li><code>video</code>: Video file, as typically used in {{htmlelement("video")}}.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: There's more detail about these values and the web features they expect to be consumed by in the Preload spec — see <a href="https://w3c.github.io/preload/#link-element-extensions">link element extensions</a>. Also note that the full list of values the <code>as</code> attribute can take is governed by the Fetch spec — see <a href="https://fetch.spec.whatwg.org/#concept-request-destination">request destinations</a>.</p> +</div> + +<h2 id="Including_a_MIME_type">Including a MIME type</h2> + +<p><code><link></code> elements can accept a {{htmlattrxref("type", "link")}} attribute, which contains the MIME type of the resource the element points to. This is especially useful when preloading resources — the browser will use the <code>type</code> attribute value to work out if it supports that resource, and will only download it if so, ignoring it if not.</p> + +<p>You can see an example of this in our video example (see the <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">full source code</a>, and also <a href="https://mdn.github.io/html-examples/link-rel-preload/video/">the live version</a>):</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>Video preload example</title> + + <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"> + <link rel="preload" href="sintel-short.webm" as="video" type="video/webm"> +</head> +<body> + <video controls> + <source src="sintel-short.mp4" type="video/mp4"> + <source src="sintel-short.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p> + </video> +</body></pre> + +<p>So in this case, browsers that support MP4s will preload and use the MP4, making the video player hopefully smoother/more responsive for users. Browsers that don't support MP4 can still load the WebM version, but don't get the advantages of preloading. This shows how preloading content can be combined with the philosophy of progressive enhancement.</p> + +<h2 id="Cross-origin_fetches">Cross-origin fetches</h2> + +<p>If you've got your sites' <a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> settings worked out properly, you can successfully preload cross-origin resources as long as you set a {{htmlattrxref("crossorigin","link")}} attribute on your <code><link></code> element.</p> + +<p>One interesting case where this applies, even if the fetch is not cross-origin, is font files. Because of various reasons, these have to be fetched using anonymous mode CORS (see <a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">Font fetching requirements</a>).</p> + +<p>Let's use this case as an example. You can see the full <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">example source code on GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">also see it live</a>):</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>Web font example</title> + + <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin> + <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin> + + <link href="style.css" rel="stylesheet"> +</head> +<body> + … +</body></pre> + +<p>Not only are we providing the MIME type hints in the <code>type</code> attributes, but we are also providing the <code>crossorigin</code> attribute to handle the CORS issue.</p> + +<h2 id="Including_media">Including media</h2> + +<p>One nice feature of <code><link></code> elements is their ability to accept {{htmlattrxref("media", "link")}} attributes. These can accept <a href="/en-US/docs/Web/CSS/@media#Media_types">media types</a> or full-blown <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a>, allowing you to do responsive preloading!</p> + +<p>Let's look at an example (see it on GitHub — <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">source code</a>, <a href="https://mdn.github.io/html-examples/link-rel-preload/media/">live example</a>):</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>Responsive preload example</title> + + <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"> + <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"> + + <link rel="stylesheet" href="main.css"> +</head> +<body> + <header> + <h1>My site</h1> + </header> + + <script> + var mediaQueryList = window.matchMedia("(max-width: 600px)"); + var header = document.querySelector('header'); + + if (mediaQueryList.matches) { + header.style.backgroundImage = 'url(bg-image-narrow.png)'; + } else { + header.style.backgroundImage = 'url(bg-image-wide.png)'; + } + </script> +</body></pre> + +<p>We include <code>media</code> attributes on our <code><link></code> elements so that a narrow image is preloaded if the user has a narrow viewport, and a wider image is loaded if they have a wide viewport. We use {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} to do this (see <a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a> for more).</p> + +<p>This makes it much more likely that the font will be available for the page render, cutting down on FOUT (flash of unstyled text).</p> + +<p>This doesn't have to be limited to images, or even files of the same type — think big! You could perhaps preload and display a simple SVG diagram if the user is on a narrow screen where bandwidth and CPU is potentially more limited, or preload a complex chunk of JavaScript then use it to render an interactive 3D model if the user's resources are more plentiful.</p> + +<h2 id="Scripting_and_preloads">Scripting and preloads</h2> + +<p>Another nice thing about these preloads is that you can execute them with script. For example, here we create a {{domxref("HTMLLinkElement")}} instance, then attach it to the DOM:</p> + +<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadLink <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"link"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +preloadLink<span class="punctuation token">.</span>href <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> +preloadLink<span class="punctuation token">.</span>rel <span class="operator token">=</span> <span class="string token">"preload"</span><span class="punctuation token">;</span> +preloadLink<span class="punctuation token">.</span><span class="keyword token">as</span> <span class="operator token">=</span> <span class="string token">"script"</span><span class="punctuation token">;</span> +document<span class="punctuation token">.</span>head<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadLink<span class="punctuation token">)</span><span class="punctuation token">;</span> +</code></pre> + +<p>This means that the browser will preload the <code>myscript.js</code> file, but not actually use it yet. To use it, you could do this:</p> + +<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadedScript <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"script"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +preloadedScript<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> +document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadedScript<span class="punctuation token">)</span><span class="punctuation token">;</span> +</code></pre> + +<p>This is useful when you want to preload a script, but then defer execution until exactly when you need it.</p> + +<h2 id="Other_resource_preloading_mechanisms">Other resource preloading mechanisms</h2> + +<p>Other preloading features exist, but none are quite as fit for purpose as <code><link rel="preload"></code>:</p> + +<ul> + <li><code><link rel="prefetch"></code> has been supported in browsers for a long time, but it is intended for prefetching resources that will be used in the <strong><em>next</em></strong> navigation/page load (e.g. when you go to the next page). This is fine, but isn't useful for the current page! In addition, browsers will give <code>prefetch</code> resources a lower priority than <code>preload</code> ones — the current page is more important than the next. See <a href="/en-US/docs/Web/HTTP/Link_prefetching_FAQ">Link prefetching FAQ</a> for more details.</li> + <li><code><link rel="prerender"></code> renders a specified webpage in the background, speeding up its load if the user navigates to it. Because of the potential to waste users bandwidth, Chrome treats <code>prerender</code> as a <a href="https://developers.google.com/web/updates/2018/07/nostate-prefetch">NoState prefetch</a> instead.</li> + <li><code><link rel="subresource"></code> {{non-standard_inline}} was supported in Chrome a while ago, and was intended to tackle the same issue as <code>preload</code>, but it had a problem: there was no way to work out a priority for the items (<code>as</code> didn't exist back then), so they all got fetched with fairly low priority.</li> + <li>There are a number of script-based resource loaders out there, but they don't have any power over the browser's fetch prioritization queue, and are subject to much the same performance problems.</li> +</ul> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td> + <td>{{Spec2('Preload')}}</td> + <td>Further details of <code>preload</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#link-type-preload', 'rel=preload')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definition of <code>rel=preload</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.link.rel.preload")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/">Preload: What Is It Good For?</a> by Yoav Weiss</li> +</ul> + +<p>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}</p> diff --git a/files/ko/web/html/quirks_mode_and_standards_mode/index.html b/files/ko/web/html/quirks_mode_and_standards_mode/index.html new file mode 100644 index 0000000000..0179c18a4f --- /dev/null +++ b/files/ko/web/html/quirks_mode_and_standards_mode/index.html @@ -0,0 +1,46 @@ +--- +title: 호환 모드와 표준 모드 +slug: Web/HTML/Quirks_Mode_and_Standards_Mode +translation_of: Web/HTML/Quirks_Mode_and_Standards_Mode +--- +<p>과거 웹 페이지는 넷스케이프 내비게이터(Netscape Navigator)용과 마이크로소프트 인터넷 익스플로러(Microsoft Internet Explorer)<span style="line-height: inherit;">용의 두 가지 버전으로 만들어졌다</span><span style="line-height: inherit;">. W3C에서 웹 표준을 제정할 당시, 기존 브라우저들은 새롭게 만들어진 표준을 기반으로 대부분의 웹 사이트들을 제대로 표현할 수 없었다. 따라서, 브라우저들은 새로운 표준으로 제작된 사이트와 예전 방식으로 제작된 사이트를 렌더링하기 위한 두 가지 모드를 제공했다.</span></p> + +<p>웹 브라우저의 레이아웃 엔진으로 호환 모드(quirks mode), 거의 표준 모드(almost standards mode), 표준 모드(standards mode)의 <span style="line-height: inherit;">세 가지 방식이 존재한다. <strong>호환 모드</strong>(quirks mode)</span><span style="line-height: inherit;">에서는 기존 방식으로 제작된 웹사이트들을 표현하기 위해 내</span><span style="line-height: inherit;">비게이터 4(Navigator 4)와 인터넷 익스플로러 5의 비표준 동작들을 에뮬레이션한다. <strong>완전 표준 모드</strong></span><span style="line-height: inherit;">(full standards mode; 이하 표준 모드)</span><span style="line-height: inherit;">에서는 (아마도) HTML과 CSS에 의해 웹 페이지가 표시된다. <strong>거의 표준 모드</strong>(</span><span style="line-height: inherit;">almost standards mode)는 소수의 호환 모드 요소만 지원한다.</span></p> + +<h2 id="How_does_Mozilla_determine_which_mode_to_use.3F" name="How_does_Mozilla_determine_which_mode_to_use.3F">브라우저는 무엇을 보고 모드를 결정할까?</h2> + +<p>웹 브라우저는 <a href="/en-US/docs/HTML" style="line-height: inherit;" title="/en-US/docs/HTML">HTML</a><span style="line-height: inherit;"> </span><span style="line-height: inherit;">페이지를 호환 모드나 표준 모드 중 무엇으로 렌더링할지 결정할 때 문서의 첫 부분에 기술된 DOCTYPE을 참조한다. 웹 페이지를 표준 모드로 렌더링하려고 한다면 다음과 같이 페이지 첫 부분에 DOCTYPE을 기술해야 한다.</span></p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset=UTF-8> + <title>Hello World!</title> + </head> + <body> + </body> +</html></pre> + +<p>예제에서 사용한 <span style="line-height: inherit;"><code><!DOCTYPE html></code>은 HTML5에서 권장하는, 가장 간단한 방식이다. 이전 버전의 HTML 표준들은 다른 방식들을 권장하지만, 오늘날 현존하는 모든 브라우저들은(심지어 옛날 인터넷 익스플로러 6조차도) 이 DOCTYPE은 완전 표준 모드로 렌더링할 것이다. 더 복잡한 DOCTYPE을 굳이 사용할 이유는 없다. 만약 다른 DOCTYPE을 사용하게 된다면, 해당 페이지가 거의 표준 모드나 호환 모드로 렌더링될 수 있는 위험이 있다.</span></p> + +<p>DOCTYPE은 반드시 HTML 문서 첫 부분에 기술하자. <span style="line-height: inherit;">인터넷 익스플로러 9 또는 그 이전 버전에서는</span><span style="line-height: inherit;"> DOCTYPE 이전에 </span><span style="line-height: inherit;">주석이나 XML 선언부 등 무엇이든 작성된 상태라면 해당 문서를 호환 모드로 렌더링하게 된다.</span></p> + +<p>HTML5에서 DOCTYPE의 유일한 목적은 완전 표준 모드를 활성화하기 위함이다. 이전 버전의 HTML 표준에서는 DOCTYPE이 추가적인 의미를 갖지만, 실제로 이를 호환 모드와 표준 모드의 판단 이외의 목적으로 사용한 브라우저는 없다.</p> + +<p>좀 더 자세한 내용은 "브라우저가 다양한 모드를 판단할 때"(<a class="external" href="http://hsivonen.iki.fi/doctype/" title="http://hsivonen.iki.fi/doctype/">when different browsers choose various modes</a>)를 참고하자.</p> + +<h3 id="XHTML">XHTML</h3> + +<p>여러분의 페이지가 <code>Content-Type</code> <span style="line-height: inherit;">HTTP 헤더를 <code>application/xhtml+xml</code> MIME 타입으로 설정함으로써</span><span style="line-height: inherit;"> </span><a href="/en-US/docs/XHTML" style="line-height: inherit;" title="XHTML">XHTML</a>로 제공된다면, 이런 페이지들은 항상 표준 모드로 렌더링되기 때문에 DOCTYPE을 기술할 필요가 없다. 다만 인터넷 익스플로러는 9부터 XHTML을 지원하기 때문에 인터넷 익스플로러 8의 경우 <code>application/xhtml+xml</code>로 기술된 페이지를 표시하지 않고 알 수 없는 형식으로 판단해 <a href="/en-US/docs/XHTML#Support">다운로드 창을 표시한다</a>.</p> + +<p>XHTML 같은(XHTML-like) 콘텐트를 <code>text/html</code> <span style="line-height: inherit;">MIME </span><span style="line-height: inherit;">타입으로 제공한다면 웹 브라우저는 이를 HTML로 인식하므로, 표준 모드로 렌더링하려면 DOCTYPE을 기술해야 한다.</span></p> + +<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">페이지에 사용된 모드 확인하기</h2> + +<p>파이어폭스(Firefox)에서는 우클릭을 하고 '페이지 등록 정보'에서 '렌더링 방식'을 확인한다.</p> + +<p>인터넷 익스플로러에서는 F12 키를 누르고 문서 모드<span style="line-height: inherit;">를 확인한다.</span></p> + +<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">모드 간의 차이점</h2> + +<p>여러 렌더링 모드의 차이점을 비교하려면 <a href="/ko/docs/Mozilla_Quirks_Mode_Behavior">Mozilla Quirks Mode Behavior</a>와 <a href="/en-US/docs/Mozilla/Gecko_Almost_Standards_Mode">Gecko's "Almost Standards" Mode</a>(영문) 문서를 참고하자.</p> diff --git a/files/ko/web/html/reference/index.html b/files/ko/web/html/reference/index.html new file mode 100644 index 0000000000..e2095ab522 --- /dev/null +++ b/files/ko/web/html/reference/index.html @@ -0,0 +1,32 @@ +--- +title: HTML 참고서 +slug: Web/HTML/Reference +tags: + - HTML + - Landing + - Reference + - Web +translation_of: Web/HTML/Reference +--- +<div>{{HTMLSidebar}}</div> + +<p><a href="/ko/docs/Web/HTML">HTML</a> 참고서는 HTML의 모든 <strong>요소</strong>와 <strong>특성</strong>의 설명을 담고 있습니다.</p> + +<div class="section"> +<dl> + <dt><a href="/ko/docs/Web/HTML/Element">HTML 요소 참고서</a></dt> + <dd>태그를 사용해 생성할 수 있는 HTML 요소를 나열하는 문서입니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Attributes">HTML 특성 참고서</a></dt> + <dd>HTML의 요소는 특성을 갖습니다. 특성은 요소의 다양한 설정이나 행동을 사용자가 원하는 방식대로 바꿀 수 있는 값입니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></dt> + <dd>전역 특성은 모든 HTML에서 공통으로 사용할 수 있는 특성입니다. 일부 요소에는 아무런 효과도 없을 수 있습니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Link_types">링크 유형</a></dt> + <dd>HTML에서는 {{htmlelement("a")}}, {{htmlelement("area")}} 또는 {{htmlelement("link")}} 태그 중 하나를 이용해 한 문서와 다른 문서를 연결함으로써 두 문서의 관계 명시할 수 있습니다.</dd> + <dt><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></dt> + <dd>HTML 요소는 하나 이상의 콘텐츠 카테고리에 속할 수 있습니다. 콘텐츠 카테고리는 같은 성질을 가진 요소를 묶습니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Date_and_time_formats">HTML에서 사용하는 날짜와 시간 형식</a></dt> + <dd>특정 HTML 요소는 날짜와 시간을 값이나 특성의 값으로 가질 수 있습니다. {{HTMLElement("input")}} 요소의 날짜 및 시간 형태는 물론 {{HTMLElement("ins")}}와 {{HTMLElement("del")}} 요소도 이에 해당합니다.</dd> +</dl> + +<p><span class="alllinks"><a href="/ko/docs/tag/HTML" title="Article tagged: HTML">"HTML" 태그를 가진 문서 모두 보기...</a></span></p> +</div> diff --git a/files/ko/web/html/using_the_application_cache/index.html b/files/ko/web/html/using_the_application_cache/index.html new file mode 100644 index 0000000000..e32a89c21a --- /dev/null +++ b/files/ko/web/html/using_the_application_cache/index.html @@ -0,0 +1,338 @@ +--- +title: 애플리케이션 캐시 사용하기 +slug: Web/HTML/Using_the_application_cache +translation_of: Web/HTML/Using_the_application_cache +--- +<div>{{DefaultAPISidebar("App Cache")}}{{SecureContext_Header}}{{Deprecated_Header}} +<div class="blockIndicator warning"> +<p>Using the <em>application caching</em> feature described here is at this point highly discouraged; it’s <a href="https://html.spec.whatwg.org/multipage/browsers.html#offline">in the process of being removed from the Web platform</a>. Use <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Workers</a> instead. In fact as of Firefox 44, when <a href="/en-US/docs/Web/HTML/Using_the_application_cache">AppCache</a> is used to provide offline support for a page a warning message is now displayed in the console advising developers to use <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> instead ({{bug("1204581")}}).</p> +</div> +</div> + +<h2 id="소개">소개</h2> + +<p><a href="/en-US/docs/HTML/HTML5" title="HTML/HTML5">HTML5</a> 는 웹기반의 애플리케이션들이 오프라인에서도 실행되도록 해주는 애플리케이션 캐시 메카니즘을 제공한다. 개발자는 브라우저에 캐시되어 오프라인 사용자가 사용할 수 있도록 자원을 지정하기 위하여 애플리케이션 캐시(앱 캐시) 인터페이스를 사용할 수 있다. 캐시된 애플리케이션은 사용자가 오프라인 상태에서 새로고침을 클릭할 때 올바르게 불러와서 작동한다.</p> + +<p>애플리케이션 캐시를 사용하는 것은 애플리케이션에 다음과 같은 이익을 줍니다:</p> + +<ul> + <li>오프라인 브라우징: 유저들은 오프라인에서도 사이트를 탐색할 수 있습니다.</li> + <li>속도: 로컬에 리소스들을 캐싱함으로서, 로딩속도를 향상시킬 수 있습니다.</li> + <li>서버 부하 감소: 브라우저는 서버에서 변경된 리소스들만 다운로드합니다.</li> +</ul> + +<h2 id="애플리케이션_캐시의_작동_방식">애플리케이션 캐시의 작동 방식</h2> + +<h3 id="애플리케이션_캐시_활성화_하기">애플리케이션 캐시 활성화 하기</h3> + +<p>애플리케이션에서 애플리케이션 캐시를 활성화 하기 위해서, 먼저 당신의 애플리케이션의 페이지들의 {{HTMLElement("html")}} 엘리먼트에 {{htmlattrxref("manifest", "html")}} 속성을 추가할 필요가 있습니다:</p> + +<div style="overflow: hidden;"> +<pre class="brush: html"><html manifest="example.appcache"> + ... +</html></pre> +</div> + +<p><code>manifest</code> 속성은 <strong>캐시 매니페스트</strong> 파일을 가르키며, 이는 브라우져가 당신의 애플리케이션을 위해 캐싱할 리소스(파일들)의 리스트인 텍스트 파일입니다.</p> + +<p>당신은 반드시 <code>manifest</code> 속성을 당신 애플리케이션의 캐싱하길 원하는 모든 페이지마다 포함시켜야합니다. The browser does not cache pages that do not contain the <code>manifest</code>attribute, unless such pages are explicitly listed in the manifest file itself. You do not need to list all the pages you want cached in the manifest file, the browser implicitly adds every page that the user visits and that has the <code>manifest</code> attribute set to the application cache.</p> + +<p>몇몇 브라우저들은(e.g., Firefox) 애플리케이션 캐시를 사용하는 애플리케이션을 처음 로드할 때 알림을 띄웁니다. 알림은 다음과 같은 메시지를 표시합니다:</p> + +<p style="margin-left: 40px;">해당 사이트가 (<code>www.example.com</code>) 오프라인 사용을 위해 데이터를 저장을 요청합니다. [예] [이 사이트에서 사용안함] [나중에]</p> + +<p>The term "offline(-enabled) applications" sometimes refers specifically to applications that the user has allowed to use offline capabilities.</p> + +<h3 id="documents_불러오기">documents 불러오기</h3> + +<p>The use of an application cache modifies the normal process of loading a document:</p> + +<ul> + <li>If an application cache exists, the browser loads the document and its associated resources directly from the cache, without accessing the network. This speeds up the document load time.</li> + <li>The browser then checks to see if the cache manifest has been updated on the server.</li> + <li>If the cache manifest has been updated, the browser downloads a new version of the manifest and the resources listed in the manifest. This is done in the background and does not affect performance significantly.</li> +</ul> + +<p>The process for loading documents and updating the application cache is specified in greater detail below:</p> + +<ol> + <li>When the browser visits a document that includes the <code>manifest</code> attribute, if no application cache exists, the browser loads the document and then fetches all the entries listed in the manifest file, creating the first version of the application cache.</li> + <li>Subsequent visits to that document cause the browser to load the document and other assets specified in the manifest file from the application cache (not from the server). In addition, the browser also sends a <code>checking</code> event to the <code><a href="/en-US/docs/DOM/window.applicationCache" title="DOM/window.applicationCache">window.applicationCache</a></code> object, and fetches the manifest file, following the appropriate HTTP caching rules.</li> + <li>If the currently-cached copy of the manifest is up-to-date, the browser sends a <code>noupdate</code> event to the <code>applicationCache</code> object, and the update process is complete. Note that if you change any cached resources on the server, you must also change the manifest file itself, so that the browser knows it needs to fetch all the resources again.</li> + <li>If the manifest file <em>has</em> changed, all the files listed in the manifest—as well as those added to the cache by calling <code><a href="/en-US/docs/nsIDOMOfflineResourceList#add.28.29" title="nsIDOMOfflineResourceList#add.28.29">applicationCache.add()</a></code>—are fetched into a temporary cache, following the appropriate HTTP caching rules. For each file fetched into this temporary cache, the browser sends a <code>progress</code> event to the <code>applicationCache</code> object. If any errors occur, the browser sends an <code>error</code> event, and the update halts.</li> + <li>Once all the files have been successfully retrieved, they are moved into the real offline cache automatically, and a <code>cached</code> event is sent to the <code>applicationCache</code> object. Since the document has already been loaded into the browser from the cache, the updated document will not be rendered until the document is reloaded (either manually or programatically).</li> +</ol> + +<h2 id="Storage_location_and_clearing_the_offline_cache">Storage location and clearing the offline cache</h2> + +<p>In Chrome you can clear the offline cache by selecting "Clear browsing data..." in the preferences or by visiting <a title="chrome://appcache-internals/">chrome://appcache-internals/</a>. Safari has a similar "Empty cache" setting in its preferences but a browser restart may also be required.</p> + +<p>In Firefox, the offline cache data is stored separately from the Firefox profile—next to the regular disk cache:</p> + +<ul> + <li>Windows Vista/7: <code>C:\Users\<username>\AppData\<strong>Local</strong>\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache</code></li> + <li>Mac/Linux: <code>/Users/<username>/Library/Caches/Firefox/Profiles/<salt>.<profile name>/OfflineCache</code></li> +</ul> + +<p>In Firefox the current status of the offline cache can be inspected on the <code>about:cache</code> page (under the "Offline cache device" heading). The offline cache can be cleared for each site separately using the "Remove..." button in Tools -> Options -> Advanced -> Network -> Offline data.</p> + +<p>Prior to Firefox 11, neither Tools -> Clear Recent History nor Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now cleared the offline cache. This has been fixed.</p> + +<p>On Linux, you can find the setting at Edit > Preferences > Advanced > Network > Offline Web Content and User Data</p> + +<p>See also <a href="/en-US/docs/DOM/Storage#Storage_location_and_clearing_the_data" title="DOM/Storage#Storage location and clearing the data">clearing the DOM Storage data</a>.</p> + +<p>Application caches can also become obsolete. If an application's manifest file is removed from the server, the browser removes all application caches that use that manifest, and sends an "obsoleted" event to the <code>applicationCache</code> object. This sets the application cache's state to <code>OBSOLETE</code>.</p> + +<h2 id="The_cache_manifest_file">The cache manifest file</h2> + +<h3 id="Referencing_a_cache_manifest_file">Referencing a cache manifest file</h3> + +<p>The <code>manifest</code> attribute in a web application can specify either the relative path of a cache manifest file or an absolute URL. (Absolute URLs must be from the same origin as the application). A cache manifest file can have any file extension, but it must be served with the MIME type <code>text/cache-manifest</code>.</p> + +<div class="note"><strong>Note: </strong>On Apache servers, the MIME type for manifest (.appcache) files can be set by adding <code>AddType text/cache-manifest .appcache</code> to a .htaccess file within either the root directory, or the same directory as the application.</div> + +<h3 id="Entries_in_a_cache_manifest_file">Entries in a cache manifest file</h3> + +<p>The cache manifest file is a simple text file that lists the resources the browser should cache for offline access. Resources are identified by URI. Entries listed in the cache manifest must have the same scheme, host, and port as the manifest.</p> + +<h3 id="Example_1_a_simple_cache_manifest_file">Example 1: a simple cache manifest file</h3> + +<p>The following is a simple cache manifest file, <code>example.appcache</code>, for an imaginary web site at <span class="nowiki">www.example.com</span>.</p> + +<pre>CACHE MANIFEST +# v1 - 2011-08-13 +# This is a comment. +<span class="nowiki">http://www.example.com/index.html</span> +<span class="nowiki">http://www.example.com/header.png</span> +<span class="nowiki">http://www.example.com/blah/blah</span> +</pre> + +<p>A cache manifest file can include three sections (<code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code>, discussed below). In the example above, there is no section header, so all data lines are assumed to be in the explicit (<code>CACHE</code>) section, meaning that the browser should cache all the listed resources in the application cache. Resources can be specified using either absolute or relative URLs (e.g., <code>index.html</code>).</p> + +<p>The "v1" comment in the example above is there for a good reason. Browsers only update an application cache when the manifest file changes, byte for byte. If you change a cached resource (for example, you update the <code>header.png</code> image with new content), you must also change the content of the manifest file in order to let browsers know that they need to refresh the cache. You can make any change you want to the manifest file, but revising a version number is the recommended best practice.</p> + +<div class="warning"><strong>Important:</strong> Do not specify the manifest itself in the cache manifest file, otherwise it will be nearly impossible to inform the browser a new manifest is available.</div> + +<h3 id="Sections_in_a_cache_manifest_file_CACHE_NETWORK_and_FALLBACK">Sections in a cache manifest file: <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code></h3> + +<p>A manifest can have three distinct sections: <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code>.</p> + +<dl> + <dt><code>CACHE:</code></dt> + <dd>This is the default section for entries in a cache manifest file. Files listed under the <code>CACHE:</code> section header (or immediately after the <code>CACHE MANIFEST</code> line) are explicitly cached after they're downloaded for the first time.</dd> + <dt><code>NETWORK:</code></dt> + <dd>Files listed under the <code>NETWORK:</code> section header in the cache manifest file are white-listed resources that require a connection to the server. All requests to such resources bypass the cache, even if the user is offline. Wildcards may be used.</dd> + <dt><code>FALLBACK:</code></dt> + <dd>The <code>FALLBACK:</code> section specifies fallback pages the browser should use if a resource is inaccessible. Each entry in this section lists two URIs—the first is the resource, the second is the fallback. Both URIs must be relative and from the same origin as the manifest file. Wildcards may be used.</dd> +</dl> + +<p>The <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK </code>sections can be listed in any order in a cache manifest file, and each section can appear more than once in a single manifest.</p> + +<h3 id="Example_2_a_more_complete_cache_manifest_file">Example 2: a more complete cache manifest file</h3> + +<p>The following is a more complete cache manifest file for the imaginary web site at <span class="nowiki">www.example.com</span>:</p> + +<pre>CACHE MANIFEST +# v1 2011-08-14 +# This is another comment +index.html +cache.html +style.css +image1.png + +# Use from network if available +NETWORK: +network.html + +# Fallback content +FALLBACK: +/ fallback.html +</pre> + +<p>This example uses <code>NETWORK</code> and <code>FALLBACK</code> sections to specify that the <code>network.html</code> page must always be retrieved from the network, and that the <code>fallback.html</code> page should be served as a fallback resource (e.g., in case a connection to the server cannot be established).</p> + +<h3 id="Structure_of_a_cache_manifest_file">Structure of a cache manifest file</h3> + +<p>Cache manifest files must be served with the <code>text/cache-manifest</code> MIME type. All resources served using this MIME type must follow the syntax for an application cache manifest, as defined in this section.</p> + +<p>Cache manifests are UTF-8 format text files, and may optionally include a BOM character. Newlines may be represented by line feed (<code>U+000A</code>), carriage return (<code>U+000D</code>), or carriage return and line feed both.</p> + +<p>The first line of the cache manifest must consist of the string <code>CACHE MANIFEST</code> (with a single <code>U+0020</code> space between the two words), followed by zero or more space or tab characters. Any other text on the line is ignored.</p> + +<p>The remainder of the cache manifest must be comprised of zero or more of the following lines:</p> + +<dl> + <dt>Blank line</dt> + <dd>You may use blank lines comprised of zero or more space and tab characters.</dd> + <dt>Comment</dt> + <dd>Comments consist of zero or more tabs or spaces followed by a single <code>#</code> character, followed by zero or more characters of comment text. Comments may only be used on their own lines (after the initial <span style='font-family: "Courier New","Andale Mono",monospace; font-size: 14px; line-height: normal;'>CACHE MANIFEST </span><span style="font-size: 14px; line-height: 1.572;">line), and cannot be appended to other lines. This means that you cannot specify fragment identifiers.</span></dd> + <dt>Section header</dt> + <dd>Section headers specify which section of the cache manifest is being manipulated. There are three possible section headers:</dd> +</dl> + +<blockquote> +<table class="standard-table"> + <tbody> + <tr> + <th>Section header</th> + <th>Description</th> + </tr> + <tr> + <td><code>CACHE:</code></td> + <td>Switches to the explicit section of the cache manifest (this is the default section).</td> + </tr> + <tr> + <td><code>NETWORK:</code></td> + <td>Switches to the online whitelist section of the cache manifest.</td> + </tr> + <tr> + <td><code>FALLBACK:</code></td> + <td>Switches to the fallback section of the cache manifest.</td> + </tr> + </tbody> +</table> +</blockquote> + +<dl> + <dd>The section header line may include whitespaces, but must include the colon (<code>:</code>) in the section name.</dd> + <dt>Section data</dt> + <dd>The format for lines of data varies from section to section. In the explicit (<code>CACHE:</code>) section, each line is a valid URI or IRI reference to a resource to cache (no wildcard characters are allowed in this sections). Whitespace is allowed before and after the URI or IRI on each line. In the Fallback section each line is a valid URI or IRI reference to a resource, followed by a fallback resource that is to be served up when a connection with the server cannot be made. In the network section, each line is a valid URI or IRI reference to a resource to fetch from the network (the wildcard character * is allowed in this section). + <div class="note"><strong>Note: </strong>Relative URIs are relative to the cache manifest's URI, not to the URI of the document referencing the manifest.</div> + </dd> +</dl> + +<p>Cache manifest files can switch from section to section at will (each section header can be used more than once), and sections are allowed to be empty.</p> + +<h2 id="Resources_in_an_application_cache">Resources in an application cache</h2> + +<p>An application cache always includes at least one resource, identified by URI. All resources fit into one of the following categories:</p> + +<dl> + <dt>Master entries</dt> + <dd>These are resources added to the cache because a browsing context visited by the user included a document that indicated that it was in this cache using its <code>manifest</code> attribute.</dd> + <dt>Explicit entries</dt> + <dd>These are resources explicitly listed in the application's cache manifest file.</dd> + <dt>Network entries</dt> + <dd>These are resources listed in the application's cache manifest files as network entries.</dd> + <dt>Fallback entries</dt> + <dd>These are resources listed in the application's cache manifest files as fallback entries.</dd> +</dl> + +<div class="note"><strong>Note:</strong> Resources can be tagged with multiple categories, and can therefore be categorized as multiple entries. For example, an entry can be both an explicit entry and a fallback entry.</div> + +<p>Resource categories are described in greater detail below.</p> + +<h3 id="Master_entries">Master entries</h3> + +<p>Master entries are any HTML files that include a {{htmlattrxref("manifest","html")}} attribute in their {{HTMLElement("html")}} element. For example, let's say we have the HTML file <code><a class="linkification-ext external" href="http://www.foo.bar/entry.html" title="Linkification: http://www.foo.bar/entry.html">http://www.example.com/entry.html</a></code>, which looks like this:</p> + +<pre class="brush: html"><html manifest="example.appcache"> + <h1>Application Cache Example</h1> +</html> +</pre> + +<p>If <code>entry.html</code> is not listed in the <code>example.appcache</code> cache manifest file, visiting the <code>entry.html</code> page causes <code>entry.html</code> to be added to the application cache as a master entry.</p> + +<h3 id="Explicit_entries">Explicit entries</h3> + +<p>Explicit entries are resources that are explicitly listed in the <code>CACHE </code>section of a cache manifest file.</p> + +<h3 id="Network_entries">Network entries</h3> + +<p>The <code>NETWORK</code> section of a cache manifest file specifies resources for which a web application requires online access. Network entries in an application cache are essentially an "online whitelist"—URIs specified in the <code>NETWORK</code> section are loaded from the server instead of the cache. This lets the browser's security model protect the user from potential security breaches by limiting access to approved resources.</p> + +<p>As an example, you can use network entries to load and execute scripts and other code from the server instead of the cache:</p> + +<pre>CACHE MANIFEST +NETWORK: +/api +</pre> + +<p>The cache manifest section listed above ensures that requests to load resources contained in the <code><a href="http://www.example.com/api/" rel="freelink">http://www.example.com/api/</a></code> subtree always go to the network without attempting to access the cache.</p> + +<div class="note"><strong>Note</strong>: Simply omitting master entries (files that have the <code>manifest</code> attribute set in the <code>html</code> element) from the manifest file would not have the same result, because master entries will be added—and subsequently served from—the application cache.</div> + +<h3 id="Fallback_entries">Fallback entries</h3> + +<p>Fallback entries are used when an attempt to load a resource fails. For example, let's say the cache manifest file <code><a href="http://www.example.com/example.appcache" rel="freelink">http://www.example.com/example.appcache</a></code> includes the following content:</p> + +<pre>CACHE MANIFEST +FALLBACK: +example/bar/ example.html +</pre> + +<p>Any request to <code><a href="http://www.example.com/example/bar/" rel="freelink">http://www.example.com/example/bar/</a></code> or any of its subdirectories and their content cause the browser to issue a network request to attempt to load the requested resource. If the attempt fails, due to either a network failure or a server error of some kind, the browser loads the file <code>example.html</code> instead.</p> + +<h2 id="Cache_states">Cache states</h2> + +<p>Each application cache has a <strong>state</strong>, which indicates the current condition of the cache. Caches that share the same manifest URI share the same cache state, which can be one of the following:</p> + +<dl> + <dt><code>UNCACHED</code></dt> + <dd>A special value that indicates that an application cache object is not fully initialized.</dd> + <dt><code>IDLE</code></dt> + <dd>The application cache is not currently in the process of being updated.</dd> + <dt><code>CHECKING</code></dt> + <dd>The manifest is being fetched and checked for updates.</dd> + <dt><code>DOWNLOADING</code></dt> + <dd>Resources are being downloaded to be added to the cache, due to a changed resource manifest.</dd> + <dt><code>UPDATEREADY</code></dt> + <dd>There is a new version of the application cache available. There is a corresponding <code>updateready</code> event, which is fired instead of the <code>cached</code> event when a new update has been downloaded but not yet activated using the <code>swapCache()</code> method.</dd> + <dt><code>OBSOLETE</code></dt> + <dd>The application cache group is now obsolete.</dd> +</dl> + +<h2 id="Testing_for_updates_to_the_cache_manifest">Testing for updates to the cache manifest</h2> + +<p>You can programmatically test to see if an application has an updated cache manifest file, using JavaScript. Since a cache manifest file may have been updated before a script attaches event listeners to test for updates, scripts should always test <code>window.applicationCache.status</code>.</p> + +<pre class="brush: js">function onUpdateReady() { + alert('found new version!'); +} +window.applicationCache.addEventListener('updateready', onUpdateReady); +if(window.applicationCache.status === window.applicationCache.UPDATEREADY) { + onUpdateReady(); +}</pre> + +<p>To manually start testing for a new manifest file, you can use <code>window.applicationCache.update()</code>.</p> + +<h2 id="Gotchas">Gotchas</h2> + +<ul> + <li>Never access cached files by using traditional GET parameters (like <code>other-cached-page.html?parameterName=value</code>). This will make the browser bypass the cache and attempt to get it from network. To link to cached resources that have parameters parsed in JavaScript use parameters in the hash part of the link, such as <code>other-cached-page.html#whatever?parameterName=value</code>.</li> + <li>When applications are cached, simply updating the resources (files) that are used in a web page is not enough to update the files that have been cached. You must update the cache manifest file itself before the browser retrieves and uses the updated files. You can do this programmatically using <code>window.applicationCache.swapCache()</code>, though resources that have already been loaded will not be affected. To make sure that resources are loaded from a new version of the application cache, refreshing the page is ideal.</li> + <li>It's a good idea to set expires headers on your web server for <code>*.appcache</code> files to expire immediately. This avoids the risk of caching manifest files. For example, in Apache you can specify such a configuration as follows:<br> + <code>ExpiresByType text/cache-manifest "access plus 0 seconds"</code></li> +</ul> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.html.manifest")}}</p> + +<h2 id="더_알아보기">더 알아보기</h2> + +<ul> + <li><a href="http://www.html5rocks.com/en/tutorials/appcache/beginner/" title="http://www.html5rocks.com/en/tutorials/appcache/beginner/">HTML5Rocks - A Beginner's Guide to Using the Application Cache</a></li> + <li><a href="http://appcachefacts.info/" title="http://appcachefacts.info/">appcachefacts.info</a> - detailed information on AppCache idiosyncrasies</li> + <li><a href="http://alistapart.com/article/application-cache-is-a-douchebag" title="http://alistapart.com/article/application-cache-is-a-douchebag">A List Apart: Application Cache is a Douchebag</a> + <ul> + <li><a href="http://flailingmonkey.com/application-cache-not-a-douchebag" title="http://flailingmonkey.com/application-cache-not-a-douchebag">The Application Cache is no longer a Douchebag</a> - an overview of the app cache debugging tools added in Firefox 23.</li> + </ul> + </li> + <li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline">HTML 5 working draft: Offline web applications</a></li> + <li><a href="http://www.w3.org/TR/offline-webapps/" title="http://www.w3.org/TR/offline-webapps/">W3C Working Group Note: Offline Web Applications</a></li> + <li><a href="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage" title="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage">HTML5 Cache Manifest: An Off-label Usage</a></li> + <li><a href="http://manifest-validator.com" title="http://manifest-validator.com">Cache Manifest Validator</a></li> + <li>{{interface("nsIApplicationCache")}}</li> + <li>{{interface("nsIApplicationCacheNamespace")}}</li> + <li>{{interface("nsIApplicationCacheContainer")}}</li> + <li>{{interface("nsIApplicationCacheChannel")}}</li> + <li>{{interface("nsIApplicationCacheService")}}</li> + <li>{{interface("nsIDOMOfflineResourceList")}}</li> + <li><a href="http://www.ibm.com/developerworks/web/library/wa-ffox3/">Get ready for Firefox 3.0 - A Web developer's guide to the many new features in this popular browser, especially the offline application features</a> (IBM developerWorks)</li> + <li><a href="/en-US/docs/Application_cache_implementation_overview" title="/en-US/docs/Application_cache_implementation_overview">Application cache implementation overview</a></li> +</ul> |