CSS Academy · 강의

Justify-Content와 Align-Items

justify-content와 align-items를 사용해 주축과 교차축을 따라 항목을 배치합니다.

Justify-Content와 Align-Items은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

두 가지 핵심 정렬 속성

가장 많이 사용하는 두 플렉스 정렬 속성은 다음과 같습니다:

justify-content — 주축을 따라 항목을 정렬합니다
align-items — 교차축을 따라 항목을 정렬합니다

justify-content: flex-start

flex-start(기본값)는 항목을 주축의 시작점 쪽으로 모읍니다. row 방향에서는 항목이 왼쪽에 정렬됩니다.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

justify-content: center

주축을 따라 항목을 가운데 정렬합니다. Flexbox에서 가로 가운데 정렬을 구현하는 대표적인 방법입니다.

<div class="hero">
    <button>Get Started</button>
  </div>

justify-content: flex-end

항목을 주축의 끝점 쪽으로 모읍니다. row 방향에서는 오른쪽에 배치됩니다.

<div class="header">
    <button>Sign In</button>
    <button>Sign Up</button>
  </div>

justify-content: space-between

항목 사이에 동일한 간격을 분배합니다. 첫 번째 항목은 시작점에, 마지막 항목은 끝점에 배치되므로 가장자리에는 간격이 없습니다.

<nav class="nav">
    <div class="logo">Logo</div>
    <div class="links">
      <a href="#">Home</a>
      <a href="#">About</a>
    </div>
  </nav>

justify-content: space-around

각 항목 주변에 동일한 간격을 배치합니다. 가장자리의 항목에는 내부 간격의 절반에 해당하는 공간이 적용됩니다. 따라서 시각적으로 가장자리의 안쪽 여백은 항목 사이의 간격의 절반입니다.

justify-content: space-evenly

가장자리를 포함한 모든 간격이 동일합니다. space-around와 달리 가장자리의 안쪽 여백도 항목 사이의 간격과 같습니다.

<div class="toolbar">
    <button>Bold</button>
    <button>Italic</button>
    <button>Underline</button>
  </div>

align-items: stretch (기본값)

stretch(기본값)는 교차축에서 모든 플렉스 항목이 컨테이너의 교차축 크기를 채우도록 만듭니다. 행 컨테이너의 항목은 모두 같은 높이가 됩니다.

<div class="row">
    <div>Short</div>
    <div>Taller content<br>spanning<br>multiple lines</div>
    <div>Mid</div>
  </div>

align-items: center

교차축에서 항목을 가운데 정렬합니다. 행 컨테이너에서는 항목이 세로 방향으로 가운데 정렬됩니다. 대표적인 세로 가운데 정렬 방법입니다.

<div class="card">
    <span>👤</span>
    <span>Jane Doe</span>
  </div>

align-items: flex-start 및 flex-end

flex-start는 항목을 교차축의 시작 가장자리에 정렬합니다. 행 방향에서는 위쪽입니다. flex-end는 교차축의 끝 가장자리에 정렬합니다. 행 방향에서는 아래쪽입니다.

<nav class="nav">
    <div>Short</div>
    <div>Taller<br>nav<br>item</div>
  </nav>

align-items: baseline

항목의 텍스트 기준선이 맞춰지도록 정렬합니다. 항목마다 글꼴 크기가 다르지만 시각적으로 정렬되어 보여야 할 때 유용합니다.

<nav class="breadcrumb">
    <span style="font-size:12px">Home</span>
    <span style="font-size:24px">Products</span>
    <span style="font-size:16px">Item</span>
  </nav>

빠른 확인

플렉스 항목을 컨테이너 안에서 가로와 세로 모두 완벽하게 가운데 정렬하려면 어떤 조합을 사용해야 합니까?

정리

justify-content는 flex-start, center, space-between과 같은 값을 사용하여 주축을 따라 항목을 분배합니다. align-items는 stretch, center, flex-start를 사용하여 교차축에서 항목을 배치합니다. 두 속성을 함께 사용하면 두 축의 정렬을 모두 제어할 수 있습니다.

자주 묻는 질문

“Justify-Content와 Align-Items” 강의는 무료인가요?

네 — “Justify-Content와 Align-Items” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Justify-Content와 Align-Items”에서 뭘 배우나요?

justify-content와 align-items를 사용해 주축과 교차축을 따라 항목을 배치합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“Justify-Content와 Align-Items” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← CSS Academy(으)로 돌아가기