initial commit

1 files changed, 318 insertions, 0 deletions

diff --git a/files/ko/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ko/learn/css/building_blocks/backgrounds_and_borders/index.html
new file mode 100644
index 0000000000..a5e2983ea7
--- /dev/null
+++ b/files/ko/learn/css/building_blocks/backgrounds_and_borders/index.html
@@ -0,0 +1,318 @@
+---
+title: 배경 및 테두리
+slug: Learn/CSS/Building_blocks/Backgrounds_and_borders
+translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div>
+
+<p>이번 수업에서는 CSS 배경과 테두리로 할 수 있는 창의적인 작업을 살펴보겠습니다. 그라데이션 (gradients), 배경 이미지, 둥근 테두리를 추가하는 것에서 배경과 테두리는 CSS 의 많은 스타일 질문에 대한 답입니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제조건:</th>
+   <td>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식,  HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 , CSS 작동 방식 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 학습)</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>박스의 배경과 테두리 스타일을 지정하는 방법 배우기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="CSS_의_스타일링_배경">CSS 의 스타일링 배경</h2>
+
+<p>CSS {{cssxref("background")}} 속성은 이 수업에서 만나게 될 많은 background longhand 속성의 줄임말 입니다. 스타일 시트에서 복잡한 배경 속성을 발견하면, 한 번에 많은 값을 전달할 수 있으므로 이해하기 어려울 수 있습니다.</p>
+
+<pre class="brush: css"><code>.box {
+  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
+  url(big-star.png) center no-repeat, rebeccapurple;
+} </code>
+</pre>
+
+<p>이 자습서의 뒷부분에서 속기 (shorthand) 작동 방식으로 돌아가지만, 먼저 개별 배경 속성을 보고, CSS 에서 배경으로 수행할 수 있는 다양한 작업을 살펴보겠습니다.</p>
+
+<h3 id="배경_색상">배경 색상</h3>
+
+<p>{{cssxref("background-color")}} 속성은 CSS 의 모든 요소에 대한 배경색을 정의합니다. 이 속성은 유효한 <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code>  를 허용합니다. <code>background-color</code> 는 요소의 내용 및 패딩 박스 아래로 확장됩니다.</p>
+
+<p>아래 예에서는 다양한 색상 값을 사용하여 박스, 제목 및 {{htmlelement("span")}} 요소에 배경색을 추가했습니다.</p>
+
+<p><strong>사용 가능한 <a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a> 값을 사용하여, 이것들을 가지고 놀아보십시오.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p>
+
+<h3 id="배경_이미지">배경 이미지</h3>
+
+<p>{{cssxref("background-image")}} 속성을 사용하면 요소의 배경에 이미지를 표시할 수 있습니다. 아래 예에는 두 개의 박스가 있습니다 — 하나는 박스보다 큰 배경 이미지이고 다른 하나는 별 모양의 작은 이미지 입니다.</p>
+
+<p>이 예제는 배경 이미지에 대한 두 가지를 보여줍니다. 기본적으로 큰 이미지는 박스에 맞게 축소되지 않으므로 작은 이미지만 표시되는 반면, 작은 이미지는 박스를 채우기 위해 바둑판 식으로 배열됩니다. 이 경우 실제 이미지는 단일 별 입니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}</p>
+
+<p><strong>배경 이미지 외에 배경색을 지정하면 이미지가 색상 위에 표시됩니다. 위 예제에 <code>background-color</code> 속성을 추가하여 실제 상태를 확인하십시오.</strong></p>
+
+<h4 id="배경_이미지_반복_제어">배경 이미지 반복 제어</h4>
+
+<p>{{cssxref("background-repeat")}} 속성은 이미지의 타일링 동작을 제어하는 데 사용됩니다. 사용 가능한 값은 다음과 같습니다:</p>
+
+<ul>
+ <li><code>no-repeat</code> — 배경이 반복되지 않도록 합니다.</li>
+ <li><code>repeat-x</code> — 수평으로 반복합니다.</li>
+ <li><code>repeat-y</code> — 수직으로 반복합니다.</li>
+ <li><code>repeat</code> — 기본값; 양방향으로 반복합니다.</li>
+</ul>
+
+<p><strong>아래 예에서 이러한 값을 사용해 보십시오. 값이 <code>no-repeat</code> 로 설정되어 별 하나만 표시됩니다. 다른 값 — <code>repeat-x</code> 및 <code>repeat-y</code> — 를 사용하여 그 효과가 무엇인지 확인하십시오.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}</p>
+
+<h4 id="배경_이미지_크기_조정">배경 이미지 크기 조정</h4>
+
+<p>위의 예에서 배경의 요소보다 커서, 이미지가 크게 잘립니다. 이 경우 <a href="/en-US/docs/Web/CSS/length">길이</a> 나 <a href="/en-US/docs/Web/CSS/percentage">백분율</a> 값을 취할 수 있는 {{cssxref("background-size")}} 속성을 사용하여 이미지 크기를 배경 안에 맞출 수 있습니다.</p>
+
+<p>키워드를 사용할 수도 있습니다:</p>
+
+<ul>
+ <li><code>cover</code> — 브라우저는 이미지를 박스 면적을 완전히 덮으면서 가로 세로 비율을 유지하며 이미지를 충분히 크게 만듭니다. 이 경우 일부 이미지가 박스 외부에 있을 수 있습니다.</li>
+ <li><code>contain</code> — 브라우저는 이미지를 박스 안에 들어가기에 적합한 크기로 만듭니다. 이 경우 이미지의 종횡비가 박스의 종횡비와 다른 경우, 이미지의 한쪽 또는 위쪽과 아래쪽에 간격이 생길 수 있습니다.</li>
+</ul>
+
+<p>아래 예제에서는 위 예제의 큰 이미지를 사용했으며, 박스 안에 길이 단위를 사용하여 크기를 조정했습니다. 이미지가 왜곡된 것을 볼 수 있습니다.</p>
+
+<p>다음을 시도해 보십시오.</p>
+
+<ul>
+ <li>배경 크기를 수정하는 데 사용되는 길이 단위를 변경 하십시오.</li>
+ <li>길이 단위를 제거하고 <code>background-size: cover</code> 또는 <code>background-size: contain</code> 을 사용할 때 어떻게 되는지 확인 하십시오.</li>
+ <li>이미지가 박스보다 작으면, <code>background-repeat</code> 의 값을 변경하여 이미지를 반복할 수 있습니다.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p>
+
+<h4 id="배경_이미지_배치">배경 이미지 배치</h4>
+
+<p>{{cssxref("background-position")}} 속성을 사용하면 적용되는 박스에서 배경 이미지가 나타나는 위치를 선택할 수 있습니다. 박스의 왼쪽 상단 모서리가 <code>(0,0)</code>  이고, 박스가 가로 (<code>x</code>) 및 세로 (<code>y</code>) 축을 따라 위치하는 좌표계를 사용합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: <code>background-position</code> 의 기본값은 <code>(0,0)</code> 입니다.</p>
+</div>
+
+<p>가장 일반적인 <code>background-position</code> 값은 — 수평 값과 수직 값의 두 가지 개별 값을 갖습니다.</p>
+
+<p><code>top</code> 및 <code>right</code> ({{cssxref("background-image")}} 페이지에서 다른 키워드를 찾으십시오) 와 같은 키워드를 사용 할 수 있습니다:</p>
+
+<pre class="brush: css"><code>.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top center;
+} </code>
+</pre>
+
+<p>그리고 <a href="/en-US/docs/Web/CSS/length">길이</a> 및 <a href="/en-US/docs/Web/CSS/percentage">백분율</a>:</p>
+
+<pre class="brush: css"><code>.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: 20px 10%;
+} </code>
+</pre>
+
+<p>키워드 값을 길이 또는 백분율과 혼합할 수도 있습니다. 예를 들면:</p>
+
+<pre class="brush: css">.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px;
+}</pre>
+
+<p>마지막으로, 박스의 특정 모서리로 부터의 거리를 나타내기 위해 4 값 구문을 사용할 수도 있습니다 — 이 경우 길이 단위는 앞에 오는 값과의 offset 입니다. 아래 CSS 에서 우리는 배경을 위쪽에서 20px, 오른쪽에서 10px 로 배치합니다:</p>
+
+<pre class="brush: css"><code>.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px right 10px;
+} </code></pre>
+
+<p><strong>아래 예제를 사용하여 이러한 값을 가지고 실습하면서 박스 안에서 별을 움직이십시오.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: <code>background-position</code> 은 {{cssxref("background-position-x")}} 및 {{cssxref("background-position-y")}} 의 줄임말로, 다른 축 위치 값을 개별적으로 설정할 수 있습니다.</p>
+</div>
+
+<h3 id="그라데이션_Gradient_배경">그라데이션 (Gradient) 배경</h3>
+
+<p>배경에 사용될 때 — Gradient — 는 이미지 처럼 작동하며 {{cssxref("background-image")}} 속성을 사용하여 설정 됩니다.</p>
+
+<p><code><a href="/en-US/docs/Web/CSS/gradient">&lt;gradient&gt;</a></code> 데이터 유형에 대한 MDN 페이지에서 다양한 유형의 그라디언트 및 그라디언트로 수행 할 수 있는 작업에 대한 자세한 내용을 읽을 수 있습니다. 그라디언트를 재생하는 재미있는 방법은 웹에서 사용할 수 있는 많은 CSS 그라디언트 생성기 중 <a href="https://cssgradient.io/">하나</a> 를 사용하는 것입니다. 그라디언트를 생성한 다음 이를 생성하는 소스 코드를 복사하여 붙여 넣을 수 있습니다.</p>
+
+<p>아래 예제에서 다른 그라디언트를 사용해 보십시오. 두 개의 박스에는 각각 전체 박스에 걸쳐 펼쳐지는 선형 그라디언트와 설정된 크기의 방사형 그라디언트가 있습니다. 따라서 반복됩니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}</p>
+
+<h3 id="여러_배경_이미지">여러 배경 이미지</h3>
+
+<p>여러 개의 배경 이미지를 가질 수도 있습니다  — 하나의 속성 값으로 여러 개의 <code>background-image</code> 값을 지정하고, 각 이미지를 쉼표로 구분합니다.</p>
+
+<p>이렇게 하면 배경 이미지가 서로 겹칠 수 있습니다. 배경은 stack 맨 아래에 마지막으로 나열된 배경 이미지와 함께 쌓이고, 코드에서 그 뒤에 오는 이미지 위에 각각의 이전 이미지가 쌓입니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 그라디언트는 일반 배경 이미지와 혼합될 수 있습니다.</p>
+</div>
+
+<p>다른 <code>background-*</code> 속성은 <code>background-image</code> 와 같은 방식으로 쉼표로 구분된 값을 가질 수도 있습니다:</p>
+
+<pre class="brush: css">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
+background-repeat: no-repeat, repeat-x, repeat;
+background-position: 10px 20px,  top right;</pre>
+
+<p>다른 속성의 각 값은 다른 속성의 같은 위치에 있는 값과 일치합니다. 예를 들어, <code>image1</code> 의 <code>background-repeat</code> 값은 <code>no-repeat</code> 입니다. 그러나, 다른 속성의 값이 다른 경우 어떻게 됩니까? 답은 더 적은 수의 값이 순환한다는 것입니다 — 위의 예에서는 4 개의 배경 이미지가 있지만 2 개의 <code>background-position</code> 값만 있습니다. 처음 두 위치 값은 처음 두 이미지에 적용되고 다시 순환됩니다 — <code>image3</code> 에는 첫 번째 위치값이 제공되고, <code>image4</code> 에는 두 번째 위치값이 제공됩니다.</p>
+
+<p><strong>해봅시다. 아래 예에서는 두 개의 이미지를 포함했습니다. 쌓인 순서를 설명하려면, 목록에서 어떤 배경 이미지가 먼저 나오는지 전환해 보십시오. 또는 다른 속성을 사용하여 위치, 크기 또는 반복 값을 변경하십시오.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}</p>
+
+<h3 id="배경_첨부_attachment">배경 첨부 (attachment)</h3>
+
+<p>배경에 사용할 수 있는 또 다른 옵션은 내용이 스크롤될 때 스크롤하는 방법을 지정하는 것입니다. 이는 {{cssxref("background-attachment")}} 속성을 사용하여 제어되며, 다음 값을 사용할 수 있습니다:</p>
+
+<ul>
+ <li><code>scroll</code>: 페이지가 스크롤될 때 요소의 배경이 스크롤 되도록 합니다. 요소 내용이 스크롤되면, 배경이 움직이지 않습니다. 실제로 배경은 페이지에서 동일한 위치로 고정되므로, 페이지가 스크롤될 때 스크롤 됩니다.</li>
+ <li><code>fixed</code>: 요소의 배경을 viewport 에 고정시켜, 페이지나 요소 내용을 스크롤할 때 스크롤되지 않도록 합니다. 항상 화면에서 동일한 위치에 유지됩니다.</li>
+ <li><code>local</code>: 이 값은 나중에 추가 되었습니다 (Explorer 9 이상에서만 지원되지만, 다른 값은 IE4 이상에서 지원됨).  왜냐하면 <code>scroll</code> 값이 다소 혼란스럽고 많은 경우 실제로 원하는 것을 수행하지 않기 때문입니다. <code>local</code> 값은 배경을 설정된 요소로 고정하므로, 요소를 스크롤하면 배경과 함께 스크롤 됩니다.</li>
+</ul>
+
+<p>{{cssxref("background-attachment")}} 속성은 스크롤할 내용이 있을 때만 영향을 미치므로, 세 가지 값의 차이점을 보여주는 데모를 만들었습니다  — <a href="http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> 을 살펴보십시오 (여기에서 <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">소스 코드</a> 를 참조하십시오).</p>
+
+<h3 id="배경_속기_shorthand_속성_사용">배경 속기 (shorthand) 속성 사용</h3>
+
+<p>이 수업 시작 부분에서 언급했듯이, {{cssxref("background")}} 속성을 사용하여 지정된 배경을 자주 볼 수 있습니다. 이 속기 기능을 사용하면 모든 다른 속성을 한 번에 설정할 수 있습니다.</p>
+
+<p>여러 배경을 사용하는 경우, 첫 번째 배경에 대한 모든 속성을 지정한 다음, 쉼표 뒤에 다음 배경을 추가해야 합니다. 아래 예에서는 크기와 위치가 있는 그라디언트, <code>no-repeat</code> 및 이미지 위치가 있는 이미지 배경, 색상이 있습니다.</p>
+
+<p>배경 이미지 속기 값을 쓸 때 따라야 할 몇 가지 규칙이 있습니다. 예를 들면:</p>
+
+<ul>
+ <li><code>background-color</code> 는 마지막 쉼표 뒤에만 지정할 수 있습니다.</li>
+ <li><code>background-size</code> 의 값은 <code>background-position</code>, 직후에 포함되며 <code>center/80%</code> 와 같이 '/' 문자로 구분됩니다.</li>
+</ul>
+
+<p>모든 고려 사항을 보려면  MDN 페이지의 {{cssxref("background")}} 를 살펴보십시오.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}</p>
+
+<h3 id="배경이_있는_접근성_고려_사항">배경이 있는 접근성 고려 사항</h3>
+
+<p>배경 이미지나 색상 위에 텍스트를 배치 할 때, 방문자가 텍스트를 읽을 수 있도록 contrast 를 충분히 유지해야 합니다. 이미지를 지정하고 해당 이미지 위에 텍스트를 배치하는 경우, 이미지가 로드되지 않은 경우 텍스트를 읽을 수 있는 <code>background-color</code> 도 지정해야 합니다.</p>
+
+<p>화면 판독기는 배경 이미지를 구문 분석할 수 없으므로 순전히 장식이어야 합니다. 중요한 내용은 HTML 페이지의 일부여야 하며, 배경에 포함되지 않아야 합니다.</p>
+
+<h2 id="테두리">테두리</h2>
+
+<p>박스 모델에 대해 알아볼 때, 테두리가 박스 크기에 어떤 영향을 미치는지 알아 냈습니다. 이 수업에서는 테두리를 창의적으로 사용하는 방법을 살펴봅니다. 일반적으로 CSS 를 사용하여 요소에 테두리를 추가할 때는, CSS 의 한 라인에 테두리의 색상, 너비 및 스타일을 설정하는 속기 속성을 사용합니다.</p>
+
+<p>{{cssxref("border")}} 를 사용하여 박스의 네 면 모두에 테두리를 설정할 수 있습니다:</p>
+
+<pre class="brush: css"><code>.box {
+  border: 1px solid black;
+} </code></pre>
+
+<p>또는 박스의 한쪽 가장자리를 대상으로 지정할 수 있습니다. 예를 들면:</p>
+
+<pre class="brush: css"><code>.box {
+  border-top: 1px solid black;
+} </code></pre>
+
+<p>이러한 속기의 개별 속성은 다음과 같습니다:</p>
+
+<pre class="brush: css"><code>.box {
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+} </code></pre>
+
+<p>그리고 longhands 는 다음과 같습니다:</p>
+
+<pre class="brush: css"><code>.box {
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: black;
+} </code></pre>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 위쪽, 오른쪽, 아래쪽 및 왼쪽 테두리 속성에는 문서의 쓰기 모드 (예: 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 텍스트 또는 위에서 아래로) 와 관련된 논리적 속성이 매핑되어 있습니다. 다음 수업에서는 <a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다양한 텍스트 방향 처리</a> 에 대해 다룰것입니다.</p>
+</div>
+
+<p><strong>테두리에 사용할 수 있는 다양한 스타일이 있습니다. 아래 예에서 우리는 박스의 네 면에 다른 테두리 스타일을 사용했습니다. 테두리 스타일, 너비 및 색상으로 실습하여 테두리의 작동 방식을 확인 하십시오.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}</p>
+
+<h3 id="둥근_테두리">둥근 테두리</h3>
+
+<p>박스의 둥근 테두리는 {{cssxref("border-radius")}} 속성 과 박스의 각 모서리와 관련되 관련 longhands 를 사용하여 수행됩니다. 두 개의 길이 또는 백분율을 값으로 사용할 수 있습니다. 첫 번째 값은 가로 반경을 정의하고 두 번째 값은 세로 반경을 정의합니다. 많은 경우에 하나의 값만 전달하면 둘 다에 사용됩니다.</p>
+
+<p>예를 들어, 박스의 네 모서리를 모두 10px radius 로 만들려면:</p>
+
+<pre class="brush: css"><code>.box {
+  border-radius: 10px;
+} </code></pre>
+
+<p>또는 오른쪽 상단 모서리의 가로 반경이 1em 이고, 세로 반경이 10% 가 되도록 하려면:</p>
+
+<pre class="brush: css"><code>.box {
+  border-top-right-radius: 1em 10%;
+} </code></pre>
+
+<p>아래 예에서 네 모서리를 모두 설정한 다음, 오른쪽 위 모서리의 값을 변경하여 다르게 만들었습니다. 값을 사용하여 모서리를 변경할 수 있습니다. 사용 가능한 구문 옵션을 보려면 {{cssxref("border-radius")}} 의 속성 페이지를 살펴보십시오.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}</p>
+
+<h2 id="배경과_테두리로_실습하기">배경과 테두리로 실습하기</h2>
+
+<p>새로운 지식을 테스트하려면 아래 예제를 시작점으로 사용하여 배경과 테두리를 사용하여 다음을 작성하십시오:</p>
+
+<ol>
+ <li>박스에 둥근 모서리가 10px 인, 5px 검은색 단색 테두리를 지정하십시오.</li>
+ <li>배경 이미지를 추가하고 (URL <code>balloons.jpg</code> 사용) 박스를 덮도록 크기를 조정하십시오.</li>
+ <li><code>&lt;h2&gt;</code> 에 반투명 검정색 배경색을 지정하고 텍스트를 흰색으로 만듭니다.</li>
+</ol>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">여기에서 해결책을 살펴 보기</a> 할 수 있지만 — 먼저 스스로 알아보십시오!</p>
+</div>
+
+<h2 id="요약">요약</h2>
+
+<p>여기서는 많은 내용을 다루었으며, 박스에 배경이나 데두리를 추가하는 것이 상당히 많다는 것을 알 수 있습니다. 논의한 기능에 대해 더 자세히 알고 싶다면, 다른 속성 페이지를 살펴보십시오. MDN 의 각 페이지에는 지식을 가지고 실습하고 향상시키기 위한 더 많은 사용 예제가 있습니다.</p>
+
+<p>다음 수업에서는 문서의 쓰기 모드가 CSS 와 어떻게 상호 작용하는지 알아봅니다. 텍스트가 왼쪽에서 오른쪽으로 표시되지 않으면 어떻게 됩니까?</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="이번_강의에서는">이번 강의에서는</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 overflow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">값 과 단위</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></li>
+</ol>