목차
- block-size 예제 - writing-mode 속성값에 따라 요소의 가로/세로 크기 정의
- block-size 정의
- block-size 구문
block-size 예제 - writing-mode 속성값에 따라 요소의 가로/세로 크기 정의
<style>
#hz {
writing-mode: vertical-rl;
background-color: yellow;
block-size: 300px;
}
</style>
<p id="hz">홈짱닷컴 Homzzang.com</p>
결과보기
block-size 정의
요소 크기를 블락(block) 방향으로 지정.
1. writing-mode 속성값에 따라 블락(block) 방향 결정됨.
- (예) 영어처럼 writing-mode가 가로 방향이면, 블락(block)은 아래쪽 방향이고, 인라인(inline)은 왼쪽에서 오른쪽으로임.
2. cf.
inline-size 속성 - 요소 크기를 인라인(inline) 방향으로 지정.
3.
- 기본값: auto
- 상속여부: X
- 애니가능: O
- CSS버전: CSS3
- JS구문: object.style.blockSize="100px";
4.
IE 제외한 주요 최신 브라우저 모두 지원.
5. MDN block-size 예제 더 보기
https://developer.mozilla.org/en-US/docs/Web/CSS/block-size
block-size 구문
selector {block-size: length|percentage|max-content|min-content|fit-content(vlaue)|auto|inherit|initialrevert|unset}
[속성값]
length
길이 단위값 (예) 100px, 20em
percentage
백분율값 (예) 75%
max-content
최대 내용에 맞추기
min-content
최소 내용에 맞추기
fit-content(vlaue)
지정 공식대로 맞추기
auto
자동으로 맞추기. (초기값)
inherit
부모요소의 속성값 상속
initial
이 요소의 기본값으로 지정
revert
부모 속성 또는 user agent에 따라 default로 선언 된 속성으로 되돌리기
unset
상속값 존재 시 inherit 사용. 존재 안 하면 initial 속성값 사용.
