워드프레스 크롬 개발자 도구 활용법 코딩 몰라도 쉬워요

워드프레스 크롬 개발자 도구 활용법.

코딩할 줄 몰라서 워드프레스 못하시겠다고요?
걱정하지 마세요.
요즘 워드프레스는 플러그인만 깔면 코딩 1도 몰라도 할 수 있습니다.

이 글에서는 코딩 모르는 분들도 워드프레스를 좀 더 자기 입맛에 맞게 활용할 수 있게
조미료? 양념? 같은 정보를 알려드리려 합니다.
크롬 개발자 도구를 활용해 여러분의 워드프레스를 좀 더 여러분 스타일에 맞게 바꿔보세요.


워드프레스 크롬 개발자 도구 활용법


워드프레스 크롬 개발자 도구 활용법

키보드의 F12를 클릭하여 크롬 개발자 도구를 실행합니다.워드프레스 크롬 개발자 도구 F12

위 그림과 같이 개발자 도구 창이 뜹니다.

이 글에서는 개발자 도구에서 가장 쉬우면서 핵심적인 기능인

  • 기기 툴바 전환
  • 검사할 페이지 요소 선택

위 두 개를 다뤄보도록 하겠습니다.


기기 툴바 전환

기기 툴바 전환을 아주 간단하면서도 효과적으로 활용하는 법을 알려드리겠습니다.

네이버 모바일 화면

위 버튼 익숙하지 않으세요?
네, 네이버에서 제공하는
글쓰기 할 때 모바일 화면, PC 화면으로 전환하여
줄 바꿈이 어색한 부분은 없는지 확인할 수 있는 기능인데요.

PC 레이아웃모바일 레이아웃

워드프레스에는 위 기능이 없어서 불편하셨죠?
개발자 도구의 기기 툴바 전환 기능을 활용하면 네이버의 화면 전환 기능을 똑같이 사용할 수 있습니다.

  • PC 화면

기기 툴바 전환 PC 화면

개발자 도구 처음 진입한 상태가 PC 화면입니다.
기기 툴바 전환 버튼을 클릭 시 모바일 화면으로 전환할 수 있으며
다시 한번 클릭 시 초기 PC 화면으로 돌아올 수 있습니다.

  • 모바일 화면

개발자 도구 팝업창에서 기기 툴바 전환 버튼을 한 번 클릭하면 모바일 화면으로 바뀌는데요,
기기 툴바 전환을 활용하여 워드프레스 글쓰기 하는 법을 알아보겠습니다.

아래 사진은 이 글의 서문을 기기 툴바 PC 화면에서 본 겁니다.

워드프레스 크롬 개발자 도구 PC 화면

줄 바꿈을 한다고 했는데 모바일 화면에서 어디에서 줄 바꿈이 잘려 글이 어색해질지 전혀 가늠이 안 되죠?

기기 툴바 전환 클릭

기기 툴바 전환을 클릭합니다.

워드프레스 크롬 개발자 도구 모바일 화면

모바일 화면에서 여러분의 글이 어떻게 보일지 미리 확인해볼 수 있습니다.
768 X 702를 여러분이 보고자 하는 기기 크기로 수정하시면
더 정확하게 확인해보실 수 있습니다.





검사할 페이지 요소 선택

워드프레스는 네이버, 티스토리만큼 이웃, 팔로우가 활성화되어 있지 않아
댓글 다는 게 왜 있나 궁금하셨던 분들 계시죠?
검사할 페이지 요소 선택을 활용하여 댓글을 없애보겠습니다.

검사할 페이지 요소 선택 을 클릭합니다.

워드프레스 크롬 개발자 도구 검사할 페이지 요소 선택

클릭 후 댓글 위에 마우스를 올리면 아래와 같이 나옵니다.

댓글 클래스명

comments-area라고 보이시죠?
이 영역을 숨기면 댓글이 화면에서 숨겨지는데요,

댓글을 화면에서 숨기는 자세한 방법은 아랫글에서 알아보겠습니다.

워드프레스 홈페이지 미디어 쿼리 사용법


끝으로

어떠셨나요?
코딩 몰라도 개발자 도구 활용법만 알면
워드프레스를 조금 더 여러분의 입맛에 맞게 꾸밀 수 있겠죠?

좀 더 심화한 크롬 개발자 도구 활용법이 궁금하시면 아랫글에서 확인해보세요.

크롬 개발자 도구

오늘 글은 여기까지입니다. 읽어주셔서 감사합니다.