목차
- CSS 선택자 위치 찾기
- 개발자도구 (F12) 띄우기
- 소스보기 (Ctrl + U) 띄우기
- 소스보기 (Ctrl + U) vs. 개발자도구 (F12)
PS. 이미지를 새창으로 열면 큰 이미지로 열람 가능.
CSS 선택자 위치 찾기
아래 순서대로 진행하시면 됨.
- 크롬으로 접속
- 수정할 요소에 마우스 커서 위치
- 마우스 오른쪽 눌러 검사(N) 클릭
- 우측 하단 HTML 창에서 찾을 요소들 마우스 커서 움직여가며 정확한 위치 선택
- 우측 하단 CSS 창에서 해당 요소에 영향을 미치고 있는 모든 스타일 위치 확인. (스타일 소스 좌측 상단 보면 style.css:100 식으로 써있는데, 여기에 마우스 커서 올리면 파일 위치도 확인 가능.)
- filter 창 옆의 :hov 클릭하면 :active, :focus, :focus-within, :hover, :visited 등의 가상선택자 스타일도 확인 가능.
PS. 꼭 알아둘 사항
- html 위치는 「에디트플러스」 같은 여러 파일 찾기 기능 지원 유틸 이용.
- 만약, 파일 주소 안 보일 시, URL 주소창에 보이는 파일에서 찾으세요.
- URL 주소의 파일에도 없을 시, 해당 파일로 인클루드 되는 파일도 체크.
- JS(또는, jQuery)로 CSS 설정했을 가능성 있으니, 해당 소스도 검토.
개발자도구 (F12) 띄우기
F12 키 (또는, Ctrl + Shift + C)
PS.
1. 취소선으로 삭제된 스타일
2. 흐릿한 글씨로 적힌 스타일
- CSS 상속에 의해서 암묵적으로 적용되는 스타일 의미.
- 아래 예제 경우, background:yellow 부분에 해당.
[예제] - 글자에 마우스커서 위치 후 F12키 눌러서 확인
<style>
div#a {border: 1px solid black;}
div#b {background-color: yellow; text-indent: 1em;}
div#c {color: red;}
p{font: 16px bold verdana sans-serif; color:blue;}
</style>
<div id="a">
<div id="b">
<div id="c">
<p>홈짱닷컴 Homzzang.com</p>
</div>
</div>
</div>
결과보기
소스보기 (Ctrl + U) 띄우기
Ctrl + U
※ 테마 경로 확인할 때 필요. Ctrl + F 눌러 찾기창 띄운 후, theme (아미나 경우 thema) 입력해서 확인.
소스보기 (Ctrl + U) vs. 개발자도구 (F12)
https://homzzang.com/b/html-158
