header-logo
시작하기Wix를 사용해 사이트 및 비즈니스를 구축하는 방법을 알아보세요. 템플릿을 사용해 사이트를 맞춤화하거나, 전문가를 고용해 웹 존재감을 강화할 수 있습니다.
사이트 제작Wix 에디터를 사용하고 사이트 콘텐츠를 관리하는 방법을 알아보세요. 방문자의 개인정보를 보호하고 사이트에 대한 접근성을 높이는 방법 또한 확인할 수 있습니다.
계정 및 결제계정 설정을 검토하고, 구독 및 프리미엄 플랜을 관리하고, 인보이스를 이해하세요.
Wix 모바일 앱Wix Owner 앱을 사용해 비즈니스를 효율적으로 운영하고 방문자와 소통하며 커뮤니티를 구축하세요.
도메인 연결도메인 구매, 연결, 이전 방법 및 사이트 데이터를 안전하게 유지하는 방법을 알아보세요.
비즈니스 관리비즈니스를 구축하고 성장시키는 데 적합한 도구를 찾으세요. 결제 승인, 애널리틱스 분석 검토, 방문자와 교류 등의 작업을 할 수 있습니다.
사이트 홍보검색 엔진에서 사이트를 홍보하고, 이메일 캠페인을 발송, 유료 광고를 게재하는 방법 등을 알아보세요.
Studio 및 파트너Studio 및 파트너 계정을 최대한 활용해 비즈니스를 확장하세요.
고객센터사이트 성능 및 기술 문제 해결에 대한 정보를 얻으세요. 제품 로드맵에서 향후 기능을 추적할 수도 있습니다.
placeholder-preview-image
Wix Learn강좌 및 튜토리얼을 통해 실력을 향상시키세요.
Wix 블로그웹 디자인, 마케팅 등에 대한 팁을 확인하세요.
SEO 러닝 허브검색 엔진에서 유기적 사이트 트래픽을 증가시키는 방법을 알아보세요.
Website development풀스택 플랫폼을 활용해 맞춤형 사이트를 구축하세요.
전문가 고용하기목표 달성에 도움을 줄 전문가를 만나보세요.
placeholder-preview-image
페이지 메뉴
  • DOM 순서의 중요성
  • 자동 DOM 순서
  • 자동 DOM 비활성화하기
  • 수동으로 요소의 DOM 순서 변경하기
  • DOM 순서 재정렬하기
  • 자주 묻는 질문
  1. 홈
  2. Studio 및 파트너
  3. Wix Studio
  4. Wix Studio 에디터 사용하기
  5. Studio 에디터에서 사이트 구조화하기
  6. Studio 에디터: DOM 순서 사용하기

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

페이지 메뉴
  • DOM 순서의 중요성
  • 자동 DOM 순서
  • 자동 DOM 비활성화하기
  • 수동으로 요소의 DOM 순서 변경하기
  • DOM 순서 재정렬하기
  • 자주 묻는 질문
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 순서에 대해 자세히 알아보세요.

도움이 되었나요?

|

Helpmate

안녕하세요 님,

추가 도움이 필요하신가요?
Unlock personalized helpLog in to get the most out of Helpmate.