Chrome 브라우져 개발자모드 요소검사 만프로 활용하기

크롬 요소검색 활용법

일단 크롬 화면에서 마우스 우클릭하면 젤아래 요소검사라는 항목을 클릭하면

위 그림처럼 소스가 좌르륵~~나옵니다

2번위에 마우스를대면 해당 콘텐트가 사이즈랑 팝업되구요(노란그림)

그리고 본화면에 해당 콘텐츠는 선택한것처럼 블루스키린 형태가 되지용

그리고 요소 속성창이 적다

1번을 클릭하면 아래 그림처럼 따로 떨어져 나갑니다^^

물론 다시 누르면 원상 복귀 하겠지요?

리소스로 가시면 현제 패이지에 사용된 모든 콘텐츠들이 나열되어있읍니다

물론 제가 쓴 손글씨도 나와있네요?  ^^

다시 창을 되돌려놓쿠요~~

뭐 안돌리셔두 상관은 읍습니다 모니터가 넓으시면 ㅎ

전 좁아서....

아까는 해단 콘텐츠에 마우스를 올려놓키만 했지만

살짝 좌클릭해보세요

그럼 2번처럼  그 콘텐츠와 연결된 CSS파일이짜라란 나타납니다

아직은 놀라지마시구욤

2번 을 클릭하세요~~~

그럼 여기서  아까 선택한 콘텐츠네 쓰인 진짜 CSS 파일이 나타납니다!!

빨간네모에 4px를 padding 값이죠?

일케 100으로 고쳐모았읍니다 어때요?

위그림처럼 padding 공간이 확!~!!! 늘어나서 보이는거 보이죠?

이런식으로 

모든 요소, 콘텐츠들을 자기 마음대로 주물러 볼수가 있읍니다

그러다 본래 파일이 바껴버리면 어카냐구요?

신경 쓸 필요 없읍다!!!

페이지 화면 새로고침 해보세요  ㅎㅎ

다시 원래 데로 돌아와버립니다

전 크롬 완전 좋은데 ..

여러분은 어떻신지 ㅎㅎ

추천 꾸욱 눌러주세요~~