column과 row 속성으로 컴포넌트 배치하기
화면을 가상의 컬럼으로 나눠 각 셀에 컴포넌트를 배치합니다. 전체 셀의 크기는 모든 컴포넌트의 column과 row 속성의 최대 값으로 결정합니다. 예를 들어 열이 3, 행이 4인 레이아웃이 있습니다.
column 속성은 왼쪽부터 1에서 시작합니다. row 속성은 위부터 1에서 시작합니다.
색칠한 셀에 컴포넌트를 배치하려면 column과 row 값을 다음과 같이 설정합니다.
<r-doc id="3e005ee60edcc72d" column="1" row="1" />
특정 행에 컴포넌트를 배치하지 않으면 해당 행의 높이가 0이기 때문에 화면에서 공간을 차지하지는 않습니다.
색칠한 셀에 컴포넌트를 배치하려면 column과 row 값을 다음과 같이 설정합니다.
<r-doc id="3e005ee60edcc72d" column="3" row="4" />
여러 열에 하나의 컴포넌트를 배치할 수 있습니다. 색칠한 셀에 컴포넌트를 배치하려면 column과 row 값을 다음과 같이 설정합니다.
<r-doc id="3e005ee60edcc72d" column="1-3" row="3" />
column 속성에 -를 구분자로 시작 열과 끝열을 설정합니다.
여러 행에 하나의 컴포넌트를 배치할 수 있습니다. 색칠한 셀에 컴포넌트를 배치하려면 column과 row 값을 다음과 같이 설정합니다.
<r-doc id="3e005ee60edcc72d" column="1" row="2-3" />
row 속성에 -를 구분자로 시작 행과 끝행을 설정합니다.
여러 열과 여러 행에 하나의 컴포넌트를 배치할 수 있습니다. 색칠한 셀에 컴포넌트를 배치하려면 column과 row 값을 다음과 같이 설정합니다.
<r-doc id="3e005ee60edcc72d" column="1-2" row="3-4" />
column 속성에 -를 구분자로 시작 열과 끝열을 설정합니다.
row 속성에 -를 구분자로 시작 행과 끝행을 설정합니다.
참고 사항
컴포넌트 안에서는 셀 기반 레이아웃을 지원하지 않습니다. 예를 들어
r-panel과r-tab컴포넌트 아래에 있는 컴포넌트의column과row속성은 무시합니다.모든 칼럼의 너비는 같습니다. 페이지 너비를 열의 숫자로 나눈 값이 칼럼 너비의 값입니다.
행의 높이는 그 행에 있는 컴포넌트의 높이가 결정합니다. 따라서 각 행의 높이는 다릅니다.
셀 기반 레이아웃을 사용하려면 일반
HTML코드를r-html컴포넌트로 작성합니다.