웹사이트의 콘텐츠를 재정렬하려면 블록을 클릭하고 새 위치로 끌어다 놓으세요.

페이지에서 블록을 이동하여 레이아웃을 사용자 정의하거나 열과 행을 만드세요. 이번 가이드는 블록으로 콘텐츠 추가하기의 다음 단계입니다. Squarespace 이용이 처음이라면 먼저 읽어 보시기를 권장합니다.

참고: 페이지의 콘텐츠 영역 내에서 블록을 이동할 수 있습니다. 페이지 또는 바닥글과 블로그 게시물 같은 별도의 콘텐츠 영역 간에 블록을 이동하는 것은 불가능합니다.

비디오를 시청하십시오

이번 비디오에서는 클래식 에디터를 안내합니다.

블록 이동

Squarespace에서 블록을 추가할 때마다 블록을 이동하여 레이아웃을 사용자 정의할 수 있습니다. 블록을 이동하려면:

팁: 최대한 많은 사용자가 사이트 콘텐츠에 접근할 수 있도록 하려면 Squarespace의 접근성 리소스를 방문하세요.

플루이드 엔진 레이아웃

현재 Squarespace의 블록 편집 환경은 플루이드 엔진이라고 합니다. 버전 7.1 사이트에서는 레이아웃 페이지, 포트폴리오 하위 페이지, 바닥글을 포함하여 블록 섹션을 추가하는 모든 영역에서 지원됩니다. 플루이드 엔진 출시 전에 추가된 컬렉션 아이템과 블록 섹션은 클래식 에디터를 사용합니다.

플루이드 엔진의 그리드 시스템 때문에 블록을 이동하면 주변 블록도 약간 움직일 수 있습니다. 섹션 레이아웃의 전체적인 균형을 유지하기 위한 현상입니다. 

플루이드 엔진에서는 컴퓨터 보기와 모바일 보기를 따로 설정한다는 점에 주의하시기 바랍니다.

가운데 블록

블록을 가로로 중앙에 배치하려면 블록을 클릭하고 섹션의 중앙으로 드래그한 다음, 그리드의 중앙에 노란색 선이 세로로 나타나면 놓으세요. 블록이 섹션의 중앙에 위치하도록 크기가 약간 조정될 수 있습니다.

블록을 여백 없음으로 만들기

블록을 플루이드 엔진 그리드 밖으로 이동하면 섹션 콘텐츠 너비의 가장자리에 맞게 크기가 조정됩니다. 이렇게 하면 여백 없음 효과가 발생합니다. 채우기로 설정된 이미지 블록 등의 특정 블록은 효과를 내기 위해 다르게 잘라야 할 수 있습니다. 

콘텐츠 정렬 및 오버랩 설정

플루이드 엔진에서 블록을 새 위치로 이동하면 블록의 툴바가 나타납니다.

• 블록 콘텐츠를 블록 테두리 내에서 가로, 세로 또는 둘 다에 맞춰 정렬하려면 블록의 도구 모음에서 정렬 아이콘을 클릭합니다. 채우기로 설정된 이미지 블록, 버튼 블록과 같은 일부 블록에는 정렬 옵션이 없습니다.
• 블록이 겹치면 도구 모음에 앞으로 이동 및 뒤로 이동 아이콘이 표시되어 어떤 블록이 위에 있는지 설정할 수 있습니다. 여러 블록이 오버랩되는 경우, 블록을 완전히 앞으로 또는 뒤로 이동시키려면 여러 번 클릭해야 할 수 있습니다.
• 겹치는 블록에서 블록 콘텐츠를 더 잘 보이게 하려면 특정 블록에 배경색 을 추가하세요.

여러 블록을 동시에 배열

섹션 배경을 클릭하고 드래그하여 여러 블록을 강조 표시합니다. 그런 다음 강조 표시된 모든 블록을 동시에 이동하거나 배열하세요.

• 강조 표시된 여러 블록을 동시에 이동하려면 블록 중 하나를 클릭하고 끕니다. 이렇게 하면 강조 표시된 모든 블록이 동시에 이동하여 현재 레이아웃이 유지됩니다.
• 강조 표시된 모든 블록을 동시에 정렬하려면 도구 모음에 나타나는 그룹 정렬 버튼을 클릭합니다. 그런 다음 정렬 옵션 중 하나를 선택하세요.
• 강조 표시된 모든 블록을 뒤로 또는 앞으로 이동하려면 도구 모음에 표시되는 뒤로 이동 또는 앞으로 이동 버튼을 클릭하세요.
• 강조 표시된 모든 블록의 크기를 조정하려면, 블록 아웃라인의 사각형 중 하나에 커서를 올리세요. 커서가 화살표로 바뀌면 클릭하고 드래그하여 블록을 더 크거나 작게 만드세요.

플루이드 엔진 섹션의 모든 블록을 동시에 강조 표시하고 이동하려면 Command + A 또는 Control + A를 누른 다음 클릭하여 드래그하세요.

클래식 에디터 레이아웃

버전 7.0 사이트의 모든 블록 영역은 클래식 에디터를 사용합니다. 버전 7.1 사이트의 일부 영역에서도 사용 가능합니다.

• 블로그 게시물, 이벤트 및 제품 추가 정보
• 플루이드 엔진 이전에 추가된 블록 섹션

블록 이동

클래식 에디터를 사용하는 대부분의 영역에서 보이지 않는 그리드는 최대 12개의 열과 무제한의 행을 지원합니다. 바닥글과 같은 일부 영역에는 다른 제한이 적용될 수 있습니다.

• 블록을 클릭하고 드래그하여 그리드에서 위치를 변경하면 블록이 반투명하게 나타납니다.
• 블록을 이동할 때, 가이드라인이라는 안내선이 나타나 블록을 배치하는 위치를 보여줍니다. 열과 행을 만들 때 특히 유용한 기능입니다.
• 풀 인용을 생성할 때처럼 텍스트 영역에 블록을 띄우는 경우, 블록이 놓인 곳마다 회색 상자가 나타나 텍스트가 어떻게 둘러싸이는지 보여줍니다.

블록 배치

블록을 드래그하면 블록을 놓았을 때 어떤 일이 일어날지 보여주는 가이드라인이 나타납니다.

• 콘텐츠 영역 높이의 수직선 - 블록은 페이지 전체 높이에 걸쳐 새로운 열을 만듭니다.
• 콘텐츠 영역 너비의 가로선 - 블록은 페이지 전체 너비에 걸쳐 새로운 행을 만듭니다.
• 다른 블록의 높이 또는 너비와 일치하는 선 - 블록이 해당 블록과 동일한 높이 또는 너비로 기존 열 또는 행에 추가됩니다.

블록을 열과 행으로 나누기

가로줄 블록 과 여백 블록은 콘텐츠를 열과 행으로 분리하는 데 유용한 도구입니다.

• 텍스트 블록이 쌓이면 자주 합쳐지므로, 텍스트를 나누고 합쳐짐을 방지하기 위해 줄 또는 여백 블록을 사용하세요. 이와 관련하여 도움이 필요한 경우 아래 텍스트 블록 섹션을 참조하세요.
• 페이지나 콘텐츠 영역을 배치할 때 줄 및 여백 블록을 사용하여 콘텐츠를 일시적으로 구분할 수도 있습니다. 라인이나 여백 블록을 사용하여 행을 나눈 후, 블록을 추가하여 새로운 병렬 열을 만드세요. 콘텐츠가 정렬된 후, 줄 또는 여백 블록을 제거하세요. 줄 또는 여백을 제거한 후 텍스트 블록이 병합된다는 점을 염두에 두세요.

모바일 레이아웃

모바일 브라우저에서 블록의 배열은 블록이 포함된 편집기에 따라 달라집니다.

• 플루이드 엔진 - 모바일과 컴퓨터 레이아웃이 분리되어 있습니다. 오른쪽 상단에 있는 모바일 보기 아이콘을 클릭하여 페이지의 모바일 레이아웃을 보고 편집하세요. 컴퓨터 레이아웃에서 블록을 이동해도 모바일 레이아웃에는 영향을 미치지 않습니다. 
• 클래식 에디터 - 컴퓨터와 모바일 레이아웃을 따로 편집할 수 없습니다. 모바일 레이아웃은 컴퓨터 레이아웃과 일치하며, 블록은 더 작은 기기에 맞게 자동으로 재정렬됩니다.

열 및 행 만들기

사이트에 일반적인 형식의 콘텐츠가 있는 열과 행을 자동으로 만들 수 있는 여러 가지 옵션이 포함되어 있습니다. 시간이 지남에 따라 번거로운 수작업으로 재정렬하지 않고도 콘텐츠를 추가할 수 있습니다. 깔끔하고 일관성 있는 열과 행을 만들려면 다음과 같은 옵션을 사용하는 것이 좋습니다.

• 자동 레이아웃(버전 7.1) - 이미지, 텍스트, 버튼
• 갤러리 섹션(버전 7.1) - 이미지 및 텍스트
• 갤러리 블록 - 이미지와 텍스트
• 요약 블록 - 블로그와 같은 컬렉션 페이지에서 가져온 이미지와 텍스트

그러나 다른 유형의 콘텐츠로 열과 행을 만들거나 위의 옵션에서 지원되지 않는 레이아웃에서 열과 행을 만들어야 하는 경우, 블록 세트를 사용하여 열과 행을 만들 수 있습니다:

• 플루이드 엔진 - 그리드 지침을 사용하여 블록을 배치하고 크기를 조정 하여 일관된 열과 행을 만들고, 필요한 경우 모바일 레이아웃을 다른 열과 행으로 정렬합니다.
• 클래식 에디터 - 열과 행을 만드는 것이 더 복잡합니다. 이번 가이드의 나머지 부분에서는 클래식 에디터에서 열과 행을 수동으로 생성하는 방법을 설명합니다.

이 비디오는 버전 7.0을 보여주지만, 버전 7.1의 클래식 에디터에도 적용됩니다.

클래식 에디터에서 열 만들기

열을 콘텐츠 영역 전체 높이에 걸치거나 기존 행의 블록과 정렬하여 높이가 같은 열을 만들 수 있습니다. 열을 생성하는 방법:

1. 이동하려는 블록 위에 커서를 올리세요. 커서가 손 모양 아이콘으로 바뀝니다. 손 모양이 나타나지 않으면 먼저 블록을 클릭하세요.
2. 블록을 클릭하고 드래그하여 페이지에서 이동시키세요.
3. 블록을 이동하면 해당 블록이 차지할 새 열을 보여주는 가이드라인이 나타납니다.
4. 아래 단계에 따라 열을 전체 페이지 또는 높이가 일치하는 열에 추가하세요.

전체 페이지 열 만들기

페이지의 전체 높이로 늘어나는 새 열을 만들려면 가이드라인이 페이지 전체를 따라 세로로 늘어날 때까지 블록을 클릭하고 드래그하세요. 이렇게 하면 전체 페이지를 분할하는 새 열이 만들어집니다.

높이가 같은 열을 생성하십시오

새 열을 다른 블록의 높이에 맞추려면 가이드라인이 다른 블록의 높이와 일치할 때까지 블록을 클릭하고 드래그하세요. 더 넓은 블록의 위나 아래에 블록을 나란히 배치할 때 유용한 기능입니다.

열 너비를 변경하십시오

모든 열의 너비가 동일하도록 하려면 다음 중 하나의 열 수가 필요합니다:

• 1
• 2
• 3
• 4
• 6
• 12

열의 개수가 다르면 열의 너비도 달라집니다. 이 규칙은 사이드바와 일부 바닥글을 제외한 사이트의 모든 콘텐츠 영역에 적용됩니다.

열 너비를 변경하는 방법:

1. 두 블록 사이에 커서를 올리면 왼쪽과 오른쪽을 가리키는 두 개의 화살표가 보입니다.
2. 클릭하고 드래그하여 열을 확장하거나 축소할 수 있습니다.
3. 이렇게 하면 열 너비와 두 블록의 전체 크기가 모두 변경됩니다.
4. 필요에 따라 행의 다른 블록 사이의 공간에 대해서도 이 과정을 반복합니다.

클래식 에디터에서 행만들기

행은 콘텐츠 영역의 전체 너비에 걸치거나 기존 열의 블록에 맞춰 정렬하여 스택을 만들 수 있습니다. 행을 생성하려면:

1. 이동하려는 블록 위에 커서를 올리세요. 커서가 손 모양 아이콘으로 바뀝니다. 손 모양이 나타나지 않으면 먼저 블록을 클릭하세요.
2. 블록을 클릭하고 드래그하여 페이지에서 이동시키세요.
3. 블록을 이동하면 블록이 차지할 열 또는 행을 표시하는 가이드라인이 나타납니다.
4. 아래 단계에 따라 블록을 전체 페이지 행 또는 정렬된 행에 배치합니다.

팁: 이미지 블록, 여백 블록, 지도 블록, 그리고 캐러셀 갤러리 블록에는 블록의 높이를 조정할 수 있는 자르기 핸들이 포함되어 있습니다. 이러한 블록을 사용하여 페이지의 행 높이를 사용자 지정할 수 있습니다.

전체 페이지 행 만들기

페이지 또는 게시물 전체에 걸치도록 새 행을 만들려면 블록을 클릭하고 드래그하여 가이드라인이 페이지 전체에 가로로 늘어나도록 하세요.

너비가 일치하는 행 만들기

다른 블록의 너비를 일치시키려면, 가이드라인이 기존 블록의 너비에 맞게 줄어들 때까지 블록을 다른 블록 위나 아래로 이동하세요. 이 작업은 페이지 전체에 전체 행을 만드는 대신 개별 블록을 서로 겹쳐 스택합니다.

클래식 에디터에서 텍스트 전용 열과 행 만들기

텍스트를 열이나 행으로 옮기기는 까다로울 수 있습니다. 텍스트 블록은 겹쳐 쌓으면 병합되는 경우가 많습니다. 페이지를 빌드하는 동안 여백 블록을 사용하여 콘텐츠를 분리하면 이러한 문제를 방지할 수 있습니다.

텍스트 열

텍스트를 열로 이동하는 것은 콘텐츠를 시각적으로 나누거나 이미지 블록과 같은 다른 블록과 텍스트를 짝지을 수 있는 훌륭한 방법입니다. 텍스트 열을 생성하려면:

1. 페이지의 아무 곳에나 첫 번째 텍스트 블록을 추가합니다.
2. 페이지의 아무 곳에나 삽입 지점을 클릭하여 여백 블록을 추가합니다. 첫 번째 텍스트 블록 옆에 있는 블록을 클릭하고 드래그하세요.

3. 페이지의 아무 곳이나 삽입 지점을 클릭하여 다음 텍스트 블록을 추가하세요. 텍스트 블록은 배치 후 이동하기 어려울 수 있습니다. 블록 메뉴에서 텍스트 아이콘을 직접 클릭하고 드래그하세요. 이미 배치된 블록을 이동할 때와 마찬가지로 가이드라인이 표시됩니다.
4. 가이드라인이 같은 높이로 줄어들 때까지 텍스트 아이콘을 여백 블록 쪽으로 드래그한 후, 손을 떼고 텍스트를 추가하세요.

5. 필요한 만큼의 텍스트 열에 여백 블록과 텍스트 블록을 추가하는 과정을 반복하세요.
6. 모든 텍스트 열을 배치했다면 여백 블록을 삭제하여 텍스트 열만 남깁니다.

텍스트 행

텍스트 블록을 쌓아 놓으면 자주 하나의 블록으로 합쳐집니다. 이러한 블록을 구분하려면 줄 또는 여백 블록으로 텍스트를 구분하는 것이 좋습니다. 더 명확하게 정의된 공간이 필요하다면 가로줄 블록을 사용하세요. 열린 공간에는 여백 블록을 사용하세요.

클래식 에디터에서 열과 행 결합

열과 행을 결합하여 페이지를 사용자 지정할 수 있습니다. 일반적인 예로 회사 소개 페이지가 있습니다. 이 페이지에서는 텍스트 블록과 해당 이미지 블록을 짝수 행에 배치하고자 할 수 있습니다. 이 예에서는 이미지 블록 세 개와 텍스트 블록 세 개를 결합하고 있습니다.

열과 행을 결합하려면:

1. 위에 높이가 일치하는 열을 만드는 단계를 사용하여 각각 고유한 열에 있는 세 개의 이미지 블록을 추가합니다.
2. 각 이미지 블록 아래에 텍스트 블록을 추가하세요. 가이드라인이 위의 이미지 블록과 일치하는지 확인하세요. 그러면 각 이미지 아래의 기존 열에 새 행이 생성됩니다.

제목이 필요한 경우 이미지 블록에 정렬된 추가 텍스트 블록을 사용하여 각 열의 맨 위에 제목을 추가합니다.

클래식 에디터에서 열과 행 문제 해결

이미지의 크기가 다른 경우

최상의 결과를 얻으려면 업로드하기 전에 사용 중인 각 이미지의 종횡비가 동일한지 확인하는 것이 좋습니다. 일반적으로 너비가 최소 1500픽셀인 이미지를 사용할 것을 권장합니다. 이미지를 조정하는 데 도움이 필요하면 웹에 표시할 이미지 형식 지정을 참조하세요.

열과 행의 레이아웃이 모바일 기기에 나타나지 않는 경우

사이트 가독성을 유지하고 방문자가 콘텐츠를 보기 위해 핀치, 확대/축소, 스크롤을 하지 않도록 Squarespace의 반응형 디자인은 모바일 기기에서 자동으로 블록을 세로로 스택합니다. 블록의 순서는 열과 행의 구조에 따라 달라집니다.

자세히 알아보려면 클래식 에디터에서 모바일에서 블록이 스택되는 방법을 참조하세요.