맞춤형 아코디언 만들기 - Webflow 도움말

드롭다운 요소 추가 방법

드롭다운 요소는 기본 내장 동작을 가지고 있어 맞춤형 아코디언으로 유용합니다. 클릭 시 드롭다운 목록이 열리고, 다른 요소나 페이지의 다른 부분을 클릭하면 닫힙니다.

사이트에 드롭다운 요소를 추가하려면 추가 패널 (A) > 요소 > 고급으로 이동하여 드롭다운 요소를 캔버스로 드래그하세요.

기본 드롭다운 스타일 변경 방법

맞춤형 아코디언에서 드롭다운을 사용하려면 기본 드롭다운 요소 스타일을 변경해야 합니다. 특히, 드롭다운이 부모 요소의 공간을 완전히 채우도록 너비를 조정해야 합니다 (즉, 맞춤형 아코디언을 포함하는 요소).

기본 드롭다운 스타일을 변경하려면:

1. 디자이너 캔버스에서 부모 드롭다운 요소를 선택하세요 (이 예에서는 "아코디언 항목" 클래스가 부여됨)
2. 스타일 패널 > 크기로 이동하세요
3. 너비를 100%로 설정하세요

드롭다운 토글 사용자 정의 방법

이제 드롭다운 토글을 사용자 정의하여 부모 요소를 완전히 채우고 아코디언이 닫힐 때 드롭다운 목록 내부의 콘텐츠를 숨겨야 합니다. 드롭다운 토글의 디스플레이 및 높이 속성을 조정하세요:

1. 캔버스에서 드롭다운 토글을 선택하고 클래스(예: "아코디언 토글")를 부여하세요
2. 스타일 패널 > 레이아웃으로 이동하세요
3. 디스플레이를 플렉스박스로 설정하여 수평 공간을 채우세요
4. 정렬을 중앙으로 설정하여 텍스트를 수직으로 중앙에 배치하세요
5. 스타일 패널 > 크기로 이동하세요
6. 높이 값을 설정하세요 (예: 80px)

아코디언 스타일링 방법

사이트를 미리 보고 아코디언을 클릭하면 아코디언이 열리지만 기본 콘텐츠가 주변 콘텐츠를 덮는 것을 볼 수 있습니다. 이는 드롭다운 목록의 기본 position 스타일이 absolute이기 때문입니다. 콘텐츠가 확장되고 주변 요소가 이동하도록 변경해야 합니다.

아코디언 스타일링 방법:

1. 부모 드롭다운 요소 선택 (예: "아코디언 항목")
2. "톱니바퀴" 아이콘 클릭하여 드롭다운 설정 열고 메뉴 표시
3. 드롭다운 목록 요소 선택
4. 스타일 패널 > Position으로 이동
5. Position을 static으로 설정
6. 부모 드롭다운 요소 선택 ("아코디언 항목")
7. 스타일 패널 > Size로 이동
8. Overflow를 hidden으로 설정

맞춤 애니메이션 생성 방법

맞춤 아코디언을 열고 닫는 맞춤 애니메이션을 생성하세요:

• 초기 작업 생성
• 아코디언 열기 애니메이션
• 아코디언 닫기 애니메이션

초기 작업 생성

아코디언을 위한 두 가지 초기 작업을 생성합니다.

드롭다운의 경우:

1. 드롭다운 요소 선택 ("아코디언 항목")
2. 상호작용 패널 > 요소 트리거로 이동하여 새 요소 트리거 생성
3. 드롭다운 열림 선택
4. 메뉴 열림 아래에서 작업 선택
5. 맞춤 애니메이션 아래에서 애니메이션 시작 선택
6. 시간 기반 애니메이션 생성 및 이름 지정 (예: "아코디언 열림")
7. 애니메이션에 작업 추가: 크기 - 기타
8. 초기 상태로 설정
9. 높이 값 입력 (예: 80px)
10. 저장

토글 아이콘의 경우:

1. 드롭다운 요소 내 아이콘 선택
2. 아이콘 클래스 지정 (예: "아코디언 아이콘")
3. 부모 드롭다운 요소 선택
4. 상호작용 패널 열기
5. 드롭다운 열림 상호작용 선택
6. 시간 기반 애니메이션 편집 ("아코디언 열림")
7. 아이콘 선택 ("아코디언 아이콘")
8. 작업 추가: 회전 - 변형
9. 초기 상태로 설정
10. z-축을 0도로 설정
11. 저장

아코디언 열기 애니메이션

아코디언을 열고 아이콘을 회전시키려면:

1. 부모 드롭다운 요소 선택
2. 상호작용 패널 열기
3. 드롭다운 열림 상호작용 선택
4. 시간 애니메이션 편집 (“아코디언 열림”)
5. 기타에서 크기 액션 추가
6. 초기 상태 해제
7. 높이에 “auto” 입력
8. 아이콘 선택 (“아코디언 아이콘”)
9. 동일한 타임스탬프에서 변형 아래 회전 액션 추가
10. z-축을 180도로 설정
11. 저장

아코디언 닫기 애니메이션

닫기 애니메이션을 만들려면:

1. 부모 드롭다운 요소 선택 (“아코디언 항목”)
2. 상호작용 패널 열기
3. 드롭다운 열림 상호작용 선택
4. 메뉴 닫힘 아래 액션 선택
5. 애니메이션 시작 선택
6. 시간 애니메이션 생성 및 이름 지정 (예: “아코디언 닫힘”)
7. 기타에서 크기 액션 추가
8. 높이 값 입력 (예: 80px)
9. 아이콘 선택
10. 동일한 타임스탬프에서 변형 아래 회전 액션 추가
11. z-축을 0도로 설정
12. 저장

웹플로우 도움말로 돌아가기