커뮤니티 빌런

커뮤니티 자유게시판

갑자기 메인이 바뀌길래..

잔고0원 쪽지 승인 : 2025-08-11 16:44:33

그냥 전체적으로 해결 하는 방법 공유해드리겠습니다.

지금 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');
});
})();

해당 코드 입력해보세요.

만약 붙여넣기 오류 난다면

한글로 그냥 붙여넣기 허용 이라고 입력하고 엔터하면 붙여넣기 됩니다.

By 기사제보 및 정정요청 = master@villain.city

관련기사 관련기사가 없습니다.

Comment

Today Ranking

종합
뉴스/정보
커뮤니티
질문/토론

1. 겨울철 전기차 주행거리, 이렇게 하면 극대화할 수 있다 2. 조텍 VIP 멤버십, 12월 맞아 달콤한 제주귤 증정 이벤트 진행 3. 삼성, Exynos 2600 최초 공개… “조용히 들었고, 핵심부터 다듬었다”는 티저로 메시지 전달 4. Intel Core Ultra 7 366H, Geekbench에 유출 – iGPU 성능이 Radeon 840M 대비 26%↑ 5. Ai로 만든 광고, 업계비상. 6. 테슬라 Model 3/Y 중국산 LG NCM811 팩, 심각한 고장률과 압도적으로 짧은 수명 7. 이제 한파 시작인듯 하네요. 8. ‘Windows on ARM 지원 외장 GPU’, 엔비디아·AMD가 아니라 중국 리쑤안일 가능성 9. 테슬라 중국산 LG 배터리, “상태가 catastrophic(재앙적)”…유럽 수리 업체의 주장 10. 좀 과하다 싶은 첫눈이네요