AMP 내비게이션 메뉴 만들기 amp-carousel

AMP에는 유용한 구성 요소인 amp-carousel이 있습니다. 주로 이미지 및 갤러리와 함께 사용되지만 스크롤 가능한 내비게이션 메뉴를 만드는 데도 사용할 수 있습니다.

먼저 스크립트를 가져와야 합니다. 문서 헤드에 다음을 추가합니다.

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

기본적인 amp-carousel 사용법은 다음과 같습니다.

<amp-carousel height="1.8rem"
              layout="fixed-height"
              type="carousel">
...
</amp-carousel>

여기서 주목해야 할 주요 사항은 type 속성입니다. 다음 값 중 하나를 취할 수 있습니다.

• type = "carousel": 기본값이며 가로로 스크롤 할 수 있는 목록으로 표시됩니다.
• type = "slides": 한 번에 하나의 항목 (슬라이드)만 표시됩니다.

 

이제 캐러셀에 내비게이션 메뉴를 추가해 보겠습니다.

<amp-carousel height="1.8rem"
              layout="fixed-height"
              type="carousel"
              controls
              class="primary-nav">
  <span><a href="#">news</a></span>
  <span><a href="#">sports</a></span>
  <span><a href="#">arts</a></span>
  ...
</amp-carousel>

캐러셀에 추가될 항목에 스타일을 지정합니다.

.primary-nav a {
  font-family: 'PT Sans', sans-serif;
  color: #fff;
  font-size: 1.5rem;
  text-decoration: none;
  padding-right: 0.5rem;
}

내비게이션 바는 터치스크린에서 스크롤하여 항목을 볼 수 있지만, 캐러셀을 추가하면 이전 및 다음 버튼이 자동으로 생겨 항목을 넘겨 볼 수 있습니다. (다음 그림 참조).

이제 버튼의 스타일만 지정하면 됩니다. CSS로 기본 버튼의 스타일을 제거할 수 있습니다.

.amp-carousel-button {
  background:0;
}

.amp-carousel-button-next {
  right:0;
}

그다음으로 :after 가상 요소를 사용하여 내비게이션 메뉴에 화살표 아이콘 및 스타일을 추가할 수 있습니다.

.amp-carousel-button-next::after {
  content: '⟩';
  right: 0;
  text-align: right;
  background: linear-gradient (to right, rgba(0,86,137,0) 0%, rgba (0,86, 137, 1) 50%);
  color: #fff;
  position: absolute;
  bottom:0;
  font-size: 2rem;
  line-height: 2rem;
  font-weight: bold;
  width: 20px;
}

이제 끝났습니다!

Tip: amp-carousel에 controls 속성을 추가하면 이전 및 다음 버튼이 비활성화되었을 때 사라지는 것을 방지하고 항상 표시됩니다.