Version: v20240701-002

가화네 실버타운> ✨노닥노닥 생활관✨

[잡담]오랜만에 쓰는 사이트 클론 코딩입니다.

  • 75 조회
굿뉴클리어
activity-badgeactivity-level-badge
user-profile-image

최근에 알바 -> 집 -> 집에서 코딩공부 무한 반복하다가 강의를 다듣고 하니 제가 클론 코딩한 사이트들을 올리는걸 까먹고 있었더라고요..... ㅠㅠ 그래서 이번에 강의도 다듣고 했으니 한번 싹다 정리해서 올려볼까 합니다.



먼저 강의 다들었단 수료증을 인증해놓고......


1.Tolv( 원작URL: https://tolv.dk/ )



GitHub 사이트 URL: https://badnuclear.github.io/tolv_clone_coding/

먼저 Tolv 사이트 입니다. 여기서 생각외로 어려웠던건 위에 로고인데 "저게 왜 어렵지?" 생각하실거라 생각합니다.

저게 어렵게 느껴졌던건 글꼴 선택도 선택이지만 저 O에 하나를 태그를 주고 X축으로 일일히 각도를 맞춰서 돌려야하기 때문에 저거 맞추는데 어렵게 느껴졌습니다.

2.Rodic Davidson( 원작URL: https://rodicdavidson.co.uk/ )



GitHub 사이트 URL:https://badnuclear.github.io/rodic_davidson_clone_coding/

이번 클론코딩한 사이트는 생각외로 쉽게 쉽게 넘어간 클론코딩 사이트였습니다. 

단순히 css에서 display:grid를 쓴 정석적인 사이트라 생각되네요. 그래서 쉽게쉽게 하고 넘어갔습니다.


그 밑에 하술할 클론코딩한 사이트들도  계속 만들다 보니 비슷하고 반복되는 작업들이 많아서 개인적인 소감 또한 반복되는 이야기들이 많아 생략하고  클론 코딩한 사이트들만 올려 드리겠습니다!

3.Beige( 원작URL: https://beige.de/ )



GitHub 사이트 URL: https://badnuclear.github.io/beige_clone_coding/


4.Donica( 원작URL: http://donicaida.com/  )


GitHub URL: https://badnuclear.github.io/donica-clone-coding/


5.Canal Street( 원작URL: https://canalstreet.market/ )



GitHub URL: https://badnuclear.github.io/street-clone-coding/


6.Won Hundred( 원작URL: https://wonhundred.com/ )


GitHub URL: https://badnuclear.github.io/won-hundred-clone-coding/

마지막 사이트는 조금 참고 하실점이 현재 원작 사이트와 제가 클론코딩한 사이트와 디자인이 많이 많이 다릅니다.

그이유가 강의를 찍은 시점과 현재 사이트 시점의 웹 디자인 달라졌기 때문입니다. 현재 달라진 사이트의 디자인을 

클론코딩하기에는 JS를 쓰는 기능들을 포함한 디자인이 복잡하게 들어가기 때문에 일단은 배우는 입장이기 때문에 강의에 나온 옛 디자인을 클론코딩을 하였습니다. 이점 참고 해주시면 감사합니다...... ㅠㅠ



댓글 (1)
user-profile-image굿뉴클리어1년 전
엑...... 링크에 색 코드를 입혀놓고 링크 표시를 예쁘게 해놨는데 이게 깨지네요..... 왜지????