AI로 컴포넌트 제작하기 (CSS 잘 못하시면 유용함) [kiss]
링크
https://www.webcrumbs.org/frontend-ai (517) https://sir.kr/cm_free?sca=&sfl=wr_subject&stx=%5Bkiss%5D (67)
오늘 소개할 곳은 웹크럼브입니다.
Webcrumbs
노코드 컴포넌트 프론트엔드 서비스
컴포넌트(Component)란게 프로그래밍에서 재사용이 가능한 각각의 독립된 모듈이니까 어디다 써먹는지는 잘 아실것이고... 암튼...
보통 AI 사용하듯이 필요한 것 입력하고 Generate를 클릭하면 됩니다.
한글 지원합니다.
예제로, "가로로 긴 명함 형태의 포토 프로필이 필요해. 중간에 사진이 있고, 바로 아래에는 굵은 글자로 "SIR"이라고 적혀 있으며, 그 아래에는 "그누보드 제작"이라는 설명을 넣어줘."라고 입력해 봤습니다.

위쪽의 Export Code를 누르면 여러 코드 소스를 볼 수 있는데요,

브라우저 맨 아래 하단에서 Code를 눌러도 이런 거 나옵니다.

아참! 메인 왼쪽에 보면 Images라고 보이죠?
거기다가 원하는 이미지를 넣고 이런 식으로 해줘 하고 요청해도 뚝딱 만들어 줍니다.
포토샵으로 작업한 후, 그 이미지를 코드로 바꿀 때 유용하겠습니다.
소스 코드들은 웹상에서는 수정하지 못하지만,
복사해 올 수 있으니 복사해서 저장하고 파일로 관리하면 필요할 때마다 변경해가며 써먹을 수 있을 것입니다. 그러니까 컴포넌트지요. ^^;
적어도 이젠 컴포넌트 부분에서는 CSS 잘 못해도 되겠네요. ㅎ
도움이 될까 모르겠습니다만....
댓글 2개
이런 사이트 더 모아 놓은거 없나요? 위 소개 사이트는 다 좋은데 너무 똑같은 레이아웃만 있네요. CodePen 을 학습한 후 다양한 레이아웃을 보여주면 더 좋을 텐데.
게시판 목록
자유게시판
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 |
|
1주 전 | 10 | |
| 199718 |
|
1주 전 | 9 | |
| 199717 | 3주 전 | 21 | ||
| 199716 |
느긋한카키쿠키
|
3주 전 | 17 | |
| 199715 |
현대적인무질서한까마귀
|
3주 전 | 20 | |
| 199714 | 3주 전 | 24 | ||
| 199713 | 3주 전 | 33 | ||
| 199712 | 1개월 전 | 292 | ||
| 199711 |
안졸리니졸리니
|
1개월 전 | 144 | |
| 199710 |
|
1개월 전 | 160 | |
| 199709 |
|
1개월 전 | 91 | |
| 199708 | 1개월 전 | 106 | ||
| 199707 | 1개월 전 | 240 | ||
| 199706 | 1개월 전 | 41 | ||
| 199705 | 1개월 전 | 29 | ||
| 199704 | 1개월 전 | 46 | ||
| 199703 | 2개월 전 | 57 | ||
| 199702 | 2개월 전 | 97 | ||
| 199701 | 2개월 전 | 111 | ||
| 199700 | 2개월 전 | 83 | ||
| 199699 | 2개월 전 | 88 | ||
| 199698 | 2개월 전 | 134 | ||
| 199697 | 2개월 전 | 99 | ||
| 199696 |
|
2개월 전 | 245 | |
| 199695 | 2개월 전 | 89 | ||
| 199694 | 2개월 전 | 118 | ||
| 199693 | 2개월 전 | 185 | ||
| 199692 | 2개월 전 | 195 | ||
| 199691 |
|
2개월 전 | 170 | |
| 199690 | 2개월 전 | 257 | ||
| 199689 | 2개월 전 | 160 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기