From 82fb836dba701df5a28357c1c39332f434ebeeee Mon Sep 17 00:00:00 2001 From: com02 Date: Tue, 14 Dec 2021 18:58:16 +0900 Subject: [PATCH] =?UTF-8?q?=EC=86=8C=EC=9E=A5=EC=9E=90=EB=A3=8C=20?= =?UTF-8?q?=EC=83=81=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../jsp/nlib/collection/searchItemDetail.jsp | 21 ++++--- src/main/webapp/css/default.css | 63 ++++++++++--------- src/main/webapp/css/media.css | 38 ++++++----- 3 files changed, 67 insertions(+), 55 deletions(-) diff --git a/src/main/webapp/WEB-INF/jsp/nlib/collection/searchItemDetail.jsp b/src/main/webapp/WEB-INF/jsp/nlib/collection/searchItemDetail.jsp index 5adb95c5..09a81f26 100644 --- a/src/main/webapp/WEB-INF/jsp/nlib/collection/searchItemDetail.jsp +++ b/src/main/webapp/WEB-INF/jsp/nlib/collection/searchItemDetail.jsp @@ -93,8 +93,9 @@ function goList(){
-
-
+ +
+
온라인열람 @@ -113,11 +114,8 @@ function goList(){
-
-
" alt="">
-
-
-
+
+
@@ -130,7 +128,14 @@ function goList(){
-
+
+ +
+
" alt="">
+
+ +
+
  • diff --git a/src/main/webapp/css/default.css b/src/main/webapp/css/default.css index 8adf3f2f..baaae9fe 100644 --- a/src/main/webapp/css/default.css +++ b/src/main/webapp/css/default.css @@ -930,39 +930,42 @@ transform: rotate(45deg);} .data.detail .inner {} .data.detail .inner .row-top {width:100%;padding:45px 0px;display:inline-block;background: linear-gradient(to right, #485864, #6a7b8c);} .data.detail .inner .row-top .center {width:1400px;margin:0 auto;} +.data.detail .inner .row-top .center .title-box {display:inline-block;position:relative;width:100%;} +.data.detail .inner .row-top .center .title-box .cla-info {margin-bottom:10px;} +.data.detail .inner .row-top .center .title-box .cla-info .con-1 {display: inline;} +.data.detail .inner .row-top .center .title-box .cla-info .con-1 span {background:#fff;border:2px solid #333;border-radius:50px;color:#333;padding:1px 10px 2px;font-size:12px;font-weight: 500;display: inline-block;} +.data.detail .inner .row-top .center .title-box .cla-info .con-1 span.online {color:#376795;border:2px solid #376795;} +.data.detail .inner .row-top .center .title-box .cla-info .con-1 span.loan {color:#b68946;border:2px solid #b68946;} +.data.detail .inner .row-top .center .title-box .cla-info .con-1 span.visit {color:#2b8b99;border:2px solid #2b8b99;} +.data.detail .inner .row-top .center .title-box .cla-info .con-2 {display: inline-block;padding:0px 0px 0px 10px;} +.data.detail .inner .row-top .center .title-box .cla-info .con-2 .code {font-size:16px;color:#fff;line-height: 26px;} +.data.detail .inner .row-top .center .title-box .tit-info {font-size:24px;color:#fff;font-weight: 500;margin-bottom:20px;/*max-height: 105px;*/width:100%;height:auto;padding-bottom:10px;overflow: hidden;border-bottom:1px solid #ddd;margin-bottom: 30px;} + +.data.detail .inner .row-top .center .title-box .btn-info {display: inline-block;position:absolute;right:0px;top:0px;} +.data.detail .inner .row-top .center .title-box .btn-info button {background:#f5f5f5;width:auto;height:30px;line-height:28px;width:30px;border-radius: 3px;font-size:14px;color:#222;font-weight: 500;text-align: center;border:1px solid #ddd;} +.data.detail .inner .row-top .center .title-box .btn-info button.view {width:auto;padding:0px 26px;} +.data.detail .inner .row-top .center .title-box .btn-info button.ris {} +.data.detail .inner .row-top .center .title-box .btn-info button.favorit {text-indent: -99999px;background:url(/images/icon/icon-data-star.png) no-repeat center #f5f5f5;} +/*.data.detail .inner .row-top .center .right .con-1 button.favorit.on {background:url(/images/icon/icon-data-star-on.png) no-repeat center #f5f5f5;}*/ +.data.detail .inner .row-top .center .title-box .btn-info button.share {text-indent: -99999px;background:url(/images/icon/icon-data-share.png) no-repeat center #f5f5f5;} +.data.detail .inner .row-top .center .title-box .btn-info button.original {width:200px;display:none;} + .data.detail .inner .row-top .center .left {float:left;width:490px;margin-right:60px;text-align:left;} .data.detail .inner .row-top .center .right {float:left;width:850px;text-align: left;} -.data.detail .inner .row-top .center .left .cla {margin-bottom:10px;} -.data.detail .inner .row-top .center .left .cla .con-1 {display: inline;} -.data.detail .inner .row-top .center .left .cla .con-1 span {background:#fff;border:2px solid #333;border-radius:50px;color:#333;padding:1px 10px 2px;font-size:12px;font-weight: 500;display: inline-block;} -.data.detail .inner .row-top .center .left .cla .con-1 span.online {color:#376795;border:2px solid #376795;} -.data.detail .inner .row-top .center .left .cla .con-1 span.loan {color:#b68946;border:2px solid #b68946;} -.data.detail .inner .row-top .center .left .cla .con-1 span.visit {color:#2b8b99;border:2px solid #2b8b99;} -.data.detail .inner .row-top .center .left .cla .con-2 {display: inline-block;padding:0px 0px 0px 10px;} -.data.detail .inner .row-top .center .left .cla .con-2 .code {font-size:16px;color:#fff;line-height: 26px;} -.data.detail .inner .row-top .center .left .tit {font-size:24px;color:#fff;font-weight: 500;margin-bottom:20px;/*max-height: 105px;*/height:auto;overflow: hidden;} .data.detail .inner .row-top .center .left .img {background:#fff;display: inline-block;width:100%;height:445px;display: flex;align-items: center;justify-content: center;} -.data.detail .inner .row-top .center .right .con-1 {display: inline-block;width:100%;height:100px;border-bottom:1px solid #ddd;text-align: right;margin-bottom: 30px;} -.data.detail .inner .row-top .center .right .con-1 button {background:#f5f5f5;width:auto;height:30px;line-height:28px;width:30px;border-radius: 3px;font-size:14px;color:#222;font-weight: 500;text-align: center;border:1px solid #ddd;margin-top:55px;} -.data.detail .inner .row-top .center .right .con-1 button.view {width:auto;padding:0px 26px;} -.data.detail .inner .row-top .center .right .con-1 button.ris {} -.data.detail .inner .row-top .center .right .con-1 button.favorit {text-indent: -99999px;background:url(/images/icon/icon-data-star.png) no-repeat center #f5f5f5;} -/*.data.detail .inner .row-top .center .right .con-1 button.favorit.on {background:url(/images/icon/icon-data-star-on.png) no-repeat center #f5f5f5;}*/ -.data.detail .inner .row-top .center .right .con-1 button.share {text-indent: -99999px;background:url(/images/icon/icon-data-share.png) no-repeat center #f5f5f5;} - .data.detail .inner .row-top .center .right .con-1 button.original {width:200px;display:none;} -.data.detail .inner .row-top .center .right .con-2 {} -.data.detail .inner .row-top .center .right .con-2 .de-data {} -.data.detail .inner .row-top .center .right .con-2 .de-data ul {width: 100%;/*display: flex;flex-direction: column;*/} -.data.detail .inner .row-top .center .right .con-2 .de-data ul li {float:left;width:50%;margin:0px 0px 12px;} -.data.detail .inner .row-top .center .right .con-2 .de-data ul.full-width li {width:100%;} -.data.detail .inner .row-top .center .right .con-2 .de-data ul li span {font-size:14px;color:#fff;} -.data.detail .inner .row-top .center .right .con-2 .de-data ul li span:nth-of-type(1) {font-weight: 400;display:inline-block;margin-right:20px;min-width:70px;} -.data.detail .inner .row-top .center .right .con-2 .de-data ul li span:nth-of-type(2) {font-weight: 200;} -.data.detail .inner .row-top .center .right .con-2 .b-btn {margin:30px 0px 25px;display:inline-block;width:100%;} -.data.detail .inner .row-top .center .right .con-2 .b-btn button {font-size:14px;font-weight: 500;} -.data.detail .inner .row-top .center .right .con-2 .keyword {} -.data.detail .inner .row-top .center .right .con-2 .keyword span {background: #f4f4f4;color:#333;display:inline-block;padding:1px 10px 2px;border-radius: 50px;font-size:12px;margin-bottom:5px;} -.data.detail .inner .row-top .center .right .con-2 .keyword span.first {background: #b68948;color:#fff;margin-right:10px;padding:1px 16px 2px;} +.data.detail .inner .row-top .center .right .data-info {} +.data.detail .inner .row-top .center .right .data-info .de-data {} +.data.detail .inner .row-top .center .right .data-info .de-data ul {width: 100%;/*display: flex;flex-direction: column;*/} +.data.detail .inner .row-top .center .right .data-info .de-data ul li {float:left;width:50%;margin:0px 0px 12px;} +.data.detail .inner .row-top .center .right .data-info .de-data ul.full-width li {width:100%;} +.data.detail .inner .row-top .center .right .data-info .de-data ul li span {font-size:14px;color:#fff;} +.data.detail .inner .row-top .center .right .data-info .de-data ul li span:nth-of-type(1) {font-weight: 400;display:inline-block;margin-right:20px;min-width:70px;} +.data.detail .inner .row-top .center .right .data-info .de-data ul li span:nth-of-type(2) {font-weight: 200;} +.data.detail .inner .row-top .center .right .data-info .b-btn {margin:30px 0px 25px;display:inline-block;width:100%;} +.data.detail .inner .row-top .center .right .data-info .b-btn button {font-size:14px;font-weight: 500;} +.data.detail .inner .row-top .center .right .data-info .keyword {} +.data.detail .inner .row-top .center .right .data-info .keyword span {background: #f4f4f4;color:#333;display:inline-block;padding:1px 10px 2px;border-radius: 50px;font-size:12px;margin-bottom:5px;} +.data.detail .inner .row-top .center .right .data-info .keyword span.first {background: #b68948;color:#fff;margin-right:10px;padding:1px 16px 2px;} .data.detail .inner .row-bottom .con-1 {display:inline-block;width:100%;border:1px solid #ddd;margin:50px 0px 100px;} .data.detail .inner .row-bottom .con-1 .list-box {display:inline-block;width:100%;padding:25px 0px;} .data.detail .inner .row-bottom .con-1 .list-box .list {float:left;width:24.9%;border-right:1px solid #ddd;text-align: center;} diff --git a/src/main/webapp/css/media.css b/src/main/webapp/css/media.css index 1618ce4f..c397a84f 100644 --- a/src/main/webapp/css/media.css +++ b/src/main/webapp/css/media.css @@ -158,7 +158,7 @@ footer .family_site {right:10px;} .article-side {width:22%;margin-right:2%;} .culture-box {width:74%;} .data.detail .inner .row-top .center .left {width:40%;} -.data.detail .inner .row-top .center .left .img img {} +.data.detail .inner .row-top .center .left .img img {width:100%;max-height: 430px;max-width: 300px;} .data.detail .inner .row-top .center .right {width:54%;} .greeting .inner .row-bottom .greeting-box .gree {width:90%;padding:70px 5%;} .guide .inner .row-bottom { padding: 0px 0px 80px; box-sizing: border-box; } @@ -719,6 +719,20 @@ footer .family_site {right:10px;} /* 소장 자료 상세 */ .data.detail .inner .row-top .center { width: 100%; display: flex; flex-direction: column; padding: 0 16px; box-sizing: border-box; } + + .data.detail .inner .row-top .center .title-box .cla-info { position: relative; } + .data.detail .inner .row-top .center .title-box .cla-info .con-1 { width: 100%; display: block; } + .data.detail .inner .row-top .center .title-box .cla-info .con-2 { position: relative; top: 5px; padding: 0; } + .data.detail .inner .row-top .center .title-box .tit-info { font-size: 22px; margin-bottom: 30px;overflow:hidden; } + + .data.detail .inner .row-top .center .title-box .btn-info {position:relative;} + .data.detail .inner .row-top .center .title-box .btn-info { display: flex; height: auto; border: none; } + .data.detail .inner .row-top .center .title-box .btn-info button { margin-bottom:10px;width: 36px; height: 36px; } + .data.detail .inner .row-top .center .title-box .btn-info button.view { flex: 1; } + .data.detail .inner .row-top .center .title-box .btn-info button.ris { display: none; } + .data.detail .inner .row-top .center .title-box .btn-info button.favorit { margin: 0px 10px; } + .data.detail .inner .row-top .center .title-box .btn-info button.original {width:200px;display:inline-block;} + .data.detail .inner .row-top .center .left, .data.detail .inner .row-top .center .right, .data.detail .inner .row-bottom .con-4 .top h3, @@ -726,22 +740,12 @@ footer .family_site {right:10px;} .data.detail .inner .row-top .center .left .img img { width: 100%; } .data.detail .inner .row-top .center .left .img {background:#fff;text-align:center;width:80%;padding:5% 10%;} .data.detail .inner .row-bottom { padding: 0; } - .data.detail .inner .row-top .center .left .cla { position: relative; } - .data.detail .inner .row-top .center .left .cla .con-1 { width: 100%; display: block; } - .data.detail .inner .row-top .center .left .cla .con-2 { position: relative; top: 5px; padding: 0; } - .data.detail .inner .row-top .center .left .tit { font-size: 22px; margin-bottom: 30px;overflow:hidden; } - .data.detail .inner .row-top .center .right .con-1 { display: flex; height: auto; border: none; } - .data.detail .inner .row-top .center .right .con-1 button { margin-top: 14px; width: 36px; height: 36px; } - .data.detail .inner .row-top .center .right .con-1 button.view { flex: 1; } - .data.detail .inner .row-top .center .right .con-1 button.ris { display: none; } - .data.detail .inner .row-top .center .right .con-1 button.favorit { margin: 14px 10px 0; } - .data.detail .inner .row-top .center .right .con-1 button.original {width:200px;display:inline-block;} - .data.detail .inner .row-top .center .right .con-2 .de-data { flex-direction: column; } - .data.detail .inner .row-top .center .right .con-2 .de-data ul { width: 100%; display: flex; flex-direction: column; } - .data.detail .inner .row-top .center .right .con-2 .de-data ul li { width: 100%; } - .data.detail .inner .row-top .center .right .con-2 .b-btn button { width: 100%; margin-bottom: 6px; } - .data.detail .inner .row-top .center .right .con-2 .keyword span.first, - .data.detail .inner .row-top .center .right .con-2 .keyword span { padding: 5px 14px 5px; border-radius: 30px; } + .data.detail .inner .row-top .center .right .data-info .de-data { flex-direction: column;margin-top:20px;} + .data.detail .inner .row-top .center .right .data-info .de-data ul { width: 100%; display: flex; flex-direction: column; } + .data.detail .inner .row-top .center .right .data-info .de-data ul li { width: 100%; } + .data.detail .inner .row-top .center .right .data-info .b-btn button { width: 100%; margin-bottom: 6px; } + .data.detail .inner .row-top .center .right .data-info .keyword span.first, + .data.detail .inner .row-top .center .right .data-info .keyword span { padding: 5px 14px 5px; border-radius: 30px; } .data.detail .inner .row-top .center .left .img img {width:100%;max-height: 430px;max-width: 300px;} .data.detail .inner .row-bottom.contents { padding: 0 16px; } .data.detail .inner .row-bottom .con-1 { margin-bottom: 30px; }