채팅 줄바꿈과 색상변경

@@ -3,7 +3,7 @@
     margin: auto;
     margin-top: 100px;
     border-radius: 20px;
-    background-color: lightblue;
+    background-color: #B2C7D9;
     text-align: center;
     width: 500px;
     height: 800px;
@@ -13,6 +13,7 @@
   #chat {
     height: 90%;
     width: 100%;
+    padding-top: 10px;
     overflow-y: auto;
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
@@ -27,8 +28,8 @@
     width: 90%;
     margin-left: 5%;
     margin-right: 5%;
-    margin-top: 10px;
-    background-color: aquamarine;
+    margin-bottom: 10px;
+    background-color: #A9BDCE;
     text-align: center;
     clear:both;
     float:center;
@@ -39,8 +40,8 @@
     width: 90%;
     margin-left: 5%;
     margin-right: 5%;
-    margin-top: 10px;
-    background-color: indianred;
+    margin-bottom: 10px;
+    background-color: #A9BDCE;
     text-align: center;
     clear:both;
     float:center;
@@ -48,24 +49,25 @@
   
   /* 내가 보낸 메시지 */
   .me {
-    background-color: lemonchiffon;
+    background-color: #FFEB33;
     border-radius: 5px;
-    margin-top: 10px;
-    margin-left: 5%;
+    margin-bottom: 10px;
+    margin-left: 30%;
     margin-right: 5%;
     padding: 3px; 
     text-align: right;
     clear:both;
     float:right;
+    word-break: break-all
   }
   
   /* 상대방이 보낸 메시지 */
   .other {
-    background-color: white;
+    background-color:#FFFFFF;
     border-radius: 5px;
-    margin-top: 10px;
+    margin-bottom: 10px;
     margin-left: 5%;
-    margin-right: 5%;
+    margin-right: 30%;
     padding: 3px; 
     text-align: left;
     clear:both;