본문 영역
플루트(float)
몽9 에디터에서 float는 레이아웃을 만들기 위해 주로 사용되는 속성입니다. 일반적으로 <ul>과 <ol>태그에 적용되어 하위 <li> 요소의 너비를 해상도에 따라 균등하게 분할합니다. 이 속성은 m9-float-n 형식으로 사용되며, 최대 6개의 열로 분할할 수 있습니다. 예를 들어 m9-float-4를 사용하면 하위 <li> 요소가 25%의 너비를 가지면서 깨지지 않고 열이 분할됩니다.
grid 속성과 다르게 float는 하위 <li>를 동일한 비율로 분할하고 싶을 때 사용됩니다.
grid 속성과 다르게 float는 하위 <li>를 동일한 비율로 분할하고 싶을 때 사용됩니다.
소개
- 주로 <ul>과 <ol>태그에
m9-float-n를 삽입하여 사용할 수 있습니다 - 열의 간격은
m9-spacing-n클래스로 조정할 수 있습니다. 0부터 3까지 조정 가능합니다.
m9-float-1
하위 <li>를 1개(100%)로 분할할 때 사용합니다.
결과
- 1
- 2
- 3
- 4
- 5
- 6
코드
m9-float-2
하위 <li>를 2분할 합니다.
결과
- 1
- 2
- 3
- 4
- 5
- 6
코드
m9-float-3
하위 <li>를 3분할 합니다.
결과
- 1
- 2
- 3
- 4
- 5
- 6
코드
m9-float-4
하위 <li>를 4분할 합니다.
결과
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
코드
m9-float-5
하위 <li>를 5분할 합니다.
결과
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
코드
m9-float-6
하위 <li>를 6분할 합니다.
결과
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
코드
간격
m9-spacing-0
m9-float 사용시 li에 간격이 0em으로 적용됩니다.
결과
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
코드
m9-spacing-1
m9-float 사용시 li에 간격이 1em으로 적용됩니다.
결과
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
m9-spacing-2
m9-float 사용시 li에 간격이 2em으로 적용됩니다.
결과
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
설명
m9-float 사용시 li에 넓은 간격을 주고싶을때 m9-spacing-2 을 사용합니다.
m9-spacing-2 = 2em
코드
m9-spacing-3
m9-float 사용시 li에 간격이 3em으로 적용됩니다.
결과
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
설명
m9-float 사용시 li에 아주 넓은 간격을 주고싶을때 m9-spacing-3 을 사용합니다.
m9-spacing-3 = 3em
