클론 코딩이란?
클론 코딩이란 클론 코딩은 인스타그램, 카카오톡, 유튜브, 넷플릭스 등등 실제 서비스를 따라 만들면서 배우는 공부 방식을 말한다. 실제로 잘 구현되어있는 웹사이트를 내손으로 한 땀 한땀 코드를 작성하며 빠르고 효과적으로 공부를 할 수 있는 방법이다.
클론 코딩을 하는 데 있어서 불필요한 시간을 조금 줄이고자 아래 좋은 Google 확장 프로그램을 사용하여 clone-coding을 시작해보자.
ColorZilla
따라 하고 싶은 엘리먼트 색상이 있다면 'ColorZiila'를 사용해서 동일한 색상 코드를 뽑아낼 수 있다.
링크 바로가기 👇
ColorZilla
Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies
chrome.google.com
CSS Viewer
Element의 CSS를 편하게 볼 수 있다.
링크 바로가기 👇
Google Chrome ™ 용 CSS 뷰어
비어 있는! 빠르고 간단한 CSS 속성 뷰어.
chrome.google.com
JSON Viewer
어떤 웹사이트든 지 , json파일이 있으면 보기 어렵다. 하지만 JSON Viewer을 보면 편하게 확인할 수 있다.
링크 바로가기 👇
JSON Viewer
The most beautiful and customizable JSON/JSONP highlighter that your eyes have ever seen. Open source at https://goo.gl/fmphc7
chrome.google.com
What Font
웹사이트에서 어떤 폰트를 사용하였는지 확인할 수 있는 확장 프로그램이다.
링크 바로가기 👇
What Font - find font
어떤 웹 사이트에서 어떤 글꼴이 사용되는지 알 수 있습니다.
chrome.google.com
page ruler redux
웹사이트를 위에서 줄자를 사용할 수 있도록 해준다. 상자를 그리거나 간격의 길이를 확인할 수 있다.
링크 바로가기 👇
Page Ruler
Measure page elements size in pixel with an easy-to-use ruler.
chrome.google.com
BuitWith Technology Profiler
웹사이트가 어떤 스택으로 사용하였는지 알려준다.
링크 바로가기 👇
BuiltWith Technology Profiler
Find out what the website you are visiting is built with using this extension.
chrome.google.com
Now, start clone-coding 😊
'Tech 꿀단지🍯' 카테고리의 다른 글
| Developer Roadmaps (2023년 프론트 백엔드 ) (0) | 2023.03.30 |
|---|---|
| '저작권' 이것만 알고 이것만은 알고있자 ! (2) | 2022.09.19 |