CSS 강좌 / 브라우저 개발자 도구로 CSS 확인하고 수정하기

CSS가 예상대로 적용되지 않을 때는 브라우저 개발자 도구에서 요소를 선택하고 적용된 규칙과 계산된 값을 비교하세요. Chrome 기준으로 화면의 요소를 마우스 오른쪽 버튼으로 눌러 검사를 선택하면 Elements 패널이 열립니다. Styles에서 선언을 임시로 바꿔 보고, 원인을 확인한 뒤 원본 CSS 파일을 수정하면 됩니다.

연습할 페이지 준비하기

아래 코드를 index.html로 저장하고 브라우저에서 여세요. 같은 p 요소에 두 규칙이 겹치는 상황을 의도적으로 만들었습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS 검사 연습</title>
  <style>
    p {
      color: #555;
      padding: 8px;
    }

    .notice {
      color: #086c6b;
      border: 1px solid #86b9b7;
    }
  </style>
</head>
<body>
  <p class="notice">이 문단의 스타일을 검사해 보세요.</p>
</body>
</html>

문단의 글자색은 p 규칙의 회색보다 .notice 규칙의 청록색으로 보일 것입니다. 테두리는 클래스 규칙에서, 안쪽 여백은 요소 규칙에서 가져옵니다. 한 규칙이 다른 규칙 전체를 지우는 것이 아니라, 같은 속성에 충돌이 있을 때 속성별로 최종 값이 정해집니다.

적용된 규칙과 취소된 선언 확인하기

1. 문단을 마우스 오른쪽 버튼으로 누르고 검사를 선택합니다. Chrome의 Elements 패널에서 해당 p 요소가 선택됐는지 확인하세요.
2. Styles 영역에서 .notice와 p 규칙을 찾습니다. 브라우저 버전과 창 배치에 따라 영역의 위치는 달라질 수 있습니다.
3. p의 color: #555가 취소선으로 표시되는지 확인합니다. 이는 선언이 문법 오류라는 뜻이 아니라 같은 속성의 다른 선언이 최종 값을 정했다는 뜻입니다.
4. .notice의 색상 값을 임시로 다른 색으로 바꾸고 화면이 즉시 달라지는지 봅니다.

규칙 옆의 파일명과 줄 번호를 보면 어느 스타일시트에서 왔는지 찾을 수 있습니다. 비슷한 선택자가 여러 파일에 흩어져 있을 때 특히 유용합니다. 속성이 아예 보이지 않는다면 선택자가 해당 요소에 맞지 않거나 CSS 파일이 로드되지 않았을 수 있습니다. 선언은 보이지만 경고 표시가 있다면 속성명이나 값의 문법을 확인하세요.

Styles와 Computed는 어떻게 다를까요?

Styles는 선택한 요소에 맞는 규칙과 취소된 선언을 함께 보여 줍니다. 따라서 ‘왜 이 값이 적용되지 않았는가’를 추적하기 좋습니다. Computed는 브라우저가 최종적으로 계산한 값을 확인할 때 유용합니다. 예제에서 color를 검색하면 실제로 사용되는 색상을 비교할 수 있습니다.

계산된 값이 작성한 표현과 다르게 나타날 수도 있습니다. 예를 들어 색상을 16진수로 입력했더라도 개발자 도구가 RGB 형태로 보여 줄 수 있습니다. 표현 형식만 보고 잘못 적용됐다고 단정하지 말고 실제 값과 화면 결과를 함께 확인하세요.

문제 해결 순서는 보통 요소 선택 → 규칙 존재 확인 → 취소선·경고 확인 → 계산된 값 확인 → 원본 파일 수정입니다. 선언을 계속 덧붙이거나 !important를 사용하기 전에 이 순서로 원인을 찾는 편이 수정 범위를 작게 유지합니다.

임시 수정은 저장될까요?

개발자 도구에서 바꾼 스타일은 일반적으로 현재 브라우저 화면에서만 시험하는 변경입니다. 페이지를 새로고침하면 원래 상태로 돌아갈 수 있습니다. 결과가 마음에 들면 편집기에서 원본 HTML 또는 CSS 파일의 해당 선언을 고치고 저장한 뒤 다시 새로고침하세요. 브라우저의 로컬 오버라이드나 워크스페이스 연결 같은 별도 기능을 설정한 경우에는 동작이 다를 수 있습니다.

Chrome의 실제 패널과 기능은 Chrome DevTools의 CSS 보기·변경 안내를 참고하세요. Firefox에서는 검사기(Inspector)의 규칙·계산값 화면에서 같은 취지로 확인할 수 있습니다.