Wix 도움말 센터
    홈
  1. Studio 및 파트너
  2. Wix Studio
  3. Wix Studio 에디터 사용하기
  4. Studio 에디터에서 사이트 구조화하기
    5. Studio 에디터: DOM 순서 사용하기

Studio 에디터: DOM 순서 사용하기

5 분 분량
DOM(문서 개체 모델)은 사이트 페이지가 구조화된 방식을 나타내며, 요소의 탭 및 로딩 순서를 결정합니다. 사이트의 DOM 순서를 구성하면 접근성 및 성능을 개선하고 방문자에게 더 나은 경험을 제공할 수 있습니다.
다음 도움말을 참고하세요.
참고:
스택이나 플렉스박스처럼 사이트에서 더 복잡한 레이아웃 도구를 사용할 때는 DOM 순서에 따라 요소를 정렬하는 것이 특히 중요합니다.

DOM 순서의 중요성

DOM 순서는 페이지에 있는 요소의 로딩, 읽기 및 탭 순서를 결정합니다. 이는 사이트에 다음과 같은 영향을 줄 수 있음을 의미합니다.
  • SEO 순위: 정렬된 논리적 구조는 접근성 및 사이트 로딩을 개선할 수 있으며, 사이트의 SEO 순위를 높일 수도 있습니다.
따라서, 논리적 DOM 순서는 사이트 방문자에게 최상의 경험을 보장하므로 중요합니다. 예를 들어, 사이트 메뉴가 먼저 오고 그 다음에 머리글의 나머지 요소가 오고, 페이지 제목, 페이지 콘텐츠 등이 차례로 와야 합니다.

자동 DOM 순서

자동 DOM은 왼쪽에서 오른쪽 및 위에서 아래와 같이 페이지 요소의 시각적 순서를 기반으로 합니다. DOM 순서는 요소 추가, 정렬 및 크기 조정 시 자동으로 재정렬되므로 최적화된 상태를 유지해야 합니다.

자동 DOM 비활성화하기

작업 중인 사이트의 DOM 순서에 문제가 있는 경우, 사이트 전체에서 이를 비활성화할 수 있습니다. 특정 요소에 문제가 있는 경우 개별 섹션 및 컨테이너, 섹션 내의 그리드 셀에서 비활성화할 수 있습니다.
옵션을 선택해 자동 DOM 비활성화 방법을 확인하세요.

수동으로 요소의 DOM 순서 변경하기

자동 DOM 순서를 비활성화한 후에는 요소의 시각적 순서(왼쪽에서 오른쪽, 위에서 아래로)와 일치하도록 수동으로 변경할 수 있습니다.

DOM 순서를 수동으로 변경하려면:

  1. 에디터 왼쪽에서 레이어를 클릭합니다.
  2. 정렬할 항목을 선택합니다.
    • 섹션 내의 요소: 
      1. 섹션을 선택해 엽니다.
      2. 요소를 올바른 위치로 끌어다 놓습니다.
    • 섹션: 
      1. 상단 섹션에 마우스오버한 후 추가 작업 아이콘을 클릭합니다.
      2. 배열을 클릭합니다.
      3. 앞으로 가져오기를 클릭합니다.
      4. 패널의 위에서 아래로 이동하면서 다른 모든 섹션에 대해 1-3 단계를 반복합니다.
사이트의 레이어 패널. 커서가 섹션의 정렬 탭을 클릭해 옵션을 표시하고 있습니다.

DOM 순서 재정렬하기

한 번의 클릭으로 섹션, 플렉스박스, 스택 또는 전체 페이지 요소의 DOM 순서를 재정렬할 수 있습니다. 순서는 요소의 시각적 순서(왼쪽에서 오른쪽 및 위에서 아래)와 일치하도록 최적화됩니다. 

페이지의 DOM 순서를 재정렬하려면:

  1. 에디터 왼쪽에서 페이지 아이콘을 클릭합니다.
  2. 해당 페이지를 선택합니다.
  3. 추가 작업 아이콘을 클릭합니다.
  4. DOM 순서 재정렬을 클릭합니다.
사이트의 페이지 패널, 옵션을 클릭해 페이지의 DOM 순서를 재정렬하고 있습니다.

요소의 DOM 순서를 재정렬하려면:

  1. 에디터 왼쪽에서 레이어를 클릭합니다.
  2. 관련 섹션, 플렉스박스 또는 스택을 선택합니다.
  3. 추가 작업 아이콘을 클릭합니다.
  4. DOM 순서 재정렬을 클릭합니다.
사이트의 레이어 패널, 섹션의 DOM 순서를 재정렬하는 옵션을 클릭하고 있습니다.

자주 묻는 질문

아래 질문을 클릭해 사이트의 DOM 순서에 대해 자세히 알아보세요.

도움이 되었나요?

|
페이지 메뉴
  • DOM 순서의 중요성
  • 자동 DOM 순서
  • 자동 DOM 비활성화하기
  • 수동으로 요소의 DOM 순서 변경하기
  • DOM 순서 재정렬하기
  • 자주 묻는 질문