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

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

<!-- 본문 텍스트 (기본) -->
<p class="tal">
  좌측 정렬된 본문 텍스트입니다. 대부분의 웹 콘텐츠에서
  가장 자연스럽고 가독성이 높은 정렬 방식입니다.
</p>

<!-- 반응형에서 명시적 좌측 정렬 -->
<h2 class="tac md-tal">
  모바일에서는 가운데, 데스크탑에서는 좌측 정렬
</h2>

tartext-align: right

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

<!-- 가격 표시 -->
<div class="df jcsb aic py12px bb1pxsolid27272A">
  <span class="cFAFAFA">프리미엄 플랜</span>
  <span class="tar cFAFAFA fw700 fs2rem">$49/월</span>
</div>

<!-- 테이블 금액 컬럼 -->
<table class="w100p bcc">
  <tr>
    <td class="tal py8px px16px">상품명</td>
    <td class="tar py8px px16px">$1,200</td>
  </tr>
  <tr>
    <td class="tal py8px px16px">배송비</td>
    <td class="tar py8px px16px">$5</td>
  </tr>
</table>

tactext-align: center

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

<!-- 히어로 섹션 -->
<section class="tac py6rem">
  <h1 class="fs4-8rem fw800 cFAFAFA mb16px">
    Build Faster
  </h1>
  <p class="fs16px c71717A mb3-2rem">
    Atomic CSS로 스타일링 시간을 절반으로 줄이세요.
  </p>
  <button class="bg6366F1 cFFFFFF py12px px3-2rem br8px bn cp fs16px">
    시작하기
  </button>
</section>

<!-- CTA 영역 -->
<div class="tac p2rem bg18181B br8px">
  <p class="cFAFAFA mb12px">지금 무료로 시작하세요</p>
  <button class="bg6366F1 cFFFFFF py8px px2rem br4px bn cp">가입</button>
</div>

주의

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

tajtext-align: justify

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

<!-- 신문 스타일 컬럼 -->
<div class="dg gtcr2-1fr gap3-2rem sm-gtc1fr">
  <p class="taj lh1-7">
    양쪽 정렬된 텍스트는 신문이나 잡지에서 자주 볼 수 있는
    레이아웃입니다. 텍스트의 양쪽 끝이 컨테이너 가장자리에
    맞춰지므로 깔끔한 단 레이아웃을 만들 수 있습니다.
  </p>
  <p class="taj lh1-7">
    다만 짧은 줄이나 좁은 컨테이너에서는 단어 간격이 지나치게
    벌어질 수 있으므로 충분한 너비가 확보된 상태에서 사용하는
    것이 좋습니다.
  </p>
</div>

주의

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

반응형 정렬

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

<!-- 모바일 가운데, 데스크탑 좌측 -->
<h2 class="tac md-tal">반응형 정렬 전환</h2>

<!-- 모바일 가운데, 데스크탑 우측 -->
<p class="tac md-tar">가격: $49/월</p>

<!-- 히어로: 항상 가운데, 본문: 데스크탑에서 좌측 -->
<section class="tac">
  <h1 class="fs4-8rem fw800 cFAFAFA">타이틀</h1>
</section>
<article class="tac md-tal">
  <p>본문 텍스트는 데스크탑에서 좌측 정렬됩니다.</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