diff options
Diffstat (limited to 'files/ko/web/html/element/ul/index.html')
| -rw-r--r-- | files/ko/web/html/element/ul/index.html | 188 |
1 files changed, 188 insertions, 0 deletions
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> |