목차
- CSS 선택자 위치 찾기
- 개발자도구 (F12) 띄우기
- 소스보기 (Ctrl + U) 띄우기
- 소스보기 (Ctrl + U) vs. 개발자도구 (F12)
PS. 이미지를 새창으로 열면 큰 이미지로 열람 가능.
CSS 선택자 위치 찾기
아래 순서대로 진행하시면 됨.
- 크롬으로 접속
- 수정할 요소에 마우스 커서 위치
- 마우스 오른쪽 눌러 검사(N) 클릭
- HTML 태그 표시창 메뉴의 가장 왼쪽 버튼 (사각형에 화살표 들어간 아이콘) 클릭 후 웹 화면에서 해당 부위에 마우스 커서 갖다 대면 됨. 크롬 경우, Ctrl + Shift + C 키 누르면 한번에 요소선택기 이용 가능.
- 또는, HTML 태그 표시 창에서 마우스 커서 움직여가며 위치 확인.
- 우측 하단 CSS 창에서 해당 요소에 영향을 미치고 있는 모든 스타일 위치 확인. (스타일 소스 좌측 상단 보면 style.css:100 식으로 써있는데, 여기에 마우스 커서 올리면 파일 위치도 확인 가능.)
- CSS 영역의 filter 입력창에 특정 선택자를 입력하면 해당 선택자가 사용된 모든 선택자의 스타일을 확인 가능.
- CSS 영역의 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 부분에 해당.
PS. 주의사항
F12에서 수정한 내용은 일시적으로만 반영되며, 실제 웹사이트 파일이 수정되는 것은 아님. 새로고침하면 변경한 내용은 모두 초기화됨.
[예제] - 글자에 마우스커서 위치 후 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
