반응형
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>반응형
'온라인 멘토와 함께하는 공부 > 인공지능' 카테고리의 다른 글
| [C언어] 학습을 시작하며 (66) | 2023.10.22 |
|---|---|
| 마이크로소프트 엣지에서 ChatGPT 로그인이 막히면서 '쿠키'를 확인하라는데 무슨 일입니까? (46) | 2023.09.04 |
| [ChatGPT] 플러그인 사용 사례 (0) | 2023.08.25 |
| [ChatGPT] Stable Diffusion WebUI 작동에 대해서 (0) | 2023.08.22 |
| [ChatGPT] 리눅스 학습하기 (0) | 2023.08.21 |
