# MoreViews > 1. Ratio은 아이템 객수의 비율로 계산해서 page numbering을 계산해줍니다. > 2. Item은 아이템 객수만큼 계산해서 page numbering이 증가해 줍니다 ## MORE Ratio {% tabs %} {% tab title="HTML" %} ```markup

Ratio

``` {% endtab %} {% tab title="CSS" %} ```css /** 더보기 클릭 할때마다 아이템 나타나는 애니메이션 추가 */ @-webkit-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity: 1;} } @-moz-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity: 1; } } @-o-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity: 1;} } @keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity: 1; } } .list__inner .list__item__box { display: block; -webkit-animation: fadeInFromNone 0.6s ease-out; -moz-animation: fadeInFromNone 0.6s ease-out; -o-animation: fadeInFromNone 0.6s ease-out; animation: fadeInFromNone 0.6s ease-out; } .list__inner .list__item__box.active {opacity: 0; display: none;} ``` {% endtab %} {% tab title="JS" %} ```javascript ``` {% endtab %} {% endtabs %} ## 👉🏻예시확인 [stackblitz](https://stackblitz.com/edit/web-platform-tzfc8a?file=index.html) 사이트 확인 ## MORE Item {% tabs %} {% tab title="HTML" %} ```markup

Item

``` {% endtab %} {% tab title="CSS" %} ```css /** 더보기 클릭 할때마다 아이템 나타나는 애니메이션 추가 */ @-webkit-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity: 1;} } @-moz-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity: 1; } } @-o-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity: 1;} } @keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity: 1; } } .list__inner .list__item__box { display: block; -webkit-animation: fadeInFromNone 0.6s ease-out; -moz-animation: fadeInFromNone 0.6s ease-out; -o-animation: fadeInFromNone 0.6s ease-out; animation: fadeInFromNone 0.6s ease-out; } .list__inner .list__item__box.active {opacity: 0; display: none;} ``` {% endtab %} {% tab title="JS" %} ```javascript ``` {% endtab %} {% endtabs %} ## 👉🏻예시확인 [stackblitz](https://stackblitz.com/edit/web-platform-vzssne?file=index.html) 사이트 확인 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://thdbsgh3443.gitbook.io/triplexlab/triplexlab-api/more.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.