온라인 멘토와 함께하는 공부/인공지능

[ChatGPT] ChatGPT 코딩을 이용하여 회원가입 웹페이지 구성

열공노년 2023. 8. 25. 15:04
반응형

ChatGPT 코딩을 이용하여 회원가입 웹페이지 구성

ChatGPT에게 요청했습니다. '회원가입 웹페이지'를 구성하는 코딩을 해달라고. 다음과 같은 답과 코딩한 결과를 얻었습니다. 여기에 CSS까지 포함한다면 잘 꾸며진 회원가입 웹페이지가 가능하겠습니다.

 

ChatGPT 대답

대답은 각 영역별로 코딩을 했습니다.

 

CSS 포함

CSS를 포함한 내용입니다. 더 짜임새가 있는 결과 화면이 우하단에 나타났습니다.

적용된 CSS와 변경된 HTML

적용된 CSS

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    padding: 20px;
    background-color: #f7f7f7;
}

h2 {
    color: #333;
}

form {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

label {
    font-weight: bold;
}

input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    padding: 10px 15px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

변경된 HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원가입</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>회원가입</h2>

    <form id="registrationForm">
        <label for="username">아이디:</label>
        <input type="text" id="username" required>
        <br><br>

        <label for="password">비밀번호:</label>
        <input type="password" id="password" required>
        <br><br>

        <label for="passwordConfirm">비밀번호 확인:</label>
        <input type="password" id="passwordConfirm" required>
        <br><br>

        <button type="submit">가입하기</button>
    </form>

    <script src="script.js"></script>
</body>
</html>
반응형