CSS 증상 사전 · 스킬

증상	유형	이렇게 말해도 통해요	AI에게 이렇게
"세로 가운데가 안 맞아요"	즉방형	"위에 붙어요" · "어중간하게 떠요" · "가운데 오라니까 좌우만 가운데예요"	이 요소를 감싸는 부모에 높이를 주고, flex로 가로세로 다 가운데 정렬해줘. 부모 높이가 왜 없었는지도 한 줄로 알려줘.
"가로 가운데로 안 와요"	즉방형	"왼쪽에 붙어요" · "가운데 오라고 했는데 안 와요"	이거 가로 가운데 정렬해줘. 상자 자체를 가운데 둘지, 안의 글자만 가운데 둘지 구분해서 맞는 쪽으로 해줘.
"아이콘이랑 글자 높이가 안 맞아요"	즉방형	"아이콘이 위로 떠 있어요" · "체크 표시가 글자보다 올라가 있어요"	아이콘과 글자를 한 상자로 묶어서 세로 가운데로 맞추고, 사이 간격은 gap으로 줘.
"양쪽 끝으로 보내고 싶은데 한쪽에 몰려요"	즉방형	"제목은 왼쪽, 버튼은 오른쪽에 두고 싶어요" · "한 줄에 양끝으로 벌리고 싶어요"	이 줄의 왼쪽엔 제목, 오른쪽 끝엔 버튼이 가게 양끝 정렬해줘.
"마지막 카드만 혼자 이상해요"	분기형	"마지막 줄이 벌어져요" · "마지막 카드만 혼자 커져요" · "마지막 줄만 가운데로 가요"	카드 목록 마지막 줄이 이상해. 바로 고치지 말고 지금 정렬 방식이 뭔지 설명해주고, 마지막 줄을 왼쪽 정렬로 둘지 꽉 채울지 선택지를 보여줘. 고른 다음에 고치자.

증상	유형	이렇게 말해도 통해요	AI에게 이렇게
"이미지가 상자를 뚫고 나가요"	즉방형	"사진이 너무 커요" · "사진이 상자 밖으로 나가요"	이미지가 상자를 넘지 않게 max-width 100%를 기본으로 깔아줘.
"긴 영어·링크가 상자를 뚫어요"	즉방형	"URL이 삐져나가요" · "영어 한 덩어리가 안 끊겨요"	URL 같은 긴 문자열이 상자 안에서 줄바꿈되게 overflow-wrap을 적용해줘.
"펼친 메뉴가 잘려서 반만 보여요"	분기형	"드롭다운이 카드 안에 갇혀요" · "툴팁이 잘려요"	펼침 메뉴가 잘려. 바로 고치지 말고 어느 조상이 자르는지(overflow인지, transform·블러 효과인지) 찾아서 알려주고, 메뉴를 밖으로 뺄지 그 속성을 풀지 확인받고 고쳐줘.
"글자가 표시도 없이 뚝 잘려요"	즉방형	"끝이 잘렸는데 …도 없어요" · "제목이 중간에 끊겨요"	이 글자가 상자를 넘으면 …으로 줄여줘. 한 줄 기준으로.
"따라와야 할 헤더가 안 따라와요"	즉방형	"sticky가 안 먹어요" · "스크롤하면 고정이 풀려요"	이 헤더가 스크롤해도 위에 붙어 있게 해줘. 조상에 overflow가 걸려 있으면 찾아서 알려주고 풀어줘.

증상	유형	이렇게 말해도 통해요	AI에게 이렇게
"스크롤이 두 개 생겨요"	즉방형	"안에서도 밖에서도 스크롤돼요" · "스크롤이 이상하게 두 번 걸려요"	스크롤이 이중으로 걸려. 목록 하나만 스크롤하게 하고, 바깥은 overflow hidden, 중간 flex 상자들엔 min-height 0을 넣어줘.
"팝업 떴는데 뒤 배경이 같이 스크롤돼요"	즉방형	"팝업 뒤가 움직여요" · "팝업 위에서 굴리면 뒤가 내려가요"	팝업이 떠 있는 동안 뒤 화면이 스크롤되지 않게 잠그고, 닫으면 원래대로 돌려줘.
"내용이 더 있는데 스크롤이 안 돼요"	즉방형	"아래가 더 있는 것 같은데 못 내려가요" · "잘린 채로 멈춰 있어요"	이 화면이 스크롤이 안 돼. overflow hidden이 걸린 데를 찾아서 알려주고, 스크롤이 필요한 영역만 스크롤되게 고쳐줘.
"페이지 이동할 때 화면이 좌우로 덜컹해요"	즉방형	"어떤 페이지는 살짝 밀려 보여요" · "내용이 튀는 느낌이에요"	페이지 이동할 때 스크롤바 때문에 화면이 덜컹이지 않게 스크롤바 자리를 항상 확보해줘.
"채팅처럼 아래부터 보여야 하는데 위에서 시작해요"	즉방형	"새 메시지가 안 보여요" · "맨 아래로 안 내려가요"	이 메시지 목록이 항상 최신(맨 아래)이 보이게 해줘. 새 메시지가 오면 자동으로 맨 아래로 내려가게.

증상	유형	이렇게 말해도 통해요	AI에게 이렇게
"버튼이 멀쩡한데 클릭이 안 돼요"	즉방형	"눌러도 반응이 없어요" · "어떤 데는 되고 어떤 데는 안 돼요"	이 버튼이 클릭이 안 돼. 위를 덮고 있는 요소를 찾아서 알려주고, 장식용이면 pointer-events none을 줘서 클릭이 통과되게 해줘.
"팝업이 다른 것 뒤에 깔려요"	분기형	"모달이 헤더 뒤로 가요" · "z-index를 아무리 올려도 안 돼요"	팝업이 헤더 뒤에 깔려. z-index 숫자만 올리지 말고, 조상 때문에 층 안에 갇힌 건지 먼저 확인해서 알려주고, 갇혔으면 팝업을 문서 최상위로 옮겨줘.
"겹친 글자 뒤가 비쳐 보여요"	즉방형	"글자 뒤가 지저분해요" · "떠 있는 게 뒤랑 섞여 보여요"	이 떠 있는 요소에 배경색을 줘서 뒤 내용이 비치지 않게 해줘.
"그림자가 잘려요"	즉방형	"카드 그림자가 한쪽만 나와요" · "그림자가 반듯하게 끊겨요"	카드 그림자가 잘려. 잘라먹는 부모를 찾아서 알려주고, 그림자가 온전히 보이게 고쳐줘.
"목차 누르면 제목이 헤더에 가려요"	즉방형	"이동하면 위가 잘려요" · "링크 타고 가면 반쯤 가려져 있어요"	페이지 안에서 이동할 때 고정 헤더에 제목이 가리지 않게, 이동 지점에 헤더 높이만큼 여유를 줘.

증상	유형	이렇게 말해도 통해요	AI에게 이렇게
"폰에서 아래 버튼이 주소창에 가려요"	즉방형	"밑이 잘려요" · "버튼이 반만 보여요"	화면 높이 100vh를 100dvh로 바꿔서, 폰에서 주소창이 있어도 아래 버튼이 잘리지 않게 해줘.
"폰에서 버튼이 잘 안 눌려요"	즉방형	"자꾸 옆에 걸 눌러요" · "터치가 어렵대요"	모바일에서 모든 버튼과 링크의 탭 영역을 최소 44px로 키우고, 서로 붙어 있지 않게 간격을 줘.
"아이폰에서 입력칸 누르면 화면이 확대돼요"	즉방형	"입력하려고 하면 커져요" · "입력 끝나도 확대가 안 풀려요"	모든 입력칸의 글자 크기를 16px 이상으로 맞춰서 아이폰의 자동 확대를 막아줘.
"폰에서 한 번 눌러선 안 되고 두 번 눌러야 해요"	즉방형	"첫 탭은 무시돼요" · "PC에선 되는데 폰에서 이상해요"	hover에만 반응하는 메뉴를 터치 기기에서는 한 번 탭으로 열리게 바꿔줘.
"PC는 멀쩡한데 폰에서 옆으로 밀려요"	즉방형	"폰에서 가로 스크롤이 생겨요" · "화면이 좌우로 흔들려요"	폰에서 화면보다 넓어지는 요소를 찾아서 알려주고, 고정 폭은 max-width로 바꾸고 표는 자기 상자 안에서만 스크롤되게 해줘.
"앱처럼 만들었는데 헤더까지 같이 밀려요"	즉방형	"당기면 전체가 움직여요" · "고정해 둔 위아래가 출렁여요"	헤더와 하단탭은 고정하고 본문만 스크롤되게 해줘. 문서 전체 스크롤은 잠그고, 중간 flex 상자에는 min-height 0을 넣어줘.

증상	유형	이렇게 말해도 통해요	AI에게 이렇게
"간격이 어떨 땐 크고 어떨 땐 작아요"	즉방형	"위아래 여백이 들쭉날쭉해요" · "같은 간격을 줬는데 달라 보여요"	이 목록의 위아래 간격을 항목별 margin 대신 부모의 gap으로 통일해줘.
"이미지 밑에 정체불명 틈이 있어요"	즉방형	"사진 아래 흰 줄이 생겨요" · "사진과 상자가 안 붙어요"	이미지 아래에 생기는 미세한 틈을 없애줘. display block으로 바꾸면 될 거야.
"첫 번째랑 마지막만 간격이 달라요"	즉방형	"목록 끝에 여백이 남아요" · "끝만 이상하게 떠요"	항목 '사이'에만 간격이 생기게, 항목별 margin을 부모 gap으로 바꿔줘.
"답답한데 어디를 늘려야 할지 모르겠어요"	분기형	"여백을 줬는데 여전히 답답해요" · "뭔가 빽빽해요"	이 화면이 답답해 보여. 바로 고치지 말고 안쪽 여백·상자 간격·줄 간격 중 어디가 부족한지 진단해서 보여주고, 하나씩 확인받으면서 조정하자.
"줄 간격이 답답하거나 휑해요"	분기형	"글이 빽빽해요" · "제목이 붕 떠 보여요"	줄 간격이 이상해. 본문인지 제목인지 한 줄 라벨인지 구분해서 각각 맞는 줄 간격으로 조정해줘. 어디를 어떻게 바꿨는지 알려줘.

증상	유형	이렇게 말해도 통해요	AI에게 이렇게
"한글이 단어 중간에서 끊겨요"	분기형	"단어가 반 토막 나요" · "제목 줄바꿈이 지저분해요"	한글 줄바꿈이 어색해. 바로 고치지 말고 어디가 끊기는지(제목·본문인지, 표나 배지 같은 좁은 칸인지, URL·코드인지) 먼저 진단해서 알려줘. 그다음 어느 범위에만 적용할지 확인받고 고쳐줘.
"소개글을 두 줄까지만 보여주고 싶어요"	즉방형	"카드마다 글 길이가 달라 들쭉날쭉해요" · "설명이 너무 길게 나와요"	이 소개글을 2줄까지만 보여주고 넘치면 …으로 잘라줘. 카드 높이가 일정해지게.
"숫자가 바뀔 때마다 폭이 들썩여요"	즉방형	"타이머가 흔들려요" · "가격 바뀔 때 옆이 밀려요"	이 숫자 표시에 고정폭 숫자(tabular-nums)를 적용해서 값이 바뀌어도 폭이 흔들리지 않게 해줘.
"어떤 기기에선 글꼴이 달라 보여요"	분기형	"내 폰이랑 회사 PC랑 달라요" · "굵기가 이상한 데가 있어요"	기기마다 글꼴이 다르게 보여. 웹폰트가 제대로 로드되는지, 대체 글꼴이 뭔지, 쓰는 굵기를 글꼴이 지원하는지 순서로 확인해서 알려주고 정리해줘.
"회색 글씨가 너무 안 보인대요"	즉방형	"흐릿해요" · "야외에서 안 읽혀요"	이 화면 글자 색들의 대비를 점검해서, 4.5:1이 안 되는 글자를 더 진하게 올려줘.

증상	유형	이렇게 말해도 통해요	AI에게 이렇게
"다크 모드에서 글자가 안 보여요"	즉방형	"밤에 보면 까매요" · "흰 화면에 흰 글씨가 됐어요"	다크 모드에서 안 보이는 글자를 찾아줘. 색을 고칠 땐 배경과 글자를 항상 세트로 지정해줘.
"분명 넣었는데 높이가 0이에요"	즉방형	"상자가 접혔어요" · "배경색이 안 보여요"	이 상자 높이가 0으로 접혀 있어. 자식이 전부 떠 있어서(absolute·float) 그런지 확인해서 알려주고, 높이가 잡히게 고쳐줘.
"만들었다는데 화면에 안 보여요"	분기형	"분명 추가했대요" · "어디 갔는지 모르겠어요"	추가했다는 요소가 화면에 안 보여. 바로 고치지 말고 ①요소가 존재하는지 ②크기·투명도 ③다른 것 뒤인지 ④화면 밖인지 순서로 진단해서, 어디서 걸렸는지 알려줘.
"버튼이 하얗게만 나와요"	즉방형	"버튼 글자만 있고 상자가 안 보여요" · "스타일이 통째로 안 먹어요"	이 버튼이 스타일 없이 하얗게 나와. 버튼 안에 버튼이 중첩돼 있지는 않은지 HTML 구조부터 확인해서 알려주고 고쳐줘.
"새로고침하면 잠깐 깨졌다가 돌아와요"	즉방형	"처음에 민낯이 보여요" · "글꼴이 바뀌면서 출렁여요"	새로고침할 때 잠깐 깨져 보이는 걸 줄여줘. CSS가 head에서 먼저 로드되는지, 글꼴 로딩 설정(font-display)이 있는지 확인해서 고쳐줘.
"이미지가 엑박이에요"	즉방형	"사진이 안 나와요" · "배포하니까 이미지만 사라졌어요"	이 이미지가 왜 안 뜨는지 경로와 파일 존재부터 확인해서 알려주고 고쳐줘. 배포 환경에서만 안 뜨는 거면 그 이유도.

증상으로 찾는다

바이브코딩에서 화면이 깨졌을 때 정확한 CSS 용어로 질문할 수 있는 사람은 드물다. 실제로 하는 말은 이렇다. "가운데 정렬이 안 돼요", "폰에서 옆으로 밀려요", "분명 넣었는데 안 보여요". 이 사전은 그 말을 그대로 입구로 쓴다.

항목마다 다섯 가지가 붙는다. 증상(별칭 포함), 범인 후보(확률 순, 사람 말로), 처방 한 줄, AI에게 복사해 시키는 문장, 그리고 고쳐졌는지 눈으로 확인하는 방법. "고쳤어요"를 믿는 게 아니라 "창 높이를 바꿔도 가운데면 성공" 같은 확인법으로 스스로 검수하게 했다.

깨진 실물과 고친 실물이 나란히

42개 항목 전부에 깨진 상태와 고친 상태가 한 화면에 나란히 붙는다. 그림이 아니라 실제 동작하는 HTML이라, 이중 스크롤은 직접 굴려볼 수 있고 투명 오버레이에 막힌 버튼은 직접 눌러서 숫자가 안 올라가는 것을 확인할 수 있다. 폰에서만 재현되는 증상(주소창 가림, 입력칸 확대)은 재현 시뮬레이션임을 라벨로 밝혔다.

즉방형과 분기형: 이 사전의 규율

증상과 원인은 일대일이 아니다. 그래서 항목을 두 유형으로 나눴다.

즉방형 34개: 상황이 무엇이든 처방이 같다. 이중 스크롤엔 min-height 0, 투명 덮개엔 pointer-events none, 이미지 넘침엔 max-width 100%. 문장을 그대로 복사해 시키면 된다
분기형 8개: 상황에 따라 처방이 갈린다. 한글 줄바꿈이 대표다. 같은 keep-all이 제목에선 약이고 좁은 표 칸에선 넘침 사고다. 분기형은 처방을 단정하지 않고 갈림길 질문을 주며, 시키는 문장도 "고쳐줘"가 아니라 "바로 고치지 말고 어디가 문제인지 진단해서 알려주고, 적용 범위를 확인받고 고쳐줘"다

스킬 본체(SKILL.md)에도 같은 규율이 박혀 있다. AI가 분기형 항목에서 진단 없이 전역 처방을 하는 것을 금지한다.

재료는 실측이다

항목 소스는 문서 요약이 아니라 이 워크스페이스가 실제로 밟고 기록해 온 함정들이 우선이다. 헤더 고정 앱 화면의 min-height:0, 한글 keep-all, 버튼 안에 버튼을 넣어 스타일이 붕 뜨는 것, 투명 오버레이가 클릭을 먹는 것, transform 조상이 팝업을 가두는 것. 전부 재현 검증을 거친 뒤 항목이 됐다.

쓰는 법 세 가지

사람이 찾기: 아래 갤러리에서 증상을 찾아 문장을 복사해 AI에게 붙인다
Claude Code: 설치하면 AI가 증상 호소를 받아 이 사전으로 진단한다 (분기형 규율 포함)
다른 AI: llms.txt 한 줄이면 어떤 AI든 이 사전을 통째로 읽는다. giting.kr/skills/css-menu/llms.txt

실물부터, 설치 전에 전부 만져보세요

「화면이 깨졌어요」 대신증상으로 말하면 고쳐져요

이럴 땐 고치기 전에진단부터 시켜요

증상을 그대로 말하면엉뚱한 데를 안 고쳐요

이런 말엔이런 증상을 찾아요

AI가 이 사전으로범인부터 찾아요

01 정렬이 안 맞아요 5

02 삐져나와요 · 잘려요 5

03 스크롤이 이상해요 5

04 겹치고 가려져요 5

05 폰에서만 깨져요 6

06 간격이 이상해요 5

07 글자가 이상해요 5

08 안 보여요 · 사라졌어요 6

증상으로 찾는다

깨진 실물과 고친 실물이 나란히

즉방형과 분기형: 이 사전의 규율

재료는 실측이다

쓰는 법 세 가지

「화면이 깨졌어요」 대신
증상으로 말하면 고쳐져요

이럴 땐 고치기 전에
진단부터 시켜요

증상을 그대로 말하면
엉뚱한 데를 안 고쳐요

이런 말엔
이런 증상을 찾아요

AI가 이 사전으로
범인부터 찾아요