[intro] CSS - 수정할 요소의 CSS스타일 (선택자 확인 + 파일 위치 찾기 + 소스 보기) ★★★★★

1. CSS 선택자 위치 찾기
2. 개발자도구 (F12) 띄우기
3. 소스보기 (Ctrl + U) 띄우기
4. 소스보기 (Ctrl + U) vs. 개발자도구 (F12)

PS. 이미지를 새창으로 열면 큰 이미지로 열람 가능. 

CSS 선택자 위치 찾기

아래 순서대로 진행하시면 됨.

 

1. 크롬으로 접속
2. 수정할 요소에 마우스 커서 위치
3. 마우스 오른쪽 눌러 검사(N) 클릭
4. HTML 태그 표시창 메뉴의 가장 왼쪽 버튼 (사각형에 화살표 들어간 아이콘) 클릭 후 웹 화면에서 해당 부위에 마우스 커서 갖다 대면 됨. 크롬 경우, Ctrl + Shift + C 키 누르면 한번에 요소선택기 이용 가능.
5. 또는, HTML 태그 표시 창에서 마우스 커서 움직여가며 위치 확인.
6. 우측 하단 CSS 창에서 해당 요소에 영향을 미치고 있는 모든 스타일 위치 확인. (스타일 소스 좌측 상단 보면 style.css:100 식으로 써있는데, 여기에 마우스 커서 올리면 파일 위치도 확인 가능.)
7. CSS 영역의 filter 입력창에 특정 선택자를 입력하면 해당 선택자가 사용된 모든 선택자의 스타일을 확인 가능.
8. CSS 영역의 filter 입력창 옆의 :hov 클릭하면 :active, :focus, :focus-within, :hover, :visited 등의 가상선택자 스타일도 확인 가능. 

 

---

PS. 꼭 알아둘 사항

• html 위치는 「에디트플러스」 같은 여러 파일 찾기 기능 지원 유틸 이용.
• 만약, 파일 주소 안 보일 시, URL 주소창에 보이는 파일에서 찾으세요.
• URL 주소의 파일에도 없을 시, 해당 파일로 인클루드 되는 파일도 체크.
• JS(또는, jQuery)로 CSS 설정했을 가능성 있으니, 해당 소스도 검토.

 

개발자도구 (F12) 띄우기

 

F12 키 (또는, Ctrl  +  Shift  +  C) 

 

---

PS.

 

1. 취소선으로 삭제된 스타일

• CSS 선택자 우선순위에 밀려 미적용되는 스타일 의미.
• 아래 예제 경우, color:red 부분에 해댱.

 

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