중첩된 아코디언 메뉴는 많은 양의 정보를 간결하고 직관적인 방식으로 구성하고 표시하는 효율적인 방법입니다. 모바일 장치가 인터넷 액세스에 있어 점점 더 중요해짐에 따라 더 빠른 로딩과 향상된 사용자 경험을 위해 웹 페이지를 최적화하는 것이 점점 더 중요해지고 있습니다. 이것이 바로 Google Accelerated Mobile Pages(AMP) 프로젝트가 등장하는 곳으로, 모바일 친화적인 웹 페이지를 생성하기 위한 원활하고 빠른 로딩 방법을 제공합니다. 이 글에서는 Google AMP의 amp-accordion 구성요소를 사용하여 중첩된 아코디언 메뉴를 만들어 모바일 웹페이지에 복잡한 정보를 명확하고 체계적으로 표시하는 방법을 살펴보겠습니다.
Google의 AMP(Accelerated Mobile Pages) 프로그램은 더 빠르고 반응성이 뛰어난 웹 페이지 로딩을 촉진하여 모바일 웹 탐색을 향상시키기 위해 2015년에 출시되었습니다. 이 프로젝트는 모바일 장치에서 거의 즉시 렌더링되도록 유연하고 빠르게 로드되는 웹 페이지를 개발하는 방법을 제공합니다.
AMP 페이지는 모바일 장치에서 다운로드하고 처리하는 데이터의 양을 줄여 페이지 로드 시간을 단축하고 전반적인 사용자 경험을 개선하도록 설계되었습니다. AMP 페이지는 일반적으로 간단한 HTML, 간단한 CSS, 제한된 JavaScript를 포함하는 표준 웹페이지의 단순화되고 압축된 버전입니다.
아코디언은 사용자가 웹페이지 콘텐츠 섹션을 확장하거나 축소할 수 있는 사용자 인터페이스 요소입니다. 특히 많은 양의 콘텐츠를 표시해야 하는 경우 정보를 간결하고 체계적으로 표시합니다. 아코디언은 일반적으로 각각 제목이 있는 여러 콘텐츠 섹션으로 구성됩니다. 제목을 클릭하면 해당 콘텐츠 섹션을 확장하거나 축소하여 사용자가 콘텐츠를 보거나 숨길 수 있습니다. 아코디언은 사용자가 관심 있는 콘텐츠에 쉽게 액세스하고 볼 수 있도록 하여 혼란을 줄이고 사용자 경험을 개선하는 데 도움이 됩니다.
amp-accordion 태그는 웹페이지에 아코디언을 만들 수 있는 AMP 구성요소입니다. amp-accordion 구성 요소는 각각 제목과 내용이 포함된 확장 및 축소 가능한 섹션 세트로 구성됩니다. 제목은 일반적으로 콘텐츠 섹션의 가시성을 전환하는 데 사용되는 클릭 가능한 요소입니다. 사용자가 제목을 클릭하면 현재 상태에 따라 콘텐츠 섹션이 확장되거나 축소됩니다.
각 속성과 가능한 값을 하나씩 살펴보겠습니다. -
Id(선택 사항) - 아코디언 구성 요소의 고유 ID를 지정합니다. JavaScript를 사용하여 CSS 스타일이나 위치 구성 요소를 적용하는 데 사용할 수 있습니다.
단일 섹션 확장(선택 사항) − 있는 경우 한 번에 하나의 섹션만 확장할 수 있습니다. 새 섹션이 확장되면 이전에 확장된 섹션이 축소됩니다.
Disable-session-states(선택 사항) - 있는 경우 구성 요소에 대해 세션 상태가 비활성화됩니다. 이는 페이지 로드 사이에 구성 요소의 상태가 저장되지 않음을 의미합니다.
애니메이션(선택 사항)− 있는 경우 섹션을 확장하거나 축소할 때 아코디언이 애니메이션을 적용합니다.
레이아웃(선택 사항)− 아코디언의 레이아웃을 지정합니다. 기본값은 컨테이너를 고정된 너비와 높이로 설정하는 "container"입니다. 다른 가능한 값으로는 "fixed-height" 및 "flex-item"이 있습니다.
Class(선택 사항) - 구성 요소에 적용할 하나 이상의 CSS 클래스 이름을 지정합니다.
스타일(선택 사항) - 구성 요소에 적용할 하나 이상의 인라인 CSS 스타일 속성을 지정합니다.
Google AMP의 amp-accordion 구성 요소를 사용하여 중첩된 아코디언을 만들려면 아래 나열된 단계를 따르세요.
HTML 파일의
내에 AMP 스크립트를 포함하세요. 다음 줄을 추가하면 됩니다: .amp-accordion 태그를 사용하여 외부 아코디언을 정의하세요. 아코디언에서는
각 섹션에 제목과 내용을 추가하세요. 헤더는
중첩된 아코디언을 만들려면 외부 아코디언의 한 섹션 내용에 또 다른 amp-accordion 태그를 추가하세요.
내부 아코디언에서는
아코디언 스타일을 지정하려면 파일에 사용자 정의 CSS를 추가할 수 있습니다. 예를 들어 아코디언에 테두리를 추가하거나 글꼴 크기나 색상을 변경할 수 있습니다.
아코디언을 설정한 후 사용자는 제목을 클릭하여 콘텐츠 섹션을 확장하거나 축소할 수 있습니다. 이는 정보를 구성하고 사용자가 원하는 것을 더 쉽게 찾을 수 있는 방법을 제공합니다.
以下HTML代码旨在使用Google AMP amp-accordion创建嵌套手风琴。代码包括两个amp-accordion元素，一个在另一个内部，以创建嵌套手风琴结构。外部手风琴和内部手风琴类用于为手风琴添加边框和边距样式。使用section、h2、h3和p标签添加手风琴的内容。当用户点击手风琴标题时，根据Google AMP amp-accordion的功能，内容会展开或折叠。
<!DOCTYPE html>
<html>
<head>
<title>How to create Nested Accordion using Google AMP amp-accordion?</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
<style amp-custom>
.outer-accordion {
border: 1px solid #ccc;
margin: 10px 0;
}
.inner-accordion {
border: 1px solid #eee;
margin: 10px 0;
}
</style>
</head>
<body>
<h4>How to create Nested Accordion using Google AMP amp-accordion?</h4>
<amp-accordion class="outer-accordion">
<section>
<h2>Outer Section 1</h2>
<amp-accordion class="inner-accordion">
<section>
<h3>Inner Section 1</h3>
<p>Content for inner section 1.</p>
</section>
<section>
<h3>Inner Section 2</h3>
<p>Content for inner section 2.</p>
</section>
</amp-accordion>
</section>
<section>
<h2>Outer Section 2</h2>
<p>Content for outer section 2.</p>
</section>
</amp-accordion>
</body>
</html>
总而言之，利用 Google AMP 的 amp-accordion 组件在 AMP 页面上制作嵌套的手风琴是一种简单的方法，使您能够以压缩且直观的方式订购内容。嵌套的手风琴形成是通过将 amp-accordion 组件嵌入彼此来完成的，该产品是一个多功能的交互式 UI 元素，可以改善 AMP 页面上的用户体验。通过这篇文章，我们的愿望是清楚地了解如何使用 amp-accordion 创建嵌套手风琴，以及它如何提高 AMP 页面的价值。
위 내용은 Google AMP 앰프 아코디언을 사용하여 중첩된 아코디언을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
