웹 개발을 처음 배우는 과정에서 실수는 자연스러운 일입니다.
하지만 초기 습관이 향후 실력에 큰 영향을 미치기 때문에,
처음부터 자주 발생하는 실수들을 인지하고 피하는 것이 중요합니다.
이 글에서는 HTML과 CSS를 처음 배우는 입문자들이 흔히 저지르는 실수 5가지를 정리하고,
각 실수에 대한 해결 방법과 올바른 사용 예제를 함께 제공합니다.
✅ 1. 닫는 태그를 빠뜨리는 실수
문제 예시:
- <p> 태그를 열었지만 </p>로 닫지 않음
- 브라우저가 자동으로 해석하긴 하지만, 문서 구조가 깨지고 예기치 않은 결과 발생 가능
해결 방법:
✅ HTML은 열면 반드시 닫아야 하는 구조입니다.
특히 <div>, <section>, <ul> 등은 열고 닫는 태그 쌍이 중요합니다.
✅ 2. 클래스(class)와 아이디(id) 개념 혼동
문제 예시:
- HTML에서는 id="box"인데, CSS에서는 .box로 설정 → 적용되지 않음
해결 방법:
- 아이디 선택자는 #box, 클래스 선택자는 .box
- 일관되게 맞춰야 스타일이 적용됨
✅ 클래스는 여러 번 사용할 수 있고, 아이디는 한 문서 내에서 1번만 사용해야 합니다.
✅ 3. 이미지(img) 경로 오류
문제 예시:
- 이미지가 표시되지 않음 → 실제 파일이 경로에 없거나 경로가 잘못됨
해결 방법:
- 항상 파일 경로를 실제 위치와 맞게 설정
- 대소문자 구분, 슬래시 방향 등에 주의
✅ 경로 오류는 웹에서 가장 흔한 문제 중 하나입니다.
로컬 개발 시에는 **상대 경로(relative path)**를 정확하게 이해하는 것이 중요합니다.
✅ 4. CSS 적용이 안 되는 이유 모름 (우선순위, 연결 문제 등)
문제 상황:
- CSS 파일을 연결했는데 스타일이 적용되지 않음
- 또는 CSS가 일부만 적용됨
원인 확인 리스트:
- <link> 태그 오타 또는 경로 오류
- <style> 태그가 <body> 안에 들어가 있음 (❌)
- 우선순위(Selector Specificity) 충돌
- 캐시 문제로 CSS가 갱신되지 않음
정상 예시:
✅ CSS 적용이 안 될 때는 링크 경로, 우선순위, 캐시부터 점검하세요.
개발자 도구(F12)를 통해 스타일 적용 여부를 실시간으로 확인하는 것도 큰 도움이 됩니다.
✅ 5. margin과 padding의 차이를 모른 채 사용
문제 상황:
- 여백은 생겼지만 어디에 생겼는지 구분 못함
정리:
| padding | 내부 여백 | 콘텐츠와 테두리 사이 |
| margin | 외부 여백 | 요소와 요소 사이 |
시각적으로 이해하는 예:
✅ 박스 모델(Box Model)의 개념을 이해하면 margin/padding이 쉽게 정리됩니다.
💡 추가 팁: 실수를 줄이는 습관
- 코드 자동완성 에디터(VS Code) 사용
- HTML/CSS 실시간 검증 사이트 사용
- Live Server로 즉시 결과 확인
- 실습 즉시 브라우저에서 결과를 확인하면 문제를 빠르게 파악 가능
마무리: 실수를 통해 더 잘 배울 수 있습니다
처음 HTML과 CSS를 배우는 과정에서 실수는 누구나 합니다.
중요한 것은 실수를 반복하지 않고, 이해하고 넘어가는 것입니다.
위에서 소개한 5가지 실수는 입문자들이 거의 모두 겪는 대표적인 사례입니다.
이 글을 참고하여 자신의 코드를 점검하고, 올바른 코딩 습관을 가지는 것이 웹 개발자로 성장하는 첫 걸음이 될 것입니다.