Week 4 · 통합 점검과 디버깅
Day 22 / 42
DevTools 완전 이해 — F12의 모든 것
Week 4의 시작: F12는 실험실입니다
Week 4는 다 지은 골조를 검수하는 단계입니다 — 하자(버그)를 찾고 고치는 법을 배웁니다.
10초 핵심 요약
- F12에는 Elements(구조) · Console(오류) · Network(파일 로딩) 3개 탭이 핵심입니다.
- Elements에서 값을 임시로 바꿔보는 건 자유지만, 새로고침하면 사라집니다.
- 마음에 드는 값을 찾았으면 반드시 실제 CSS 파일에도 저장해야 합니다.
01
F12 = 실험실
실험실에서는 이것저것 섞어보고 결과를 관찰합니다. 실패해도 실제 제품에는 영향이 없습니다. F12도 마찬가지입니다. 여기서 CSS 값을 아무리 바꿔봐도 진짜 style.css 파일은 전혀 바뀌지 않습니다. 마음껏 실험한 뒤, 마음에 드는 결과만 진짜 파일에 옮겨 적으면 됩니다.
02
3대 탭 훑어보기
Elements
실시간 DOM 구조 + Styles 패널. 취소선(color)은 "이 CSS는 무시됨"이라는 뜻입니다.
Console
빨간 글씨=JS 오류(줄번호 클릭하면 위치로 이동), 노란=경고, 흰=일반 로그.
Network
파일이 실제로 로딩됐는지 + 상태코드(200=정상, 404=없음, 403=권한없음).
배포한 뒤 Console에 빨간 줄이 하나도 없어야 정상입니다. 빨간 줄이 있다면 Day 24에서 배울 JS 디버깅으로 넘어가세요.
03
워크플로: 찾기 → 저장하기
1Elements에서 원하는 요소 클릭
2Styles 패널에서 값(색상, 크기 등)을 이것저것 바꿔보기
3마음에 드는 값을 발견하면 그 숫자/색상을 메모
4style.css 파일에 실제로 옮겨 적고 저장
안 될 때 확인하세요
"분명히 F12에서 예쁘게 바꿨는데 새로고침하니 원래대로 돌아왔어요"는 버그가 아니라 정상 동작입니다. DevTools 수정은 임시입니다. 4단계(style.css에 저장)를 빠뜨린 것입니다.
04
Day 22 완료 체크리스트
Elements/Console/Network 3개 탭의 역할을 설명할 수 있다.
포스트 카드 색상을 F12에서 임시 수정 → style.css에 확정 반영해봤다.
스스로 설명해보기 — F12에서 값을 바꿔도 새로고침하면 원래대로 돌아오는 이유를 설명할 수 있나요?
오늘의 용어
Elements
DOM 구조와 적용된 CSS를 실시간으로 보여주는 F12의 탭
Console
JS 오류·경고·로그가 출력되는 F12의 탭
상태코드(200/404/403)
서버가 요청에 응답한 결과를 나타내는 숫자