Grid
Grid (그리드 컬렉션)
Grid는 페이지의 가로 공간을 컬럼과 로우로 나누어 콘텐츠를 정렬하는 레이아웃 구조예요. 16컬럼 기준으로 동작하며, 반응형 변형으로 다양한 화면 크기에 대응할 수 있어요.
출처: 문서
본문
Introduction (소개)
Grids (그리드)
그리드는 디자인의 여백(negative space)을 정렬하는 데 사용된 오랜 역사를 가진 구조예요.
Columns (컬럼)
그리드는 가로 공간을 "열(column)"이라고 하는 나눌 수 없는 단위로 나눠요. 그리드의 모든 컬럼은 전체 사용 가능한 로우 너비에 대한 비율로 자신의 너비를 지정해야 해요.
Rows (로우)
로우는 가로로 정렬되는 컬럼들의 그룹이에요.
After each group of columns vertical spacing is added to separate each group of columns, creating vertical rhythm.
각 컬럼 그룹 뒤에는 세로 간격이 추가되어 컬럼 그룹들을 분리하고, 세로 리듬을 만들어요.
Gutters (거터)
그리드 컬럼들은 "거터(gutter)"라고 하는 흰 공간으로 분리돼요. 거터는 페이지 요소 사이에 여백을 제공해 가독성을 개선해요.
Negative Margins (음수 마진)
모든 그리드 컬럼은 거터를 포함하므로, 그리드는 첫 번째와 마지막 컬럼이 그리드 바깥의 콘텐츠와 깔끔하게 붙도록 음수 마진을 사용해요.
Button before grid (그리드 앞 버튼)
Button after grid (그리드 뒤 버튼)
Page Grids (페이지 그리드)
그리드는 유동적이며 사용 가능한 최대 너비를 차지하도록 크기가 자동으로 흘러가요.
Columns (컬럼)
Automatic Flow (자동 흐름)
대부분의 그리드는 로우를 지정할 필요가 없어요. 현재 로우의 모든 그리드 컬럼이 차면 콘텐츠는 다음 로우로 자동으로 흘러가요.
Column Content (컬럼 콘텐츠)
컬럼은 거터를 만들기 위해 패딩을 사용하므로, 콘텐츠 스타일은 컬럼에 직접 적용하지 말고 컬럼 안의 요소에 적용해야 해요.
Column Widths (컬럼 너비)
컬럼 너비는 (x) wide 클래스 이름을 사용해 지정할 수 있어요. 컬럼이 로우에 맞지 않으면 다음 로우로 자동으로 흘러가요.
Left / Right Attached Column (왼쪽/오른쪽 부착 컬럼)
컬럼은 패딩 없이 왼쪽이나 오른쪽에 부착할 수 있어요. 세로 탭 메뉴와 함께 작업할 때 특히 유용해요.
Rows (로우)
Grouping (그룹화)
로우 래퍼는 컬럼 그룹에 변형을 적용할 수 있게 해줘요.
Clearing Content (콘텐츠 지우기)
로우 래퍼는 이전 컬럼을 자동으로 지워주기 때문에, 부동(floated) 변형을 사용할 때 유용해요.
Special Grids (특수 그리드)
또한 divided나 celled 같은 일부 그리드 유형은 포맷을 올바르게 적용하려면 로우 래퍼가 필요해요.
Varying Grids (다양한 그리드)
Nesting Grids (중첩 그리드)
그리드는 다른 그리드 안에 넣을 수 있어서, 컬럼을 다시 세분화할 수 있어요.
Colored (색상)
그리드는 이름 있는 색상 변형으로 배경색을 추가할 수 있어요. 단, 음수 마진을 포함하지 않는 padded 그리드에만 적용돼요.
Olive
Black
Custom Row (커스텀 로우)
Black
Olive
Automatic Column Count (자동 컬럼 수)
동일 너비(equal width) 변형은 컬럼 너비를 자동으로 균등하게 나눠요. 컬럼 수를 미리 알 수 없는 동적 콘텐츠에서 유용해요.
Centering Content (콘텐츠 중앙 정렬)
로우가 16개의 그리드 컬럼을 모두 차지하지 않는다면, centered 변형을 사용해 컬럼 내용을 그리드 안에서 중앙에 정렬할 수 있어요.
Significant Word Order (중요한 단어 순서)
그리드에는 세로/가로 정렬, 텍스트 정렬, 기본 거터 크기 등 여러 가지를 조정하는 많은 변형이 포함돼요.
Left floated right aligned column (왼쪽 부동 우측 정렬 컬럼)
Right floated left aligned column (오른쪽 부동 좌측 정렬 컬럼)
Center aligned row (가운데 정렬 로우)
Center aligned row (가운데 정렬 로우)
Right Aligned Column (우측 정렬 컬럼)
Responsive Grids (반응형 그리드)
Containers (컨테이너)
컨테이너는 그리드와 함께 사용해 페이지 내용을 감싸는 반응형 고정 너비 컨테이너를 제공할 수 있어요.
Stackable (스택 가능)
스택 가능한 그리드는 모바일 기기에서 로우를 자동으로 단일 컬럼으로 쌓아요.
Reverse Order (역순)
Fomantic에는 기기별로 컬럼이나 로우의 순서를 뒤집을 수 있는 특별한 역순 변형이 포함되어 있어요.
First (첫 번째)
Second (두 번째)
Third (세 번째)
Doubling (배증)
doubling 그리드는 기기 단계가 바뀔 때마다 컬럼 너비를 두 배로 늘려요.
Manual Tweaks (수동 조정)
Although design patterns like doubling or stackable are useful at simplifying responsive styling, you can also manually tweak device presentation by specifying (x) wide device or device only columns or rows.
doubling이나 stackable 같은 디자인 패턴이 반응형 스타일링을 단순화하는 데 유용하지만, (x) wide 기기나 기기 전용 컬럼/로우를 지정해 기기 표현을 수동으로 조정할 수도 있어요.
Types (유형)
Grid (그리드)
Flexbox
기본 그리드예요.
Divided (구분됨)
Requires Rows (로우 필요)
그리드는 컬럼 사이에 구분선을 가질 수 있어요.
Vertically Divided (세로 구분)
Requires Rows (로우 필요)
그리드는 로우 사이에 구분선을 가질 수 있어요.
Celled (셀 구분)
Requires Rows (로우 필요)
그리드는 로우를 셀로 나눌 수 있어요.
Internally Celled (내부 셀 구분)
Requires Rows (로우 필요)
그리드는 내부 로우 사이에만 구분을 가질 수 있어요.
Content (콘텐츠)
Rows (로우)
로우는 컬럼의 가로 그룹핑이에요.
Columns (컬럼)
각 컬럼은 거터를 포함해 다른 컬럼과 동일한 간격을 가지게 돼요.
Variations (변형)
Floated (부동)
컬럼은 로우의 왼쪽이나 오른쪽 가장자리에 딱 붙을 수 있어요.
Column Width (컬럼 너비)
컬럼은 하나의 그리드 컬럼보다 더 많은 공간을 차지하며 너비를 달리할 수 있어요.
Column Count (컬럼 수)
그리드는 로우마다 다른 수의 컬럼을 가질 수 있어요.
Equal Width (동일 너비)
그리드는 모든 요소를 자동으로 크기 조정해 사용 가능한 너비를 균등하게 나눌 수 있어요.
1
2
3
1
2
3
4
1
2
3
1
2
Stretched (늘림)
로우는 내용을 늘려 전체 컬럼 높이를 차지하게 할 수 있어요.
1
1
2
1
2
3
1
2
1
2
1
2
1
2
Padded (패딩)
그리드는 첫 번째와 마지막 컬럼의 세로/가로 거터를 유지할 수 있어요.
다음 그리드는 세로 거터를 가져요.
다음 그리드는 가로 거터를 가져요.
Compact (컴팩트)
그리드는 패딩이 없거나 거의 없는 컴팩트하게 보일 수 있어요.
다음 그리드는 매우 컴팩트해요.
Relaxed (여유)
그리드는 거터를 늘려 더 많은 여백을 제공할 수 있어요.
Colored (색상)
로우나 컬럼은 색상을 입힐 수 있어요.
Red (빨강)
Orange (주황)
Yellow (노랑)
Olive (올리브)
Green (초록)
Teal (청록)
Blue (파랑)
Violet (보라)
Purple (자주)
Pink (분홍)
Brown (갈색)
Grey (회색)
Black (검정)
Red (빨강)
Orange (주황)
Yellow (노랑)
Olive (올리브)
Green (초록)
Teal (청록)
Blue (파랑)
Violet (보라)
Purple (자주)
Pink (분홍)
Brown (갈색)
Grey (회색)
Black (검정)
Centered (중앙 정렬)
그리드는 컬럼을 중앙에 정렬할 수 있어요.
Text Alignment (텍스트 정렬)
그리드, 로우, 컬럼은 텍스트 정렬을 지정할 수 있어요.
Cats (고양이)
Dogs (개)
Poodle (푸들)
Cockerspaniel (코커스패니얼)
Monkeys (원숭이)
정렬된(justified) 콘텐츠는 그리드 컬럼 안에 정확히 맞으며, 한쪽에서 다른 쪽까지 전체 너비를 차지해요. 정렬된 콘텐츠는 그리드 컬럼 안에 정확히 맞으며, 한쪽에서 다른 쪽까지 전체 너비를 차지해요. 정렬된 콘텐츠는 그리드 컬럼 안에 정확히 맞으며, 한쪽에서 다른 쪽까지 전체 너비를 차지해요.
Cats (고양이)
Dogs (개)
Poodle (푸들)
Cockerspaniel (코커스패니얼)
Monkeys (원숭이)
Cats (고양이)
Dogs (개)
Poodle (푸들)
Cockerspaniel (코커스패니얼)
Monkeys (원숭이)
Vertical Alignment (세로 정렬)
그리드, 로우, 컬럼은 모든 컬럼이 세로로 중앙 정렬되도록 세로 정렬을 지정할 수 있어요.
Responsive Variations (반응형 변형)
Doubling (배증)
그리드는 태블릿과 모바일 크기에서 컬럼 너비를 두 배로 늘릴 수 있어요.
A grid will round its columns to the closest reasonable value when doubling, for example a five column grid will use 2 mobile, 3 tablet, 5 desktop. To force 1 column on mobile you can add stackable
배증 시 그리드는 컬럼을 가장 가까운 합리적인 값으로 반올림해요. 예를 들어 5컬럼 그리드는 모바일 2, 태블릿 3, 데스크톱 5를 사용해요. 모바일에서 1컬럼을 강제하려면 stackable을 추가하면 돼요.
Stackable (스택 가능)
그리드는 모바일 중단점에 도달한 후 컬럼을 서로 위에 쌓을 수 있어요.
To see a grid stack, try resizing your browser to a small width
그리드가 스택되는 걸 보려면 브라우저를 작은 너비로 조정해 보세요.
Reversed (역순)
그리드나 로우는 다른 기기 크기에서 컬럼 순서가 반대로 되도록 지정할 수 있어요.
Computer A Fourth (컴퓨터 A 넷째)
Computer A Third (컴퓨터 A 셋째)
Computer A Second (컴퓨터 A 둘째)
Computer A First (컴퓨터 A 첫째)
Computer B Fourth (컴퓨터 B 넷째)
Computer B Third (컴퓨터 B 셋째)
Computer B Second (컴퓨터 B 둘째)
Computer B First (컴퓨터 B 첫째)
Tablet Fourth (태블릿 넷째)
Tablet Third (태블릿 셋째)
Tablet Second (태블릿 둘째)
Tablet First (태블릿 첫째)
Mobile Fourth (모바일 넷째)
Mobile Third (모바일 셋째)
Mobile Second (모바일 둘째)
Mobile First (모바일 첫째)
Computer Row 4 (컴퓨터 로우 4)
Computer Row 3 (컴퓨터 로우 3)
Computer Row 2 (컴퓨터 로우 2)
Computer Row 1 (컴퓨터 로우 1)
Tablet Row 4 (태블릿 로우 4)
Tablet Row 3 (태블릿 로우 3)
Tablet Row 2 (태블릿 로우 2)
Tablet Row 1 (태블릿 로우 1)
Mobile Row 4 (모바일 로우 4)
Mobile Row 3 (모바일 로우 3)
Mobile Row 2 (모바일 로우 2)
Mobile Row 1 (모바일 로우 1)
Device Visibility (기기 가시성)
컬럼이나 로우는 특정 기기나 화면 크기에서만 나타날 수 있어요.
See container documentation for information on breakpoint calculations
Large Screen (대형 화면)
Large Screen (대형 화면)
Widescreen (와이드 화면)
Widescreen (와이드 화면)
Mobile (모바일)
Mobile (모바일)
Computer (컴퓨터)
Tablet and Mobile (태블릿과 모바일)
All Sizes (모든 크기)
All Sizes (모든 크기)
Computer (컴퓨터)
Computer (컴퓨터)
Computer (컴퓨터)
Computer (컴퓨터)
Tablet (태블릿)
Tablet (태블릿)
Tablet (태블릿)
중단점 계산에 대한 정보는 컨테이너 문서를 참조하세요.
Responsive Width (반응형 너비)
컬럼은 특정 기기용 너비를 지정할 수 있어요.
더 알아보기 (Learn more)
Grid는 Fomantic UI 레이아웃의 기반이에요. 16컬럼 체계와 stackable, doubling, reversed 같은 반응형 변형을 조합하면 데스크톱부터 모바일까지 깔끔한 레이아웃을 만들 수 있어요. 콘텐츠 스타일은 컬럼이 아닌 컬럼 안의 요소에 적용하는 것이 원칙이에요.