HTML/CSS 5.4 · 5부. 실무

개발자 도구

무엇이 적용됐고 무엇이 졌는지 봅니다. 짐작 대신 확인합니다.

예상 학습 시간 14분 난이도 중급

개념 설명

화면 안을 들여다보기

"왜 이 규칙이 안 먹지" 를 짐작으로 풀면 오래 걸립니다. 브라우저는 지금 어떤 규칙이 적용됐고 무엇이 졌는지 그대로 보여 주는 도구를 갖고 있습니다.

F12 로 엽니다. 이 화면에서도 지금 열어 볼 수 있습니다.

상세 사용법

줄이 그어진 자리를 보는 것이 이 도구의 첫 쓸모입니다. 규칙이 안 먹는다고 느낄 때 대개 거기에 답이 있습니다.

상세 사용법

오른쪽 CSS 칸의 값을 직접 고칠 수 있습니다. 파일을 고치고 저장하고 새로 고치는 것보다 훨씬 빠릅니다.

할 수 있는 것	방법
값 바꾸기	값을 눌러 고칩니다. 화살표 키로 1씩 올리고 내릴 수 있습니다.
선언 끄기	왼쪽 확인 상자를 끕니다. 무엇 때문인지 하나씩 꺼 보며 찾습니다.
선언 더하기	규칙 안 빈자리를 눌러 새 줄을 적습니다.
상태 만들기	:hov 를 눌러 `:hover`·`:focus` 를 강제로 켭니다.

여기서 고친 것은 저장되지 않습니다. 새로 고치면 사라집니다. 답을 찾은 뒤 파일에 옮겨 적어야 합니다.

:hover 를 강제로 켜는 기능이 특히 유용합니다. 마우스를 올린 상태의 스타일을 고치려면 손을 떼는 순간 사라져 손댈 수가 없기 때문입니다.

상세 사용법

오른쪽 아래에 2.6 에서 배운 네 겹이 그림과 숫자로 나옵니다. 안에서부터 내용 · padding · border · margin 입니다.

상세 사용법

도구 왼쪽 위의 장치 아이콘을 누르면 화면 폭을 바꿔 볼 수 있습니다. 4.1 의 미디어 쿼리가 제대로 도는지 확인하는 자리입니다.

상세 사용법

기능	알려 주는 것
색 옆의 동그라미	누르면 색을 고를 수 있고, 명도 대비가 함께 나옵니다(5.1).
Grid · Flex 배지	격자 선을 화면에 그려 줍니다. 3부의 배치를 눈으로 확인합니다.
Computed 탭	물려받은 것까지 합친 최종 값입니다. 어느 규칙에서 왔는지도 나옵니다.
Console 탭	받지 못한 파일과 오류가 나옵니다. 그림이나 CSS 가 안 나오면 여기부터 봅니다.

흔한 실수

실습 문제

1. 이 화면을 검사해 보기 난이도 하

지금 보고 있는 이 화면에서 아래를 확인하십시오. 답은 화면마다 다르므로 정답을 두지 않았습니다.

F12 를 누르고 문단에 오른쪽 단추 → 검사입니다. Computed 탭에서 속성을 펼치면 어느 규칙에서 왔는지 나옵니다.

요약