Container

Container (컨테이너 요소)

Container는 페이지 요소를 사용자 화면 크기에 맞는 적절한 최대 너비로 제한하는 요소예요. 그리드나 메뉴 같은 UI 요소와 함께 쓰면 너비를 적절히 제한해 보기 좋게 만들 수 있어요.

출처: 문서

본문

컨테이너는 콘텐츠를 최대 너비로 제한해요.

Introduction (소개)

When To Use (언제 사용하나요)

컨테이너는 페이지 요소를 사용자 화면 크기에 기반한 적절한 최대 너비로 담도록 설계된 요소예요. 그리드나 메뉴 같은 다른 UI 요소와 결합해 표시에 적합한 합리적인 너비로 제한할 때 유용해요.

Container Sizes (컨테이너 크기)

컨테이너는 나타나는 화면의 크기에 따라 최대 너비를 반응형으로 조정하도록 설계돼요.

기기	너비	거터 크기	변수	기기 너비
Mobile	100%	1em	`$largestMobileScreen`	768px 미만
Tablet	723px (`768 - (14 * (1 * 2)) - 17`)	Fluid	`$mobileBreakpoint`	768px - 991px
Small Monitor	933px (`992 - (14 * (1.5 * 2)) - 17`)	Fluid	`$smallMonitorBreakpoint`	992px - 1200px
Large Monitor	1127px (`1200 - (14 * (2 * 2)) - 17`)	Fluid	`$largeMonitorBreakpoint`	1200px 초과

wide container를 사용하면 계산된 너비를 커스터마이즈 가능한 배수(기본 1.2)로 늘릴 수 있어요.

Responsive Visibility (반응형 가시성)

Fomantic UI의 변형은 컴포넌트 범위 내에서만 적용되므로 "자유롭게 떠다니는" 반응형 클래스 이름은 없지만, 일부 컴포넌트는 반응형 디자인을 돕기 위한 반응형 변형을 포함해요. 예를 들어 Grid는 기기 유형에 따라 컬럼/로우를 숨기거나 보여주는 반응형 클래스를 포함해요.

그리드 반응형 변형 보기

Determining Maximum Widths (최대 너비 결정)

컨테이너는 각 기기 크기에서 동일한 너비로 나타나요. 이 크기는 주어진 원하는 최소 거터 크기에 대해 기기 중단점 내에서 사용 가능한 최대 기기 너비를 결정함으로써 프로그램 방식으로 계산돼요.

예를 들어 태블릿 컨테이너 크기를 결정할 때 다음 공식이 사용돼요:

/* In site.variables */
@tabletBreakpoint : 768px;
@scrollbarWidth : 17px; /* This is a constant */

/* In container.variables */
@tabletMinimumGutter : (@emSize  * 1); /* require 1em gutter */
@tabletWidth : @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth;
/* When a 'wide' container is used */
@wideRatio: 1.2;
@tabletWideWidth: @tabletWidth * @wideRatio;

이것은 768px - (14px * 2) - 17px 또는 723px(wide 변형은 868px)과 같아요.

site.variables의 사이트 중단점을 커스텀 값으로 조정하면 컨테이너 너비가 자동으로 조정돼요.

Types (유형)

Container (컨테이너)

표준 컨테이너예요.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.

Text Container (텍스트 컨테이너)

컨테이너는 단일 열의 텍스트를 더 자연스럽게 담도록 최대 너비를 줄일 수 있어요.

A text container is a simpler markup alternative to using a grid with a single column, and is designed to have a reasonable maximum width for displaying flowing text

텍스트 컨테이너는 단일 컬럼 그리드를 사용하는 것보다 간단한 마크업 대안이며, 흐르는 텍스트를 표시하기에 합리적인 최대 너비를 가지도록 설계됐어요.

Variations (변형)

Text Alignment (텍스트 정렬)

컨테이너는 텍스트 정렬을 지정할 수 있어요.

Left Aligned (왼쪽 정렬)

Center Aligned (가운데 정렬)

Right Aligned (오른쪽 정렬)

Justified (양쪽 정렬)

justified 콘텐츠는 왼쪽에서 오른쪽까지 전체 너비를 정확히 채워요.

Scrolling (스크롤)

스크롤 컨테이너는 콘텐츠가 스크롤될 수 있도록 미리 정의된 높이를 가져요.

You can also use resizable scrolling and a native resize drag handler will appear to the bottom right of the container. This needs a modern browser, so does not work in IE11 or legacy Edge.

크기 조정 가능한 스크롤을 사용할 수도 있으며, 컨테이너의 오른쪽 아래에 네이티브 크기 조정 드래그 핸들이 나타나요. 이 기능은 최신 브라우저가 필요하므로 IE11이나 레거시 Edge에서는 동작하지 않아요.

스크롤 컨테이너는 선택적으로 미리 정의된 높이 long, very long, short, very short를 지원해요.

Fluid (플루이드)

플루이드 컨테이너는 최대 너비가 없어요.

Fluid containers are useful for setting text alignment, or other variations on unstyled content

플루이드 컨테이너는 텍스트 정렬이나 스타일되지 않은 콘텐츠의 다른 변형을 설정할 때 유용해요.

Dogs Roles with Humans (인간과 개의 역할)

반려견은 물기 억제 같은 복잡한 행동을 늑대 조상으로부터 물려받았어요. 그들은 복잡한 몸짓 언어를 가진 무리 사냥꾼이었을 거예요. 이러한 정교한 형태의 사회적 인지와 의사소통이 그들의 훈련 가능성, 장난기, 인간 가정과 사회적 상황에 적응하는 능력을 설명할 수 있으며, 이러한 속성들은 개에게 인간과의 관계를 부여해 지구상에서 가장 성공적인 종 중 하나가 되게 했어요.

초기 인간 수렵·채집인에게 개의 가치는 개가 전 세계 문화 전반에 빠르게 보편화되게 했어요. 개는 사냥, 목축, 짐 끌기, 보호, 경찰·군 지원, 반려, 그리고 최근에는 장애인 지원 등 사람을 위해 많은 역할을 수행해요. 인간 사회에 대한 이러한 영향은 서양에서 "인간의 가장 친한 친구"라는 별명을 주었어요. 다만 일부 문화에서는 개가 고기 공급원이 되기도 해요.

Examples (예제)

Containers Using Grids (그리드를 사용하는 컨테이너)

컨테이너는 그리드와 결합할 수 있어 반응형 패턴을 포함한 그리드의 모든 레이아웃·정렬 기능을 사용할 수 있어요.

Centered Menu (가운데 정렬 메뉴)

컨테이너는 메뉴 안에서 사용해 메뉴 항목이 페이지 내용과 인라인으로 나타나도록 할 수 있어요. stackable menu 같은 반응형 변형을 사용하면 콘텐츠를 다양한 기기 크기에 맞게 조정하는 데 도움이 돼요.

Home (홈)
Browse (둘러보기)
Messages (메시지)
More (더 보기)
  Edit Profile (프로필 편집)
  Choose Language (언어 선택)
  Account Settings (계정 설정)

Container Segment (컨테이너 세그먼트)

컨테이너는 세그먼트와 함께 사용할 수 있어요.

더 알아보기 (Learn more)

Container는 반응형 너비를 제한하는 간단한 요소예요. text container로 읽기 좋은 텍스트 폭을 잡고, wide container로 너비를 키우며, fluid container로 제한 없이 사용할 수 있어요. 그리드나 메뉴와 결합하면 전체 페이지 레이아웃의 뼈대가 돼요.