DXB-CSS

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

안 안졸리니졸리

2026.07.15 10:16(수정됨) 51 0 5 🧪 Lv.1 새싹 4 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 일반 273 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 이상	초대형 모니터

모두 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열이 그대로 유지됩니다.

안

안졸리니졸리 2026.07.15 12:55

🧪 Lv.1 새싹 4 EXP 🏅 6위

굿입니다
너무 잘 정리해주셨습니다
반응형 구간별과 해당하는 구간의 픽셀범위 무멋보다 점점 모니터가 커지는데 초대형 모니터 2xl을 지원한다니 너무 좋네요... ^^
바쁘신데 너무 잘 설명해주셔서 감사합니다

죄송한데 시간 나실때 이거 하나만 확인 부탁드립니다
<div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-4 p-0 bg-slate-0 border-0 rounded-3xl w-full">
위 소스에서 "2xl:grid-cols-8"를 적용했는데 적용이 안됩니다
모니터 가로 사이즈 1920픽셀입니다

2xl: 1536px 이상 초대형 모니터

위 조건에 의해서 모니터 가로 사이즈 1920픽셀이면 8개가 나와야하지 않나요?
dxb-css.js 파일에서 "2xl"이 있는건 확인했습니다만 조금 문제가 있는지 다른 구간은 모두 정상 작동하는데 "2xl" 구간만 정상 작동을 하지 않습니다

DX관리자 2026.07.15 15:00

🧪 Lv.3 일반 273 EXP 🥇 1위

^^ 감사합니다.
정규식 오류인데, 패치해놨습니다.
https://designonex.com/dxb-download/view/1784095155480405

다만, 테스트 못해봤습니다. 죄송합니다.
다운로드 받으세요

안

안졸리니졸리 2026.07.15 16:57

🧪 Lv.1 새싹 4 EXP 🏅 6위

바쁘실텐데 감사합니다
패치는 원본 dxb-css.js 파일을 패치 파일로 교체했는데 결과에 변화는 없습니다
추후 시간나실때 봐주시기 바랍니다
너무 바쁘고 힘드실텐데 불편드려 죄송합니다

DX관리자 2026.07.15 17:39

🧪 Lv.3 일반 273 EXP 🥇 1위

아닙니다. 마무리되면 최대한 빨리 검토하도록 하겠습니다.
정규식 문제가 좀 있어보였습니다.
감사합니다.