DXB-CSS

DXB 메뉴얼 열심히 보고 있으나 잘 모르는 부분이 있어서 문의 드립니다DXB 메뉴얼 열심히 보고 있으나 잘 모르는 부분이 있어서 문의 드립니다

안 안졸리니졸리

2026.07.15 10:16(수정됨) 10 0 1 🧪 Lv.1 새싹 3 EXP 🏅6위

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 p-8 bg-slate-50 border-2 border-slate-100 rounded-3xl w-full shadow-sm">
<div class="p-10 bg-white border border-slate-200 rounded-2xl text-slate-900 font-black text-center shadow-md">Card A</div>
<div class="p-10 bg-white border border-slate-200 rounded-2xl text-slate-900 font-black text-center shadow-md">Card B</div>
<div class="p-10 bg-white border border-slate-200 rounded-2xl text-slate-900 font-black text-center shadow-md">Card C</div>
<div class="p-10 bg-white border border-slate-200 rounded-2xl text-slate-900 font-black text-center shadow-md">Card D</div>
</div>
<p class="mt-4 text-center text-[10px] text-slate-400 font-bold uppercase tracking-widest">Mobile: 1 col | Tablet: 2 cols | Desktop: 4 cols</p>

위 소스에서
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 p-8 bg-slate-50 border-2 border-slate-100 rounded-3xl w-full shadow-sm">
이 부분중에 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 를 참조하여 반응형에 따라 갯수를 표시하고 싶은데
반응형 구간이
sm, md, lg등 몇개가 있고 가로폭 사이즈 범위가 어떻게 되는지 알려주시면 감사하겠습니다

메뉴얼 부분을 알려주셔도 감사합니다
메뉴얼에는 sm, md, lg등의 구간 정보 사이즈와 구간 클래스명이 못찾겠습니다

이 질문 평가 로그인 후 평가 가능

채택된 답변

DX관리자

2026.07.15 11:12

채택됨

졸리님 ^^ 감사합니다.
그런데, 만든지 너무 오래되어서 저도 헷갈려서 AI 답변으로 답변 드리는 점 진심으로 죄송합니다.
이해해주세요.

dxb-css의 반응형 브레이크포인트는 별도 매뉴얼 문서에는 명시되어 있지 않고, 엔진 소스(dxb-css-v6.1.0.js) 내부 theme.screens에 직접 정의되어 있습니다.

screens: {
    'sm' : '640px',
    'md' : '768px',
    'lg' : '1024px',
    'xl' : '1280px',
    '2xl': '1536px'
}

전체 구간은 아래와 같습니다.

클래스 접두사	적용 가로폭	설명
(없음)	0 ~ 639px	모바일 기본값
`sm:`	640px 이상	소형 태블릿
`md:`	768px 이상	태블릿
`lg:`	1024px 이상	노트북/데스크탑
`xl:`	1280px 이상	대형 데스크탑
`2xl:`	1536px 이상	초대형 모니터

모두 min-width 기준이므로 해당 폭 이상일 때 적용됩니다.

질문하신 예시 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 기준으로 보면:

가로폭 범위	열 수
0 ~ 639px	1열
640 ~ 1023px	2열
1024px 이상	4열

md: 구간(768~1023px)은 별도 지정이 없으므로 sm:의 2열이 그대로 유지됩니다.

https://tailwindcss.com/docs/responsive-design

여기 참고하셔도 될 듯합니다.
규칙과 패턴은 다 태일윈드 기준으로 만들었습니다.

다시한번 죄송합니다.
제가 작년 12월이나 1월쯤 만들었던것 같은데...
CMS때문에 조금 오락가락해서 AI 답변으로 했습니다.

답변으로 이동

DX관리자 2026.07.15 11:12

🧪 Lv.3 일반 268 EXP 🥇 1위

채택됨

졸리님 ^^ 감사합니다.
그런데, 만든지 너무 오래되어서 저도 헷갈려서 AI 답변으로 답변 드리는 점 진심으로 죄송합니다.
이해해주세요.

screens: {
    'sm' : '640px',
    'md' : '768px',
    'lg' : '1024px',
    'xl' : '1280px',
    '2xl': '1536px'
}

전체 구간은 아래와 같습니다.

클래스 접두사	적용 가로폭	설명
(없음)	0 ~ 639px	모바일 기본값
`sm:`	640px 이상	소형 태블릿
`md:`	768px 이상	태블릿
`lg:`	1024px 이상	노트북/데스크탑
`xl:`	1280px 이상	대형 데스크탑
`2xl:`	1536px 이상	초대형 모니터