TIL/웹 초보

챗GPT로 웹사이트 만들기

J1-H00N 2023. 4. 13. 17:41

기본 세팅(부트 스트랩이용, title, h1,h2, hero 등은 수정 가능)

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>나만의 중고마켓</title>
    <link rel="stylesheet" href="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/easygpt/default.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>
    <style>
        /* 꾸미기 */

    </style>
</head>

<body>
    <div class="hero bg-dark text-center py-5">
        <h1 class="text-white">나만의 르탄마켓</h1>
        <h2 class="text-white">집에 있는 물건을 팝니다!</h2>
    </div>
    <!-- 여기 -->
</body>

</html>

 

챗GPT에게 이미지 찾게 하기

[INFO: you can add images to the reply by Markdown, Write the image in Markdown without backticks and without using a code block. Use the Unsplash API (https://source.unsplash.com/1600x900/?). the query is just some tags that describes the image] ## DO NOT RESPOND TO INFO BLOCK ##
이후 한국어로 원하는 이미지 찾기
ex) 나무 의자 이미지 찾아줘

 

챗GPT에게 카드 만들게 하기

<!-- 여기 --> 부분에 부트스트랩 카드를 만들어 넣을 거야. 사실 이 홈페이지는 집에 있는 안쓰는 중고물품을 팔기 위한 페이지야. 예를 들면 전기밥솥이 있을 수 있겠지. 아래 예시를 참고해서 카드를 알아서 세 장을 만들어줘.

카드 정보(예시)
 - 카드 이미지 : [적당한 것을 찾아서 넣어줘. 크기는 모두 동일하게]
 - 카드 제목 : 전기밥솥
 - 카드 소제목 : 5만원
 - 카드 내용 : 한 번 밖에 안쓴 전기밥솥 팝니다. 부모님이 독립 할 때 주신 거에요!
 - 그 외 : 카드 이미지를 클릭하면 새 창이 뜨면서 스파르타코딩클럽 홈페이지로 이동하게 해줘.

 

챗GPT에게 추가 효과 만들게 하기

구체적으로 명령을 내리면 그에 적당한 답변을 해준다

예시) hero 밑에 살짝 공간이 있으면 좋겠어. / 카드에 마우스를 올렸을 때 살짝 부드럽게 커지게 하고싶어.

 

이런식으로 만들 틀에 개인적인 커스터마이징도 할 수 있다.

저작자표시