CSS가 왜 안 먹히지? 바이브코딩 초보라면 가장 먼저 확인해 봐야 할 10가지 방법
“분명 AI가 CSS를 만들어 줬는데 화면이 하나도 바뀌지 않았어요.”
바이브코딩으로 웹페이지를 만들다 보면 자주 만나는 문제입니다.
색상을 바꿨는데 그대로이고, 버튼 크기를 수정했는데 적용되지 않거나, 모바일 스타일이 전혀 반영되지 않는 경우가 있습니다.
초보자는 이럴 때 CSS 전체를 다시 작성하거나 AI에게 “디자인이 안 돼요”라고 반복해서 요청하기 쉽습니다.
하지만 실제 원인은 의외로 단순한 경우가 많습니다.
파일 연결, 선택자 이름, 적용 순서, 캐시처럼 기본적인 부분 하나가 어긋나서 CSS가 보이지 않는 경우가 많기 때문입니다.
바이브코딩에서 CSS가 적용되지 않을 때는 코드를 더 만들기보다 현재 스타일이 어디에서 막히고 있는지 순서대로 확인하는 것이 중요합니다.
CSS 파일이 HTML에 제대로 연결되어 있는지 확인하세요
가장 먼저 볼 부분입니다.
HTML 파일 안에 CSS 파일을 연결하는 코드가 있어야 합니다.
예를 들어 CSS 파일 이름이 style.css라면 HTML에서는 해당 파일을 정확한 경로로 불러와야 합니다.
파일 이름이
style.css
인데 HTML에는
styles.css
라고 적혀 있다면 적용되지 않습니다.
폴더 안에 들어 있다면 경로도 달라집니다.
예를 들어
css/style.css
처럼 실제 위치와 맞아야 합니다.
CSS가 전혀 적용되지 않는다면 파일 내용보다 연결 상태부터 확인하는 것이 가장 빠릅니다.
파일 이름의 대소문자가 같은지 확인하세요
초보자가 자주 놓치는 문제입니다.
예를 들어 실제 파일은
Style.css
인데 HTML에서는
style.css
로 연결했을 수 있습니다.
일부 환경에서는 대소문자를 엄격하게 구분하기 때문에 내 컴퓨터에서는 되는 것처럼 보여도 배포 후 깨질 수 있습니다.
이미지와 JavaScript 파일도 같은 문제가 생길 수 있습니다.
파일 이름은 대소문자까지 정확하게 맞추는 습관을 들이는 것이 좋습니다.
HTML의 class와 CSS 선택자가 일치하는지 확인하세요
예를 들어 HTML에는 다음과 같은 클래스가 있다고 생각해 보겠습니다.
main-button
그런데 CSS에서는
main_btn
이나
mainButton
을 수정하고 있다면 아무 변화가 없습니다.
AI가 중간에 클래스 이름을 바꿨는데 HTML과 CSS 중 한쪽만 수정된 경우도 자주 발생합니다.
그래서 스타일이 특정 요소에만 적용되지 않는다면
HTML의 class 이름
CSS의 선택자 이름
이 정확히 같은지 먼저 비교하세요.
CSS는 이름이 비슷한 것이 아니라 정확하게 일치해야 적용됩니다.
id와 class를 혼동하지 않았는지 확인하세요
CSS에서 class와 id는 작성 방식이 다릅니다.
class를 선택할 때는 점을 사용하고,
id를 선택할 때는 샵 기호를 사용합니다.
예를 들어 HTML에 class가 있는데 CSS에서 id 방식으로 찾고 있다면 적용되지 않습니다.
초보자라면 AI에게 이렇게 요청해도 좋습니다.
“이 요소의 HTML class와 CSS 선택자가 정확히 연결되어 있는지 확인해 주세요.”
선택자 기호 하나만 달라도 스타일은 완전히 무시될 수 있습니다.
더 강한 CSS 규칙이 덮어쓰고 있을 수 있습니다
CSS는 같은 요소에 여러 스타일이 적용될 수 있습니다.
예를 들어 버튼 색상을 파란색으로 바꿨는데 다른 CSS에서 더 구체적인 규칙으로 빨간색을 지정하고 있다면 내가 수정한 스타일이 보이지 않을 수 있습니다.
이런 상황을 CSS 우선순위 문제라고 생각하면 쉽습니다.
예를 들어
일반 버튼 스타일
특정 영역 안의 버튼 스타일
인라인 스타일
이 동시에 존재할 수 있습니다.
CSS가 적용되지 않는 것처럼 보여도 실제로는 다른 규칙에 덮어쓰여 있는 경우가 많습니다.
같은 CSS가 여러 파일에 중복되어 있지 않은지 확인하세요
프로젝트가 커지면 CSS 파일도 여러 개로 나뉩니다.
예를 들어
style.css
home.css
mobile.css
theme.css
가 함께 사용될 수 있습니다.
이때 같은 버튼 스타일이 여러 파일에 존재하면 나중에 불러온 CSS가 앞의 스타일을 덮어쓸 수 있습니다.
AI가 새 CSS 파일을 추가하면서 기존 스타일을 그대로 남겨 둔 경우도 있습니다.
그래서 원하는 스타일이 반영되지 않는다면 같은 선택자가 다른 CSS 파일에도 있는지 검색해 보는 것이 좋습니다.
브라우저 캐시 때문에 예전 CSS가 보일 수 있습니다
코드는 제대로 수정했는데 화면이 그대로라면 브라우저가 이전 CSS 파일을 보여 주고 있을 수도 있습니다.
이럴 때는 페이지를 새로고침 해보는 것이 좋습니다.
개발 서버를 사용 중이라면 서버가 최신 파일을 반영하고 있는지도 확인하세요.
파일을 저장하지 않은 채 브라우저만 새로고침하는 실수도 자주 발생합니다.
코드 수정 → 파일 저장 → 브라우저 새로고침 순서를 먼저 확인하세요.
CSS 문법 오류가 없는지 확인하세요
중괄호 하나가 빠지거나 속성 이름이 잘못되면 해당 부분 이후의 스타일이 예상과 다르게 적용될 수 있습니다.
예를 들어
중괄호 누락
세미콜론 누락
잘못된 속성 이름
오타가 있는 값
등이 원인이 될 수 있습니다.
AI에게 CSS 전체를 다시 만들어 달라고 하기보다
“이 CSS에서 문법 오류가 있는지 확인하고, 문제가 있는 줄만 알려 주세요.”
라고 요청하는 편이 안전합니다.
작은 문법 오류가 여러 스타일을 한꺼번에 이상하게 보이게 만들 수 있습니다.
미디어 쿼리 조건이 맞는지 확인하세요
PC에서는 잘 보이는데 모바일에서만 CSS가 적용되지 않는 경우라면 미디어 쿼리를 확인해야 합니다.
예를 들어
“화면 너비가 600px 이하일 때 적용”
하도록 작성했는데 실제 테스트 화면이 700px이라면 해당 스타일은 당연히 적용되지 않습니다.
반대로 조건을 잘못 작성하면 모바일 스타일이 PC에도 적용될 수 있습니다.
반응형 CSS는 코드 내용뿐 아니라 현재 화면 크기와 조건이 맞는지도 함께 확인해야 합니다.
AI가 HTML 구조를 바꿨는지 확인하세요
바이브코딩에서는 이 문제가 의외로 자주 발생합니다.
처음에는 CSS가 다음 구조를 기준으로 작성됐습니다.
header 안의 button
그런데 AI가 HTML을 수정하면서 버튼을 다른 영역으로 옮겼습니다.
CSS는 여전히 예전 구조를 기준으로 찾고 있기 때문에 스타일이 적용되지 않을 수 있습니다.
그래서 디자인 수정 후 CSS가 갑자기 안 먹는다면 최근 HTML 변경부터 확인해 보세요.
CSS 문제처럼 보여도 실제 원인은 HTML 구조 변경일 수 있습니다.
CSS가 적용되지 않을 때 확인하는 체크리스트
- CSS 파일이 HTML에 연결되어 있는가?
- 파일 이름과 경로가 정확한가?
- 대소문자가 일치하는가?
- HTML의 class와 CSS 선택자가 같은가?
- id와 class를 혼동하지 않았는가?
- 다른 CSS 규칙이 덮어쓰고 있지 않은가?
- 같은 선택자가 여러 파일에 중복되어 있지 않은가?
- 파일을 저장하고 새로고침했는가?
- CSS 문법 오류가 없는가?
- 최근 HTML 구조가 바뀌지 않았는가?
이 순서로 확인하면 “CSS가 안 돼요”라는 막연한 문제를 훨씬 빠르게 좁힐 수 있습니다.
AI에게 CSS 문제를 안전하게 물어보는 프롬프트
아래처럼 요청해 보세요.
“현재 HTML과 JavaScript 기능은 정상입니다. CSS만 원하는 대로 적용되지 않습니다. 전체 디자인을 새로 만들지 말고 먼저 CSS 파일 연결, 경로, class와 id 이름, 선택자 우선순위, 중복 스타일 여부를 순서대로 확인해 주세요. 기존 HTML 구조와 JavaScript는 변경하지 마세요. 문제가 있는 선택자와 이유를 설명한 뒤 필요한 CSS만 최소한으로 수정해 주세요. 수정 후 PC와 모바일에서 확인해야 할 테스트 항목도 알려 주세요.”
핵심은 CSS 문제를 해결하면서 HTML과 JavaScript까지 같이 바꾸지 못하게 하는 것입니다.
CSS가 안 보일 때는 새로 만들기보다 연결부터 확인하세요
바이브코딩에서 CSS가 적용되지 않을 때 가장 흔한 실수는 바로 전체 스타일을 다시 작성하는 것입니다.
하지만 실제로는 파일 경로 하나, class 이름 하나, 더 강한 선택자 하나 때문에 스타일이 보이지 않는 경우가 많습니다.
그래서 가장 좋은 순서는 다음과 같습니다.
파일 연결 확인 → 선택자 확인 → 중복 스타일 확인 → 우선순위 확인 → 저장과 새로고침 → 최소 수정
이 과정을 거치면 불필요하게 전체 디자인을 다시 만드는 일을 줄일 수 있습니다.
CSS 문제를 해결하는 능력은 단순히 예쁜 화면을 만드는 기술이 아닙니다.
HTML 구조와 스타일이 어떻게 연결되는지 이해하는 과정입니다.
다음에 색상이나 버튼 크기가 바뀌지 않는다면 AI에게 바로 새 CSS를 만들어 달라고 하지 마세요.
“이 스타일이 실제로 어떤 요소를 가리키고 있는가?”
이 질문부터 확인하는 것이 가장 빠른 해결 방법입니다.