왼쪽 정렬, 오른쪽 정렬, 가운데 정렬, 나눔 정렬
텍스트 블록에 수평 정렬을 적용하려면 다음과 같이 사용해주세요.
| [[<]] … [[/<]] |
왼쪽 정렬 |
| [[>]] … [[/>]] |
오른쪽 정렬 |
| [[=]] … [[/=]] |
가운데 정렬 |
| [[==]] … [[/==]] |
나눔 정렬 |
예시.
[[=]]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\
Aenean a libero. Vestibulum adipiscing, felis ac faucibus \
imperdiet, erat lacus accumsan neque, vitae nonummy lorem \
pede ac elit.
Maecenas in urna. Curabitur hendrerit risus vitae ligula.
[[/=]]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit.
Maecenas in urna. Curabitur hendrerit risus vitae ligula.
줄 하나를 가운데 정렬하려면 시작 부분에 =를 넣어주세요.
= 가운데 정렬된 줄가운데 정렬된 줄
주석: 블록 꾸미기 태그는 뒤에 공백을 포함해서 아무것도 없어야합니다. 예를들어, [[=]]와 [[/=]]는 반드시 바로 뒤에 복귀 문자(개행)가 와야합니다.
사용자 정의 div 블록
레이아웃 개선을 위해 html <div> ... </div> 블록으로 치환되는 [[div]] ... [[/div]] 요소를 사용할 수 있습니다.
허용되는 속성: id, class, style, data-만 가능하며, 이것만으로도 원하는 레이아웃을 만드는데 충분할겁니다. span 요소 역시 class, style, data- 속성을 허용합니다.
[[div]] 블록은 중첩될 수 있습니다. [[div]]와 [[/div]] 태그를 줄 안에 넣으면 파서가 이를 인식할 수 없습니다.
아래는 div 블록을 사용해서 2열 레이아웃을 생성하는 법의 예시입니다.
[[div style="float:left; width: 45%; padding: 0 2%"]]
왼쪽 열 왼쪽 열 왼쪽 열 왼쪽 열 왼쪽 열
왼쪽 열 왼쪽 열 왼쪽 열 왼쪽 열 왼쪽 열
[[/div]]
[[div style="float:left; width: 45%; padding: 0 2%"]]
오른쪽 열 오른쪽 열 오른쪽 열 오른쪽 열 오른쪽 열
오른쪽 열 오른쪽 열 오른쪽 열 오른쪽 열 오른쪽 열
[[/div]]
~~~~왼쪽 열 왼쪽 열 왼쪽 열 왼쪽 열 왼쪽 열 왼쪽 열 왼쪽 열 왼쪽 열 왼쪽 열 왼쪽 열
오른쪽 열 오른쪽 열 오른쪽 열 오른쪽 열 오른쪽 열 오른쪽 열 오른쪽 열 오른쪽 열 오른쪽 열 오른쪽 열
~~~~ 요소는 float를 지우는데 사용되며, <div style="clear:both"></div>로 치환됩니다.
사용자 정의 [[div]] 블록은 고급 페이지 레이아웃을 생성하는데 사용됩니다.
커스텀 div에서는 사용자 지정된 ID 인수를 사용할 수 있습니다. 이는 부트스트랩을 사용하여 사이트를 구축할 때 매우 유용합니다. 사용자 정의 ID는 보안상의 이유로 HTML 출력 시에 "u-" 접두사가 붙는다는 점을 기억하세요.
소스를 읽기 쉽게 만들려면, 직접 "u-" 접두사를 붙일 수 있습니다. 예를들어, 아래의 두 부분의 위키 문법은 같은 HTML로 출력됩니다.
페이지를 저장할 때 "u-" 접두사가 myCarousel에 자동적으로 추가됩니다
[[div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel"]]"u-" 접두사가 이미 존재할 경우에는 추가되지 않습니다
[[div id="u-myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel"]]두 예시의 HTML 출력
<div id="u-myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">