[box] CSS - inline-size 속성 - 인라인방향으로 요소 크기 지정 (= inline-size속성 = 인라인사이즈속성)

목차

1. inline-size 예제 - writing-mode 속성값에 따라 요소의 가로/세로 크기 정의
2. inline-size 정의
3. inline-size 구문

inline-size 예제 - writing-mode 속성값에 따라 요소의 가로/세로 크기 정의

 

<style>

#hz {

  writing-mode: vertical-rl;

  background-color: yellow;

  inline-size: 300px;

}    

</style>

 

<p id="hz">홈짱닷컴 Homzzang.com</p>

 

결과보기

inline-size 정의

 

요소 크기를 인라인(inline) 방향으로 지정.

 

---

 

1. writing-mode 속성값에 따라 인라인(inline) 방향 결정됨.

• (예) 영어처럼 writing-mode가 가로 방향이면, 블락(block)은 아래쪽 방향이고, 인라인(inline)은 왼쪽에서 오른쪽으로임.

 

2. cf.

block-size 속성 - 요소 크기를 블락(block) 방향으로 지정.

 

3.

• 기본값: auto
• 상속여부: X
• 애니가능: O
• CSS버전: CSS3
• JS구문: object.style.inlineSize="250px"; 

 

 

4.

IE 제외한 주요 최신 브라우저 모두 지원.

 

5. 

MDN inline-size 예제 더 보기

https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size

 

inline-size 구문

 

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