쓰기 모드 및 CSS 레이아웃

이것은 이 속성의 실용적이거나 창의적인 적용에 관한 기사가 아닙니다. 대신 페이지나 구성 요소의 쓰기 모드를 변경할 필요가 거의 없는 우리에게도 쓰기 모드를 이해하는 것이 왜 그렇게 중요한지 보여주고 싶습니다. 다중 쓰기 모드 지원은 Flexbox 및 Grid Layout의 새로운 레이아웃 방법이 설계된 방식의 핵심입니다. 이것을 이해하면 이러한 레이아웃 방법이 어떻게 작동하는지 더 잘 이해할 수 있습니다.

쓰기 모드란 무엇입니까?

문서나 컴포넌트의 쓰기 모드는 텍스트가 흐르는 방향을 나타냅니다. CSS에서 쓰기 모드를 사용하려면 writing-mode 속성을 사용합니다. 이 속성은 다음 값을 사용할 수 있습니다.

• horizontal-tb
• vertical-rl
• vertical-lr
• sideways-rl
• sideways-lr

Smashing Magazine에서 영어로 이 기사를 읽고 있다면 이 문서의 쓰기 모드는 horizontal-tb 또는 Horizontal Top To Bottom 입니다. 영어에서 문장은 가로로 작성됩니다. 각 줄의 첫 글자는 왼쪽에서 시작됩니다.

아랍어와 같은 언어에는 horizontal-tb 쓰기 모드도 있습니다. 위에서 아래로 가로로 쓰지만 아랍어 스크립트는 오른쪽에서 왼쪽으로 쓰기 때문에 아랍어 문장은 오른쪽에서 시작합니다.

중국어, 일본어, 한국어는 세로로 쓰며 첫 번째 문장의 첫 글자가 오른쪽 상단에 옵니다. 다음 문장이 왼쪽에 추가됩니다. 따라서 사용된 쓰기 모드는 vertical-rl 입니다. 오른쪽에서 왼쪽으로 세로 쓰기 모드입니다.

몽골어도 세로로 쓰지만 왼쪽에서 오른쪽으로 쓴다. 따라서 몽골어 스크립트를 조판하려면 vertical-lr 쓰기 모드를 사용하십시오.

writing-mode 의 다른 두 값은 세로 스크립트 조판보다 창의적인 목적으로 더 많이 설계되었습니다. sideways-lr 및 sideways-rl 을 사용하면 일반적으로 세로로 수직으로 쓰여지는 문자도 텍스트를 옆으로 바꿉니다. 불행히도 값은 현재 Firefox에서만 지원됩니다. 다음 CodePen은 writing-mode 의 다른 모든 값을 보여줍니다. 작동 중인 sideways-* 값을 보려면 Firefox를 사용해야 합니다.

쓰기 모드는 해당 쓰기 모드를 사용하여 작성된 언어를 사용하는 문서를 작성할 때 사용할 수 있습니다. 예를 들어 일부 콘텐츠의 측면 아래로 제목을 세로로 설정하는 데 창의적으로 사용할 수도 있습니다. 그러나 이 기사에서는 수직 언어 지원과 수직 텍스트의 가능성이 CSS 레이아웃과 CSS 전반에 미치는 영향을 살펴보고 싶습니다.

그렇게 하기 전에 세로 텍스트에 쓰기 모드를 사용하는 데 관심이 있는 경우 다음과 같은 몇 가지 유용한 리소스가 있습니다.

• W3C Internationalization 사이트에는 유용한 정보가 풍부합니다. RTL 스크립트 및 수직 텍스트에 대해 읽어보십시오.
• Jen Simmons는 CSS 쓰기 모드에 대한 훌륭한 기사를 작성했으며 여기에는 사용 중인 이러한 모드의 인쇄 예제도 포함되어 있습니다.
• 세계와 우리의 문자 체계에 대한 생각 - Chen Hui Jing
• 쓰기 모드를 사용한 세로 조판 재검토 - Chen Hui Jing
• MDN의 쓰기 모드 속성

블록 및 인라인 치수

문서의 쓰기 모드를 변경할 때 우리가 하는 것은 블록 흐름 의 방향을 전환하는 것입니다. 따라서 블록과 인라인이 의미하는 바를 이해하는 것이 매우 유용합니다.

CSS에 대해 가장 먼저 배우는 것 중 하나는 단락과 같은 일부 요소가 블록 요소라는 것입니다. 이러한 요소는 블록 방향으로 차례로 표시됩니다. 문장의 단어와 같은 인라인 요소는 인라인 방향으로 차례로 표시됩니다. 수평 쓰기 모드에서 작업하면서 블록 차원은 수직으로 위에서 아래로, 인라인 차원은 수평으로 왼쪽에서 오른쪽으로 이어진다는 사실에 익숙해집니다.

그러나 블록 및 인라인 요소는 문서의 쓰기 모드와 관련이 있으므로 인라인 치수는 수평 쓰기 모드에 있는 경우에만 수평입니다. 너비와 관련이 없지만 대신 인라인 크기와 관련이 있습니다. 블록 치수는 가로 쓰기 모드일 때만 세로입니다. 따라서 높이가 아니라 블록 크기와 관련이 있습니다.

논리적, 흐름 관련 속성

인라인 크기 및 블록 크기라는 용어는 새로운 쓰기 모드 인식 세계를 반영하도록 설계된 새로운 CSS 속성의 이름으로도 사용됩니다. 가로 쓰기 모드에서 width 대신 inline-size 속성을 사용하면 구성 요소의 쓰기 모드를 전환할 때까지 너비와 정확히 같은 방식으로 작동합니다. 항상 물리적 치수가 될 width 를 사용하면 항상 구성요소의 가로 크기가 됩니다. inline-size 를 사용하는 경우 아래 예제와 같이 인라인 차원의 크기가 됩니다.

height 도 마찬가지입니다. height 속성은 항상 세로로 크기가 됩니다. 아이템의 높이와 관련이 있습니다. 그러나 block-size 속성은 가로 쓰기 모드에 있는 경우 세로 로 블록 차원의 크기를 제공하고 세로 모드에 있으면 가로를 제공합니다.

내 기사 "논리적 속성 및 값 이해하기"에서 설명한 것처럼 모든 물리적 속성에 대한 매핑이 있으며, 이는 화면의 차원에 연결됩니다. 일단 그것에 대해 생각하기 시작하면 많은 CSS가 화면의 물리적 레이아웃과 관련하여 지정됩니다. 위쪽, 오른쪽, 아래쪽 및 왼쪽을 사용하여 위치 지정, 여백, 패딩 및 테두리를 설정합니다. 우리는 물건을 좌우로 띄웁니다. 때로는 사물을 물리적 차원에 묶는 것이 우리가 원하는 것이지만 점점 더 물리적 위치에 대한 참조 없이 레이아웃에 대해 생각하게 됩니다. 논리적 속성 및 값 사양은 CSS 전반에 걸쳐 바로 작업하는 이 쓰기 모드 불가지론적 방식을 구현합니다.

쓰기 모드, 그리드 및 Flexbox

우리의 새로운 레이아웃 방법이 장면에 상륙했을 때 플렉스 또는 그리드 레이아웃으로 레이아웃되는 구성 요소의 쓰기 모드를 보는 불가지론적 방법을 가져왔습니다. 처음으로 사람들은 왼쪽과 오른쪽, 위쪽과 아래쪽이 아니라 시작과 끝을 생각하라는 요청을 받았습니다.

내가 처음 CSS Grid 주제에 대해 발표하기 시작했을 때, 나의 초기 발표는 사양의 모든 속성에 대한 요약이었습니다. 나는 grid-area 속성을 사용하여 4개의 라인 모두를 설정하여 그리드 항목을 배치할 수 있다고 언급했습니다. 그러나 그 줄의 순서는 네 개의 여백을 모두 설정하는 데 사용하는 익숙한 위쪽, 오른쪽, 아래쪽 및 왼쪽이 아닙니다. 대신 위, 왼쪽, 아래, 오른쪽을 사용해야 합니다. 이 순서의 역순입니다! 그리드 모드와 쓰기 모드 간의 연결을 이해하기 전까지는 이것은 매우 이상한 결정처럼 보였습니다. 나는 우리가 하고 있는 것이 양쪽 출발선을 설정한 다음 양쪽 끝선을 설정하는 것임을 깨달았습니다. 가로 쓰기 모드에서 위쪽, 오른쪽, 아래쪽 및 왼쪽을 사용하면 잘 작동하지만 그리드를 옆으로 돌리면 의미가 없습니다. grid-area: 1 / 2 / 3 / 5; 아래의 펜에서와 같이 선은 다음과 같이 설정됩니다.

• grid-row-start: 1; - 블록 시작
• grid-column-start: 2 - 인라인 시작
• grid-row-end: 3 - 블록 끝
• grid-column-end: 5 - 인라인 끝

Flexbox 행 및 열

Flexbox를 사용하고 display: flex 를 컨테이너에 추가하면 flex-direction 속성의 초기 값이 row 이므로 항목이 행으로 표시됩니다. 행은 사용 중인 쓰기 모드의 인라인 차원을 따릅니다. 따라서 쓰기 모드가 horizontal-tb 경우 행이 수평으로 실행됩니다. 현재 스크립트의 텍스트 방향이 왼쪽에서 오른쪽이면 항목은 왼쪽에서 시작하여 정렬되고, 오른쪽에서 왼쪽이면 오른쪽에서 시작하여 정렬됩니다.

그러나 vertical-rl 및 flex-direction: row 와 같은 수직 쓰기 모드를 사용하면 인라인 방향이 수직이므로 항목이 수직으로 배치됩니다. 다음 CodePen에서 모든 예제에는 flex-direction: row 가 있으며 쓰기 모드 또는 방향만 변경되었습니다.

flex-direction: column 을 추가하고 쓰기 모드의 블록 차원에 항목 레이아웃을 추가합니다. 가로 쓰기 모드에서 블록 치수는 위에서 아래로, 따라서 열은 세로입니다. vertical-rl 쓰기 모드에서 열은 수평입니다. 이전 예와 마찬가지로 아래 플렉스 레이아웃의 유일한 차이점은 사용 중인 쓰기 모드입니다.

그리드 자동 배치

그리드에서 자동 배치를 사용할 때 플렉스 레이아웃에서와 유사한 동작을 볼 수 있습니다. 그리드 항목은 문서의 쓰기 모드에 따라 자동으로 배치됩니다. 기본값은 인라인 방향이 될 행에 항목을 배치하는 것입니다. 가로 쓰기 모드에서는 가로로, 세로 쓰기 모드에서는 세로로 배치됩니다.

아래 예와 같이 항목의 흐름을 column 변경해 보십시오. 항목은 이제 가로 쓰기 모드에서 세로로, 세로 쓰기 모드에서 가로로 블록 차원으로 흐릅니다.

그리드 선 배치 배치

줄 기반 배치는 쓰기 모드도 고려합니다. 그리드의 선은 행과 열 모두에서 1에서 시작합니다. 열 라인 1에서 열 라인 3으로 항목을 배치하고 왼쪽에서 오른쪽 방향으로 가로 쓰기 모드에 있는 경우 해당 항목은 가장 왼쪽 열 라인에서 두 개의 그리드 트랙을 가로질러 가로로 늘어납니다. 따라서 두 개의 열에 걸쳐 있습니다.

쓰기 모드를 vertical-rl 로 변경하면 열 행 1이 그리드 상단에 있으며 항목은 수직으로 두 트랙에 걸쳐 있습니다. 여전히 두 개의 열에 걸쳐 있지만 열은 이제 가로로 실행됩니다.

그리드와 Flexbox의 정렬

많은 사람들이 Flexbox가 쓰기 모드를 다루는 방식을 접하게 되는 첫 번째 장소 중 하나는 플렉스 레이아웃에서 항목을 정렬할 때일 것입니다. 위의 flex-direction: row 예제를 사용하고 justify-content 속성을 사용하여 모든 항목을 정렬하여 항목이 행의 끝으로 이동하도록 flex-end 하면 됩니다. 즉, 왼쪽에서 오른쪽으로 방향을 지정하는 가로 쓰기 모드에서는 해당 행의 끝이 오른쪽에 있으므로 항목이 모두 오른쪽으로 이동합니다. 방향이 오른쪽에서 왼쪽이면 모두 왼쪽으로 이동합니다.

세로 쓰기 모드에서는 공간이 있다고 가정하고 맨 아래로 이동합니다. 이 예제에서 구성 요소에 inline-size 를 설정하여 플렉스 컨테이너에 작업 정렬을 볼 수 있는 여유 공간이 있는지 확인했습니다.

정렬은 항상 두 개의 축을 가지고 놀기 때문에 그리드 레이아웃에서 이해하기가 조금 더 쉽습니다. 그리드는 2차원이며 이 2차원은 블록과 인라인입니다. 따라서 justify- align- 시작하는 속성을 사용할지 알고 싶다면 한 가지 규칙을 기억하면 됩니다. 그리드 레이아웃에서 align-properties:- align-content , align-items , align-self 는 블록 축 align- 을 수행하는 데 사용됩니다. 가로 쓰기 모드에서는 세로로, 세로 쓰기 모드에서는 가로로 의미합니다.

다시 한번 말하지만, 쓰기 모드에 관계없이 그리드 레이아웃이 정확히 같은 방식으로 작동하기를 원하기 때문에 왼쪽과 오른쪽 또는 위쪽과 아래쪽을 사용하지 않습니다. 그래서 우리는 start 와 end 를 사용하여 정렬합니다. 블록 차원에서 start 하도록 정렬하면 horizontal-tb 에서는 top 있지만 vertical-rl 에서는 right 이 됩니다. 아래 예를 살펴보십시오. 정렬 값은 두 그리드에서 동일하며 유일한 차이점은 사용된 쓰기 모드입니다.

justify-content , justify-items , justify-self 속성은 항상 그리드 레이아웃의 인라인 정렬에 사용됩니다. 가로 쓰기 모드에서는 가로가 되고 세로 쓰기 모드에서는 세로가 됩니다.

Flexbox 정렬은 주 축이 행에서 열로 전환될 수 있다는 사실 때문에 다소 복잡합니다. 따라서 Flexbox에서는 정렬 방식을 주축 대 교차축으로 생각해야 합니다. align- 속성은 교차 축에서 사용됩니다. Flexbox에서 항목을 그룹으로 처리하기 때문에 기본 축에서 justify-content 할 수 있습니다. 교차 축에서 플렉스 컨테이너에 여러 개의 플렉스 라인 과 공간이 있는 경우 align-content 를 사용할 수 있습니다. 또한 align-items 및 align-self 를 사용하여 서로 및 해당 플렉스 라인과 관련하여 교차 축에서 플렉스 항목을 이동할 수 있습니다.

CSS 레이아웃 정렬에 대한 자세한 내용은 이전 Smashing Magazine 기사를 참조하십시오.

• CSS에서 항목을 정렬하는 방법
• Flexbox의 정렬에 대해 알아야 할 모든 것

쓰기 모드 인식 및 이전 CSS

모든 CSS가 이러한 흐름에 상대적인 쓰기 모드 불가지론적 작업 방식을 완전히 따라잡은 것은 아닙니다. 블록과 인라인, 시작과 끝이라는 측면에서 생각하면 할수록 이상하게 눈에 띄기 시작하지 않는 곳. 예를 들어, 다중 열 레이아웃에서 세로 쓰기 모드에서 작업할 때 물리적 너비에 매핑되지 않기 때문에 실제로 열 인라인 크기를 의미하는 column-width 를 지정합니다.

보시다시피, horizontal-tb 이외의 쓰기 모드를 사용하지 않더라도 쓰기 모드는 CSS에서 수행하는 작업의 많은 부분을 뒷받침합니다.

이 쓰기 모드에 구애받지 않는 방식으로 CSS 레이아웃에 대해 생각하는 것이 매우 유용하다는 것을 알았습니다. 모든 속성과 값을 논리적인 것으로 전환하는 것은 조금 이르지만 새로운 레이아웃 방법을 다룰 때 이미 흐름과 관련된 세계에 있습니다. 멘탈 모델이 화면의 네 모서리에 묶이지 않고 블록과 인라인, 시작과 끝 중 하나가 되도록 하면 FlexBox와 그리드를 사용할 때 접하게 되는 많은 것들이 명확해집니다.