크기 조절에 관한 논리적 속성

아래 표는 논리적 속성과 물리적 속성 사이의 매핑을 나타낸 표입니다. 이 매핑은 영어와 아라비아어처럼, width 가 inline-size 에 매핑되는 horizontal-tb 방향의 쓰기 모드에 있다는 것을 가정합니다.

만일 수직 방향의 쓰기 모드에 있다면 inline-size 는 height 와 매핑될 것입니다.

width 와 height 의 각각의 논리적 매핑은 이는 인라인 차원에서의 길이를 설정하는 inline-size 와 블록 차원에서의 길이를 설정하는 block-size 가 됩니다. 영어로 작업을 할 때에는, width 를 inline-size 로, height 를 block-size 로 대체하면 동일한 레이아웃을 결과로 얻을 수 있습니다.

아래 실시간 예제에서는, writing-mode 가 horizontal-tb 로 설정되어 있습니다. 이를 vertical-rl 로 변경하여 width 와 height 를 사용하는 첫번째 예시를 확인해 보세요. 텍스트가 수직 방향으로 바뀌어도 이는 변하지 않고 남아있습니다. inline-size 와 block-size 를 사용하는 두번쨰 예시에서는 전체 블록이 회전한 것처럼 텍스트의 방향을 따르게 됩니다.

min-width 와 min-height 를 위한 매핑 min-inline-size 와 min-block-size 도 존재합니다. 이들은 inline-size 와 block-size 속성과 동일하게 동작하지만, 고정된 크기가 아닌 최소 크기를 설정합니다.

아래 예제에서 vertical-rl 로 변경하여 첫번째 예시에 어떤 영향을 미치는지 확인해 보세요. 첫번째 예시에는 min-height 가 사용되었고, 두번째 예시에서는 min-block-size 이 사용되었습니다.

마침내 max-inline-size 와 max-block-size 를 max-width 와 max-height 의 논리적 대체 속성으로 사용할 수 있습니다. 아래 예제에서 이전에 했던 것처럼 실행해 보세요.

resize 속성은 아이템의 크기가 조절될 수 있는지 여부를 설정하고, horizontal 와 vertical 라는 물리적 값을 가집니다. resize 속성은 논리적 키워드 값들도 가지고 있습니다. resize: inline 을 사용하면 인라인 차원에서의 크기 조정이 가능하고, resize: block 를 사용하면 블록 차원에서의 크기 조정이 가능하게 됩니다.

both 키워드 값을 사용하게 되면 물리적이든 논리적이든 상관 없이 작동하게 됩니다. 이는 두 차원의 값을 한번에 설정합니다. 아래 예제에서 직접 확인해 보세요.