AAtomic CSS

빠른 시작

5분 안에 Atomic CSS로 반응형 레이아웃을 만들어보세요.

1. 기본 설정

HTML 파일을 만들고 루트 폰트 크기를 10px로 설정합니다:

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>html { font-size: 10px; }</style>
</head>
<body>

</body>
</html>

2. 센터 정렬

Flexbox로 화면 중앙에 콘텐츠를 배치합니다:

<div class="df jcc aic h100vh">
  <h1 class="fs4-8rem fw900 c333333">Hello World</h1>
</div>
클래스CSS설명
dfdisplay: flexFlex 컨테이너
jccjustify-content: center가로 중앙
aicalign-items: center세로 중앙
h100vhheight: 100vh화면 높이 100%
fs4-8remfont-size: 4.8rem48px 글자
fw900font-weight: 900가장 굵게
c333333color: #333333어두운 회색 텍스트

3. 카드 만들기

스타일이 적용된 카드 컴포넌트를 만듭니다:

<div class="maxw40rem mxa p2-4rem bgFFFFFF br12px b1pxsolidEEEEEE">
  <h2 class="fs2rem fw700 c1A1A2E mb8px">카드 제목</h2>
  <p class="fs14px c71717A lh1-7 mb16px">카드 설명 텍스트가 들어갑니다.</p>
  <button class="p12px px2-4rem bg6366F1 cFFFFFF br8px fw600 fs14px bn cp hover-bg4F46E5 tall200msease">
    버튼
  </button>
</div>

4. 반응형 그리드

카드를 반응형 그리드로 배치합니다:

<div class="dg gtcrfit-minmax28rem-1fr gap2rem p2-4rem">
  <div class="p2-4rem bgFFFFFF br12px b1pxsolidEEEEEE">카드 1</div>
  <div class="p2-4rem bgFFFFFF br12px b1pxsolidEEEEEE">카드 2</div>
  <div class="p2-4rem bgFFFFFF br12px b1pxsolidEEEEEE">카드 3</div>
</div>

gtcrfit-minmax28rem-1fr은 repeat(auto-fit, minmax(28rem, 1fr))을 생성합니다. 화면 크기에 따라 자동으로 열 수가 조절됩니다.

5. 반응형 제어

브레이크포인트 프리픽스로 화면 크기별 스타일을 적용합니다:

<!-- 데스크탑에서만 표시 -->
<div class="db sm-dn">데스크탑 전용</div>

<!-- 모바일에서만 표시 -->
<div class="dn sm-db">모바일 전용</div>

<!-- 반응형 레이아웃 -->
<div class="df fdr sm-fdc gap2rem p4rem sm-p16px">
  <main class="fg1">콘텐츠</main>
  <aside class="w28rem sm-wa">사이드바</aside>
</div>
클래스의미
sm-dn768px 이하에서 숨김
sm-db768px 이하에서 block 표시
sm-fdc768px 이하에서 세로 방향
sm-p16px768px 이하에서 패딩 16px
sm-wa768px 이하에서 width: auto

6. 호버 효과

의사 클래스 프리픽스로 인터랙션을 추가합니다:

<button class="bg6366F1 hover-bg4F46E5 cFFFFFF p12px px2-4rem br8px bn cp fw600 tall200msease">
  호버해보세요
</button>

<input class="w100p p12px br8px b1pxsolidDDDDDD focus-bc6366F1 tall200msease"
  placeholder="포커스해보세요" />

<a class="c6366F1 hover-c818CF8 tdn tall200msease">링크</a>

다음 단계