CSS Flexbox 플레이그라운드

CSS Flexbox 플레이그라운드 정보

CSS Flexbox 플레이그라운드는 현대적인 CSS Flexible Box Layout 모듈을 위한 대화형 학습 환경이자 코드 생성기입니다. 컨테이너 속성(flex-direction, justify-content, align-items, gap)과 아이템별 속성(flex-grow, flex-shrink, flex-basis, align-self, order)을 조정하고 레이아웃이 실시간으로 업데이트되는 것을 확인해 보세요. 마음에 드는 구성을 만들었다면 프로젝트에 바로 붙여넣을 수 있는 CSS와 HTML 코드를 복사하세요.

CSS Flexbox란 무엇인가요?

CSS Flexbox(Flexible Box Layout)는 단일 축(행 또는 열)을 따라 공간을 분배하고 컨테이너 내의 아이템을 정렬하도록 설계된 1차원 레이아웃 모델입니다. 내비게이션 바, 카드 행, 중앙 정렬 콘텐츠 및 요소가 컨테이너에 맞춰 자연스럽게 유연해져야 하는 모든 UI에서 float나 inline-block 핵과 같은 오래된 기술을 대체합니다. 2차원인 CSS Grid와 달리 Flexbox는 한 번에 한 방향으로만 정렬을 제어하는 단순한 배치에 탁월합니다.

이 플레이그라운드 사용 방법

1. 프리셋 선택 (선택 사항): Holy Grail, Card Grid, Navbar, Hero, Modal 또는 Sticky Footer를 선택하여 실제 활용 사례를 불러오세요. 각 프리셋은 연구하거나 수정할 수 있는 완전한 작동 레이아웃입니다.
2. 컨테이너 속성 조정: 오른쪽 패널의 세그먼트 제어기를 사용하여 flex-direction, flex-wrap, justify-content, align-items, align-content 및 gap을 설정하세요. 시각적 스테이지가 즉시 업데이트됩니다.
3. 개별 아이템 편집: 미리보기에서 아무 아이템이나 클릭하여 선택하세요. 해당 아이템의 order, flex-grow, flex-shrink, flex-basis 및 align-self를 다른 아이템과 독립적으로 덮어쓸 수 있습니다. 속성이 변경된 아이템은 작은 배지로 표시됩니다.
4. 아이템 추가 또는 제거: 아이템 추가 및 선택 항목 제거를 사용하여 아이템 개수를 변경하고 레이아웃이 어떻게 반응하는지 확인하세요.
5. 코드 복사: 하단의 생성된 코드 섹션에는 항상 현재 레이아웃이 반영됩니다. 클릭 한 번으로 CSS, HTML 또는 둘 다를 복사하세요.

컨테이너 속성 참조

flex 컨테이너는 display: flex가 적용된 부모 요소입니다. 이 속성들은 모든 자식 요소들이 함께 작동하는 방식을 제어합니다.

아이템 속성 참조

이 속성들은 개별 flex 아이템(컨테이너의 자식)에 적용되며 해당 아이템에 대해서만 컨테이너의 기본 설정을 덮어씁니다.

justify-content와 align-items의 차이점은 무엇인가요?

justify-content는 주축(main axis)을 따라 정렬을 제어하고, align-items는 교차축(cross axis)을 따라 정렬을 제어합니다. 주축은 flex-direction에 의해 결정됩니다. row일 때는 가로, column일 때는 세로입니다. flex-direction을 row에서 column으로 바꾸면 두 축이 서로 바뀌므로 justify-content는 세로 방향이 되고 align-items는 가로 방향이 됩니다. 이 축 변경은 Flexbox를 배울 때 가장 혼란스러운 부분 중 하나입니다. 미리보기 하단의 축 표시기를 통해 이를 시각적으로 확인할 수 있습니다.

Flexbox로 요소를 어떻게 중앙에 배치하나요?

단일 요소를 가로 및 세로 양방향으로 중앙 정렬하려면:

이것은 margin: auto, transform: translate(-50%, -50%) 또는 position: absolute를 사용하는 과거의 정렬 방식을 대체하는 현대적인 방법입니다. 플레이그라운드에서 Modal Center 프리셋을 선택하여 직접 확인해 보세요.

실제 레이아웃 프리셋 설명

Holy Grail 레이아웃

헤더와 푸터가 있고 왼쪽 사이드바, 메인 콘텐츠, 오른쪽 사이드바가 있는 고전적인 3단 페이지 레이아웃입니다. 과거에는 float로 구현하기 매우 까다로웠으나 Flexbox를 쓰면 매우 간단해집니다. 중간 컬럼에 flex: 1을 주어 사이드바가 고정된 너비를 유지하는 동안 남은 가로 공간을 모두 차지하게 만듭니다.

Card Grid

뷰포트가 좁아짐에 따라 다음 줄로 넘어가는 카드 행 레이아웃입니다. flex-wrap: wrap을 사용하고 각 카드에 flex: 1 1 240px을 부여합니다. 이는 카드가 늘어나거나 줄어들 수 있지만 240px보다 좁아지지는 않음을 의미합니다.

Navbar

왼쪽에 로고가 있고 오른쪽에 링크들이 있는 가로형 내비게이션 바입니다. 로고와 링크 그룹을 두 자식 요소로 두고 justify-content: space-between을 적용하는 것이 핵심이며, 링크들 자체를 위해 내부적으로 또 다른 flex 컨테이너를 사용합니다.

Hero 섹션

콘텐츠가 가로 및 세로 모두 중앙에 정렬된 수직 스택 레이아웃으로, 랜딩 페이지의 히어로 영역에 적합합니다. 높은 컨테이너에 flex-direction: column, justify-content: center, align-items: center를 사용합니다.

Modal Center

오버레이 내에서 완벽하게 중앙에 배치된 모달 대화 상자입니다. 위에서 설명한 세 줄 중앙 정렬 레시피를 전체 화면 오버레이 컨테이너에 적용한 방식입니다.

Sticky Footer

콘텐츠가 짧을 때는 뷰포트 하단에 머물고, 콘텐츠가 길어지면 아래로 밀려나는 푸터입니다. body에 display: flex; flex-direction: column; min-height: 100vh를 주고 메인 콘텐츠 요소에 flex: 1을 주어 구현합니다.

flex-grow, flex-shrink, flex-basis의 차이점은 무엇인가요?

이 세 가지 속성(단축 속성 flex로 결합됨)은 아이템이 공간을 처리하는 방식을 설명합니다.

• flex-basis는 여유 공간이 분배되기 전 아이템의 이상적인 크기를 설정합니다. 아이템의 "시작 지점"이라고 생각하면 됩니다.
• flex-grow는 "남는 공간이 있다면 이 비율만큼 가져가라"는 뜻입니다. 0은 늘어나지 않음을, 1은 비례하여 늘어남을, 2는 1인 아이템보다 두 배 더 가져감을 의미합니다.
• flex-shrink는 "공간이 부족하다면 이 비율만큼 줄어들어라"는 뜻입니다. 기본값은 1(비례하여 줄어듦)이며, 0은 절대 줄어들지 않음을 뜻합니다.

단축 속성 flex: 1은 flex: 1 1 0%로 확장됩니다. 즉, 똑같이 늘어나고 똑같이 줄어들며 기준 크기가 0이 되어, 콘텐츠에 관계없이 모든 아이템이 컨테이너 공간을 균등하게 나누어 가집니다. flex: auto는 flex: 1 1 auto로 확장되어 콘텐츠 크기를 기준(basis)으로 존중합니다.

언제 Flexbox를 쓰고 언제 Grid를 써야 하나요?

버튼 행, 내비게이션 바, 단일 컬럼 카드와 같이 아이템이 한 방향으로 흐르는 1차원 레이아웃에는 Flexbox를 사용하세요. Flexbox는 콘텐츠의 크기에 민감하며 아이템이 스스로 크기를 정하게 하고 싶을 때 훌륭합니다.

전체 페이지 레이아웃, 이미지 갤러리, 대시보드와 같이 행과 열을 동시에 제어해야 하는 2차원 레이아웃에는 CSS Grid를 사용하세요. Grid는 레이아웃 구조를 먼저 정의하고 아이템을 정해진 트랙에 배치하는 방식에 유리합니다.

두 기술은 서로 경쟁하는 것이 아니라 보완적입니다. 많은 실제 디자인에서 Grid로 페이지 전체 틀을 잡고 그 안의 내비게이션 바나 카드 행은 Flexbox로 구현하는 식으로 결합하여 사용합니다.

Flexbox 마스터를 위한 팁

• 축을 시각화하세요. 항상 어느 방향이 "주축"이고 어느 방향이 "교차축"인지 파악해야 합니다. 이 플레이그라운드의 축 표시기가 이를 명시적으로 도와줍니다.
• margin 대신 gap을 사용하세요. 현대적인 브라우저는 flex 컨테이너의 gap을 완벽하게 지원하며, 이는 마지막 자식 요소에 어색한 margin을 제거해야 하는 번거로움을 없애줍니다.
• flex: 1을 적극 활용하세요. 아이템들이 공간을 균등하게 공유하길 원할 때 이 단축 속성은 거의 항상 정답입니다.
• flex 아이템에 min-width: 0 적용. 아이템은 콘텐츠에 기반한 암시적 최소 너비를 가집니다. URL처럼 줄바꿈되지 않는 긴 문자열로 인해 레이아웃이 깨진다면 해당 아이템에 min-width: 0을 설정하여 이를 해결하세요.
• 백분율 너비만 사용하는 것을 피하세요. 백분율 너비와 flex-grow를 섞어서 쓰면 예상치 못한 결과가 나올 수 있습니다. 합리적인 기본값과 함께 flex-basis를 사용하는 것을 권장합니다.

브라우저 지원 및 호환성

CSS Flexbox는 Chrome, Firefox, Safari, Edge 및 모든 주요 모바일 브라우저를 포함한 모든 현대적인 브라우저에서 지원됩니다. flex 컨테이너의 gap 속성은 2021년에 범용적인 브라우저 지원을 달성했습니다. 이전 세대의 브라우저(IE10/11)는 벤더 프리픽스가 필요하며 몇 가지 잘 알려진 버그가 있습니다. 해당 환경을 고려해야 한다면 flexbugs 리포지토리를 참고하세요.

자주 묻는 질문

왜 flex 아이템이 컨테이너 밖으로 넘치나요?

flex 아이템은 콘텐츠에 기반한 암시적인 min-width: auto를 가집니다. 긴 단어, 코드 블록 또는 서식이 지정된 텍스트는 아이템을 컨테이너보다 넓게 만들 수 있습니다. 아이템에 min-width: 0을 설정하여 해결하세요(수직 레이아웃의 경우 min-height: 0).

space-between, space-around, space-evenly의 차이점은 무엇인가요?

space-between은 양 끝에 공간을 두지 않고 아이템 사이에만 균등한 공간을 둡니다. space-around는 양 끝에 간격의 절반을 두고 아이템 사이에는 전체 간격을 둡니다. space-evenly는 양 끝과 아이템 사이 모두에 동일한 공간을 둡니다. 플레이그라운드에서 전환하며 차이를 느껴보세요.

flex 속성에 애니메이션을 적용할 수 있나요?

네. flex-grow, flex-shrink, flex-basis, order, gap은 트랜지션(transition)이 가능합니다. flex-direction, justify-content, align-items는 불연속적인 열거형 속성이므로 애니메이션이 지원되지 않습니다.

플레이그라운드가 오프라인에서도 작동하나요?

모든 Flexbox 계산은 브라우저의 네이티브 CSS를 사용하여 실행됩니다. 페이지가 로드된 후에는 인터넷 연결 없이도 플레이그라운드를 사용할 수 있습니다. API 호출이나 서버 측 연산이 전혀 없습니다.

생성된 코드를 실제 서비스에 사용할 수 있나요?

네. 내보낸 CSS는 모든 최신 브라우저에서 지원되는 표준 속성을 사용합니다. HTML은 프로젝트의 관례에 맞춰 이름을 변경할 수 있는 의미 있는 클래스 이름(flex-container, flex-item)을 사용합니다.

추가 자료

• CSS Flexible Box Layout - MDN
• CSS Flexible Box Layout Module Level 1 - W3C Specification
• CSS Flex Box Layout - 위키백과

기타 관련 도구:

웹 관리 도구:

• CPC 계산기
• CPM 계산기
• CSS 압축기
• 파비콘 생성기 새로운
• 구글 애드센스 계산기
• Cron 작업 생성기 추천
• crontab 표현식 생성기 새로운
• HTML 압축기
• HTML에서 텍스트 변환기
• 키워드 밀도 검사기 새로운
• Markdown 테이블 생성기 추천
• 메타 태그 생성기
• 스마트 따옴표 제거기 추천
• URL 슬러그 생성기 추천
• 페이지 값 계산기
• 방문자 가치 계산기
• 유닉스 권한 계산기 (chmod) 추천
• HTML 엔티티 인코더/디코더 추천
• Lorem Ipsum 생성기 새로운
• JSON 문자열 이스케이프 언이스케이프 추천
• cURL을 JSON으로 변환기 새로운
• SQL 포맷터 새로운
• SVG 최적화 도구 새로운
• Htaccess 리다이렉트 생성기 새로운
• Googlebot 크롤링 크기 검사기 새로운
• robots.txt 생성기 새로운
• XML 사이트맵 생성기 새로운
• 도메인 연령 확인기 새로운
• Open Graph 검사기 새로운
• WHOIS 조회 새로운
• DNS 조회 새로운
• 페이지 속도 검사기 새로운
• 도메인 신뢰도 검사기 새로운
• 리다이렉트 검사기 새로운
• Hreflang 태그 생성기 새로운
• 링크 깨짐 검사기 새로운
• CSS Flexbox 플레이그라운드 새로운