데이터를 주로 다루는 CRUD UI 클론 코딩 트레이닝입니다.
워밍업
본격적인 코딩 전에 워밍업으로 아래 두가지 UI 를 먼저 코딩하면 도움이 될것입니다.
https://lshjju.tistory.com/890
UI-KIT
웹 프로젝트를 하게 되면 항상 사용하게 되는 UI가 몇가지 정해져 있습니다.그때마다 새로 U를 코딩하는 것보다는 미리 준비해 두면 작업 효율이 훨씬 좋아집니다.그런 이유로 몇가지 중요한 UI
lshjju.tistory.com
https://codepen.io/lshjju/pen/jOQjMEz?editors=1000
order-ui
...
codepen.io
CRUD UI 클론 코딩을 시작 합니다.
이번 스텝은 포트폴리오에 적용할 form UI를 클론 코딩하는 트레이닝입니다.
이 코스는 강의가 아닌 개인 연구로 진행합니다.
CRUD UI 는 크게
Purchase UI
Membership UI
Posting UI
이렇게 3가지 정도가 중요합니다.
이 3가지 UI를 클론 코딩하면 코딩 실력에 많은 도움이 될것입니다.
제 크루가 완성한 프로젝트 중 완성도가 높은 것들로 레퍼런스로 제공 하겠습니다.
이 레퍼런스는 각각 콘텐츠가 다릅니다.
일단 이 레퍼런스로 클로 코딩을 합니다.
그 다음에 CSS와 콘텐츠 주제를 통합하여 하나의 통합된 사이트 리뉴얼을 추천 합니다.
리뉴얼을 완성한다면 코딩 공부에 도움이 많이 될것 같습니다.
코딩 공부에 도움 되기를 바랍니다.
Purchase UI
https://codepen.io/lshjju/pen/poYRbOX?editors=1100
purchase-kimjieun
...
codepen.io
Membership UI
https://codepen.io/lshjju/pen/NWMgrdj
membership-parkhayeon
...
codepen.io
Posting UI
https://codepen.io/lshjju/pen/poVwbbd
posting-leesangho
...
codepen.io
Purchase references
본 과정을 수료한 수료생들이 직접 제작한 UI 입니다.
상품구매 UI는 특히 중요하기 때문에 상품구매 UI만 따로 모아 보았습니다.
참고 바랍니다.
http://jeonjinuk.com/sp/kimminjeong/purchase.html
purchase-iloom-kimminjeong-portfolio
집사와 냥이 모두 만족하는 디자인 800폭의 알맞은 사이즈, 라운드형 디자인, 세련된 투톤 컬러로 어디에나 어울리는 소파 테이블입니다. 하부에 해먹으로 된 아늑한 공간이 있어 집사와 냥이 모
jeonjinuk.com
http://jeonjinuk.com/sp/shinsumin/product.html
IOPE
전성분 락토바실러스발효용해물, 정제수, 프로판다이올, 글리세린, 나이아신아마이드, 부틸렌글라이콜, 카페인, 다이프로필렌글라이콜, 1,2-헥산다이올, 다이에톡시에틸석시네이트, 글리세릴폴
jeonjinuk.com
http://jeonjinuk.com/sp/kimbyeongyong/purchase/purchase.html
Purchase UI
CPU - AMD RDNA 2 기반 커스텀 마이크로 아키텍쳐 - 제원: 최대 2.23 GHz 클럭으로 동작시 10.28 TFLOPS - 18 WGPs (36 CUs, 2304 SPs, 64 ROPs, 144 TFUs), L2 캐시 메모리 4 MB, 최대 2.23GHz - 특수 부속: 캐시 메모리 일관
jeonjinuk.com
http://jeonjinuk.com/sp/kimminji/product.html
SONY
jeonjinuk.com
https://codepen.io/lshjju/pen/OJZgXJM
purchase-ahnjeongmin
...
codepen.io
'Index' 카테고리의 다른 글
| Figma index (0) | 2026.06.12 |
|---|---|
| jQuery-n-plugin-manual (0) | 2026.06.04 |
| Photoshop skills (0) | 2026.02.22 |
| Do it! CSS 웹 표준의 정석 (0) | 2026.02.12 |
| Do it! HTML 웹 표준의 정석 (0) | 2026.02.12 |