• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

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

 

 

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


CSS 선택자 위치 찾기

 

1.
크롬으로 접속

2.
수정할 요소에 마우스 커서 위치

3.
마우스 오른쪽 눌러 검사(N) 클릭

4.
우측 하단 HTML 창에서 찾을 요소들 마우스 커서 움직여가며 정확한 위치 선택

5.
우측 하단 CSS 창에서 해당 요소에 영향을 미치고 있는 모든 스타일 위치 확인
(스타일 소스 좌측 상단 보면 style.css:100 식으로 써있는데,
여기에 마우스 커서 올리면 파일 위치도 확인 가능.)

 

6.

filter 창 옆의 :hov 클릭하면 아래 가상선택자 스타일도 확인 가능.
:active, :focus, :focus-within, :hover, :visited

 

※ 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

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
text CSS - color 속성 ★ - 글자색깔 (=글자색상=글자색깔=글자컬러 = 텍스트색깔 = 컬러속성 = co…
text CSS - direction 속성 - 텍스트방향 (= 텍스트진행방향 = direction속성 = 디렉션속성)…
text CSS - letter-spacing 속성 ★ - 글자 간격 사이사이 띄우기 ( 텍스트사이띄우기 = 문자 간…
text CSS - line-height 속성 ★ - 텍스트라인높이 (= line-height속성 = 텍스트줄높이 =…
text CSS - text-align 속성 ★ - 텍스트정렬 (= text-align속성 = 텍스트얼라인속성)
text CSS - text-decoration 속성 ★ - 텍스트라인 꾸미기 (= 밑줄/밑선, 가운데줄/취소선, 윗…
text CSS - text-indent 속성 ★★ - 단락 첫줄 텍스트 들여쓰기 (= text-indent속성 = …
text CSS - text-transform 속성 - 텍스트 대소문자변환 (= text-transform속성 = 텍…
text CSS - word-spacing 속성 ★ - 텍스트 단어간 간격 (= 단어간격 = word-spacing…
text CSS - vertical-align 속성 ★ - 텍스트수직정렬 (= vertical-align속성 = 버티…
text CSS - white-space 속성 ★ - 공백처리/줄바꿈 지정 (= white-space속성 / 화이트스…
text CSS - unicode-bidi 속성 - 텍스트글자방향 (= unicode-bidi속성 = 유니코드비디속성…
text CSS - text-align-last 속성 - 단락마지막라인정렬 (= text-align-last속성 = …
text CSS - text-emphasis 속성 - 텍스트 강조마크의 '모먕/색깔' 일괄 지정 (= 텍스트 글자 위…
text CSS - text-justify 속성 - 텍스트 좌우균분정렬 세부설정 (= text-justify속성 = …
text CSS - text-overflow 속성 ★ - 영역 이탈 글자 처리 (= text-overflow속성 = …
text CSS - word-break 속성 ★ - 한중일 외의 언어 (단어기준/글자기준) 줄바꿈규칙 지정 (= 줄…
text CSS - word-wrap 속성 ★ - 단어줄바꿈 위해 긴단어쪼개기 (= 긴단어깨기 = 긴단어나누기 = w…
text CSS - text-fill-color 속성 (비표준) - 텍스트글자색 (= 글자전경색 =text-fill-…
text CSS - text-decoration-line 속성 - 텍스트라인위치종류 (= text-decoration…
1/2
목록
찾아주셔서 감사합니다. Since 2012