aboutsummaryrefslogtreecommitdiff
path: root/files/ko/learn/css/css_layout/grids/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/ko/learn/css/css_layout/grids/index.html')
-rw-r--r--files/ko/learn/css/css_layout/grids/index.html16
1 files changed, 8 insertions, 8 deletions
diff --git a/files/ko/learn/css/css_layout/grids/index.html b/files/ko/learn/css/css_layout/grids/index.html
index 293bde5f0f..bb02db1a6d 100644
--- a/files/ko/learn/css/css_layout/grids/index.html
+++ b/files/ko/learn/css/css_layout/grids/index.html
@@ -100,7 +100,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
</div>
</div>
-<p>{{ EmbedLiveSample('그리드_1', '100%', 400) }}</p>
+<p>{{ EmbedLiveSample('Grid_1', '100%', 400) }}</p>
<h3 id="Flexible_grids_with_the_fr_unit">fr 단위를 포함한 가변 그리드</h3>
@@ -158,7 +158,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
</div>
</div>
-<p>{{ EmbedLiveSample('그리드_2', '100%', 400) }}</p>
+<p>{{ EmbedLiveSample('Grid_2', '100%', 400) }}</p>
<div class="note">
<p><strong>참고</strong>: <code>fr</code> 단위는 <em>전체</em> 공간이 아닌 <em>이용 가능한</em> 공간을 분배한다. 따라서 당신의 트랙 중 하나가 자기 내부에 뭔가 큰 공간을 차지한다면 공유할 수 있는 여유 공간이 줄어들 것이다.</p>
@@ -215,7 +215,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
</div>
</div>
-<p>{{ EmbedLiveSample('그리드_3', '100%', 400) }}</p>
+<p>{{ EmbedLiveSample('Grid_3', '100%', 400) }}</p>
<div class="note">
<p><strong>참고</strong>: <code>*gap</code> 속성은 예전에는 <code>grid-</code> 접두사를 사용하곤 했지만, 해당 CSS 규격은 변경되었다. 당시는 그들 속성을 여러 레이아웃 메서드 상에서 사용할 수 있게 하자는 취지였다. 현재 마이크로소프트 에지와 파이어폭스는 해당(grid-) 접두사가 없는 버전을 지원하며 접두사 버전은 별칭으로 유지되므로 한동안 사용하는 데 지장이 없을 것이다. 당신이 안전한 쪽을 택하려면 완전 무결한 코드를 담보하기 위해 두 가지 속성을 이중으로 추가할 수 있다.</p>
@@ -284,7 +284,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
}</pre>
</div>
-<p>{{ EmbedLiveSample('그리드_4', '100%', 400) }}</p>
+<p>{{ EmbedLiveSample('Grid_4', '100%', 400) }}</p>
<h3 id="The_minmax_function">minmax() 함수</h3>
@@ -345,7 +345,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
}</pre>
</div>
-<p>{{ EmbedLiveSample('그리드_5', '100%', 400) }}</p>
+<p>{{ EmbedLiveSample('Grid_5', '100%', 400) }}</p>
<p>이것이 작동하는 까닭은 그리드가 그리드 컨테이너에 들어갈 수 있는 200픽셀의 열을 최대한 많이 만들고, 그 뒤 전체 열 사이 남은 공간이 얼마가 돼건 공유하기 때문이다. 최대치 1fr이며, 이미 알고 있듯이 트랙 사이 공간을 고르게 분배한다.</p>
@@ -461,7 +461,7 @@ aside {
</div>
</div>
-<p>{{ EmbedLiveSample('그리드_6', '100%', 400) }}</p>
+<p>{{ EmbedLiveSample('Grid_6', '100%', 400) }}</p>
<div class="note">
<p><strong>참고</strong>: 마지막 열 또는 행 라인을 상대로 <code>-1</code> 값을 사용할 수 있으며, 음수값을 사용하여 끝에서 안쪽으로 카운트할 수도 있습니다. 그러나 이 값은 명시적 그리드에만 통합니다. <code>-1</code> 값은 암시적 그리드의 마지막 라인에 적용하지 못합니다.</p>
@@ -567,7 +567,7 @@ footer {
</div>
</div>
-<p>{{ EmbedLiveSample('그리드_7', '100%', 400) }}</p>
+<p>{{ EmbedLiveSample('Grid_7', '100%', 400) }}</p>
<p><code>grid-template-areas</code>에 대한 규칙은 다음과 같다.</p>
@@ -674,7 +674,7 @@ aside {
</div>
</div>
-<p>{{ EmbedLiveSample('그리드_8', '100%', 400) }}</p>
+<p>{{ EmbedLiveSample('Grid_8', '100%', 400) }}</p>
<p><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">파이어폭스 그리드 검사기</a>를 사용하여 당신의 디자인 상의 그리드 라인을 겹쳐놓으면 12개로 구성된 열 그리드가 작동하는 방법을 볼 수 있습니다.</p>