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/gap/index.html | 220 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 220 insertions(+) create mode 100644 files/ko/web/css/gap/index.html (limited to 'files/ko/web/css/gap') diff --git a/files/ko/web/css/gap/index.html b/files/ko/web/css/gap/index.html new file mode 100644 index 0000000000..7aca4dc713 --- /dev/null +++ b/files/ko/web/css/gap/index.html @@ -0,0 +1,220 @@ +--- +title: gap (grid-gap) +slug: Web/CSS/gap +tags: + - CSS + - CSS Flexible Boxes + - CSS Grid + - CSS Multi-column Layout + - CSS Property + - Reference +translation_of: Web/CSS/gap +--- +
{{CSSRef}}
+ +

CSS gap 속성은 행과 열 사이의 간격(거터)을 설정합니다. {{CSSxRef("row-gap")}}과 {{CSSxRef("column-gap")}}의 단축 속성입니다.

+ + + +
{{EmbedInteractiveExample("pages/css/grid-gap.html")}}
+ +
+

원래 CSS Grid Layout은 접두사를 붙인 grid-gap 속성을 정의했었으며, 현재 gap으로 대체하는 과정 중에 있습니다. 그러나 grid-gap만 구현하고 그리드 레이아웃용 gap은 구연하지 않은 브라우저를 지원하려면 위의 대화형 예제처럼 접두사 속성을 사용해야 합니다.

+
+ +

구문

+ +
/* 단일 <length> 값 */
+gap: 20px;
+gap: 1em;
+gap: 3vmin;
+gap: 0.5cm;
+
+/* 단일 <percentage> 값 */
+gap: 16%;
+gap: 100%;
+
+/* 이중 <length> 값 */
+gap: 20px 10px;
+gap: 1em 0.5em;
+gap: 3vmin 2vmax;
+gap: 0.5cm 2mm;
+
+/* 이중 또는 혼합 <percentage> 값 */
+gap: 16% 100%;
+gap: 21px 82%;
+
+/* calc() 값 */
+gap: calc(10% + 20px);
+gap: calc(20px + 10%) calc(10% - 5px);
+
+/* 전역 값 */
+gap: inherit;
+gap: initial;
+gap: unset;
+
+ +

gap은 <'row-gap'> 값을 사용해 지정하며, 선택적으로 <'column-gap'>을 추가할 수 있습니다. <'column-gap'>을 생략한 경우 <'row-gap'>과 동일한 값을 사용합니다.

+ +

<'row-gap'>과 <'column-gap'>은 각각 <length> 또는 <percentage>를 사용해 지정합니다.

+ +

값

+ +
+
{{CSSxRef("<length>")}}
+
그리드 선을 분할하는 간격의 너비.
+
{{CSSxRef("<percentage>")}}
+
그리드 선을 분할하는 간격의 너비. 요소 크기에 상대적입니다.
+
+ +

형식 구문

+ +
{{CSSSyntax}}
+ +

예제

+ +

플렉스 레이아웃

+ +

HTML

+ +
<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+ +

CSS

+ +
#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  gap: 20px 5px;
+}
+
+#flexbox > div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+
+}
+
+ +

결과

+ +

{{EmbedLiveSample("플렉스_레이아웃", "auto", "120px")}}

+ +

그리드 레이아웃

+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ + + +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  gap: 20px 5px;
+}
+
+#grid > div {
+  border: 1px solid green;
+  background-color: lime;
+}
+
+ +

결과

+ +

{{EmbedLiveSample("그리드_레이아웃", "auto", "120px")}}

+ +

다열 레이아웃

+ +

HTML

+ +
<p class="content-box">
+  This is some multi-column text with a 40px column
+  gap created with the CSS <code>gap</code> property.
+  Don't you think that's fun and exciting? I sure do!
+</p>
+
+ +

CSS

+ +
.content-box {
+  column-count: 3;
+  gap: 40px;
+}
+
+ +

결과

+ +

{{EmbedLiveSample("다열_레이아웃", "auto", "120px")}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Box Alignment", "#propdef-gap", "gap")}}{{Spec2("CSS3 Box Alignment")}}Initial definition
+ +

{{CSSInfo}}

+ +

브라우저 호환성

+ + + +

플렉스 레이아웃 지원

+ +

{{Compat("css.properties.gap.flex_context")}}

+ +

그리드 레이아웃 지원

+ +

{{Compat("css.properties.gap.grid_context")}}

+ +

다열 레이아웃 지원

+ +

{{Compat("css.properties.gap.multicol_context")}}

+ +

같이 보기

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