Studio 에디터: 고급 CSS 그리드를 사용해 작업하기
6 분 분량
Studio 에디터에서 고급 CSS 그리드를 사용해 요소 및 섹션의 레이아웃을 구성할 수 있습니다. 원하는 단과 행의 수를 선택하고 반응형 측정(예: fr, 최소/최대, %)을 사용해 크기를 설정할 수 있습니다.
Wix Studio 아카데미로 이동해 추가 Wix Studio 웨비나, 튜토리얼 및 강좌를 확인하세요.
이 도움말에서 CSS 그리드 작업에 대한 모든 것을 알아보세요.
섹션 그리드에서 CSS 그리드로 전환하기
에디터의 섹션은 섹션 그리드를 설정하는 옵션과 함께 제공됩니다. 이는 동일한 CSS 논리를 기반으로 하는 고급 그리드의 사용하기 쉬운 버전입니다. 고급 CSS 그리드로 전환하면 중단점별로 레이아웃을 더 정확하게 제어할 수 있습니다.
참고:
전환한 후에는 섹션 그리드로 돌아갈 수 없습니다. 하지만, 방금 작업을 수행한 경우에는 에디터 오른쪽 상단의 실행 취소
아이콘을 사용할 수 있습니다.
아이콘을 사용할 수 있습니다.섹션 그리드에서 CSS 그리드로 전환하려면:
- 에디터에서 해당 섹션을 선택합니다.
- 에디터 오른쪽 상단에서 속성 열기
화살표를 클릭합니다. - 레이아웃으로 스크롤합니다.
- 고급 CSS 그리드 옆 전환을 클릭합니다.
- CSS 그리드로 전환을 클릭합니다.
다음 단계:
속성 패널에서 단, 열, 간격을 사용자 지정하세요. 캔버스에서 그리드라인을 끌어 이동할 수도 있습니다.
다른 요소에 CSS 그리드 적용하기
CSS 그리드를 컨테이너, 라이트박스, 플렉스박스 및 반복 레이아웃 아이템에 적용할 수 있습니다. 특히 반복 레이아웃 요소에서는 한 아이템에 그리드를 적용하면 나머지 아이템이 자동으로 업데이트됩니다.
CSS 그리드를 적용하려면:
- 에디터에서 해당 요소를 선택합니다.
- 추가 작업
아이콘을 클릭합니다. - 고급 CSS 그리드 적용을 클릭합니다.
- 1x1 드롭다운에서 레이아웃을 선택합니다.
도움말: 행과 단 수를 원하는 대로 설정하려면 기타를 선택하세요.
다음 단계:
속성 패널에서 단, 열, 간격을 사용자 지정하세요. 캔버스에서 그리드라인을 끌어 이동할 수도 있습니다.
CSS 그리드 사용자 지정하기
그리드를 사용자 지정해 원하는 정확한 레이아웃을 완성하세요. 행 및 단 수를 변경하고 크기 및 간격을 조정할 수 있습니다.
CSS 그리드를 사용자 지정하려면:
- 해당 요소 또는 섹션을 선택합니다.
- 그리드 사용자 지정 방법을 선택합니다.
다른 레이아웃 선택하기
더 많은 행과 단 추가하기
아이콘을 클릭합니다.
아이콘을 클릭해 옵션을 확인하세요.
단 또는 행 크기 변경하기
단 또는 행 삭제하기
아이콘을 클릭합니다.
간격 크기 편집하기
중단점 활용하기:
디자인은 작업 중인 중단점에만 적용됩니다. 요소의 구성이 완벽하도록 각 중단점에 맞게 그리드를 조정해야 합니다. 아래 예제에서는 중단점별로 다른 레이아웃(데스크톱: 3열, 태블릿: 3행)을 설정했습니다.
그리드에서 요소 배치하기
그리드에 요소를 추가하는 동안 여러 도구를 사용해 그리드의 배치를 보다 정확하게 설정할 수 있습니다.
요소 도킹하기
요소를 그리드라인에 도킹하면 원하는 위치에 정확하게 배치할 수 있습니다. Studio 에디터에서 모든 요소는 자동으로 도킹되지만, 수동으로 도킹을 조정하고 여백을 추가할 수 있습니다.
그리드 셀 간 요소 이동하기
속성의 위치 섹션에서 요소를 선택하고 해당 요소가 배치된 그리드 셀을 확인할 수 있습니다. 그리드 셀을 클릭하면 드래그-앤-드롭을 사용할 필요 없이 요소를 이동할 수 있습니다.
특정 단 및 행 번호를 입력할 수도 있습니다. 이는 요소를 여러 그리드 셀에 배치해야 하는 경우에 유용합니다.
그리드 단위 표
전체 CSS 단위를 사용해 그리드를 생성하세요. 백분율, 프랙션 또는 픽셀을 사용해 행과 단의 크기를 설정할 수 있습니다. 또는, 단과 행의 최소 및 최대 크기를 설정하고 계산을 사용해 필요한 그리드를 생성할 수도 있습니다.
백분율 (%)
프랙션 (fr)
자동
픽셀 (px)
뷰포트 너비 및 높이 (vw 및 vh)
최소 및 최대 콘텐츠
최소/최대
계산
겹치는 요소를 처리해야 한다면:
문제 해결 동영상을 통해 확인 사항 및 해결 방법을 알아보세요.
도움이 되었나요?
|