그냥 전체적으로 해결 하는 방법 공유해드리겠습니다.
지금 PC 버전에서는 칸 분리가 잘 이뤄지기 시작했는데, 정작 모바일은 그대로더라구요.
row-span-2를 없애고, md:row-span-2로 두시고, 기본값은 row-auto로 두세요.
즉, 반환되는 class는 row-auto md:row-span-2로 두시면 됩니다.
md: ← 이건 tailwind css 반응형 접두사인데
min-width:768px에서만 이 클래스를 적용시키기 위해 사용하는 접두사에요.
즉 md:col-span-2는 가로 768px 이상일 경우 col-span-2를 적용하고
768px 이하일 경우에는 col-span-2를 적용해제한다는 뜻이죠.
지금 코딩을 둘러보면
정상적으로 적용시키면
이런식으로 코딩이 되어야 합니다..
그래야
이런식으로 표기가 잘 됩니다..
결과를 미리 봐보고 싶다면
브라우저에 개발자도구 키고
(function normalizeGridSpans(){
const els = document.querySelectorAll('[class*="row-span-"], [class*="col-span-"]');
els.forEach(el => {
const classes = Array.from(el.classList);
// 숫자 추출 함수
const getSpanNums = (prefix) => {
const base = classes
.filter(c => new RegExp(`^${prefix}-span-(\\d+)$`).test(c))
.map(c => +c.split('-').pop());
const md = classes
.filter(c => new RegExp(`^md:${prefix}-span-(\\d+)$`).test(c))
.map(c => +c.split('-').pop());
return { base, md };
};
// 정규화 함수
const normalize = (prefix, autoClass) => {
const { base, md } = getSpanNums(prefix);
// 1) 기존 span 클래스 전부 제거
classes
.filter(c => new RegExp(`^(md:)?${prefix}-span-(\\d+)$`).test(c))
.forEach(c => el.classList.remove(c));
// 2) 모바일은 auto 고정
el.classList.add(autoClass);
// 3) md에서 유지할 숫자 결정: md에 있던 숫자 > base에 있던 숫자
const keep = md[md.length - 1] ?? base[base.length - 1];
// 4) 숫자가 있었다면 하나만 md로 재적용
if (keep) el.classList.add(`md:${prefix}-span-${keep}`);
};
normalize('row', 'row-auto');
normalize('col', 'col-auto');
});
})();
해당 코드 입력해보세요.
만약 붙여넣기 오류 난다면
한글로 그냥 붙여넣기 허용 이라고 입력하고 엔터하면 붙여넣기 됩니다.
0 / 0
