[잡담]오랜만에 쓰는 사이트 클론 코딩입니다.
- 76 조회
![activity-badge](/assets/images/activity-level-icon/LV14.png)
최근에 알바 -> 집 -> 집에서 코딩공부 무한 반복하다가 강의를 다듣고 하니 제가 클론 코딩한 사이트들을 올리는걸 까먹고 있었더라고요..... ㅠㅠ 그래서 이번에 강의도 다듣고 했으니 한번 싹다 정리해서 올려볼까 합니다.
![](https://image.shelter.id/1671855940599_스크린샷_2022_12_24_오후_1_25_19.png)
먼저 강의 다들었단 수료증을 인증해놓고......
1.Tolv( 원작URL: https://tolv.dk/ )
![](https://image.shelter.id/1671855951635_Tolv_클론코딩.png)
GitHub 사이트 URL: https://badnuclear.github.io/tolv_clone_coding/
먼저 Tolv 사이트 입니다. 여기서 생각외로 어려웠던건 위에 로고인데 "저게 왜 어렵지?" 생각하실거라 생각합니다.
저게 어렵게 느껴졌던건 글꼴 선택도 선택이지만 저 O에 하나를 태그를 주고 X축으로 일일히 각도를 맞춰서 돌려야하기 때문에 저거 맞추는데 어렵게 느껴졌습니다.
2.Rodic Davidson( 원작URL: https://rodicdavidson.co.uk/ )
![](https://image.shelter.id/1671856163675_스크린샷_2022_12_24_오후_1_28_59.png)
GitHub 사이트 URL:https://badnuclear.github.io/rodic_davidson_clone_coding/
이번 클론코딩한 사이트는 생각외로 쉽게 쉽게 넘어간 클론코딩 사이트였습니다.
단순히 css에서 display:grid를 쓴 정석적인 사이트라 생각되네요. 그래서 쉽게쉽게 하고 넘어갔습니다.
그 밑에 하술할 클론코딩한 사이트들도 계속 만들다 보니 비슷하고 반복되는 작업들이 많아서 개인적인 소감 또한 반복되는 이야기들이 많아 생략하고 클론 코딩한 사이트들만 올려 드리겠습니다!
3.Beige( 원작URL: https://beige.de/ )
![](https://image.shelter.id/1671856231702_스크린샷_2022_12_24_오후_1_30_13.png)
GitHub 사이트 URL: https://badnuclear.github.io/beige_clone_coding/
4.Donica( 원작URL: http://donicaida.com/ )
![](https://image.shelter.id/1671858802577_스크린샷_2022_12_24_오후_1_56_02.png)
GitHub URL: https://badnuclear.github.io/donica-clone-coding/
5.Canal Street( 원작URL: https://canalstreet.market/ )
![](https://image.shelter.id/1671858821901_스크린샷_2022_12_24_오후_2_10_28.png)
GitHub URL: https://badnuclear.github.io/street-clone-coding/
6.Won Hundred( 원작URL: https://wonhundred.com/ )
![](https://image.shelter.id/1671859158957_스크린샷_2022_12_24_오후_2_15_27.png)
GitHub URL: https://badnuclear.github.io/won-hundred-clone-coding/
마지막 사이트는 조금 참고 하실점이 현재 원작 사이트와 제가 클론코딩한 사이트와 디자인이 많이 많이 다릅니다.
그이유가 강의를 찍은 시점과 현재 사이트 시점의 웹 디자인 달라졌기 때문입니다. 현재 달라진 사이트의 디자인을
클론코딩하기에는 JS를 쓰는 기능들을 포함한 디자인이 복잡하게 들어가기 때문에 일단은 배우는 입장이기 때문에 강의에 나온 옛 디자인을 클론코딩을 하였습니다. 이점 참고 해주시면 감사합니다...... ㅠㅠ