• Q&A
  • 회원가입
  • 로그인

[box] CSS - block-size 속성 - writing-mode 속성값에 따라 요소의 가로/세로 크기 정의 (= block-size속성 = 블락사이즈속성 = 블록사이즈속성)

목차

  1. block-size 예제 - writing-mode 속성값에 따라 요소의 가로/세로 크기 정의
  2. block-size 정의
  3. 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 정의

 

writing-mode 속성값에 따라 요소의 가로/세로 크기 정의.

 


 

1.

writing-mode 값에 따라 width 또는 height 속성에 해당.

  • writing-mode가 세로 방향이면, 요소 너비(width)와 관련. 
  • writing-mode가 가로 방향이면, 요소 높이(height)와 관련. 

 

2. cf.

inline-size 속성 - block-size 속성과 유사하나, inline-block 특징 갖음.

 

3.

  • 초기값: auto
  • 적용: width, height 속성과 동일.
  • 상속: X

 

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 속성값 사용.



방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012