[삽입] > [Spry] > [Spry 아코디언]을 선택합니다.
마지막 업데이트 날짜
2022년 11월 28일
참고:
Spry 위젯은 Dreamweaver CC 이상에서 jQuery 위젯으로 바뀌었습니다. 페이지의 기존 Spry 위젯을 수정할 수는 있지만 새 Spry 위젯을 추가할 수는 없습니다.
아코디언 위젯 정보
아코디언 위젯은 많은 양의 내용을 작은 공간에 저장할 수 있는 축소 가능한 패널의 집합입니다. 사이트 방문자는 패널의 탭을 클릭하여 아코디언에 저장된 내용을 숨기거나 표시할 수 있습니다. 아코디언의 패널은 방문자가 각기 다른 탭을 클릭할 때마다 그에 맞춰 확장 또는 축소됩니다. 아코디언에서는 한 번에 한 개의 내용 패널만 열어 표시할 수 있습니다. 다음은 첫 번째 패널이 확장된 아코디언 위젯의 예입니다.
A. 아코디언 패널 탭 B. 아코디언 패널 내용 C. 열린 아코디언 패널
아코디언 위젯의 기본 HTML은 모든 패널을 포함하는 가장 바깥쪽 div 태그, 각 패널에 대한 div 태그, 각 패널에 대한 태그 안에 포함된 머리글 div 및 내용 div로 구성됩니다. 아코디언 위젯에 포함될 수 있는 개별 패널의 수에는 제한이 없습니다. 문서의 헤드 내부와 아코디언의 HTML 마크업 아래에 있는 script 태그도 아코디언 위젯의 HTML에 포함됩니다.
아코디언 위젯의 코드에 대한 자세한 분석을 비롯하여 아코디언 위젯이 작동하는 방식에 대한 포괄적인 설명은 www.adobe.com/go/learn_dw_spryaccordion_kr을 참조하십시오.
아코디언 위젯을 사용하는 방법에 대한 자습서는 www.adobe.com/go/vid0167_kr을 참조하십시오.
아코디언 위젯 삽입 및 편집
아코디언 위젯 삽입
참고:
[삽입] 패널에서 [Spry] 범주를 사용하여 아코디언 위젯을 삽입할 수도 있습니다.
아코디언 위젯에 패널 추가
-
문서 창에서 아코디언 위젯을 선택합니다.
-
속성 관리자([윈도우] > [속성])에서 [패널] 메뉴의 플러스(+) 버튼을 클릭합니다.
-
(선택 사항) 디자인 뷰에서 패널의 텍스트를 선택하고 해당 텍스트를 변경하여 패널의 이름을 바꿉니다.
아코디언 위젯에서 패널 삭제
-
문서 창에서 아코디언 위젯을 선택합니다.
-
속성 관리자([윈도우] > [속성])의 [패널] 메뉴에서 삭제할 패널의 이름을 선택하고 마이너스(-) 버튼을 클릭합니다.
편집을 위해 패널 열기
-
다음 중 하나를 수행합니다.
디자인 뷰에서 패널의 탭 위로 마우스 포인터를 가져가 패널을 열고 탭의 오른쪽에 나타나는 눈 모양 아이콘을 클릭합니다.
문서 창에서 아코디언 위젯을 선택한 다음 속성 관리자([윈도우] > [속성])의 [패널] 메뉴에서 패널의 이름을 클릭하고 편집합니다.
패널 순서 변경
-
문서 창에서 아코디언 위젯을 선택합니다.
-
속성 관리자([윈도우] > [속성])에서 이동할 아코디언 패널의 이름을 선택합니다.
-
위쪽 또는 아래쪽 화살표를 클릭하여 패널을 위아래로 이동합니다.
아코디언 위젯 사용자 정의
속성 관리자를 사용하면 아코디언 위젯을 간단히 편집할 수 있지만 사용자 정의된 스타일 지정 작업은 이 관리자에서 지원하지 않습니다. 아코디언 위젯에 대한 CSS 규칙을 변경하고 원하는 대로 스타일 지정된 아코디언을 만들 수 있습니다.
아코디언 위젯의 색상 변경 방법은 David Powers의 Spry 탭 패널, 아코디언 및 축소 가능 패널 스타일 지정 빠른 안내서를 참조하십시오.
더 구체적인 스타일 지정 작업의 목록은 www.adobe.com/go/learn_dw_spryaccordion_custom_kr을 참조하십시오.
다음 항목의 모든 CSS 규칙은 SpryAccordion.css 파일에 있는 기본 규칙을 가리킵니다. Spry 아코디언 위젯을 만들 때마다 Dreamweaver를 통해 SpryAccordion.css 파일이 해당 사이트의 SpryAssets 폴더에 저장됩니다. 또한 이 파일의 주석에는 위젯에 적용되는 다양한 스타일에 대한 정보가 포함되어 있으므로 이 파일을 참조하여 필요한 정보를 얻을 수도 있습니다.
참고:
CSS 파일에서 직접 아코디언 위젯의 규칙을 간단히 편집할 수 있지만 [CSS 스타일] 패널을 사용하여 아코디언의 CSS를 편집할 수도 있습니다. [CSS 스타일] 패널을 사용하면 위젯의 각 부분에 할당된 CSS 클래스를 쉽게 찾을 수 있습니다. 이는 패널의 [현재] 모드를 사용하는 경우에 특히 유용합니다.
아코디언 위젯 텍스트 스타일 지정
전체 아코디언 위젯 컨테이너의 속성을 설정하거나 위젯 구성 요소의 속성을 개별적으로 설정하여 아코디언 위젯의 텍스트 스타일을 지정할 수 있습니다.
-
아코디언 위젯의 텍스트 스타일을 변경하려면 다음 표를 사용하여 해당 CSS 규칙을 찾은 다음 원하는 텍스트 스타일 속성과 값을 추가합니다.
변경할 텍스트
관련 CSS 규칙
추가할 속성과 값의 예
전체 아코디언의 텍스트(탭 및 내용 패널 모두 포함)
.Accordion 또는 .AccordionPanel font: Arial; font-size:medium;
아코디언 패널 탭의 텍스트만
.AccordionPanelTab font: Arial; font-size:medium;
아코디언 내용 패널의 텍스트만
.AccordionPanelContent font: Arial; font-size:medium;
아코디언 위젯 배경색 변경
-
아코디언 위젯의 각 부분에 대한 배경색을 변경하려면 다음 표를 사용하여 해당 CSS 규칙을 찾은 다음 배경색 속성과 값을 추가하거나 변경합니다.
변경할 위젯 부분
관련 CSS 규칙
추가 또는 변경할 속성과 값의 예
아코디언 패널 탭의 배경색
.AccordionPanelTab background-color: #CCCCCC;(기본값)
아코디언 내용 패널의 배경색
.AccordionPanelContent background-color: #CCCCCC;
열려 있는 아코디언 패널의 배경색
.AccordionPanelOpen .AccordionPanelTab background-color: #EEEEEE;(기본값)
마우스 포인터가 놓인 패널 탭의 배경색
.AccordionPanelTabHover color: #555555;(기본값)
마우스 포인터가 놓인 열려 있는 패널 탭의 배경색
.AccordionPanelOpen .AccordionPanelTabHover color: #555555;(기본값)
아코디언 폭 제한
기본적으로 아코디언 위젯은 사용 가능한 공간을 채우도록 확장됩니다. 그러나 아코디언 컨테이너의 폭 속성을 설정하여 아코디언 위젯의 폭을 제한할 수도 있습니다.
-
SpryAccordion.css 파일을 열고 .Accordion CSS 규칙을 찾습니다. 이는 아코디언 위젯의 기본 컨테이너 요소에 대한 속성을 정의하는 규칙입니다.참고:
아코디언 위젯을 선택하고 [CSS 스타일] 패널([윈도우] > [CSS 스타일])을 조회하여 이 규칙을 찾을 수도 있습니다. 패널이 [현재] 모드로 설정되어 있어야 합니다.
-
폭 속성과 값을 규칙에 추가합니다(예: width: 300px;).
