[4.0] 쓰리래빗츠 도움말 사이트처럼 페이지를 구성하려면 어떻게 해야 하나요?

칼럼을 5개로 넣고 2, 3, 4에 배치했습니다.

외부여서 나중에 코드를 올리도록 하겠습니다.

감사합니다.

전체 코드입니다. 감사합니다.

<!-- 첫 번째 줄 -->
<r-text title="쓰리래빗츠 북 설치 가이드" href="/book_installation_guide_4_0_ko" icon="swap_calls" color="orange" column="2">
    <b>자바 8</b> 이상을 지원하는 윈도우와 리눅스 등에 쓰리래빗츠 북을 설치할 수 있습니다. <b>OpenJDK</b>도 지원합니다.
</r-text>

<r-text title="쓰리래빗츠 북 사용자 가이드" href="/book_user_guide_4_0_ko" icon="grain" column="3">
    <b>에디터</b> 사용 방법과 <b>서식</b>을 꾸미는 방법 등 다양한 사용자 가이드를 제공합니다.
</r-text>

<r-text title="쓰리래빗츠 북 관리자 가이드" href="/book_administration_guide_4_0_ko" icon="tv" column="4">
    <b>OAuth</b>와 LDAP을 이용한 SSO 구현 방법 등을 설명합니다. 자바 힙 메모리를 바꾸는 등의 서버 관리 가이드도 있습니다.
</r-text>

<r-option name="row" value="2" />
<r-text title="쓰리래빗츠 북 릴리스 노트" href="/book_release_note_ko" icon="timeline" column="2">
    <b>한달에 한번</b> 마이너 릴리스를 합니다. 빠른 릴리스 덕에 사용자 가이드에 없는 내용이 릴리스 노트에만 있습니다.
</r-text>

<r-text title="질문과 답변" href="/qna_ko" icon="lightbulb_outline" color="pink" column="3">
    궁금한 사항이 있다면 남겨주세요. 답변하겠습니다. <b>다른 사람의 질문에 답변</b>할 수도 있습니다.
</r-text>

<r-text title="페이스북" href="https://www.facebook.com/3rabbitz" icon="facebook" column="4">
    쓰리래빗츠 북의 새로운 릴리스 소식을 받으려면 페이스북 페이지를 <b>좋아요</b>해주세요.
</r-text>

<r-option name="row" value="3" />
<r-text title="업데이트 가이드" href="/book_administration_guide_4_0_ko#software_update" icon="cached" column="2">
    설치형 소프트웨어이지만 쉽게 업데이트할 수 있습니다. <b>항상 최신 버전</b>을 사용하는 것을 권장합니다.
</r-text>

<r-text title="쓰리래빗츠 북 라이선스" href="/477680342a141146#34e4133ecf5039ee" icon="payment" column="3">
    쓰리래빗츠 북의 라이선스와 가격 정책을 설명합니다. <b>오픈소스와 비영리 단체</b>를 위한 라이선스도 있습니다.
</r-text>

<r-text title="블로그" href="/blog_ko" icon="fingerprint" color="brown" column="4">
    쓰리래빗츠의 블로그입니다. <b>가끔식 새로운 글</b>을 올립니다.
</r-text>

<r-option name="icon" value="tag" />
<r-option name="row" value="4" />
<r-doc id="a8cb0c6892467ecb" title="사용자 가이드" view="column3" column="1-3" />
<r-doc id="ec06c4e7ee55b161" title="웹 페이지 가이드" column="4" />
<r-panel column="5">
    <r-list title="이메일 문의" icon="mail">
        <r-item title="제품 구매 문의: sales@3rabbitz.com" href="mailto:sales@3rabbitz.com" />
        <r-item title="고객 지원 문의: support@3rabbitz.com" href="mailto:support@3rabbitz.com" />
    </r-list>
    <r-doc id="477680342a141146" title="구매 관련 자주 묻는 질문" />
</r-panel>

<r-option name="row" value="5" />
<r-doc id="ae9d4c608cbef910" title="관리자 가이드" view="column2" column="1-2" />
<r-doc id="9b42c660300987f6" title="설치 가이드" column="3" />
<r-list title="주요 문서" column="4-5">
    <r-item id="9dfff04f6103ad37" />
    <r-item id="e0ebe04cfcece052" />
    <r-item id="df994c2ccde06f54" />
    <r-item id="a49d77d96503e198" />
    <r-item id="7a0f07b5ff19719a" />
    <r-item id="967e3f8775d13bfb" />
    <r-item id="efdb6c898262a5ff" />
    <r-item id="fe92863a39c23854" />
</r-list>

<style>
    .r_page {
        margin: 1em auto 0 auto;
    }

    b {
        background-color: rgb(222, 222, 222);
        font-weight: bold;
    }
</style>

해당 도움말 같은 경우 5개의 컬럼을 사용하는데 위에서는 가운데 3개만 사용하고 아래에서 5개를 다 사용하는 형식입니다.
아래 쪽 5개 컬럼이 없는 경우 위에서 3개만 사용할 수 있는 방법이 있을까요?

<r-text column="5">
</r-text>

이런 식으로 코드를 사용해도 아이콘 영역이 표시되어서 강제로 스타일에서 보이지 않게 할 수는 있겠지만
다른 방법이 있을지 문의드려요~

CSS로 처리해야 할 것 같습니다. 칼럼은 3개를 사용하고 . .r_page에 대해서 margin과 max-width 속성을 설정합니다.

예제입니다. https://www.3rabbitz.com/web_page_test

<!-- 첫 번째 줄 -->
<r-text title="쓰리래빗츠 북 설치 가이드" href="/book_installation_guide_4_0_ko" icon="swap_calls" color="orange" column="1">
    <b>자바 8</b> 이상을 지원하는 윈도우와 리눅스 등에 쓰리래빗츠 북을 설치할 수 있습니다. <b>OpenJDK</b>도 지원합니다.
</r-text>

<r-text title="쓰리래빗츠 북 사용자 가이드" href="/book_user_guide_4_0_ko" icon="grain" column="2">
    <b>에디터</b> 사용 방법과 <b>서식</b>을 꾸미는 방법 등 다양한 사용자 가이드를 제공합니다.
</r-text>

<r-text title="쓰리래빗츠 북 관리자 가이드" href="/book_administration_guide_4_0_ko" icon="tv" column="3">
    <b>OAuth</b>와 LDAP을 이용한 SSO 구현 방법 등을 설명합니다. 자바 힙 메모리를 바꾸는 등의 서버 관리 가이드도 있습니다.
</r-text>

<r-option name="row" value="2" />
<r-text title="쓰리래빗츠 북 릴리스 노트" href="/book_release_note_ko" icon="timeline" column="1">
    <b>한달에 한번</b> 마이너 릴리스를 합니다. 빠른 릴리스 덕에 사용자 가이드에 없는 내용이 릴리스 노트에만 있습니다.
</r-text>

<r-text title="질문과 답변" href="/qna_ko" icon="lightbulb_outline" color="pink" column="2">
    궁금한 사항이 있다면 남겨주세요. 답변하겠습니다. <b>다른 사람의 질문에 답변</b>할 수도 있습니다.
</r-text>

<r-text title="페이스북" href="https://www.facebook.com/3rabbitz" icon="facebook" column="3">
    쓰리래빗츠 북의 새로운 릴리스 소식을 받으려면 페이스북 페이지를 <b>좋아요</b>해주세요.
</r-text>

<r-option name="row" value="3" />
<r-text title="업데이트 가이드" href="/book_administration_guide_4_0_ko#software_update" icon="cached" column="1">
    설치형 소프트웨어이지만 쉽게 업데이트할 수 있습니다. <b>항상 최신 버전</b>을 사용하는 것을 권장합니다.
</r-text>

<r-text title="쓰리래빗츠 북 라이선스" href="/477680342a141146#34e4133ecf5039ee" icon="payment" column="2">
    쓰리래빗츠 북의 라이선스와 가격 정책을 설명합니다. <b>오픈소스와 비영리 단체</b>를 위한 라이선스도 있습니다.
</r-text>

<r-text title="블로그" href="/blog_ko" icon="fingerprint" color="brown" column="3">
    쓰리래빗츠의 블로그입니다. <b>가끔식 새로운 글</b>을 올립니다.
</r-text>

<style>
    .r_page {
        margin: 1em auto 0 auto;
        max-width: 800px;
    }
</style>