diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8c4f540
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+ 랜덤 유저 카드
+
+
+
+ 랜덤 유저 카드
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..80ad718
--- /dev/null
+++ b/script.js
@@ -0,0 +1,24 @@
+const userListContainer = document.getElementById('user-list');
+
+fetch('https://randomuser.me/api/?results=20')
+ .then(response => response.json())
+ .then(data => {
+ const users = data.results;
+ users.forEach(user => {
+ const card = document.createElement('div');
+ card.classList.add('user-card');
+ const userName = `${user.name.first} ${user.name.last}`;
+ const email = user.email;
+ const phone = user.phone;
+ const picture = user.picture.thumbnail;
+
+ card.innerHTML = `
+ 
+ ${userName}
+ ${email}
+ ${phone}
+ `;
+ userListContainer.appendChild(card)
+ })
+ })
+ .catch((error) => console.log('데이터를 불러올 수 없습니다.'))
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..33a006c
--- /dev/null
+++ b/style.css
@@ -0,0 +1,37 @@
+h1{
+ text-align: center;
+}
+
+#user-list {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 20px;
+ padding: 20px;
+}
+
+.user-card {
+ background-color: #fff;
+ border: 1px solid #808080;
+ border-radius: 10px;
+ padding: 20px;
+ width: 250px;
+ text-align: center;
+}
+
+.user-card img {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+}
+
+.user-card h2 {
+ margin: 15px 0 5px;
+ font-size: 1.2em;
+ color: #333;
+}
+
+.user-card p {
+ margin: 5px 0;
+ color: #777;
+}
\ No newline at end of file