Adobe Muse에서 탭 구분 및 아코디언 패널을 사용하여 일련의 관련 컨텐트를 표시하고 스타일 지정하는 방법을 배웁니다.

참고:

Adobe Muse는 더 이상 새로운 기능을 추가하지 않으며 2020년 3월 26일 목요일에 지원이 중단됩니다. 자세한 정보 및 지원은 Adobe Muse 서비스 종료 페이지를 참조하십시오.

탭 구분 패널 위젯 추가

  1. [위젯 라이브러리] 패널을 엽니다([창] > [위젯 라이브러리]). 패널을 확장하고 [탭 구분 패널] 위젯을 선택합니다. [위젯 라이브러리]의 위젯을 [디자인] 패널로 드래그합니다.

    [탭 구분 패널] 위젯을 페이지로 드래그하면 기본 서식이 표시됩니다.
    [탭 구분 패널] 위젯을 페이지로 드래그하면 기본 서식이 표시됩니다.

  2. 오른쪽에 있는 상단 탭을 세 번 클릭합니다. 첫 번째 클릭은 전체 탭 구분 패널, 두 번째 클릭은 탭 컨테이너, 세 번째 클릭은 오른쪽에 있는 탭을 선택합니다.

    선택 표시기를 통해 위젯의 어떤 하위 요소가 현재 선택되었는지 확인합니다. Delete(Mac) 또는 백스페이스(Windows) 키를 눌러 세 번째 탭을 삭제합니다. 이 변경 작업을 수행한 후에는 2개의 탭만 남아 있습니다. 페이지의 다른 곳을 클릭합니다.

  3. 위젯을 다시 한 번 클릭하여 전체 탭 구분 패널을 선택합니다. 핸들을 드래그하여 전체 위젯 크기를 폭 840 및 높이 645로 조정합니다. 핸들을 드래그할 때 나타나는 측정값을 참조할 수 있습니다.

    또한 [변형] 패널을 통해 W(폭) 및 H(높이) 필드의 값을 확인할 수 있습니다.

    폭 및 높이 필드를 검토하여 크기 조정된 위젯의 규격을 확인합니다.
    폭 및 높이 필드를 검토하여 크기 조정된 위젯의 규격을 확인합니다.

  4. [선택] 도구를 사용하여 [탭 구분 패널] 위젯을 페이지에 배치합니다(위쪽 부근 및 세로로 가운데 정렬).

  5. 컨트롤 패널에서 [고정] 인터페이스의 상단 가운데 위치를 클릭하여 [탭 구분 패널] 위젯을 고정시킵니다. 개체가 스크롤되지 않도록 고정하는 방법에 대한 자세한 내용은 이 링크를 참조하십시오.

  6. [탭 구분 패널] 위젯이 여전히 선택된 상태에서 왼쪽 탭을 클릭하여 탭 컨테이너(상단 두 탭을 모두 포함하는 요소)를 선택합니다. [선택] 도구를 사용하여 높이가 약 98픽셀이 될 때까지 가운데 핸들을 아래로 드래그합니다.

    [간격] 패널에서 아래 이미지에 나온 대로 다음 값을 설정합니다.

    • 왼쪽: 220
    • 오른쪽: 220
    • 아래쪽: 2
    • 간격 높이: 10
    [간격] 패널에서 탭 컨테이너에 대한 간격 값을 설정합니다.
    [간격] 패널에서 탭 컨테이너에 대한 간격 값을 설정합니다.

  7. 이러한 변경 작업을 수행한 후 [선택] 도구를 사용하여 탭 구분 패널의 상단이 머리글 사각형의 하단에 닿도록(둘 사이에 세로 공간 없이) 전체 [탭 구분 패널] 위젯을 페이지의 맨 위까지 드래그합니다.

    필요한 경우 확대하여 두 요소가 어떻게 정렬되었는지 자세히 확인할 수 있습니다. 작업을 마쳤으면 확대/축소율을 다시 100%로 설정합니다.

탭 구분 패널 위젯 스타일 지정

이제 [탭 구분 패널] 위젯을 추가했으므로 다음 작업에서는 스타일을 업데이트하여 두 탭을 디자인합니다.

  1. 왼쪽 탭을 세 번 클릭하여 왼쪽 탭을 선택합니다. [상태] 패널을 열고 [표준] 상태를 선택합니다. [채우기] 메뉴를 사용하여 채우기 색상을 설정합니다. 획 두께를 0으로 설정합니다.

  2. [상태] 패널에서 [롤오버] 상태를 선택합니다. 탭의 롤오버 상태 채우기 색상을 571E00으로 설정합니다. 롤오버 상태에 대한 채우기 색상을 설정할 경우 마우스 누름 상태도 자동으로 업데이트됩니다.

    [활성] 상태를 선택하고 활성 상태의 탭에도 동일한 채우기 색상을 적용합니다. 이제 표준 상태는 이전 단계에서 선택한 채우기 색상으로 채워지고 다른 세 가지 상태는 571E00으로 채워졌습니다.

  3. 왼쪽 탭을 다시 한 번 클릭하여 [레이블]을 선택합니다. 선택되면 선택 표시기에 레이블이라는 단어가 표시됩니다. [상태] 패널에서 [표준] 상태를 선택한 다음 [텍스트] 패널을 사용하여 아래 이미지에 나온 대로 다음 특성을 설정합니다.

    • 웹 글꼴: Kaushan Script(또는 사용자가 원하는 스크립트 글꼴)
    • 글꼴 크기: 26색상: #70909D(이 색상 이름을 blue-menu 등으로 바꿀 수 있음)
    • 행간: 120%
    • 정렬: 가운데 맞춤
    [텍스트] 패널에서 설정을 업데이트하여 레이블 텍스트 스타일을 지정합니다.
    [텍스트] 패널에서 설정을 업데이트하여 레이블 텍스트 스타일을 지정합니다.

  4. 레이블이 여전히 선택된 상태에서 [단락 스타일] 패널의 아래쪽에 있는 [새 스타일] 단추를 클릭합니다. 필요할 때마다 한 번의 클릭으로 이 서식을 다시 적용하려면 이 새 단락 스타일의 이름을 바꿉니다. 예를 들어, head-tabs로 바꿉니다.

  5. [상태] 패널을 보면 표준 상태가 선택되었을 때 레이블에 적용한 서식이 롤오버 및 마우스 누름 상태에도 모두 적용되어 있습니다. [활성] 상태를 선택한 다음 head-tabs 단락 스타일을 다시 클릭하여 활성 상태에 서식을 적용합니다. 이제 두 탭의 모든 상태에 대한 스타일이 지정되었습니다.

    [표준] 상태를 다시 선택합니다.

  6. [텍스트] 도구를 사용하여 모든 탭에 있는 레이블 텍스트를 선택하고 적절한 레이블 이름을 입력합니다.

  7. 왼쪽 탭을 선택하고 [상태] 패널을 보면 각 탭 및 레이블에 적용된 최종 서식을 확인할 수 있습니다. 오른쪽 탭을 클릭하면 각 탭의 텍스트 컨텐트를 제외하고 상태가 동일하게 나타납니다.

    Adobe Muse의 [상태] 패널에서 각 탭의 서식을 검토합니다.
    [상태] 패널에서 각 탭의 서식을 검토합니다.

탭 구분 패널 위젯의 컨텐트 영역에 텍스트 프레임 추가

  1. 서로 다른 레이블이 지정된 서로 다른 두 탭 사이를 약간의 시간을 두고 앞뒤로 클릭합니다. 두 탭의 자리 표시자 텍스트는 서로 다르므로 한 컨테이너가 표시되면 다른 컨테이너는 숨겨진다는 것을 알 수 있습니다.

  2. 위젯에서 오른쪽 탭을 클릭합니다. 오른쪽 탭이 선택되면 해당하는 컨텐트 영역이 탭 아래에 표시됩니다. 이 동작은 [디자인] 보기에서 페이지를 편집할 때 및 라이브 웹 사이트에서 모두 발생하는 동일한 동작입니다. 이 경우 단일 페이지에 더 많은 컨텐트를 효율적으로 표시할 수 있으므로 [탭 구분 패널] 위젯이 매우 유용하게 되는 것입니다.

  3. 탭에 대한 [컨텐트 영역]을 선택합니다. 선택되면 선택 표시기에 컨텐트 영역이라는 단어가 표시됩니다. 자리 표시자 이미지 파일을 선택하고 Delete(Mac) 또는 백스페이스(Windows) 키를 눌러 삭제합니다.

  4. [텍스트] 도구를 사용하여 기존 자리 표시자 텍스트 머리글을 선택합니다. 볼드체 머리글 텍스트인 Mauris sit amet를 선택하고 삭제합니다.

  5. 잠시 Adobe Muse에서 바탕 화면으로 전환합니다. 샘플 파일 폴더를 열고 text-about-ourstory.txt라는 파일을 찾습니다. 파일을 두 번 클릭하여 텍스트 편집기에서 엽니다. 페이지의 첫 부분인 ... crafted through years of baking for friends and family까지 복사합니다.

  6. Muse로 돌아갑니다. [텍스트] 도구를 사용하여 기존 자리 표시자 텍스트를 선택합니다. 복사한 텍스트 컨텐트를 텍스트 프레임에 붙여 넣습니다. 추가로 한 줄을 남겨 두고 텍스트 프레임의 맨 위로 돌아갑니다.

  7. 텍스트 프레임이 선택된 상태에서 [텍스트] 패널을 사용하여 텍스트 서식 지정 설정을 선택합니다. 예를 들어, 다음 설정을 선택할 수 있습니다.

    • 글꼴: Droid Serif
    • 글꼴 크기: 14
    • 색상: #222222
    • 정렬: 왼쪽 맞춤
    • 행간: 120%
  8. 텍스트가 여전히 선택된 상태에서 [단락 스타일] 패널의 아래쪽에 있는 [새 스타일] 단추를 클릭합니다. 새 단락 스타일을 두 번 클릭하고 이름을 바꿉니다. 예를 들면, body로 바꿉니다. 그러면 동일한 서식을 다른 텍스트 컨텐트에 다시 적용하기가 쉬워집니다.

  9. [색상 견본] 패널에서 색상 값 #222222를 두 번 클릭하고 이 색상으로 이름을 바꿉니다. 예를 들면, katieblack으로 바꿉니다.

  10. [컨트롤] 패널에서 텍스트 필드의 획 색상을 #222222(katieblack)로 설정하고 획 두께를 5픽셀로 설정합니다.

  11. [채우기] 메뉴를 사용하여 텍스트 필드의 채우기 색상을 연한 베이지색(#F8F3E2)으로 설정합니다. [이미지] 섹션 옆에 있는 폴더를 클릭하고 샘플 파일 폴더에 있는 bg-texture.png라는 파일을 찾아 선택합니다. [맞춤] 메뉴를 [바둑판식 배열]로 설정합니다.

  12. [간격] 패널에서 왼쪽 및 오른쪽 간격을 설정합니다. 예를 들어, 왼쪽 간격을 24, 오른쪽 간격을 15로 설정할 수 있습니다.

    간격 값을 설정하여 붙여 넣은 텍스트 복사본 주위에 시각적 공간을 만듭니다.
    간격 값을 설정하여 붙여 넣은 텍스트 복사본 주위에 시각적 공간을 만듭니다.

  13. 다음은 각 탭에 해당하는 각 컨텐트 영역 컨테이너에 컨텐트를 추가할 것입니다.

    [선택] 도구를 사용하여 텍스트 필드의 크기를 조정합니다. 컨테이너의 왼쪽으로 드래그한 다음 핸들을 사용하여 사용 가능한 컨텐트 영역 공간의 약 절반까지 폭을 확장합니다(약 390픽셀 폭 x 381픽셀 높이).

탭 구분 패널에서 텍스트 프레임 복제

다음은 기존 텍스트 프레임을 복제하여 컨텐트 영역의 오른쪽을 채우는 두 번째 텍스트 프레임을 만들 것입니다.

  1. [선택] 도구를 사용하여 텍스트 프레임을 선택합니다. Option(Mac) 또는 Alt(Windows) 키를 누른 상태에서 텍스트 프레임의 복제본을 컨텐트 영역의 오른쪽으로 드래그합니다(아래 이미지 참조).

    나타나는 정렬 안내선을 사용하여 오른쪽 텍스트 프레임이 왼쪽 텍스트 프레임과 가로로 정렬되는지 확인합니다.

    기존 텍스트 프레임을 복제하여 오른쪽에 두 번째 열을 만듭니다.
    기존 텍스트 프레임을 복제하여 오른쪽에 두 번째 열을 만듭니다.

  2. 잠시 Muse에서 탭 구분 패널의 컨텐트가 들어 있는 텍스트 편집 프로그램으로 전환합니다. 복제 탭에 붙여 넣으려는 컨텐트를 복사합니다.

  3. Muse로 돌아옵니다. 복제된 오른쪽 텍스트 프레임에 있는 기존 텍스트를 모두 삭제합니다. 클립보드에서 복사한 새 텍스트 컨텐트를 붙여 넣습니다.

  4. 필요에 따라 [선택] 도구를 사용하여 원하는 위치의 컨텐트 영역 내에서 가운데에 정렬되도록 두 텍스트 프레임을 배치합니다.

  5. 텍스트 프레임이 여전히 선택된 상태에서 Esc 키를 한 번 눌러 복제된 탭의 [컨텐트 영역]을 선택합니다. 획 두께를 0으로 설정하고 채우기 색상을 [없음]으로 설정합니다.

텍스트 프레임 복사가 거의 완료되었습니다. 마지막 작업에서는 왼쪽 텍스트 프레임의 텍스트 내부를 감싸는 작은 이미지를 추가할 것입니다.

아코디언 패널 작업

[아코디언 패널] 위젯은 많은 컨텐트를 화면의 작은 영역에 맞추어 넣으려는 경우 유용합니다. 축소 및 확장 동작을 통해 방문자가 레이블 패널을 클릭하면 해당하는 컨텐트 영역이 나타나는 것을 볼 수 있습니다. 데스크톱 사이트는 물론 [아코디언 패널] 위젯은 모바일 레이아웃으로 컨텐트를 표시하는 데도 사용됩니다.

이 단원에서는 사이트의 개별 페이지에 컨텐트를 추가하는 방법을 설명합니다. 여기에서 사용할 것은 아코디언이라는 또 다른 유형의 위젯입니다. 패널 위젯(아코디언 위젯과 탭 구분 패널 위젯)을 사용하면 실제로 차지하는 화면 크기를 줄이면서도 더 많은 컨텐트를 표시할 수 있어 여러 모로 유용합니다.

  1. [디자인 보기]에서 프로젝트를 열고 편집을 시작합니다.

  2. [파일] > [배치]를 선택합니다. [가져오기] 대화 상자에서 에셋이 있는 폴더로 이동하고 필요한 이미지 파일을 선택합니다. [선택]을 클릭한 후 페이지 상단을 한 번 클릭하여 이 이미지를 원래 크기로 페이지에 머리글 텍스트처럼 배치합니다. 이 머리글 아래에 아코디언 위젯이 추가됩니다.

웹 페이지에 아코디언 추가

  1. [위젯 라이브러리]를 엽니다. ([창] > [위젯 라이브러리]를 선택하여 이 라이브러리를 열 수 있습니다. [위젯 라이브러리]가 이미 열려 있으면 고정된 패널 모음에서 상단 탭을 클릭하여 위젯 라이브러리를 활성화합니다.)

  2. [패널]을 클릭하여 패널 위젯의 목록을 확장합니다. 아코디언 위젯을 선택합니다. 아코디언 위젯을 페이지 위로 드래그하여 페이지 컨텐트 영역의 왼쪽 상단에 배치합니다.

    Adobe Muse 페이지에서 아코디언 위젯을 끌어다 놓습니다.
    페이지에서 아코디언 위젯을 끌어다 놓습니다.

  3. [선택] 도구로 위젯의 여러 구성 요소를 선택해 보십시오. 전체 위젯을 선택하면 컨트롤 패널의 왼쪽 위 가장자리에 있는 선택 표시자에 "위젯"이라는 단어가 표시됩니다. 마우스 단추를 다시 클릭하여 컨테이너, 텍스트 프레임 등을 선택하면 그에 맞춰 선택 표시자에 표시되는 내용이 바뀌는 것을 알 수 있습니다. 이와 같이 선택 표시자를 확인하면 현재 선택한 것이 위젯의 어느 부분인지 쉽게 알 수 있습니다.

    위젯의 요소를 선택 취소하려면 Esc 키를 눌러 현재 선택 항목을 한 수준 뒤로 되돌리거나 이 키를 여러 번 눌러 중첩 요소 밖으로 완전히 벗어날 수 있습니다. 또는 페이지에서 위젯 바깥쪽의 다른 부분을 클릭하여 선택을 취소할 수도 있습니다.

    아코디언 위젯에는 기본적으로 패널 두 개가 있습니다. 위쪽 패널에는 "Lorem 1"이라는 자리 표시자 탭 이름이 표시되고, 아래쪽 패널에는 "Ipsum 2"라는 자리 표시자 탭 이름이 표시됩니다.

  4. 파란색의 둥근 화살표 아이콘을 클릭하여 [위젯 옵션] 대화 상자를 엽니다. [함께 편집] 옵션이 선택되었는지 확인합니다. 이 옵션을 활성화한 상태에서 아코디언 위젯의 탭 이름 하나를 변경하면 그 변경 내용이 다른 모든 탭에도 함께 적용됩니다.

    아코디언 위젯의 [옵션] 패널에서 [함께 편집]이 선택되어 있는지 확인합니다.
    아코디언 위젯의 [옵션] 패널에서 [함께 편집]이 선택되어 있는지 확인합니다.

  5. [선택] 도구로 위젯을 한 번 클릭하여 선택한 다음 오른쪽 핸들을 오른쪽 방향으로 드래그하여 위젯의 폭을 확장합니다. 아래 이미지를 참조하여 두 개의 열이 모두 표시될 정도로 충분히 넓게 확장하십시오.

    위젯의 핸들을 드래그하여 위젯을 두 개의 열까지 확장합니다..
    위젯을 선택한 채 오른쪽 핸들을 드래그하여 두 개의 열이 모두 표시될 정도로 위젯을 확장합니다.

  6. 위젯의 아래쪽, 즉 "Ipsum 2" 패널 아래 있는 플러스 기호(+)를 클릭하여 세 번째 패널을 추가합니다. 세 번째 패널에 "Ipsum 3" 자리 표시자 탭 이름이 표시됩니다.

다음 단원에서는 아코디언 위젯의 패널에 텍스트 컨텐트를 배치하여 패널을 채우는 방법을 살펴볼 것입니다. 여기에서는 아코디언 위젯의 첫 번째 패널 위에 표시되는 맨 위쪽 탭 이름을 변경하는 방법부터 먼저 살펴보겠습니다.

아코디언 패널에 텍스트 추가

  1. [선택] 도구를 사용하여 현재 "Lorem 1"이라고 표시되어 있는 맨 위쪽 탭의 텍스트 프레임을 선택합니다. "Lorem 1"을 한 번 클릭하여 전체 위젯을 선택하고 맨 위쪽 탭에 상응하는 컨테이너를 확장한 다음 "Lorem 1"이라는 텍스트를 클릭하여 텍스트 프레임을 선택합니다. 텍스트 프레임을 선택하면 선택 표시자에 "텍스트 프레임"이라는 단어가 표시됩니다.

  2. 자리 표시자 텍스트 "Lorem 1"을 두 번 클릭한 다음 이를 편집하고 원하는 텍스트를 입력합니다.

  3. 첫 번째 탭 아래 있는 좀 더 넓은 면적의 연한 회색 컨테이너를 선택합니다. [텍스트] 도구로 이 연한 회색 컨테이너를 드래그하여 텍스트 프레임을 엽니다.

  4. 새 텍스트 프레임에서 머리글 텍스트를 입력합니다.

아코디언의 맨 위쪽 탭을 배경과 이미지로 채우기

  1. 머리글을 표시하는 아코디언 위젯의 맨 위쪽 탭을 선택합니다.

  2. 파란색의 둥근 화살표 단추를 클릭하여 [옵션] 메뉴를 엽니다. [함께 편집] 옵션의 선택을 취소합니다. [옵션] 메뉴 바깥쪽을 클릭하여 이 메뉴를 닫습니다.

  3. 맨 위쪽 탭을 두 번 클릭하여 선택 표시자에 "텍스트 프레임"이라는 단어가 표시되게 합니다. 맨 위쪽 탭의 텍스트 프레임을 선택한 상태에서 컨트롤 패널의 [채우기] 링크를 클릭하여 [채우기] 메뉴를 엽니다. 색상 피커를 클릭하고 배경 채우기 색상을 기본값은 짙은 회색 대신 "없음"으로 설정합니다.

  4. [이미지] 섹션에 있는 폴더 아이콘을 클릭하여 [가져오기] 대화 상자를 엽니다. 에셋 폴더로 이동하고 추가하려는 이미지를 선택합니다.

  5. [간격] 패널을 엽니다. [안쪽 여백]: L(왼쪽) 섹션에서 위쪽 화살표를 계속 눌러 이 탭의 배경 이미지 중앙에 텍스트가 배치되도록 머리글 앞의 간격을 넓힙니다.

    아코디언의 간격 구성 Adobe Muse의 위젯
    [간격] 패널을 사용하여 안쪽 여백(왼쪽)을 늘리고 아코디언의 가운데에 텍스트를 배치합니다.

이렇게 해서 아코디언 위젯의 첫 번째 탭이 완성되었습니다.

첫 번째 탭을 편집할 때 [함께 편집] 설정을 선택 취소하는 경우 다른 탭에는 변경 사항이 표시되지 않습니다. 다른 탭은 [아코디언] 패널에서 별도로 스타일 지정해야 합니다.

아코디언 위젯 회전

기본적으로 [아코디언 패널] 위젯은 세로 방향으로 위쪽에 레이블 패널, 아래쪽에 컨텐트 영역을 표시하도록 설정됩니다.

기본적으로 Adobe Muse의 아코디언 위젯은 세로로 표시됩니다.
[아코디언 패널] 위젯을 페이지에 추가할 경우 세로로 표시됩니다.

[아코디언] 위젯을 사용하여 가로 방향 슬라이더를 만들려면 다음 단계를 수행하십시오.

  1. [디자인] 보기에서 [위젯 라이브러리]를 열고 [패널] 섹션을 확장합니다.

  2. [패널] 섹션에서 [아코디언] 옵션을 선택하고 페이지로 드래그합니다.

  3. [선택] 도구를 사용하여 한 번 클릭하고 전체 위젯을 선택합니다. 컨트롤 패널의 상단 왼쪽에 있는 [선택 표시자]에 [아코디언]이라고 표시됩니다.

  4. Shift 키를 누른 상태에서 회전하면 비율이 제한되어 위젯을 45°씩 이동할 수 있습니다. 위젯을 회전할 때 현재 회전 값을 표시하는 툴팁이 나타납니다.

    아코디언을 회전하도록 선택하는 방법에 따라 위젯을 -90° 또는 +90°로 회전합니다.
    아코디언을 회전하도록 선택하는 방법에 따라 위젯을 -90° 또는 +90°로 회전합니다.

  5. 위젯을 회전한 후 [미리 보기] 링크 또는 [브라우저에서 페이지 미리 보기]를 클릭하면 아코디언이 예상한 대로 패널을 확장/축소한다는 것을 알 수 있습니다. 레이블 컨테이너가 클릭할 때 해당하는 컨텐트 영역을 표시하도록 작성되었는지 여부를 확인합니다.

    이제 레이블 및 컨텐트 영역 컨테이너를 옆으로 표시하는 대신 "똑바른" 방향의 컨텐트로 채우는 일만 남았습니다.

    다음 단계를 수행하여 컨텐트 영역 내에 텍스트 컨텐트를 표시하십시오. 위에서 설명한 동일한 기법을 사용하여 컨텐트 영역 컨테이너의 텍스트 필드를 회전시킵니다.

     

  6. 컨텐트 영역의 기본 텍스트를 두 번 클릭합니다. 처음에는 전체 [아코디언] 위젯이 선택되고 그 다음에는 컨텐트 영역 컨테이너가 선택됩니다. 컨텐트 영역이 선택된 상태에서 [선택] 도구를 사용하여 크기 조정 핸들을 클릭하고 드래그하여 컨텐트 영역의 크기를 확대합니다.

  7. 컨텐트 영역이 여전히 선택된 상태에서 다시 한 번 클릭하여 컨텐트 영역 내의 텍스트 프레임을 선택합니다. 회전 커서가 표시될 때까지 커서를 텍스트 프레임 모퉁이 중 하나의 부근으로 가져갑니다. Shift 키를 누른 상태에서 텍스트 프레임을 다른 위젯과 동일한 90°로 회전합니다.

    컨텐트 영역에 텍스트를 표시하려는 경우 기존 자리 표시자 텍스트 컨텐트를 회전시킵니다.
    컨텐트 영역에 텍스트를 표시하려는 경우 기존 자리 표시자 텍스트 컨텐트를 회전시킵니다.

  8. 텍스트 프레임을 회전한 후 [선택] 도구를 사용하여 컨텐트 영역 내에서 위치를 조정합니다. [텍스트] 도구를 사용하여 자리 표시자 텍스트를 표시하고자 하는 실제 텍스트로 바꾼 다음 컨트롤 패널 및 [텍스트] 패널의 텍스트 서식 지정 옵션을 사용하여 텍스트 스타일을 지정합니다(또는 문단 스타일을 적용하여 모양을 업데이트합니다).

  9. 이미지 배치, 사각형 그리기 또는 HTML 포함 등의 작업을 통해 컨텐트 영역 컨테이너를 원하는 대로 채웁니다. 회전된 컨테이너 내에서 자동으로 똑바르게 배치되므로 이 컨텐트를 회전할 필요는 없습니다.

레이블 컨테이너의 텍스트 업데이트

레이블 컨테이너의 텍스트를 업데이트하기 위한 여러 가지 옵션이 있습니다.

레이블이 짧고 텍스트를 "옆으로" 유지하려는 경우(예: 책장에 책이 꽂힌 모양) [텍스트] 도구를 사용하여 기존 자리 표시자 텍스트를 선택하고 원하는 레이블을 입력할 수 있습니다(아래 이미지 참조).

아코디언 위젯의 [텍스트] 도구를 사용하여 레이블 텍스트를 편집합니다.
아코디언 위젯의 [텍스트] 도구를 사용하여 레이블 텍스트를 편집합니다.

텍스트 레이블을 사용하지 않으려는 경우 레이블 컨테이너의 기존 자리 표시자 텍스트를 삭제한 다음 [컨트롤] 패널 또는 [채우기] 패널([상태] 패널과 함께)의 서식 지정 옵션을 사용하여 각 레이블에 다른 색상을 적용하면 됩니다(아래 이미지 참조). 각 레이블 컨테이너의 모양을 개별적으로 업데이트하려면 파란색 화살표 단추를 클릭하여 [옵션] 메뉴에 액세스하고 [함께 편집] 옵션을 해제합니다.

[채우기] 메뉴 및 텍스트 서식 지정 옵션을 사용하여 레이블 컨테이너 및 해당하는 텍스트 컨텐트의 색상을 변경합니다.
[채우기] 메뉴 및 텍스트 서식 지정 옵션을 사용하여 레이블 컨테이너 및 해당하는 텍스트 컨텐트의 색상을 변경합니다.

다른 옵션은 이미지 편집 프로그램을 사용하여 레이블 패널에 삽입되는 이미지를 만드는 것입니다. 이미지를 페이지에 배치하고 잘라낸 다음 텍스트 도구로 레이블 텍스트를 선택하고 이미지를 레이블 컨테이너에 붙여 넣습니다. 원할 경우 이미지에는 세로 방향 텍스트가 포함될 수 있습니다(아래 이미지 참조).

세로 방향 텍스트가 포함된 이미지를 레이블 컨테이너에 삽입합니다.
세로 방향 텍스트가 포함된 이미지를 레이블 컨테이너에 삽입합니다.

아코디언 패널에서 기준점 링크 추가

아코디언 패널에서 기준점 링크를 추가하여 어떤 페이지 요소든 아코디언 위젯에 연결할 수 있습니다. 아코디언 위젯에 기준점 링크를 추가하는 방법에 대해 알아보세요.

  1. 기준점 링크를 추가할 아코디언 위젯을 선택합니다. 기준점 링크를 추가하려는 탭을 클릭합니다.

  2. 기준점 도구를 클릭해 Place Gun에서 기준점 링크를 로드합니다.

    [도구] 패널에서 기준점 도구를 선택합니다.
    [도구] 패널에서 기준점 도구를 선택합니다.

  3. 아코디언 위젯에서 기준점 링크를 배치합니다.

    기준점 이름 변경 팝업이 표시됩니다. 기준점에 알맞은 이름을 입력하고 [확인]을 클릭합니다.

    아코디언 위젯에서 기준점 링크 배치
    아코디언 위젯에서 기준점 링크 배치

    웹 사이트의 어떤 페이지에서든 이 기준점을 모든 페이지 요소에 연결할 수 있습니다.

  4. 이 기준점에 페이지 요소를 연결하려면 연결할 페이지 요소를 선택합니다. 상단의 하이퍼링크 드롭다운에서 생성한 기준점을 선택합니다.

    라이브 사이트에서 페이지 요소를 클릭할 때마다 페이지에 기준점 링크를 배치한 아코디언 탭이 표시됩니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책