뼈대

CSS 프레임워크라고도 하는 프레임워크는 레이아웃을 구성하기 위한 프레젠테이션 속성입니다. 프레임워크 콘텐츠를 재배열하고 크기를 조정하여 동적이고 수용적인 디자인을 생성할 수 있는 적응성을 제공합니다. 프레임워크는 표시 옵션이므로 지령.

이 세션에서 여러분은 다음을 발견하게 될 것입니다:

1. 프레임워크를 설정하고 조정하는 방법
2. 프레임워크에 콘텐츠를 배치하는 방법
3. 프레임워크 콘텐츠를 이동, 확장 및 정렬하는 방법
4. 반응형 프레임워크를 만드는 방법

프레임워크를 설정하고 조정하는 방법

프레임워크를 구축하기 위해서는 프레임워크를 지원하는 요소(예: 세그먼트, div 블록 등)를 워크스페이스에 도입합니다. 패널 추가. 그런 다음 해당 요소를 선택하고 스타일 패널 > 공들여 나열한 것 > 표시하다을 선택하고 뼈대.

프레임워크를 직접 편집할 수 있는 기능이 있습니다. 스타일 패널 또는 프레임워크 편집 모드에서. 프레임워크 편집 모드로 들어가려면 “렌치” 아이콘 옆에 열 그리고 행 필드를 클릭하거나 작업 공간에서 프레임워크를 선택하고 "그리드 편집” 아이콘입니다. 프레임워크 편집 모드를 종료하려면 완료 작업 공간 오버레이에서 "닫다프레임워크 설정의 ' 아이콘.

열과 행 통합

프레임워크에 새 열과 행을 포함하려면 다음을 진행하세요. 스타일 패널 > 공들여 나열한 것 > 표시하다 그리고 “증가하다” 버튼을 해당 기둥 그리고 행 필드. 당신은 또한 수:

• 열 및 행 필드에 숫자 값을 삽입합니다.
• 프레임워크 편집 모드에 액세스하고 "...을 더한” 아이콘 스타일 패널 > 프레임워크 설정
• 프레임워크 편집 모드를 시작하고 "...을 더한작업 공간의 ” 아이콘

열과 행 복제 및 제거

열과 행을 제거하는 방법에는 세 가지가 있습니다.

• “감소하다” 버튼을 기둥 그리고 행 필드
• 프레임워크 편집 모드에 액세스하고 열이나 행 위로 마우스를 가져가세요. 스타일 패널 > 프레임워크 설정, 그리고 '쓰레기" 아이콘
• 프레임워크 편집 모드에 액세스하고 작업 공간에서 열 또는 행 헤더를 클릭하거나 마우스 오른쪽 버튼으로 클릭한 다음 삭제

프레임워크 편집 모드에서 열과 행을 복제하는 방법에는 두 가지가 있습니다. 열이나 행 위로 마우스를 가져갈 수 있습니다. 스타일 패널 > 프레임워크 설정 그리고 “를 선택하세요.복제하다” 아이콘을 클릭하거나 작업 공간의 열 또는 행 헤더를 마우스 오른쪽 버튼으로 클릭하고 복제하다.

열과 행 재구성

프레임워크 편집 모드에서 열과 행을 다시 정렬할 수 있습니다. 이동하려는 행이나 열 위로 마우스를 이동한 후 왼쪽에 나타나는 핸들을 원하는 위치로 드래그하세요.

열과 행 사이의 공백 수정

공백을 사용하면 여백이나 안쪽 여백을 추가할 필요 없이 열과 행 사이의 거리를 지정할 수 있습니다. 열과 행 사이의 간격 크기를 조정하려면 다음으로 이동하세요. 스타일 패널 > 공들여 나열한 것 > 갭 그리고 값을 입력합니다.

기본적으로 열과 행 사이의 여백은 동기화됩니다. 이는 열의 간격 크기를 수정하면 행의 간격 크기가 자동으로 동일한 값으로 조정됨을 나타냅니다. 열과 행 사이의 간격을 독립적으로 변경하려면 "잠그다” 아이콘을 클릭해 잠금을 해제하세요.

내부자 팁: 간격 크기를 빠르게 확장하거나 줄이려면 갭 레버 또는 누르기 옵션 (Mac의 경우) 또는 Alt (Windows의 경우) 열 또는 행 필드 위에서 마우스를 왼쪽이나 오른쪽으로 이동합니다. 

열 및 행 크기 조정

열 또는 행 머리글을 선택하고 작업 공간에서 원하는 크기로 끌어 프레임워크 편집 모드에서 그리드 열과 행의 비율을 수정할 수 있습니다. 행 또는 열 헤더를 클릭하여 열 또는 행의 사용자 정의 크기를 지정할 수도 있습니다.

프레임워크 크기 조정

프레임워크 크기를 결정할 때 표준 단위(예: px, em, rem)를 활용하거나 FR 단위. FR 단위는 프레임워크에서 사용 가능한 공간의 일부를 상징합니다. 이를 사용하여 백분율 또는 픽셀 단위와 유사한 행과 열의 길이를 묘사하지만, 고정된 백분율 또는 픽셀 단위와는 달리 FR 단위는 간격을 고려하면서 행과 열 공간을 자동으로 계산합니다.

설정할 수도 있습니다. 최소 최대 행과 열이 지정된 최소값 아래로 줄어들거나 규정된 최대값을 초과하지 않도록 보장합니다. 예를 들어 행의 최소 높이를 200px로 유지하려면 최소값을 200px로, 최대값을 자동으로 설정하면 됩니다. 이후에는 행이 내부 콘텐츠에 따라 확장되며 결코 200px 이하로 줄어들지 않습니다.

프레임워크에 콘텐츠를 배치하는 방법

프레임워크 내에 다양한 하위 요소(예: 제목, 이미지, div 블록 등)를 삽입할 수 있습니다. 기본적으로 각각의 새로운 프레임워크 하위 항목은 개별 프레임워크 셀을 채우고 왼쪽에서 오른쪽으로 사용 가능한 다음 셀을 차지합니다. 행에 더 이상 빈 셀이 없으면 새 프레임워크 하위 항목을 수용하기 위해 새 행이 생성됩니다.

프레임워크 콘텐츠의 흐름 방향을 변경합니다.

프레임워크 하위 항목의 방향을 변경할 수 있는 옵션이 있습니다. 스타일 패널 > 방향. 여기에서 선택할 수 있습니다. 수평의, 자식을 왼쪽에서 오른쪽으로 정렬하거나 수직의, 위에서 아래로 자식을 정렬합니다.

그리드 내에 콘텐츠를 수동으로 배치

콘텐츠를 그리드에 수동으로 배치하려면 옮기다 요소를 그리드로 드래그하는 동안 키를 누릅니다. 기존 그리드 하위 항목의 위치 설정을 수동으로 수정할 수도 있습니다. 이를 달성하려면 그리드 하위를 선택하고 스타일 패널 > 그리드 자식 > 위치으로 변경하고 수동.

수동으로 배치된 그리드 하위 항목은 할당된 그리드 셀에 유지되는 반면, 자동으로 배치된 그리드 하위 항목은 다음 셀로 이동하여 새 그리드 하위 항목을 수용하도록 조정됩니다.

그리드 셀에 다양한 요소를 중첩하는 방법

그리드 하위 내에 요소를 중첩하여 단일 그리드 셀에 여러 요소를 삽입할 수 있습니다. 이를 달성하려면 먼저 구조적 요소(예: div 블록)를 직접 그리드 하위 항목으로 그리드에 추가하세요. 구조적 요소를 그리드 하위 요소로 추가한 후에는 키를 길게 눌러 div 블록 내에 다른 요소를 포함할 수 있습니다. 명령 (Mac의 경우) 또는 제어 (Windows의 경우) 요소를 그리드 셀로 드래그합니다. 또는 구조 요소를 선택하고 빠른 찾기를 사용하여 추가 요소를 추가할 수 있습니다.

그리드의 콘텐츠 복제

여러 그리드 셀에서 동일한 콘텐츠를 재사용하기 위해 그리드 하위 항목을 복제하는 두 가지 옵션이 있습니다.

• 길게 누르기 옵션 (Mac의 경우) 또는 Alt (Windows의 경우) 복제할 콘텐츠를 드래그하여 새 그리드 셀로 재배치합니다.
• 내용을 복사한 후 그리드를 선택하고 내용을 붙여넣으세요.

그리드에서 콘텐츠의 이동, 확장 및 정렬 관리

콘텐츠를 그리드 내에 배치한 후에는 해당 콘텐츠의 디자인을 맞춤설정할 수 있습니다. 콘텐츠를 다른 셀로 이동하여 콘텐츠 위치를 조정하고, 콘텐츠를 여러 셀에 걸쳐 표시하고, 그리드 내에서 콘텐츠를 정렬할 수도 있습니다.

그리드 하위 위치 변경

그리드 내에서 콘텐츠를 이동하려면 그리드 하위 항목을 선택하여 캔버스 또는 그리드 내에서 원하는 위치로 드래그하세요. 항해자.

그리드 아이들의 순서를 정하세요

그리드 하위 항목을 선택하고 다음으로 이동하여 그리드 하위 항목의 순서를 설정할 수도 있습니다. 스타일 패널 > 그리드 자식 > 주문하다.

그리드에 콘텐츠 정렬

모든 그리드 하위 항목의 정렬을 변경하려면 그리드를 선택하고 스타일 패널 > 공들여 나열한 것 > 맞추다. 사용 정렬 상자 (3 x 3 그리드) 그리드 콘텐츠를 빠르게 정렬합니다. 에 대한 제어 엑스 그리고 와이 축은 다음에서 설정된 값에 해당합니다. 정렬 상자. 정렬 상자 활용에 대해 자세히 알아보세요.

특정 그리드 하위 항목의 정렬을 조정하려면 그리드 하위 항목을 선택하고 스타일 패널 > 그리드 자식. 여기에서 아래의 그리드 하위 항목에 대한 정렬 또는 자리맞추기를 설정할 수 있습니다. 맞추다 그리고 신이 옳다고 하다.

그리드 하위 항목 확장

여러 그리드 셀에 걸쳐 자동으로 배치된 그리드 하위 항목을 확장하려면 그리드 하위 항목을 선택하고 스타일 패널 > 그리드 자식 > 위치, 개수를 지정합니다. 기둥 그리고 행 그리드 자식이 확장되어야 합니다.

수동으로 배치된 그리드 하위 항목을 늘리려면 그리드 하위 항목을 선택하고 스타일 패널 > 그리드 자식 > 위치, 시작과 끝을 나타냅니다. 기둥 그리고 행 그리드 아이를 위해.

안전한 그리드 아동 배치

음수 값을 사용하면 그리드 끝을 기준으로 그리드 하위 항목을 배치할 수 있습니다. 이는 오른쪽에서 왼쪽으로 또는 아래에서 위로 셀을 참조합니다.

다음과 같은 경우 네거티브 그리드 하위 위치 지정이 도움이 될 수 있습니다.

• 새로운 열을 추가할 때마다 탐색 모음을 다시 확장하는 대신 첫 번째 열과 마지막 열 사이의 탐색 모음 위치를 유지하려고 합니다.
• 추가된 행 수에 관계없이 바닥글을 그리드의 맨 아래 행에 유지하려는 경우 — 바닥글을 행 -1/-1에 배치합니다.
• 기본 콘텐츠 섹션을 그리드의 중앙에 일관되게 유지하고 양쪽에 동일한 열을 유지하는 것을 목표로 합니다. "끝" 값을 "시작" 값의 음수 값과 일치하도록 설정합니다(예: 3/-3). 이렇게 하면 더 작은 중단점에서 열이 제거되더라도 하위 항목이 중앙에 유지됩니다.

그리드 하위 구성 재설정

그리드 하위 설정은 선택한 요소에만 적용되며 클래스와 함께 저장되지 않습니다. 변경된 설정은 분홍색 레이블로 반영됩니다. 스타일 패널 현재 중단점에서 선택한 요소에만 적용됩니다. 이러한 설정은 낮은 중단점까지 계단식으로 적용되며 주황색 레이블로 표시됩니다. 더 작은 중단점에서 상속된(예: 주황색) 설정을 재정의하면 표시기가 분홍색으로 되돌아갑니다.

적용된 그리드 하위 설정을 제거하려면 해당 설정의 분홍색 레이블을 클릭한 다음 초기화.

그리드 하위 항목 간의 중첩

수동 위치 지정을 사용하는 그리드 하위 요소는 동일한 셀 내에서 교차할 때 자동으로 겹칩니다. 탐색기에서 요소를 다시 조정하거나 위치 지정 및 Z-색인 설정을 수정하여 이러한 겹치는 요소의 스택 순서를 관리할 수 있습니다.

비어 있는 그리드 셀 채우기

그리드 하위 항목이 확장되면 빈 셀이 그리드에 남아 있을 수 있습니다. 이러한 셀에 콘텐츠를 자동으로 채우려면 다음으로 이동하세요. 스타일 패널 > 공들여 나열한 것 > 방향 "밀집" 아이콘을 선택하세요.

메모: "밀도" 설정을 활성화하면 그리드의 빈 셀에 그리드 하위 항목을 수용하려고 합니다. 그러나 이는 페이지에서의 실제 위치가 아닌 항목 표시에만 영향을 미치므로 접근성 문제가 발생할 수 있습니다.

반응형 그리드 디자인 만들기

그리드 디자인이 다양한 화면 크기에 맞게 조정되도록 하려면 더 작은 중단점에서 열을 수동으로 제거하거나 자동 맞춤을 활성화하여 더 작은 화면에 맞게 자동으로 열과 행을 생성할 수 있습니다.

반응형으로 그리드 레이아웃 사용자 정의

그리드 디자인이 모든 장치에서 반응하도록 하려면 더 작은 중단점에 대해 필요에 따라 열 수를 조정하십시오.

더 작은 중단점에서 열을 변경할 수 없는 경우:

• 그리드를 바꿔보세요 방향 에게 열
• 해당 열 내에 수동으로 배치된 그리드 하위 항목이 없는지 확인하세요.
• 해당 열에 걸쳐 있는 하위 요소가 없는지 확인하세요.

자동 맞춤 구현

자동 맞춤은 각 중단점을 조정할 필요 없이 모든 화면 크기에 걸쳐 응답성을 보장하기 위해 자동으로 열을 반복하고 줄바꿈하는 그리드의 강력한 기능입니다.

자동 맞춤을 활성화하려면 그리드에 하나의 열과 행만 유지하세요. 그리드 편집 모드로 전환하고 열 머리글을 클릭한 다음 열의 최소 및 최대 크기를 지정하고 활성화합니다. 자동 맞춤. 그리드 내에 콘텐츠를 반응적으로 배포하기 위해 추가 열이 자동으로 생성되고 반복됩니다.