From 9045df74b1841d5dade1e7011795dd6a7e9e989d Mon Sep 17 00:00:00 2001 From: Hyuk Kwon <82810259+poiu03290@users.noreply.github.com> Date: Sun, 6 Aug 2023 17:03:09 +0900 Subject: [PATCH] =?UTF-8?q?ko:=20CSS=20=EB=AA=A9=EB=A1=9D=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=EB=A7=81=20=EC=9D=BC=EB=B6=80=20=EB=B2=88?= =?UTF-8?q?=EC=97=AD=20(#14509)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update index.md * Update index.md * Update index.md --------- Co-authored-by: Kyle --- .../css/styling_text/styling_lists/index.md | 157 +++++++++--------- 1 file changed, 78 insertions(+), 79 deletions(-) diff --git a/files/ko/learn/css/styling_text/styling_lists/index.md b/files/ko/learn/css/styling_text/styling_lists/index.md index 418679facbed56..40a36a4ea9a2f5 100644 --- a/files/ko/learn/css/styling_text/styling_lists/index.md +++ b/files/ko/learn/css/styling_text/styling_lists/index.md @@ -12,15 +12,15 @@ slug: Learn/CSS/Styling_text/Styling_lists 전제조건: - Basic computer literacy, HTML basics (study + 기본적인 컴퓨터의 이해, HTML 기본 ( Introduction to HTML), CSS basics (study + >HTML 소개 둘러보기), CSS 기본 ( Introduction to CSS), + >CSS 소개 둘러보기), CSS text and font fundamentalsCSS 글꼴과 폰트 기본. @@ -33,12 +33,12 @@ slug: Learn/CSS/Styling_text/Styling_lists ## 간단한 목록 예제 -우선, 간단한 목록 예제를 봅시다. 이 기사 전체에서 우리는 순서가 없는, 순서가 있는, 설명 목록을 살펴볼 것입니다 — 모두 유사한 스타일링 기능이 있으며, 일부 유형은 목록 유형과 다릅니다. 스타일이 지정되지 않은 예제는 [Github 에서 가능](http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html) 합니다 ([소스 코드](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html) 도 확인하십시오.) +우선, 간단한 목록 예제를 봅시다. 이 기사 전체에서 우리는 순서가 없는, 순서가 있는, 설명 목록을 살펴볼 것입니다. 모두 유사한 스타일링 기능이 있으며, 일부 유형은 목록 유형과 다릅니다. 스타일이 지정되지 않은 예제는 [Github 에서 가능](http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html) 합니다 ([소스 코드](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html) 도 확인하십시오.) -목록 예제의 HTML 은 다음과 같습니다: +목록 예제의 HTML 은 다음과 같습니다. ```html -

Shopping (unordered) list

+

장바구니

Paragraph for reference, paragraph for reference, paragraph for reference, @@ -46,13 +46,13 @@ slug: Learn/CSS/Styling_text/Styling_lists

-

Recipe (ordered) list

+

레시피 목록

Paragraph for reference, paragraph for reference, paragraph for reference, @@ -68,7 +68,7 @@ slug: Learn/CSS/Styling_text/Styling_lists

  • Fill pita with salad, hummus, and fried halloumi.
    • -

    Ingredient description list

    +

    성분 설명 목록

    Paragraph for reference, paragraph for reference, paragraph for reference, @@ -93,19 +93,19 @@ slug: Learn/CSS/Styling_text/Styling_lists ``` -If you go to the live example now and investigate the list elements using [browser developer tools](/ko/docs/Learn/Common_questions/What_are_browser_developer_tools), you'll notice a couple of styling defaults: +지금 라이브 예제로 이동하여 [브라우저 개발자 도구](/ko/docs/Learn/Common_questions/What_are_browser_developer_tools)를 사용하여 목록 요소를 조사하면, 몇 가지 스타일 기본값을 알 수 있습니다.: -- The {{htmlelement("ul")}} and {{htmlelement("ol")}} elements have a top and bottom {{cssxref("margin")}} of `16px` (`1em`) and a {{cssxref("padding-left")}} of `40px` (`2.5em`.) -- The list items ({{htmlelement("li")}} elements) have no set defaults for spacing. -- The {{htmlelement("dl")}} element has a top and bottom {{cssxref("margin")}} of `16px` (`1em`), but no padding set. -- The {{htmlelement("dd")}} elements have {{cssxref("margin-left")}} of `40px` (`2.5em`.) -- The {{htmlelement("p")}} elements we've included for reference have a top and bottom {{cssxref("margin")}} of `16px` (`1em`), the same as the different list types. +- {{htmlelement("ul")}} 및 {{htmlelement("ol")}} 요소의 위쪽 및 아래쪽 {{cssxref("margin")}}은 `16px`(`1em`)이고 {{cssxref("padding-left")}}은 `40px`(`2.5em`)입니다. +- 목록 항목({{htmlelement("li")}} 요소)에는 간격에 대한 기본값이 설정되어 있지 않습니다. +- {{htmlelement("dl")}} 요소에는 `16px`(`1em`)의 상단 및 하단 {{cssxref("margin")}}이 있지만 안쪽 여백 세트는 없습니다. +- {{htmlelement("dd")}} 요소의 {{cssxref("margin-left")}}는 `40px`(`2.5em`)입니다. +- 참조용으로 포함된 {{htmlelement("p")}} 요소의 상단 및 하단 {{cssxref("margin")}}은 다른 목록 유형과 마찬가지로 `16px`(`1em`)입니다. -## Handling list spacing +## 목록 간격 처리 -When styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other (you can see the [finished styled example](http://mdn.github.io/learning-area/css/styling-text/styling-lists/) on Github, and [find the source code](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html) too.) +목록 스타일을 지정할 때 스타일을 조정하여 주변 요소(예: 단락 및 이미지, 때로는 수직 리듬이라고도 함)와 동일한 세로 간격을 유지하고 서로 동일한 가로 간격을 유지해야 합니다(Github에서 완성된 [스타일 예제](http://mdn.github.io/learning-area/css/styling-text/styling-lists/)를 볼 수 있으며 [소스 코드](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html)도 찾을 수 있음). -The CSS used for the text styling and spacing is as follows: +텍스트 스타일 및 간격에 사용되는 CSS는 다음과 같습니다. ```css /* General styles */ @@ -147,22 +147,22 @@ dd { } ``` -- The first rule sets a sitewide font and a baseline font size of 10px. These are inherited by everything on the page. -- Rules 2 and 3 set relative font sizes for the headings, different list types (the children of the list elements inherit these), and paragraphs. This means that each paragraph and list will have the same font size and top and bottom spacing, helping to keep the vertical rhythm consistent. -- Rule 4 sets the same {{cssxref("line-height")}} on the paragraphs and list items — so the paragraphs and each individual list item will have the same spacing between lines. This will also help to keep the vertical rhythm consistent. -- Rules 5 and 6 apply to the description list — we set the same `line-height` on the description list terms and descriptions as we did with the paragraphs and list items. Again, consistency is good! We also make the description terms have bold font, so they visually stand out easier. +- 첫 번째 규칙은 사이트 전체 글꼴과 기준 글꼴 크기를 10px로 설정합니다. 이는 페이지의 모든 항목에 상속됩니다. +- 두번째 규칙과 세번째 규칙은 제목, 다양한 목록 유형(목록 요소의 자식이 이를 상속함) 및 단락에 대한 상대 글꼴 크기를 설정합니다. 즉, 각 단락과 목록은 동일한 글꼴 크기와 위쪽 및 아래쪽 간격을 가지므로 세로 리듬을 일관되게 유지하는 데 도움이 됩니다. +- 네번째 규칙은 단락과 목록 항목에 동일한 {{cssxref("line-height")}}를 설정하므로 단락과 각 개별 목록 항목은 줄 사이의 간격이 동일합니다. 이것은 또한 수직 리듬을 일관되게 유지하는 데 도움이 됩니다. +- 다섯번째 규칙과 여섯번째 규칙은 설명 목록에 적용됩니다. 단락 및 목록 항목에서와 마찬가지로 설명 목록 용어 및 설명에 동일한 `line-height`를 설정했습니다. 다시 말하지만 일관성이 좋습니다! 또한 설명 용어를 굵은 글꼴로 만들어 시각적으로 더 쉽게 눈에 띕니다. -## List-specific styles +## 목록별 스타일 -Now we've looked at general spacing techniques for lists, let's explore some list-specific properties. There are three properties you should know about to start with, which can be set on {{htmlelement("ul")}} or {{htmlelement("ol")}} elements: +이제 목록에 대한 일반적인 간격 기술을 살펴보았습니다. 이제 몇 가지 목록 관련 속성을 살펴보겠습니다. {{htmlelement("ul")}} 또는 {{htmlelement("ol")}} 요소에 설정할 수 있는 세 가지 속성으로 시작해야 합니다. -- {{cssxref("list-style-type")}}: Sets the type of bullets to use for the list, for example, square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list. -- {{cssxref("list-style-position")}}: Sets whether the bullets appear inside the list items, or outside them before the start of each item. -- {{cssxref("list-style-image")}}: Allows you to use a custom image for the bullet, rather than a simple square or circle. +- {{cssxref("list-style-type")}}: 목록에 사용할 글머리 기호 유형을 설정합니다. 예를 들어 정렬되지 않은 목록의 경우 사각형 또는 원형 글머리 기호, 순서가 지정된 목록의 경우 숫자, 문자 또는 로마 숫자입니다. +- {{cssxref("list-style-position")}}: 글머리 기호가 목록 항목 내부에 표시되는지 아니면 각 항목 시작 전에 목록 항목 외부에 표시되는지 설정합니다. +- {{cssxref("list-style-image")}}: 간단한 사각형이나 원이 아닌 글머리 기호에 대한 사용자 지정 이미지를 사용할 수 있습니다. -### Bullet styles +### 글머리 기호 스타일 -As mentioned above, the {{cssxref("list-style-type")}} property allows you to set what type of bullet to use for the bullet points. In our example, we've set the ordered list to use uppercase roman numerals, with: +위에서 언급했듯이, {{cssxref("list-style-type")}} 속성을 사용하면 글머리 기호에 사용할 글머리 기호 유형을 설정할 수 있습니다. 예시에서는 대문자 로마 숫자를 사용하도록 정렬된 목록을 다음과 같이 설정했습니다. ```css ol { @@ -170,17 +170,17 @@ ol { } ``` -This gives us the following look: +이는 다음과 같은 모습을 보여줍니다. ![an ordered list with the bullet points set to appear outside the list item text.](outer-bullets.png) -You can find a lot more options by checking out the {{cssxref("list-style-type")}} reference page. +{{cssxref("list-style-type")}} 참조 페이지를 확인하면 더 많은 옵션을 찾을 수 있습니다. -### Bullet position +### 글머리 기호 위치 -The {{cssxref("list-style-position")}} property sets whether the bullets appear inside the list items, or outside them before the start of each item. The default value is `outside`, which causes the bullets to sit outside the list items, as seen above. +{{cssxref("list-style-position")}} 속성은 글머리 기호가 목록 항목 내부에 표시되는지 또는 각 항목 시작 전에 목록 항목 외부에 표시되는지를 설정합니다. 기본값은 `outside`이며, 위에 표시된 것처럼 글머리 기호가 목록 항목 외부에 위치합니다. -If you set the value to `inside`, the bullets will sit inside the lines: +값을 `inside`로 설정하면 글머리 기호가 줄 안쪽에 표시됩니다. ```css ol { @@ -191,9 +191,9 @@ ol { ![an ordered list with the bullet points set to appear inside the list item text.](inner-bullets.png) -### Using a custom bullet image +### 맞춤 글머리 기호 이미지 사용 -The {{cssxref("list-style-image")}} property allows you to use a custom image for your bullet. The syntax is pretty simple: +{{cssxref("list-style-image")}} 속성을 사용하면 글머리 기호에 맞춤 이미지를 사용할 수 있습니다. 구문은 매우 간단합니다. ```css ul { @@ -201,9 +201,9 @@ ul { } ``` -However, this property is a bit limited in terms of controlling the position, size, etc. of the bullets. You are better off using the {{cssxref("background")}} family of properties, which you'll learn a lot more about in the [Styling boxes](/ko/docs/Learn/CSS/Styling_boxes) module. For now, here's a taster! +그러나 이 속성은 글머리 기호의 위치, 크기 등을 제어하는 ​​측면에서 약간 제한됩니다. [스타일 지정 상자](/ko/docs/Learn/CSS/Styling_boxes) 모듈에서 자세히 알아볼 {{cssxref("background")}} 속성 계열을 사용하는 것이 좋습니다. 지금은 맛보기가 있습니다! -In our finished example, we have styled the unordered list like so (on top of what you've already seen above): +완성된 예제에서는 정렬되지 않은 목록의 스타일을 다음과 같이 지정했습니다.(위에서 이미 본 것 위에) ```css ul { @@ -220,24 +220,23 @@ ul li { } ``` -Here we've done the following: +여기서 우리는 다음을 수행했습니다. -- Set the {{cssxref("padding-left")}} of the {{htmlelement("ul")}} down from the default `40px` to `20px`, then set the same amount on the list items. This is so that overall the list items are still lined up with the order list items and the description list descriptions, but the list items have some padding for the background images to sit inside. If we didn't do this, the background images would overlap with the list item text, which would look messy. -- Set the {{cssxref("list-style-type")}} to `none`, so that no bullet appears by default. We're going to use {{cssxref("background")}} properties to handle the bullets instead. -- Inserted a bullet onto each unordered list item. The relevant properties are as follows: +- {{htmlelement("ul")}}의 {{cssxref("padding-left")}}를 기본 `40px`에서 `20px`로 아래로 설정한 다음 목록 항목에 동일한 양을 설정합니다. 이는 전체 목록 항목이 여전히 주문 목록 항목 및 설명 목록 설명과 정렬되지만 목록 항목에는 배경 이미지가 내부에 놓일 수 있도록 약간의 패딩이 있습니다. 이렇게 하지 않으면 배경 이미지가 목록 항목 텍스트와 겹쳐 지저분해 보일 수 있습니다. +- 기본적으로 글머리 기호가 표시되지 않도록 {{cssxref("list-style-type")}}을 `none`으로 설정합니다. 대신 글머리 기호를 처리하기 위해 {{cssxref("background")}} 속성을 사용할 것입니다. +- 순서가 지정되지 않은 각 목록 항목에 글머리 기호를 삽입했습니다. 관련 속성은 다음과 같습니다. + - {{cssxref("background-image")}}: 글머리 기호로 사용하려는 이미지 파일의 경로를 참조합니다. + - {{cssxref("background-position")}}: 선택한 요소의 배경에서 이미지가 나타날 위치를 정의합니다. 이 경우에는 `0 0`을 의미합니다. 이는 글머리 기호가 각 목록 항목의 왼쪽 상단에 나타남을 의미합니다. + - {{cssxref("background-size")}}: 배경 이미지의 크기를 설정합니다. 우리는 이상적으로 글머리 기호가 목록 항목과 같은 크기(또는 아주 약간 작거나 더 크게)를 원합니다. 우리는 `1.6rem`(`16px`)의 크기를 사용하고 있는데, 이는 글머리 기호가 안쪽에 놓이도록 허용한 `20px` 안쪽 여백과 매우 잘 맞습니다. + - {{cssxref("background-repeat")}}: 기본적으로 배경 이미지는 사용 가능한 배경 공간을 채울 때까지 반복됩니다. 각각의 경우에 하나의 이미지 사본만 삽입하기를 원하므로 `no-repeat` 값으로 설정합니다. - - {{cssxref("background-image")}}: This references the path to the image file you want to use as the bullet. - - {{cssxref("background-position")}}: This defines where in the background of the selected element the image will appear — in this case we are saying `0 0`, which means the bullet will appear in the very top left of each list item. - - {{cssxref("background-size")}}: This sets the size of the background image. We ideally want the bullets to be the same size as the list items (or very slightly smaller or larger). We are using a size of `1.6rem` (`16px`), which fits very nicely with the `20px` padding we've allowed for the bullet to sit inside — 16px plus 4px of space between the bullet and the list item text works well. - - {{cssxref("background-repeat")}}: By default, background images repeat until they fill up the available background space. We only want one copy of the image inserted in each case, so we set this to a value of `no-repeat`. - -This gives us the following result: +결과는 다음과 같습니다. ![an unordered list with the bullet points set as little star images](list_formatting.png) -### list-style shorthand +### 목록 스타일 속기 -The three properties mentioned above can all be set using a single shorthand property, {{cssxref("list-style")}}. For example, the following CSS: +위에서 언급한 세 가지 속성은 모두 {{cssxref("list-style")}}이라는 단일 속기 속성을 사용하여 설정할 수 있습니다. 예를 들어 다음 CSS는 다음과 같습니다. ```css ul { @@ -247,7 +246,7 @@ ul { } ``` -Could be replaced by this: +다음으로 대체할 수 있습니다. ```css ul { @@ -255,15 +254,15 @@ ul { } ``` -The values can be listed in any order, and you can use one, two or all three (the default values used for the properties that are not included are `disc`, `none`, and `outside`). If both a `type` and an `image` are specified, the type is used as a fallback if the image can't be loaded for some reason. +값은 임의의 순서로 나열할 수 있으며 1개, 2개 또는 3개 모두를 사용할 수 있습니다(포함되지 않은 속성에 사용되는 기본값은 `disc`, `none`, `outside`임). `type`과 `image`가 모두 지정된 경우 어떤 이유로 이미지를 로드할 수 없는 경우 해당 유형이 폴백으로 사용됩니다. -## Controlling list counting +## 목록 계산 제어 -Sometimes you might want to count differently on an ordered list — e.g. starting from a number other than 1, or counting backwards, or counting in steps of more than 1. HTML and CSS have some tools to help you here. +때로는 순서가 지정된 목록에서 다르게 계산하고 싶을 수 있습니다. 1이 아닌 숫자부터 시작하거나 거꾸로 세거나 1보다 많은 단계로 세십시오. HTML과 CSS에는 여기에서 도움이 되는 몇 가지 도구가 있습니다. ### start -The [`start`](/ko/docs/Web/HTML/Element/ol#start) attribute allows you to start the list counting from a number other than 1. The following example: +{{htmlattrxref("start","ol")}} 속성을 사용하면 1이 아닌 숫자부터 카운트하는 목록을 시작할 수 있습니다. 예시는 다음과 같습니다. ```html

      @@ -276,13 +275,13 @@ The [`start`](/ko/docs/Web/HTML/Element/ol#start) attribute allows you to start
    ``` -Gives you this output: +다음과 같은 출력을 제공합니다. {{ EmbedLiveSample('start', '100%', 150) }} ### reversed -The [`reversed`](/ko/docs/Web/HTML/Element/ol#reversed) attribute will start the list counting down instead of up. The following example: +{{htmlattrxref("reversed","ol")}} 속성은 목록을 위로 카운트하는 대신 카운트 다운을 시작합니다. 예시는 다음과 같습니다. ```html
      @@ -295,15 +294,15 @@ The [`reversed`](/ko/docs/Web/HTML/Element/ol#reversed) attribute will start the
    ``` -Gives you this output: +다음과 같은 출력을 제공합니다. {{ EmbedLiveSample('reversed', '100%', 150) }} -> **참고:** If there are more list items in a reversed list than the value of the `start` attribute, the count will continue to zero and then into negative values. +> **참고:** 반전된 목록에 `start` 속성 값보다 더 많은 목록 항목이 있는 경우 개수는 계속해서 0이 된 다음 음수 값이 됩니다. ### value -The [`value`](/ko/docs/Web/HTML/Element/ol#value) attribute allows you to set your list items to specific numerical values. The following example: +{{htmlattrxref("value","ol")}} 속성을 사용하면 목록 항목을 특정 숫자 값으로 설정할 수 있습니다. 예시는 다음과 같습니다. ```html
      @@ -316,22 +315,22 @@ The [`value`](/ko/docs/Web/HTML/Element/ol#value) attribute allows you to set yo
    ``` -Gives you this output: +다음과 같은 출력을 제공합니다. {{ EmbedLiveSample('value', '100%', 150) }} -> **참고:** Even if you are using a non-number {{cssxref("list-style-type")}}, you still need to use the equivalent numerical values in the `value` attribute. +> **참고:** 숫자가 아닌 {{cssxref("list-style-type")}}을 사용하는 경우에도 `value` 속성에 동일한 숫자 값을 사용해야 합니다. -## Active learning: Styling a nested list +## 능동적 학습: 중첩 목록 스타일 지정 -In this active learning session, we want you to take what you've learned above and have a go at styling a nested list. We've provided you with the HTML, and we want you to: +이 활성 학습 세션에서는 위에서 배운 내용을 사용하여 중첩 목록의 스타일을 지정해 보기를 바랍니다. HTML을 제공했고, 그 다음을 수행하시기 바랍니다. -1. Give the unordered list square bullets. -2. Give the unordered list items and the ordered list items a line height of 1.5 of their font-size. -3. Give the ordered list lower alphabetical bullets. -4. Feel free to play with the list example as much as you like, experimenting with bullet types, spacing, or whatever else you can find. +1. 정렬되지 않은 목록에 사각형 글머리 기호를 지정합니다. +2. 정렬되지 않은 목록 항목과 정렬된 목록 항목에 글꼴 크기의 1.5 `line-height`를 지정합니다. +3. 순서가 지정된 목록에 하위 알파벳 글머리 기호를 지정합니다. +4. 글머리기호 유형, 간격 또는 찾을 수 있는 모든 항목을 실험하면서 목록 예제를 원하는 만큼 자유롭게 사용해 보십시오. -If you make a mistake, you can always reset it using the _Reset_ button. If you get really stuck, press the _Show solution_ button to see a potential answer. +실수한 경우 _재설정_ 버튼을 사용하여 언제든지 재설정할 수 있습니다. 정말 막히면 _해결 방법 표시_ 버튼을 눌러 잠재적인 답변을 확인하세요. ```html hidden