3주차｜CSS 완전 정복 – 개발자 도구로 스타일 바꾸기
워드프레스에서 원하는 요소 찾기
웹사이트를 꾸밀 때,
“이 버튼의 색은 어디서 바꾸지?”
“글자 크기를 조금만 키우고 싶은데 CSS 클래스가 뭘까?”
이런 생각 해본 적 있죠?
이번 강의에서는 워드프레스 개발자 도구(Developer Tools) 를 이용해
사이트의 구조를 직접 살펴보고,
원하는 요소의 CSS 선택자(selector)를 찾아내는 방법을 배워봅니다.
이걸 익히면 디자인 수정 속도가 3배는 빨라집니다.
개발자 도구란?
개발자 도구는 브라우저 안에 내장된 분석 도구입니다.
크롬, 엣지, 사파리, 파이어폭스 모두 기본적으로 제공하죠.
간단히 말해, “이 웹페이지의 코드를 실시간으로 보고, 수정해볼 수 있게 하는 도구” 입니다.
크롬에서는 단축키로 열 수 있습니다 👇
- Windows: Ctrl + Shift + I
- Mac: Command + Option + I
- 또는 오른쪽 클릭 → 검사(Inspect)
개발자 도구 화면 구조 이해하기
| 영역 | 설명 |
|---|---|
| 왼쪽 (Elements) | HTML 구조가 계층적으로 표시됨 |
| 오른쪽 (Styles) | 선택한 요소에 적용된 CSS 규칙 표시 |
왼쪽은 ‘사이트의 뼈대’, 오른쪽은 ‘입힌 옷’이라 생각하면 됩니다.
즉, HTML + CSS의 연결 상태를 눈으로 볼 수 있는 곳입니다.
실습 ① 버튼의 스타일 확인하기
예를 들어 워드프레스 사이트의 버튼 색을 바꾸고 싶다면 👇
- 버튼 위에서 마우스 오른쪽 클릭 → 검사(Inspect)
- Elements 탭에서 코드 확인:
<button class="wp-element-button">더 알아보기</button>오른쪽 Styles 탭에서 이렇게 표시됩니다.
.wp-element-button {
background-color: #2563eb;
color: white;
border-radius: 4px;
}여기서 background-color 값을 바꾸면 화면에서 즉시 버튼 색이 바뀝니다(저장은 되지 않음).
이걸로 선택자 이름을 확인해두면, 나중에 “추가 CSS”에서 수정할 수 있습니다.
실습 ② 특정 블록의 클래스 찾기
예를 들어 인용문 블록을 꾸미고 싶다면 👇
<blockquote class="wp-block-quote">
<p>꾸준함이 최고의 전략이다.</p>
</blockquote>이제 CSS 선택자 .wp-block-quote 로 스타일을 바꿔볼 수 있습니다.
.wp-block-quote {
border-left: 4px solid #0284c7;
padding-left: 12px;
color: #374151;
font-style: italic;
}이 패턴 — “검사 → 클래스 확인 → 추가 CSS에 적용” — 이 기본 루틴입니다.
개발자 도구에서 CSS를 실시간으로 수정하기
1. Styles 영역 오른쪽에서 속성을 직접 클릭하면 수정 가능
2. + 버튼으로 새 CSS 속성 추가
3. 결과는 즉시 화면에 반영 (저장 X)
h2 {
color: #2563eb;
font-weight: 700;
}개발자 도구는 CSS 실험실이라 생각하세요.
실제 사이트를 망치지 않고 디자인을 실험할 수 있습니다.
개발자 도구에서 구조 계층 이해하기
HTML은 계층 구조(Tree)로 되어 있습니다.
개발자 도구 왼쪽에서 <div> 안에 <p>나 <img>가 들어간 걸 보면,
각 요소의 부모(parent) 와 자식(child) 관계를 볼 수 있습니다.
예:
<section>→<article>→<p>
article > p 는 “article 바로 아래의 p 요소”를 뜻합니다.
실습 ③ 원하는 영역을 빠르게 찾는 단축키
- Ctrl + Shift + C (Mac: Command + Shift + C) → 클릭한 부분의 HTML로 이동
- Ctrl + F → 개발자 도구 내 텍스트나 클래스명 검색
- ↑ ↓ → 부모/자식 노드 이동
이 세 가지 단축키만 기억해도 탐색 속도가 훨씬 빨라집니다.
워드프레스에 적용하기 (추가 CSS 활용)
원하는 요소의 선택자를 찾았다면
워드프레스 관리자 → 테마 → 사용자 정의 → 추가 CSS 로 이동하세요.
.wp-element-button {
background-color: #16a34a; /* 초록색으로 변경 */
border-radius: 8px;
}저장 후 새로고침하면 실제 사이트에 반영됩니다.
선택자 이름을 정확히 아는 것이 핵심입니다.
이미지로 보는 워드프레스 개발자 도구 사용법
강의 안내
- 다음 강의 👉 4주차: 반응형 기초 — 모바일과 데스크톱 화면 대응
- 이전 강의 👉 2주차: CSS 박스 모델 완전 정복
- 사전 강의 👉 워드프레스 CSS 알면 돈이 보인다
더 알아보기 (외부 링크)
요약: 오늘 배운 핵심 포인트
- 개발자 도구는 HTML과 CSS 구조를 실시간 분석하는 브라우저 내장 툴이다.
- Elements 탭에서 선택자 이름을 찾고 Styles 탭에서 CSS를 확인한다.
- margin/padding/border 영역을 시각화할 수 있다.
- “검사 → 선택자 복사 → 추가 CSS 적용” 패턴으로 실무에 활용한다.
다음 강의 예고 🎯
4주차｜반응형 기초 — 모바일과 데스크톱 화면 대응
About the Author
