diff --git a/package-lock.json b/package-lock.json
index 1fc38c6..2f52fde 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -925,6 +925,24 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-9.0.1.tgz",
       "integrity": "sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA=="
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.3.tgz",
+      "integrity": "sha512-We7VBiltAJ70KQA0dWkdPMXnYoizlxOXpvtjmu5/MBnExd+u0PGgV27WCYanmLAbCwAU30Le/xA0CQs/F/Otig==",
+      "requires": {
+        "@emotion/memoize": "0.7.3"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.3.tgz",
+      "integrity": "sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.4.tgz",
+      "integrity": "sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ=="
+    },
     "@hapi/address": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.2.tgz",
@@ -2048,6 +2066,22 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.4.tgz",
       "integrity": "sha512-S6d+tEzc5Af1tKIMbsf2QirCcPdQ+mKUCY2H1nJj1DyA1ShwpsoxEOAwbWsG5gcXNV/olpvQd9vrUWRx4bnhpw=="
     },
+    "babel-plugin-styled-components": {
+      "version": "1.10.6",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz",
+      "integrity": "sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-module-imports": "^7.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -2613,6 +2647,11 @@
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -3675,6 +3714,11 @@
         "postcss": "^7.0.5"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -3764,6 +3808,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "css-to-react-native": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz",
+      "integrity": "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^3.3.0"
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.33",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.33.tgz",
@@ -6477,6 +6531,11 @@
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
     },
+    "is-what": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.3.1.tgz",
+      "integrity": "sha512-seFn10yAXy+yJlTRO+8VfiafC+0QJanGLMPTBWLrJm/QPauuchy0UXh8B6H5o9VA8BAzk0iYievt6mNp6gfaqA=="
+    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
@@ -8030,6 +8089,11 @@
         }
       }
     },
+    "memoize-one": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
+      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -8063,6 +8127,14 @@
         }
       }
     },
+    "merge-anything": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-2.4.1.tgz",
+      "integrity": "sha512-dYOIAl9GFCJNctSIHWOj9OJtarCjsD16P8ObCl6oxrujAG+kOvlwJuOD9/O9iYZ9aTi1RGpGTG9q9etIvuUikQ==",
+      "requires": {
+        "is-what": "^3.3.1"
+      }
+    },
     "merge-deep": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/merge-deep/-/merge-deep-3.0.2.tgz",
@@ -11781,6 +11853,26 @@
         }
       }
     },
+    "styled-components": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.4.0.tgz",
+      "integrity": "sha512-xQ6vTI/0zNjZ1BBDRxyjvBddrxhQ3DxjeCdaLM1lSn5FDnkTOQgRkmWvcUiTajqc5nJqKVl+7sUioMqktD0+Zw==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.0.0",
+        "@emotion/is-prop-valid": "^0.8.1",
+        "@emotion/unitless": "^0.7.0",
+        "babel-plugin-styled-components": ">= 1",
+        "css-to-react-native": "^2.2.2",
+        "memoize-one": "^5.0.0",
+        "merge-anything": "^2.2.4",
+        "prop-types": "^15.5.4",
+        "react-is": "^16.6.0",
+        "stylis": "^3.5.0",
+        "stylis-rule-sheet": "^0.0.10",
+        "supports-color": "^5.5.0"
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -11803,6 +11895,16 @@
         }
       }
     },
+    "stylis": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
+      "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
+    },
+    "stylis-rule-sheet": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
+      "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/package.json b/package.json
index 45ee538..641b69d 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
   "dependencies": {
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-scripts": "3.1.2"
+    "react-scripts": "3.1.2",
+    "styled-components": "^4.4.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/public/pureprofile.html b/public/pureprofile.html
new file mode 100644
index 0000000..3429053
--- /dev/null
+++ b/public/pureprofile.html
@@ -0,0 +1,30 @@
+<html>
+
+<body>
+<h1>최수민</h1>
+<div>안녕하세요 저는 서강대학교의 컴퓨터공학과에 다니고 있습니다</div>안녕하세요 저는 서강대학교의 컴퓨터공학과에 다니고 있습니다</div>
+<div>올해는 25살인데 내년에는 26이에요</div>
+<div>지금 기분은 행복해요!</div>
+<h2>좋아하는 동물</h2>
+<li>사자</li>
+<li>토끼</li>
+<li>뱀</li>
+
+<h1>이한길</h1>
+<div>안녕하세요 저는 홍익대학교의 법학고에 다니고 있습니다.</div>
+<div>올해는 29살인데 내년엔 30이에요.</div>
+<div>지금 기분은 불행해요!</div>
+<h2>좋아하는 동물</h2>
+<li>펭귄</li>
+
+<h1>김서영</h1>
+<div>안녕하세요 저는 이화여자대학교의 사이버보안과에 다니고 있습니다.</div>
+<div>올해는 22살인데 내년에는 23이에요</div>
+<div>지금 기분은 불행해요!</div>
+<h2>좋아하는 동물</h2>
+<li>웜</li>
+<li>트로이목마</li>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 6dfe67e..6abb765 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,35 @@
 import React, {Component} from 'react';
+import Profiles from "./Component/Profiles";
+
 
 class App extends Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      members : [
+        {name:'최수민', school:'서강', major:'컴퓨터공학', 
+        age:25, emotion:'행복',animal:['사자','토끼','뱀']}, //최수민 정보
+
+        {name:'이한길', school:'홍익', major:'법학', 
+        age:29, emotion:'불행',animal:['펭귄']},  //이한길 정보
+
+        {name:'김서영', school:'이화여자', major:'사이버보안학', 
+        age:22, emotion:'불행', animal:['웜','트로이목마']}  //김서영 정보
+      ]
+    }
+  }
+
   render() {
-    return <div className="App">Hello React!</div>;
+
+    return <div className="App">
+
+      <Profiles data={this.state.members[0]}></Profiles>
+      <Profiles data={this.state.members[1]}></Profiles>
+      <Profiles data={this.state.members[2]}></Profiles>
+      
+    </div>;
+
   }
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/Component/Profiles.js b/src/Component/Profiles.js
new file mode 100644
index 0000000..fc03aff
--- /dev/null
+++ b/src/Component/Profiles.js
@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+
+class Profiles extends Component {
+    render() {
+        var data = this.props.data;
+        var lists = [];
+
+        var Animals = [];
+        var i= 0;
+        while (i < data.animal.length) {
+            Animals.push(<li key={data.animal[i]}>{data.animal[i]}</li>);
+            i = i+ 1;
+        }
+
+        lists.push(
+            <div key={data.name}>
+
+                <h1>{data.name}</h1>
+                <div>{`안녕하세요 저는 ${data.school}대학교의 ${data.major}과에 다니고 있습니다.`}</div>
+                <div>{`올해는 ${data.age}살인데 내년엔 ${(data.age)+1}예요.`}</div>
+                <div>{`지금 기분은 ${data.emotion}해요!`}</div>
+                
+                <h3>좋아하는 동물</h3>
+                    {Animals}
+                    
+            </div>
+        );
+
+        return (
+
+                <article>
+                    {lists}
+                </article>
+        );
+    }
+}
+
+export default Profiles; 
\ No newline at end of file