Studio 에디터: 컨테이너 사용하기 | 도움말 센터

Wix를 사용해해 사이트와 비즈니스를 구축하는 방법을 알아보세요.

직관적인 Wix 기능을 사용해 사이트를 디자인하고 관리하세요.

구독, 플랜 및 인보이스를 관리하세요.

비즈니스를 운영하고 회원과 소통하세요.

도메인을 구매하고 사이트에 연결, 이전하는 방법을 알아보세요.

비즈니스 및 웹 존재감을 키울 수 있는 도구를 확인하세요.

SEO 및 마케팅 도구로 가시성을 높이세요.

보다 효율적으로 작업할 수 있는 고급 기능을 활용하세요.

해결책을 찾고, 알려진 문제에 대해 알아보거나 문의하세요.

강좌 및 튜토리얼을 통해 실력을 향상시키세요.

웹 디자인, 마케팅 등에 대한 팁을 확인하세요.

검색 엔진에서 유기적 사이트 트래픽을 증가시키는 방법을 알아보세요.

풀스택 플랫폼을 활용해 맞춤형 사이트를 구축하세요.

목표 달성에 도움을 줄 전문가를 만나보세요.

Studio 에디터: 컨테이너 사용하기

4 분

페이지 메뉴

컨테이너는 사이트 콘텐츠를 간소화하고 구성하는 데 도움이 되는 반응형 레이아웃 도구입니다. 사이트의 디자인을 보완하도록 사용자 지정하고 텍스트, 미디어, 버튼 등의 요소를 추가할 수 있습니다.

먼저 클라이언트의 디자인 및 콘텐츠 요구 사항에 맞게 컨테이너를 추가하세요. 사전 디자인된 다양한 마우스오버 컨테이너 중에서 선택하거나 빈 디자인으로 처음부터 시작할 수 있습니다.

사이트의 미적 감각을 보완할 수 있도록 컨테이너의 디자인을 사용자 지정하세요. 배경 색상을 변경하고 반경을 설정하는 등의 작업을 수행할 수 있습니다.

디자인 아래에서 컨테이너를 사용자 지정할 방법을 선택합니다.
- 배경: 배경을 설정하고 가시성을 조정합니다.
  - 색상: 사이트 테마 색상 또는 사용자 지정 색조 중 선택합니다.
  - 그라데이션: 컨테이너에 그라데이션 또는 선형 그라데이션을 적용합니다. 색상, 각도 등을 선택할 수 있습니다.
- 유리 효과: 컨테이너에 반투명 유리 효과를 적용하고 흐림 강도를 설정합니다.
- 테두리: 컨테이너에 테두리를 추가하고 옵션을 사용해 크기, 색상 및 투명도를 설정합니다.
- 모서리: 컨테이너 모서리 반경(px)을 조정해 더 둥글거나 각지게 만듭니다.
- 음영: 컨테이너에 음영 효과를 추가하고 사용자 지정합니다.

컨테이너 내부에 요소를 배치하면 자동으로 추가됩니다. 이는 컨테이너 및 컨테이너에 연결된 요소 전체를 드래그해 레이어 패널에서 함께 볼 수 있음을 의미합니다.

페이지에 컨테이너를 추가하면, 내장 반응형 동작이 함께 제공됩니다. 즉, 요소가 다른 화면에서 어떻게 보이는지 걱정할 필요가 없습니다. 반응형 동작을 통해 요소의 크기가 자동으로 조정됩니다.

하지만, 디자인에 더 적합한 동작이 있다면 반응형 동작을 전환할 수 있습니다.

반응형 동작 아래 드롭다운을 클릭해 원하는 동작을 선택합니다.
- 화면 비율 유지: 컨테이너의 비율(너비 및 높이)이 모든 화면에서 동일한 가로 세로 비율을 유지합니다.
- 상대 너비: 상위 요소를 기준으로 컨테이너의 너비가 자동으로 변경됩니다.
- 고정: 컨테이너의 너비와 높이가 항상 동일하게 유지되며, 화면 크기에 따라 조정되지 않습니다.
- 늘이기: 컨테이너가 상위 컨테이너(예: 셀, 섹션)에 맞게 늘어납니다.