Studio 에디터: 표 추가 및 사용자 지정하기 | 도움말 센터

Studio 에디터: 표 추가 및 사용자 지정하기

5 분 분량

CMS(콘텐츠 관리 시스템)를 사용해 컬렉션 및 데이터세트를 유지 관리하고 있다면, 표를 추가해 데이터세트를 편리한 보기로 표시하세요. 동작 정의부터 레이아웃 및 디자인 개인화에 이르기까지, 클라이언트의 사이트에 완벽하게 어울리도록 표를 조정할 수 있습니다.

다음 지침을 참고하세요.

시작하기 전:

표에 표시할 콘텐츠 컬렉션을 추가 및 설정하세요.

요소 추가 패널에서 클라이언트의 사이트에 표를 추가하세요. 필요에 따라 사용자 지정할 수 있는 여러 사전 디자인된 표 중 선택할 수 있습니다. 그 다음, 속성 패널에서 표시하고자 하는 데이터세트를 선택하세요.

에디터로 이동합니다.
(아직 활성화하지 않은 경우) 코드 패널에서 코딩을 활성화합니다.
1. 왼쪽 패널에서 코드 아이콘을 클릭합니다.
2. 코딩 시작하기를 클릭합니다.
에디터 왼쪽에서 요소 추가를 클릭합니다.
레이아웃 도구를 클릭합니다.
표를 클릭합니다.
원하는 디자인을 페이지로 끌어다 놓습니다.
표를 콘텐츠 컬렉션에 연결합니다:
1. CMS에 연결 아이콘을 클릭합니다.
2. (속성 패널에서) 표시할 데이터세트를 선택합니다.
표 관리를 클릭해 표 단을 설정합니다.
- 순서 변경: 순서 변경 아이콘을 클릭해 위 또는 아래로 끌어다 놓습니다.
- 단 이름 변경: 해당 단에 마우스오버해 추가 작업 아이콘을 클릭한 후 라벨 편집을 선택합니다. 새 이름을 입력한 후 완료를 클릭합니다.
- 단 삭제: 해당 열에 마우스오버해 추가 작업 아이콘을 클릭한 후 삭제를 선택합니다.
- 연결 관리: 연결 관리를 클릭해 CMS 연결을 변경합니다. 그런 다음, 속성 패널의 연결 아래에서 관련 드롭다운을 클릭해 연결 및 링크를 편집합니다.

표 설정 패널에서 표 기능을 최적화하세요. 방문자가 표 셀 클릭 시 표시될 항목 및 링크가 열리는 방식을 선택하고, 날짜 형식을 설정하세요.

에디터로 이동합니다.
표 요소를 선택합니다.
설정 아이콘을 클릭해 다음 옵션 중에서 선택합니다.
- 선택 아이템 클릭 시: 변화없음, 행, 셀 중 방문자가 셀 클릭 시 표에서 선택되는 항목을 선택합니다.
- 링크 열기: 링크된 아이템을 새 창에서 열지 현재 창에서 열지 여부를 선택합니다.
- 날짜 형식: 날짜 입력란 유형을 연결한 경우, 날짜가 표시되는 형식을 선택합니다.

중단점 활용하기:

설정 패널에서 선택한 사항은 모든 중단점에 적용됩니다.

채우기 색상 및 투명도 조정부터 테두리, 모서리 및 음영 미세 조정에 이르기까지, 표의 시각적 표시를 완전히 제어할 수 있습니다. 텍스트 스타일과 서식을 개인화해 세련된 디자인을 완성할 수도 있습니다.

에디터로 이동합니다.
해당 표를 선택합니다.
에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.
디자인할 항목을 선택합니다.
- 채우기 색상 및 투명도: 표 여러 부분의 배경 색상 및 투명도를 선택합니다(예: 머리글 배경, 행 배경, 표 배경).
- 테두리: 표 테두리와 구분선의 색상, 크기, 너비를 설정합니다.
- 모서리: 반경(px)을 설정해 표 모서리를 더 둥글게 만듭니다.
- 음영: 선택한 색상, 각도, 투명도로 음영을 적용합니다.
- 텍스트: 표에 표시되는 모든 텍스트의 스타일을 지정하고 서식을 지정합니다(예: 머리글 텍스트, 행 텍스트).
(선택사항) 표의 링크가 마우스오버 시 색상을 변경하도록 설정합니다.
1. 디자인 아래에서 마우스오버를 클릭합니다.
2. 링크 마우스오버 색상 옆 색상 상자를 클릭합니다.

콘텐츠에 완벽하게 맞도록 표의 레이아웃을 조정할 수 있습니다. 표 높이, 행 높이, 단 너비를 필요에 맞게 사용자 지정하세요. 또한, 표 머리글 표시 여부를 선택하거나 단 방향을 조정하고, 최적의 표시를 위해 텍스트를 정렬할 수 있습니다.

중단점 활용하기:

표 레이아웃 패널에서 선택한 사항은 모든 중단점에 적용됩니다.

페이지 메뉴