에디터 X: 레이어 패널 사용하기

에디터 X: 레이어 패널 사용하기

4 분 분량

에디터 X는 에이전시 및 프리랜서를 위한 새로운 플랫폼인 Wix Studio로 전환됩니다.Wix Studio에 대해 자세히 알아보세요.

에디터 상단 바의 레이어 패널에서 페이지 레이어를 관리하세요. 레이어 패널은 페이지의 모든 요소를 표시하며, 선택, 순서 변경, 비공개 등의 작업을 수행할 수 있도록 합니다.

다음 도움말을 참고하세요.

레이어 패널 구조

레이어 패널은 페이지 상단에서 하단까지 계층 구조의 모든 섹션을 표시합니다. 페이지 상단에 머리글이 있는 경우, 목록 상단에 표시되고 그에 따라 바닥글이 하단에 표시됩니다.

페이지의 다른 요소 내에 요소를 중첩하면 HTML 및 CSS에서 파생된 상위/하위 관계가 생성됩니다. 예를 들어, 컨테이너 내의 텍스트 요소는 하위 요소입니다. 해당 컨테이너는 이를 표시하는 섹션의 하위 컨테이너가 됩니다.

레이어 패널은 이러한 상하위 논리에 따라 구성되어 있으므로, 상위 요소를 클릭해 내부의 하위 요소를 확인할 수 있습니다. 페이지에 마스터 요소가 있는 경우, 해당 요소는 녹색으로 강조 표시됩니다.

참고:

섹션 내의 컨테이너 및 요소는 Z 순서로 표시됩니다. 이는 요소가 다른 요소 위에 있는 경우 목록에서 더 위에 표시됨을 의미합니다.

레이어 패널에는 선택한 페이지의 요소가 표시됩니다. 다른 페이지의 레이어를 확인하려면, 페이지 탐색 드롭다운 메뉴에서 원하는 페이지를 선택해야 합니다.

레이어 패널에서 요소 선택하기

레이어 패널은 페이지의 특정 요소를 탐색할 수 있는 유용하고 빠른 방법입니다. 또한, 겹치는 요소가 있고 필요한 요소를 찾거나 선택할 수 없는 경우 요소를 찾는 좋은 방법이기도 합니다.

레이어에 마우스오버 시 페이지에서 해당 레이어가 강조 표시되어 쉽게 찾을 수 있습니다. 레이어를 클릭하면 에디터가 해당 요소로 직접 스크롤합니다. 이 시점에서 패널을 닫더라도 선택 사항은 여전히 저장됩니다.

도움말:

Shift 키를 누른 채 요소를 클릭해 여러 요소를 선택하세요.

패널에서 레이어 관리하기

필요한 레이어를 찾았나요? 이 패널에서는 레이어 복사, 패널에서 위 또는 아래로 이동, 표시할 페이지 선택 등과 같은 작업을 수행할 수 있습니다.

다음 중 하나를 수행해 레이어를 관리하세요.

레이어 이름 오른쪽 클릭
레이어 이름에 마우스오버한 후 더보기 아이콘 클릭

겹치는 요소를 사용하는 경우:

캔버스에서 직접 다른 레이어를 탐색할 수 있습니다. 필요한 요소에 겹쳐있는 요소를 오른쪽 클릭한 후 레이어 선택을 클릭해 액세스하세요.

레이어 패널에서 요소 이름 변경하기

페이지에 여러 섹션, 컨테이너 및 요소 등 추가 시, 레이어 패널에서 이를 구분하기 어려울 수 있습니다. 쉽게 인식할 수 있도록 레이어 이름을 변경할 수 있습니다. 관련 레이어를 두 번 클릭한 후 텍스트 상자에 새 이름을 지정하세요.

개발자 모드를 사용 중인 경우:

코드에서 요소를 쉽게 식별할 수 있도록 레이어 패널에 요소 ID를 표시합니다.ID 표시하기 버튼을 활성화해 속성 패널에 정의된 ID를 확인하세요.

레이어 패널에서 요소 순서 변경하기

레이어 패널을 사용해 동일한 상위 컨테이너 내에서 요소를 목록 위아래로 끌어 쉽게 순서를 변경할 수 있습니다.

요소의 순서를 변경하면 Z 순서가 변경됩니다. 예를 들어, 텍스트를 모양 위에 표시하려면 레이어 패널에서 텍스트가 모양 위에 있어야 합니다.

레이어 패널에서 요소의 순서를 변경하려면:

에디터 X 상단에서 레이어를 클릭합니다.
순서를 변경하고자 하는 요소가 있는 컨테이너를 클릭합니다.
관련 요소를 클릭해 원하는 위치로 끌어다 놓습니다.

레이어 패널에서 요소 비공개 해제하기

사이트의 모든 요소는 오른쪽 클릭 메뉴에서 비공개할 수 있습니다. 하지만, 요소 비공개를 해제하려면 레이어 패널에서 비공개 설정을 해제해야 합니다.

비공개 요소는 레이어 패널에 비공개

아이콘과 함께 표시됩니다.

레이어 패널에서 요소 비공개를 해제하려면:

에디터 X 상단에서 레이어를 클릭합니다.
목록에서 비공개 요소를 찾습니다.
요소에 마우스오버한 후 추가 작업 아이콘을 클릭합니다.
표시 옵션을 클릭합니다.