서식 있는 컨텐츠 편집기로 아코디언 추가

  • 릴리스 버전: Australia
  • 업데이트 날짜 2026년 03월 12일
  • 소요 시간: 5분

    • 캔버스에 아코디언 구성요소를 추가하여 확장하거나 축소할 수 있는 콘텐츠를 디자인합니다.

    시작하기 전에

    필요한 역할: sn_cd.content_manager

    새 컨텐츠 양식 필드에 내용을 입력합니다. 서식 있는 콘텐츠 생성 문서를 참조하십시오.

    모듈이나 열을 사용하여 페이지 레이아웃을 만듭니다.

    프로시저

    1. 새 컨텐츠 양식의 디자인 탭에서 편집기 열기 버튼을 선택하여 캔버스로 이동합니다.
    2. 아코디언 구성요소를 캔버스로 끌어서 놓습니다.
    아코디언 구성요소 동작 및 토글/버튼 디자인을 구성하고 더 많은 패널을 추가합니다.
    1. 다음으로 이동 설정 > 속성 아코디언 구성요소를 구성하는 섹션:
      표 1. 아코디언 속성 설정
      설정 필드 설명
      패널 동작
      로드 시 첫 번째 패널 확장 이 옵션을 선택하면 첫 번째 패널의 컨텐츠가 표시된 상태로 아코디언이 로드됩니다.

      이 옵션을 선택 취소하면 모든 패널이 닫힌 상태에서 아코디언이 로드됩니다.
      여러 패널 확장 허용 이 옵션을 선택하면 직원이 한 번에 여러 패널을 확장할 수 있습니다.

      이 옵션을 선택 취소하면 직원이 패널을 확장하면 현재 확장된 패널이 자동으로 닫힙니다.
      버튼 디자인
      스타일 직원이 패널을 확장하고 닫을 때 클릭하는 아코디언 버튼 또는 토글의 스타일을 선택합니다.
      크기 위쪽 및 아래쪽 화살표를 사용하여 버튼의 크기를 조정합니다.
      배치 버튼이 아코디언 제목의 왼쪽 또는 오른쪽에 표시되는지 여부를 지정합니다.
      색상 색상 선택기(체크 무늬 사각형)를 사용하여 색상을 선택하거나 표시할 색상을 나타내는 색상 코드를 입력합니다.

      모든 HTML 색상이 지원됩니다. 자세한 내용은 HTML 색 이름을 참조하십시오.
    2. 아코디언에 패널을 더 추가하려면 다음에 있는 항목 추가를 클릭합니다. 설정 > 속성.
    배경색 또는 테두리와 같은 아코디언 스타일을 구성합니다. 외부 구성요소 컨테이너(아코디언)를 클릭하여 모든 패널을 한 번에 구성합니다. 개별 패널을 구성하려면 해당 컨테이너를 클릭합니다.
    1. 설정 패널로 이동하여 다음 스타일 설정을 구성합니다.
      표 2. 스타일 지정 설정
      설정 필드 설명
      스타일링
      배경색 색상 선택기(체크 무늬 사각형)를 사용하여 색상을 선택하거나 표시할 배경색을 나타내는 색상 코드를 입력합니다.

      모든 HTML 색상이 지원됩니다. 자세한 내용은 HTML 색 이름을 참조하십시오.
      고급 스타일
      너비 숫자를 입력하거나 셀의 오른쪽을 끌어서 값을 지정합니다.
      측정 단위 선택:
      • px: 픽셀
      • %: 백분율
      패딩 패딩은 콘텐츠와 요소의 테두리 사이의 공간입니다. 숫자를 입력하여 위쪽, 아래쪽, 오른쪽 또는 왼쪽 패딩 값을 지정합니다.
      마진 여백은 행과 다른 요소/캔버스 경계 사이의 공간입니다. 숫자를 입력하여 위쪽, 아래쪽, 오른쪽 또는 왼쪽 패딩 값을 지정합니다.
      테두리 버튼 바깥쪽 테두리를 편집합니다.
      주:
      테두리는 버튼 주위의 윤곽선입니다.

      너비: 위쪽 및 아래쪽 화살표를 사용하여 테두리의 너비를 조정합니다. 너비 및 높이와 마찬가지로 위쪽 및 아래쪽 화살표 왼쪽에 있는 아래쪽 화살표 키를 선택하여 원하는 측정 단위를 선택할 수 있습니다.

      스타일: 버튼 주변 테두리의 형식입니다. 드롭다운을 선택하여 버튼 주위에 원하는 테두리 유형을 선택합니다.

      색상: 버튼 주변 테두리의 색상입니다. 배경색을 선택하는 방식과 비슷한 색상표와 슬라이드 막대를 사용하여 버튼 색상을 선택합니다.
      테두리 반경 위쪽 및 아래쪽 화살표를 사용하여 테두리의 반경을 조정합니다. 너비 및 높이와 마찬가지로 위쪽 및 아래쪽 화살표 왼쪽에 있는 아래쪽 화살표 키를 선택하여 원하는 측정 단위를 선택할 수 있습니다.
    아코디언 제목 텍스트의 서식을 지정합니다.
    1. 아코디언 제목 텍스트의 서식을 지정하려면 아코디언 제목 컨테이너를 클릭하고 설정 > 스타일링 절.
      표 3. 아코디언 제목 스타일링 설정
      설정 필드 설명
      스타일링
      텍스트 스타일 미리 서식이 지정된 선택 항목을 선택하여 텍스트의 모양을 빠르게 변경할 수 있습니다. 다른 헤드라인이나 단락 스타일을 선택할 수 있습니다.

      헤드라인 1-6은 h1 - h6 HTML 태그에 해당합니다.
      텍스트 색상 이 드롭다운을 사용하여 텍스트 색상을 변경합니다.
      선택 항목은 다음과 같습니다.
      • 기본: 포털 테마에서 정의한 기본 색상입니다.
      • 음소거됨: 포털 테마에서 정의한 색상입니다.
      • 흰색: 텍스트 색상을 흰색으로 변경합니다. 흰색 이외의 배경색을 사용할 때 유용합니다.

      텍스트 색상은 텍스트 색상에 대해 미리 정의된 CSS 클래스를 할당합니다.
      표시 이미지 및 텍스트 구성요소와 같은 여러 구성요소의 모양을 동일한 열 내에서 구성합니다. 다음 옵션 중에서 선택합니다.
      • 상단 및 하단 (기본값): 이미지가 다른 구성요소 위에 나타납니다.
      • 나란히: 이미지가 옆에 다른 구성요소와 함께 나타납니다.
      주:
      최상의 결과를 얻으려면 구성요소에 대해 동일한 디스플레이를 설정하십시오. 예를 들어 열에 이미지와 텍스트 구성요소가 있고 이미지가 왼쪽에 표시되고 텍스트가 오른쪽에 표시되도록 하려면 두 구성요소의 표시 설정을 나란히로 변경합니다.
      정렬 텍스트의 가로 맞춤을 결정합니다. 다음 중에서 선택합니다.
      • 왼쪽 맞춤
      • 가운데 맞춤
      • 오른쪽 맞춤
      • 양쪽 여백에 맞춰 정렬(텍스트가 양쪽 여백에 맞춰짐)
      고급 스타일
      패딩 패딩은 콘텐츠와 요소의 테두리 사이의 공간입니다. 숫자를 입력하여 위쪽, 아래쪽, 오른쪽 또는 왼쪽 패딩 값을 지정합니다.
      마진 여백은 행과 다른 요소/캔버스 경계 사이의 공간입니다. 숫자를 입력하여 위쪽, 아래쪽, 오른쪽 또는 왼쪽 패딩 값을 지정합니다.
      글꼴 이름 문자를 렌더링하는 데 사용되는 글꼴 페이스를 정의합니다.

      드롭다운 화살표를 클릭하여 다른 글꼴을 선택합니다.
      글꼴 크기 글꼴 크기를 설정합니다.
      글꼴 가중치 텍스트가 굵게 또는 밝게 표시되는 정도를 결정합니다.

      드롭다운 화살표를 클릭하여 다른 가중치를 선택합니다.
      줄 높이 두 텍스트 줄 사이의 세로 거리를 설정합니다.
      글꼴 색상 포털 테마의 글꼴 색을 재정의합니다.

      색상을 선택하려면 16진수 코드를 입력하거나 색상 선택기(글꼴 색상 오른쪽의 회색 사각형)를 클릭하고 색상표에서 색상을 선택합니다.
    2. 패널에 이미지, 비디오, 텍스트 또는 링크를 추가하여 아코디언 콘텐츠를 구성합니다.
    3. 저장 또는 저장 후 완료를 선택합니다.
      저장을 선택하면 컨텐츠가 저장되고 서식 있는 컨텐츠 편집기 캔버스에 남아 있습니다. 저장 및 완료를 선택하면 기록이 저장되고 새 컨텐츠 양식으로 돌아갑니다.

    다음에 수행할 작업

    • (선택 사항) 콘텐츠를 번역합니다.

      컨텐츠의 언어 번역을 요청합니다. 자세한 내용은 콘텐츠 라이브러리의 다국어 지원 문서를 참조하십시오.

      주:
      콘텐츠 수정을 완료한 후에만 콘텐츠를 번역하십시오. 최상의 결과를 얻으려면 번역 후 구성요소를 추가 또는 제거하거나 서식을 변경하지 않는 것이 좋습니다.

      언어마다 서로 다른 형식의 서식 있는 콘텐츠를 만들려면 콘텐츠를 복제하고 필요한 경우 서식을 수정합니다. 그런 다음 대상을 사용하여 언어별로 사용자에게 콘텐츠를 타겟팅합니다. 대상 그룹 문서를 참조하십시오.

    • 게시 탭에서 컨텐츠를 미리 봅니다.
      주:
      콘텐츠 미리 보기는 콘텐츠의 모양에 대한 일반적인 아이디어를 제공하도록 설계되었습니다. 컨텐츠는 장치 해상도, 테마 차이 또는 모바일 앱 스타일 구성의 변화로 인해 게시 후 다르게 보일 수 있습니다.
    • 컨텐츠 제공 위치, 대상 그룹 및 사용 가능 컨텐츠에 대한 게시 계획 생성기간을 제어하도록 게시 계획을 구성합니다.