From ee778d6eea54935fd05022e0ba8c49456003381a Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:48:24 +0100 Subject: unslug ko: move --- .../index.html | 122 +++++++++++++++++++++ .../flow_layout_and_overflow/index.html | 73 ++++++++++++ .../flow_layout_and_writing_modes/index.html | 92 ++++++++++++++++ .../in_flow_and_out_of_flow/index.html | 72 ++++++++++++ .../index.html" | 72 ------------ .../index.html" | 122 --------------------- .../index.html" | 92 ---------------- .../index.html" | 73 ------------ 8 files changed, 359 insertions(+), 359 deletions(-) create mode 100644 files/ko/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html create mode 100644 files/ko/web/css/css_flow_layout/flow_layout_and_overflow/index.html create mode 100644 files/ko/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html create mode 100644 files/ko/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html delete mode 100644 "files/ko/web/css/css_flow_layout/\353\214\200\354\227\264\352\263\274_\355\203\210\353\214\200\354\227\264/index.html" delete mode 100644 "files/ko/web/css/css_flow_layout/\354\235\274\353\260\230_\355\235\220\353\246\204_\354\206\215_\353\270\224\353\241\235_\353\260\217_\354\235\270\353\235\274\354\235\270_\353\240\210\354\235\264\354\225\204\354\233\203/index.html" delete mode 100644 "files/ko/web/css/css_flow_layout/\355\235\220\353\246\204_\353\240\210\354\235\264\354\225\204\354\233\203\352\263\274_\354\223\260\352\270\260_\353\252\250\353\223\234/index.html" delete mode 100644 "files/ko/web/css/css_flow_layout/\355\235\220\353\246\204_\353\240\210\354\235\264\354\225\204\354\233\203\352\263\274_\354\230\244\353\262\204\355\224\214\353\241\234/index.html" (limited to 'files/ko/web/css/css_flow_layout') diff --git a/files/ko/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html b/files/ko/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html new file mode 100644 index 0000000000..cc7753cb70 --- /dev/null +++ b/files/ko/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/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 +--- +
{{CSSRef}}
+ +

이번 안내서에서는 블록 및 인라인 요소가 일반 대열의 일부일 때 어떻게 동작하는지에 대한 기본 사항을 살펴본다.

+ +

일반 대열은 씨에스에스 2.1규격에 정의되어 있으며, 이는 일반 대열에 소속된 상자가 서식 상황의 일부가 된다는 것을 설명한다. 그 상자는 블록 또는 인라인이 될 수 있지만 동시에 양수겸장이 될 수는 없다. 블록 수준 상자는 블록 서식 상황에 참여하는 것으로, 인라인 수준 상자는 인라인 서식 상황에 참여하는 것으로 기술한다.

+ +

블록 또는 인라인 서식 상황에 해당하는 요소의 동작은 이(CSS2.1) 규격에서 정의한다. 블록 형식 상황에 해당하는 요소의 경우 규격은 다음과 같다:

+ +
+

블록 서식 상황에서 상자는 컨테이너 블록의 맨 위에서 시작하여 수직으로 하나씩 배치된다. 두 형제(동급) 상자 사이 수직 간격은 '여백' 속성에 의해 결정된다. 블록 서식 상황에 속하는 인접하는 블록 수준 상자 사이 수직 여백은 축소된다.
+ 블록 서식 지정 상황에 속하는 각 상자의 왼쪽 바깥족 가장자리는 콘테이너 블록의 왼쪽 가장자리를 접한다. (오른쪽에서 왼쪽[아랍어] 방향 서식의 경우는 우측 가장자리를 접한다.)" - 9.4.1

+
+ +

인라인 서식 상황에 해당하는 요소의 경우:

+ +
+

인라인 서식 상황에서 상자는 콘테이너 블록의 상단에서 하나씩 차례로 수평으로 배치된다. 이 상자들 사이 수평 여백, 테두리 및 패딩은 준수된다. 상자는 다양한 방법으로 수직으로 정렬될 수 있다. 상자의 하단이나 상단에 맞춰 정렬되거나 텍스트의 기준선에 맞춰 정렬될 수 있다. 라인 형태를 띠는 여러 상자를 가두는 직사각형 영역을 라인 상자라고 한다. "- 9.4.2

+
+ +

씨에스에스 2.1 규격은 문서를 가로쓰기와 세로 쓰기 모드로 기술하고 있다. 예를 들어 블록 상자 사이의 수직 거리를 기술한다. 블록 및 인라인 요소의 동작 방식은 세로 쓰기 모드에서 동작할 때와 동일하다. 앞으로 게시될 대열 조판과 쓰기 모드에 관한 안내서에서 세로 쓰기 모드의 경우를 살펴볼 예정이다.

+ +

블록 서식 상황에 참여하는 요소

+ +

영어와 같은 가로쓰기 모드에서 블록 요소는 수직으로 다른 대상 요소 바로 밑에 배치된다.

+ +

+ +

세로 쓰기 모드에서는 수평으로 배치된다.

+ +

+ +

이 안내서에서 우리는 영어로 작업할 것이기 때문에 가로쓰기 모드를 다룬다. 그러나 기술된 내용 전체는 세로 쓰기 모드에서도 당연히 동일한 방식으로 작동한다.

+ +

씨에스에스 규격에 정의된 대로 2개의 블록 상자 사이 여백이 바로 상자 요소 사이를 구분해주는 것이다. 우리는 그점을 눈으로 확인하기 위해 2개의 단락으로 매우 간단한 하나의 조판에 테두리를 추가했다. 기본 브라우저의 스타일시트는 상하 요소에 여백을 더하는 방식으로 단락 사이 간격을 추가한다.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}

+ +

단락 요소의 여백을 0으로 설정하면, 테두리는 접촉한다.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}

+ +

기본 설정에 따라 블록 요소는 인라인 방향에 포함된 모든 빈공간을 차지하므로 당해 단락은 펼쳐지면서 콘테이너 블록 내부를 최대한 차지할 수 있게 된다. 블록 너비를 적시하게 되면 옆 공간에 나란히 배치될 공간이 있다손치더라도 다른 대상 요소 바로 밑에 배치된다. 각 블록은 콘테이너 블록의 시작 가장자리에 맞춰 시작되며, 그 위치에 맞춰 해당 쓰기 모드에 포함되는 문장이 시작된다.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}

+ +

여백 축소

+ +

씨에스에스 규격에 따라 블록 요소 사이의 여백이 축소된다. 즉, 하단 여백이 있는 요소 바로 뒤에 상단 여백을 가진 요소가 있으면 두 여백의 합이 전체 공간이 되는게 아니라 여백이 축소되는데, 본질적으로 두 여백 중 더 큰 것으로 갈음한다.

+ +

아래의 예에 포함된 단락들은 20px의 상부 여백과 40px의 하부 여백을 갖고 있다. 단락 사이 여백의 크기는 40px이다. 왜냐면 두번째 단락의 상대적으로 작은 상부 여백이 첫번째 단락의 상대적으로 큰 하부 여백에 맞춰 축소되었기 때문이다.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}

+ +

여백 축소에 관해선 여백 축소 정복 안내서에서 자세한 내용을 파악할 수 있다.

+ +
+

참고: 여백의 축소 여부가 불확실할 경우 브라우저 개발툴에 나오는 상자 모델 값을 확인하십시오. 이렇게 하면 현재 일어나고 일을 파악하는 데 도움이 될 수 있는 실제 여백 크기를 알 수 있습니다.

+ +

+
+ +

인라인 서식 상황에 참여하는 요소

+ +

인라인 요소는 특정 쓰기 모드에서 문장이 진행하는 방향으로 하나씩 차례대로 표시한다. 인라인 요소를 상자로 간주하지 않는 경향이 있지만 씨에스에스에 속하는 모든 요소처럼 그들도 상자로 간주된다. 이 인라인 상자들은 하나씩 차례대로 배열되어 있다. 컨테이너 블락에 상자 전체를 위한 충분한 공간이 없으면 새 줄로 넘어간다. 생성된 라인은 라인 상자라고 통용된다.

+ +

다음 예에서는 스트롱(strong) 요소를 내부에 포함하는 단락의 형태로 생성된 세개의 인라인 상자가 있다.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}

+ +

strong 요소 전후로 단어를 감싼 상자들은 무명 상자라고 하며 모든 것이 상자로 둘러쳐 있음을 담보하기 위해 상자가 도입된 것이되 직접 대상화할 수 없는 요소이다.

+ +

블록 방향의 라인 상자의 크기는(영어 단락 작업시 글 높이의 경우)는 내부에 있는 가장 큰 상자에 의해 정의된다. 다음 예에서 나는 스트롱 요소의 크기를 300%로 만들었고, 이제 그 콘텐츠가 해당 선상의 라인 상자 높이를 정의한다.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}

+ +

블락과 인라인 상자의 동작 방식에 대해 자세한 내용은 시각적 서식 모델 안내서를 찾아보십시요.

+ +

display속성 및 대열 조판

+ +

씨에스에스 2.1에 존재하는 규칙 외에도 새로운 수준의 씨에스에스는 블록 및 인라인 상자의 동작을 추가로 기술한다. display 속성은 상자와 상자 속 상자의 동작 방법을 정의한다. 씨에스에스 디스플레이 모델 수준 3 내용을 보면 디스플레이 속성이 상자의 동작과 생성된 상자에 변화를 주는 방법에 대해 더 자세히 알 수 있다.

+ +

요소의 디스플레이 유형은 외부 디스플레이 유형을 정의하며, 이 외부 디스플레이 유형은 상자가 동일 서식 상황에 속한 다른 요소와 어떻게 병행 표시되는지를 지정한다. 또한, (씨에스에스 디스플레이 모델 수준 3을 보면) 이 요소 내부에 속한 상자가 작동하는 방식을 지정하는 내부 디스플레이 유형도 정의한다. 이런 내용은 가변(flex) 조판를 고려할 때 명확하게 확인할 수 있다. 아래 예제에서 나에게 display: flex를 적용한 div 요소 하나가 있다. 가변 컨테이너는 블록 요소처럼 동작한다. 새 줄에 표시되고 인라인 진행 방향에서 차지할 수 있는 모든 공간을을 차지한다. 이것은 block의 외부 디스플레이 유형이다.

+ +

그러나 가변 항목("Flex Item" 문자열 2개)은 가변 서식 상황에 참여하고 있다. 왜냐면 부모(class container)가 display: flex가 지정된 요소이고, 따라서 (상속에 의해) 내부 디스플레이 유형이 가변이므로 직계 자식의 경우 가변 서식 상황이 수립된다.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}

+ +

따라서 씨에스에스에 포함된 모든 상자가 이런 식으로 작동한다고 간주할 수 있다. 상자 자체는 외부 디스플레이 유형도 갖고있기 때문에 다른 상자와 병행 동작하는 방법을 알고 있다. 그리고 상자는 내부 디스플레이 유형도 갖고있어 자식의 동작 방식도 변경한다. 이어 해당 자식은 외부 및 내부 디스플레이 유형도 갖게된다. 앞 예제에서 가변 항목("Flex Item" 문자열 2개)은 가변 수준 상자가 되며, 따라서 그것의 외부 디스플레이 유형은 그것들이 가변 서식 상황의 일부가 되는 방식에 의해 결정된다. 그들 항목은 대열 디스플레이 유형을 갖게 되는데, 그 의미는 자식이 일반 대열에 참여한다는 것을 의미한다. 당해 가변 항목 내부에 중첩된 항목('children' 'are in' 'normal flow')은 디스플레이 유형이 바뀌지 않는한 블록 및 인라인 요소로 배치된다.

+ +

외부 및 내부 디스플레이 유형이란 개념은 Flexbox(display: flex)와 Grid Layout(display: grid)과 같은 조판 메서드를 사용하는 컨테이너가 해당 메서드의 외부 디스플레이 유형이 block인 관계로 블록 및 인라인 조판에 계속해서 참여하고 있다는 것을 알려준다는 점에서 중요하다.

+ +

하나의 요소가 참여하는 대상의 서식 상황 변경

+ +

브라우저는 해당 요소의 통상적 타당성 여하에 따라 항목을 블록 또는 인라인 서식 맥락의 일부로 표시한다. 예들들면 단어를 강조를 강조하기 위해 스트롱 요소를 사용하며, 브라우저에 굵게 표시됩니다. 스트롱 요소가 블록 수준 요소로 표시되어 새 줄로 밀려나는 것은 일반적으로 타당하지 않다. 당신이 모든 스트롱 요소를 블록 요소로 표시하기를 원하면 당신은 strong 요소에 display: block를 설정함으로써 그렇게 할 수 있다. 즉, 항상 가장 의미론적으로 타당한 HTML 요소를 사용하여 콘텐츠를 표시한 다음 씨에스에스를 사용하여 표시되는 방식을 변경할 수 있다.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}

+ +

요약정리

+ +

이번 안내서에서 우리는 블록 요소나 인라인 요소일 경우처럼 일반 대열속에서 요소가 어떻게 표시되는지 살펴보았다. 이러한 요소에 정해진 기본 동작이 있는 관계로 씨에스에스 스타일 지정이 전혀 없는 에이치티엠엘 문서가 읽기 가능한 방식으로 표시된다. 일반 대열의 작동 방식을 이해하면 조판이 더 쉬워지는 데 그 이유는 요소가 표시되는 방식을 변경하는 출발점을 이해하는 것이기 때문이다.

+ +

참조 항목

+ + diff --git a/files/ko/web/css/css_flow_layout/flow_layout_and_overflow/index.html b/files/ko/web/css/css_flow_layout/flow_layout_and_overflow/index.html new file mode 100644 index 0000000000..697bdfacde --- /dev/null +++ b/files/ko/web/css/css_flow_layout/flow_layout_and_overflow/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 +--- +

컨테이너에 채울 수 없을 만큼 더 많은 내용물이 있을 때 오버플로 상황이 발생한다. CSS에서 크기 제한이 있는 요소를 다루려면 오버플로의 동작 방식을 이해하는 것이 중요하다. 이 안내서는 일반 플로우에 해당하는 작업 중에 오버플로이 작동하는 방식을 설명한다.

+ +

오버플로은 무엇인가?

+ +

어떤 요소에 고정 높이 및 너비를 부여한 다음, 상자에 상당한 내용물을 추가하면 기본적인 오버플로 사례가 만들어 진다.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}

+ +

내용물이 상자 안으로 들어간다. 상자가 채워지면, 눈에 보이게 오버플로이 계속되면서 상자 밖으로 내용물이 표시되고, 후속 내용물 아래에 표시될 가능성까지 있다. 오버플로 동작 방식을 통제하는 속성은 오버플로 속성으로 초기값은 visible로 되어 있다. 그런 까닭에 오버플로한 내용물를 볼 수 있다.

+ +

오버플로 통제

+ +

오버플로된 내용물이 동작하는 방식을 통제하는 그 밖의 값들이 있다. 오버플로된 내용물을 감추려면 hidden 값을 사용한다. 이 값은 내용물을 보이지 않게 만들 수도 있다.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}

+ +

scroll 값을 사용해서 상자의 내용물을 상자 안에 가둬두고 내용물을 볼 수 있게 스크롤 막대를 추가할 수 있다. 스크롤 막대는 내용물이 상자에 들어맞더라도 추가될 것이다.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}

+ +

auto 값을 사용하면 상자안에 내용물이 들어맞을 경우 스크롤 막대 없이 내용물을 표시하게 된다. 만일 내용물이 들어맞지 않는다면 스크롤 막대가 추가되게 된다. 다음 예를 overflow: scroll 경우의 예와 비교하면 수직 스크롤 막대가 필요할 경우에도 overflow scroll의 예는 수평 및 수직 스크롤 막대가 있음을 알수 있다. 아래 auto 예제에서는 우리가 스크롤이 필요한 방향으로만 스크롤 막대를 추가한다.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}

+ +

이미 배운 바와 같이 기본값인 visible 이외에 살펴본 값 중의 어떤 값을 사용하게 되면 새로운 블록 서식 상황을 생성하게 된다.

+ +

참고: 작업 초안 오버플로 수준 3을 보면 추가적인 속성 값으로 overflow: clip이 있다. 이것은 overflow: hidden와 같이 작용하지만, 프로그래밍 방식의 스크롤이 불용되어 스크롤 할 수 상자가 된다. 또한, 이것은 블록 서식 상황을 생성하지 못한다.

+ +

오버플로 속성은 실제로는 overflow-x와 overflow-y 속성의 약칭이다. 오버플로 값을 하나만 지정하면 이 값은 가로 세로 양 축에 모두 사용된다. 그러나 두 가지 값 모두를 지정할 수 있다. 첫번 째 경우에는 overflow-x를 수평 방향 값으로 두번째 경우에는 overflow-y를 수직 방향 값으로 사용하면 된다. 아래 예에서 나는 overflow-y: scroll만 지정함으로써 원치 않는 가로 스크롤 막대가 나타나지 않도록 했다.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}

+ +

상대적 플로우 속성

+ +

우리는 쓰기 모드와 플로우 레이아웃 안내서에서 block-size와 inline-size라는 새로운 속성를 살펴보았는데, 이 속성은 물리적인 화면 크기에 레이아웃을 구속하기보다는 다양한 쓰기 모드에서 작업할 경우에 적합하다. 수준 3 오버플로 모듈에는 플로우에 상대적인 오버플로 속성들overflow-block와 overflow-inline도 포함되어 있다. 그것들은 overflow-x와 overflow-y에 대응하지만, 매핑은 문서의 쓰기 모드 여하에 달려 있다.

+ +

이들 속성은 현재 브라우저에 구현이 되어 있지 않으므로, 현 시점에는 물리적인 속성을 사용하고 쓰기 모드에 맞게 조정해야 한다.

+ +

오버플로 표시

+ +

수준 3 오버플로 규격에서 우리는 콘텐츠가 오버플로 상황에서 내용물이 보여지는 방식을 개선하도록 도움을 줄 수 있는 몇 가지 속성을 보유하고 있다.

+ +

인라인축 오버플로

+ +

text-overflow 속성은 인라인 방향의 텍스트 오버플로을 처리한다. 이 속성에는 두 가지 값 중에서 택일한다. clip의 경우는 오버플로하면 내용물이 잘려나간다. 이것이 초기값이므로 기본 동작이다. 또한, ellipsis의 경우는 줄임표를 렌더링하는 것인데, 사용 중인 언어와 쓰기 모드에 따라서는 더 나은 문자로 대체될 수도 있다.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}

+ +

블록축 오버플로

+ +

이 글의 작성 시점에 명칭을 두고 아직 논의의 여지가 있지만, block-overflow란 속성도 있다. 이 제안으로 텍스트가 블록 크기를 오버플로할 때 줄임표를 추가할 수 있게 된다.

+ +

이것은 예를 들어 문서 목록이 있고 제한된 양의 텍스트만 취하는 고정 높이 상자에 목록을 표시하는 경우에 유용하다. 상자나 제목을 클릭할 때 클릭할 내용이 더 많다는 것을 독자들이 인지하지 못할 수도 있다. 줄임표는 더 많은 내용이 있다는 사실을 분명하게 보여준다. 이 규격은 일련의 내용 또는 규칙적인 줄임표를 삽입할 수 있게 한다.

+ +

요약정리

+ +

웹 상의 연속적인 미디어에 있는지 또는 인쇄 또는 EPUB와 같은 페이징 미디어 형식에 있는지 여부는 어떤 레이아웃 메서드를 처리할 때 어떻게 내용물이 오버플로하게 되는지 이해를 돕는데 유용하다. 일반 대열에서 오버플로이 어떻게 작동하는지 이해함으로써 격자나 가변상자 같은 레이아웃 방식에 포함된 오버플로 내용물의 파장을 더 쉽게 이해할 수 있어야 한다.

+ +
{{QuickLinksWithSubpages("/ko/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/ko/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html b/files/ko/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html new file mode 100644 index 0000000000..4d35855ee5 --- /dev/null +++ b/files/ko/web/css/css_flow_layout/flow_layout_and_writing_modes/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 +--- +

어떻게 일반 대열이 동작하는지 자세히 설명하는 씨에스에스 2.1 규격은 가로쓰기 모드라고 가정한다. 조판 속성은 세로 쓰기 모드에서 동일한 방식으로 작동해야 한다. 이 안내서는 서로 다른 문서 작성 모드에서 사용될 때 대열 조판이 어떻게 작동하는지 살펴 봅니다.

+ +

이것은 씨에스에스(CSS)에 포함된 쓰기 모드 사용에 대한 종합적인 안내서가 아니다. 이 글의 목적은 대열 조판이 쓰기 모드와 예상치 못한 방식으로 상호 작용하는 지점을 문서화하는 것이다. 이 문서의 참조 항목과 외부 리소스 섹션은 쓰기 모드 관련 더 많은 링크를 제공하고 있다.

+ +

쓰기 모드 규격

+ +

씨에스에스 쓰기 모드 수준 3 규격은 문서의 쓰기 모드가 대열 조판에 미치는 영향을 정의한다. 씨에스에스 쓰기 모드 소개란에서 전하는 규격은 다음과 같다.

+ +
+

씨에스에스에 포함되는 쓰기 모드는 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} 속성에 의해 결정된다. 쓰기 모드는 주로 인라인 기준 방향과 블록 대열 방향 여하에 따라 정의된다."

+
+ +

쓰기 모드 규격은 내용물이 라인에 정렬되는 방향에 따라 인라인 기준 방향을 정의한다. 기준 방향이 인라인 방향의 시작과 끝을 정의한다. 인라인 방향의 시작은 문장이 시작되는 곳이고, 인라인 방향의 끝은 새 줄로 넘어가기 전에 텍스트가 끝나는 곳이 끝나는 곳이다.

+ +

블록 대열 방향은 예로 단락의 경우처럼 블록 쓰기 모드에서 상자를 쌓는 방향이다. 씨에스에스 쓰기 모드 속성은 블록 대열 방향을 제어한다. 페이지 또는 페이지의 일부를 vertical-lr로 변경하고 싶다면, 대상 요소에 writing-mode: vertical-lr를 설정할 수 있고, 이로써 블록의 방향을 변경하는 것이고 아울러 인라인 방향도 변경된다.

+ +

특정 언어일 경우 특정 쓰기 모드나 텍스트 방향을 사용하겠지만, 제목을 세로로 돌리는 등 창의적인 효과를 위해 그러한 속성을 사용할 수도 있다.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}

+ +

writing-mode 속성 및 블록 대열

+ +

{{cssxref("writing-mode")}} 속성은 horizontal-tb과 vertical-rl, vertical-lr를 속성값으로 받는다. 이들 속성값은 페이지 상에 블록의 대열 방향을 제어한다. 초기 값은 horizontal-tb,로써 가로 인라인 방향이 포함된 상단에서 하단으로 가는 블록 대열 방향이다. 영어와 같이 왼쪽에서 오른쪽 방향 언어과 오른쪽에서 왼쪽 방향 언어인 아랍어의 경우든 모두가 horizontal-tb이다.

+ +

다음 예는 horizontal-tb를 사용하는 블록을 보여준다.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}

+ +

속성값 vertical-rl는 다음 예와 같이 세로 인라인 방향을 포함하는 오른쪽에서 왼쪽으로 가는 블록 대열 방향을 제공한다.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}

+ +

마지막 예는 vertical-lr로써 세번 째로 가능한 writing-mode 속성값을 시연하고 있다. 이렇게 하면 왼쪽에서 오른쪽 블록 대열 방향과 세로 인라인 방향을 얻을 수 있다.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}

+ +

부모와 다른 쓰기 모드를 가진 상자

+ +

중첩된 상자에 부모와 다른 쓰기 모드가 할당된 경우 인라인 수준 상자는 display: inline-block이 적용된 듯이 표시된다.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}

+ +

블록 수준 박스는 새로운 블록 서식 상황을 설정하게 되는데, 내부 디스플레이 유형이 flow일 경우 계산에 따른 디스플레이 유형인 flow-root를 얻게 된다는 뜻이다. 이것은 다음 예에서 보다시피 horizontal-tb 속성에 따라 표시되는 상자가 부동 요소를 포함하고 있는데, 그것이 포함된 까닭은 부모가 새로운 블록 대열 상황을 수립했기 때문이다.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}

+ +

대체 요소

+ +

이미지와 같은 대체 요소는 writing-mode에 주어진 속성에 근거하여 (가로 세로) 쓰기 방향를 바꾸지 않는다. 그러나 텍스트를 포함하는 양식 컨트롤과 같은 대체 요소는 사용중인 쓰기 모드와 일치해야 한다.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}

+ +

논리적 속성 및 속성값

+ +

당신이 horizontal-tb 이외의 쓰기 모드에서 작업하게 될 경우, 스크린의 물리적 크기에 매핑되는 많은 속성 및 속성값들이 이상하게 보일 것이다. 예를 들면 상자에 100px을 부여하면 쓰기 모드가 horizontal-tb일 경우에 인라인 방향의 크기(100px)를 통제하게 된다. 쓰기 모드가 vertical-lr일 상황에서 상자가 텍스트에 맞춰 회전하지 않기 때문에 블록 방향 크기를 상자가 제어한다.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}

+ +

따라서 우리에게 {{cssxref("블록 크기")}} 및 {{cssxref("인라인 크기")}}라는 새로운 속성이 주어진다. 당해 블록에 inline-size를 100px 부여할 경우 가로쓰기 또는 세로 쓰기 모드 여부는 상관없어지며, inline-size일 경우 항상 인라인 방향의 크기를 의미하게 된다.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}

+ +

씨에스에스 논리적 속성 규격은 여백, 패딩 및 테두리를 제어하는 속성의 논리적 버전뿐만 아니라 일반적으로 물리적 방향 지정을 위해 대상 요소에 전형적으로 사용되는 다른 매핑을 포함하고 있다.

+ +

요약정리

+ +

대부분의 경우, 문서의 쓰기 모드 또는 문서의 일부를 변경할 때 당신이 대상 요소에 기대하는 대로 대열 조판이 작동한다. 쓰기 모드는 세로 쓰기 언어를 올바르게 조판하거나 ​​독창적 표현을 이유로 사용할 수 있다. 씨에스에스는 세로 쓰기 모드에서 작업할 때 크기의 척도를 요소의 인라인과 블록 크기에 기초할 수 있도록 논리적 속성과 속성값을 도입하는 방식으로 간편한 설정을 가능케 해준다. 이런 내용은 다른 쓰기 모드에서 작동할 수 있는 구성 요소를 만들 경우에 유용할 것이다.

+ +

참조 항목

+ + + +

외부 리소스

+ + + +
{{QuickLinksWithSubpages("/ko/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/ko/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html b/files/ko/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html new file mode 100644 index 0000000000..2b05d99f39 --- /dev/null +++ b/files/ko/web/css/css_flow_layout/in_flow_and_out_of_flow/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 +--- +
{{CSSRef}}
+ +

이전 안내서에서 제가 일반 대열 속 블록 및 인라인 조판에 대해 설명하였습니다. 대열에 속한 모든 요소는 이 메서드를 사용하여 배치됩니다.

+ +

다음 예제에서는 머리글, 단락, 목록 및 strong 요소가 포함된 마지막 단락이 있습니다. 머리글과 단락은 블록 레벨이며, strong 요소는 인라인입니다. 목록은 가변상자를 사용하여 항목을 행 내부로 정렬하지만 블록 및 인라인 조판에도 참여하고 있습니다. 컨테이너는 외곽에 display 유형이 block 대열에 참여하고 있습니다.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}

+ +

요소 무리 전체는 대열에 속해 있다고 말할 수 있습니다. 에이치티엠엘 소스에 나타나는 순서대로 요소 무리들이 웹페이지에 등장합니다.

+ +

항목을 대열 밖으로 빼내기

+ +

대열에 속한 모든 요소는 다음과 구분된다:

+ + + +

대열에서 벗어난 항목은 새로운 블록 서식 상황(BFC)를 생성하므로, 그 안에 있는 모든 것은 페이지의 나머지 부분과는 구분되는 소형 조판으로 볼 수 있다. 따라서 뿌리 요소는 우리 문서의 모든 내용에 해당하는 컨테이너이기 때문에 대열을 벗어나 있으며 당 문서에 대한 블록 서식 상황을 수립합니다.

+ +

부동 항목

+ +

이 예제에서 나는 div를 가지고 있고, 그 다음 두 단락을 갖고 있다. 문단에 배경색을 추가한 다음 div 요소를 왼쪽으로 부동시켰다. 이제 div는 대열에서 벗어났다.

+ +

부동체는 우선 일반 대열에 속했던 애초의 위치를 기준으로 배치되었고, 그 뒤 대열에서 벗어나 최대한 왼쪽으로 이동합니다.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}

+ +

여러분은 부동체 밑에 펼쳐지고 있는 다음 단락의 배경색을 볼 수 있습니다. 동 단락의 라인 상자 무리만 부동체 주변 콘텐츠를 둘러싸는 효과를 위해 축소되었습니다. 우리 단락 형태의 상자는 여전히 일반 대열이라는 규칙에 따라 표시되고 있습니다. 바로 그런 까닭에 부동 항목 주위에 공간을 만들려면 동 항목에 여백을 추가해서 그 여백으로부터 라인 상자 무리를 밀려나도록 해야하는 겁니다. 대열에 속한 다음 순번 콘텐츠에는 그 어떤 것을 적용한다고 해도 그런 효과를 달성할 수 없습니다.

+ +

절대 위치잡기

+ +

어떤 항목에 position: absolute나 position: fixed를 부여하면 동 항목이 대열에서 제거되며, 그것이 점유하고 있던 모든 공간이 제거됩니다. 다음 예제에서 나는 세 개의 단락 요소를 가지고 있으며, 두 번째 요소는 position와 absolute임에 더해 간격띄우기 값이 top: 30px에 right: 30px 해당됩니다. 그 (두 번째) 요소는 문서 대열에서 제거되었습니다.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}

+ +

position: fixed를 사용해 대열에서 항목을 제거하지만, 간격띄우기는 컨테이너 블록이 아닌 브라우저 뷰포트가 기준입니다.

+ +

위치잡기를 통해 대열에서 항목을 빼내면 콘텐츠의 중복 가능성을 관리해야 합니다. 대열에서 벗어나면 페이지의 다른 요소는 더 이상 요소가 존재한다는 것을 알지 못하므로 이에 반응하지 않습니다.

+ +

상대 위치잡기와 대열

+ +

어떤 항목에 position: relative 위치잡기를 부여하면 그것은 대열에 잔류하지만, 당신은 간격띄우기 값을 사용하여 동 항목을 주변으로 밀어낼 수 있습니다. 그러나 아래 예제에서 볼 수 있듯이 그것이 일반 대열 위치에 그대로 남아 있게 됩니다.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}

+ +

일반 대열에 속해 있었던 어떤 항목을 제거하거나 이동할 때, 해당 항목 주변의 콘텐츠를 겹치지 않도록 관리해야 할 필요성이 있다는 것을 예상할 수밖에 없을 겁니다. 말하자면 부동체를 정리하거나 position: absolute가 적용된 요소가 여타 콘텐츠에 올라타지 않도록 담보해야 합니다. 이러한 이유로 요소 무리를 대열 속에서 제거하는 메서드는 그들 메서드가 가져올 영향을 파악한 상태에서 사용되어야 합니다.

+ +

요약정리

+ +

이번 안내서에서는 매우 구체적인 유형의 위치잡기를 달성하기 위해 요소를 일반 대열에서 빼내는 여러 방법을 다루었습니다. 다음 안내서에서는 서식 상황 해설 가운데에서 블록 서식 상황을 생성하는 등의 관련 이슈를 살펴볼 겁니다.

+ +

참조 항목

+ + diff --git "a/files/ko/web/css/css_flow_layout/\353\214\200\354\227\264\352\263\274_\355\203\210\353\214\200\354\227\264/index.html" "b/files/ko/web/css/css_flow_layout/\353\214\200\354\227\264\352\263\274_\355\203\210\353\214\200\354\227\264/index.html" deleted file mode 100644 index 2b05d99f39..0000000000 --- "a/files/ko/web/css/css_flow_layout/\353\214\200\354\227\264\352\263\274_\355\203\210\353\214\200\354\227\264/index.html" +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: 대열과 탈대열 -slug: Web/CSS/CSS_Flow_Layout/대열과_탈대열 -tags: - - 대열 - - 대열 조판 - - 씨에스에스 - - 씨에스에스 대열 조판 - - 안내서 - - 조판 - - 중급 -translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow ---- -
{{CSSRef}}
- -

이전 안내서에서 제가 일반 대열 속 블록 및 인라인 조판에 대해 설명하였습니다. 대열에 속한 모든 요소는 이 메서드를 사용하여 배치됩니다.

- -

다음 예제에서는 머리글, 단락, 목록 및 strong 요소가 포함된 마지막 단락이 있습니다. 머리글과 단락은 블록 레벨이며, strong 요소는 인라인입니다. 목록은 가변상자를 사용하여 항목을 행 내부로 정렬하지만 블록 및 인라인 조판에도 참여하고 있습니다. 컨테이너는 외곽에 display 유형이 block 대열에 참여하고 있습니다.

- -

{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}

- -

요소 무리 전체는 대열에 속해 있다고 말할 수 있습니다. 에이치티엠엘 소스에 나타나는 순서대로 요소 무리들이 웹페이지에 등장합니다.

- -

항목을 대열 밖으로 빼내기

- -

대열에 속한 모든 요소는 다음과 구분된다:

- - - -

대열에서 벗어난 항목은 새로운 블록 서식 상황(BFC)를 생성하므로, 그 안에 있는 모든 것은 페이지의 나머지 부분과는 구분되는 소형 조판으로 볼 수 있다. 따라서 뿌리 요소는 우리 문서의 모든 내용에 해당하는 컨테이너이기 때문에 대열을 벗어나 있으며 당 문서에 대한 블록 서식 상황을 수립합니다.

- -

부동 항목

- -

이 예제에서 나는 div를 가지고 있고, 그 다음 두 단락을 갖고 있다. 문단에 배경색을 추가한 다음 div 요소를 왼쪽으로 부동시켰다. 이제 div는 대열에서 벗어났다.

- -

부동체는 우선 일반 대열에 속했던 애초의 위치를 기준으로 배치되었고, 그 뒤 대열에서 벗어나 최대한 왼쪽으로 이동합니다.

- -

{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}

- -

여러분은 부동체 밑에 펼쳐지고 있는 다음 단락의 배경색을 볼 수 있습니다. 동 단락의 라인 상자 무리만 부동체 주변 콘텐츠를 둘러싸는 효과를 위해 축소되었습니다. 우리 단락 형태의 상자는 여전히 일반 대열이라는 규칙에 따라 표시되고 있습니다. 바로 그런 까닭에 부동 항목 주위에 공간을 만들려면 동 항목에 여백을 추가해서 그 여백으로부터 라인 상자 무리를 밀려나도록 해야하는 겁니다. 대열에 속한 다음 순번 콘텐츠에는 그 어떤 것을 적용한다고 해도 그런 효과를 달성할 수 없습니다.

- -

절대 위치잡기

- -

어떤 항목에 position: absolute나 position: fixed를 부여하면 동 항목이 대열에서 제거되며, 그것이 점유하고 있던 모든 공간이 제거됩니다. 다음 예제에서 나는 세 개의 단락 요소를 가지고 있으며, 두 번째 요소는 position와 absolute임에 더해 간격띄우기 값이 top: 30px에 right: 30px 해당됩니다. 그 (두 번째) 요소는 문서 대열에서 제거되었습니다.

- -

{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}

- -

position: fixed를 사용해 대열에서 항목을 제거하지만, 간격띄우기는 컨테이너 블록이 아닌 브라우저 뷰포트가 기준입니다.

- -

위치잡기를 통해 대열에서 항목을 빼내면 콘텐츠의 중복 가능성을 관리해야 합니다. 대열에서 벗어나면 페이지의 다른 요소는 더 이상 요소가 존재한다는 것을 알지 못하므로 이에 반응하지 않습니다.

- -

상대 위치잡기와 대열

- -

어떤 항목에 position: relative 위치잡기를 부여하면 그것은 대열에 잔류하지만, 당신은 간격띄우기 값을 사용하여 동 항목을 주변으로 밀어낼 수 있습니다. 그러나 아래 예제에서 볼 수 있듯이 그것이 일반 대열 위치에 그대로 남아 있게 됩니다.

- -

{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}

- -

일반 대열에 속해 있었던 어떤 항목을 제거하거나 이동할 때, 해당 항목 주변의 콘텐츠를 겹치지 않도록 관리해야 할 필요성이 있다는 것을 예상할 수밖에 없을 겁니다. 말하자면 부동체를 정리하거나 position: absolute가 적용된 요소가 여타 콘텐츠에 올라타지 않도록 담보해야 합니다. 이러한 이유로 요소 무리를 대열 속에서 제거하는 메서드는 그들 메서드가 가져올 영향을 파악한 상태에서 사용되어야 합니다.

- -

요약정리

- -

이번 안내서에서는 매우 구체적인 유형의 위치잡기를 달성하기 위해 요소를 일반 대열에서 빼내는 여러 방법을 다루었습니다. 다음 안내서에서는 서식 상황 해설 가운데에서 블록 서식 상황을 생성하는 등의 관련 이슈를 살펴볼 겁니다.

- -

참조 항목

- - diff --git "a/files/ko/web/css/css_flow_layout/\354\235\274\353\260\230_\355\235\220\353\246\204_\354\206\215_\353\270\224\353\241\235_\353\260\217_\354\235\270\353\235\274\354\235\270_\353\240\210\354\235\264\354\225\204\354\233\203/index.html" "b/files/ko/web/css/css_flow_layout/\354\235\274\353\260\230_\355\235\220\353\246\204_\354\206\215_\353\270\224\353\241\235_\353\260\217_\354\235\270\353\235\274\354\235\270_\353\240\210\354\235\264\354\225\204\354\233\203/index.html" deleted file mode 100644 index cc7753cb70..0000000000 --- "a/files/ko/web/css/css_flow_layout/\354\235\274\353\260\230_\355\235\220\353\246\204_\354\206\215_\353\270\224\353\241\235_\353\260\217_\354\235\270\353\235\274\354\235\270_\353\240\210\354\235\264\354\225\204\354\233\203/index.html" +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: 일반 대열 속 블록 및 인라인 조판 -slug: Web/CSS/CSS_Flow_Layout/일반_흐름_속_블록_및_인라인_레이아웃 -tags: - - 대열 - - 씨에스에스 - - 씨에스에스 대열 조판 - - 안내서 - - 여백 - - 조판 - - 중급 -translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow ---- -
{{CSSRef}}
- -

이번 안내서에서는 블록 및 인라인 요소가 일반 대열의 일부일 때 어떻게 동작하는지에 대한 기본 사항을 살펴본다.

- -

일반 대열은 씨에스에스 2.1규격에 정의되어 있으며, 이는 일반 대열에 소속된 상자가 서식 상황의 일부가 된다는 것을 설명한다. 그 상자는 블록 또는 인라인이 될 수 있지만 동시에 양수겸장이 될 수는 없다. 블록 수준 상자는 블록 서식 상황에 참여하는 것으로, 인라인 수준 상자는 인라인 서식 상황에 참여하는 것으로 기술한다.

- -

블록 또는 인라인 서식 상황에 해당하는 요소의 동작은 이(CSS2.1) 규격에서 정의한다. 블록 형식 상황에 해당하는 요소의 경우 규격은 다음과 같다:

- -
-

블록 서식 상황에서 상자는 컨테이너 블록의 맨 위에서 시작하여 수직으로 하나씩 배치된다. 두 형제(동급) 상자 사이 수직 간격은 '여백' 속성에 의해 결정된다. 블록 서식 상황에 속하는 인접하는 블록 수준 상자 사이 수직 여백은 축소된다.
- 블록 서식 지정 상황에 속하는 각 상자의 왼쪽 바깥족 가장자리는 콘테이너 블록의 왼쪽 가장자리를 접한다. (오른쪽에서 왼쪽[아랍어] 방향 서식의 경우는 우측 가장자리를 접한다.)" - 9.4.1

-
- -

인라인 서식 상황에 해당하는 요소의 경우:

- -
-

인라인 서식 상황에서 상자는 콘테이너 블록의 상단에서 하나씩 차례로 수평으로 배치된다. 이 상자들 사이 수평 여백, 테두리 및 패딩은 준수된다. 상자는 다양한 방법으로 수직으로 정렬될 수 있다. 상자의 하단이나 상단에 맞춰 정렬되거나 텍스트의 기준선에 맞춰 정렬될 수 있다. 라인 형태를 띠는 여러 상자를 가두는 직사각형 영역을 라인 상자라고 한다. "- 9.4.2

-
- -

씨에스에스 2.1 규격은 문서를 가로쓰기와 세로 쓰기 모드로 기술하고 있다. 예를 들어 블록 상자 사이의 수직 거리를 기술한다. 블록 및 인라인 요소의 동작 방식은 세로 쓰기 모드에서 동작할 때와 동일하다. 앞으로 게시될 대열 조판과 쓰기 모드에 관한 안내서에서 세로 쓰기 모드의 경우를 살펴볼 예정이다.

- -

블록 서식 상황에 참여하는 요소

- -

영어와 같은 가로쓰기 모드에서 블록 요소는 수직으로 다른 대상 요소 바로 밑에 배치된다.

- -

- -

세로 쓰기 모드에서는 수평으로 배치된다.

- -

- -

이 안내서에서 우리는 영어로 작업할 것이기 때문에 가로쓰기 모드를 다룬다. 그러나 기술된 내용 전체는 세로 쓰기 모드에서도 당연히 동일한 방식으로 작동한다.

- -

씨에스에스 규격에 정의된 대로 2개의 블록 상자 사이 여백이 바로 상자 요소 사이를 구분해주는 것이다. 우리는 그점을 눈으로 확인하기 위해 2개의 단락으로 매우 간단한 하나의 조판에 테두리를 추가했다. 기본 브라우저의 스타일시트는 상하 요소에 여백을 더하는 방식으로 단락 사이 간격을 추가한다.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}

- -

단락 요소의 여백을 0으로 설정하면, 테두리는 접촉한다.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}

- -

기본 설정에 따라 블록 요소는 인라인 방향에 포함된 모든 빈공간을 차지하므로 당해 단락은 펼쳐지면서 콘테이너 블록 내부를 최대한 차지할 수 있게 된다. 블록 너비를 적시하게 되면 옆 공간에 나란히 배치될 공간이 있다손치더라도 다른 대상 요소 바로 밑에 배치된다. 각 블록은 콘테이너 블록의 시작 가장자리에 맞춰 시작되며, 그 위치에 맞춰 해당 쓰기 모드에 포함되는 문장이 시작된다.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}

- -

여백 축소

- -

씨에스에스 규격에 따라 블록 요소 사이의 여백이 축소된다. 즉, 하단 여백이 있는 요소 바로 뒤에 상단 여백을 가진 요소가 있으면 두 여백의 합이 전체 공간이 되는게 아니라 여백이 축소되는데, 본질적으로 두 여백 중 더 큰 것으로 갈음한다.

- -

아래의 예에 포함된 단락들은 20px의 상부 여백과 40px의 하부 여백을 갖고 있다. 단락 사이 여백의 크기는 40px이다. 왜냐면 두번째 단락의 상대적으로 작은 상부 여백이 첫번째 단락의 상대적으로 큰 하부 여백에 맞춰 축소되었기 때문이다.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}

- -

여백 축소에 관해선 여백 축소 정복 안내서에서 자세한 내용을 파악할 수 있다.

- -
-

참고: 여백의 축소 여부가 불확실할 경우 브라우저 개발툴에 나오는 상자 모델 값을 확인하십시오. 이렇게 하면 현재 일어나고 일을 파악하는 데 도움이 될 수 있는 실제 여백 크기를 알 수 있습니다.

- -

-
- -

인라인 서식 상황에 참여하는 요소

- -

인라인 요소는 특정 쓰기 모드에서 문장이 진행하는 방향으로 하나씩 차례대로 표시한다. 인라인 요소를 상자로 간주하지 않는 경향이 있지만 씨에스에스에 속하는 모든 요소처럼 그들도 상자로 간주된다. 이 인라인 상자들은 하나씩 차례대로 배열되어 있다. 컨테이너 블락에 상자 전체를 위한 충분한 공간이 없으면 새 줄로 넘어간다. 생성된 라인은 라인 상자라고 통용된다.

- -

다음 예에서는 스트롱(strong) 요소를 내부에 포함하는 단락의 형태로 생성된 세개의 인라인 상자가 있다.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}

- -

strong 요소 전후로 단어를 감싼 상자들은 무명 상자라고 하며 모든 것이 상자로 둘러쳐 있음을 담보하기 위해 상자가 도입된 것이되 직접 대상화할 수 없는 요소이다.

- -

블록 방향의 라인 상자의 크기는(영어 단락 작업시 글 높이의 경우)는 내부에 있는 가장 큰 상자에 의해 정의된다. 다음 예에서 나는 스트롱 요소의 크기를 300%로 만들었고, 이제 그 콘텐츠가 해당 선상의 라인 상자 높이를 정의한다.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}

- -

블락과 인라인 상자의 동작 방식에 대해 자세한 내용은 시각적 서식 모델 안내서를 찾아보십시요.

- -

display속성 및 대열 조판

- -

씨에스에스 2.1에 존재하는 규칙 외에도 새로운 수준의 씨에스에스는 블록 및 인라인 상자의 동작을 추가로 기술한다. display 속성은 상자와 상자 속 상자의 동작 방법을 정의한다. 씨에스에스 디스플레이 모델 수준 3 내용을 보면 디스플레이 속성이 상자의 동작과 생성된 상자에 변화를 주는 방법에 대해 더 자세히 알 수 있다.

- -

요소의 디스플레이 유형은 외부 디스플레이 유형을 정의하며, 이 외부 디스플레이 유형은 상자가 동일 서식 상황에 속한 다른 요소와 어떻게 병행 표시되는지를 지정한다. 또한, (씨에스에스 디스플레이 모델 수준 3을 보면) 이 요소 내부에 속한 상자가 작동하는 방식을 지정하는 내부 디스플레이 유형도 정의한다. 이런 내용은 가변(flex) 조판를 고려할 때 명확하게 확인할 수 있다. 아래 예제에서 나에게 display: flex를 적용한 div 요소 하나가 있다. 가변 컨테이너는 블록 요소처럼 동작한다. 새 줄에 표시되고 인라인 진행 방향에서 차지할 수 있는 모든 공간을을 차지한다. 이것은 block의 외부 디스플레이 유형이다.

- -

그러나 가변 항목("Flex Item" 문자열 2개)은 가변 서식 상황에 참여하고 있다. 왜냐면 부모(class container)가 display: flex가 지정된 요소이고, 따라서 (상속에 의해) 내부 디스플레이 유형이 가변이므로 직계 자식의 경우 가변 서식 상황이 수립된다.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}

- -

따라서 씨에스에스에 포함된 모든 상자가 이런 식으로 작동한다고 간주할 수 있다. 상자 자체는 외부 디스플레이 유형도 갖고있기 때문에 다른 상자와 병행 동작하는 방법을 알고 있다. 그리고 상자는 내부 디스플레이 유형도 갖고있어 자식의 동작 방식도 변경한다. 이어 해당 자식은 외부 및 내부 디스플레이 유형도 갖게된다. 앞 예제에서 가변 항목("Flex Item" 문자열 2개)은 가변 수준 상자가 되며, 따라서 그것의 외부 디스플레이 유형은 그것들이 가변 서식 상황의 일부가 되는 방식에 의해 결정된다. 그들 항목은 대열 디스플레이 유형을 갖게 되는데, 그 의미는 자식이 일반 대열에 참여한다는 것을 의미한다. 당해 가변 항목 내부에 중첩된 항목('children' 'are in' 'normal flow')은 디스플레이 유형이 바뀌지 않는한 블록 및 인라인 요소로 배치된다.

- -

외부 및 내부 디스플레이 유형이란 개념은 Flexbox(display: flex)와 Grid Layout(display: grid)과 같은 조판 메서드를 사용하는 컨테이너가 해당 메서드의 외부 디스플레이 유형이 block인 관계로 블록 및 인라인 조판에 계속해서 참여하고 있다는 것을 알려준다는 점에서 중요하다.

- -

하나의 요소가 참여하는 대상의 서식 상황 변경

- -

브라우저는 해당 요소의 통상적 타당성 여하에 따라 항목을 블록 또는 인라인 서식 맥락의 일부로 표시한다. 예들들면 단어를 강조를 강조하기 위해 스트롱 요소를 사용하며, 브라우저에 굵게 표시됩니다. 스트롱 요소가 블록 수준 요소로 표시되어 새 줄로 밀려나는 것은 일반적으로 타당하지 않다. 당신이 모든 스트롱 요소를 블록 요소로 표시하기를 원하면 당신은 strong 요소에 display: block를 설정함으로써 그렇게 할 수 있다. 즉, 항상 가장 의미론적으로 타당한 HTML 요소를 사용하여 콘텐츠를 표시한 다음 씨에스에스를 사용하여 표시되는 방식을 변경할 수 있다.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}

- -

요약정리

- -

이번 안내서에서 우리는 블록 요소나 인라인 요소일 경우처럼 일반 대열속에서 요소가 어떻게 표시되는지 살펴보았다. 이러한 요소에 정해진 기본 동작이 있는 관계로 씨에스에스 스타일 지정이 전혀 없는 에이치티엠엘 문서가 읽기 가능한 방식으로 표시된다. 일반 대열의 작동 방식을 이해하면 조판이 더 쉬워지는 데 그 이유는 요소가 표시되는 방식을 변경하는 출발점을 이해하는 것이기 때문이다.

- -

참조 항목

- - diff --git "a/files/ko/web/css/css_flow_layout/\355\235\220\353\246\204_\353\240\210\354\235\264\354\225\204\354\233\203\352\263\274_\354\223\260\352\270\260_\353\252\250\353\223\234/index.html" "b/files/ko/web/css/css_flow_layout/\355\235\220\353\246\204_\353\240\210\354\235\264\354\225\204\354\233\203\352\263\274_\354\223\260\352\270\260_\353\252\250\353\223\234/index.html" deleted file mode 100644 index 4d35855ee5..0000000000 --- "a/files/ko/web/css/css_flow_layout/\355\235\220\353\246\204_\353\240\210\354\235\264\354\225\204\354\233\203\352\263\274_\354\223\260\352\270\260_\353\252\250\353\223\234/index.html" +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: 대열 조판과 쓰기 모드 -slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_쓰기_모드 -tags: - - 대열 조판 - - 쓰기모드 - - 씨에스에스 - - 안내서 - - 지향 -translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes ---- -

어떻게 일반 대열이 동작하는지 자세히 설명하는 씨에스에스 2.1 규격은 가로쓰기 모드라고 가정한다. 조판 속성은 세로 쓰기 모드에서 동일한 방식으로 작동해야 한다. 이 안내서는 서로 다른 문서 작성 모드에서 사용될 때 대열 조판이 어떻게 작동하는지 살펴 봅니다.

- -

이것은 씨에스에스(CSS)에 포함된 쓰기 모드 사용에 대한 종합적인 안내서가 아니다. 이 글의 목적은 대열 조판이 쓰기 모드와 예상치 못한 방식으로 상호 작용하는 지점을 문서화하는 것이다. 이 문서의 참조 항목과 외부 리소스 섹션은 쓰기 모드 관련 더 많은 링크를 제공하고 있다.

- -

쓰기 모드 규격

- -

씨에스에스 쓰기 모드 수준 3 규격은 문서의 쓰기 모드가 대열 조판에 미치는 영향을 정의한다. 씨에스에스 쓰기 모드 소개란에서 전하는 규격은 다음과 같다.

- -
-

씨에스에스에 포함되는 쓰기 모드는 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} 속성에 의해 결정된다. 쓰기 모드는 주로 인라인 기준 방향과 블록 대열 방향 여하에 따라 정의된다."

-
- -

쓰기 모드 규격은 내용물이 라인에 정렬되는 방향에 따라 인라인 기준 방향을 정의한다. 기준 방향이 인라인 방향의 시작과 끝을 정의한다. 인라인 방향의 시작은 문장이 시작되는 곳이고, 인라인 방향의 끝은 새 줄로 넘어가기 전에 텍스트가 끝나는 곳이 끝나는 곳이다.

- -

블록 대열 방향은 예로 단락의 경우처럼 블록 쓰기 모드에서 상자를 쌓는 방향이다. 씨에스에스 쓰기 모드 속성은 블록 대열 방향을 제어한다. 페이지 또는 페이지의 일부를 vertical-lr로 변경하고 싶다면, 대상 요소에 writing-mode: vertical-lr를 설정할 수 있고, 이로써 블록의 방향을 변경하는 것이고 아울러 인라인 방향도 변경된다.

- -

특정 언어일 경우 특정 쓰기 모드나 텍스트 방향을 사용하겠지만, 제목을 세로로 돌리는 등 창의적인 효과를 위해 그러한 속성을 사용할 수도 있다.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}

- -

writing-mode 속성 및 블록 대열

- -

{{cssxref("writing-mode")}} 속성은 horizontal-tb과 vertical-rl, vertical-lr를 속성값으로 받는다. 이들 속성값은 페이지 상에 블록의 대열 방향을 제어한다. 초기 값은 horizontal-tb,로써 가로 인라인 방향이 포함된 상단에서 하단으로 가는 블록 대열 방향이다. 영어와 같이 왼쪽에서 오른쪽 방향 언어과 오른쪽에서 왼쪽 방향 언어인 아랍어의 경우든 모두가 horizontal-tb이다.

- -

다음 예는 horizontal-tb를 사용하는 블록을 보여준다.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}

- -

속성값 vertical-rl는 다음 예와 같이 세로 인라인 방향을 포함하는 오른쪽에서 왼쪽으로 가는 블록 대열 방향을 제공한다.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}

- -

마지막 예는 vertical-lr로써 세번 째로 가능한 writing-mode 속성값을 시연하고 있다. 이렇게 하면 왼쪽에서 오른쪽 블록 대열 방향과 세로 인라인 방향을 얻을 수 있다.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}

- -

부모와 다른 쓰기 모드를 가진 상자

- -

중첩된 상자에 부모와 다른 쓰기 모드가 할당된 경우 인라인 수준 상자는 display: inline-block이 적용된 듯이 표시된다.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}

- -

블록 수준 박스는 새로운 블록 서식 상황을 설정하게 되는데, 내부 디스플레이 유형이 flow일 경우 계산에 따른 디스플레이 유형인 flow-root를 얻게 된다는 뜻이다. 이것은 다음 예에서 보다시피 horizontal-tb 속성에 따라 표시되는 상자가 부동 요소를 포함하고 있는데, 그것이 포함된 까닭은 부모가 새로운 블록 대열 상황을 수립했기 때문이다.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}

- -

대체 요소

- -

이미지와 같은 대체 요소는 writing-mode에 주어진 속성에 근거하여 (가로 세로) 쓰기 방향를 바꾸지 않는다. 그러나 텍스트를 포함하는 양식 컨트롤과 같은 대체 요소는 사용중인 쓰기 모드와 일치해야 한다.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}

- -

논리적 속성 및 속성값

- -

당신이 horizontal-tb 이외의 쓰기 모드에서 작업하게 될 경우, 스크린의 물리적 크기에 매핑되는 많은 속성 및 속성값들이 이상하게 보일 것이다. 예를 들면 상자에 100px을 부여하면 쓰기 모드가 horizontal-tb일 경우에 인라인 방향의 크기(100px)를 통제하게 된다. 쓰기 모드가 vertical-lr일 상황에서 상자가 텍스트에 맞춰 회전하지 않기 때문에 블록 방향 크기를 상자가 제어한다.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}

- -

따라서 우리에게 {{cssxref("블록 크기")}} 및 {{cssxref("인라인 크기")}}라는 새로운 속성이 주어진다. 당해 블록에 inline-size를 100px 부여할 경우 가로쓰기 또는 세로 쓰기 모드 여부는 상관없어지며, inline-size일 경우 항상 인라인 방향의 크기를 의미하게 된다.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}

- -

씨에스에스 논리적 속성 규격은 여백, 패딩 및 테두리를 제어하는 속성의 논리적 버전뿐만 아니라 일반적으로 물리적 방향 지정을 위해 대상 요소에 전형적으로 사용되는 다른 매핑을 포함하고 있다.

- -

요약정리

- -

대부분의 경우, 문서의 쓰기 모드 또는 문서의 일부를 변경할 때 당신이 대상 요소에 기대하는 대로 대열 조판이 작동한다. 쓰기 모드는 세로 쓰기 언어를 올바르게 조판하거나 ​​독창적 표현을 이유로 사용할 수 있다. 씨에스에스는 세로 쓰기 모드에서 작업할 때 크기의 척도를 요소의 인라인과 블록 크기에 기초할 수 있도록 논리적 속성과 속성값을 도입하는 방식으로 간편한 설정을 가능케 해준다. 이런 내용은 다른 쓰기 모드에서 작동할 수 있는 구성 요소를 만들 경우에 유용할 것이다.

- -

참조 항목

- - - -

외부 리소스

- - - -
{{QuickLinksWithSubpages("/ko/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git "a/files/ko/web/css/css_flow_layout/\355\235\220\353\246\204_\353\240\210\354\235\264\354\225\204\354\233\203\352\263\274_\354\230\244\353\262\204\355\224\214\353\241\234/index.html" "b/files/ko/web/css/css_flow_layout/\355\235\220\353\246\204_\353\240\210\354\235\264\354\225\204\354\233\203\352\263\274_\354\230\244\353\262\204\355\224\214\353\241\234/index.html" deleted file mode 100644 index 697bdfacde..0000000000 --- "a/files/ko/web/css/css_flow_layout/\355\235\220\353\246\204_\353\240\210\354\235\264\354\225\204\354\233\203\352\263\274_\354\230\244\353\262\204\355\224\214\353\241\234/index.html" +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: 대열 조판과 대열이탈 -slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_오버플로 -tags: - - 가시성 - - 대열 조판 - - 대열이탈 - - 씨에스에스 - - 안내서 - - 조판 - - 중급 - - 텍스트 대열이탈 -translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow ---- -

컨테이너에 채울 수 없을 만큼 더 많은 내용물이 있을 때 오버플로 상황이 발생한다. CSS에서 크기 제한이 있는 요소를 다루려면 오버플로의 동작 방식을 이해하는 것이 중요하다. 이 안내서는 일반 플로우에 해당하는 작업 중에 오버플로이 작동하는 방식을 설명한다.

- -

오버플로은 무엇인가?

- -

어떤 요소에 고정 높이 및 너비를 부여한 다음, 상자에 상당한 내용물을 추가하면 기본적인 오버플로 사례가 만들어 진다.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}

- -

내용물이 상자 안으로 들어간다. 상자가 채워지면, 눈에 보이게 오버플로이 계속되면서 상자 밖으로 내용물이 표시되고, 후속 내용물 아래에 표시될 가능성까지 있다. 오버플로 동작 방식을 통제하는 속성은 오버플로 속성으로 초기값은 visible로 되어 있다. 그런 까닭에 오버플로한 내용물를 볼 수 있다.

- -

오버플로 통제

- -

오버플로된 내용물이 동작하는 방식을 통제하는 그 밖의 값들이 있다. 오버플로된 내용물을 감추려면 hidden 값을 사용한다. 이 값은 내용물을 보이지 않게 만들 수도 있다.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}

- -

scroll 값을 사용해서 상자의 내용물을 상자 안에 가둬두고 내용물을 볼 수 있게 스크롤 막대를 추가할 수 있다. 스크롤 막대는 내용물이 상자에 들어맞더라도 추가될 것이다.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}

- -

auto 값을 사용하면 상자안에 내용물이 들어맞을 경우 스크롤 막대 없이 내용물을 표시하게 된다. 만일 내용물이 들어맞지 않는다면 스크롤 막대가 추가되게 된다. 다음 예를 overflow: scroll 경우의 예와 비교하면 수직 스크롤 막대가 필요할 경우에도 overflow scroll의 예는 수평 및 수직 스크롤 막대가 있음을 알수 있다. 아래 auto 예제에서는 우리가 스크롤이 필요한 방향으로만 스크롤 막대를 추가한다.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}

- -

이미 배운 바와 같이 기본값인 visible 이외에 살펴본 값 중의 어떤 값을 사용하게 되면 새로운 블록 서식 상황을 생성하게 된다.

- -

참고: 작업 초안 오버플로 수준 3을 보면 추가적인 속성 값으로 overflow: clip이 있다. 이것은 overflow: hidden와 같이 작용하지만, 프로그래밍 방식의 스크롤이 불용되어 스크롤 할 수 상자가 된다. 또한, 이것은 블록 서식 상황을 생성하지 못한다.

- -

오버플로 속성은 실제로는 overflow-x와 overflow-y 속성의 약칭이다. 오버플로 값을 하나만 지정하면 이 값은 가로 세로 양 축에 모두 사용된다. 그러나 두 가지 값 모두를 지정할 수 있다. 첫번 째 경우에는 overflow-x를 수평 방향 값으로 두번째 경우에는 overflow-y를 수직 방향 값으로 사용하면 된다. 아래 예에서 나는 overflow-y: scroll만 지정함으로써 원치 않는 가로 스크롤 막대가 나타나지 않도록 했다.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}

- -

상대적 플로우 속성

- -

우리는 쓰기 모드와 플로우 레이아웃 안내서에서 block-size와 inline-size라는 새로운 속성를 살펴보았는데, 이 속성은 물리적인 화면 크기에 레이아웃을 구속하기보다는 다양한 쓰기 모드에서 작업할 경우에 적합하다. 수준 3 오버플로 모듈에는 플로우에 상대적인 오버플로 속성들overflow-block와 overflow-inline도 포함되어 있다. 그것들은 overflow-x와 overflow-y에 대응하지만, 매핑은 문서의 쓰기 모드 여하에 달려 있다.

- -

이들 속성은 현재 브라우저에 구현이 되어 있지 않으므로, 현 시점에는 물리적인 속성을 사용하고 쓰기 모드에 맞게 조정해야 한다.

- -

오버플로 표시

- -

수준 3 오버플로 규격에서 우리는 콘텐츠가 오버플로 상황에서 내용물이 보여지는 방식을 개선하도록 도움을 줄 수 있는 몇 가지 속성을 보유하고 있다.

- -

인라인축 오버플로

- -

text-overflow 속성은 인라인 방향의 텍스트 오버플로을 처리한다. 이 속성에는 두 가지 값 중에서 택일한다. clip의 경우는 오버플로하면 내용물이 잘려나간다. 이것이 초기값이므로 기본 동작이다. 또한, ellipsis의 경우는 줄임표를 렌더링하는 것인데, 사용 중인 언어와 쓰기 모드에 따라서는 더 나은 문자로 대체될 수도 있다.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}

- -

블록축 오버플로

- -

이 글의 작성 시점에 명칭을 두고 아직 논의의 여지가 있지만, block-overflow란 속성도 있다. 이 제안으로 텍스트가 블록 크기를 오버플로할 때 줄임표를 추가할 수 있게 된다.

- -

이것은 예를 들어 문서 목록이 있고 제한된 양의 텍스트만 취하는 고정 높이 상자에 목록을 표시하는 경우에 유용하다. 상자나 제목을 클릭할 때 클릭할 내용이 더 많다는 것을 독자들이 인지하지 못할 수도 있다. 줄임표는 더 많은 내용이 있다는 사실을 분명하게 보여준다. 이 규격은 일련의 내용 또는 규칙적인 줄임표를 삽입할 수 있게 한다.

- -

요약정리

- -

웹 상의 연속적인 미디어에 있는지 또는 인쇄 또는 EPUB와 같은 페이징 미디어 형식에 있는지 여부는 어떤 레이아웃 메서드를 처리할 때 어떻게 내용물이 오버플로하게 되는지 이해를 돕는데 유용하다. 일반 대열에서 오버플로이 어떻게 작동하는지 이해함으로써 격자나 가변상자 같은 레이아웃 방식에 포함된 오버플로 내용물의 파장을 더 쉽게 이해할 수 있어야 한다.

- -
{{QuickLinksWithSubpages("/ko/docs/Web/CSS/CSS_Flow_Layout/")}}
-- cgit v1.2.3-54-g00ecf