Studio Two 에디터: 속성 검사 패널 사용하기

속성 검사 패널에서 요소, 섹션, 페이지의 속성을 편집할 수 있습니다. 화면 중단점별 요소 크기 조정 방식 설정, 디자인 조정, 모션 추가, 콘텐츠와 데이터 소스 연결을 모두 한곳에서 할 수 있습니다.

디자인 탭에서 화면 중단점별 요소의 디자인과 작동 방식을 설정합니다. 속성 검사에서 가장 먼저 표시되는 탭으로, 크기와 간격부터 색상, 타이포그래피, 사용자 지정 CSS까지 모두 설정할 수 있습니다.

탭 상단의 아이콘을 클릭해 선택한 요소를 상위 요소 내에서 정렬합니다. 아이콘 아래에 표시되는 섹션은 선택한 요소에 따라 달라집니다.

• 크기: 요소의 너비와 높이를 설정하고 화면별 크기 조정 방식을 선택합니다.
• 요소 디자인: 색상, 테두리, 모서리, 음영, 타이포그래피 등 요소의 디자인을 설정합니다. 메뉴처럼 여러 부분으로 구성된 요소나 버튼처럼 고유한 마우스오버 및 비활성화 상태가 있는 요소는 먼저 디자인할 부분이나 상태를 선택합니다.
• 레이아웃(컨테이너 및 섹션): 상위 요소 내부에서 요소가 배치되는 방식을 조정합니다. 그리드 레이아웃과 여백을 설정하고, 오버플로우 콘텐츠를 처리할 방식을 선택합니다. 세로 간격을 자동에서 수동으로 변경하면 화면 중단점마다 요소 간격을 다르게 설정할 수 있습니다.
• 위치: 위치 유형(예: 스티키, 핀)을 선택하고 여백과 도킹을 설정해 화면 크기가 변경되어도 요소가 제자리에 유지되도록 합니다.
• 표시: 요소의 투명도와 회전 각도를 설정합니다.
• 커서: 요소, 섹션 또는 페이지에 사용자 지정 커서를 추가합니다.
• 앵커: 요소로 직접 연결되는 앵커를 추가하고 앵커 URL을 복사합니다.
• 사용자 지정 CSS: 선택한 요소에 적용할 CSS를 직접 작성합니다.

모션 탭에서 요소와 섹션에 움직임을 추가합니다. 하나의 요소에 여러 유형의 애니메이션을 적용할 수 있습니다. 예를 들어 요소를 로딩할 때 서서히 표시하거나, 방문자의 커서에 반응하게 하거나, 스크롤에 따라 이동하도록 설정할 수 있습니다.

원하는 모션 유형을 선택합니다:

• 입장: 요소가 처음 로드될 때 애니메이션을 적용합니다. 예를 들어 요소를 확대하거나, 서서히 표시하거나, 비스듬히 기울일 수 있습니다.

• 반복: 특정 작업을 트리거하지 않아도 요소의 애니메이션이 계속 반복되도록 설정합니다.

• 스크롤: 방문자가 페이지를 위아래로 스크롤할 때 요소에 애니메이션을 적용합니다.

• 마우스 효과: 커서 움직임에 따라 요소가 애니메이션으로 반응하도록 설정합니다.

• 클릭: 방문자가 요소를 클릭할 때 애니메이션을 적용합니다.

• 마우스오버: 방문자가 요소에 마우스오버할 때 애니메이션을 적용합니다.
  참고: 버튼이나 메뉴와 같은 일부 요소에는 마우스오버 상태가 기본으로 제공되므로 마우스오버 애니메이션을 추가하는 옵션이 표시되지 않습니다. 마우스오버 상태를 사용자 지정하려면 디자인 탭으로 이동해 상태 아래에서 마우스오버를 선택합니다.

설정 탭에서 선택한 요소의 고급 동작을 설정합니다.

• 데이터 소스: 페이지, 섹션 또는 컨테이너를 데이터 소스에 연결합니다. 그러면 내부 요소에서 해당 소스의 데이터, 작업 및 기능을 사용할 수 있습니다. 소스 연결을 클릭해 시작합니다.

• 속성: 선택한 요소의 콘텐츠와 동작을 편집합니다. 이용 가능한 옵션은 요소에 따라 다릅니다. 예를 들어 버튼을 선택하면 텍스트와 링크를 사용자 지정하거나 버튼을 비활성화할 수 있습니다. 값을 직접 입력하는 대신 데이터 소스에 연결하려면 입력란 옆의 데이터에 연결 아이콘을 클릭하고, Aria의 도움을 받으려면 AI로 설정을 클릭합니다.

• 접근성: 보조 기술로 요소를 더 쉽게 사용할 수 있도록 설정합니다. 요소에 따라 역할을 설정하거나 장식용으로 표시하고, 접근성 이름을 추가하거나, 스크린 리더가 업데이트 내용을 안내하는 방식을 선택할 수 있습니다.

• 고급:

  • 가시성 조건: 데이터 소스의 조건이 참 또는 거짓일 때 요소를 숨깁니다.

  • 이벤트 핸들러: 요소를 클릭하거나 마우스오버하는 등 특정 이벤트가 발생할 때 함수를 실행합니다. 이벤트 핸들러는 버튼과 같은 일부 요소에서 사용할 수 있습니다.

아래 질문을 클릭해 자세한 내용을 확인하세요.