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

브라우저 개발자 도구를 사용하면 현재 요소에 어떤 CSS가 적용됐는지 확인하고 값을 임시로 바꿔 볼 수 있습니다. Chrome 계열 브라우저에서는 Elements에서 요소를 고르고, Styles에서 적용 규칙을, Computed에서 최종 계산값을 확인합니다. 별도 저장 설정이 없는 기본 상태에서는 개발자 도구의 변경이 원본 HTML·CSS 파일에 자동으로 저장되지 않습니다.

실습 파일과 확인할 결과 준비하기

아래 전체 코드를 UTF-8 형식의 index.html로 저장하고 브라우저에서 여세요. 운영 시간 문단은 초록색, 첫 번째 일반 문단은 회색으로 보이는 예제입니다. 안내문에는 16px 안쪽 여백과 연한 배경을 넣어, 속성별로 결과를 비교할 수 있게 했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>작은 정원</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    h1 { color: #087f5b; }
    p { color: #666; }
    .notice {
      color: #087f5b;
      padding: 16px;
      border: 1px solid #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
<h1>작은 정원</h1>
  <p>식물을 기르고 쉬어 갈 수 있는 공간입니다.</p>
  <p class="notice">매일 오전 9시에 문을 엽니다.</p>
</body>
</html>

CSS를 본문 HTML과 함께 style 요소에 넣었으므로 실습 원본은 파일 한 개입니다. 이미 외부 CSS로 실습 중이라면 같은 규칙을 style.css에 넣어도 되지만, 개발자 도구에서 표시하는 파일 이름과 줄 번호는 달라집니다. 화면에 예상한 글자가 보이는지 확인한 뒤 개발자 도구를 엽니다.

Elements에서 실제 요소 선택하기

1. 페이지의 “매일 오전 9시에 문을 엽니다.” 문장 위에서 마우스 오른쪽 버튼을 누르고 검사(Inspect)를 선택합니다. Windows의 Chrome·Edge에서는 F12 또는 Ctrl+Shift+I로도 개발자 도구를 열 수 있습니다.
2. Elements 탭에서 선택된 줄이 <p class="notice">인지 확인합니다. 다른 요소가 선택됐다면 요소 선택 도구를 누른 뒤 안내문을 다시 선택하세요. 도구의 위치와 메뉴 언어는 브라우저·버전에 따라 다를 수 있습니다.
3. 선택한 요소의 옆이나 아래에서 Styles를 엽니다. .notice 규칙과 p 규칙이 둘 다 보이는지 살펴봅니다. 좁은 창에서는 패널이 아래쪽에 배치되거나 일부 탭이 더보기 메뉴에 들어갈 수 있습니다.

Elements가 보여 주는 것은 브라우저가 해석한 문서 구조인 DOM(Document Object Model)입니다. 페이지 소스와 항상 같은 모습은 아닙니다. 브라우저가 잘못된 HTML을 보정하거나 JavaScript가 요소를 바꾸면, 실제 선택할 대상은 Elements에 나타난 구조를 기준으로 확인해야 합니다.

위 화면은 Microsoft Edge 154에서 같은 코드를 example-4.html로 저장한 뒤 실제 DevTools 원격 검사 화면에서 확인한 결과입니다. Styles 옆에 Computed 사이드바를 열고 color로 필터링했습니다. 기본 화면에서는 Computed 탭을 눌러 같은 최종 값을 확인할 수 있습니다. 브라우저의 패널 배치가 달라도 선택한 HTML 요소와 CSS 선언을 확인하는 순서는 같습니다.

Styles와 Computed에서 서로 다른 정보 읽기

Styles에는 선택한 요소와 일치하는 규칙, 요소에 직접 적은 인라인 스타일, 상속 관련 규칙 등이 나타납니다. p { color: #666; }와 .notice { color: #087f5b; }는 모두 안내문과 일치하지만 최종 글자색은 초록색입니다. 이 예제의 같은 출처·중요도·레이어 조건에서는 클래스 선택자의 우선순위가 요소 선택자보다 높기 때문입니다.

회색 색상 선언에 취소선이 보이면 먼저 “문법이 틀렸다”가 아니라 “다른 선언이 이겼다”는 가능성을 확인합니다. 취소선·경고 표시의 의미는 표시 위치와 상황에 따라 다를 수 있으므로 해당 선언에 마우스를 올려 설명도 읽어 보세요. padding: 16px는 color와 별개의 속성이므로 색상 충돌이 있어도 함께 적용될 수 있습니다.

Computed는 선택한 요소에 최종적으로 계산된 스타일을 확인하는 데 사용합니다. 탭을 열고 필터에 color를 넣어 글자색을 찾으세요. #087f5b가 rgb(8, 127, 91)로 표시될 수 있는데 둘은 같은 색입니다. 속성을 펼치면 관련 규칙과 출처를 추적할 수 있습니다. 어떤 속성은 기본 목록에서 숨겨질 수 있으므로 표시 옵션도 확인하세요.

각 패널의 기능과 선언 변경 방법은 Chrome DevTools의 CSS 기능 문서에 설명되어 있습니다. 충돌 자체를 더 이해하려면 상속·우선순위·캐스케이드 강의의 조건별 예제와 함께 확인하세요.

선언을 끄고 값을 바꿔 보기

1. Styles에서 .notice의 color: #087f5b 선언을 찾습니다. 선언 옆의 체크박스를 해제하면 이 선언만 임시로 제외됩니다. 그 결과 안내문 색이 p 규칙의 회색으로 바뀌는지 확인합니다.
2. 체크박스를 다시 켜 원래 초록색으로 되돌립니다. 그 다음 color의 값을 클릭해 #1d4ed8로 바꾸고 Enter를 누릅니다. 안내문 글자만 파란색으로 바뀌고 배경색은 연한 초록색으로 남는지 봅니다.
3. Computed에서 글자색을 다시 확인합니다. rgb(29, 78, 216)으로 표시되면 바꾼 파란색과 일치합니다. 배경은 background-color라는 별개의 속성입니다.
4. 이 실습은 저장 연결이나 Local Overrides를 설정하지 않았으므로 새로고침하면 개발자 도구에서 바꾼 색이 사라지고 원본의 초록색으로 돌아옵니다. 원본이 바뀌지 않았음을 확인한 뒤 다음 단계로 진행합니다.

해제한 선언은 체크박스를 다시 켜고, 잘못 바꾼 값은 기존 값을 다시 입력하면 되돌릴 수 있습니다. 다른 변경까지 한꺼번에 없애고 싶다면 이 실습처럼 저장 기능을 설정하지 않은 상태에서 새로고침합니다. 작업 공간 연결이나 로컬 재정의 기능을 켰다면 저장·유지 방식이 달라질 수 있으므로 무조건 새로고침으로 복원된다고 생각하지 마세요.

마음에 든 변경을 원본 파일에 저장하기

Styles의 규칙 옆에 표시되는 파일 이름과 줄 번호를 누르면 관련 소스를 찾는 데 도움이 됩니다. 이 예제는 HTML 안의 style이므로 원본 index.html에 해당 규칙이 있습니다. 외부 스타일시트를 사용했다면 style.css 등의 이름을 확인하세요. 처음에는 개발자 도구의 표시를 참고해 텍스트 편집기에서 원본을 수정하는 방식이 분명합니다.

1. 텍스트 편집기에서 실제로 열어 둔 index.html을 엽니다. 파일을 여러 폴더에 복사했다면 브라우저 주소의 파일 경로와 일치하는지 확인합니다.
2. 원본 .notice 규칙의 color 값을 #1d4ed8로 바꾸고 저장합니다.
3. 브라우저에서 새로고침합니다. 이제 다시 열어도 안내문이 파란색으로 보이면 원본에 반영된 것입니다.
4. 실습을 마친 뒤 원래 디자인으로 되돌리려면 원본 color를 #087f5b로 복원하고 저장·새로고침합니다.

CSS가 안 먹는 세 가지 상황을 구분하기

각 상황은 원본을 하나씩 바꾸어 저장·새로고침해서 확인한 뒤 되돌리세요. 첫 상황에서는 선택한 요소에 맞지 않는 .notcie 규칙이 Styles의 일반 적용 규칙 목록에 나타나지 않을 수 있습니다. 세 번째 상황은 작성 위치나 브라우저 버전에 따라 경고 표시 방식이 달라집니다. 규칙이 없고, 규칙이 있는데 덮어써졌고, 선언 자체가 유효하지 않은 경우를 나누면 어디를 수정해야 하는지 알 수 있습니다.