diff options
Diffstat (limited to 'files/ko/web/css/css_flow_layout')
6 files changed, 497 insertions, 0 deletions
diff --git a/files/ko/web/css/css_flow_layout/index.html b/files/ko/web/css/css_flow_layout/index.html new file mode 100644 index 0000000000..32928121ff --- /dev/null +++ b/files/ko/web/css/css_flow_layout/index.html @@ -0,0 +1,46 @@ +--- +title: CSS Flow Layout +slug: Web/CSS/CSS_Flow_Layout +tags: + - CSS 흐름 레이아웃 + - 흐름 +translation_of: Web/CSS/CSS_Flow_Layout +--- +<div>{{CSSRef}}</div> + +<p class="summary"><em>일반적인 흐름 Normal Flow</em>, 또는 흐름 레이아웃 Flow Layout 은 그 레이아웃 변화가 있기 전까지 페이지 안의 블록 요소와 인라인 요소가 보여지는 방식 입니다. 흐름이란 본질적으로 레이아웃 아래 서로 같이 동작하고 서로에게 서로가 알려지는 것들의 집합 입니다. 만약에 어느 하나가 <em>흐름에서 벗어나면</em> 그것은 독립적으로 동작하게 됩니다.</p> + +<p><em>일반적인 흐름</em>에서, <strong>인라인</strong> 요소들은 한줄러 늘어서 보여지게 되는데, 이는 문서의 <a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">Writing Mode</a> 에 따라 문장 안의 단어들이 보여지는 방향을 따르게 됩니다. <strong>블록</strong> 요소들은 문서의 Writing Mode 에서의 단락이 하나씩 나눠져 보여지듯이 나타납니다. 그래서 영어에서는, 인라인 요소들은 왼쪽에서 시작하여 하나씩 보여지고, 블록 요소들은 맨 위에서부터 페이지를 따라 아래로 보여집니다.</p> + +<h2 id="기본적인_예">기본적인 예</h2> + +<p>아래의 예는 블록과 인라인 레벨 박스들을 설명합니다. 초록 테두리를 갖은 두개의 paragraph 요소들은 블록 레벨에 있어서 하나씩 위에서 아래로 나타납니다.</p> + +<p>첫번째 문장은 파란 바탕을 갖은 span 요소를 포함하고 있습니다. 이 요소는 인라인 레벨에 있으며 따라서 문장 내에 이어져 나타납니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}</p> + +<h2 id="Guides">Guides</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout in Normal Flow</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">In Flow and Out of Flow</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Flow Layout and Writing Modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">Flow Layout and Overflow</a></li> +</ul> + +<h2 id="Reference">Reference</h2> + +<h3 id="Glossary_Entries">Glossary Entries</h3> + +<ul> + <li>{{Glossary("Block/CSS", "Block (CSS)")}}</li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> +</ol> +</section> diff --git a/files/ko/web/css/css_flow_layout/intro_to_formatting_contexts/index.html b/files/ko/web/css/css_flow_layout/intro_to_formatting_contexts/index.html new file mode 100644 index 0000000000..3a91f6ba92 --- /dev/null +++ b/files/ko/web/css/css_flow_layout/intro_to_formatting_contexts/index.html @@ -0,0 +1,92 @@ +--- +title: 서식 상황 입문서 +slug: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts +tags: + - BFC + - 대열 + - 블록 서식 상황 + - 서식 상황 + - 씨에스에스 + - 안내서 + - 조판 + - 중급 +translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts +--- +<div>{{CSSRef}}</div> + +<p class="summary"><span class="seoSummary">이 문서는 서식 상황의 개념을 소개합니다. 서식 상황에는 블록 서식 상황과 인라인 서식 상황, 가변 서식 상황을 포함한 여러 유형이 있습니다. 그들이 어떻게 동작하고 어떻게 그러한 동작을 활용할 수 있는지에 대한 기본 사항도 소개합니다.</span></p> + +<p>페이지의 모든 것은 서식 상황(<strong>formatting context</strong>)의 일부이거나 특정 방식으로 콘텐츠를 배치하도록 정의된 영역입니다. 블록 서식 상황(<strong>block formatting context</strong>)은 블록 조판 규칙에 따라 자식 요소를 배치하고, 가변 서식 상황(<strong>flex formatting context</strong>)은 자식을 {{Glossary("flex item", "flex items")}}로 취급해 배치합니다. 각 서식 상황은 해당 상황에 속했을 때 조판이 어떻게 동작하는지에 대한 특정 규칙을 가지고 있습니다.</p> + +<h2 id="블록_서식_상황">블록 서식 상황</h2> + +<p>문서의 최외각 요소는 우선 블록 조판 규칙을 수립합니다. 이를 일컬어 초기 블록 서식 상황(<strong>initial block formatting context</strong>)이라고 합니다. 이는 <code><html></code> 요소 블록 내부의 모든 요소는 블록 및 인라인 조판 규칙을 따르는 일반 대열에 따라 배치됨을 의미합니다. 블록 서식 상황(<abbr title="Block Formatting Context">BFC</abbr>)에 참여하는 요소는 씨에스에스 상자 모델에 의해 윤곽이 제시된 규칙을 사용합니다. 이 모델은 요소의 여백, 테두리 및 패딩이 동일한 서식 상황에서 서로 다른 블록과 상호 작용하는 방법을 정의합니다.</p> + +<h3 id="새로운_블록_서식_상황_생성하기">새로운 블록 서식 상황 생성하기</h3> + +<p>단지 {{HTMLElement("html")}} 요소만이 블록 서식 상황을 생성할 능력을 갖춘 것은 아닙니다. 기본값으로 블록 조판인 모든 요소는 역시 자기 자손 요소에 대한 블록 서식 상황을 생성합니다. 또한 기본값으로 주어지지 않아도 블록 서식 상황을 생성하도록 할 수 있는 씨에스에스 속성이 있습니다. 동 속성이 유용한 까닭은 새로운 블록 서식 상황이 자체적으로 주 조판 내부의 소형 조판이 된다는 점에서 최외곽 문서와 매우 유사하게 작동하기 때문입니다. 블록 서식 상황은 그 내부에 모든 요소를 포함하고, {{cssxref("float")}} 및 {{cssxref("clear")}}는 동일한 서식 상황에 속한 항목에만 적용되며, 여백 축소는 동일한 서식 상황 요소 사이에만 이뤄집니다.</p> + +<p>우리 문서의 뿌리 요소인 ({{HTMLElement("html")}}) 이 외에도 새로운 블록 서식 상황은 다음과 같은 경우에 생성됩니다.</p> + +<ul> + <li>{{cssxref("float")}}를 사용으로 요소가 부동체가 되는 경우</li> + <li>절대 위치잡기한 요소, 여기에는 {{cssxref("position", "position: fixed", "#fixed")}} 혹은 {{cssxref("position", "position: sticky", "#sticky")}}가 포함됩니다.</li> + <li>{{cssxref("display", "display: inline-block", "#inline-block")}}이 적용된 요소</li> + <li><code>display: table-cell</code>이 적용된 테이블 셀 또는 요소, 여기에는 <code>display: table-*</code> 속성 무리를 사용한 익명 테이블 셀도 포함됩니다.</li> + <li><code>display: table-caption</code>이 적용된 테이블 캡션이나 요소</li> + <li><code>visible</code>이외의 대열이탈 값을 갖는 블록 요소</li> + <li><code>display: flow-root</code> 혹은 <code>display: flow-root list-item </code>가 적용된 요소</li> + <li>{{cssxref("contain", "contain: layout", "#layout")}}, <code>content</code>, 또는 <code>strict</code>가 적용된 요소</li> + <li>{{Glossary("flex item", "flex items")}}</li> + <li>격자 항목</li> + <li><a href="/ko/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">다단 컨테이너</a></li> + <li>{{cssxref("column-span")}}이 <code>all</code>로 설정된 요소</li> +</ul> + +<p>블록 서식 상황(<abbr title="Block Formatting Context">BFC</abbr>)을 생성하는 효과를 확인하기 위해 이들 중 몇 가지를 살펴봅시다.</p> + +<p>아래 예제에서, 우리는 테두리가 적용된 <code><div></code> 내부에 부동체 요소 하나를 가지고 있습니다. 해당 <code>div</code>의 콘텐츠는 부동체 요소와 나란히 부동해왔습니다. 동 부동체의 콘텐츠가 자기 옆에 있는 콘텐츠보다 키가 크기 때문에 하위 <code><div></code>의 테두리는 이제 부동체에 전체에 걸쳐 진행하고 있습니다. <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/대열과_탈대열">대열 요소와 탈대열 요소에 관한 안내서</a>에서 설명했듯이, 동 부동체는 대열에서 제외되어 <code><div></code> 요소의 배경과 테두리는 콘텐츠만 포함하지 부동체는 포함하지 않습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p> + +<p>새로운 블록 서식 상황(<abbr title="Block Formatting Context">BFC</abbr>)을 생성하면 동 부동체를 포함할 겁니다. 그러려면 전형적인 방법은 <code>overflow: auto</code>를 설정하거나, 초깃값인 <code>overflow: visible</code> 이외의 다른 값을 설정하는 식이었습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}</p> + +<p><code>overflow: auto</code>를 지정하여 동 부동체를 포함하는 새로운 블록 서식 상황(<abbr title="Block Formatting Context">BFC</abbr>)을 생성했습니다. 우리의 <code>div</code>가 이제는 우리 조판 내부에 소형 조판이 되었습니다. 모든 자식 요소는 소형 조판 내부에 포함되게 됩니다.</p> + +<p>대열이탈(<code>overflow</code>)을 사용하여 새로운 블록 서식 상황(<abbr title="Block Formatting Context">BFC</abbr>)을 생성하는 것이 문제가 되는 것은 대열이탈(<code>overflow</code>) 속성이 대열이탈 콘텐츠를 어떻게 다루고 싶은지 브라우저에 알려주기 위한 것입니다. 이 속성을 순수하게 블록 서식 상황을 생성할 목적으로 사용할 경우 원치 않는 스크롤 막대 또는 잘려 나간 그림자를 생기는 경우도 있습니다. 또한, 그 경우는 후진 개발자가 왔을 때 판독의 여지가 많지 않을 수 있습니다. 왜냐면 대열이탈을 무슨 목적으로 사용했는지 이유가 분명하지 않을 수 있기 때문입니다. 다음과 같이 하면 코드를 설명하는 데 좋은 아이디어가 될 것입니다.</p> + +<h3 id="display_flow-root을_사용하며_명시적으로_블록_서식_상황을_생성하기">display: flow-root을 사용하며 명시적으로 블록 서식 상황을 생성하기</h3> + +<p><code>display: flow-root</code> (또는 <code>display: flow-root list-item)</code>)를 컨테이너 블록상에 사용하면 잠재적인 문제가 될 수 있는 여타 부작용 없이 새로운 블록 서식 상황(<abbr title="Block Formatting Context">BFC</abbr>)을 생성합니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}</p> + +<p>{{HTMLElement("div")}}에 요소상에 <code>display: flow-root</code>을 적용하면, 컨테이너 내부의 모든 요소는 해당 컨테이너의 블록 서식 상황에 참여하게 되며, 부동체 무리는 동 요소 밑으로 돌출하지 않게 됩니다.</p> + +<p>대열뿌리(<code>flow-root</code>)라는 키워드 명명은 (마치 {{HTMLElement("html")}}의 경우처럼) 본질적으로 새로운 뿌리 요소와 같은 기능하는 어떤 것을 생성한다는 사실을 말해줍니다. 새로운 상황이 어떻게 생성되었으며 어떻게 해당 대열 조판이 기능하는지를 고려하면 그렇습니다.</p> + +<h2 id="인라인_서식_상황">인라인 서식 상황</h2> + +<p>인라인 서식 상황은 다른 서식 상황 내부에 존재하며 하나의 단락 상황처럼 생각될 수 있습니다. 단락은 텍스트상에 사용되는 {{HTMLElement("strong")}}, {{HTMLElement("a")}} 또는 {{HTMLElement("span")}} 등이 내부적으로 사용되는 인라인 서식 상황을 생성합니다.</p> + +<p>상자 모델은 인라인 서식 상황에 참여하는 항목에 100% 적용되지 않습니다. 가로쓰기 모드 라인에서 수평 패딩, 테두리 및 여백이 요소에 적용되고 텍스트를 왼쪽과 오른쪽으로 밀어냅니다. 그러나, 해당 요소 위와 아래에 여백은 적용되지 않습니다. 수직 패딩 및 테두리는 적용되지만 인라인 서식 상황에서 라인 상자가 패딩 및 테두리에 의해 밀려나지 않음으로 위와 아래에 내용이 겹칠 수 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}</p> + +<h2 id="기타_서식_상황">기타 서식 상황</h2> + +<p>이 안내서는 대열 조판을 다루므로 여타 가능한 서식 상황을 참조하지 않습니다. 따라서 어떤 유형의 서식 상황을 만드는 것이 서식 상황 속에 포함된 요소 무리가 작동하는 방식을 변화시킬 것인지 파악하는 것이 유용합니다. 이런 동작은 항상 에이치티엠엘 규격에 기술되어 있고, 또한 이곳 모질라 개발자 네트워크(MDN)에도 기술되어 있습니다.</p> + +<h2 id="요약정리">요약정리</h2> + +<p>이번 안내서에서는 블록 및 인라인 서식 상황과 블록 서식 상황(<abbr title="Block Formatting Context">BFC</abbr>)을 생성하는 중요한 주제를 자세히 살펴보았습니다. 다음 안내서에서는 <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/%ED%9D%90%EB%A6%84_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EA%B3%BC_%EC%93%B0%EA%B8%B0_%EB%AA%A8%EB%93%9C">어떻게 일반 대열과 서로 다른 쓰기 모드가 상호 작용</a>하는지에 대해 알아보겠습니다.</p> + +<h2 id="참조_항목">참조 항목</h2> + +<ul> + <li><a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">불록 서식 상황</a></li> + <li><a href="/ko/docs/Web/Guide/CSS/Visual_formatting_model">시각적 서식 모델</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Box_Model">씨에스에스 기본 상자 모델</a></li> +</ul> diff --git a/files/ko/web/css/css_flow_layout/대열과_탈대열/index.html b/files/ko/web/css/css_flow_layout/대열과_탈대열/index.html new file mode 100644 index 0000000000..2b05d99f39 --- /dev/null +++ b/files/ko/web/css/css_flow_layout/대열과_탈대열/index.html @@ -0,0 +1,72 @@ +--- +title: 대열과 탈대열 +slug: Web/CSS/CSS_Flow_Layout/대열과_탈대열 +tags: + - 대열 + - 대열 조판 + - 씨에스에스 + - 씨에스에스 대열 조판 + - 안내서 + - 조판 + - 중급 +translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow +--- +<div>{{CSSRef}}</div> + +<p class="summary"><a href="/ko/docs/Web/CSS/CSS_Flow_Layout/%EC%9D%BC%EB%B0%98_%ED%9D%90%EB%A6%84_%EC%86%8D_%EB%B8%94%EB%A1%9D_%EB%B0%8F_%EC%9D%B8%EB%9D%BC%EC%9D%B8_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83">이전 안내서</a>에서 제가 일반 대열 속 블록 및 인라인 조판에 대해 설명하였습니다. 대열에 속한 모든 요소는 이 메서드를 사용하여 배치됩니다.</p> + +<p>다음 예제에서는 머리글, 단락, 목록 및 <code>strong</code> 요소가 포함된 마지막 단락이 있습니다. 머리글과 단락은 블록 레벨이며, <code>strong</code> 요소는 인라인입니다. 목록은 가변상자를 사용하여 항목을 행 내부로 정렬하지만 블록 및 인라인 조판에도 참여하고 있습니다. 컨테이너는 외곽에 <code>display</code> 유형이 <code>block</code> 대열에 참여하고 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}</p> + +<p>요소 무리 전체는 대열에 속해 있다고 말할 수 있습니다. 에이치티엠엘 소스에 나타나는 순서대로 요소 무리들이 웹페이지에 등장합니다.</p> + +<h2 id="항목을_대열_밖으로_빼내기">항목을 대열 밖으로 빼내기</h2> + +<p>대열에 속한 모든 요소는 다음과 구분된다:</p> + +<ul> + <li>부동 항목</li> + <li><code>position: absolute</code> 속성이 부여된 항목 (아울러 <code>position: fixed</code> 속성이 딸린 항목도 마찬가지로 동작합니다.)</li> + <li>뿌리 요소(<code>html</code>)</li> +</ul> + +<p>대열에서 벗어난 항목은 새로운 블록 서식 상황(BFC)를 생성하므로, 그 안에 있는 모든 것은 페이지의 나머지 부분과는 구분되는 소형 조판으로 볼 수 있다. 따라서 뿌리 요소는 우리 문서의 모든 내용에 해당하는 컨테이너이기 때문에 대열을 벗어나 있으며 당 문서에 대한 블록 서식 상황을 수립합니다.</p> + +<h3 id="부동_항목">부동 항목</h3> + +<p>이 예제에서 나는 <code>div</code>를 가지고 있고, 그 다음 두 단락을 갖고 있다. 문단에 배경색을 추가한 다음 <code>div</code> 요소를 왼쪽으로 부동시켰다. 이제 <code>div</code>는 대열에서 벗어났다.</p> + +<p>부동체는 우선 일반 대열에 속했던 애초의 위치를 기준으로 배치되었고, 그 뒤 대열에서 벗어나 최대한 왼쪽으로 이동합니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}</p> + +<p>여러분은 부동체 밑에 펼쳐지고 있는 다음 단락의 배경색을 볼 수 있습니다. 동 단락의 라인 상자 무리만 부동체 주변 콘텐츠를 둘러싸는 효과를 위해 축소되었습니다. 우리 단락 형태의 상자는 여전히 일반 대열이라는 규칙에 따라 표시되고 있습니다. 바로 그런 까닭에 부동 항목 주위에 공간을 만들려면 동 항목에 여백을 추가해서 그 여백으로부터 라인 상자 무리를 밀려나도록 해야하는 겁니다. 대열에 속한 다음 순번 콘텐츠에는 그 어떤 것을 적용한다고 해도 그런 효과를 달성할 수 없습니다.</p> + +<h3 id="절대_위치잡기">절대 위치잡기</h3> + +<p>어떤 항목에 <code>position: absolute</code>나 <code>position: fixed</code>를 부여하면 동 항목이 대열에서 제거되며, 그것이 점유하고 있던 모든 공간이 제거됩니다. 다음 예제에서 나는 세 개의 단락 요소를 가지고 있으며, 두 번째 요소는 <code>position</code>와 <code>absolute</code>임에 더해 간격띄우기 값이 <code>top: 30px</code>에 <code>right: 30px</code> 해당됩니다. 그 (두 번째) 요소는 문서 대열에서 제거되었습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}</p> + +<p><code>position: fixed</code>를 사용해 대열에서 항목을 제거하지만, 간격띄우기는 컨테이너 블록이 아닌 브라우저 뷰포트가 기준입니다.</p> + +<p>위치잡기를 통해 대열에서 항목을 빼내면 콘텐츠의 중복 가능성을 관리해야 합니다. 대열에서 벗어나면 페이지의 다른 요소는 더 이상 요소가 존재한다는 것을 알지 못하므로 이에 반응하지 않습니다.</p> + +<h3 id="상대_위치잡기와_대열">상대 위치잡기와 대열</h3> + +<p>어떤 항목에 <code>position: relative</code> 위치잡기를 부여하면 그것은 대열에 잔류하지만, 당신은 간격띄우기 값을 사용하여 동 항목을 주변으로 밀어낼 수 있습니다. 그러나 아래 예제에서 볼 수 있듯이 그것이 일반 대열 위치에 그대로 남아 있게 됩니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}</p> + +<p>일반 대열에 속해 있었던 어떤 항목을 제거하거나 이동할 때, 해당 항목 주변의 콘텐츠를 겹치지 않도록 관리해야 할 필요성이 있다는 것을 예상할 수밖에 없을 겁니다. 말하자면 부동체를 정리하거나 <code>position: absolute</code>가 적용된 요소가 여타 콘텐츠에 올라타지 않도록 담보해야 합니다. 이러한 이유로 요소 무리를 대열 속에서 제거하는 메서드는 그들 메서드가 가져올 영향을 파악한 상태에서 사용되어야 합니다.</p> + +<h2 id="요약정리">요약정리</h2> + +<p>이번 안내서에서는 매우 구체적인 유형의 위치잡기를 달성하기 위해 요소를 일반 대열에서 빼내는 여러 방법을 다루었습니다. 다음 안내서에서는 <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">서식 상황 해설</a> 가운데에서 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 상황</a>을 생성하는 등의 관련 이슈를 살펴볼 겁니다.</p> + +<h2 id="참조_항목">참조 항목</h2> + +<ul> + <li>서식 학습하기: <em><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9C%84%EC%B9%98%EC%9E%A1%EA%B8%B0">위치잡기</a></em></li> +</ul> diff --git a/files/ko/web/css/css_flow_layout/일반_흐름_속_블록_및_인라인_레이아웃/index.html b/files/ko/web/css/css_flow_layout/일반_흐름_속_블록_및_인라인_레이아웃/index.html new file mode 100644 index 0000000000..cc7753cb70 --- /dev/null +++ b/files/ko/web/css/css_flow_layout/일반_흐름_속_블록_및_인라인_레이아웃/index.html @@ -0,0 +1,122 @@ +--- +title: 일반 대열 속 블록 및 인라인 조판 +slug: Web/CSS/CSS_Flow_Layout/일반_흐름_속_블록_및_인라인_레이아웃 +tags: + - 대열 + - 씨에스에스 + - 씨에스에스 대열 조판 + - 안내서 + - 여백 + - 조판 + - 중급 +translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow +--- +<div>{{CSSRef}}</div> + +<p class="summary">이번 안내서에서는 블록 및 인라인 요소가 일반 대열의 일부일 때 어떻게 동작하는지에 대한 기본 사항을 살펴본다.</p> + +<p>일반 대열은 <a href="https://www.w3.org/TR/CSS2/visuren.html#normal-flow">씨에스에스 2.1규격</a>에 정의되어 있으며, 이는 일반 대열에 소속된 상자가<em> 서식 상황</em>의 일부가 된다는 것을 설명한다. 그 상자는 블록 또는 인라인이 될 수 있지만 동시에 양수겸장이 될 수는 없다. 블록 수준 상자는 <em>블록 서식 상황</em>에 참여하는 것으로, 인라인 수준 상자는 <em>인라인 서식 상황</em>에 참여하는 것으로 기술한다.</p> + +<p>블록 또는 인라인 서식 상황에 해당하는 요소의 동작은 이(CSS2.1) 규격에서 정의한다. 블록 형식 상황에 해당하는 요소의 경우 규격은 다음과 같다:</p> + +<blockquote> +<p>블록 서식 상황에서 상자는 컨테이너 블록의 맨 위에서 시작하여 수직으로 하나씩 배치된다. 두 형제(동급) 상자 사이 수직 간격은 '여백' 속성에 의해 결정된다. 블록 서식 상황에 속하는 인접하는 블록 수준 상자 사이 수직 여백은 축소된다.<br> + 블록 서식 지정 상황에 속하는 각 상자의 왼쪽 바깥족 가장자리는 콘테이너 블록의 왼쪽 가장자리를 접한다. (오른쪽에서 왼쪽[아랍어] 방향 서식의 경우는 우측 가장자리를 접한다.)" - 9.4.1</p> +</blockquote> + +<p>인라인 서식 상황에 해당하는 요소의 경우:</p> + +<blockquote> +<p>인라인 서식 상황에서 상자는 콘테이너 블록의 상단에서 하나씩 차례로 수평으로 배치된다. 이 상자들 사이 수평 여백, 테두리 및 패딩은 준수된다. 상자는 다양한 방법으로 수직으로 정렬될 수 있다. 상자의 하단이나 상단에 맞춰 정렬되거나 텍스트의 기준선에 맞춰 정렬될 수 있다. 라인 형태를 띠는 여러 상자를 가두는 직사각형 영역을 라인 상자라고 한다. "- 9.4.2</p> +</blockquote> + +<p>씨에스에스 2.1 규격은 문서를 가로쓰기와 세로 쓰기 모드로 기술하고 있다. 예를 들어 블록 상자 사이의 수직 거리를 기술한다. 블록 및 인라인 요소의 동작 방식은 세로 쓰기 모드에서 동작할 때와 동일하다. 앞으로 게시될 대열 조판과 쓰기 모드에 관한 안내서에서 세로 쓰기 모드의 경우를 살펴볼 예정이다.</p> + +<h2 id="블록_서식_상황에_참여하는_요소">블록 서식 상황에 참여하는 요소</h2> + +<p>영어와 같은 가로쓰기 모드에서 블록 요소는 수직으로 다른 대상 요소 바로 밑에 배치된다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16125/mdn-horizontal.png" style="height: 382px; width: 521px;"></p> + +<p>세로 쓰기 모드에서는 수평으로 배치된다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16126/mdn-vertical.png" style="height: 382px; width: 418px;"></p> + +<p>이 안내서에서 우리는 영어로 작업할 것이기 때문에 가로쓰기 모드를 다룬다. 그러나 기술된 내용 전체는 세로 쓰기 모드에서도 당연히 동일한 방식으로 작동한다.</p> + +<p>씨에스에스 규격에 정의된 대로 2개의 블록 상자 사이 여백이 바로 상자 요소 사이를 구분해주는 것이다. 우리는 그점을 눈으로 확인하기 위해 2개의 단락으로 매우 간단한 하나의 조판에 테두리를 추가했다. 기본 브라우저의 스타일시트는 상하 요소에 여백을 더하는 방식으로 단락 사이 간격을 추가한다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}</p> + +<p>단락 요소의 여백을 <code>0</code>으로 설정하면, 테두리는 접촉한다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}</p> + +<p>기본 설정에 따라 블록 요소는 인라인 방향에 포함된 모든 빈공간을 차지하므로 당해 단락은 펼쳐지면서 콘테이너 블록 내부를 최대한 차지할 수 있게 된다. 블록 너비를 적시하게 되면 옆 공간에 나란히 배치될 공간이 있다손치더라도 다른 대상 요소 바로 밑에 배치된다. 각 블록은 콘테이너 블록의 시작 가장자리에 맞춰 시작되며, 그 위치에 맞춰 해당 쓰기 모드에 포함되는 문장이 시작된다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}</p> + +<h3 id="여백_축소">여백 축소</h3> + +<p>씨에스에스 규격에 따라 블록 요소 사이의 여백이 <em>축소</em>된다. 즉, 하단 여백이 있는 요소 바로 뒤에 상단 여백을 가진 요소가 있으면 두 여백의 합이 전체 공간이 되는게 아니라 여백이 축소되는데, 본질적으로 두 여백 중 더 큰 것으로 갈음한다.</p> + +<p>아래의 예에 포함된 단락들은 <code>20px</code>의 상부 여백과 <code>40px</code>의 하부 여백을 갖고 있다. 단락 사이 여백의 크기는 <code>40px</code>이다. 왜냐면 두번째 단락의 상대적으로 작은 상부 여백이 첫번째 단락의 상대적으로 큰 하부 여백에 맞춰 축소되었기 때문이다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}</p> + +<p>여백 축소에 관해선 <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 축소 정복 </a>안내서에서 자세한 내용을 파악할 수 있다.</p> + +<div class="note"> +<p>참고: 여백의 축소 여부가 불확실할 경우 브라우저 개발툴에 나오는 상자 모델 값을 확인하십시오. 이렇게 하면 현재 일어나고 일을 파악하는 데 도움이 될 수 있는 실제 여백 크기를 알 수 있습니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16124/box-model.png" style="height: 848px; width: 828px;"></p> +</div> + +<h2 id="인라인_서식_상황에_참여하는_요소">인라인 서식 상황에 참여하는 요소</h2> + +<p>인라인 요소는 특정 쓰기 모드에서 문장이 진행하는 방향으로 하나씩 차례대로 표시한다. 인라인 요소를 상자로 간주하지 않는 경향이 있지만 씨에스에스에 속하는 모든 요소처럼 그들도 상자로 간주된다. 이 인라인 상자들은 하나씩 차례대로 배열되어 있다. 컨테이너 블락에 상자 전체를 위한 충분한 공간이 없으면 새 줄로 넘어간다. 생성된 라인은 라인 상자라고 통용된다.</p> + +<p>다음 예에서는 스트롱(strong) 요소를 내부에 포함하는 단락의 형태로 생성된 세개의 인라인 상자가 있다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}</p> + +<p><code>strong</code> 요소 전후로 단어를 감싼 상자들은 무명 상자라고 하며 모든 것이 상자로 둘러쳐 있음을 담보하기 위해 상자가 도입된 것이되 직접 대상화할 수 없는 요소이다.</p> + +<p>블록 방향의 라인 상자의 크기는(영어 단락 작업시 글 높이의 경우)는 내부에 있는 가장 큰 상자에 의해 정의된다. 다음 예에서 나는 스트롱 요소의 크기를 300%로 만들었고, 이제 그 콘텐츠가 해당 선상의 라인 상자 높이를 정의한다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}</p> + +<p>블락과 인라인 상자의 동작 방식에 대해 자세한 내용은 <a href="/ko/docs/Web/Guide/CSS/Visual_formatting_model">시각적 서식 모델</a> 안내서를 찾아보십시요.</p> + +<h2 id="display속성_및_대열_조판"><code>display</code>속성 및 대열 조판</h2> + +<p>씨에스에스 2.1에 존재하는 규칙 외에도 새로운 수준의 씨에스에스는 블록 및 인라인 상자의 동작을 추가로 기술한다. <code>display</code> 속성은 상자와 상자 속 상자의 동작 방법을 정의한다. 씨에스에스 디스플레이 모델 수준 3 내용을 보면 디스플레이 속성이 상자의 동작과 생성된 상자에 변화를 주는 방법에 대해 더 자세히 알 수 있다.</p> + +<p>요소의 디스플레이 유형은 외부 디스플레이 유형을 정의하며, 이 외부 디스플레이 유형은 상자가 동일 서식 상황에 속한 다른 요소와 어떻게 병행 표시되는지를 지정한다. 또한, (씨에스에스 디스플레이 모델 수준 3을 보면) 이 요소 내부에 속한 상자가 작동하는 방식을 지정하는 내부 디스플레이 유형도 정의한다. 이런 내용은 가변(flex) 조판를 고려할 때 명확하게 확인할 수 있다. 아래 예제에서 나에게 <code>display: flex</code>를 적용한 div 요소 하나가 있다. 가변 컨테이너는 블록 요소처럼 동작한다. 새 줄에 표시되고 인라인 진행 방향에서 차지할 수 있는 모든 공간을을 차지한다. 이것은 <code>block</code>의 외부 디스플레이 유형이다.</p> + +<p>그러나 가변 항목("Flex Item" 문자열 2개)은 가변 서식 상황에 참여하고 있다. 왜냐면 부모(class container)가 display: flex가 지정된 요소이고, 따라서 (상속에 의해) 내부 디스플레이 유형이 가변이므로 직계 자식의 경우 가변 서식 상황이 수립된다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}</p> + +<p>따라서 씨에스에스에 포함된 모든 상자가 이런 식으로 작동한다고 간주할 수 있다. 상자 자체는 외부 디스플레이 유형도 갖고있기 때문에 다른 상자와 병행 동작하는 방법을 알고 있다. 그리고 상자는 내부 디스플레이 유형도 갖고있어 자식의 동작 방식도 변경한다. 이어 해당 자식은 외부 및 내부 디스플레이 유형도 갖게된다. 앞 예제에서 가변 항목("Flex Item" 문자열 2개)은 가변 수준 상자가 되며, 따라서 그것의 외부 디스플레이 유형은 그것들이 가변 서식 상황의 일부가 되는 방식에 의해 결정된다. 그들 항목은 <em>대열</em> 디스플레이 유형을 갖게 되는데, 그 의미는 자식이 일반 대열에 참여한다는 것을 의미한다. 당해 가변 항목 내부에 중첩된 항목('children' 'are in' 'normal flow')은 디스플레이 유형이 바뀌지 않는한 블록 및 인라인 요소로 배치된다.</p> + +<p>외부 및 내부 디스플레이 유형이란 개념은 Flexbox(<code>display: flex</code>)와 Grid Layout(<code>display: grid</code>)과 같은 조판 메서드를 사용하는 컨테이너가 해당 메서드의 외부 디스플레이 유형이 <code>block</code>인 관계로 블록 및 인라인 조판에 계속해서 참여하고 있다는 것을 알려준다는 점에서 중요하다.</p> + +<h3 id="하나의_요소가_참여하는_대상의_서식_상황_변경">하나의 요소가 참여하는 대상의 서식 상황 변경</h3> + +<p>브라우저는 해당 요소의 통상적 타당성 여하에 따라 항목을 블록 또는 인라인 서식 맥락의 일부로 표시한다. 예들들면 단어를 강조를 강조하기 위해 스트롱 요소를 사용하며, 브라우저에 굵게 표시됩니다. 스트롱 요소가 블록 수준 요소로 표시되어 새 줄로 밀려나는 것은 일반적으로 타당하지 않다. 당신이 모든 스트롱 요소를 블록 요소로 표시하기를 원하면 당신은 <code>strong</code> 요소에 <code>display: block</code>를 설정함으로써 그렇게 할 수 있다. 즉, 항상 가장 의미론적으로 타당한 HTML 요소를 사용하여 콘텐츠를 표시한 다음 씨에스에스를 사용하여 표시되는 방식을 변경할 수 있다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}</p> + +<h2 id="요약정리">요약정리</h2> + +<p>이번 안내서에서 우리는 블록 요소나 인라인 요소일 경우처럼 일반 대열속에서 요소가 어떻게 표시되는지 살펴보았다. 이러한 요소에 정해진 기본 동작이 있는 관계로 씨에스에스 스타일 지정이 전혀 없는 에이치티엠엘 문서가 읽기 가능한 방식으로 표시된다. 일반 대열의 작동 방식을 이해하면 조판이 더 쉬워지는 데 그 이유는 요소가 표시되는 방식을 변경하는 출발점을 이해하는 것이기 때문이다.</p> + +<h2 id="참조_항목">참조 항목</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Box_Model">씨에스에스 기본 상자 모델</a></li> + <li><em><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></em> - 조판 살펴보기</li> + <li><a href="/ko/docs/Web/HTML/Inline_elements">인라인 요소</a></li> + <li><a href="/ko/docs/Web/HTML/Block-level_elements">블락 수준 요소</a></li> +</ul> diff --git a/files/ko/web/css/css_flow_layout/흐름_레이아웃과_쓰기_모드/index.html b/files/ko/web/css/css_flow_layout/흐름_레이아웃과_쓰기_모드/index.html new file mode 100644 index 0000000000..4d35855ee5 --- /dev/null +++ b/files/ko/web/css/css_flow_layout/흐름_레이아웃과_쓰기_모드/index.html @@ -0,0 +1,92 @@ +--- +title: 대열 조판과 쓰기 모드 +slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_쓰기_모드 +tags: + - 대열 조판 + - 쓰기모드 + - 씨에스에스 + - 안내서 + - 지향 +translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes +--- +<p class="summary">어떻게 일반 대열이 동작하는지 자세히 설명하는 씨에스에스 2.1 규격은 가로쓰기 모드라고 가정한다. <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/일반_대열_속_블록_및_인라인_조판">조판</a> 속성은 세로 쓰기 모드에서 동일한 방식으로 작동해야 한다. 이 안내서는 서로 다른 문서 작성 모드에서 사용될 때 대열 조판이 어떻게 작동하는지 살펴 봅니다.</p> + +<p>이것은 씨에스에스(CSS)에 포함된 쓰기 모드 사용에 대한 종합적인 안내서가 아니다. 이 글의 목적은 대열 조판이 쓰기 모드와 예상치 못한 방식으로 상호 작용하는 지점을 문서화하는 것이다. 이 문서의 <a href="#See_Also">참조 항목</a>과 <a href="#External_Resources">외부 리소스</a> 섹션은 쓰기 모드 관련 더 많은 링크를 제공하고 있다.</p> + +<h2 id="쓰기_모드_규격">쓰기 모드 규격</h2> + +<p>씨에스에스 쓰기 모드 수준 3 규격은 문서의 쓰기 모드가 대열 조판에 미치는 영향을 정의한다. 씨에스에스 쓰기 모드 소개란에서 전하는 <a href="https://drafts.csswg.org/css-writing-modes-3/#text-flow">규격은 다음과 같다.</a></p> + +<blockquote> +<p>씨에스에스에 포함되는 쓰기 모드는 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} 속성에 의해 결정된다. 쓰기 모드는 주로 인라인 기준 방향과 블록 대열 방향 여하에 따라 정의된다."</p> +</blockquote> + +<p>쓰기 모드 규격은 내용물이 라인에 정렬되는 방향에 따라 <em>인라인 기준 방향</em>을 정의한다. 기준 방향이 인라인 방향의 시작과 끝을 정의한다. 인라인 방향의 시작은 문장이 시작되는 곳이고, 인라인 방향의 끝은 새 줄로 넘어가기 전에 텍스트가 끝나는 곳이 끝나는 곳이다.</p> + +<p><em>블록 대열 방향</em>은 예로 단락의 경우처럼 블록 쓰기 모드에서 상자를 쌓는 방향이다. 씨에스에스 쓰기 모드 속성은 블록 대열 방향을 제어한다. 페이지 또는 페이지의 일부를 <code>vertical-lr</code>로 변경하고 싶다면, 대상 요소에 <code>writing-mode: vertical-lr</code>를 설정할 수 있고, 이로써 블록의 방향을 변경하는 것이고 아울러 인라인 방향도 변경된다.</p> + +<p>특정 언어일 경우 특정 쓰기 모드나 텍스트 방향을 사용하겠지만, 제목을 세로로 돌리는 등 창의적인 효과를 위해 그러한 속성을 사용할 수도 있다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}</p> + +<h2 id="writing-mode_속성_및_블록_대열"><code>writing-mode</code> 속성 및 블록 대열</h2> + +<p>{{cssxref("writing-mode")}} 속성은 <code>horizontal-tb</code>과 <code>vertical-rl</code>, <code>vertical-lr</code>를 속성값으로 받는다. 이들 속성값은 페이지 상에 블록의 대열 방향을 제어한다. 초기 값은 <code>horizontal-tb,</code>로써 가로 인라인 방향이 포함된 상단에서 하단으로 가는 블록 대열 방향이다. 영어와 같이 왼쪽에서 오른쪽 방향 언어과 오른쪽에서 왼쪽 방향 언어인 아랍어의 경우든 모두가 <code>horizontal-tb</code>이다.</p> + +<p>다음 예는 <code>horizontal-tb</code>를 사용하는 블록을 보여준다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}</p> + +<p>속성값 <code>vertical-rl</code>는 다음 예와 같이 세로 인라인 방향을 포함하는 오른쪽에서 왼쪽으로 가는 블록 대열 방향을 제공한다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}</p> + +<p>마지막 예는 <code>vertical-lr</code>로써 세번 째로 가능한 <code>writing-mode</code> 속성값을 시연하고 있다. 이렇게 하면 왼쪽에서 오른쪽 블록 대열 방향과 세로 인라인 방향을 얻을 수 있다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}</p> + +<h2 id="부모와_다른_쓰기_모드를_가진_상자">부모와 다른 쓰기 모드를 가진 상자</h2> + +<p>중첩된 상자에 부모와 다른 쓰기 모드가 할당된 경우 인라인 수준 상자는 <code>display: inline-block</code>이 적용된 듯이 표시된다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}</p> + +<p>블록 수준 박스는 새로운 블록 서식 상황을 설정하게 되는데, 내부 디스플레이 유형이 <code>flow</code>일 경우 계산에 따른 디스플레이 유형인 <code>flow-root</code>를 얻게 된다는 뜻이다. 이것은 다음 예에서 보다시피 <code>horizontal-tb</code> 속성에 따라 표시되는 상자가 부동 요소를 포함하고 있는데, 그것이 포함된 까닭은 부모가 새로운 블록 대열 상황을 수립했기 때문이다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}</p> + +<h2 id="대체_요소">대체 요소</h2> + +<p>이미지와 같은 대체 요소는 <code>writing-mode</code>에 주어진 속성에 근거하여 (가로 세로) 쓰기 방향를 바꾸지 않는다. 그러나 텍스트를 포함하는 양식 컨트롤과 같은 대체 요소는 사용중인 쓰기 모드와 일치해야 한다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}</p> + +<h2 id="논리적_속성_및_속성값">논리적 속성 및 속성값</h2> + +<p>당신이 <code>horizontal-tb</code> 이외의 쓰기 모드에서 작업하게 될 경우, 스크린의 물리적 크기에 매핑되는 많은 속성 및 속성값들이 이상하게 보일 것이다. 예를 들면 상자에 100px을 부여하면 쓰기 모드가 <code>horizontal-tb</code>일 경우에 인라인 방향의 크기(100px)를 통제하게 된다. 쓰기 모드가 <code>vertical-lr</code>일 상황에서 상자가 텍스트에 맞춰 회전하지 않기 때문에 블록 방향 크기를 상자가 제어한다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}</p> + +<p>따라서 우리에게 {{cssxref("블록 크기")}} 및 {{cssxref("인라인 크기")}}라는 새로운 속성이 주어진다. 당해 블록에 <code>inline-size</code>를 100px 부여할 경우 가로쓰기 또는 세로 쓰기 모드 여부는 상관없어지며, <code>inline-size</code>일 경우 항상 인라인 방향의 크기를 의미하게 된다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}</p> + +<p><a href="/ko/docs/Web/CSS/CSS_Logical_Properties">씨에스에스 논리적 속성</a> 규격은 여백, 패딩 및 테두리를 제어하는 속성의 논리적 버전뿐만 아니라 일반적으로 물리적 방향 지정을 위해 대상 요소에 전형적으로 사용되는 다른 매핑을 포함하고 있다.</p> + +<h2 id="요약정리">요약정리</h2> + +<p>대부분의 경우, 문서의 쓰기 모드 또는 문서의 일부를 변경할 때 당신이 대상 요소에 기대하는 대로 대열 조판이 작동한다. 쓰기 모드는 세로 쓰기 언어를 올바르게 조판하거나 독창적 표현을 이유로 사용할 수 있다. 씨에스에스는 세로 쓰기 모드에서 작업할 때 크기의 척도를 요소의 인라인과 블록 크기에 기초할 수 있도록 논리적 속성과 속성값을 도입하는 방식으로 간편한 설정을 가능케 해준다. 이런 내용은 다른 쓰기 모드에서 작동할 수 있는 구성 요소를 만들 경우에 유용할 것이다.</p> + +<h2 id="참조_항목">참조 항목</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Writing_Modes">쓰기 모드</a></li> +</ul> + +<h2 id="외부_리소스">외부 리소스</h2> + +<ul> + <li><em><a href="https://24ways.org/2016/css-writing-modes/">씨에스에스 쓰기 모드</a></em>, 젠 시몬스가 소개하는 24가지 방식</li> +</ul> + +<div>{{QuickLinksWithSubpages("/ko/docs/Web/CSS/CSS_Flow_Layout/")}}</div> diff --git a/files/ko/web/css/css_flow_layout/흐름_레이아웃과_오버플로/index.html b/files/ko/web/css/css_flow_layout/흐름_레이아웃과_오버플로/index.html new file mode 100644 index 0000000000..697bdfacde --- /dev/null +++ b/files/ko/web/css/css_flow_layout/흐름_레이아웃과_오버플로/index.html @@ -0,0 +1,73 @@ +--- +title: 대열 조판과 대열이탈 +slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_오버플로 +tags: + - 가시성 + - 대열 조판 + - 대열이탈 + - 씨에스에스 + - 안내서 + - 조판 + - 중급 + - 텍스트 대열이탈 +translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow +--- +<p class="summary">컨테이너에 채울 수 없을 만큼 더 많은 내용물이 있을 때 오버플로 상황이 발생한다. CSS에서 크기 제한이 있는 요소를 다루려면 오버플로의 동작 방식을 이해하는 것이 중요하다. 이 안내서는 일반 플로우에 해당하는 작업 중에 오버플로이 작동하는 방식을 설명한다.</p> + +<h2 id="오버플로은_무엇인가">오버플로은 무엇인가?</h2> + +<p>어떤 요소에 고정 높이 및 너비를 부여한 다음, 상자에 상당한 내용물을 추가하면 기본적인 오버플로 사례가 만들어 진다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}</p> + +<p>내용물이 상자 안으로 들어간다. 상자가 채워지면, 눈에 보이게 오버플로이 계속되면서 상자 밖으로 내용물이 표시되고, 후속 내용물 아래에 표시될 가능성까지 있다. 오버플로 동작 방식을 통제하는 속성은 오버플로 속성으로 초기값은 <code>visible</code>로 되어 있다. 그런 까닭에 오버플로한 내용물를 볼 수 있다.</p> + +<h2 id="오버플로_통제">오버플로 통제</h2> + +<p>오버플로된 내용물이 동작하는 방식을 통제하는 그 밖의 값들이 있다. 오버플로된 내용물을 감추려면 <code>hidden</code> 값을 사용한다. 이 값은 내용물을 보이지 않게 만들 수도 있다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}</p> + +<p><code>scroll</code> 값을 사용해서 상자의 내용물을 상자 안에 가둬두고 내용물을 볼 수 있게 스크롤 막대를 추가할 수 있다. 스크롤 막대는 내용물이 상자에 들어맞더라도 추가될 것이다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}</p> + +<p><code>auto</code> 값을 사용하면 상자안에 내용물이 들어맞을 경우 스크롤 막대 없이 내용물을 표시하게 된다. 만일 내용물이 들어맞지 않는다면 스크롤 막대가 추가되게 된다. 다음 예를 <code>overflow: scroll</code> 경우의 예와 비교하면 수직 스크롤 막대가 필요할 경우에도 <code>overflow scroll</code>의 예는 수평 및 수직 스크롤 막대가 있음을 알수 있다. 아래 <code>auto</code> 예제에서는 우리가 스크롤이 필요한 방향으로만 스크롤 막대를 추가한다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}</p> + +<p>이미 배운 바와 같이 기본값인 <code>visible</code> 이외에 살펴본 값 중의 어떤 값을 사용하게 되면 새로운 블록 서식 상황을 생성하게 된다.</p> + +<p>참고: <a href="https://www.w3.org/TR/css-overflow-3/">작업 초안 오버플로 수준 3</a>을 보면 추가적인 속성 값으로 <code>overflow: clip</code>이 있다. 이것은 <code>overflow: hidden</code>와 같이 작용하지만, 프로그래밍 방식의 스크롤이 불용되어 스크롤 할 수 상자가 된다. 또한, 이것은 블록 서식 상황을 생성하지 못한다.</p> + +<p>오버플로 속성은 실제로는 <code><a href="/en-US/docs/Web/CSS/overflow-x">overflow-x</a></code>와 <code><a href="/en-US/docs/Web/CSS/overflow-y">overflow-y</a></code> 속성의 약칭이다. 오버플로 값을 하나만 지정하면 이 값은 가로 세로 양 축에 모두 사용된다. 그러나 두 가지 값 모두를 지정할 수 있다. 첫번 째 경우에는 <code>overflow-x</code>를 수평 방향 값으로 두번째 경우에는 <code>overflow-y</code>를 수직 방향 값으로 사용하면 된다. 아래 예에서 나는 <code>overflow-y: scroll</code>만 지정함으로써 원치 않는 가로 스크롤 막대가 나타나지 않도록 했다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}</p> + +<h2 id="상대적_플로우_속성">상대적 플로우 속성</h2> + +<p>우리는 <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/%ED%9D%90%EB%A6%84_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EA%B3%BC_%EC%93%B0%EA%B8%B0_%EB%AA%A8%EB%93%9C">쓰기 모드와 플로우 레이아웃</a> 안내서에서 <code>block-size</code>와 <code>inline-size</code>라는 새로운 속성를 살펴보았는데, 이 속성은 물리적인 화면 크기에 레이아웃을 구속하기보다는 다양한 쓰기 모드에서 작업할 경우에 적합하다. 수준 3 오버플로 모듈에는 플로우에 상대적인 오버플로 속성들<code><a href="/en-US/docs/Web/CSS/@media/overflow-block">overflow-block</a></code>와 <code><a href="/en-US/docs/Web/CSS/@media/overflow-inline">overflow-inline</a></code>도 포함되어 있다. 그것들은 <code>overflow-x</code>와 <code>overflow-y</code>에 대응하지만, 매핑은 문서의 쓰기 모드 여하에 달려 있다.</p> + +<p>이들 속성은 현재 브라우저에 구현이 되어 있지 않으므로, 현 시점에는 물리적인 속성을 사용하고 쓰기 모드에 맞게 조정해야 한다.</p> + +<h2 id="오버플로_표시">오버플로 표시</h2> + +<p>수준 3 오버플로 규격에서 우리는 콘텐츠가 오버플로 상황에서 내용물이 보여지는 방식을 개선하도록 도움을 줄 수 있는 몇 가지 속성을 보유하고 있다.</p> + +<h3 id="인라인축_오버플로">인라인축 오버플로</h3> + +<p><code>text-overflow</code> 속성은 인라인 방향의 텍스트 오버플로을 처리한다. 이 속성에는 두 가지 값 중에서 택일한다. <code>clip</code>의 경우는 오버플로하면 내용물이 잘려나간다. 이것이 초기값이므로 기본 동작이다. 또한, <code>ellipsis</code>의 경우는 줄임표를 렌더링하는 것인데, 사용 중인 언어와 쓰기 모드에 따라서는 더 나은 문자로 대체될 수도 있다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}</p> + +<h3 id="블록축_오버플로">블록축 오버플로</h3> + +<p>이 글의 작성 시점에 명칭을 두고 아직 논의의 여지가 있지만, <code>block-overflow</code>란 속성도 있다. 이 제안으로 텍스트가 블록 크기를 오버플로할 때 줄임표를 추가할 수 있게 된다.</p> + +<p>이것은 예를 들어 문서 목록이 있고 제한된 양의 텍스트만 취하는 고정 높이 상자에 목록을 표시하는 경우에 유용하다. 상자나 제목을 클릭할 때 클릭할 내용이 더 많다는 것을 독자들이 인지하지 못할 수도 있다. 줄임표는 더 많은 내용이 있다는 사실을 분명하게 보여준다. 이 규격은 일련의 내용 또는 규칙적인 줄임표를 삽입할 수 있게 한다.</p> + +<h2 id="요약정리">요약정리</h2> + +<p>웹 상의 연속적인 미디어에 있는지 또는 인쇄 또는 EPUB와 같은 페이징 미디어 형식에 있는지 여부는 어떤 레이아웃 메서드를 처리할 때 어떻게 내용물이 오버플로하게 되는지 이해를 돕는데 유용하다. 일반 대열에서 오버플로이 어떻게 작동하는지 이해함으로써 격자나 가변상자 같은 레이아웃 방식에 포함된 오버플로 내용물의 파장을 더 쉽게 이해할 수 있어야 한다.</p> + +<div>{{QuickLinksWithSubpages("/ko/docs/Web/CSS/CSS_Flow_Layout/")}}</div> |