mainpage_demo2

@@ -5,18 +5,28 @@
     display:grid;
     display:grid;
     grid-template-rows: 1.4fr 1fr;
     grid-template-rows: 1.4fr 1fr;
 
 
+    margin: 1%;
+
+    background-color: 	#FFE4b1;
 
 
 }
 }
 
 
 .mainpage :nth-child(1):not(.mainpage :nth-child(1) :nth-child(1)){
 .mainpage :nth-child(1):not(.mainpage :nth-child(1) :nth-child(1)){
     display:grid;
     display:grid;
     grid-template-columns: 1fr 1fr;
     grid-template-columns: 1fr 1fr;
-    grid-template-rows: 8% 16% 74%;
+    grid-template-rows: 8% 12% 79%;
+}
 
 
+.mainpage :nth-child(1):not(.haksikTitle){
+    border: 2px solid black;
 }
 }
 
 
-.mainpage :nth-child(1) :nth-child(1){
+.mainpage :nth-child(1) :nth-child(1),
+.mainpage :nth-child(1) :nth-child(2)
+{
     padding-left: 10%;
     padding-left: 10%;
+    
+    border-bottom: 2px solid black;
 }
 }
 .mainpage :nth-child(1) :nth-child(3),
 .mainpage :nth-child(1) :nth-child(3),
 .mainpage :nth-child(1) :nth-child(4),
 .mainpage :nth-child(1) :nth-child(4),
@@ -24,8 +34,17 @@
 .mainpage :nth-child(1) :nth-child(6){
 .mainpage :nth-child(1) :nth-child(6){
     text-align: center;
     text-align: center;
     padding-top: 2%;
     padding-top: 2%;
+
+    
+}
+.mainpage :nth-child(1) :nth-child(3),
+.mainpage :nth-child(1) :nth-child(4){
+    border-bottom: 2px solid black;
+    
 }
 }
 
 
+
+
 .lunchTable, .dinnerTable{
 .lunchTable, .dinnerTable{
     display:flex;
     display:flex;
     flex-direction: column;
     flex-direction: column;
@@ -34,8 +53,18 @@
 
 
 .mainpage :nth-child(2){
 .mainpage :nth-child(2){
     display: grid;
     display: grid;
-    grid-template-rows: 8% 90%;
-    padding-left: 2%;
+    grid-template-rows: 10% 90%;
+
+
 }
 }
 
 
+.mainpage :nth-child(2) :nth-child(1){
+    border-bottom: 2px solid black;
+    border-top: 2px hidden black;
+}
+
+.mainpage :nth-child(2) :nth-child(2){
+    border: 2px solid black;
+    border-top: 2px hidden black;
+}
 
 

@@ -14,19 +14,21 @@ function MainPage() {
   let today = currentYear+'/'+currentMonth+'/'+currentDate;
   let today = currentYear+'/'+currentMonth+'/'+currentDate;
   
   
 
 
-  const makeTable = (arr_, dom_) => {
-    
-      arr_.forEach((elem)=>{
-        let span_ = document.createElement('div');
-        span_.innerHTML = elem;
-        dom_.appendChild(span_);
-      });
-    
-  };
+
 
 
   const todayMealTable = async()=>{
   const todayMealTable = async()=>{
     axios.get("/api/todayMenu").then(
     axios.get("/api/todayMenu").then(
       (res) => {
       (res) => {
+        const makeTable = (arr_, dom_) => {
+    
+          arr_.forEach((elem)=>{
+            let span_ = document.createElement('div');
+            span_.innerHTML = elem;
+            dom_.appendChild(span_);
+          });
+        
+      };
+
         const index1 = res.data[0].indexOf(':');
         const index1 = res.data[0].indexOf(':');
         const index2 = res.data[1].indexOf(':');
         const index2 = res.data[1].indexOf(':');
         let lunchArr = res.data[0].substring(index1+1);
         let lunchArr = res.data[0].substring(index1+1);
@@ -38,15 +40,13 @@ function MainPage() {
         if(index1 !== -1){
         if(index1 !== -1){
          dinnerArr = dinnerArr.split(',');
          dinnerArr = dinnerArr.split(',');
         }
         }
-        console.log(lunchArr, dinnerArr);
 
 
         const lunchDom = document.getElementsByClassName('lunchTable')[0];
         const lunchDom = document.getElementsByClassName('lunchTable')[0];
         const dinnerDom = document.getElementsByClassName('dinnerTable')[0];
         const dinnerDom = document.getElementsByClassName('dinnerTable')[0];
         
         
         makeTable(lunchArr, lunchDom);
         makeTable(lunchArr, lunchDom);
         makeTable(dinnerArr, dinnerDom);
         makeTable(dinnerArr, dinnerDom);
-        setlunch(lunchArr);
-        setdinner(dinnerArr);
+        console.log()
 
 
 
 
          
          
@@ -63,7 +63,7 @@ function MainPage() {
     <div className='mainpage'>
     <div className='mainpage'>
       
       
       <div>
       <div>
-        <div>
+        <div className='haksikTitle'>
           {today} 제2기숙사 학식
           {today} 제2기숙사 학식
         </div>
         </div>
         <div></div>
         <div></div>
@@ -74,7 +74,7 @@ function MainPage() {
         </div>
         </div>
         <div className='dinnerTable'></div>
         <div className='dinnerTable'></div>
       </div>
       </div>
-      <div>
+      <div className='mainpageUnder'>
         <div>메뉴에 대한 이야기</div>
         <div>메뉴에 대한 이야기</div>
         <div></div>
         <div></div>
       </div>
       </div>

@@ -15,7 +15,9 @@ code {
 *{
 *{
   margin:0px;
   margin:0px;
   padding:0px;
   padding:0px;
+  /*
   border-style: solid;
   border-style: solid;
   border-color: black;
   border-color: black;
   border-width: 5px;
   border-width: 5px;
+  */
 }
 }