From 65cc6eabd71b1bceccf6fd3d3d4970c2955f3784 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Thu, 10 Dec 2020 08:37:18 -0500 Subject: dump 2020-12-10 --- .../index.html" | 140 ++++++++++----------- .../index.html" | 28 ++--- 2 files changed, 84 insertions(+), 84 deletions(-) (limited to 'files/ko/learn') diff --git "a/files/ko/learn/css/building_blocks/\354\203\201\354\236\220_\353\252\250\353\215\270/index.html" "b/files/ko/learn/css/building_blocks/\354\203\201\354\236\220_\353\252\250\353\215\270/index.html" index aafc0a5241..eec5f2b929 100644 --- "a/files/ko/learn/css/building_blocks/\354\203\201\354\236\220_\353\252\250\353\215\270/index.html" +++ "b/files/ko/learn/css/building_blocks/\354\203\201\354\236\220_\353\252\250\353\215\270/index.html" @@ -2,9 +2,9 @@ title: 상자 모델 slug: Learn/CSS/Building_blocks/상자_모델 tags: + - CSS - 디스플레이 - 상자 모델 - - 씨에스에스 - 여백 - 초보자 - 테두리 @@ -14,69 +14,69 @@ translation_of: Learn/CSS/Building_blocks/The_box_model ---
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
-

씨에스에스에 포함되는 모든 요소의 외장은 상자이며, 이 상자를 이해하는 것은 씨에스에스 조판을 생성하거나, 항목을 다른 항목과 대비해 정렬 능력을 갖추게 해주는 열쇠입니다. 이번 단원에서 우리는 씨에스에스 상자 모델을 제대로 살펴보겠습니다. 상자의 작동 방식과 상자와 관련된 용어를 이해함으로써 더 복잡한 조판 작업으로 넘어갈 수 있도록합니다.

+

CSS에 포함되는 모든 요소의 외장은 박스이며, 이 박스를 이해하는 것은 CSS을 통해 레이아웃을 생성하거나, 아이템과 다른 아이템을 정렬하는 것을 가능하게 하는 열쇠입니다. 이번 단원에서 우리는 CSS 박스모델을 제대로 살펴보겠습니다. 박스의 작동 방식과 박스와 관련된 용어를 이해함으로써 더 복잡한 레이아웃 작업으로 넘어갈 수 있도록합니다.

- + - +
선결 사항:기본 컴퓨터 활용 능력기본 소프트웨어 설치, 파일 작업에 대한 기본 지식, 에이치티엠엘 기본기 (에이치티엠엘 학습), 씨에스에스 작동 방식에 대한 개념 (씨에스에스 첫 단계 학습.) 등에 대한 기본 지식기본 컴퓨터 활용 능력기본 소프트웨어 설치, 파일 작업에 대한 기본 지식, HTML 기본기 (HTML 학습), CSS 작동 방식에 대한 개념 (CSS 첫 단계 학습.) 등에 대한 기본 지식
목표:씨에스에스 상자 모델, 상자 모델을 구성하고 대체 모델로 전환하는 방법에 대해 학습합니다.CSS 박스 모델, 박스 모델을 구성하고 대체 모델로 전환하는 방법에 대해 학습합니다.
-

블록 및 인라인 상자

+

블록 및 인라인 박스

-

씨에스에스에는 크게 두 가지 상자(블록 상자와 인라인 상자) 유형이 있습니다. 이러한 특성은 상자가 페이지 대열 측면 및 페이지의 다른 상자와 관련하여 상자의 작동 방식을 나타냅니다.

+

CSS에는 크게 두 가지 박스(블록 박스와 인라인 박스) 유형이 있습니다. 이러한 특성은 박스가 페이지 대열 측면 및 페이지의 다른 박스와 관련하여 박스의 작동 방식을 나타냅니다.

-

상자가 블록으로 정의되면 다음과 같은 방식으로 동작합니다:

+

박스가 블록으로 정의되면 다음과 같은 방식으로 동작합니다:

여러분이 디스플레이 유형은 인라인으로 변경하지 않는 한 머리글(<h1>)과 <p>)와 같은 요소는 모두 기본값으로 외부 디스플레이 유형을 block 사용합니다.

-

상자의 외부 디스플레이 유형이 inline일 경우:

+

박스의 외부 디스플레이 유형이 inline일 경우:

링크용 <a> 요소와 <span>, <em> 및 <strong> 요소는 모두 기본적으로 인라인으로 표시됩니다.

-

요소에 적용되는 상자 유형은 block 및 inline과 같은 {{cssxref("display")}} 속성 값으로 정의되며. 아울러 그것은 display의 outer 값과 관련이 있습니다.

+

요소에 적용되는 박스 유형은 block 및 inline과 같은 {{cssxref("display")}} 속성 값으로 정의되며. 아울러 그것은 display의 outer 값과 관련이 있습니다.

구분: 내부 및 외부 디스플레이 유형

-

이 시점에 우리는 내부 및 외부 디스플레이 유형에 대해 설명하는 게 좋겠습니다. 위에서 언급했듯이 씨에스에스의 상자는 외부 디스플레이 유형을 가지며, 이는 상자가 블록인지 인라인인지를 자세히 설명합니다.

+

이 시점에 우리는 내부 및 외부 디스플레이 유형에 대해 설명하는 게 좋겠습니다. 위에서 언급했듯이 CSS의 박스는 외부 디스플레이 유형을 가지며, 이는 박스가 블록인지 인라인인지를 자세히 설명합니다.

-

그러나 상자에는 내부 디스플레이 유형도 있으며 당 상자 내부의 요소가 배치되는 방법을 나타냅니다. 기본적으로 상자 내부의 요소는 일반 대열로 배치되며, 이는 (위에서 설명한 바와 같이) 여타 블록 및 인라인 요소와 마찬가지로 작동한다는 것을 의미합니다.

+

그러나 박스에는 내부 디스플레이 유형도 있으며 당 박스 내부의 요소가 배치되는 방법을 나타냅니다. 기본적으로 박스 내부의 요소는 일반 대열로 배치되며, 이는 (위에서 설명한 바와 같이) 여타 블록 및 인라인 요소와 마찬가지로 작동한다는 것을 의미합니다.

-

그러나 여러분은 flex과 같은 display 값을 사용하여 내부 디스플레이 유형을 변경할 수 있습니다. 어떤 요소에 우리가 display: flex;를 설정하면 외부 디스플레이 유형은 블록이지만 내부 디스플레이 유형은 flex (가변) 으로 변경됩니다. 이 상자의 직계 자식은 가변 항목이 되고, 나중에 익히게 될 가변상자 규격에 명시된 규칙에 따라 배치됩니다.

+

그러나 여러분은 flex과 같은 display 값을 사용하여 내부 디스플레이 유형을 변경할 수 있습니다. 어떤 요소에 우리가 display: flex;를 설정하면 외부 디스플레이 유형은 블록이지만 내부 디스플레이 유형은 flex (가변) 으로 변경됩니다. 이 박스의 직계 자식은 가변 항목이 되고, 나중에 익히게 될 가변박스 규격에 명시된 규칙에 따라 배치됩니다.

-

참고: 디스플레이 속성 값 및 상자가 블록 및 인라인 조판에서 작동하는 방법에 대해 자세히 보려면 블록 및 인라인 조판에 대한 모질라 개발자 네트워크 가이드를 참조하십시오.

+

참고: 디스플레이 속성 값 및 박스가 블록 및 인라인 레이아웃에서 작동하는 방법에 대해 자세히 보려면 블록 및 인라인 레이아웃에 대한 모질라 개발자 네트워크 가이드를 참조하십시오.

-

씨에스에스 조판에 대해 자세한 내용을 배우려면 다음번에는 예로 flex나 grid같은 상자가 취할 수 있는 그 밖의 다양한 내부 속성 값을 마주치게 될 겁니다.

+

CSS 레이아웃에 대해 자세한 내용을 배우려면 다음번에는 예로 flex나 grid같은 박스가 취할 수 있는 그 밖의 다양한 내부 속성 값을 마주치게 될 겁니다.

-

그러나 블록 및 인라인 조판이 웹상에 사물이 행동하는 기본값입니다. 앞서 언급했듯이 그럴 일컬어 normal flow (일반 대열) 이라고 합니다. 그렇게 부르는 까닭은 다른 지시 사항이 없으면 상자는 블록 또는 인라인 상자로 배치되기 때문입니다.

+

그러나 블록 및 인라인 레이아웃이 웹상에 사물이 행동하는 기본값입니다. 앞서 언급했듯이 그럴 일컬어 normal flow (일반 대열) 이라고 합니다. 그렇게 부르는 까닭은 다른 지시 사항이 없으면 박스는 블록 또는 인라인 박스로 배치되기 때문입니다.

서로 다른 디스플레이 유형의 예

-

계속해서 몇 가지 예를 살펴보겠습니다. 아래에 우리는 세 개의 서로 다른 에이치티엠엘 요소가 있으며, 모두 외부 디스플레이 유형이 block입니다. 첫 번째 단락은 씨에스에스에 테두리가 추가된 단락입니다. 브라우저는 이걸 블록 상자로 렌더링하므로 단락은 새 줄에서 시작되며 확보된 너비 전체까지 확장할 겁니다.

+

계속해서 몇 가지 예를 살펴보겠습니다. 아래에 우리는 세 개의 서로 다른 HTML 요소가 있으며, 모두 외부 디스플레이 유형이 block입니다. 첫 번째 단락은 CSS에 테두리가 추가된 단락입니다. 브라우저는 이걸 블록 박스로 렌더링하므로 단락은 새 줄에서 시작되며 확보된 너비 전체까지 확장할 겁니다.

-

두 번째는 display: flex 사용해 배치된 목록입니다. 이 예제는 컨테이너 내부의 항목에 대해 가변 조판을 수립하지만, 목록 자체는 블록 상자이며 단락과 같이 전체 컨테이너 너비로 확장되어 새 줄로 행갈이를 합니다.

+

두 번째는 display: flex 사용해 배치된 목록입니다. 이 예제는 컨테이너 내부의 항목에 대해 가변 레이아웃을 수립하지만, 목록 자체는 블록 박스이며 단락과 같이 전체 컨테이너 너비로 확장되어 새 줄로 행갈이를 합니다.

바로 아래에 우리는 블록 수준 단락을 하나 갖고 있으며 그 안에 두 개의 <span> 요소가 있습니다. 이들 요소는 보통 inline이겠지만, 그 중 하나에 블록 클래스에 있습니다. 우리가 그걸 미리 display: block로 설정했으니까요.

@@ -84,7 +84,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model

우리는 다음 예제에서 inline 요소가 어떻게 동작하는지 볼 수 있습니다. 첫 번째 단락에서 <span>는 기본값으로 인라인으므로 새 줄 행갈이를 강제하지 않습니다.

-

display: inline-flex로 설정된 <ul> 요소도 갖고 있는데, 이는 몇 가지 가변 항목 주변에 인라인 상자를 생성합니다.

+

display: inline-flex로 설정된 <ul> 요소도 갖고 있는데, 이는 몇 가지 가변 항목 주변에 인라인 박스를 생성합니다.

마지막으로 display: inline으로 설정된 두 단락이 있습니다. 인라인 가변 컨테이너와 단락은 모두 하나의 라인에서 하나로 진행하지 블록 수준 요소처럼 표시하기 위해 새 줄로 행갈이를 하지 않습니다.

@@ -92,36 +92,36 @@ translation_of: Learn/CSS/Building_blocks/The_box_model

{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}}

-

나중에 해당 단원에서 가변 조판과 같은 것들을 접하게 될 것입니다. 당장 기억해야 할 핵심은 display 속성 값을 변경하면 상자의 외부 디스플레이 유형이 블록인지 인라인인지를 변경하여, 조판 속 다른 요소 주위에 자신을 표시하는 방법이 달라진다는 것입니다.

+

나중에 해당 단원에서 가변 레이아웃과 같은 것들을 접하게 될 것입니다. 당장 기억해야 할 핵심은 display 속성 값을 변경하면 박스의 외부 디스플레이 유형이 블록인지 인라인인지를 변경하여, 레이아웃 속 다른 요소 주위에 자신을 표시하는 방법이 달라진다는 것입니다.

나머지 수업에서는 외부 디스플레이 유형에 집중할 것이다.

-

씨에스에스 박스 모델이란 무엇인가?

+

CSS Box Model이란 무엇인가?

-

전체 씨에스에스 상자 모델은 블록 상자에 적용되며, 인라인 상자는 상자 모델에 정의된 일부 동작만 사용합니다. 이 모델은 당신이 페이지에서 볼 수 있는 상자를 생성하기 위해 상자의 서로 다른 부분인 여백, 테두리, 패딩 및 콘텐츠등이 어떻게 함께 작동할 것인지를 정의합니다. 몇 가지 복잡성을 추가하기 위해 표준 및 대체 상자 모델이 있습니다.

+

전체 CSS box model은 블록 박스에 적용되며, 인라인 박스는 박스 모델에 정의된 일부 동작만 사용합니다. 이 모델은 당신이 페이지에서 볼 수 있는 박스를 생성하기 위해 박스의 서로 다른 부분인 여백, 테두리, 패딩 및 콘텐츠등이 어떻게 함께 작동할 것인지를 정의합니다. 몇 가지 복잡성을 추가하기 위해 표준 및 대체 박스 모델이 있습니다.

-

상자의 구성

+

Box의 구성

-

씨에스에스 블록 상자 구성하기 위한 우리의 준비물은:

+

CSS 블록 박스 구성하기 위한 우리의 준비물은:

아래 도표는 이들 레이어를 보여줍니다.

Diagram of the box model

-

표준 씨에스에스 상자 모델

+

표준 CSS box model

-

표준 상자 모델에서 상자에서 width와 height를 부여하면 content box의 너비와 높이가 정의됩니다. 그런 다음 패딩과 테두리는 상자의 너비와 높이에 추가되여 상자가 점유하는 전체 크기가 정해집니다. 그 내용이 아래 이미지에서 제시되었습니다.

+

표준 box model에서 box에서 width와 height를 부여하면 content box의 너비와 높이가 정의됩니다. 그런 다음 패딩과 테두리는 박스의 너비와 높이에 추가되여 박스가 점유하는 전체 크기가 정해집니다. 그 내용이 아래 이미지에서 제시되었습니다.

-

우리는 상자의 width와 height, margin과 border 및 padding 씨에스에스 값이 다음과 같이 지정되어 있다고 간주합니다:

+

우리는 박스의 width와 height, margin과 border 및 padding CSS 값이 다음과 같이 지정되어 있다고 간주합니다:

-
.box {
+
.box {
   width: 350px;
   height: 150px;
   margin: 25px;
@@ -130,29 +130,29 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 }
 

 
-
표준 박스 모델을 사용하여 상자가 차지하는 공간은 실제로 너비 410px(350 + 25 + 25 + 5 + 5), 높이 210px(150 + 25 + 25 + 5 + 5)가 될 것인데, 양쪽 패딩과 테두리는 콘텐츠 상자에 사용되는 너비에 더해지기 때문입니다.

+
표준 박스 모델을 사용하여 박스가 차지하는 공간은 실제로 너비 410px(350 + 25 + 25 + 5 + 5), 높이 210px(150 + 25 + 25 + 5 + 5)가 될 것인데, 양쪽 패딩과 테두리는 콘텐츠 박스에 사용되는 너비에 더해지기 때문입니다.

 
 
Showing the size of the box when the standard box model is being used.

 
 

-
참고: 여백은 상자의 실제 크기에 포함되지 않습니다. 물론 여백은 상자가 페이지에서 차지하는 총 공간에 영향을 미치지만, 상자의 외부 공간에만 영향을 미칩니다. 상자의 영역은 테두리에서 멈추게 됩니다. 여백으로 확장되지 않습니다.

+
참고: 여백은 박스의 실제 크기에 포함되지 않습니다. 물론 여백은 박스가 페이지에서 차지하는 총 공간에 영향을 미치지만, 박스의 외부 공간에만 영향을 미칩니다. 박스의 영역은 테두리에서 멈추게 됩니다. 여백으로 확장되지 않습니다.

 

 
-
대체 씨에스에스 상자 모델

+
대체 CSS box model

 
-
상자의 실제 크기를 얻기 위해 테두리와 패딩을 추가하는 것이 다소 불편하다고 생각할 수 있습니다. 당신 말이 옳을 것입니다! 이러한 이유로 씨에스에스는 표준 상자 모델 이후 머지않아 대체 상자 모델이 도입되었습니다. 이 모델을 사용한다면 너비는 페이지에서 표시되는 상자 너비이므로 콘텐츠 영역 너비는 너비에서 패딩 및 테두리 너비를 뺀 너비입니다. 위에서 사용된 것과 동일한 씨에스에스를 아래 결과에 대입하면(폭 = 350px, 높이 = 150px)가 됩니다.

+
박스의 실제 크기를 얻기 위해 테두리와 패딩을 추가하는 것이 다소 불편하다고 생각할 수 있습니다. 당신 말이 옳을 것입니다! 이러한 이유로 CSS는 표준 박스 모델 이후 머지않아 대체 박스 모델이 도입되었습니다. 이 모델을 사용한다면 너비는 페이지에서 표시되는 박스 너비이므로 콘텐츠 영역 너비는 너비에서 패딩 및 테두리 너비를 뺀 너비입니다. 위에서 사용된 것과 동일한 CSS를 아래 결과에 대입하면(폭 = 350px, 높이 = 150px)가 됩니다.

 
 
Showing the size of the box when the alternate box model is being used.

 
-
기본값으로 브라우저는 기본 상자 모델을 사용합니다. 요소에 대체 모델을 활성화하려면 거기에 box-sizing: border-box를 설정하여 그렇게 할 수 있습니다. 이렇게 하면 당신이 설정한 크기에 따라 정의된 영역만큼 테두리 상자가 점유하도록 브라우저에 전달할 수 있습니다.

+
기본값으로 브라우저는 기본 박스 모델을 사용합니다. 요소에 대체 모델을 활성화하려면 거기에 box-sizing: border-box를 설정하여 그렇게 할 수 있습니다. 이렇게 하면 당신이 설정한 크기에 따라 정의된 영역만큼 테두리 박스가 점유하도록 브라우저에 전달할 수 있습니다.

 
-
.box {
+
.box {
   box-sizing: border-box;
 } 

 
-
모든 요소가 대체 상자 모델을 사용하길 원한다면, (그것이 개발자들의 흔한 선택이기도 합니다) <html> 요소에 box-sizing 속성을 설정한 다음 아래의 소예제에서 볼 수 있듯이 다른 모든 요소가 해당 값을 상속하도록 설정하십시요. 이런 내용의 뒷배경이 되는 생각을 이해하고 싶다면 상자 크기에 관한 씨에스에스 요령 문서를 참조하십시오.

+
모든 요소가 대체 박스 모델을 사용하길 원한다면, (그것이 개발자들의 흔한 선택이기도 합니다) <html> 요소에 box-sizing 속성을 설정한 다음 아래의 소예제에서 볼 수 있듯이 다른 모든 요소가 해당 값을 상속하도록 설정하십시요. 이런 내용의 뒷배경이 되는 생각을 이해하고 싶다면 박스 크기에 관한 CSS 요령 문서를 참조하십시오.

 
-
html {
+
html {
   box-sizing: border-box;
 }
 *, *::before, *::after {
@@ -160,14 +160,14 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 }

 
 

-
참고: 흥미로운 기록이 있습니다. 인터넷 익스플로러는 기본적으로 대체 상자 모델로 사용되었으며 전환할 수있는 메커니즘이 없습니다.

+
참고: 흥미로운 기록이 있습니다. 인터넷 익스플로러는 기본적으로 대체 박스 모델로 사용되었으며 전환할 수있는 메커니즘이 없습니다.

 

 
-
상자 모델 부리기

+
박스 모델 부리기

 
-
아래 예제에서 당신은 상자 2개를 확인할 수 있습니다. 둘 다 .box 클래스에 해당하며 width, height, margin, border, padding에 대해 동일한 값이 주어졌습니다. 유일한 차이라면 두 번째 상자는 대체 상자 모델을 사용하도록 설정되었다는 겁니다.

+
아래 예제에서 당신은 박스 2개를 확인할 수 있습니다. 둘 다 .box 클래스에 해당하며 width, height, margin, border, padding에 대해 동일한 값이 주어졌습니다. 유일한 차이라면 두 번째 박스는 대체 박스 모델을 사용하도록 설정되었다는 겁니다.

 
-
당신은 (.alternate 클래스를 씨에스에스에 추가해) 두 번째 상자 크기를 변경해 첫 번째 상자의 너비와 높이와 일치하도록 할 수 있습니까?

+
당신은 (.alternate 클래스를 CSS에 추가해) 두 번째 박스 크기를 변경해 첫 번째 박스의 너비와 높이와 일치하도록 할 수 있습니까?

 
 
{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}

 
@@ -175,21 +175,21 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
참조: 여러분은 이곳에서 동 질문에 대한 답변을 확인할 수 있습니다..

 
 
-
브라우저 개발자도구를 사용해 상자 모델 보기

+
브라우저 개발자도구를 사용해 박스 모델 보기

 
-
브라우저 개발자 도구를 사용하면 상자 모델을 훨씬 쉽게 이해할 수 있습니다. 파이어폭스의 개발자 도구에서 요소를 검사하면 요소의 크기와 여백, 패딩 및 테두리를 볼 수 있습니다. 이 방법으로 요소를 검사하면 실제로 그것이 당신이 생각하는 크기인지를 알아낼 수 있어 좋은 방법입니다.

+
브라우저 개발자 도구를 사용하면 박스 모델을 훨씬 쉽게 이해할 수 있습니다. 파이어폭스의 개발자 도구에서 요소를 검사하면 요소의 크기와 여백, 패딩 및 테두리를 볼 수 있습니다. 이 방법으로 요소를 검사하면 실제로 그것이 당신이 생각하는 크기인지를 알아낼 수 있어 좋은 방법입니다.

 
 
Inspecting the box model of an element using Firefox DevTools

 
 
여백과 패딩과 테두리

 
-
상술한 예제에서 여러분은 이미 {{cssxref("margin")}}과 {{cssxref("padding")}}, 그리고 {{cssxref("border")}}를 보았습니다. 이번 예제에서 사용된 속성은 약칭(shorthands)으로 한꺼번에 상자의 사방면을 설정할 수 있게 해줍니다. 해당 약칭은 또한 동명의 정식 명칭 속성도 있어 상자의 사방면을 개별적으로 제어할 수 있도록 해줍니다.

+
상술한 예제에서 여러분은 이미 {{cssxref("margin")}}과 {{cssxref("padding")}}, 그리고 {{cssxref("border")}}를 보았습니다. 이번 예제에서 사용된 속성은 약칭(shorthands)으로 한꺼번에 박스의 사방면을 설정할 수 있게 해줍니다. 해당 약칭은 또한 동명의 정식 명칭 속성도 있어 박스의 사방면을 개별적으로 제어할 수 있도록 해줍니다.

 
 
해당 속성에 대한 자세한 내용을 탐구해 봅시다.

 
 
여백

 
-
여백은 상자 주변에 보이지 않는 공간입니다. 여백은 상자로부터 다른 요소를 밀어냅니다. 여백은 양수값 또는 음수값을 가질 수 있습니다. 상자 한쪽 측면에 음수값 여백을 설정하면 페이지의 다른 부분과 공백이 겹칠 수 있습니다. 여러분이 표준 또는 대체 상자 모델을 사용하든지 관계없이 표시되는 상자의 크기를 계산한 후에 항상 여백이 추가됩니다.

+
여백은 박스 주변에 보이지 않는 공간입니다. 여백은 박스로부터 다른 요소를 밀어냅니다. 여백은 양수값 또는 음수값을 가질 수 있습니다. 박스 한쪽 측면에 음수값 여백을 설정하면 페이지의 다른 부분과 공백이 겹칠 수 있습니다. 여러분이 표준 또는 대체 박스 모델을 사용하든지 관계없이 표시되는 박스의 크기를 계산한 후에 항상 여백이 추가됩니다.

 
 
우리는 {{cssxref("margin")}} 속성을 사용하여 요소의 사방 여백을 한번에 제어할 수 있으며, 마찬가지로 동명의 정식 명칭 속성을 사용하며 각변의 여백을 제어할 수 있습니다.

 
@@ -200,7 +200,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
  
  • {{cssxref("margin-left")}}
    • 
 
 
-
    아래 예제에서 여백 값을 변경하여 당 요소와 상위 컨테이너 요소 사이의 여백 생성 또는 공간 제거(음의 여백인 경우)로 인해 상자가 어떻게 밀려나는지 확인하십시오.
    
+
    아래 예제에서 여백 값을 변경하여 당 요소와 상위 컨테이너 요소 사이의 여백 생성 또는 공간 제거(음의 여백인 경우)로 인해 박스가 어떻게 밀려나는지 확인하십시오.
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}}
    
 
@@ -208,7 +208,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
    여백 이해의 핵심은 여백 축소에 대한 개념입니다. 여백이 서로 맞닿은 두 개의 요소가 있으면 해당 여백은 합쳐져 하나의 여백이 됩니다. 그 중 가장 큰 여백의 크기가 됩니다.
    
 
-
    아래 예제에는 단락 두 개가 있습니다. 상위 단락은 margin-bottom 값이 50픽셀이 주어졌습니다. 두 번째 단락은 margin-top 값이 30픽셀이 주어졌습니다. 전체 여백은 합쳐져 축소되면서 실제 상자 사이 여백은 50픽셀이며, 두 가지 여백을 합계가 되지 않습니다.
    
+
    아래 예제에는 단락 두 개가 있습니다. 상위 단락은 margin-bottom 값이 50픽셀이 주어졌습니다. 두 번째 단락은 margin-top 값이 30픽셀이 주어졌습니다. 전체 여백은 합쳐져 축소되면서 실제 박스 사이 여백은 50픽셀이며, 두 가지 여백을 합계가 되지 않습니다.
    
 
 
    여러분은 2번째 단락의 margin-top 값을 0으로 설정해 이를 시험해 볼 수 있습니다. 두 단락 사이 표시되는 여백은 변경되지 않을 것이며, 첫 번째 단락의 bottom-margin에 설정된 50픽셀은 유지됩니다.
    
 
@@ -218,7 +218,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
    테두리
    
 
-
    테두리는 상자의 여백과 패딩 사이에 그려집니다. 표준 상자 모델을 사용하는 경우 테두리의 크기가 상자의 width과 height에 추가됩니다. 대체 상자 모델을 사용하고 있는 경우, 테두리의 크기는 사용 가능한 width와 height의 일부를 점유함으로 콘텐츠 상자가 더 작아지게 됩니다.
    
+
    테두리는 박스의 여백과 패딩 사이에 그려집니다. 표준 박스 모델을 사용하는 경우 테두리의 크기가 박스의 width과 height에 추가됩니다. 대체 박스 모델을 사용하고 있는 경우, 테두리의 크기는 사용 가능한 width와 height의 일부를 점유함으로 콘텐츠 박스가 더 작아지게 됩니다.
    
 
 
    테두리를 스타일링의 경우 많은 속성이 있습니다. 4개의 테두리, 각 테두리에는 스타일, 너비 및 색상 등 당신이 변경하고 싶을만한 것들이 있습니다.
    
 
@@ -275,17 +275,17 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
  
  • {{cssxref("padding-left")}}
    • 
 
 
-
    아래 예제에서 .box클래스에 대한 패딩값을 변경하면 상자와 관계하여 텍스트가 시작되는 지점이 달라지는지 볼 수 있습니다.
    
+
    아래 예제에서 .box클래스에 대한 패딩값을 변경하면 박스와 관계하여 텍스트가 시작되는 지점이 달라지는지 볼 수 있습니다.
    
 
-
    여러분은 또한 .container, 클래스에 대한 패딩을 변경하여 컨테이너와 상자 사이 공간을 만들 수 있습니다. 패딩 변경은 모든 요소에 가능하며 테두리와 요소 내부 공간 사이에 공간을 만듭니다.
    
+
    여러분은 또한 .container, 클래스에 대한 패딩을 변경하여 컨테이너와 박스 사이 공간을 만들 수 있습니다. 패딩 변경은 모든 요소에 가능하며 테두리와 요소 내부 공간 사이에 공간을 만듭니다.
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}}
    
 
-
    상자 모델과 인라인 상자
    
+
    박스 모델과 인라인 박스
    
 
-
    상술한 모든 내용은 블록 상자에도 100% 적용됩니다. 상술한 속성 중의 일부는 인라인 상자에도 적용할 수 있습니다. 예를 들어 <span>에 의해 생성된 속성도 그렇습니다.
    
+
    상술한 모든 내용은 블록 박스에도 100% 적용됩니다. 상술한 속성 중의 일부는 인라인 박스에도 적용할 수 있습니다. 예를 들어 <span>에 의해 생성된 속성도 그렇습니다.
    
 
-
    아래 예제에 한 단락 내부에 <span>가 있고 거기에 width와 height, 그리고 margin와 border를 적용했습니다. 여러분이 보시다시피 너비와 높이는 무시됩니다. 여백, 패딩 및 테두리는 존치되지만 다른 콘텐츠와 인라인 상자아의 관계를 변경하지 않으므로 패딩 및 테두리는 단락의 다른 단어와 겹칩니다.
    
+
    아래 예제에 한 단락 내부에 <span>가 있고 거기에 width와 height, 그리고 margin와 border를 적용했습니다. 여러분이 보시다시피 너비와 높이는 무시됩니다. 여백, 패딩 및 테두리는 존치되지만 다른 콘텐츠와 인라인 박스아의 관계를 변경하지 않으므로 패딩 및 테두리는 단락의 다른 단어와 겹칩니다.
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}}
    
 
@@ -297,10 +297,10 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
      
  
    • width와 height 속성은 존중됩니다.
      • 
- 
    • padding와 margin과 border 속성으로 인해 다른 요소가 상자에서 밀려납니다.
      • 
+ 
    • padding와 margin과 border 속성으로 인해 다른 요소가 박스에서 밀려납니다.
      • 
 
    
 
-
    그러나 새 줄로 행갈이를 하지 않고, width와 height 속성을 명시적으로 추가하는 경우에만 해당 요소의 콘텐츠보다 (동 상자가) 더 커질 뿐입니다.
    
+
    그러나 새 줄로 행갈이를 하지 않고, width와 height 속성을 명시적으로 추가하는 경우에만 해당 요소의 콘텐츠보다 (동 박스가) 더 커질 뿐입니다.
    
 
 
    다음 예제에서 우리는 <span> 요소에 display: inline-block를 추가했습니다. 스팬 요소 속성을 display: block로 변경하던가 추가했던 라인을 제거한 뒤 디스플레이 모델의 차이를 확인해 보십시요.
    
 
@@ -308,7 +308,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
    여러분이 padding를 추가해 링크에 적중 영역을 확대하길 원하는 경우 이것이 유용할 수 있습니다. <a>는 <span>처럼 인라인 요소입니다. 여러분은 해당 요소에 display: inline-block을 사용해 패딩을 설정할 수 있으므로 사용자가 링크를 클릭할 수 있습니다.
    
 
-
    탐색 (메뉴)모음에서 꽤 자주 사용되는 것을 볼겁니다. 아래 탐색 모음은 가변상자를 사용해 행으로 표시되었으며, <a>를 마우스로 가리킬 때 background-color를 변경할 수 있도록 <a> 요소에 패딩 추기했습니다. 패딩은 <ul> 요소의 테두리와 겹치는 것처럼 보입니다. 그렇게 된 까닭은 <a>가 인라인 요소이기 때문입니다.
    
+
    탐색 (메뉴)모음에서 꽤 자주 사용되는 것을 볼겁니다. 아래 탐색 모음은 가변박스를 사용해 행으로 표시되었으며, <a>를 마우스로 가리킬 때 background-color를 변경할 수 있도록 <a> 요소에 패딩 추기했습니다. 패딩은 <ul> 요소의 테두리와 겹치는 것처럼 보입니다. 그렇게 된 까닭은 <a>가 인라인 요소이기 때문입니다.
    
 
 
    .links-list a 선택기에 딸린 규칙에 display: inline-block를 추가하면, 다른 요소에 의한 패딩이 존중되므로 여러분은 이(겹치는) 문제가 해결되는 것을 보게될 것입니다.
    
 
@@ -316,9 +316,9 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
    요약정리
    
 
-
    박스 모델에 대해 이해해야 할 내용의 대부분입니다. 상자들이 조판에 어떻게 포함된 것인지 혼란스러워지면, 향후 여러분은 이번 단원을 다시 찾게을 수 있습니다.
    
+
    박스 모델에 대해 이해해야 할 내용의 대부분입니다. 박스들이 레이아웃에 어떻게 포함된 것인지 혼란스러워지면, 향후 여러분은 이번 단원을 다시 찾게을 수 있습니다.
    
 
-
    다음 단원에서는 배경과 테두리를 사용하여 평범한 보이는 상자를 더욱 흥미롭게 보이려면 어떤 방법이 있는지 살펴보겠습니다.
    
+
    다음 단원에서는 배경과 테두리를 사용하여 평범한 보이는 박스를 더욱 흥미롭게 보이려면 어떤 방법이 있는지 살펴보겠습니다.
    
 
 
    {{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
    
 
@@ -326,7 +326,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
      
  
    1. 계단식 나열과 상속
      2. 
- 
    2. 씨에스에스 선택기
+ 
    3. CSS 선택기
   
  
      4. 
- 
    4. 상자 모델
      5. 
+ 
    5. 박스 모델
      6. 
  
    6. 배경 및 테두리
      7. 
  
    7. 서로 다른 텍스트 방향 처리
      8. 
  
    8. 대열이탈 콘텐츠
      9. 
  
    9. 속성값과 단위
      10. 
- 
    10. 씨에스에스 항목 크기 설정
      11. 
+ 
    11. CSS 항목 크기 설정
      12. 
  
    12. 이미지와 미디아, 양식 요소
      13. 
  
    13. 테이블 스타일링
      14. 
- 
    14. 씨에스에스 디버깅
      15. 
- 
    15. 씨에스에스 체계화
      16. 
+ 
    16. CSS 디버깅
      17. 
+ 
    17. CSS 체계화
      18. 
 
    
diff --git "a/files/ko/learn/css/building_blocks/\354\204\240\355\203\235\354\236\220/index.html" "b/files/ko/learn/css/building_blocks/\354\204\240\355\203\235\354\236\220/index.html"
index 7674063921..274653da91 100644
--- "a/files/ko/learn/css/building_blocks/\354\204\240\355\203\235\354\236\220/index.html"
+++ "b/files/ko/learn/css/building_blocks/\354\204\240\355\203\235\354\236\220/index.html"
@@ -22,7 +22,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors
 
 
    선택자란 무엇인가?
    
 
-
    이미 선택자 (selector) 를 만났습니다. CSS 선택자는 CSS 규칙의 첫 부분입니다. 규칙 내의 CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다. 선택자에 의해 선택된 요소들은 선택자의 주제(subject) 로 지칭됩니다.
    
+
    우리는 이미 선택자 (selector) 를 만났습니다. CSS 선택자는 CSS 규칙의 첫 부분입니다. 규칙 내의 CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다. 선택자에 의해 선택된 요소들은 선택자의 주제(subject) 로 지칭됩니다.
    
 
 
    Some code with the h1 highlighted.
    
 
@@ -34,7 +34,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors
 
 
    동일한 CSS 를 사용하는 항목이 두 개 이상인 경우 규칙이 모든 개별 선택자에 적용되도록 개별 선택자를 선택자 목록 으로 결합할 수 있습니다. 예를 들어, h1 에 대해 동일한 CSS 와 special class 를 사용하면 이것을 두 개의 별도 규칙으로 작성할 수 있습니다.
    
 
-
    h1 {
+
    h1 {
   color: blue;
 }
 
@@ -44,13 +44,13 @@ translation_of: Learn/CSS/Building_blocks/Selectors
 
 
    또한 이들 사이에 쉼표를 추가하여 선택자 목록으로 결합할 수도 있습니다.
    
 
-
    h1, .special {
+
    h1, .special {
   color: blue;
 } 
    
 
 
    공백은 쉼표 앞뒤에 유효합니다. 각 라인이 새 라인에 있으면 선택자를 더 읽기 쉽습니다.
    
 
-
    h1,
+
    h1,
 .special {
   color: blue;
 } 
    
@@ -63,7 +63,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors
 
 
    다음 예에서는, 잘못된 class 선택자 규칙이 무시되고 h1 은 여전히 스타일이 지정됩니다.
    
 
-
    h1 {
+
    h1 {
   color: blue;
 }
 
@@ -73,7 +73,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors
 
 
    그러나 결합하면, 전체 규칙이 유효하지 않은 것으로 간주되어 h1 또는 class 가 스타일 지정되지 않습니다.
    
 
-
    h1, ..special {
+
    h1, ..special {
   color: blue;
 } 
    
 
@@ -85,41 +85,41 @@ translation_of: Learn/CSS/Building_blocks/Selectors
 
 
    이 그룹에는 <h1> 과 같은 HTML 요소를 대상으로 하는 선택자가 포함됩니다.
    
 
-
    h1 { }
    
+
    h1 { }
    
 
 
    또한 class 를 대상으로 하는 선택자가 포함됩니다:
    
 
-
    .box { }
    
+
    .box { }
    
 
 
    또는 ID:
    
 
-
    #unique { }
    
+
    #unique { }
    
 
 
    속성 선택자
    
 
 
    이 선택자 그룹은 요소에 특정 속성이 있는지에 따라 요소를  선택하는 다른 방법을 제공합니다:
    
 
-
    a[title] { }
    
+
    a[title] { }
    
 
 
    또는 특정 값을 가진 속성의 존재 여부를 기반으로 선택하십시오:
    
 
-
    a[href="https://example.com"] { }
    
+
    a[href="https://example.com"] { }
    
 
 
    Pseudo-classes 및 pseudo-elements
    
 
 
    이 선택자 그룹에는 요소의 특정 상태를 스타일링하는 pseudo-classes 가 포함됩니다. 예를 들어 :hover pseudo-class 는 마우스 포인터에 의해 요소를 가리킬 때만 요소를 선택합니다:
    
 
-
    a:hover { }
    
+
    a:hover { }
    
 
 
    또한 요소 자체가 아닌 요소의 특정 부분을 선택하는 pseudo-elements 도 포함됩니다. 예를 들어, ::first-line 은 항상 <span> 이 첫 번째 형식의 라인을 감싸는 것처럼 작동하여, 요소 내부의 첫 번째 텍스트 라인 (아래의 경우 <p>) 을 선택합니다.
    
 
-
    p::first-line { }
    
+
    p::first-line { }
    
 
 
    결합자 (Combinators)
    
 
 
    최종 선택자 그룹은 문서 내의 요소를 대상으로 하기 위해 다른 선택자를 결합합니다. 예를 들어 다음은 자식 결합자 (>) 를 사용하여 <article> 요소의 자식인 단락을 선택합니다:
    
 
-
    article > p { }
    
+
    article > p { }
    
 
 
    다음 단계
    
 
-- 
cgit v1.2.3-54-g00ecf