AAtomic CSS

text-align

블록 요소 내부의 인라인 콘텐츠 수평 정렬 방향을 제어합니다. 텍스트, 인라인 요소, 인라인 블록 등의 가로 배치를 결정하는 기본 타이포그래피 속성입니다.

클래스 목록

클래스CSS설명
taltext-align: left좌측 정렬. 기본값으로 본문 텍스트에 적합
tartext-align: right우측 정렬. 숫자, 가격, 날짜 등에 활용
tactext-align: center가운데 정렬. 제목, CTA, 히어로 섹션에 적합
tajtext-align: justify양쪽 정렬. 신문 스타일 컬럼 레이아웃

시각적 비교

각 text-align 값이 텍스트에 어떤 영향을 주는지 비교합니다.

Left (기본) — tal

The quick brown fox jumps over the lazy dog. 빠른 갈색 여우가 게으른 개를 뛰어넘습니다. 이 문장은 텍스트 정렬의 차이를 보여주기 위한 예시입니다. 충분한 길이의 텍스트가 있어야 각 정렬 방식의 차이가 명확하게 드러납니다.

기본 좌측 정렬. 왼쪽이 고르고 오른쪽이 들쭉날쭉합니다

Right — tar

The quick brown fox jumps over the lazy dog. 빠른 갈색 여우가 게으른 개를 뛰어넘습니다. 이 문장은 텍스트 정렬의 차이를 보여주기 위한 예시입니다. 충분한 길이의 텍스트가 있어야 각 정렬 방식의 차이가 명확하게 드러납니다.

오른쪽이 고르고 왼쪽이 들쭉날쭉합니다

Center — tac

The quick brown fox jumps over the lazy dog. 빠른 갈색 여우가 게으른 개를 뛰어넘습니다. 이 문장은 텍스트 정렬의 차이를 보여주기 위한 예시입니다. 충분한 길이의 텍스트가 있어야 각 정렬 방식의 차이가 명확하게 드러납니다.

양쪽 모두 들쭉날쭉하며 중앙을 기준으로 정렬됩니다

Justify — taj

The quick brown fox jumps over the lazy dog. 빠른 갈색 여우가 게으른 개를 뛰어넘습니다. 이 문장은 텍스트 정렬의 차이를 보여주기 위한 예시입니다. 충분한 길이의 텍스트가 있어야 각 정렬 방식의 차이가 명확하게 드러납니다.

양쪽 끝이 모두 고르게 맞춰집니다. 단어 간격이 조정됩니다

언제 뭘 쓸까?

상황추천이유
본문 텍스트, 일반 콘텐츠tal가독성이 가장 높은 기본 정렬
제목, 히어로 섹션tac시각적 중심을 잡아 주목도 상승
가격, 숫자, 날짜tar숫자 자릿수를 오른쪽에 맞춰 비교 용이
긴 기사, 신문 스타일taj양쪽 정렬로 깔끔한 단 레이아웃

클래스별 상세

taltext-align: left

기본 좌측 정렬입니다. 대부분의 블록 요소는 기본적으로 좌측 정렬이므로, 다른 정렬이 적용된 상태를 리셋하거나 반응형에서 명시적으로 좌측 정렬이 필요할 때 사용합니다. 본문 텍스트에 가장 적합한 정렬입니다.

<!-- Body text (Default) -->
<p class="tal">
  Left-aligned body text. In most web content,
  this is the most natural and readable alignment.
</p>

<!-- Explicit left alignment in responsive -->
<h2 class="tac md-tal">
  Center on mobile, left-aligned on desktop
</h2>

tartext-align: right

우측 정렬입니다. 숫자, 가격, 날짜 등 데이터를 오른쪽에 맞출 때 사용합니다. 테이블의 금액 컬럼이나 타임스탬프 표시에 자주 활용됩니다.

<!-- Price display -->
<div class="df jcsb aic py12px bb1pxsolid27272A">
  <span class="cFAFAFA">Premium plan</span>
  <span class="tar cFAFAFA fw700 fs2rem">$49/mo</span>
</div>

<!-- Table price column -->
<table class="w100p bcc">
  <tr>
    <td class="tal py8px px16px">Product name</td>
    <td class="tar py8px px16px">$1,200</td>
  </tr>
  <tr>
    <td class="tal py8px px16px">Shipping</td>
    <td class="tar py8px px16px">$5</td>
  </tr>
</table>

tactext-align: center

가운데 정렬입니다. 제목, CTA 버튼 영역, 히어로 섹션 등에서 많이 사용합니다. 짧은 텍스트에 효과적이며, 긴 본문에는 가독성이 떨어질 수 있습니다.

<!-- Hero section -->
<section class="tac py6rem">
  <h1 class="fs4-8rem fw800 cFAFAFA mb16px">
    Build Faster
  </h1>
  <p class="fs16px c71717A mb3-2rem">
    Cut your styling time in half with Atomic CSS.
  </p>
  <button class="bg6366F1 cFFFFFF py12px px3-2rem br8px bn cp fs16px">
    Get started
  </button>
</section>

<!-- CTA area -->
<div class="tac p2rem bg18181B br8px">
  <p class="cFAFAFA mb12px">Start for free now</p>
  <button class="bg6366F1 cFFFFFF py8px px2rem br4px bn cp">Sign up</button>
</div>

주의

tac는 인라인 콘텐츠만 가운데 정렬합니다. 블록 요소 자체를 가운데로 배치하려면 mxa(margin: 0 auto)를 사용하세요.

tajtext-align: justify

양쪽 정렬입니다. 텍스트의 양쪽 끝이 컨테이너 가장자리에 맞춰집니다. 신문, 잡지 스타일의 컬럼 레이아웃에 적합합니다. 단, 단어 사이 간격이 불균일해질 수 있으므로 주의가 필요합니다.

<!-- Newspaper-style column -->
<div class="dg gtcr2-1fr gap3-2rem sm-gtc1fr">
  <p class="taj lh1-7">
    Justified text is a layout commonly found in newspapers
    and magazines. Both ends of the text align with the
    container edges, creating a clean column layout.
  </p>
  <p class="taj lh1-7">
    However, in short lines or narrow containers, word gaps
    may become excessively wide, so it is best used when
    sufficient width is available.
  </p>
</div>

주의

짧은 줄이나 좁은 컨테이너에서는 단어 간격이 지나치게 벌어질 수 있습니다. 마지막 줄은 text-align-last 속성과 관계없이 기본 좌측 정렬됩니다. 충분한 너비가 확보된 컨텐츠에서 사용하세요.

반응형 정렬

미디어 쿼리 프리픽스와 조합하면 화면 크기에 따라 텍스트 정렬을 변경할 수 있습니다.

<!-- Center on mobile, left on desktop -->
<h2 class="tac md-tal">Responsive alignment switch</h2>

<!-- Center on mobile, right on desktop -->
<p class="tac md-tar">Price: $49/mo</p>

<!-- Hero: always center, body: left on desktop -->
<section class="tac">
  <h1 class="fs4-8rem fw800 cFAFAFA">Title</h1>
</section>
<article class="tac md-tal">
  <p>Body text is left-aligned on desktop.</p>
</article>
클래스 조합동작
tac md-tal기본 가운데 → 1024px 이하에서 좌측 정렬
tal sm-tac기본 좌측 → 768px 이하에서 가운데 정렬
tac md-tar기본 가운데 → 1024px 이하에서 우측 정렬
taj md-tal기본 양쪽 → 1024px 이하에서 좌측 정렬

팁 & 주의사항

text-align은 인라인 콘텐츠만 정렬

text-align은 텍스트, span, img, inline-block 등 인라인 요소에만 작동합니다. 블록 요소 자체를 가운데 배치하려면 mxa(margin: 0 auto)를 사용하세요.

justify는 충분한 너비에서

taj는 넓은 컨테이너와 긴 텍스트에서 효과적입니다. 짧은 줄이나 좁은 컨테이너에서는 단어 사이 간격이 불균일하게 벌어져 오히려 가독성이 떨어집니다.

블록 센터링과 혼동하지 않기

tac는 인라인 콘텐츠의 수평 센터링이고, mxa는 블록 요소의 수평 센터링입니다. flex에서는 jcc를 사용하세요.

text-transformtext-decorationdirectionvertical-align