도움말/문제 해결

자주 겪는 문제

받은 파일이 의도대로 안 보일 때 대부분 아래 넷 중 하나입니다.

아이콘이 세로로 늘어납니다

w-4.5, h-5.5, w-6.5 처럼 Tailwind 기본 스케일에 없는 크기 클래스를 쓴 경우입니다. CSS 규칙 자체가 만들어지지 않아 SVG가 크기를 못 받고 원본 비율로 늘어납니다. w-[18px]처럼 임의값으로 바꾸세요. 존재하는 소수점은 0.5 1.5 2.5 3.5뿐입니다.

다크 오버레이가 사라져 글씨가 안 보입니다

bg-black/78, border-white/12 처럼 5의 배수가 아닌 투명도를 쓰면 규칙이 생성되지 않아 완전 투명이 됩니다. 사진 위 흰 글씨가 그대로 노출돼 읽을 수 없게 됩니다. /80 /10처럼 5의 배수를 쓰거나, 그 사이 값이 꼭 필요하면 대괄호 표기 bg-black/[0.78]을 쓰세요.

사진이 안 나옵니다

페이지에 콘텐츠 보안 정책(CSP)이 걸려 있으면 외부 이미지가 차단됩니다. img-src에 사용 중인 이미지 호스트(images.unsplash.com 등)를 추가하세요. 사내망에서 외부 접속이 막힌 경우라면 이미지를 내려받아 로컬 경로로 바꾸는 편이 낫습니다.

한글이 어색하게 잘려 줄바꿈됩니다

긴 제목에서 단어 중간이 끊길 때는 word-break: keep-all을 주세요. Tailwind로는 break-keep입니다. 버튼 문구가 두 줄이 되는 경우엔 whitespace-nowrap을 씁니다.

그 외

• 폰트가 다르게 보임 — Pretendard CDN 링크가 살아 있는지 확인하세요. 사내망에서 막히면 로컬 폰트로 교체합니다.
• 모바일에서 가로 스크롤 — 가로 스크롤을 의도한 영역이 아니라면, 넓은 표를 감싼 래퍼에 relative가 있는지 보세요. 없으면 그 안의 sr-only 요소가 클리핑을 벗어나 화면을 밀어냅니다.
• 하위 요소 스타일이 안 먹음 — peer-checked:는 형제에만 닿습니다. 형제의 자식에 걸면 무시되니, 자식은 색 상속이나 opacity로 처리하세요.