From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/margin/index.html | 176 +++++++++++++++++++++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 files/ko/web/css/margin/index.html (limited to 'files/ko/web/css/margin/index.html') diff --git a/files/ko/web/css/margin/index.html b/files/ko/web/css/margin/index.html new file mode 100644 index 0000000000..a1048fb37e --- /dev/null +++ b/files/ko/web/css/margin/index.html @@ -0,0 +1,176 @@ +--- +title: margin +slug: Web/CSS/margin +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin +--- +
{{CSSRef}}
+ +

margin CSS 속성은 요소의 네 방향 바깥 여백 영역을 설정합니다. {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}의 단축 속성입니다.

+ +
{{EmbedInteractiveExample("pages/css/margin.html")}}
+ + + +

위와 아래 여백은 대체 요소가 아닌 {{HTMLElement("span")}}, {{HTMLElement("code")}} 등 인라인 요소에선 아무 효과도 없습니다.

+ +
+

참고: margin은 요소의 주위에 빈 공간을 추가합니다. 반면 {{cssxref("padding")}}은 요소의 내부에 빈 공간을 만듭니다.

+
+ +

구문

+ +
/* 네 면 모두 적용 */
+margin: 1em;
+margin: -3px;
+
+/* 세로방향 | 가로방향 */
+margin: 5% auto;
+
+/* 위 | 가로방향 | 아래 */
+margin: 1em auto 2em;
+
+/* 위 | 오른쪽 | 아래 | 왼쪽 */
+margin: 2px 1em 0 auto;
+
+/* 전역 값 */
+margin: inherit;
+margin: initial;
+margin: unset;
+
+ +

margin 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 각 값은 {{cssxref("<length>")}}, {{cssxref("<percentage>")}} 또는 키워드 {{anch("auto")}} 중 하나입니다. 음수 값은 요소와 이웃의 거리가 더 가까워지도록 합니다.

+ + + +

값

+ +
+
{{cssxref("length")}}
+
여백의 크기로 고정값 사용.
+
{{cssxref("<percentage>")}}
+
여백의 크기로 컨테이닝 블록 너비의 백분율 사용.
+
auto
+
브라우저가 적절한 여백 크기를 선택. 예를 들어 요소를 중앙 정렬하고 싶을 때 사용할 수 있습니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

간단한 예제

+ +

HTML

+ +
<div class="center">이 요소는 중앙 정렬입니다.</div>
+<div class="outside">이 요소는 컨테이너 밖으로 빠져 나갔습니다.</div>
+ +

CSS

+ +
.center {
+  margin: auto;
+  background: lime;
+  width: 66%;
+}
+
+.outside {
+  margin: 3rem 0 0 -3rem;
+  background: cyan;
+  width: 66%;
+}
+ +

{{ EmbedLiveSample('간단한_예제') }}

+ +

더 많은 예제

+ +
margin: 5%;                 /* 모두 5% */
+
+margin: 10px;               /* 모두 10px */
+
+margin: 1.6em 20px;         /* 상하: 1.6em */
+                            /* 좌우: 20px  */
+
+margin: 10px 3% -1em;       /* 상: 10px */
+                            /* 좌우: 3% */
+                            /* 하: -1em */
+
+margin: 10px 3px 30px 5px;  /* 상: 10px */
+                            /* 우:  3px */
+                            /* 하: 30px */
+                            /* 좌:  5px */
+
+margin: 2em auto;           /* 상하: 2em */
+                            /* 수평 중앙정렬 */
+
+margin: auto;               /* 상하: 0 */
+                            /* 수평 중앙정렬 */
+ +

참고

+ +

수평 중앙정렬

+ +

현대 브라우저에서 어떤 요소를 중앙에 배치하려면 {{cssxref("display")}}: flex; {{cssxref("justify-content")}}: center;를 사용하면 됩니다.

+ +

하지만 플렉스 박스 레이아웃을 지원하지 않는 Internet Explorer 8-9 등 오래된 브라우저를 지원해야 하면 margin: 0 auto;를 대신 사용하세요.

+ +

여백 상쇄

+ +

두 개 요소의 위와 아래 여백은 종종 합쳐져 하나의 여백이 되고, 그 크기는 둘 중 더 큰 여백과 같아집니다. 더 자세한 정보는 여백 상쇄 정복을 참고하세요.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}No significant change
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}Defines margin as animatable.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}Removes its effect on inline elements.
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ +

{{Compat("css.properties.margin")}}

+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf