javascript-amazon

기능 설명

주요 단위: rem => 1rem = 10px로 환산하여 처리
보조 단위: % => 화면 및 부모 개체(element)의 크기에 비례해 레이아웃을 구성할 때만 사용
- 예: 헤더 첫번째 줄 - 전체 화면(100%)에서 로고가 x rem, 우측 배너가 y rem일 때 중앙 검색창은 100% - x - y 의 너비를 갖는다
- 예2: 블록 콘텐츠 정렬을 위해 부모 개체의 높이를 상속받을 때 width: 100%를 사용

헤더
- 일반 문자: 1.4rem
- 검색창: 1.2rem
마스트헤드
- 헤딩: 3.5rem
- 본문: 2rem
혜택 카로셀
- 카테고리 버튼 라벨: 2rem
- 혜택상세 헤딩: 2.5rem
가로 배너 (horizontalBanners)
- 대표 헤딩: 2.5rem
- 배너 헤딩: 3.5rem
- 프라임 체험 > 배너 헤딩: 3.5rem
- 프라임 체험 > 마이너 CTA 링크: 1.2rem
푸터
- 서비스 링크: 1.4rem (헤딩은 1.6rem)
- 관련사 링크 및 이용규약 링크 : 0.9rem

헤더
- 좌측 패딩 1.5rem (이미지 여백에 따라 조정)
- 첫 행 개체 좌우 간격: 4.5rem
- 두번째 행 - nav 속 개체 간격: 1rem
마스트헤드
- 내부개체 상하 간격: 2rem
- 콘텐츠 왼쪽 여백: 5rem
- 텍스트와 이미지는 각각 좌/우 50%로 배치
혜택 카로셀
- 카테고리 선택버튼 간격: 0.2rem
- 혜택 카테고리와 상세카드 상하 간격: 2rem
- 혜택 상세카드 내부개체 상하 간격: 2rem
가로 배너 (horizontalBanners)
- 내부개체 상하 간격: 2rem
- 콘텐츠 왼쪽 여백: 5rem
- 텍스트와 이미지는 각각 좌/우 50%로 배치
- 프라임 체험 배너
  - 배너 내부개체 상하 간격: 2rem
  - 콘텐츠는 좌우 33% 여백을 두고 중앙에 배치
푸터
- 상하 여백: 3rem
- 링크 표시 영역 너비: 1000px
- 주요 서비스 링크 > 좌우 간격: 6rem
- 주요 서비스 링크 > 상하 간격: 1rem
- 계열사 링크 > 좌우 간격: 1.5rem
- 계열사 링크 > 상하 간격: 1rem
- 이용약관 링크 좌우 간격: 2rem

공통 개체
- CTA 강조 버튼(.global-deco-major-btn)
  - 최소너비: 200px
  - 너비: 35rem
  - 최소높이: 3rem
  - 높이: 5rem
헤더
- 너비: 100%
- 높이: 11rem
마스트헤드
- 너비: 1280px
- 높이: 45rem
혜택 카로셀
- 카테고리 버튼
  - 너비: 150px
  - 높이: 20rem
  - 버튼 속 이미지 영역 > 너비: 120px
  - 버튼 속 이미지 영역 > 높이: 140px
- 혜택 상세 카드
  - 너비: 1280px
  - 높이: 35rem
  - 강조된 키워드 너비/높이: 문자 박스 너비/높이 + 10px
가로 배너 (horizontalBanners)
- 너비: 1280px
- 높이: 35rem
- 미니 카로셀 높이: 배경 높이(35rem)의 70% (너비는 이미지 비율에 맞춰 확대)
푸터
- 브랜드 로고 너비: 10rem
- 버튼: 문자박스 높이 상하 + 0.5rem, 너비 좌우 + 2rem

특정 개체(element)에만 사용하는 클래스명: BEM 방법론을 따르되, 각 Block/Element/Modifier 가 두 단어 이상인 경우 camelCase로 표기해 하이픈과 언더바 사용을 줄인다.
여러 개체가 공유하는 클래스명: kebab-case로 작성한다.