CSS 논리 방향 속성-Block and Inline

 

CSS 논리 방향 속성은 레이아웃을 논리적으로 제어할 수 있는 논리 속성과 값 입니다. 논리 속성은 해당요소의 물리적인 요소의 방향 속성을 상대적인 방향 속성 값을 통해 정의 합니다.

 

하나의 사이트에서 글 작성방향이 다양하게 지원되어야 하는 조건이라면 논리 속성값을 통해 width와 height에 대한 값을 정의하여 사용합니다.

 

Block vs. inline

논리 속성 및 값은 흐름 방향을 나타내기 위해 "block"과 "inline"을 사용합니다. 이 용어들의 물리적인 방향은 writing-mode에 따라 다르게 설정됩니다.

 

Block dimension

라인 내 텍스트 흐름에 수직인 방향, 즉 수평 쓰기 방식에서는 수직 차원이며, 수직 쓰기 방식에서는 수평 차원입니다. 가로쓰기로 글이 작성되는 것이 인라인이라면 그에 수직적인 값을 갖는 것을 Block(Top to Bottom) 방향입니다. writing-mode값의 수직 교차 방향입니다.

 

Inline dimension

라인 내 텍스트 흐름과 수평인 방향, 즉 수평 쓰기 방향에서는 수평 방향이며, 수직 쓰기 방향에서는 수직 방향입니다. writing-mode의 수평 순 방향입니다.

 

 

 

block-size

block-size CSS 속성은 쓰기 모드에 따라 요소의 블록의 수평 또는 수직 크기를 정의합니다. writing-mode의 값에 따라 width 또는 height 속성에 해당합니다.

writing-mode가 수직 방향인 경우 block-size 값은 요소의 width 값을, 수평 방향이라면 요소의 height값을 나타냅니다.

 

 

속성 값

/* <length> values */
block-size: 300px;
block-size: 25em;

/* <percentage> values */
block-size: 75%;

/* Keyword values */
block-size: max-content;
block-size: min-content;
block-size: fit-content(20em);
block-size: auto;

/* Global values */
block-size: inherit;
block-size: initial;
block-size: revert;
block-size: revert-layer;
block-size: unset;

 

사용 예제

.exampleText {
  writing-mode: vertical-rl; // 오른쪽에서 왼쪽방향으로 세로쓰기
  background-color: yellow;
  block-size: 200px; // width 값과 같다.
}

 

 

inline-size

inline-size CSS 속성은 writing-mode에 따라 요소의 width 또는 height를 정의합니다.

만약 writing-mode가 세로 쓰기면, inline-size 값은 요소의 height값을, 가로 쓰기인 경우 요소의 width 값을 나타냅니다.

 

속성 값

/* <length> values */
inline-size: 300px;
inline-size: 25em;

/* <percentage> values */
inline-size: 75%;

/* Keyword values */
inline-size: max-content;
inline-size: min-content;
inline-size: fit-content(20em);
inline-size: auto;

/* Global values */
inline-size: inherit;
inline-size: initial;
inline-size: revert;
inline-size: revert-layer;
inline-size: unset;

 

사용 예제

.exampleText {
  writing-mode: vertical-rl; // 오른쪽에서 왼쪽으로 세로 쓰기
  background-color: yellow;
  inline-size: 110px; // height 값과 같다.
}