Wix 홈
로그인

Studio 에디터: 컨테이너를 사용해 세로 섹션 생성하기

4 분 분량
페이지 메뉴
  • 1 단계 | 컨테이너 추가 및 그리드 적용하기
  • 2 단계 | 머리글에 컨테이너 추가하기
  • 3 단계 | 컨테이너 정렬 및 페이지 여백 추가하기
  • 4 단계 | 컨테이너 사용자 지정하기
Studio 에디터에서는 세로 섹션을 사용할 수 없습니다. 하지만, 고정된 컨테이너를 사용해 사이드바 섹션처럼 보이도록 유사한 효과를 얻을 수 있습니다.
최종 결과의 예 - Studio 에디터에서 생성한 라이브 사이트의 탐색에 사용되는 사이드바 섹션

1 단계 | 컨테이너 추가 및 그리드 적용하기

먼저, 컨테이너를 추가하고 전체 화면 높이를 차지하도록 높이를 100vh로 설정합니다. 그 다음, 행 크기가 자동으로 설정된 고급 CSS 그리드를 적용하세요.

컨테이너를 추가하고 그리드를 적용하려면:

  1. Studio 에디터의 요소 추가 패널에서 컨테이너를 추가합니다.
  2. 컨테이너 높이를 100vh로 변경합니다.
    1. 에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.
    2. 크기 옆 추가 작업 아이콘을 클릭합니다.
    3. 고급 설정 버튼을 활성화합니다.
    4. 높이를 100vh로 설정합니다.
      도움말: 현재 측정 단위(예: %, px)를 클릭해 변경하세요.
  3. 컨테이너에 CSS 그리드를 적용합니다.
    1. (속성 패널에서) 레이아웃 으로 스크롤합니다.
    2. 고급 CSS 그리드 적용을 클릭합니다.
    3. 을 클릭합니다.
    4. 현재 측정된 크기를 클릭해 자동으로 변경합니다.
속성 패널에서 그리드 행 크기를 자동으로 설정하기

2 단계 | 머리글에 컨테이너 추가하기

컨테이너를 현재 페이지의 머리글에 끌어다 놓아 추가하세요. 이렇게 하면 컨테이너에 따라 머리글의 크기가 조정되지만, 속성 패널에서 높이를 다시 변경할 수 있습니다.
그 다음, 방문자가 페이지를 위아래로 스크롤할 때 컨테이너가 계속 표시되도록 머리글에 핀을 고정합니다.

머리글에 컨테이너를 추가하려면:

  1. 컨테이너를 끌어 페이지 머리글에 추가합니다. 
  2. 머리글 크기를 조정합니다.
    1. 머리글을 선택합니다.
    2. 에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.
    3. 크기 옆 추가 작업 아이콘을 클릭합니다.
    4. 고급 설정 버튼을 활성화합니다.
    5. 높이를 원하는 값( px)으로 설정합니다.
      도움말: 현재 측정 단위(예: %, px)를 클릭해 변경하세요.
  3. 위치로 스크롤합니다.
  4. 위치 유형 드롭다운에서 핀 추가를 선택합니다.
속성 패널과 컨테이너가 연결된 머리글의 나란히 보기

3 단계 | 컨테이너 정렬 및 페이지 여백 추가하기

이제 컨테이너를 배치할 차례입니다. 표시하고자 하는 위치에 따라 컨테이너를 상단 및 왼쪽 / 상단 및 오른쪽 모서리에 정렬하세요.
마지막 단계는 페이지의 해당 면에 여백을 추가하는 것입니다. 이는 컨테이너가 페이지 콘텐츠를 덮는 것을 방지합니다. 

컨테이너를 정렬하고 여백을 추가하려면:

  1. 컨테이너를 선택합니다.
  2. (속성 패널에서) 컨테이너를 상단 및 왼쪽/오른쪽으로 정렬합니다.
    1. 상단 정렬 아이콘을 클릭합니다.
    2. 왼쪽 정렬 / 오른쪽 정렬 아이콘을 클릭합니다.
  3. 페이지에 여백을 추가합니다.
    1. 속성 상단에서 페이지를 클릭합니다.
    2. 위치 아래에서 여백을 컨테이너와 같은 너비로 설정합니다.
      예를 들어, 컨테이너 너비가 20%이고 페이지 왼쪽에 있는 경우, 왼쪽 여백 또한 20%로 설정되어야 합니다.

4 단계 | 컨테이너 사용자 지정하기

이제 컨테이너를 사이드바 섹션으로 사용할 수 있습니다. 속성 패널에서 필요한 요소를 추가하고 컨테이너를 디자인하세요. 아래 예제와 같이 머리글에 첨부되며, 캔버스를 위아래로 스크롤할 때 전체 화면 높이를 차지합니다. 
도움말의 지침을 따라 컨테이너가 사이드바 섹션으로 전환된 예시
최종 결과의 예 - Studio 에디터에서 생성한 라이브 사이트의 탐색에 사용되는 사이드바 섹션
속성 패널에서 그리드 행 크기를 자동으로 설정하기
속성 패널과 컨테이너가 연결된 머리글의 나란히 보기
도움말의 지침을 따라 컨테이너가 사이드바 섹션으로 전환된 예시