mozilla

Revision 198157 of Consistent List Indentation

  • 리비전 슬러그: Consistent_List_Indentation
  • 리비전 제목: Consistent List Indentation
  • 리비전 아이디: 198157
  • 제작일시:
  • 만든이: Ioseph
  • 현재 리비전인가요? 아니오
  • 댓글

리비전 내용

Summary: Trying to change the indentation of lists with CSS is trickier than it looks, but only because CSS-conformant browsers took different paths to default indentation. Find out how to get them all in line. 한글 One of the most common style changes made to lists is a change in the indentation distance -- that is, how far the list items are pushed over to the right. This often leads to frustration, because what works in one browser often doesn't have the same effect in another. For example, if you declare that lists have no left margin, they move over in Explorer, but sit stubbornly in place in Gecko-based browsers.

가장 흔하게 리스트에 적용되는 스타일 수정은 들여쓰기(indentation)거리의 수정입니다 -- 즉, 리스트 아이텡을 오른쪽으로 얼마나 멀리 들여쓸것인가 라는것입니다. 이 작업은 가끔 한 브라우저에서 나오던 효과가 다른 브라우저에서는 같은 효과를 내지 못해서 애를 먹게하곤 합니다. 예를들면, 리스트가 왼쪽 마진을 갖지 못하도록 선언할 경우, 익스플로러에선 이동이되지만, Gecko기반의 브라우저에선 고집스럽게도 꼼짝않고 제 자리를 지키며 있는 그런 경우 입니다.

In order to understand why this is the case, and more importantly how to avoid the problem altogether, it's necessary to examine the details of list construction.

왜 이런 일이 일어나는 가를 이해하고 더 나아가 이러한 문제점을 피해나갈 방법을 이해하기 위해서, 리스트 형성에대한 세부과정을 검토하는 것이 필요합니다.

Making a List

리스트 만들기

First, we consider a single, pure list item. This list item has no marker (otherwise known as a "bullet"), and is not yet part of a list itself. It hangs alone in the void, simple and unadorned., as shown in Figure 1.

먼저, 한개의 단순한 리스트 아이템을 생각해봅시다. 이 리스트 아이템엔 아무런 마커(불렛이라고도 알려져 있습니다)도 없고, 아직 그자체로 어떤 리스트의 부분이 아닙니다. 그림 1에서 보이는 바와같이, 단순하고 아무 치장도 없는 채로 그냥 혼자 허공에 떠 있는 상태라고 할 수 있습니다.

Figure 1

That dotted red border represents outer edges of the the content-area of the list item. Remember that, at this point, the list item has no padding or borders. If we add two more list items, we get a result like that shown in Figure 2.

빨간 점선으로된 경계선은 리스트 아이템의 내용물-지역의 바깥 경계를 나타내고 있습니다. 이 시점에서 리스트 아이템은 패딩이나 보더(경계)를 가지고 있지 않다는 점을 상기하십시오. 만약 2개의 리스트 아이템을 더 추가 한다면, 그림 2에 보여진 것과같은 결과를 얻게 될 것입니다.

Figure 2

Now we wrap these in a parent element; in this case, we'll wrap them in an unordered list (i.e., <ul>). According to the CSS box model, the list items' boxes must be displayed within the parent element's content area. Since that parent has no padding or margins yet, we get the situation shown in Figure 3.

이제 이 아이템들을 부모 엘리먼트로 랩핑(포장)합니다; 이 경우, 우리는 아이템들을 순서없는 리스트로 (즉, <ul>) 랩핑합니다. CSS 상자(박스) 모델에 의하면, 리스트 아이템들의 상자들은 부모 엘리먼트의 내용물-지역안에 디스플레이 되어야만 합니다. 이 부모 엘리먼트에 패딩이나 마진이 아직 없으므로 우리는 그림 3에 보여진 것과 같은 상황을 맞이하게 됩니다.

Figure 3

Here, the dotted blue border shows us the edges of the <ul> element's content area. Since we have no padding for the <ul> element, its content wraps snugly around the three list items.

여기서, 푸른 점선 경계선은 <ul>엘리먼트의 내용물 지역의 경계를 보여줍니다. <ul>엘리먼트에 패딩이 없으므로 엘리먼트의 내용물은 세 리스트 아이템들을 촘촘하게 랩핑하게 됩니다.

Now we add the list item markers. Since this is an unordered list, we'll add traditional filled-circle "bullets," as shown in Figure 4.

이제, 리스트 아이템 마커를 추가합니다. 이 리스트는 순서가 없는 리스트이므로, 그림 4에 보여긴 것 같은 전통적인 채워진 원 불렛을 추가합니다.

Figure 4

Visually, the markers are outside the content area of the <ul>, but that's not the important part here. What's key is that the markers are placed outside the "principal box" of the <li> elements, not the <ul>. They're sort of like appendages to the list items, hanging outside the content-area of the <li> but still attached to the <li>.

보여지는 것으론, 마커들은 <ul>의 내용물-지역의 바깥에 있으나, 여기서 이점은 그다지 중요하지 않습니다. 중요한 점은 마커들이 <li>엘리먼트들의 "principal 상자"의 밖에 놓여진다는 점입니다. 이 마커들은 <lt>의 내용물-지역의 밖에 매달려 있으나 여전히 <li>에 부착되어있는 일종의 리스트 아이템들의 꼬리표같다고 할 수 있습니다.

This is why, in every browser except Internet Explorer for Windows, markers are placed outside any border set for an <li> element, assuming the value of list-style-position is outside. If it's changed to inside, then the markers are brought inside the <li>'s content, as though they're an inline box placed at the very beginning of the <li>.

바로 이런 이유로, 윈도우의 익스플로러을 제외한 모든 브라우저에서, 마커들이 <li>엘리먼트에 지정된 보더밖에 놓이며, list-sytle-position값으로 outside를 취하게 되는 것입니다. 만일 값이 inside로 바뀌게 되면, 마커들은, 비록 <li>의 바로 시작부분에 놓여진 inline 상자임에도 불구하고, <li> 안쪽으로 옯겨지게 됩니다.

Indenting It Twice

두번 들여쓰기

So how will all this appear in a document? At the moment, we have a situation analogous to these styles:

그럼 이 모든게 문서에서는 어떻게 나타날까요? 현재, 우리는 아래의 스타일들에 비견되는 상황에 있다고 할 수 있습니다.

ul, li {margin-left: 0; padding-left: 0;}

If we dropped this list into a document as-is, there would be no apparent indentation and the markers would be in danger of falling off the left edge of the browser window.

만일 이 리스트를 있는 그대로 문서에 삽입할 경우, 가시적 들여쓰기 효과는 나타나지 않고, 마커들은 브라우저 윈도우의 왼쪽끝으로 잘려나갈 상황에 처하게 될것입니다.

In order to avoid this and get some indentation, there are really only three options available to browser implementors.

이를 피하고 들여쓰기효과를 얻을 목적으로 브라우저 개발자들에게 사용가능한 옵션은 다음의 세가지밖에 없습니다.

  1. Give each <li> element a left margin.
  2. Give the <ul> element a left margin.
  3. Give the <ul> element some left padding.
  1. <li> 엘리먼트에 왼쪽 마진을 준다.
  2. <ul> 엘리먼트에 왼쪽 마진을 준다.
  3. <ul> 엘리먼트에 왼쪽 패딩을 준다.


As it turns out, nobody seems to have used the first option. The second option was taken by Internet Explorer for Windows and Macintosh, and Opera. The third was adopted by Gecko, and by extension all the browsers that embed it.

결과론적으로, 누구도 첫번째 옵션을 사용하지는 않는것 같습니다. 두번째 옵션은 윈도우 익스플로러, 매킨토쉬, 그리고 오페라에서 적용되었습니다. 세번째 옵션은 Gecko 와 범주상 이를 임베드해서 사용하는 모든 브라우저들에 적용되었다고 할 수 있습니다.

Let's look at the two approaches for a moment. In Internet Explorer and Opera, the lists are indented by setting a left margin of 40 pixels on the <ul> element. If we apply a background color to the <ul> element and leave the list item and <ul> borders in place, we get the result shown in Figure 5.

이 두 접근법에 대해서 잠깐 살펴봅시다. 익스플로러와 오페라의 경우, 리스트들은 <ul>에 40 픽셀의 왼쪽 마진을 줌으로써 들여쓰여지게 됩니다. 만일 <ul> 엘리먼트에 배경색을 적용하고 리스트 아이템과 <ul> 보더들을 그냥 놔둘 경우, 그림 5에서 보이는 것과 같은 결과를 얻게 됩니다.

Figure 5

Gecko, on the other hand, sets a left padding of 40 pixels for the <ul> element, so given the exact same styles as were used to produce Figure 5, loading the example into a Gecko-based browser gives us Figure 6.

반면, Gecko는 <ul> 엘리먼트에 대해서 40픽셀의 왼쪽 패딩을 줍니다. 따라서 그림 5를 만들어내는데 사용된 것과 똑 같은 스타일을 적용하게 된다고 가정하면, Gecko기반 브라우저로 예제를 로딩했을때 그림 6과 같은 그림을 보게 됩니다.

Figure 6

As we can see, the markers remain attached to the <li> elements, no matter where they are. The difference is entirely in how the <ul> is styled. We can only see the difference if we try to set a background or border on the <ul> element.

보이는 바와 같이, 마커들은, 어디에 있게 되건간에, <li> 엘리먼트에 붙여진 채로 남아 있습니다. 차이점은 전적으로 <ul>가 어떤식으로 스타일을 갖추게 되는가에 달려있습니다. 이 차이점은 <ul> 엘리먼트에 배경색이나 보더를 지정하려고 할 경우에만 나타나게 됩니다.

Finding Consistency

일관성 찾기

Boil it all down, and what we're left with is this: if you want consistent rendering of lists between Gecko, Internet Explorer, and Opera, you need to set both the left margin and left padding of the <ul> element. We can ignore <li> altogether for these purposes. If you want to reproduce the default display in Netscape 6.x, you write:

모든것을 정리해보면 이런 결론에 도달하게 됩니다. 즉, Gecko, 익스플로러, 그리고 오페라 간에 리스트을 일관성있게 렌더링하고 싶으면, <ul> 엘리먼트의 왼쪽 마진 그리고 왼쪽 패딩 둘다 지정해야 한다는 것입니다. 이런 목적으로 <li> 을 아예 무시해 버릴 수도 있습니다. 넷스케이프 6.x 에서 디폴트 디스플레이로 돌아가고 싶다면:

ul {margin-left: 0; padding-left: 40px;}

If you're more interested in following the Explorer/Opera model, then:

만약, 익스플로러/오페라 모델을 따르길 원한다면:

ul {margin-left: 40px; padding-left: 0;}

라고 쓰면 됩니다.

Of course, you can fill in your own preferred values. Set both to 1.25em, if you like -- there's no reason why you have to stick with pixel-based indentation. If you want to reset lists to have no indentation, then you still have to zero out both padding and margin:

물론, 자기 자신이 선호하는 값을 써 넣을 수도 있습니다. 원한다면 둘다 1.25em로 정해 줄 수도 있습니다 -- 픽셀에 기반한 들여쓰기에만 묶여있을 이유는 없습니다. 만일 리스트들이 들여쓰기를 하지 않도록 리셋하고 싶으면, 패딩과 마진 값을 0으로 정해 주어야만 합니다.

ul {margin-left: 0; padding-left: 0;}

Remember, though, that in so doing, you'll have the bullets hanging outside the list and its parent element. If the parent is the body, there's a strong chance your bullets will be completely outside the browser window, and thus will not be visible.

하지만, 그렇게 하면, 불렛들이 리스트와 부모 엘리먼트의 바깥쪽에 매달려 있게 된다는 점을 기억하세요. 만일 body가 부모일 경우, 불렛이 브라우저 윈도우 밖으로 완전히 나가있게 되서, 보이지 않게 될 가능성이 아주 높습니다.

Conclusion

결론

In the end, we can see that none of the browsers mentioned in this article is right or wrong about how they lay out lists. They use different default styles, and that's where the problems creep in. By making sure you style both the left padding and left margin of lists, you can find much greater cross-browser consistency in your list indentation.

결국, 여기에 언급된 브라우져들이 리스트를 레이아웃하는 방식에있어서 올바르거나 그르거나 하지 않다는 것을 알 수 있습니다. 각 브라우저는 다른 디폴트 스타일을 사용하고 있으며, 거기서 문제점들이 기어들어 오게 되는 것입니다. 리스트의 왼쪽 패딩과 왼쪽 마진 둘다를 확실하게 스타일 지정 함으로써 리스트 들여쓰기에 있어서 브라우저간 일관성을 보다 획기적으로 유지할 수 있게 되는 것입니다.


Recommendations

권장 사항

  • When altering the indentation of lists, make sure to set both the padding and margin.

Original Document Information

  • Author(s): Eric A. Meyer, Netscape Communications
  • Last Updated Date: Published 30 Aug 2002
  • Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
  • Note: This reprinted article was originally part of the DevEdge site.
{{ wiki.languages( { "fr": "fr/Indentation_homog\u00e8ne_des_listes" } ) }}

리비전 소스

<p><span class="comment">Summary: Trying to change the indentation of lists with CSS is trickier than it looks, but only because CSS-conformant browsers took different paths to default indentation. Find out how to get them all in line. 한글</span>
One of the most common style changes made to lists is a change in the indentation distance -- that is, how far the list items are pushed over to the right. This often leads to frustration, because what works in one browser often doesn't have the same effect in another. For example, if you declare that lists have no left margin, they move over in Explorer, but sit stubbornly in place in Gecko-based browsers.
</p><p>가장 흔하게 리스트에 적용되는 스타일 수정은 들여쓰기(indentation)거리의 수정입니다 -- 즉, 리스트 아이텡을 오른쪽으로 얼마나 멀리 들여쓸것인가 라는것입니다. 이 작업은 가끔 한 브라우저에서 나오던 효과가 다른 브라우저에서는 같은 효과를 내지 못해서 애를 먹게하곤 합니다. 예를들면, 리스트가 왼쪽 마진을 갖지 못하도록 선언할 경우, 익스플로러에선 이동이되지만, Gecko기반의 브라우저에선 고집스럽게도 꼼짝않고 제 자리를 지키며 있는 그런 경우 입니다.
</p><p>In order to understand why this is the case, and more importantly how to avoid the problem altogether, it's necessary to examine the details of list construction.
</p><p>왜 이런 일이 일어나는 가를 이해하고 더 나아가 이러한 문제점을 피해나갈 방법을 이해하기 위해서, 리스트 형성에대한 세부과정을 검토하는 것이 필요합니다.
</p>
<h3 name="Making_a_List"> Making a List </h3>
<h3 name=".EB.A6.AC.EC.8A.A4.ED.8A.B8_.EB.A7.8C.EB.93.A4.EA.B8.B0"> 리스트 만들기 </h3>
<p>First, we consider a single, pure list item. This list item has no marker (otherwise known as a "bullet"), and is not yet part of a list itself. It hangs alone in the void, simple and unadorned., as shown in Figure 1.
</p><p>먼저, 한개의 단순한 리스트 아이템을 생각해봅시다. 이 리스트 아이템엔 아무런 마커(불렛이라고도 알려져 있습니다)도 없고, 아직 그자체로 어떤 리스트의 부분이 아닙니다. 그림 1에서 보이는 바와같이, 단순하고 아무 치장도 없는 채로 그냥 혼자 허공에 떠 있는 상태라고 할 수 있습니다. 
</p><p><img align="none" alt="Figure 1" src="File:ko/Media_Gallery/Consistent-list-indentation-figure1.gif">
</p><p>That dotted red border represents outer edges of the the content-area of the list item. Remember that, at this point, the list item has no padding or borders. If we add two more list items, we get a result like that shown in Figure 2.
</p><p>빨간 점선으로된 경계선은 리스트 아이템의 내용물-지역의 바깥 경계를 나타내고 있습니다. 이 시점에서 리스트 아이템은 패딩이나 보더(경계)를 가지고 있지 않다는 점을 상기하십시오. 만약 2개의 리스트 아이템을 더 추가 한다면, 그림 2에 보여진 것과같은 결과를 얻게 될 것입니다. 
</p><p><img align="none" alt="Figure 2" src="File:ko/Media_Gallery/Consistent-list-indentation-figure2.gif">
</p><p>Now we wrap these in a parent element; in this case, we'll wrap them in an unordered list (i.e., <code>&lt;ul&gt;</code>). According to the CSS box model, the list items' boxes must be displayed within the parent element's content area. Since that parent has no padding or margins yet, we get the situation shown in Figure 3.
</p><p>이제 이 아이템들을 부모 엘리먼트로 랩핑(포장)합니다; 이 경우, 우리는 아이템들을 순서없는 리스트로 (즉, <code>&lt;ul&gt;</code>) 랩핑합니다. CSS 상자(박스) 모델에 의하면, 리스트 아이템들의 상자들은 부모 엘리먼트의 내용물-지역안에 디스플레이 되어야만 합니다. 이 부모 엘리먼트에 패딩이나 마진이 아직 없으므로 우리는 그림 3에 보여진 것과 같은 상황을 맞이하게 됩니다. 
</p><p><img align="none" alt="Figure 3" src="File:ko/Media_Gallery/Consistent-list-indentation-figure3.gif">
</p><p>Here, the dotted blue border shows us the edges of the <code>&lt;ul&gt;</code> element's content area. Since we have no padding for the <code>&lt;ul&gt;</code> element, its content wraps snugly around the three list items.
</p><p>여기서, 푸른 점선 경계선은 <code>&lt;ul&gt;</code>엘리먼트의 내용물 지역의 경계를 보여줍니다. <code>&lt;ul&gt;</code>엘리먼트에 패딩이 없으므로 엘리먼트의 내용물은 세 리스트 아이템들을 촘촘하게 랩핑하게 됩니다.
</p><p>Now we add the list item markers. Since this is an unordered list, we'll add traditional filled-circle "bullets," as shown in Figure 4.
</p><p>이제, 리스트 아이템 마커를 추가합니다. 이 리스트는 순서가 없는 리스트이므로, 그림 4에 보여긴 것 같은 전통적인 채워진 원 불렛을 추가합니다.
</p><p><img align="none" alt="Figure 4" src="File:ko/Media_Gallery/Consistent-list-indentation-figure4.gif">
</p><p>Visually, the markers are <i>outside</i> the content area of the <code>&lt;ul&gt;</code>, but that's not the important part here. What's key is that the markers are placed outside the "principal box" of the <code>&lt;li&gt;</code> elements, not the <code>&lt;ul&gt;</code>. They're sort of like appendages to the list items, hanging outside the content-area of the <code>&lt;li&gt;</code> but still attached to the <code>&lt;li&gt;</code>.
</p><p>보여지는 것으론, 마커들은 <code>&lt;ul&gt;</code>의 내용물-지역의 <i>바깥</i>에 있으나, 여기서 이점은 그다지 중요하지 않습니다. 중요한 점은 마커들이 <code>&lt;li&gt;</code>엘리먼트들의 "principal 상자"의 밖에 놓여진다는 점입니다. 이 마커들은 <code>&lt;lt&gt;</code>의 내용물-지역의 밖에 매달려 있으나 여전히 <code>&lt;li&gt;</code>에 부착되어있는 일종의 리스트 아이템들의 꼬리표같다고 할 수 있습니다. 
</p><p>This is why, in every browser except Internet Explorer for Windows, markers are placed outside any border set for an <code>&lt;li&gt;</code> element, assuming the value of <code>list-style-position</code> is <code>outside</code>. If it's changed to <code>inside</code>, then the markers are brought inside the <code>&lt;li&gt;</code>'s content, as though they're an inline box placed at the very beginning of the <code>&lt;li&gt;</code>.
</p><p>바로 이런 이유로, 윈도우의 익스플로러을 제외한 모든 브라우저에서, 마커들이 <code>&lt;li&gt;</code>엘리먼트에 지정된 보더밖에 놓이며, <code>list-sytle-position</code>값으로 <code>outside</code>를 취하게 되는 것입니다. 만일 값이 <code>inside</code>로 바뀌게 되면, 마커들은, 비록 <code>&lt;li&gt;</code>의 바로 시작부분에 놓여진 inline 상자임에도 불구하고, <code>&lt;li&gt;</code> 안쪽으로 옯겨지게 됩니다. 
</p>
<h3 name="Indenting_It_Twice"> Indenting It Twice </h3>
<h3 name=".EB.91.90.EB.B2.88_.EB.93.A4.EC.97.AC.EC.93.B0.EA.B8.B0"> 두번 들여쓰기 </h3>
<p>So how will all this appear in a document? At the moment, we have a situation analogous to these styles:
</p><p>그럼 이 모든게 문서에서는 어떻게 나타날까요? 현재, 우리는 아래의 스타일들에 비견되는 상황에 있다고 할 수 있습니다.
</p>
<pre>ul, li {margin-left: 0; padding-left: 0;}</pre>
<p>If we dropped this list into a document as-is, there would be no apparent indentation and the markers would be in danger of falling off the left edge of the browser window.
</p><p>만일 이 리스트를 있는 그대로 문서에 삽입할 경우, 가시적 들여쓰기 효과는 나타나지 않고, 마커들은 브라우저 윈도우의 왼쪽끝으로 잘려나갈 상황에 처하게 될것입니다.
</p><p>In order to avoid this and get some indentation, there are really only three options available to browser implementors.
</p><p>이를 피하고 들여쓰기효과를 얻을 목적으로 브라우저 개발자들에게 사용가능한 옵션은 다음의 세가지밖에 없습니다.
</p>
<ol><li> Give each <code>&lt;li&gt;</code> element a left margin.
</li><li> Give the <code>&lt;ul&gt;</code> element a left margin.
</li><li> Give the <code>&lt;ul&gt;</code> element some left padding.
</li></ol>
<ol><li> 각 <code>&lt;li&gt;</code> 엘리먼트에 왼쪽 마진을 준다.
</li><li> <code>&lt;ul&gt;</code> 엘리먼트에 왼쪽 마진을 준다.
</li><li> <code>&lt;ul&gt;</code> 엘리먼트에 왼쪽 패딩을 준다.
</li></ol>
<p><br>
As it turns out, nobody seems to have used the first option. The second option was taken by Internet Explorer for Windows and Macintosh, and Opera. The third was adopted by Gecko, and by extension all the browsers that embed it.
</p><p>결과론적으로, 누구도 첫번째 옵션을 사용하지는 않는것 같습니다. 두번째 옵션은 윈도우 익스플로러, 매킨토쉬, 그리고 오페라에서 적용되었습니다. 세번째 옵션은 Gecko 와 범주상 이를 임베드해서 사용하는 모든 브라우저들에 적용되었다고 할 수 있습니다. 
</p><p>Let's look at the two approaches for a moment. In Internet Explorer and Opera, the lists are indented by setting a left margin of 40 pixels on the <code>&lt;ul&gt;</code> element. If we apply a background color to the <code>&lt;ul&gt;</code> element and leave the list item and <code>&lt;ul&gt;</code> borders in place, we get the result shown in Figure 5. 
</p><p>이 두 접근법에 대해서 잠깐 살펴봅시다. 익스플로러와 오페라의 경우, 리스트들은 <code>&lt;ul&gt;</code>에 40 픽셀의 왼쪽 마진을 줌으로써 들여쓰여지게 됩니다. 만일 <code>&lt;ul&gt;</code> 엘리먼트에 배경색을 적용하고 리스트 아이템과 <code>&lt;ul&gt;</code> 보더들을 그냥 놔둘 경우, 그림 5에서 보이는 것과 같은 결과를 얻게 됩니다.
</p><p><img align="none" alt="Figure 5" src="File:ko/Media_Gallery/Consistent-list-indentation-figure5.gif">
</p><p>Gecko, on the other hand, sets a left <i>padding</i> of 40 pixels for the <code>&lt;ul&gt;</code> element, so given the exact same styles as were used to produce Figure 5, loading the example into a Gecko-based browser gives us Figure 6.
</p><p>반면, Gecko는 <code>&lt;ul&gt;</code> 엘리먼트에 대해서 40픽셀의 왼쪽 <i>패딩</i>을 줍니다. 따라서 그림 5를 만들어내는데 사용된 것과 똑 같은 스타일을 적용하게 된다고 가정하면, Gecko기반 브라우저로 예제를 로딩했을때 그림 6과 같은 그림을 보게 됩니다.
</p><p><img align="none" alt="Figure 6" src="File:ko/Media_Gallery/Consistent-list-indentation-figure6.gif">
</p><p>As we can see, the markers remain attached to the <code>&lt;li&gt;</code> elements, no matter where they are. The difference is entirely in how the <code>&lt;ul&gt;</code> is styled. We can only see the difference if we try to set a background or border on the <code>&lt;ul&gt;</code> element.
</p><p>보이는 바와 같이, 마커들은, 어디에 있게 되건간에, <code>&lt;li&gt;</code> 엘리먼트에 붙여진 채로 남아 있습니다. 차이점은 전적으로 <code>&lt;ul&gt;</code>가 어떤식으로 스타일을 갖추게 되는가에 달려있습니다. 이 차이점은 <code>&lt;ul&gt;</code> 엘리먼트에 배경색이나 보더를 지정하려고 할 경우에만 나타나게 됩니다.
</p>
<h3 name="Finding_Consistency"> Finding Consistency </h3>
<h3 name=".EC.9D.BC.EA.B4.80.EC.84.B1_.EC.B0.BE.EA.B8.B0"> 일관성 찾기 </h3>
<p>Boil it all down, and what we're left with is this: if you want consistent rendering of lists between Gecko, Internet Explorer, and Opera, you need to set <b>both</b> the left margin and left padding of the <code>&lt;ul&gt;</code> element. We can ignore <code>&lt;li&gt;</code> altogether for these purposes. If you want to reproduce the default display in Netscape 6.x, you write:
</p><p>모든것을 정리해보면 이런 결론에 도달하게 됩니다. 즉, Gecko, 익스플로러, 그리고 오페라 간에 리스트을 일관성있게 렌더링하고 싶으면, <code>&lt;ul&gt;</code> 엘리먼트의 왼쪽 마진 그리고 왼쪽 패딩 <i>둘다</i> 지정해야 한다는 것입니다. 이런 목적으로 <code>&lt;li&gt;</code> 을 아예 무시해 버릴 수도 있습니다. 넷스케이프 6.x 에서 디폴트 디스플레이로 돌아가고 싶다면:
</p>
<pre>ul {margin-left: 0; padding-left: 40px;}</pre>
<p>If you're more interested in following the Explorer/Opera model, then:
</p><p>만약, 익스플로러/오페라 모델을 따르길 원한다면:
</p>
<pre>ul {margin-left: 40px; padding-left: 0;}</pre>   
<p>라고 쓰면 됩니다.
</p><p>Of course, you can fill in your own preferred values. Set both to <code>1.25em</code>, if you like -- there's no reason why you have to stick with pixel-based indentation. If you want to reset lists to have no indentation, then you still have to zero out both padding and margin:
</p><p>물론, 자기 자신이 선호하는 값을 써 넣을 수도 있습니다. 원한다면 둘다 <code>1.25em</code>로 정해 줄 수도 있습니다 -- 픽셀에 기반한 들여쓰기에만 묶여있을 이유는 없습니다. 만일 리스트들이 들여쓰기를 하지 않도록 리셋하고 싶으면, 패딩과 마진 값을 0으로 정해 주어야만 합니다.
</p>
<pre>ul {margin-left: 0; padding-left: 0;}</pre>
<p>Remember, though, that in so doing, you'll have the bullets hanging outside the list and its parent element. If the parent is the <code>body</code>, there's a strong chance your bullets will be completely outside the browser window, and thus will not be visible. 
</p><p>하지만, 그렇게 하면, 불렛들이 리스트와 부모 엘리먼트의 바깥쪽에 매달려 있게 된다는 점을 기억하세요. 만일 <code>body</code>가 부모일 경우, 불렛이 브라우저 윈도우 밖으로 완전히 나가있게 되서, 보이지 않게 될 가능성이 아주 높습니다.
</p>
<h3 name="Conclusion"> Conclusion </h3>
<h3 name=".EA.B2.B0.EB.A1.A0"> 결론 </h3>
<p>In the end, we can see that none of the browsers mentioned in this article is right or wrong about how they lay out lists. They use different default styles, and that's where the problems creep in. By making sure you style both the left padding and left margin of lists, you can find much greater cross-browser consistency in your list indentation.
</p><p>결국, 여기에 언급된 브라우져들이 리스트를 레이아웃하는 방식에있어서 올바르거나 그르거나 하지 않다는 것을 알 수 있습니다. 각 브라우저는 다른 디폴트 스타일을 사용하고 있으며, 거기서 문제점들이 기어들어 오게 되는 것입니다. 리스트의 왼쪽 패딩과 왼쪽 마진 둘다를 확실하게 스타일 지정 함으로써  리스트 들여쓰기에 있어서 브라우저간 일관성을 보다 획기적으로 유지할 수 있게 되는 것입니다.
</p><p><br>
</p>
<h3 name="Recommendations"> Recommendations </h3>
<h3 name=".EA.B6.8C.EC.9E.A5_.EC.82.AC.ED.95.AD"> 권장 사항 </h3>
<ul><li> When altering the indentation of lists, make sure to set both the padding and margin.
</li></ul>
<div class="originaldocinfo">
<h3 name="Original_Document_Information"> Original Document Information </h3>
<ul><li> Author(s): Eric A. Meyer, Netscape Communications
</li><li> Last Updated Date: Published 30 Aug 2002
</li><li> Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
</li><li> Note: This reprinted article was originally part of the DevEdge site.
</li></ul>
</div>
{{ wiki.languages( { "fr": "fr/Indentation_homog\u00e8ne_des_listes" } ) }}
현재 리비전 복원