css 수정을 위한 크롬 개발자 모드로 보기

 

css를 수정할때 크롬 개발자를 많이 사용합니다. 사파리에도 개발자모드가 있긴 한데 아직까지는 구글 크롬을 쓰는게 더 편한 것 같습니다.

 

먼저 css 가 뭔지 궁금하시면 다음 게시물을 참고하시면 좋을 것 같습니다.

 

https://teamjake.tistory.com/17

고도몰 css 수정으로 홈페이지 쇼핑몰 html 변경하는 법 -쇼핑몰만들기 스타일시트

 

크롬에 들어가서 ... 세로로 나열된 아이콘을 클릭합니다.

도구 더보기에 커서를 가져다대면 항목 중에서 맨아래 있는 것이 개발자 도구입니다.

클릭해줍니다.

 

 

 

 

그러면 엘레먼츠에 html php 내용들을 볼 수 있습니다.

그 밑에 탭들이 있는데 Styles 스타일 탭이 css입니다.

패딩, 폰트사이즈, 폰트 넓이, 정렬, 높이 등을 선택할 수 있습니다. 미리 수정해 볼수 있고 실제 수정은 오른쪽 상단에 보이는 부분

이 부분에서는 layout.css 의 205번째 항목을 수정해주면 사이트에 적용이 됩니다.

 

 

스타일을 맨 아래쪽에 내려보면 마진, 보더, 패딩 등을 볼 수 있습니다. 3가지의 좌우 상하  px이 얼마나 지정되있는지 확인할 수 있습니다.

 

 

 

파란 아이콘 부분을 누르게 되면 모바일이나 타블렛 접속시 어떻게 보이는 지 미리 볼 수 있습니다.

 

폰이나 타블렛 기종선택이 가능하고 특별히 원하는 사이즈가 있으면 커스텀으로 입력해서 볼 수도 있습니다.

 

이상으로 크롬 개발자 모드로 css 보는 방법에 대해서 알아보았습니다.

 

감사합니다.