Commit @ac00b484cef278c5c1562d4feb4731b4d4e88c45

류윤주 2023-11-17

231117 류윤주 커밋

@ac00b484cef278c5c1562d4feb4731b4d4e88c45

5becab0

ac00b48

client/resources/css/Main.css

--- client/resources/css/Main.css

+++ client/resources/css/Main.css


   overflow-y: auto;
 }
 
-.modal-content-box > p {
+.modal-content-box>p {
   margin-bottom: 1.5rem;
 }
 

   flex: 0 0 10%;
 }
 
-.modal-content-box > div > ul {
+.modal-content-box>div>ul {
   flex: 0 0 85%;
 }
 

   grid-template-columns: 1fr 1fr 1fr;
 }
 
-.main-puzzle-container > div:nth-child(4) {
+.main-puzzle-container>div:nth-child(4) {
   position: relative;
 }
 
-.main-puzzle-container > div:nth-child(4)::after {
+.main-puzzle-container>div:nth-child(4)::after {
   position: absolute;
   content: "";
   width: 90px;

   background-size: cover;
   z-index: 1;
 }
-.main-position {
+
+/* .main-position {
   position: relative;
-}
-.main-position > a {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+}*/
+
+.main-position>a {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
 }
 
 .main-wrap-grid-2 div,

   background-color: #e2e2e2;
 }
 
-.matching-box-grid > h3 {
+.matching-box-grid>h3 {
   font-size: 2.6rem;
   padding: 3rem;
   font-family: SBaggroM;

   grid-template-columns: 1fr 1fr 1fr;
 }
 
-.modal-img > p {
+.modal-img>p {
   padding: 10px 0;
   font-size: 1.6rem;
   text-align: center;

   margin-left: 110px;
 }
 
-.tech-txt-wrap li > * {
+.tech-txt-wrap li>* {
   display: inline-block;
   font-weight: 400;
   font-size: 2rem;

   font-size: 1.3rem;
 }
 
+.keyword-zone {
+  width: 243px;
+  width: 243px;
+  height: 50px;
+  text-align: left;
+  overflow: hidden;
+}
+
+.keyword-zone span {
+  display: inline-block;
+  padding: 5px 10px;
+  border-radius: 3px;
+  margin-right: 10px;
+  background-color: #dddd;
+}
+
 /* 가리기  */
 .tech-box-sec-img {
   box-shadow: 3px 3px 6px rgba(191, 191, 191, 0.447);

 }
 
 .info-sec div,
-.info-sec-1 > div {
+.info-sec-1>div {
   display: grid;
 
   border-bottom: 1px solid #333;

   grid-row: 1 / span 3;
 }
 
-.info-sec-1 > div > p {
+.info-sec-1>div>p {
   padding: 3rem 0;
   font-size: 1.2rem;
   color: #007aff;

   color: #666;
 }
 
-.matching-box-button div input[type="radio"]:checked + label {
+.matching-box-button div input[type="radio"]:checked+label {
   color: #007aff;
   border-bottom: 0px;
   background: linear-gradient(#71aef0, rgb(255, 255, 255));

   position: relative;
 }
 
-.join-imgbox > p {
+.join-imgbox>p {
   width: 100%;
   height: 100%;
   top: 0;

   position: absolute;
 }
 
-.join-imgbox > img {
+.join-imgbox>img {
   width: 100%;
   height: 100%;
   position: absolute;

   margin: 0 auto;
 }
 
-.login-info > div > p {
+.login-info>div>p {
   color: rgb(255, 0, 0);
   padding: 0 1rem;
   font-size: 1.5rem;

   padding: 1rem 0;
 }
 
-.address-sec > div {
+.address-sec>div {
   margin-bottom: 10px;
 }
 

   font-size: 1.4rem;
 }
 
-.keyword-label:checked + label {
+.keyword-label:checked+label {
   background: #d6e6ff;
   color: #007aff;
 }

   padding: 1rem 0;
 }
 
-.login-modal > p {
+.login-modal>p {
   padding: 1rem 0;
 }
 

   font-weight: 700;
 }
 
-.pwchange-div ul > li {
+.pwchange-div ul>li {
   padding: 0.5rem 0;
 }
 
-.pwchang-div > div:nth-child(1) {
+.pwchang-div>div:nth-child(1) {
   padding: 1rem 0;
 }
 

 .pwchange2-button .dark-gray-btn {
   margin: 0px;
 }
+
 .notice-search {
   width: 30%;
   display: flex;
   gap: 1rem;
 }
+
 .notice-search input:nth-child(2) {
   width: 20%;
 }

 .map-page span {
   color: #2b6fa9;
 }
+
 .modal-img {
   margin-bottom: 3rem;
-}
+}

5becab0

ac00b48

client/views/pages/user/Data/Technology.vue

--- client/views/pages/user/Data/Technology.vue

+++ client/views/pages/user/Data/Technology.vue


                             <img src="../../../../resources/jpg/tech.png" alt="">
                         </div>
                         <div>
-                            <p class="content-detail">{{ item.tech_doc_keyword }}</p>
+                            <p class="keyword-zone"><span>{{ item.tech_doc_keyword }}</span></p>
                             <div class="flex">
                                 <p class="date">{{ yyyymmdd(item.reg_dt) }}</p>
                                 <p>조회수 <span>{{ item.view_cnt }}</span></p>

                     </li>
                     <li class="tech-box-sec ">
                         <div class="tech-box-fillter">
-
                             <div class="tech-box-sec-h3">
                                 <div class="flex">
                                     <h3>&nbsp;</h3>

5becab0

ac00b48

client/views/pages/user/main/Main.vue

--- client/views/pages/user/main/Main.vue

+++ client/views/pages/user/main/Main.vue


                                         </table>
                                     </div>
                                 </div>
-
                                 <div class="main-wrap-grid-2 ">
                                     <div class="main-position">
                                         <a @click="showAlert">

Add a comment

Open 0
Closed 0

List

...	...	@@ -21,7 +21,7 @@
21	21	<img src="../../../../resources/jpg/tech.png" alt="">
22	22	</div>
23	23	<div>
24		- <p class="content-detail">{{ item.tech_doc_keyword }}</p>
	24	+ <p class="keyword-zone"><span>{{ item.tech_doc_keyword }}</span></p>
25	25	<div class="flex">
26	26	<p class="date">{{ yyyymmdd(item.reg_dt) }}</p>
27	27	<p>조회수 <span>{{ item.view_cnt }}</span></p>
...	...	@@ -33,7 +33,6 @@
33	33	</li>
34	34	<li class="tech-box-sec ">
35	35	<div class="tech-box-fillter">
36		-
37	36	<div class="tech-box-sec-h3">
38	37	<div class="flex">
39	38	<h3> </h3>

...	...	@@ -75,7 +75,6 @@
75	75	</table>
76	76	</div>
77	77	</div>
78		-
79	78	<div class="main-wrap-grid-2 ">
80	79	<div class="main-position">
81	80	<a @click="showAlert">

...	...	@@ -82,7 +82,7 @@
82	82	overflow-y: auto;
83	83	}
84	84
85		-.modal-content-box > p {
	85	+.modal-content-box>p {
86	86	margin-bottom: 1.5rem;
87	87	}
88	88
...	...	@@ -97,7 +97,7 @@
97	97	flex: 0 0 10%;
98	98	}
99	99
100		-.modal-content-box > div > ul {
	100	+.modal-content-box>div>ul {
101	101	flex: 0 0 85%;
102	102	}
103	103
...	...	@@ -119,11 +119,11 @@
119	119	grid-template-columns: 1fr 1fr 1fr;
120	120	}
121	121
122		-.main-puzzle-container > div:nth-child(4) {
	122	+.main-puzzle-container>div:nth-child(4) {
123	123	position: relative;
124	124	}
125	125
126		-.main-puzzle-container > div:nth-child(4)::after {
	126	+.main-puzzle-container>div:nth-child(4)::after {
127	127	position: absolute;
128	128	content: "";
129	129	width: 90px;
...	...	@@ -217,14 +217,17 @@
217	217	background-size: cover;
218	218	z-index: 1;
219	219	}
220		-.main-position {
	220	+
	221	+/* .main-position {
221	222	position: relative;
222		-}
223		-.main-position > a {
224		- position: absolute;
225		- top: 50%;
226		- left: 50%;
227		- transform: translate(-50%, -50%);
	223	+}*/
	224	+
	225	+.main-position>a {
	226	+ display: flex;
	227	+ justify-content: center;
	228	+ flex-direction: column;
	229	+ align-items: center;
	230	+ height: 100%;
228	231	}
229	232
230	233	.main-wrap-grid-2 div,
...	...	@@ -550,7 +553,7 @@
550	553	background-color: #e2e2e2;
551	554	}
552	555
553		-.matching-box-grid > h3 {
	556	+.matching-box-grid>h3 {
554	557	font-size: 2.6rem;
555	558	padding: 3rem;
556	559	font-family: SBaggroM;
...	...	@@ -838,7 +841,7 @@
838	841	grid-template-columns: 1fr 1fr 1fr;
839	842	}
840	843
841		-.modal-img > p {
	844	+.modal-img>p {
842	845	padding: 10px 0;
843	846	font-size: 1.6rem;
844	847	text-align: center;
...	...	@@ -1371,7 +1374,7 @@
1371	1374	margin-left: 110px;
1372	1375	}
1373	1376
1374		-.tech-txt-wrap li > * {
	1377	+.tech-txt-wrap li>* {
1375	1378	display: inline-block;
1376	1379	font-weight: 400;
1377	1380	font-size: 2rem;
...	...	@@ -1421,6 +1424,22 @@
1421	1424	font-size: 1.3rem;
1422	1425	}
1423	1426
	1427	+.keyword-zone {
	1428	+ width: 243px;
	1429	+ width: 243px;
	1430	+ height: 50px;
	1431	+ text-align: left;
	1432	+ overflow: hidden;
	1433	+}
	1434	+
	1435	+.keyword-zone span {
	1436	+ display: inline-block;
	1437	+ padding: 5px 10px;
	1438	+ border-radius: 3px;
	1439	+ margin-right: 10px;
	1440	+ background-color: #dddd;
	1441	+}
	1442	+
1424	1443	/* 가리기 */
1425	1444	.tech-box-sec-img {
1426	1445	box-shadow: 3px 3px 6px rgba(191, 191, 191, 0.447);
...	...	@@ -1459,7 +1478,7 @@
1459	1478	}
1460	1479
1461	1480	.info-sec div,
1462		-.info-sec-1 > div {
	1481	+.info-sec-1>div {
1463	1482	display: grid;
1464	1483
1465	1484	border-bottom: 1px solid #333;
...	...	@@ -1496,7 +1515,7 @@
1496	1515	grid-row: 1 / span 3;
1497	1516	}
1498	1517
1499		-.info-sec-1 > div > p {
	1518	+.info-sec-1>div>p {
1500	1519	padding: 3rem 0;
1501	1520	font-size: 1.2rem;
1502	1521	color: #007aff;
...	...	@@ -1737,7 +1756,7 @@
1737	1756	color: #666;
1738	1757	}
1739	1758
1740		-.matching-box-button div input[type="radio"]:checked + label {
	1759	+.matching-box-button div input[type="radio"]:checked+label {
1741	1760	color: #007aff;
1742	1761	border-bottom: 0px;
1743	1762	background: linear-gradient(#71aef0, rgb(255, 255, 255));
...	...	@@ -1930,7 +1949,7 @@
1930	1949	position: relative;
1931	1950	}
1932	1951
1933		-.join-imgbox > p {
	1952	+.join-imgbox>p {
1934	1953	width: 100%;
1935	1954	height: 100%;
1936	1955	top: 0;
...	...	@@ -1938,7 +1957,7 @@
1938	1957	position: absolute;
1939	1958	}
1940	1959
1941		-.join-imgbox > img {
	1960	+.join-imgbox>img {
1942	1961	width: 100%;
1943	1962	height: 100%;
1944	1963	position: absolute;
...	...	@@ -2014,7 +2033,7 @@
2014	2033	margin: 0 auto;
2015	2034	}
2016	2035
2017		-.login-info > div > p {
	2036	+.login-info>div>p {
2018	2037	color: rgb(255, 0, 0);
2019	2038	padding: 0 1rem;
2020	2039	font-size: 1.5rem;
...	...	@@ -2385,7 +2404,7 @@
2385	2404	padding: 1rem 0;
2386	2405	}
2387	2406
2388		-.address-sec > div {
	2407	+.address-sec>div {
2389	2408	margin-bottom: 10px;
2390	2409	}
2391	2410
...	...	@@ -2426,7 +2445,7 @@
2426	2445	font-size: 1.4rem;
2427	2446	}
2428	2447
2429		-.keyword-label:checked + label {
	2448	+.keyword-label:checked+label {
2430	2449	background: #d6e6ff;
2431	2450	color: #007aff;
2432	2451	}
...	...	@@ -2466,7 +2485,7 @@
2466	2485	padding: 1rem 0;
2467	2486	}
2468	2487
2469		-.login-modal > p {
	2488	+.login-modal>p {
2470	2489	padding: 1rem 0;
2471	2490	}
2472	2491
...	...	@@ -2780,11 +2799,11 @@
2780	2799	font-weight: 700;
2781	2800	}
2782	2801
2783		-.pwchange-div ul > li {
	2802	+.pwchange-div ul>li {
2784	2803	padding: 0.5rem 0;
2785	2804	}
2786	2805
2787		-.pwchang-div > div:nth-child(1) {
	2806	+.pwchang-div>div:nth-child(1) {
2788	2807	padding: 1rem 0;
2789	2808	}
2790	2809
...	...	@@ -2803,11 +2822,13 @@
2803	2822	.pwchange2-button .dark-gray-btn {
2804	2823	margin: 0px;
2805	2824	}
	2825	+
2806	2826	.notice-search {
2807	2827	width: 30%;
2808	2828	display: flex;
2809	2829	gap: 1rem;
2810	2830	}
	2831	+
2811	2832	.notice-search input:nth-child(2) {
2812	2833	width: 20%;
2813	2834	}
...	...	@@ -2888,6 +2909,7 @@
2888	2909	.map-page span {
2889	2910	color: #2b6fa9;
2890	2911	}
	2912	+
2891	2913	.modal-img {
2892	2914	margin-bottom: 3rem;
2893		-}
	2915	+} (No newline at end of file)

Delete comment