빠른 시작

3분 안에 Atomic CSS를 설정하고 첫 페이지를 만들어봅니다.

CSS 임포트 순서 주의

atomic.min.css는 반드시 가장 마지막에 임포트해야 합니다. Atomic CSS는 클래스 단위로 스타일을 덮어쓰는 방식이므로, 다른 CSS(리셋, 프레임워크, 커스텀 CSS)보다 뒤에 와야 정상적으로 우선 적용됩니다.

Step 1. 프로젝트 설정

프로젝트 루트에 .atomic.json을 생성합니다.

.atomic.json

{
    "selectedLanguages": ["html"],
    "cssDirectoryPath": "/assets/css/",
    "extensions": [".html"]
}

cssDirectoryPath는 생성된 CSS 파일이 저장될 경로입니다. 프로젝트 구조에 맞게 수정하세요.

Step 2. HTML 기본 설정

HTML 파일을 만들고 font-size: 10px을 설정합니다. Atomic CSS는 1rem = 10px 기준입니다.

index.html

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

  <!-- 다른 CSS가 있다면 여기에 -->
  <!-- <link rel="stylesheet" href="reset.css"> -->

  <!-- atomic.min.css는 반드시 가장 마지막에 -->
  <link rel="stylesheet" href="./assets/css/atomic.min.css">
</head>
<body>

</body>
</html>

중요: atomic.min.css가 다른 CSS보다 뒤에 위치해야 합니다. 리셋 CSS나 다른 스타일시트가 있다면 그 아래에 넣으세요.

Step 3. 센터 정렬

화면 중앙에 텍스트를 배치합니다.

<div class="df jcc aic h100vh">
  <h1 class="fs4-8rem fw900 c333333">Hello Atomic CSS</h1>
</div>

클래스	CSS
`df`	display: flex
`jcc`	justify-content: center
`aic`	align-items: center
`h100vh`	height: 100vh
`fs4-8rem`	font-size: 4.8rem (48px)
`fw900`	font-weight: 900
`c333333`	color: #333333

Step 4. 카드 만들기

간단한 카드 컴포넌트입니다.

<div class="maxw40rem bg18181B br12px p2rem">
  <h2 class="fs2rem fw700 cFAFAFA mb8px">카드 제목</h2>
  <p class="fs14px c71717A lh1-7">카드 설명 텍스트입니다.</p>
</div>

Step 5. 반응형 그리드

카드를 반응형 그리드로 나열합니다. 화면 크기에 따라 열 수가 자동 조절됩니다.

<!-- 카드를 자동 반응형 그리드로 배치 -->
<div class="dg gtcrfit-minmax30rem-1fr gap2rem p2rem">
  <div class="bg18181B br12px p2rem">카드 1</div>
  <div class="bg18181B br12px p2rem">카드 2</div>
  <div class="bg18181B br12px p2rem">카드 3</div>
</div>

클래스	CSS
`dg`	display: grid
`gtcrfit-minmax30rem-1fr`	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr))
`gap2rem`	gap: 2rem (20px)

Step 6. 호버 효과

hover- 프리픽스로 마우스 오버 시 스타일을 정의합니다.

<!-- 호버 시 배경색 변경 + 부드러운 전환 -->
<button class="bg6366F1 cFFFFFF py12px px2rem br8px bn cp hover-bg818CF8 tall200msease">
  버튼
</button>

<!-- 호버 시 텍스트 색상 변경 -->
<a class="c71717A tdn hover-cFFFFFF tall200msease" href="#">링크</a>

Step 7. 반응형 숨김

미디어쿼리 프리픽스로 특정 화면 크기에서 요소를 숨기거나 표시합니다.

<!-- 데스크탑에서만 표시, 768px 이하에서 숨김 -->
<nav class="df gap2rem sm-dn">
  <a href="#">메뉴1</a>
  <a href="#">메뉴2</a>
</nav>

<!-- 모바일에서만 표시 -->
<button class="dn sm-db">메뉴 열기</button>

클래스	의미
`sm-dn`	768px 이하에서 display: none
`dn`	항상 display: none
`sm-db`	768px 이하에서 display: block

다음 단계

빠른 시작을 완료했습니다. 더 깊이 알아보려면 아래 문서를 참고하세요.

네이밍 규칙 단위 시스템 반응형 디자인 Display Flexbox Grid