반응형 디자인

Atomic CSS는 14개 브레이크포인트 프리픽스를 제공합니다. 아무 클래스 앞에 프리픽스를 붙이면 해당 화면 크기에서만 적용됩니다.

브레이크포인트

프리픽스	Max-width	이름
`us-`	420px	Ultra Small (모바일)
`es-`	640px	Extra Small
`sm-`	768px	Small (태블릿)
`md-`	1024px	Medium
`rg-`	1080px	Regular
`lg-`	1280px	Large
`el-`	1440px	Extra Large
`ul-`	1600px	Ultra Large
`sl-`	1700px	Super Large
`hl-`	1800px	Hyper Large
`fh-`	1920px	Full HD
`kk-`	2048px	2K
`uh-`	2160px	UHD
`qh-`	2560px	QHD

사용법

{브레이크포인트}-{클래스}

클래스	CSS
`sm-dn`	@media (max-width: 768px) { display: none }
`md-fdc`	@media (max-width: 1024px) { flex-direction: column }
`lg-gtcr2-1fr`	@media (max-width: 1280px) { grid-template-columns: repeat(2, 1fr) }
`sm-p16px`	@media (max-width: 768px) { padding: 16px }

일반적인 패턴

표시/숨김

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

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

반응형 그리드

<!-- 3열 → 2열 → 1열 -->
<div class="dg gtcr3-1fr md-gtcr2-1fr sm-gtc1fr gap2rem">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

반응형 간격, 폰트

<!-- 반응형 간격 -->
<div class="p4rem md-p2-4rem sm-p16px">...</div>

<!-- 반응형 폰트 -->
<h1 class="fs4-8rem md-fs3-2rem sm-fs2-4rem fw800">제목</h1>

<!-- 반응형 Flex 방향 -->
<div class="df fdr sm-fdc gap2rem">...</div>