wheeparam
/
npsonair
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

board 상세 완료

master
lee_whee 4 months ago
parent
e8bbcf27df
commit
300722e926
33 changed files with 6464 additions and 388 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 614
      dist/assets/css/style.css
  2. 2
      dist/assets/css/style.min.css
  3. 2
      dist/assets/css/style.min.css.map
  4. BIN
      dist/assets/images/common/detail-sns01.png
  5. BIN
      dist/assets/images/common/detail-sns02.png
  6. BIN
      dist/assets/images/common/detail-sns03.png
  7. BIN
      dist/assets/images/common/detail-sns04.png
  8. 2
      dist/assets/js/common.min.js
  9. 2
      dist/assets/js/common.min.js.map
  10. 139
      dist/clips/clips.html
  11. 525
      dist/clips/detail.html
  12. 27
      dist/index.html
  13. 1644
      dist/news/detail.html
  14. 69
      dist/news/news.html
  15. 490
      dist/shorts/detail.html
  16. 107
      dist/shorts/shorts.html
  17. 486
      dist/toons/detail.html
  18. 72
      dist/toons/toons.html
  19. 122
      src/html/clips/clips.html
  20. 243
      src/html/clips/detail.html
  21. 8
      src/html/include/header.html
  22. 18
      src/html/include/left_menu.html
  23. 1
      src/html/include/meta.html
  24. 1362
      src/html/news/detail.html
  25. 52
      src/html/news/news.html
  26. 208
      src/html/shorts/detail.html
  27. 90
      src/html/shorts/shorts.html
  28. 204
      src/html/toons/detail.html
  29. 55
      src/html/toons/toons.html
  30. 106
      src/js/common.js
  31. 4
      src/scss/components/_breadcrumbs.scss
  32. 195
      src/scss/pages/_lists.scss
  33. 3
      src/scss/style.scss

614
dist/assets/css/style.css
View File

@ -2787,10 +2787,10 @@ html {
padding: 0;
}
.breadcrumb ol li a, .breadcrumb ol li span {
font-size: 0.4583333333rem;
font-size: 0.625rem;
}
.breadcrumb ol li + li a:before, .breadcrumb ol li + li span:before {
font-size: 0.4583333333rem;
font-size: 0.625rem;
margin: 0 0.25rem;
}
}
@ -3736,6 +3736,60 @@ html {
line-height: 1.28em;
}
}
.common-list.news.inner {
-webkit-display: flex;
display: -ms-flex;
display: flex;
flex-wrap: wrap;
margin: 0 0 0.625rem 0;
padding-bottom: 1.875rem;
}
.common-list.news.inner .item {
width: 50%;
padding: 0.625rem 0.9375rem;
-webkit-display: flex;
display: -ms-flex;
display: flex;
align-items: center;
border-bottom: 1px solid #c2c2c2;
}
.common-list.news.inner .item .thumbnail {
width: 6.25rem;
height: 6.25rem;
margin: 0 auto 0.625rem;
flex-shrink: 0;
}
.common-list.news.inner .item .item-content {
padding-left: 0.9375rem;
}
.common-list.news.inner .item .item-content .item-title {
font-size: 0.9375rem;
white-space: initial;
}
@media screen and (max-width: 768px) {
.common-list.news.inner .item {
width: 100%;
padding: 0.25rem 0.3125rem;
-webkit-display: flex;
display: -ms-flex;
display: flex;
flex-direction: row;
}
.common-list.news.inner .item .thumbnail {
width: 2.5rem;
height: 1.6666666667rem;
margin: 0;
flex-shrink: 0;
}
.common-list.news.inner .item .item-content {
padding-left: 0.625rem;
}
.common-list.news.inner .item .item-content .item-title {
font-size: 0.4375rem;
white-space: initial;
margin-bottom: 0;
}
}
.common-list.toons {
display: flex;
flex-wrap: wrap;
@ -3768,6 +3822,46 @@ html {
margin-bottom: 0.25rem;
}
}
.common-list.toons.inner .item {
width: 50%;
padding: 0.625rem 0.9375rem;
-webkit-display: flex;
display: -ms-flex;
display: flex;
align-items: center;
}
.common-list.toons.inner .item .thumbnail {
width: 6.25rem;
height: 6.25rem;
margin: 0 auto 0.625rem;
flex-shrink: 0;
}
.common-list.toons.inner .item .item-content {
padding-left: 0.9375rem;
}
.common-list.toons.inner .item .item-content .item-title {
font-size: 0.9375rem;
white-space: initial;
}
@media screen and (max-width: 768px) {
.common-list.toons.inner .item {
width: 100%;
padding: 0.25rem 0.3125rem;
}
.common-list.toons.inner .item .thumbnail {
width: 3.125rem;
height: 3.125rem;
margin: 0;
flex-shrink: 0;
}
.common-list.toons.inner .item .item-content {
padding-left: 0.625rem;
}
.common-list.toons.inner .item .item-content .item-title {
font-size: 0.4375rem;
white-space: initial;
}
}
.common-list.shorts {
margin: 0 -0.25rem;
display: flex;
@ -3815,6 +3909,56 @@ html {
word-break: keep-all;
}
}
.common-list.shorts.inner {
margin-top: 0;
}
.common-list.shorts.inner .item {
width: 50%;
padding: 0.625rem 0.9375rem;
-webkit-display: flex;
display: -ms-flex;
display: flex;
align-items: center;
}
.common-list.shorts.inner .item .thumbnail {
width: 5.25rem;
height: 7.875rem;
margin: 0;
flex-shrink: 0;
}
.common-list.shorts.inner .item .item-content {
padding-left: 0.9375rem;
}
.common-list.shorts.inner .item .item-content .item-title {
font-size: 0.9375rem;
white-space: initial;
margin-bottom: 0;
}
.common-list.shorts.inner .item .item-content .item-title br {
display: none;
}
@media screen and (max-width: 768px) {
.common-list.shorts.inner .item {
width: 100%;
padding: 0.25rem 0.3125rem;
}
.common-list.shorts.inner .item .thumbnail {
width: 1.75rem;
height: 2.625rem;
margin: 0;
flex-shrink: 0;
}
.common-list.shorts.inner .item .item-content {
padding-left: 0.625rem;
}
.common-list.shorts.inner .item .item-content .item-title {
font-size: 0.4375rem;
white-space: initial;
}
.common-list.shorts.inner .item .item-content .item-summary {
font-size: 0.375rem;
}
}
.common-list.clips {
display: flex;
flex-wrap: wrap;
@ -3866,6 +4010,61 @@ html {
display: none;
}
}
.common-list.clips.inner {
margin-top: 0;
}
.common-list.clips.inner .item {
width: 50%;
padding: 0.625rem 0.9375rem;
-webkit-display: flex;
display: -ms-flex;
display: flex;
align-items: center;
}
.common-list.clips.inner .item .thumbnail {
width: 7.5rem;
height: 5rem;
margin: 0;
flex-shrink: 0;
}
.common-list.clips.inner .item .item-content {
padding-left: 0.9375rem;
}
.common-list.clips.inner .item .item-content .item-title {
font-size: 0.9375rem;
white-space: initial;
}
.common-list.clips.inner .item .item-content .item-title br {
display: none;
}
.common-list.clips.inner .item .item-content .item-summary {
font-size: 0.75rem;
}
.common-list.clips.inner .item .item-content .item-summary br {
display: none;
}
@media screen and (max-width: 768px) {
.common-list.clips.inner .item {
width: 100%;
padding: 0.25rem 0.3125rem;
}
.common-list.clips.inner .item .thumbnail {
width: 3.75rem;
height: 2.5rem;
margin: 0;
flex-shrink: 0;
}
.common-list.clips.inner .item .item-content {
padding-left: 0.625rem;
}
.common-list.clips.inner .item .item-content .item-title {
font-size: 0.4375rem;
white-space: initial;
}
.common-list.clips.inner .item .item-content .item-summary {
font-size: 0.375rem;
}
}
.tag-container {
width: 100%;
@ -3942,4 +4141,415 @@ html {
font-size: 0.5625rem;
padding: 0 0.5625rem;
}
}
#board .page-contents {
padding: 1.875rem;
background-color: #fff;
margin-bottom: 1.875rem;
border-radius: 1.25rem;
}
#board .page-contents .contents-header {
width: 100%;
padding-bottom: 0.9375rem;
border-bottom: 0.0625rem solid #02256c;
}
#board .page-contents .contents-header .contents-title {
font-size: 1.875rem;
margin-bottom: 0.625rem;
}
#board .page-contents .contents-header .page-header-info {
-webkit-display: flex;
display: -ms-flex;
display: flex;
align-items: center;
}
#board .page-contents .contents-header .page-header-info .date {
-webkit-display: flex;
display: -ms-flex;
display: flex;
align-items: center;
}
#board .page-contents .contents-header .page-header-info .date > dd {
color: #898989;
font-size: 0.9375rem;
}
#board .page-contents .list-detail-sns {
margin-left: auto;
-webkit-display: flex;
display: -ms-flex;
display: flex;
align-items: center;
}
#board .page-contents .list-detail-sns > a {
width: 1.875rem;
height: 1.875rem;
margin: 0 0.1875rem;
background-size: cover;
text-indent: -99999px;
overflow: hidden;
display: block;
}
#board .page-contents .list-detail-sns > a.sns-facebook {
background-color: transparent;
background-image: url("../images/common/detail-sns01.png");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
}
#board .page-contents .list-detail-sns > a.sns-twitter {
background-color: transparent;
background-image: url("../images/common/detail-sns02.png");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
}
#board .page-contents .list-detail-sns > a.sns-kakaotalk {
background-color: transparent;
background-image: url("../images/common/detail-sns03.png");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
}
#board .page-contents .list-detail-sns > a.url-copy {
background-color: transparent;
background-image: url("../images/common/detail-sns04.png");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
}
#board .page-contents .detail-contents {
width: 100%;
padding: 0.625rem;
}
#board .page-contents .detail-contents p {
width: 100%;
box-sizing: border-box;
}
#board .page-contents .detail-contents img {
max-width: 100%;
height: auto !important;
}
#board .page-contents .hash-tag {
-webkit-display: flex;
display: -ms-flex;
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 1.875rem;
}
#board .page-contents .hash-tag > li {
padding: 0 0.625rem 0 1.25rem;
height: 2.125rem;
line-height: 2rem;
border: 0.0625rem solid #e1e1e1;
margin: 0 0.3125rem 0.3125rem 0;
font-weight: 300;
font-size: 0.9375rem;
position: relative;
color: #666;
}
#board .page-contents .hash-tag > li:before {
content: "#";
position: absolute;
left: 0.5rem;
top: 0;
}
#board .page-contents .page-list {
margin-top: 0.625rem;
padding-top: 0.625rem;
border-top: 0.0625rem solid #999;
}
#board .page-contents .page-list .title {
font-size: 1.5rem;
margin-bottom: 0.625rem;
}
#board .page-contents .video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin-top: 0.625rem;
}
#board .page-contents .video-container.shorts {
width: 56.25%;
padding-bottom: 100%;
margin: 0.625rem auto 0 auto;
}
#board .page-contents .video-container iframe,
#board .page-contents .video-container object,
#board .page-contents .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#board .page-contents .btn-list-prev {
width: 11.25rem;
height: 2.5rem;
line-height: 2.5rem;
background-color: #02256c;
border: none;
color: #fff;
display: block;
font-size: 1rem;
margin: 1.875rem auto 0 auto;
text-align: center;
}
@media screen and (max-width: 768px) {
#board .page-contents {
padding: 0.625rem;
border-radius: 0.625rem;
margin-bottom: 0.625rem;
}
#board .page-contents .contents-header {
padding-bottom: 0.625rem;
}
#board .page-contents .contents-header .contents-title {
font-size: 0.75rem;
margin-bottom: 0.3125rem;
}
#board .page-contents .contents-header .page-header-info .date > dd {
font-size: 0.4166666667rem;
}
#board .page-contents .list-detail-sns > a {
width: 0.9375rem;
height: 0.9375rem;
margin: 0 0.1875rem;
}
#board .page-contents .detail-contents {
padding: 0.625rem;
}
#board .page-contents .detail-contents *:not(.video-container.shorts) {
font-size: 0.5rem !important;
margin-left: 0 !important;
text-indent: 0 !important;
word-break: initial !important;
}
#board .page-contents .hash-tag {
-webkit-display: flex;
display: -ms-flex;
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 0.625rem;
}
#board .page-contents .hash-tag > li {
padding: 0 0.2083333333rem 0 0.625rem;
height: 1.25rem;
line-height: 1.2083333333rem;
border: 0.0625rem solid #e1e1e1;
margin: 0 0.1041666667rem 0.1041666667rem 0;
font-size: 0.5rem;
}
#board .page-contents .hash-tag > li:before {
left: 0.1875rem;
}
#board .page-contents .page-list {
margin-top: 0.625rem;
padding-top: 0.625rem;
border-top: 0.0625rem solid #999;
}
#board .page-contents .page-list .title {
font-size: 0.625rem;
margin-bottom: 0.625rem;
}
#board .page-contents .video-container {
margin-top: 0.625rem;
}
#board .page-contents .video-container.shorts {
width: 9.1666666667rem;
height: 17.9166666667rem;
padding-bottom: 0;
margin: 0.625rem auto 0 auto;
}
#board .page-contents .btn-list-prev {
width: 6.25rem;
height: 1.25rem;
line-height: 1.25rem;
font-size: 0.5625rem;
margin: 1.25rem auto 0 auto;
text-align: center;
}
}
#board .form-content-wrap {
width: 100%;
border: 0.0625rem solid #b3b3ca;
margin-top: 1.5625rem;
padding: 1.25rem 0.625rem;
}
#board .form-content-wrap .form-title {
width: 100%;
padding: 0 0 0.9375rem 0;
font-size: 1.125rem;
line-height: 1.3;
border-bottom: 0.0625rem solid #d7d7d7;
word-break: break-all;
text-align: center;
}
#board .form-content-wrap .form-box {
margin-top: 0.9375rem;
}
#board .form-content-wrap .form-box .question-title {
font-size: 0.875rem;
padding: 0.625rem 0;
}
#board .form-content-wrap .form-box .form-radio-box {
-webkit-display: flex;
display: -ms-flex;
display: flex;
justify-content: space-between;
padding: 0 1.875rem;
}
#board .form-content-wrap .form-box .form-radio-box.other {
padding: 0;
}
#board .form-content-wrap .form-box .form-radio-box .radio-item {
display: inline-block;
white-space: nowrap;
position: relative;
font-size: 0.8125rem;
}
#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked,
#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) {
position: absolute;
left: -9999px;
}
#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked + label,
#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) + label {
position: relative;
padding-left: 1.75rem;
cursor: pointer;
line-height: 1.25rem;
display: inline-block;
color: #666;
}
#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked + label:before,
#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) + label:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 1.125rem;
height: 1.125rem;
border: 0.0625rem solid #ddd;
border-radius: 100%;
background: #fff;
}
#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked + label:after,
#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) + label:after {
content: "";
width: 0.75rem;
height: 0.75rem;
background: #02256c;
position: absolute;
top: 0.15625rem;
left: 0.15625rem;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
#board .form-content-wrap .form-box .form-radio-box textarea {
width: 100%;
min-height: 1.875rem;
border: 0.0625rem solid #ebebeb;
font-size: 0.8125rem;
padding: 0.3125rem;
}
#board .form-content-wrap .form-box .textarea-num {
width: 100%;
text-align: right;
color: #444;
font-size: 0.75rem;
}
#board .form-content-wrap .form-box .textarea-num span#byteInfo {
color: #ff6706;
}
#board .form-content-wrap .form-btn {
width: 6.25rem;
height: 1.875rem;
background-color: #02256c;
border: none;
color: #fff;
display: block;
font-size: 0.75rem;
margin: 0.9375rem auto 0 auto;
line-height: 1;
}
@media screen and (max-width: 768px) {
#board .form-content-wrap {
margin-top: 0.5208333333rem;
padding: 0.625rem 0.25rem;
}
#board .form-content-wrap .form-title {
padding: 0 0 0.3125rem 0;
font-size: 0.625rem;
}
#board .form-content-wrap .form-box {
margin-top: 0.625rem;
}
#board .form-content-wrap .form-box .question-title {
font-size: 0.5625rem;
padding: 0.2083333333rem 0;
}
#board .form-content-wrap .form-box .form-radio-box {
padding: 0;
}
#board .form-content-wrap .form-box .form-radio-box.other {
padding: 0;
}
#board .form-content-wrap .form-box .form-radio-box .radio-item {
font-size: 0.4375rem;
}
#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked + label,
#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) + label {
padding-left: 0.7916666667rem;
line-height: 0.625rem;
}
#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked + label:before,
#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) + label:before {
width: 0.6666666667rem;
height: 0.6666666667rem;
border: 0.0625rem solid #ddd;
}
#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked + label:after,
#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) + label:after {
width: 0.5rem;
height: 0.5rem;
top: 0.0833333333rem;
left: 0.0833333333rem;
}
#board .form-content-wrap .form-box .form-radio-box textarea {
width: 100%;
min-height: 2.5rem;
border: 0.0625rem solid #ebebeb;
font-size: 0.5625rem;
padding: 0.1875rem;
}
#board .form-content-wrap .form-box .textarea-num {
width: 100%;
font-size: 0.4375rem;
}
#board .form-content-wrap .form-box .textarea-num span#byteInfo {
color: #ff6706;
}
#board .form-content-wrap .form-btn {
width: 3.75rem;
height: 0.9375rem;
display: block;
font-size: 0.4375rem;
margin: 0.3125rem auto 0 auto;
line-height: 1;
}
}

2
dist/assets/css/style.min.css
File diff suppressed because it is too large
View File

2
dist/assets/css/style.min.css.map
File diff suppressed because it is too large
View File

BIN
dist/assets/images/common/detail-sns01.png
View File

Side by Side

After

Width: 62  |  Height: 62  |  Size: 2.2 KiB

BIN
dist/assets/images/common/detail-sns02.png
View File

Side by Side

After

Width: 62  |  Height: 62  |  Size: 2.3 KiB

BIN
dist/assets/images/common/detail-sns03.png
View File

Side by Side

After

Width: 62  |  Height: 62  |  Size: 3.0 KiB

BIN
dist/assets/images/common/detail-sns04.png
View File

Side by Side

After

Width: 62  |  Height: 62  |  Size: 2.4 KiB

2
dist/assets/js/common.min.js
View File

@ -1,2 +1,2 @@
$(function(){$('[data-button="toggle-menu"]').click(function(e){e.preventDefault(),$("#mobile-left-menu").toggleClass("opened")})});
$(function(){$('[data-button="toggle-menu"]').click(function(e){e.preventDefault(),$("#mobile-left-menu").toggleClass("opened")}),$('[data-button="share-sns"]').click(function(e){e.preventDefault(),console.log(1);var t=$(this).attr("data-type"),o=$(this).attr("data-image"),a=$(this).attr("data-title"),n=$(this).attr("data-url");if(n&&t&&a){if("kakaotalk"===t)return Kakao.init("3bec2345a029972a68f8279879478ba7"),void Kakao.Link.createDefaultButton({container:"#npsShKakaoTalk",objectType:"feed",content:{title:a,description:"출처 : 국민연금 온에어",imageUrl:o,imageWidth:620,imageHeight:350,link:{mobileWebUrl:document.URL,webUrl:document.URL}},buttons:[{title:"콘텐츠 보기",link:{mobileWebUrl:document.URL,webUrl:document.URL}}]});if("url"!==t){switch(t){case"twitter":n="//twitter.com/intent/tweet?text="+encodeURIComponent(a)+"&url="+encodeURIComponent(n);break;case"telegram":n="https://telegram.me/share/url?url="+encodeURIComponent(n);break;case"facebook":n="//www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(n)+"&t="+a;break;case"kakaostory":n="https://story.kakao.com/share?url="+encodeURIComponent(n);break;case"naverblog":n="http://share.naver.com/web/shareView.nhn?url="+encodeURIComponent(n)+"&title="+encodeURIComponent(a);break;case"naverband":n="http://www.band.us/plugin/share?body="+encodeURIComponent(a)+"%0A"+encodeURIComponent(n);break;case"google":n="//plus.google.com/share?url="+n;break;case"pinterest":n="//www.pinterest.com/pin/create/button/?url="+n+"&media="+o+"&description="+encodeURIComponent(a)}window.open(n,"","width=600,height=300,top=100,left=100,scrollbars=yes")}else{var r=$("<input>").attr("data-temp","clipboard");$("body").append(r),r.val(n).select(),$("#textbox-url").select();try{document.execCommand("copy");alert("클립보드에 주소가 복사되었습니다. Ctrl + V 로 붙여넣기 하세요."),r.remove()}catch(e){alert("이 브라우저는 지원하지 않습니다."),r.remove()}}}})});
//# sourceMappingURL=common.min.js.map

2
dist/assets/js/common.min.js.map
File diff suppressed because it is too large
View File

139
dist/clips.html → dist/clips/clips.html
View File

@ -5,9 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>영상갤러리 - 동영상</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="./assets/css/style.min.css?v=240805">
<link rel="stylesheet" href="..//assets/css/style.min.css?v=240805">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./assets/js/common.min.js"></script>
<script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<script src="..//assets/js/common.min.js"></script>
</head>
<body>
<!--S: 숨김 메뉴-->
@ -94,11 +95,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="./news.html">새소식</a></li>
<li><a href="../news/news.html">새소식</a></li>
<li><a href="">ESG</a></li>
<li><a href="">이벤트</a></li>
<li><a href="">대학생 홍보대사</a></li>
<li><a href="./toons.html">국민연금 인스타툰</a></li>
<li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -123,8 +124,8 @@
<li>
<a href="" class="depth-1">영상갤러리</a>
<ul class="sub-menu">
<li><a href="./clips.html">동영상</a></li>
<li><a href="./shorts.html">Shorts</a></li>
<li><a href="../clips/clips.html">동영상</a></li>
<li><a href="../shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -180,8 +181,8 @@
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="./">홈</a></li>
<li><a href="./clips.html">영상갤러리</a></li>
<li><a href="../index.html">홈</a></li>
<li><a href="../clips/clips.html">영상갤러리</a></li>
<li><span>동영상</span></li>
</ol>
</nav>
@ -199,13 +200,13 @@
</div>
<ul class="menu-list">
<li class="item ">
<a href="./news.html" class="link">국민연금 소식</a>
<a href="../news/news.html" class="link">국민연금 소식</a>
<ul class="submenu">
<li class=""><a href="./news.html">새소식</a></li>
<li><a href="./news.html">ESG</a></li>
<li><a href="./toons.html">이벤트</a></li>
<li><a href="./toons.html">대학생 홍보대사</a></li>
<li class=""><a href="./toons.html">국민연금 인스타툰</a></li>
<li class=""><a href="../news/news.html">새소식</a></li>
<li><a href="#">ESG</a></li>
<li><a href="#">이벤트</a></li>
<li><a href="#">대학생 홍보대사</a></li>
<li class=""><a href="../toons/toons.html">국민연금 인스타툰</a></li>
</ul>
</li>
<li class="item">
@ -215,10 +216,10 @@
<a href="#" class="link">국민연금 기금</a>
</li>
<li class="item last first active ">
<a href="./clips.html" class="link">영상갤러리</a>
<a href="../clips/clips.html" class="link">영상갤러리</a>
<ul class="submenu">
<li class="active"><a href="./clips.html">동영상</a></li>
<li class=""><a href="./shorts.html">Shorts</a></li>
<li class="active"><a href="../clips/clips.html">동영상</a></li>
<li class=""><a href="../shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -235,13 +236,13 @@
<div class="tag-container">
<h4 class="tag-title">모아보기</h4>
<ul class="tag-list">
<li class="active"><a href="">#콕콕연금뉴스</a></li>
<li><a href="">#연금이랑 알아볼게</a></li>
<li><a href="">#캠페인 영상</a></li>
<li><a href="">#광고</a></li>
<li><a href="">#연금연금</a></li>
<li><a href="">#연금연금</a></li>
<li><a href="">#연금연금</a></li>
<li class="active"><a href="detail.html">#콕콕연금뉴스</a></li>
<li><a href="detail.html">#연금이랑 알아볼게</a></li>
<li><a href="detail.html">#캠페인 영상</a></li>
<li><a href="detail.html">#광고</a></li>
<li><a href="detail.html">#연금연금</a></li>
<li><a href="detail.html">#연금연금</a></li>
<li><a href="detail.html">#연금연금</a></li>
</ul>
</div>
@ -250,17 +251,17 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-01.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-01.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">[콕콕 연금뉴스]</a>
<a href="detail.html">[콕콕 연금뉴스]</a>
</h4>
<p class="item-summary">
<a href="">2024년 4월,<br>1,103조 5천억원의 적립금...</a>
<a href="detail.html">2024년 4월,<br>1,103조 5천억원의 적립금...</a>
</p>
</div>
@ -269,17 +270,17 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-02.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-02.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">[콕콕 연금뉴스]</a>
<a href="detail.html">[콕콕 연금뉴스]</a>
</h4>
<p class="item-summary">
<a href="">국민연금, 2024년 1분기 말<br>
<a href="detail.html">국민연금, 2024년 1분기 말<br>
기준 5.82%의 운용수익률..</a>
</p>
</div>
@ -289,17 +290,17 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-03.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-03.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">[콕콕 연금뉴스]</a>
<a href="detail.html">[콕콕 연금뉴스]</a>
</h4>
<p class="item-summary">
<a href="">
<a href="detail.html">
국민연금 기준소득월액 <br>
변경!
</a>
@ -311,17 +312,17 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-04.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-04.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">[콕콕 연금뉴스]</a>
<a href="detail.html">[콕콕 연금뉴스]</a>
</h4>
<p class="item-summary">
<a href="">
<a href="detail.html">
실업크레딧을 통한 <br>가입기간 확대 지원
</a>
</p>
@ -332,14 +333,14 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-05.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-05.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">스톱모션으로 알아보는 <br>
<a href="detail.html">스톱모션으로 알아보는 <br>
국민연금 '크레딧 제도'</a>
</h4>
</div>
@ -349,14 +350,14 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-06.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-06.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">
<a href="detail.html">
⭐미션! 2023 국민연금<br>
레벨업⭐
</a>
@ -368,14 +369,14 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-07.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-07.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">
<a href="detail.html">
국민연금에 대한 진실<br>
파헤치기!
</a>
@ -387,19 +388,19 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-08.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-08.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">
<a href="detail.html">
[국민연금공단X큰별쌤..]
</a>
</h4>
<p class="item-summary">
<a href="">
<a href="detail.html">
조선시대에도 연금이 <br>
있었다?!
</a>
@ -411,19 +412,19 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-09.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-09.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">
<a href="detail.html">
[NPS 릴레이 브이로그(vlog)]
</a>
</h4>
<p class="item-summary">
<a href="">
<a href="detail.html">
인천국제공항에도 <br>
국민연금공단이!?
</a>
@ -435,19 +436,19 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-10.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-10.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">
<a href="detail.html">
국민연금 직장인 브이로그.
</a>
</h4>
<a href="" class="item-summary">
<a href="detail.html" class="item-summary">
오늘도 뽀주임은 열일 중 <br>
다시 돌아온 뽀주임의 다시 돌아온 뽀주임의
</a>
@ -460,18 +461,18 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-11.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-11.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">
<a href="detail.html">
[NPS 릴레이 브이로그(Vlog)]
</a>
</h4>
<a class="item-summary" href="">
<a class="item-summary" href="detail.html">
국민연금공단
장애인지원센터는 무슨 일이?
</a>
@ -482,18 +483,18 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-12.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-12.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">
<a href="detail.html">
[NPS 릴레이 브이로그(Vlog)]
</a>
</h4>
<a class="item-summary" href="">
<a class="item-summary" href="detail.html">
국민연금공단
장애인지원센터는 무슨 일
</a>

525
dist/clips/detail.html
File diff suppressed because it is too large
View File

27
dist/index.html
View File

@ -7,6 +7,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="./assets/css/style.min.css?v=240805">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<script src="./assets/js/common.min.js"></script>
</head>
<body>
@ -94,11 +95,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="./news.html">새소식</a></li>
<li><a href="../news/news.html">새소식</a></li>
<li><a href="">ESG</a></li>
<li><a href="">이벤트</a></li>
<li><a href="">대학생 홍보대사</a></li>
<li><a href="./toons.html">국민연금 인스타툰</a></li>
<li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -123,8 +124,8 @@
<li>
<a href="" class="depth-1">영상갤러리</a>
<ul class="sub-menu">
<li><a href="./clips.html">동영상</a></li>
<li><a href="./shorts.html">Shorts</a></li>
<li><a href="../clips/clips.html">동영상</a></li>
<li><a href="../shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -192,13 +193,13 @@
</div>
<ul class="menu-list">
<li class="item ">
<a href="./news.html" class="link">국민연금 소식</a>
<a href="../news/news.html" class="link">국민연금 소식</a>
<ul class="submenu">
<li class=""><a href="./news.html">새소식</a></li>
<li><a href="./news.html">ESG</a></li>
<li><a href="./toons.html">이벤트</a></li>
<li><a href="./toons.html">대학생 홍보대사</a></li>
<li class=""><a href="./toons.html">국민연금 인스타툰</a></li>
<li class=""><a href="../news/news.html">새소식</a></li>
<li><a href="#">ESG</a></li>
<li><a href="#">이벤트</a></li>
<li><a href="#">대학생 홍보대사</a></li>
<li class=""><a href="../toons/toons.html">국민연금 인스타툰</a></li>
</ul>
</li>
<li class="item">
@ -208,10 +209,10 @@
<a href="#" class="link">국민연금 기금</a>
</li>
<li class="item last ">
<a href="./clips.html" class="link">영상갤러리</a>
<a href="../clips/clips.html" class="link">영상갤러리</a>
<ul class="submenu">
<li class=""><a href="./clips.html">동영상</a></li>
<li class=""><a href="./shorts.html">Shorts</a></li>
<li class=""><a href="../clips/clips.html">동영상</a></li>
<li class=""><a href="../shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>

1644
dist/news/detail.html
File diff suppressed because it is too large
View File

69
dist/news.html → dist/news/news.html
View File

@ -5,9 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>국민염금 소식 - 새 소식</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="./assets/css/style.min.css?v=240805">
<link rel="stylesheet" href="..//assets/css/style.min.css?v=240805">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./assets/js/common.min.js"></script>
<script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<script src="..//assets/js/common.min.js"></script>
</head>
<body>
<!--S: 숨김 메뉴-->
@ -94,11 +95,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="./news.html">새소식</a></li>
<li><a href="../news/news.html">새소식</a></li>
<li><a href="">ESG</a></li>
<li><a href="">이벤트</a></li>
<li><a href="">대학생 홍보대사</a></li>
<li><a href="./toons.html">국민연금 인스타툰</a></li>
<li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -123,8 +124,8 @@
<li>
<a href="" class="depth-1">영상갤러리</a>
<ul class="sub-menu">
<li><a href="./clips.html">동영상</a></li>
<li><a href="./shorts.html">Shorts</a></li>
<li><a href="../clips/clips.html">동영상</a></li>
<li><a href="../shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -180,9 +181,9 @@
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="./">홈</a></li>
<li><a href="./news.html">국민연금 소식</a></li>
<li><span>새 소식</span></li>
<li><a href="../index.html">홈</a></li>
<li><a href="../news/news.html">국민연금 소식</a></li>
<li><span>새소식</span></li>
</ol>
</nav>
</div>
@ -199,13 +200,13 @@
</div>
<ul class="menu-list">
<li class="item first active ">
<a href="./news.html" class="link">국민연금 소식</a>
<a href="../news/news.html" class="link">국민연금 소식</a>
<ul class="submenu">
<li class="active"><a href="./news.html">새소식</a></li>
<li><a href="./news.html">ESG</a></li>
<li><a href="./toons.html">이벤트</a></li>
<li><a href="./toons.html">대학생 홍보대사</a></li>
<li class=""><a href="./toons.html">국민연금 인스타툰</a></li>
<li class="active"><a href="../news/news.html">새소식</a></li>
<li><a href="#">ESG</a></li>
<li><a href="#">이벤트</a></li>
<li><a href="#">대학생 홍보대사</a></li>
<li class=""><a href="../toons/toons.html">국민연금 인스타툰</a></li>
</ul>
</li>
<li class="item">
@ -215,10 +216,10 @@
<a href="#" class="link">국민연금 기금</a>
</li>
<li class="item last ">
<a href="./clips.html" class="link">영상갤러리</a>
<a href="../clips/clips.html" class="link">영상갤러리</a>
<ul class="submenu">
<li class=""><a href="./clips.html">동영상</a></li>
<li class=""><a href="./shorts.html">Shorts</a></li>
<li class=""><a href="../clips/clips.html">동영상</a></li>
<li class=""><a href="../shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -236,14 +237,14 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/news-01.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/news-01.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">[채용공고] 국민연금공단 기금운용본부 자산운용전문가 모집!</a>
<a href="detail.html">[채용공고] 국민연금공단 기금운용본부 자산운용전문가 모집!</a>
</h4>
<p class="item-summary">
(지원서 접수기간: 6/28~7/12) 국민연금공단 금운용본부자산운용전문가 모집!<br>자산운용 중심 금융혁신도시 전주에 위치한 국민연금 기금운용본부에서기금 1,000조 원 시대를 함께할 최고의 역량을 갖춘 자산운용전문가를 모집합니다
@ -261,14 +262,14 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/news-02.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/news-02.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">[7월 달력이미지무료배포]해변에서 휴양을 즐기는 국민연금공단</a>
<a href="detail.html">[7월 달력이미지무료배포]해변에서 휴양을 즐기는 국민연금공단</a>
</h4>
<p class="item-summary">
배경화면 다운로드, 달력 배경화면, 7월 달력 이미지, PC배경화면, 스마트폰 배경화면 무더운 여름, 바다로 피서를 떠난 국민연금 3인방수영도 하고 수박도 먹으며 즐거운 시간을 보내고 있네요!국민연금공단 3인방과 함께 7월도 행복하게 보내세요
@ -286,14 +287,14 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/news-03.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/news-03.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">제16기 국민연금 대학생 홍보대사팀을 추가 모집합니다!</a>
<a href="detail.html">제16기 국민연금 대학생 홍보대사팀을 추가 모집합니다!</a>
</h4>
<p class="item-summary">
"제16기 국민연금 대학생 홍보대사팀을 추가 모집합니다!" 국민연금 대학생 홍보대사팀 ‘영금이’란?국민연금 대학생 홍보대사팀 ‘영금이’는 연금이와 Young의 합성어로, 다소 어렵고 생소한 국민연금제도를 대학생들의 통통 튀는 아이디어로 보다 쉽게
@ -311,14 +312,14 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/news-04.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/news-04.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">[6월 달력 이미지 무료배포] 캠핑을 떠난 국민연금공단 3인방</a>
<a href="detail.html">[6월 달력 이미지 무료배포] 캠핑을 떠난 국민연금공단 3인방</a>
</h4>
<p class="item-summary">
배경화면 다운로드, 달력 배경화면, 6월 달력 이미지, PC배경화면, 스마트폰 배경화면6월을 맞이해 연대리, 금주임, 연부장이 캠핑을 떠났답니다.국민연금공단 3인방의 즐거운 추억이 담긴 6월 달력, 지금 만나보세요....
@ -336,14 +337,14 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/news-05.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/news-05.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">[5월 달력 이미지 무료배포] 5월에는 역시 놀이공원 나들이</a>
<a href="detail.html">[5월 달력 이미지 무료배포] 5월에는 역시 놀이공원 나들이</a>
</h4>
<p class="item-summary">
가족과 함께하는 행복한 5월입니다.5월을 기념해 놀이공원 나들이를 즐기는 3인방!화면 가득 펼쳐진 동심의 세계를 5월 달력에서 만나보세요!(고화질 이미지는 아래의 첨부파일로 다운하실 수 있습니다.)PC와 모바일 버전이 모두 제작되었으니...
@ -358,8 +359,6 @@
</li>
</ul>
</div>

490
dist/shorts/detail.html
File diff suppressed because it is too large
View File

107
dist/shorts.html → dist/shorts/shorts.html
View File

@ -5,9 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>영상갤러리 - Shorts</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="./assets/css/style.min.css?v=240805">
<link rel="stylesheet" href="..//assets/css/style.min.css?v=240805">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./assets/js/common.min.js"></script>
<script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<script src="..//assets/js/common.min.js"></script>
</head>
<body>
<!--S: 숨김 메뉴-->
@ -94,11 +95,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="./news.html">새소식</a></li>
<li><a href="../news/news.html">새소식</a></li>
<li><a href="">ESG</a></li>
<li><a href="">이벤트</a></li>
<li><a href="">대학생 홍보대사</a></li>
<li><a href="./toons.html">국민연금 인스타툰</a></li>
<li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -123,8 +124,8 @@
<li>
<a href="" class="depth-1">영상갤러리</a>
<ul class="sub-menu">
<li><a href="./clips.html">동영상</a></li>
<li><a href="./shorts.html">Shorts</a></li>
<li><a href="../clips/clips.html">동영상</a></li>
<li><a href="../shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -180,8 +181,8 @@
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="./">홈</a></li>
<li><a href="./clips.html">영상갤러리</a></li>
<li><a href="detail.html">홈</a></li>
<li><a href="../clips/clips.html">영상갤러리</a></li>
<li><span>Shorts</span></li>
</ol>
</nav>
@ -199,13 +200,13 @@
</div>
<ul class="menu-list">
<li class="item ">
<a href="./news.html" class="link">국민연금 소식</a>
<a href="../news/news.html" class="link">국민연금 소식</a>
<ul class="submenu">
<li class=""><a href="./news.html">새소식</a></li>
<li><a href="./news.html">ESG</a></li>
<li><a href="./toons.html">이벤트</a></li>
<li><a href="./toons.html">대학생 홍보대사</a></li>
<li class=""><a href="./toons.html">국민연금 인스타툰</a></li>
<li class=""><a href="../news/news.html">새소식</a></li>
<li><a href="#">ESG</a></li>
<li><a href="#">이벤트</a></li>
<li><a href="#">대학생 홍보대사</a></li>
<li class=""><a href="../toons/toons.html">국민연금 인스타툰</a></li>
</ul>
</li>
<li class="item">
@ -215,10 +216,10 @@
<a href="#" class="link">국민연금 기금</a>
</li>
<li class="item last first active ">
<a href="./clips.html" class="link">영상갤러리</a>
<a href="../clips/clips.html" class="link">영상갤러리</a>
<ul class="submenu">
<li class=""><a href="./clips.html">동영상</a></li>
<li class="active"><a href="./shorts.html">Shorts</a></li>
<li class=""><a href="../clips/clips.html">동영상</a></li>
<li class="active"><a href="../shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -235,26 +236,26 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-01.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-01.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금, 내고 싶은 사람만 내면 안되나요?</a>
<a href="detail.html">국민연금, 내고 싶은 사람만 내면 안되나요?</a>
</h4>
</div>
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-02.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-02.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금은 도대체 왜?
<a href="detail.html">국민연금은 도대체 왜?
국가에서 운영하는거죠?</a>
</h4>
</div>
@ -262,13 +263,13 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-03.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-03.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금공단 쉽게
<a href="detail.html">국민연금공단 쉽게
취업하는 꿀팁?! </a>
</h4>
</div>
@ -276,13 +277,13 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-04.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-04.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 3인방의
<a href="detail.html">국민연금 3인방의
🏠 Home🏠 댄스챌린지</a>
</h4>
</div>
@ -290,13 +291,13 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-05.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-05.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">199X년생부터 국민연금
<a href="detail.html">199X년생부터 국민연금
을 하나도 못 받는다고?!</a>
</h4>
</div>
@ -304,13 +305,13 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-06.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-06.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">유럽 vs 우리나라
<a href="detail.html">유럽 vs 우리나라
국민연금 급여 차이는?</a>
</h4>
</div>
@ -318,13 +319,13 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-07.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-07.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 기금수익률을
<a href="detail.html">국민연금 기금수익률을
더 높일 수 있는 방법은? </a>
</h4>
</div>
@ -332,13 +333,13 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-08.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-08.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 기금투자
<a href="detail.html">국민연금 기금투자
믿을 수 있나요? </a>
</h4>
</div>
@ -346,13 +347,13 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-09.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-09.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 3인방의
<a href="detail.html">국민연금 3인방의
💝사랑스러워 💝챌린지 </a>
</h4>
</div>
@ -360,13 +361,13 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-10.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-10.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금! 부부 모두
<a href="detail.html">국민연금! 부부 모두
가입하면? #Shorts
</a>
</h4>
@ -375,13 +376,13 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-11.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-11.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 3인방의
<a href="detail.html">국민연금 3인방의
🥰날 바라바라봐🥰 챌린지
</a>
</h4>
@ -390,13 +391,13 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-12.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-12.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 걱정🥰...은
<a href="detail.html">국민연금 걱정🥰...은
No!2023년 말 기준
</a>
</h4>

486
dist/toons/detail.html
View File

@ -0,0 +1,486 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>국민염금 소식 - 국민연금 인스타 툰 상세</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="..//assets/css/style.min.css?v=240805">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<script src="..//assets/js/common.min.js"></script>
</head>
<body>
<!--S: 숨김 메뉴-->
<ul class="sr-only sr-only-focusable">
<li><a href="#contents">컨텐츠 바로가기</a></li>
<li><a href="#nav">메뉴 바로가기</a></li>
</ul>
<!--E: 숨김 메뉴-->
<!--S: 헤더 영역-->
<header id="header">
<div class="container">
<div class="logo-box">
<svg id="logo" viewBox="0 0 309.14 49.01">
<defs>
<linearGradient id="linear-gradient" x1="-1641.66" y1="-1552.09" x2="-1727.37" y2="-1520.89" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bfd72f"/>
<stop offset=".1" stop-color="#aed331"/>
<stop offset=".29" stop-color="#84ca38"/>
<stop offset=".55" stop-color="#40bc42"/>
<stop offset=".74" stop-color="#0ab14b"/>
<stop offset="1" stop-color="#007f49"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="-1697.8" y1="-1521.42" x2="-1783.38" y2="-1552.57" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffcb02"/>
<stop offset=".09" stop-color="#fdc105"/>
<stop offset=".49" stop-color="#f89a13"/>
<stop offset=".8" stop-color="#f5811b"/>
<stop offset="1" stop-color="#f4791f"/>
</linearGradient>
</defs>
<g>
<path d="M149.14.83h-23.48v3.09h20.8v7.32h-21.15v3.09h10.19v3.04h-10.19v3.1h21.15v6.88h5.13v-7.53c0-1.35-1.1-2.46-2.45-2.46h-8.51v-3.04h10.96V3.27c0-1.35-1.1-2.44-2.45-2.44Z" style="fill: #52565b; stroke-width: 0px;"/>
<g>
<rect x="177.3" y=".83" width="5.13" height="14.1" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M161.65,17.45h-5.13v7.45c0,1.35,1.09,2.45,2.44,2.45h23.47v-3.09h-20.79v-6.81Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M171.1,14.93c1.35,0,2.45-1.09,2.45-2.45V.83h-17.4v11.65c0,1.35,1.09,2.45,2.44,2.45h12.51ZM161.27,3.92h7.13v7.92h-7.13V3.92Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
<g>
<path d="M218.12,17.39v7.51c0,1.36,1.1,2.45,2.45,2.45h21.03c1.35,0,2.44-1.09,2.44-2.45v-7.51h-25.92ZM238.91,24.26h-15.65v-3.77h15.65v3.77Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M241.6.83h-23.48v3.09h20.79v7.32h-21.16v3.09h26.29V3.27c0-1.35-1.09-2.44-2.44-2.44Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
<g>
<path d="M208.41.83v2.44h-5.9c-1.65-1.98-4.34-3.27-7.4-3.27-5.01,0-9.07,3.46-9.07,7.74s4.06,7.73,9.07,7.73c3.09,0,5.82-1.33,7.46-3.34h5.84v2.81h5.13V.83h-5.13ZM195.11,12.26c-2.17,0-3.93-2.03-3.93-4.53s1.75-4.54,3.93-4.54,3.93,2.04,3.93,4.54-1.76,4.53-3.93,4.53ZM208.41,9.04h-4.37c.09-.43.14-.86.14-1.3,0-.47-.06-.93-.15-1.38h4.38v2.68Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M192.75,17.45h-5.14v7.45c0,1.35,1.1,2.45,2.45,2.45h23.48v-3.09h-20.79v-6.81Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
<g>
<path d="M285.25,17.37h-5.13v7.55c0,1.35,1.09,2.45,2.45,2.45h23.47v-3.09h-20.79v-6.91Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M306.05,5.53V.83h-5.14v11.01h-16.03V3.92h11.12V.83h-16.27v11.65c0,1.35,1.1,2.45,2.45,2.45h23.86v-6.31h3.1v-3.09h-3.1Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
<g>
<path d="M275.39,3.27c0-1.35-1.09-2.44-2.45-2.44h-23.48v3.09h20.79v7.32h-6.98v-3.69h-5.14v3.69h-9.04v3.09h26.29V3.27Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M262.21,16.37c-8.67,0-13.44,2.63-13.44,5.88s4.77,5.87,13.44,5.87,13.44-2.63,13.44-5.87-4.77-5.88-13.44-5.88ZM262.21,25.32c-4.23,0-7.66-1.38-7.66-3.07s3.43-3.09,7.66-3.09,7.67,1.38,7.67,3.09-3.43,3.07-7.67,3.07Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
</g>
<g>
<path d="M37.62,48.15c26.36.59,39.31-22.89,40.29-24.32.97-1.42,2.09-1.22,2.66-1.22h10.5s-14.93,30.54-53.45,25.92c-.32-.04-.36-.4,0-.38Z" style="fill: url(#linear-gradient); stroke-width: 0px;"/>
<path d="M68.21,25.3c0,1.13-.92,2.05-2.05,2.05h-3.91V5.24c0-3.53,1.45-4.88,4.86-4.88h12.38c3.32,0,5.74.65,7.26,1.98,1.52,1.33,2.29,3.44,2.29,6.32v1.02c0,2.88-.76,4.74-2.29,6.07-1.52,1.33-3.94,1.99-7.26,2h-9.18s1.5-4.76,6.86-4.76h2.04c1.29,0,2.19-.27,2.82-.82.72-.62,1.06-1.95,1.06-3.21s-.38-2.3-1.14-2.91c-.77-.61-1.58-.92-3.22-.92h-.04s-7.45,0-7.45,0c-2.35,0-3.04,1.03-3.04,3.04v17.13Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M93.65,22.6c-1.13,0-2.05.92-2.05,2.05v2.7h15.76c3.28,0,5.69-.65,7.21-1.96,1.53-1.31,2.3-3.26,2.3-6.06s-.66-4.73-1.99-5.91c-1.32-1.18-3.55-1.77-6.69-1.77h-6.81c-1.2,0-2.37-.25-2.98-.74-.61-.49-1.24-1.29-1.24-2.22,0-1.23.35-2.13,1.06-2.7.71-.57,1.47-.87,2.99-.87h12.29c1.13,0,2.05-.92,2.05-2.05V.36h-14.82c-3.32,0-5.73.67-7.26,2-1.52,1.33-2.29,3.35-2.29,6.23,0,2.7.73,4.67,2.17,5.93,1.45,1.25,3.74,1.88,6.87,1.88h6.6c1.48,0,2.52.24,3.13.72.61.48.92,1.29.92,2.42s-.33,1.88-1,2.35c-.66.47-1.81.71-3.44.71h-12.81Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M54.96.36c-1.13,0-2.05.92-2.05,2.05v16.92L41.27,2.27c-.72-1.25-1.66-1.91-2.88-1.91h-6.18v26.98h3.91c1.13,0,2.05-.92,2.05-2.05V7.63h0s12.22,17.81,12.22,17.81c0,0,1.18,1.9,3.01,1.9h5.46V.36h-3.91Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M0,22.62h10.85c1.39,0,1.97.8,2.54,1.71,16.52,25.99,41.83,18.65,41.83,18.65.31-.09.4.17.11.28,0,0-11.33,5.26-24.56,2.68-13.22-2.57-24.34-12.17-30.77-23.32Z" style="fill: url(#linear-gradient-2); stroke-width: 0px;"/>
</g>
</svg>
<a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
</div>
</div>
</header>
<!--E: 헤더 영역-->
<header class="mobile-header">
<button class="m-button toggle-menu" type="button" data-button="toggle-menu">메뉴 토글</button>
<a href="/" class="mobile-logo">국민연금 ON AIR</a>
<button class="m-button toggle-search" type="button" id="toggle-search">검색 메뉴 토글</button>
</header>
<aside id="mobile-left-menu">
<header class="mobile-header">
<span class="m-button"></span>
<a href="/" class="mobile-logo">국민연금 ON AIR</a>
<button class="m-button close-menu" type="button" data-button="toggle-menu">검색 메뉴 토글</button>
</header>
<nav class="mobile-nav">
<ul>
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="../news/news.html">새소식</a></li>
<li><a href="">ESG</a></li>
<li><a href="">이벤트</a></li>
<li><a href="">대학생 홍보대사</a></li>
<li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
<li>
<a href="" class="depth-1">국민연금 제도</a>
<ul class="sub-menu">
<li><a href="">제도 정보</a></li>
<li><a href="">NPS 팩트체크</a></li>
<li><a href="">연금 개혁</a></li>
<li><a href="">국민연금 용어사전</a></li>
<li><a href="">전문가 시선</a></li>
</ul>
</li>
<li>
<a href="" class="depth-1">국민연금 기금</a>
<ul class="sub-menu">
<li><a href="">기금운용 현황</a></li>
<li><a href="">기금운용 이슈</a></li>
<li><a href="">전문가 시선</a></li>
</ul>
</li>
<li>
<a href="" class="depth-1">영상갤러리</a>
<ul class="sub-menu">
<li><a href="../clips/clips.html">동영상</a></li>
<li><a href="../shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
<a href="#" target="_blank" class="btn-more">내 연금 알아보기</a>
</nav>
</aside>
<script>
const mainMenuLinks = document.querySelectorAll('.depth-1');
mainMenuLinks.forEach(link => {
link.addEventListener('click', function(event) {
event.preventDefault(); // Prevent the default link behavior
// Close all other sub-menus
mainMenuLinks.forEach(otherLink => {
if (otherLink !== link) {
const otherSubMenu = otherLink.nextElementSibling;
otherSubMenu.classList.remove('open');
otherLink.classList.remove('active');
}
});
// Toggle the clicked sub-menu
const subMenu = this.nextElementSibling; // Get the next sibling element (the sub-menu)
if (!subMenu.classList.contains('open')) {
subMenu.classList.add('open');
this.classList.add('active');
} else {
subMenu.classList.remove('open');
this.classList.remove('active');
}
});
});
document.addEventListener('DOMContentLoaded', function() {
const toggleButton = document.getElementById('toggle-search');
const form = document.querySelector('.search-box');
toggleButton.addEventListener('click', function() {
form.classList.toggle('open');
});
});
</script>
<!--S: 컨텐츠 영역-->
<section id="contents">
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="">홈</a></li>
<li><a href="../news/news.html">국민연금 소식</a></li>
<li><span>국민연금 인스타 툰</span></li>
</ol>
</nav>
</div>
<div class="sub-main container" id="board">
<aside class="left-nav">
<div class="search-box">
<a href="#" class="link">국민연금 ON AIR</a>
<form class="search-form">
<input type="text" class="input"/>
<button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
</form>
</div>
<ul class="menu-list">
<li class="item first active ">
<a href="../news/news.html" class="link">국민연금 소식</a>
<ul class="submenu">
<li class=""><a href="../news/news.html">새소식</a></li>
<li><a href="#">ESG</a></li>
<li><a href="#">이벤트</a></li>
<li><a href="#">대학생 홍보대사</a></li>
<li class="active"><a href="../toons/toons.html">국민연금 인스타툰</a></li>
</ul>
</li>
<li class="item">
<a href="#" class="link">국민연금 제도</a>
</li>
<li class="item">
<a href="#" class="link">국민연금 기금</a>
</li>
<li class="item last ">
<a href="../clips/clips.html" class="link">영상갤러리</a>
<ul class="submenu">
<li class=""><a href="../clips/clips.html">동영상</a></li>
<li class=""><a href="../shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
</aside>
<main class="page-contents">
<div class="contents-header">
<header class="page-header">
<h2 class="contents-title">신입사원의 귀여운 실수?</h2>
</header>
<div class="page-header-info">
<dl class="date">
<dt class="sr-only">게시글 날짜</dt>
<dd>24-08-02</dd>
</dl>
<div class="list-detail-sns">
<a href="javascript:;" data-button="share-sns" data-type="facebook" data-url="http://www.naver.com" class="sns-facebook" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" target="_self">페이스북</a>
<a href="javascript:;" data-button="share-sns" data-type="twitter" data-url="http://www.naver.com" class="sns-twitter" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." data-image="" data-description="&nbsp;" target="_self">트위터</a>
<a href="javascript:;" id="npsShKakaoTalk" data-button="share-sns" data-type="kakaotalk" data-url="http://www.naver.com" class="sns-kakaotalk" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" data-description="&nbsp;" target="_self">카카오톡</a>
<a href="javascript:;" data-button="share-sns" data-type="url" data-url="http://www.naver.com" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." class="url-copy" target="_self">URL 복사</a>
</div>
</div>
</div>
<div class="detail-contents">
<p>
<img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4Rm4lMjhHOCVEQkklOUIlRkQlM0YlOEQlQTYlRTMlOTQ=" title="연대리(2024.8월) #1-1.JPG"><br style="clear:both;">
<img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4Rm4rRiUzQyVEQU0lOTQlRkQxJThEJUE2JUUzJTk0" title="연대리(2024.8월) #1-2.JPG"><br style="clear:both;">
<img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4OG0rTSUzRiVEQk8lOUMlRjklMjYlQzklQkMlRjQ=" title="연대리(2024.8월) #1-3.JPG"><br style="clear:both;">
<img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4RmklMkJINiVEOSU0MCU5OCVGODglOEQlQTYlRTMlOTQ=" title="연대리(2024.8월) #1-4.JPG" ><br style="clear:both;">
<img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4RGslMjlGJTNCJUQ3QSU5RiVGNyUyNiVDOSVCQyVGNA==" title="연대리(2024.8월) #1-5.JPG" ><br style="clear:both;">
<img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4RmguTCUzQSVEQk8lOTUlRkMlMjYlQzklQkMlRjQ=" title="연대리(2024.8월) #1-6.JPG" sqeid="QE_172250019336033366"><br style="clear:both;">
<img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4Q24lMjhGJTNCJURDTCU5RCVGQSUzQSU4RCVBNiVFMyU5NA==" title="연대리(2024.8월) #1-7.JPG" sqeid="QE_17225001958714117"><br style="clear:both;">
<img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4RmolMjhGJTNFJUQ2TSU5OSVGOTklOEQlQTYlRTMlOTQ=" title="연대리(2024.8월) #1-8.JPG" sqeid="QE_172250019868746529"><br style="clear:both;">
<img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4RmYrTCUzRiVEOE4lOTklRkE4JThEJUE2JUUzJTk0" title="연대리(2024.8월) #1-9.JPG" sqeid="QE_172250020124052912"><br style="clear:both;">
<img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4Rm0lMkJJOCVEN0ElOUYlRjklM0MlOEQlQTYlRTMlOTQ=" title="연대리(2024.8월) #1-10.JPG" sqeid="QE_172250020476850890"><br style="clear:both;">&nbsp;
</p>
<ul class="hash-tag">
<li>국민연금</li>
<li>국민연금공단</li>
<li>사연툰</li>
<li>일상툰</li>
<li>연대리툰</li>
</ul>
</div>
<div class="page-list">
<h3 class="title">더 많은 [국민연금 인스타툰] 보기</h3>
<ul class="common-list toons inner">
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="../assets/images/ex/toon-01.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
</h4>
</div>
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="../assets/images/ex/toon-02.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
</h4>
</div>
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="../assets/images/ex/toon-03.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
</h4>
</div>
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="../assets/images/ex/toon-04.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
</h4>
</div>
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="../assets/images/ex/toon-05.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
</h4>
</div>
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="../assets/images/ex/toon-06.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
</h4>
</div>
</li>
</ul>
</div>
<div class="form-content-wrap">
<h5 class="form-title">콘텐츠 품질 향상을 위해<br> 이해도와 만족도 조사를 실시하고 있습니다.</h5>
<!-- 폼 1 시작 -->
<div class="form">
<!-- 만족도 시작 -->
<div class="form-content-box">
<div class="form-box">
<h6 class="question-title">현재 콘텐츠의 내용과 설명에 대해 만족하십니까?</h6>
<div class="form-radio-box">
<div class="radio-item"><input type="radio" id="radio01-01" name="radio01" value="5"><label for="radio01-01">매우만족</label></div>
<div class="radio-item"><input type="radio" id="radio01-02" name="radio01" value="4"><label for="radio01-02">만족</label></div>
<div class="radio-item"><input type="radio" id="radio01-03" name="radio01" value="3"><label for="radio01-03">보통</label></div>
<div class="radio-item"><input type="radio" id="radio01-04" name="radio01" value="2"><label for="radio01-04">불만족</label></div>
<div class="radio-item"><input type="radio" id="radio01-05" name="radio01" value="1"><label for="radio01-05">매우불만족</label></div>
</div>
</div>
<div class="form-box">
<h6 class="question-title">이 페이지에서 제공하는 콘텐츠가 얼마나 이해되십니까?</h6>
<div class="form-radio-box">
<div class="radio-item"><input type="radio" id="radio02-01" name="radio02" value="5"><label for="radio02-01">매우만족</label></div>
<div class="radio-item"><input type="radio" id="radio02-02" name="radio02" value="4"><label for="radio02-02">만족</label></div>
<div class="radio-item"><input type="radio" id="radio02-03" name="radio02" value="3"><label for="radio02-03">보통</label></div>
<div class="radio-item"><input type="radio" id="radio02-04" name="radio02" value="2"><label for="radio02-04">불만족</label></div>
<div class="radio-item"><input type="radio" id="radio02-05" name="radio02" value="1"><label for="radio02-05">매우불만족</label></div>
</div>
</div>
</div>
<button class="form-btn">확인</button>
<!-- 만족도 끝 -->
</div>
<!-- 폼 1 끝 -->
<!-- 폼 2 시작 -->
<div class="form-02 cf">
<!-- 만족도 시작 -->
<div class="form-content-box cf" style="border:0; padding-bottom:0;">
<div class="form-box">
<h5 class="question-title">콘텐츠에 대한 자유로운 의견을 남겨주세요.</h5>
<div class="form-radio-box other">
<textarea placeholder="보내주신 의견은 검토하여 콘텐츠 제작에 반영할 예정입니다.(200자 이내) " name="strSurveyText" id="strSurveyText" onkeyup="fncChkByte(this,400)"></textarea>
</div>
<div class="textarea-num">
<span id="byteInfo">0</span>
/ 400
<span>byte</span>
</div>
</div>
</div>
<!-- 만족도 끝 -->
<button class="form-btn">확인</button>
</div>
<!-- 폼 2 끝 -->
</div>
<a href="toons.html" class="btn-list-prev">목록으로</a>
</main>
</div>
</section>
<!--E: 컨텐츠 영역-->
<!--S: 푸터 영역-->
<footer id="footer">
<div class="logo-box">
<svg id="logo" viewBox="0 0 309.14 49.01" xml:space="preserve">
<defs>
<linearGradient id="linear-gradient" x1="-1641.66" y1="-1552.09" x2="-1727.37" y2="-1520.89" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bfd72f"/>
<stop offset=".1" stop-color="#aed331"/>
<stop offset=".29" stop-color="#84ca38"/>
<stop offset=".55" stop-color="#40bc42"/>
<stop offset=".74" stop-color="#0ab14b"/>
<stop offset="1" stop-color="#007f49"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="-1697.8" y1="-1521.42" x2="-1783.38" y2="-1552.57" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffcb02"/>
<stop offset=".09" stop-color="#fdc105"/>
<stop offset=".49" stop-color="#f89a13"/>
<stop offset=".8" stop-color="#f5811b"/>
<stop offset="1" stop-color="#f4791f"/>
</linearGradient>
</defs>
<g>
<path d="M149.14.83h-23.48v3.09h20.8v7.32h-21.15v3.09h10.19v3.04h-10.19v3.1h21.15v6.88h5.13v-7.53c0-1.35-1.1-2.46-2.45-2.46h-8.51v-3.04h10.96V3.27c0-1.35-1.1-2.44-2.45-2.44Z" style="fill: #fff; stroke-width: 0px;"/>
<g>
<rect x="177.3" y=".83" width="5.13" height="14.1" style="fill: #fff; stroke-width: 0px;"/>
<path d="M161.65,17.45h-5.13v7.45c0,1.35,1.09,2.45,2.44,2.45h23.47v-3.09h-20.79v-6.81Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M171.1,14.93c1.35,0,2.45-1.09,2.45-2.45V.83h-17.4v11.65c0,1.35,1.09,2.45,2.44,2.45h12.51ZM161.27,3.92h7.13v7.92h-7.13V3.92Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
<g>
<path d="M218.12,17.39v7.51c0,1.36,1.1,2.45,2.45,2.45h21.03c1.35,0,2.44-1.09,2.44-2.45v-7.51h-25.92ZM238.91,24.26h-15.65v-3.77h15.65v3.77Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M241.6.83h-23.48v3.09h20.79v7.32h-21.16v3.09h26.29V3.27c0-1.35-1.09-2.44-2.44-2.44Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
<g>
<path d="M208.41.83v2.44h-5.9c-1.65-1.98-4.34-3.27-7.4-3.27-5.01,0-9.07,3.46-9.07,7.74s4.06,7.73,9.07,7.73c3.09,0,5.82-1.33,7.46-3.34h5.84v2.81h5.13V.83h-5.13ZM195.11,12.26c-2.17,0-3.93-2.03-3.93-4.53s1.75-4.54,3.93-4.54,3.93,2.04,3.93,4.54-1.76,4.53-3.93,4.53ZM208.41,9.04h-4.37c.09-.43.14-.86.14-1.3,0-.47-.06-.93-.15-1.38h4.38v2.68Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M192.75,17.45h-5.14v7.45c0,1.35,1.1,2.45,2.45,2.45h23.48v-3.09h-20.79v-6.81Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
<g>
<path d="M285.25,17.37h-5.13v7.55c0,1.35,1.09,2.45,2.45,2.45h23.47v-3.09h-20.79v-6.91Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M306.05,5.53V.83h-5.14v11.01h-16.03V3.92h11.12V.83h-16.27v11.65c0,1.35,1.1,2.45,2.45,2.45h23.86v-6.31h3.1v-3.09h-3.1Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
<g>
<path d="M275.39,3.27c0-1.35-1.09-2.44-2.45-2.44h-23.48v3.09h20.79v7.32h-6.98v-3.69h-5.14v3.69h-9.04v3.09h26.29V3.27Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M262.21,16.37c-8.67,0-13.44,2.63-13.44,5.88s4.77,5.87,13.44,5.87,13.44-2.63,13.44-5.87-4.77-5.88-13.44-5.88ZM262.21,25.32c-4.23,0-7.66-1.38-7.66-3.07s3.43-3.09,7.66-3.09,7.67,1.38,7.67,3.09-3.43,3.07-7.67,3.07Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
</g>
<g>
<path d="M37.62,48.15c26.36.59,39.31-22.89,40.29-24.32.97-1.42,2.09-1.22,2.66-1.22h10.5s-14.93,30.54-53.45,25.92c-.32-.04-.36-.4,0-.38Z" style="fill: url(#linear-gradient); stroke-width: 0px;"/>
<path d="M68.21,25.3c0,1.13-.92,2.05-2.05,2.05h-3.91V5.24c0-3.53,1.45-4.88,4.86-4.88h12.38c3.32,0,5.74.65,7.26,1.98,1.52,1.33,2.29,3.44,2.29,6.32v1.02c0,2.88-.76,4.74-2.29,6.07-1.52,1.33-3.94,1.99-7.26,2h-9.18s1.5-4.76,6.86-4.76h2.04c1.29,0,2.19-.27,2.82-.82.72-.62,1.06-1.95,1.06-3.21s-.38-2.3-1.14-2.91c-.77-.61-1.58-.92-3.22-.92h-.04s-7.45,0-7.45,0c-2.35,0-3.04,1.03-3.04,3.04v17.13Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M93.65,22.6c-1.13,0-2.05.92-2.05,2.05v2.7h15.76c3.28,0,5.69-.65,7.21-1.96,1.53-1.31,2.3-3.26,2.3-6.06s-.66-4.73-1.99-5.91c-1.32-1.18-3.55-1.77-6.69-1.77h-6.81c-1.2,0-2.37-.25-2.98-.74-.61-.49-1.24-1.29-1.24-2.22,0-1.23.35-2.13,1.06-2.7.71-.57,1.47-.87,2.99-.87h12.29c1.13,0,2.05-.92,2.05-2.05V.36h-14.82c-3.32,0-5.73.67-7.26,2-1.52,1.33-2.29,3.35-2.29,6.23,0,2.7.73,4.67,2.17,5.93,1.45,1.25,3.74,1.88,6.87,1.88h6.6c1.48,0,2.52.24,3.13.72.61.48.92,1.29.92,2.42s-.33,1.88-1,2.35c-.66.47-1.81.71-3.44.71h-12.81Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M54.96.36c-1.13,0-2.05.92-2.05,2.05v16.92L41.27,2.27c-.72-1.25-1.66-1.91-2.88-1.91h-6.18v26.98h3.91c1.13,0,2.05-.92,2.05-2.05V7.63h0s12.22,17.81,12.22,17.81c0,0,1.18,1.9,3.01,1.9h5.46V.36h-3.91Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M0,22.62h10.85c1.39,0,1.97.8,2.54,1.71,16.52,25.99,41.83,18.65,41.83,18.65.31-.09.4.17.11.28,0,0-11.33,5.26-24.56,2.68-13.22-2.57-24.34-12.17-30.77-23.32Z" style="fill: url(#linear-gradient-2); stroke-width: 0px;"/>
</g>
</svg>
</div>
<div class="footer-info">
<dl>
<dt>우편번호</dt>
<dd>54870</dd>
</dl>
<dl>
<dt class="sr-only">주소</dt>
<dd>전북특별자치도 전주시 덕진구 기지로 180(만성동, 국민연금) <br>국민연금공단 I</dd>
</dl>
<dl>
<dt>고객센터</dt>
<dd>1355(유료)</dd>
</dl>
</div>
<p class="copyright">Copyright© 2024 NPS All Rights Reserved.</p>
</footer>
<!--E: 푸터 영역-->
</body>
</html>

72
dist/toons.html → dist/toons/toons.html
View File

@ -5,9 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>국민염금 소식 - 국민연금 인스타 툰</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="./assets/css/style.min.css?v=240805">
<link rel="stylesheet" href="..//assets/css/style.min.css?v=240805">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./assets/js/common.min.js"></script>
<script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<script src="..//assets/js/common.min.js"></script>
</head>
<body>
<!--S: 숨김 메뉴-->
@ -94,11 +95,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="./news.html">새소식</a></li>
<li><a href="../news/news.html">새소식</a></li>
<li><a href="">ESG</a></li>
<li><a href="">이벤트</a></li>
<li><a href="">대학생 홍보대사</a></li>
<li><a href="./toons.html">국민연금 인스타툰</a></li>
<li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -123,8 +124,8 @@
<li>
<a href="" class="depth-1">영상갤러리</a>
<ul class="sub-menu">
<li><a href="./clips.html">동영상</a></li>
<li><a href="./shorts.html">Shorts</a></li>
<li><a href="../clips/clips.html">동영상</a></li>
<li><a href="../shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -177,11 +178,12 @@
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="./">홈</a></li>
<li><a href="./news.html">국민연금 소식</a></li>
<li><a href="">홈</a></li>
<li><a href="../news/news.html">국민연금 소식</a></li>
<li><span>국민연금 인스타 툰</span></li>
</ol>
</nav>
@ -199,13 +201,13 @@
</div>
<ul class="menu-list">
<li class="item first active ">
<a href="./news.html" class="link">국민연금 소식</a>
<a href="../news/news.html" class="link">국민연금 소식</a>
<ul class="submenu">
<li class=""><a href="./news.html">새소식</a></li>
<li><a href="./news.html">ESG</a></li>
<li><a href="./toons.html">이벤트</a></li>
<li><a href="./toons.html">대학생 홍보대사</a></li>
<li class="active"><a href="./toons.html">국민연금 인스타툰</a></li>
<li class=""><a href="../news/news.html">새소식</a></li>
<li><a href="#">ESG</a></li>
<li><a href="#">이벤트</a></li>
<li><a href="#">대학생 홍보대사</a></li>
<li class="active"><a href="../toons/toons.html">국민연금 인스타툰</a></li>
</ul>
</li>
<li class="item">
@ -215,10 +217,10 @@
<a href="#" class="link">국민연금 기금</a>
</li>
<li class="item last ">
<a href="./clips.html" class="link">영상갤러리</a>
<a href="../clips/clips.html" class="link">영상갤러리</a>
<ul class="submenu">
<li class=""><a href="./clips.html">동영상</a></li>
<li class=""><a href="./shorts.html">Shorts</a></li>
<li class=""><a href="../clips/clips.html">동영상</a></li>
<li class=""><a href="../shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -234,13 +236,13 @@
<ul class="common-list toons">
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/toon-01.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/toon-01.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
<a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
</h4>
<div class="item-info">
<dl>
@ -252,13 +254,13 @@
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/toon-02.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/toon-02.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
<a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
</h4>
<div class="item-info">
<dl>
@ -270,13 +272,13 @@
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/toon-03.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/toon-03.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
<a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
</h4>
<div class="item-info">
<dl>
@ -288,13 +290,13 @@
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/toon-04.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/toon-04.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
<a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
</h4>
<div class="item-info">
<dl>
@ -306,13 +308,13 @@
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/toon-05.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/toon-05.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
<a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
</h4>
<div class="item-info">
<dl>
@ -324,13 +326,13 @@
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/toon-06.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/toon-06.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
<a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
</h4>
<div class="item-info">
<dl>

122
src/html/clips.html → src/html/clips/clips.html
View File

@ -1,11 +1,11 @@
@@include("./include/meta.html", {"pageTitle" : "영상갤러리 - 동영상"})
@@include("./include/header.html")
@@include("../../html/include/meta.html", {"pageTitle" : "영상갤러리 - 동영상", "ROOT":"../"})
@@include("../../html/include/header.html",{"ROOT":"../"})
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="./">홈</a></li>
<li><a href="./clips.html">영상갤러리</a></li>
<li><a href="../index.html">홈</a></li>
<li><a href="../clips/clips.html">영상갤러리</a></li>
<li><span>동영상</span></li>
</ol>
</nav>
@ -14,8 +14,8 @@
<div class="sub-main container" id="main">
<aside class="left-nav">
@@include("./include/search_box.html")
@@include("./include/left_menu.html", {"active": "clips", "subActive": "clips"})
@@include("../../html/include/search_box.html")
@@include("../../html/include/left_menu.html", {"active": "clips", "subActive": "clips"})
</aside>
<main class="page-contents">
@ -29,13 +29,13 @@
<div class="tag-container">
<h4 class="tag-title">모아보기</h4>
<ul class="tag-list">
<li class="active"><a href="">#콕콕연금뉴스</a></li>
<li><a href="">#연금이랑 알아볼게</a></li>
<li><a href="">#캠페인 영상</a></li>
<li><a href="">#광고</a></li>
<li><a href="">#연금연금</a></li>
<li><a href="">#연금연금</a></li>
<li><a href="">#연금연금</a></li>
<li class="active"><a href="detail.html">#콕콕연금뉴스</a></li>
<li><a href="detail.html">#연금이랑 알아볼게</a></li>
<li><a href="detail.html">#캠페인 영상</a></li>
<li><a href="detail.html">#광고</a></li>
<li><a href="detail.html">#연금연금</a></li>
<li><a href="detail.html">#연금연금</a></li>
<li><a href="detail.html">#연금연금</a></li>
</ul>
</div>
@ -44,17 +44,17 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-01.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-01.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">[콕콕 연금뉴스]</a>
<a href="detail.html">[콕콕 연금뉴스]</a>
</h4>
<p class="item-summary">
<a href="">2024년 4월,<br>1,103조 5천억원의 적립금...</a>
<a href="detail.html">2024년 4월,<br>1,103조 5천억원의 적립금...</a>
</p>
</div>
@ -63,17 +63,17 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-02.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-02.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">[콕콕 연금뉴스]</a>
<a href="detail.html">[콕콕 연금뉴스]</a>
</h4>
<p class="item-summary">
<a href="">국민연금, 2024년 1분기 말<br>
<a href="detail.html">국민연금, 2024년 1분기 말<br>
기준 5.82%의 운용수익률..</a>
</p>
</div>
@ -83,17 +83,17 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-03.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-03.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">[콕콕 연금뉴스]</a>
<a href="detail.html">[콕콕 연금뉴스]</a>
</h4>
<p class="item-summary">
<a href="">
<a href="detail.html">
국민연금 기준소득월액 <br>
변경!
</a>
@ -105,17 +105,17 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-04.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-04.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">[콕콕 연금뉴스]</a>
<a href="detail.html">[콕콕 연금뉴스]</a>
</h4>
<p class="item-summary">
<a href="">
<a href="detail.html">
실업크레딧을 통한 <br>가입기간 확대 지원
</a>
</p>
@ -126,14 +126,14 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-05.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-05.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">스톱모션으로 알아보는 <br>
<a href="detail.html">스톱모션으로 알아보는 <br>
국민연금 '크레딧 제도'</a>
</h4>
</div>
@ -143,14 +143,14 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-06.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-06.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">
<a href="detail.html">
⭐미션! 2023 국민연금<br>
레벨업⭐
</a>
@ -162,14 +162,14 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-07.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-07.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">
<a href="detail.html">
국민연금에 대한 진실<br>
파헤치기!
</a>
@ -181,19 +181,19 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-08.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-08.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">
<a href="detail.html">
[국민연금공단X큰별쌤..]
</a>
</h4>
<p class="item-summary">
<a href="">
<a href="detail.html">
조선시대에도 연금이 <br>
있었다?!
</a>
@ -205,19 +205,19 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-09.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-09.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">
<a href="detail.html">
[NPS 릴레이 브이로그(vlog)]
</a>
</h4>
<p class="item-summary">
<a href="">
<a href="detail.html">
인천국제공항에도 <br>
국민연금공단이!?
</a>
@ -229,19 +229,19 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-10.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-10.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">
<a href="detail.html">
국민연금 직장인 브이로그.
</a>
</h4>
<a href="" class="item-summary">
<a href="detail.html" class="item-summary">
오늘도 뽀주임은 열일 중 <br>
다시 돌아온 뽀주임의 다시 돌아온 뽀주임의
</a>
@ -254,18 +254,18 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-11.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-11.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">
<a href="detail.html">
[NPS 릴레이 브이로그(Vlog)]
</a>
</h4>
<a class="item-summary" href="">
<a class="item-summary" href="detail.html">
국민연금공단
장애인지원센터는 무슨 일이?
</a>
@ -276,18 +276,18 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-12.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/clips-12.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">
<a href="detail.html">
[NPS 릴레이 브이로그(Vlog)]
</a>
</h4>
<a class="item-summary" href="">
<a class="item-summary" href="detail.html">
국민연금공단
장애인지원센터는 무슨 일
</a>
@ -299,10 +299,10 @@
</div>
@@include("./include/pagination.html")
@@include("../../html/include/pagination.html")
</main>
</div>
@@include("./include/footer.html")
@@include("./include/tail.html")
@@include("../../html/include/footer.html")
@@include("../../html/include/tail.html")

243
src/html/clips/detail.html
File diff suppressed because it is too large
View File

8
src/html/include/header.html
View File

@ -82,11 +82,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="./news.html">새소식</a></li>
<li><a href="../news/news.html">새소식</a></li>
<li><a href="">ESG</a></li>
<li><a href="">이벤트</a></li>
<li><a href="">대학생 홍보대사</a></li>
<li><a href="./toons.html">국민연금 인스타툰</a></li>
<li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -111,8 +111,8 @@
<li>
<a href="" class="depth-1">영상갤러리</a>
<ul class="sub-menu">
<li><a href="./clips.html">동영상</a></li>
<li><a href="./shorts.html">Shorts</a></li>
<li><a href="../clips/clips.html">동영상</a></li>
<li><a href="../shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>

18
src/html/include/left_menu.html
View File

@ -1,12 +1,12 @@
<ul class="menu-list">
<li class="item @@if ( active === 'news' ) { first active }">
<a href="./news.html" class="link">국민연금 소식</a>
<a href="../news/news.html" class="link">국민연금 소식</a>
<ul class="submenu">
<li class="@@if(subActive === 'news') {active}"><a href="./news.html">새소식</a></li>
<li><a href="./news.html">ESG</a></li>
<li><a href="./toons.html">이벤트</a></li>
<li><a href="./toons.html">대학생 홍보대사</a></li>
<li class="@@if(subActive === 'toons') {active}"><a href="./toons.html">국민연금 인스타툰</a></li>
<li class="@@if(subActive === 'news') {active}"><a href="../news/news.html">새소식</a></li>
<li><a href="#">ESG</a></li>
<li><a href="#">이벤트</a></li>
<li><a href="#">대학생 홍보대사</a></li>
<li class="@@if(subActive === 'toons') {active}"><a href="../toons/toons.html">국민연금 인스타툰</a></li>
</ul>
</li>
<li class="item">
@ -16,10 +16,10 @@
<a href="#" class="link">국민연금 기금</a>
</li>
<li class="item last @@if ( active === 'clips' ) { first active }">
<a href="./clips.html" class="link">영상갤러리</a>
<a href="../clips/clips.html" class="link">영상갤러리</a>
<ul class="submenu">
<li class="@@if(subActive === 'clips') {active}"><a href="./clips.html">동영상</a></li>
<li class="@@if(subActive === 'shorts') {active}"><a href="./shorts.html">Shorts</a></li>
<li class="@@if(subActive === 'clips') {active}"><a href="../clips/clips.html">동영상</a></li>
<li class="@@if(subActive === 'shorts') {active}"><a href="../shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>

1
src/html/include/meta.html
View File

@ -7,6 +7,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="@@ROOT/assets/css/style.min.css?v=240805">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<script src="@@ROOT/assets/js/common.min.js"></script>
</head>
<body>

1362
src/html/news/detail.html
File diff suppressed because it is too large
View File

52
src/html/news.html → src/html/news/news.html
View File

@ -1,12 +1,12 @@
@@include("./include/meta.html", {"pageTitle" : "국민염금 소식 - 새 소식"})
@@include("./include/header.html")
@@include("../../html/include/meta.html", {"pageTitle" : "국민염금 소식 - 새 소식" , "ROOT":"../"})
@@include("../../html/include/header.html", {"ROOT":"../"})
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="./">홈</a></li>
<li><a href="./news.html">국민연금 소식</a></li>
<li><span>새 소식</span></li>
<li><a href="../index.html">홈</a></li>
<li><a href="../news/news.html">국민연금 소식</a></li>
<li><span>새소식</span></li>
</ol>
</nav>
</div>
@ -14,8 +14,8 @@
<div class="sub-main container" id="main">
<aside class="left-nav">
@@include("./include/search_box.html")
@@include("./include/left_menu.html", {"active": "news", "subActive": "news"})
@@include("../../html/include/search_box.html")
@@include("../../html/include/left_menu.html", {"active": "news", "subActive": "news"})
</aside>
<main class="page-contents">
@ -30,14 +30,14 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/news-01.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/news-01.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">[채용공고] 국민연금공단 기금운용본부 자산운용전문가 모집!</a>
<a href="detail.html">[채용공고] 국민연금공단 기금운용본부 자산운용전문가 모집!</a>
</h4>
<p class="item-summary">
(지원서 접수기간: 6/28~7/12) 국민연금공단 금운용본부자산운용전문가 모집!<br>자산운용 중심 금융혁신도시 전주에 위치한 국민연금 기금운용본부에서기금 1,000조 원 시대를 함께할 최고의 역량을 갖춘 자산운용전문가를 모집합니다
@ -55,14 +55,14 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/news-02.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/news-02.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">[7월 달력이미지무료배포]해변에서 휴양을 즐기는 국민연금공단</a>
<a href="detail.html">[7월 달력이미지무료배포]해변에서 휴양을 즐기는 국민연금공단</a>
</h4>
<p class="item-summary">
배경화면 다운로드, 달력 배경화면, 7월 달력 이미지, PC배경화면, 스마트폰 배경화면 무더운 여름, 바다로 피서를 떠난 국민연금 3인방수영도 하고 수박도 먹으며 즐거운 시간을 보내고 있네요!국민연금공단 3인방과 함께 7월도 행복하게 보내세요
@ -80,14 +80,14 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/news-03.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/news-03.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">제16기 국민연금 대학생 홍보대사팀을 추가 모집합니다!</a>
<a href="detail.html">제16기 국민연금 대학생 홍보대사팀을 추가 모집합니다!</a>
</h4>
<p class="item-summary">
"제16기 국민연금 대학생 홍보대사팀을 추가 모집합니다!" 국민연금 대학생 홍보대사팀 ‘영금이’란?국민연금 대학생 홍보대사팀 ‘영금이’는 연금이와 Young의 합성어로, 다소 어렵고 생소한 국민연금제도를 대학생들의 통통 튀는 아이디어로 보다 쉽게
@ -105,14 +105,14 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/news-04.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/news-04.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">[6월 달력 이미지 무료배포] 캠핑을 떠난 국민연금공단 3인방</a>
<a href="detail.html">[6월 달력 이미지 무료배포] 캠핑을 떠난 국민연금공단 3인방</a>
</h4>
<p class="item-summary">
배경화면 다운로드, 달력 배경화면, 6월 달력 이미지, PC배경화면, 스마트폰 배경화면6월을 맞이해 연대리, 금주임, 연부장이 캠핑을 떠났답니다.국민연금공단 3인방의 즐거운 추억이 담긴 6월 달력, 지금 만나보세요....
@ -130,14 +130,14 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/news-05.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/news-05.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">[5월 달력 이미지 무료배포] 5월에는 역시 놀이공원 나들이</a>
<a href="detail.html">[5월 달력 이미지 무료배포] 5월에는 역시 놀이공원 나들이</a>
</h4>
<p class="item-summary">
가족과 함께하는 행복한 5월입니다.5월을 기념해 놀이공원 나들이를 즐기는 3인방!화면 가득 펼쳐진 동심의 세계를 5월 달력에서 만나보세요!(고화질 이미지는 아래의 첨부파일로 다운하실 수 있습니다.)PC와 모바일 버전이 모두 제작되었으니...
@ -152,14 +152,12 @@
</li>
</ul>
</div>
@@include("./include/pagination.html")
@@include("../../html/include/pagination.html")
</main>
</div>
@@include("./include/footer.html")
@@include("./include/tail.html")
@@include("../../html/include/footer.html")
@@include("../../html/include/tail.html")

208
src/html/shorts/detail.html
File diff suppressed because it is too large
View File

90
src/html/shorts.html → src/html/shorts/shorts.html
View File

@ -1,11 +1,11 @@
@@include("./include/meta.html", {"pageTitle" : "영상갤러리 - Shorts"})
@@include("./include/header.html")
@@include("../../html/include/meta.html", {"pageTitle" : "영상갤러리 - Shorts", "ROOT":"../"})
@@include("../../html/include/header.html",{"ROOT":"../"})
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="./">홈</a></li>
<li><a href="./clips.html">영상갤러리</a></li>
<li><a href="detail.html">홈</a></li>
<li><a href="../clips/clips.html">영상갤러리</a></li>
<li><span>Shorts</span></li>
</ol>
</nav>
@ -14,8 +14,8 @@
<div class="sub-main container" id="main">
<aside class="left-nav">
@@include("./include/search_box.html")
@@include("./include/left_menu.html", {"active": "clips", "subActive": "shorts"})
@@include("../../html/include/search_box.html")
@@include("../../html/include/left_menu.html", {"active": "clips", "subActive": "shorts"})
</aside>
<main class="page-contents">
@ -29,26 +29,26 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-01.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-01.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금, 내고 싶은 사람만 내면 안되나요?</a>
<a href="detail.html">국민연금, 내고 싶은 사람만 내면 안되나요?</a>
</h4>
</div>
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-02.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-02.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금은 도대체 왜?
<a href="detail.html">국민연금은 도대체 왜?
국가에서 운영하는거죠?</a>
</h4>
</div>
@ -56,13 +56,13 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-03.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-03.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금공단 쉽게
<a href="detail.html">국민연금공단 쉽게
취업하는 꿀팁?! </a>
</h4>
</div>
@ -70,13 +70,13 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-04.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-04.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 3인방의
<a href="detail.html">국민연금 3인방의
🏠 Home🏠 댄스챌린지</a>
</h4>
</div>
@ -84,13 +84,13 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-05.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-05.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">199X년생부터 국민연금
<a href="detail.html">199X년생부터 국민연금
을 하나도 못 받는다고?!</a>
</h4>
</div>
@ -98,13 +98,13 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-06.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-06.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">유럽 vs 우리나라
<a href="detail.html">유럽 vs 우리나라
국민연금 급여 차이는?</a>
</h4>
</div>
@ -112,13 +112,13 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-07.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-07.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 기금수익률을
<a href="detail.html">국민연금 기금수익률을
더 높일 수 있는 방법은? </a>
</h4>
</div>
@ -126,13 +126,13 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-08.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-08.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 기금투자
<a href="detail.html">국민연금 기금투자
믿을 수 있나요? </a>
</h4>
</div>
@ -140,13 +140,13 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-09.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-09.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 3인방의
<a href="detail.html">국민연금 3인방의
💝사랑스러워 💝챌린지 </a>
</h4>
</div>
@ -154,13 +154,13 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-10.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-10.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금! 부부 모두
<a href="detail.html">국민연금! 부부 모두
가입하면? #Shorts
</a>
</h4>
@ -169,13 +169,13 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-11.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-11.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 3인방의
<a href="detail.html">국민연금 3인방의
🥰날 바라바라봐🥰 챌린지
</a>
</h4>
@ -184,13 +184,13 @@
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-12.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/shorts-12.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 걱정🥰...은
<a href="detail.html">국민연금 걱정🥰...은
No!2023년 말 기준
</a>
</h4>
@ -201,10 +201,10 @@
</ul>
</div>
@@include("./include/pagination.html")
@@include("../../html/include/pagination.html")
</main>
</div>
@@include("./include/footer.html")
@@include("./include/tail.html")
@@include("../../html/include/footer.html")
@@include("../../html/include/tail.html")

204
src/html/toons/detail.html
View File

@ -0,0 +1,204 @@
@@include("../../html/include/meta.html", {"pageTitle" : "국민염금 소식 - 국민연금 인스타 툰 상세", "ROOT":"../"})
@@include("../../html/include/header.html",{"ROOT":"../"})
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="">홈</a></li>
<li><a href="../news/news.html">국민연금 소식</a></li>
<li><span>국민연금 인스타 툰</span></li>
</ol>
</nav>
</div>
<div class="sub-main container" id="board">
<aside class="left-nav">
@@include("../../html/include/search_box.html")
@@include("../../html/include/left_menu.html", {"active": "news", "subActive": "toons"})
</aside>
<main class="page-contents">
<div class="contents-header">
<header class="page-header">
<h2 class="contents-title">신입사원의 귀여운 실수?</h2>
</header>
<div class="page-header-info">
<dl class="date">
<dt class="sr-only">게시글 날짜</dt>
<dd>24-08-02</dd>
</dl>
<div class="list-detail-sns">
<a href="javascript:;" data-button="share-sns" data-type="facebook" data-url="http://www.naver.com" class="sns-facebook" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" target="_self">페이스북</a>
<a href="javascript:;" data-button="share-sns" data-type="twitter" data-url="http://www.naver.com" class="sns-twitter" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." data-image="" data-description="&nbsp;" target="_self">트위터</a>
<a href="javascript:;" id="npsShKakaoTalk" data-button="share-sns" data-type="kakaotalk" data-url="http://www.naver.com" class="sns-kakaotalk" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" data-description="&nbsp;" target="_self">카카오톡</a>
<a href="javascript:;" data-button="share-sns" data-type="url" data-url="http://www.naver.com" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." class="url-copy" target="_self">URL 복사</a>
</div>
</div>
</div>
<div class="detail-contents">
<p>
<img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4Rm4lMjhHOCVEQkklOUIlRkQlM0YlOEQlQTYlRTMlOTQ=" title="연대리(2024.8월) #1-1.JPG"><br style="clear:both;">
<img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4Rm4rRiUzQyVEQU0lOTQlRkQxJThEJUE2JUUzJTk0" title="연대리(2024.8월) #1-2.JPG"><br style="clear:both;">
<img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4OG0rTSUzRiVEQk8lOUMlRjklMjYlQzklQkMlRjQ=" title="연대리(2024.8월) #1-3.JPG"><br style="clear:both;">
<img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4RmklMkJINiVEOSU0MCU5OCVGODglOEQlQTYlRTMlOTQ=" title="연대리(2024.8월) #1-4.JPG" ><br style="clear:both;">
<img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4RGslMjlGJTNCJUQ3QSU5RiVGNyUyNiVDOSVCQyVGNA==" title="연대리(2024.8월) #1-5.JPG" ><br style="clear:both;">
<img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4RmguTCUzQSVEQk8lOTUlRkMlMjYlQzklQkMlRjQ=" title="연대리(2024.8월) #1-6.JPG" sqeid="QE_172250019336033366"><br style="clear:both;">
<img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4Q24lMjhGJTNCJURDTCU5RCVGQSUzQSU4RCVBNiVFMyU5NA==" title="연대리(2024.8월) #1-7.JPG" sqeid="QE_17225001958714117"><br style="clear:both;">
<img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4RmolMjhGJTNFJUQ2TSU5OSVGOTklOEQlQTYlRTMlOTQ=" title="연대리(2024.8월) #1-8.JPG" sqeid="QE_172250019868746529"><br style="clear:both;">
<img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4RmYrTCUzRiVEOE4lOTklRkE4JThEJUE2JUUzJTk0" title="연대리(2024.8월) #1-9.JPG" sqeid="QE_172250020124052912"><br style="clear:both;">
<img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4Rm0lMkJJOCVEN0ElOUYlRjklM0MlOEQlQTYlRTMlOTQ=" title="연대리(2024.8월) #1-10.JPG" sqeid="QE_172250020476850890"><br style="clear:both;">&nbsp;
</p>
<ul class="hash-tag">
<li>국민연금</li>
<li>국민연금공단</li>
<li>사연툰</li>
<li>일상툰</li>
<li>연대리툰</li>
</ul>
</div>
<div class="page-list">
<h3 class="title">더 많은 [국민연금 인스타툰] 보기</h3>
<ul class="common-list toons inner">
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="../assets/images/ex/toon-01.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
</h4>
</div>
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="../assets/images/ex/toon-02.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
</h4>
</div>
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="../assets/images/ex/toon-03.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
</h4>
</div>
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="../assets/images/ex/toon-04.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
</h4>
</div>
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="../assets/images/ex/toon-05.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
</h4>
</div>
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="../assets/images/ex/toon-06.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
</h4>
</div>
</li>
</ul>
</div>
<div class="form-content-wrap">
<h5 class="form-title">콘텐츠 품질 향상을 위해<br> 이해도와 만족도 조사를 실시하고 있습니다.</h5>
<!-- 폼 1 시작 -->
<div class="form">
<!-- 만족도 시작 -->
<div class="form-content-box">
<div class="form-box">
<h6 class="question-title">현재 콘텐츠의 내용과 설명에 대해 만족하십니까?</h6>
<div class="form-radio-box">
<div class="radio-item"><input type="radio" id="radio01-01" name="radio01" value="5"><label for="radio01-01">매우만족</label></div>
<div class="radio-item"><input type="radio" id="radio01-02" name="radio01" value="4"><label for="radio01-02">만족</label></div>
<div class="radio-item"><input type="radio" id="radio01-03" name="radio01" value="3"><label for="radio01-03">보통</label></div>
<div class="radio-item"><input type="radio" id="radio01-04" name="radio01" value="2"><label for="radio01-04">불만족</label></div>
<div class="radio-item"><input type="radio" id="radio01-05" name="radio01" value="1"><label for="radio01-05">매우불만족</label></div>
</div>
</div>
<div class="form-box">
<h6 class="question-title">이 페이지에서 제공하는 콘텐츠가 얼마나 이해되십니까?</h6>
<div class="form-radio-box">
<div class="radio-item"><input type="radio" id="radio02-01" name="radio02" value="5"><label for="radio02-01">매우만족</label></div>
<div class="radio-item"><input type="radio" id="radio02-02" name="radio02" value="4"><label for="radio02-02">만족</label></div>
<div class="radio-item"><input type="radio" id="radio02-03" name="radio02" value="3"><label for="radio02-03">보통</label></div>
<div class="radio-item"><input type="radio" id="radio02-04" name="radio02" value="2"><label for="radio02-04">불만족</label></div>
<div class="radio-item"><input type="radio" id="radio02-05" name="radio02" value="1"><label for="radio02-05">매우불만족</label></div>
</div>
</div>
</div>
<button class="form-btn">확인</button>
<!-- 만족도 끝 -->
</div>
<!-- 폼 1 끝 -->
<!-- 폼 2 시작 -->
<div class="form-02 cf">
<!-- 만족도 시작 -->
<div class="form-content-box cf" style="border:0; padding-bottom:0;">
<div class="form-box">
<h5 class="question-title">콘텐츠에 대한 자유로운 의견을 남겨주세요.</h5>
<div class="form-radio-box other">
<textarea placeholder="보내주신 의견은 검토하여 콘텐츠 제작에 반영할 예정입니다.(200자 이내) " name="strSurveyText" id="strSurveyText" onkeyup="fncChkByte(this,400)"></textarea>
</div>
<div class="textarea-num">
<span id="byteInfo">0</span>
/ 400
<span>byte</span>
</div>
</div>
</div>
<!-- 만족도 끝 -->
<button class="form-btn">확인</button>
</div>
<!-- 폼 2 끝 -->
</div>
<a href="toons.html" class="btn-list-prev">목록으로</a>
</main>
</div>
@@include("../../html/include/footer.html")
@@include("../../html/include/tail.html")

55
src/html/toons.html → src/html/toons/toons.html
View File

@ -1,11 +1,12 @@
@@include("./include/meta.html", {"pageTitle" : "국민염금 소식 - 국민연금 인스타 툰"})
@@include("./include/header.html")
@@include("../../html/include/meta.html", {"pageTitle" : "국민염금 소식 - 국민연금 인스타 툰", "ROOT":"../"})
@@include("../../html/include/header.html",{"ROOT":"../"})
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="./">홈</a></li>
<li><a href="./news.html">국민연금 소식</a></li>
<li><a href="">홈</a></li>
<li><a href="../news/news.html">국민연금 소식</a></li>
<li><span>국민연금 인스타 툰</span></li>
</ol>
</nav>
@ -14,8 +15,8 @@
<div class="sub-main container" id="main">
<aside class="left-nav">
@@include("./include/search_box.html")
@@include("./include/left_menu.html", {"active": "news", "subActive": "toons"})
@@include("../../html/include/search_box.html")
@@include("../../html/include/left_menu.html", {"active": "news", "subActive": "toons"})
</aside>
<main class="page-contents">
@ -28,13 +29,13 @@
<ul class="common-list toons">
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/toon-01.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/toon-01.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
<a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
</h4>
<div class="item-info">
<dl>
@ -46,13 +47,13 @@
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/toon-02.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/toon-02.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
<a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
</h4>
<div class="item-info">
<dl>
@ -64,13 +65,13 @@
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/toon-03.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/toon-03.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
<a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
</h4>
<div class="item-info">
<dl>
@ -82,13 +83,13 @@
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/toon-04.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/toon-04.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
<a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
</h4>
<div class="item-info">
<dl>
@ -100,13 +101,13 @@
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/toon-05.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/toon-05.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
<a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
</h4>
<div class="item-info">
<dl>
@ -118,13 +119,13 @@
</li>
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/toon-06.jpg" alt="">
<a class="thumbnail-link" href="detail.html">
<img class="thumbnail-img" src="../assets/images/ex/toon-06.jpg" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
<a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
</h4>
<div class="item-info">
<dl>
@ -138,10 +139,10 @@
</ul>
</div>
@@include("./include/pagination.html")
@@include("../../html/include/pagination.html")
</main>
</div>
@@include("./include/footer.html")
@@include("./include/tail.html")
@@include("../../html/include/footer.html")
@@include("../../html/include/tail.html")

106
src/js/common.js
View File

@ -4,4 +4,108 @@ $(function() {
$('#mobile-left-menu').toggleClass('opened');
})
})
$('[data-button="share-sns"]').click(function(e) {
e.preventDefault();
console.log(1);
var code = $(this).attr('data-type')
var snsimages = $(this).attr('data-image')
var snsTitle = $(this).attr('data-title')
var url = $(this).attr('data-url')
if(! url || !code || !snsTitle)
return;
if(code === "kakaotalk") {
Kakao.init('3bec2345a029972a68f8279879478ba7');
Kakao.Link.createDefaultButton({
container: '#npsShKakaoTalk',
objectType: 'feed',
content: {
title: snsTitle,
description: '출처 : 국민연금 온에어',
imageUrl: snsimages,
imageWidth: 620,
imageHeight: 350,
link: {
mobileWebUrl: document.URL,
webUrl: document.URL
}
},
buttons: [
{
title: '콘텐츠 보기',
link: {
mobileWebUrl: document.URL,
webUrl: document.URL
}
}
]
});
return;
}
else if (code === 'url') {
var $div = $('<input>').attr('data-temp','clipboard')
$('body').append($div);
$div.val(url).select();
$('#textbox-url').select();
try {
var successful = document.execCommand('copy');
alert('클립보드에 주소가 복사되었습니다. Ctrl + V 로 붙여넣기 하세요.');
$div.remove();
} catch (err) {
alert('이 브라우저는 지원하지 않습니다.');
$div.remove();
}
return;
}
switch(code) {
case "twitter":
//트위터
url = '//twitter.com/intent/tweet?text='+encodeURIComponent(snsTitle)+'&url='+encodeURIComponent(url);
break;
case "telegram":
//텔레그램
url = 'https://telegram.me/share/url?url='+encodeURIComponent(url);
break;
case "facebook":
//페이스북
url = '//www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(url)+'&t='+snsTitle;
break;
case "kakaostory":
//카카오스토리
url = 'https://story.kakao.com/share?url='+encodeURIComponent(url);
break;
case "naverblog":
//네이버
url = 'http://share.naver.com/web/shareView.nhn?url='+encodeURIComponent(url)+'&title='+encodeURIComponent(snsTitle);
break;
case "naverband":
//밴드
url = 'http://www.band.us/plugin/share?body='+encodeURIComponent(snsTitle)+'%0A'+encodeURIComponent(url);
break;
case "google":
//구글
url = '//plus.google.com/share?url='+url;
break;
case "pinterest":
//pinterest
url = '//www.pinterest.com/pin/create/button/?url='+url+'&media='+snsimages+'&description='+encodeURIComponent(snsTitle);
break;
}
window.open(url,'','width=600,height=300,top=100,left=100,scrollbars=yes');
})
})

4
src/scss/components/_breadcrumbs.scss
View File

@ -36,13 +36,13 @@
li {
a,span {
font-size:REM(22px / 3);
font-size:REM(30px / 3);
}
& + li {
a, span {
&:before {
font-size:REM(22px / 3);
font-size:REM(30px / 3);
margin:0 REM(12px / 3);
}
}

195
src/scss/pages/_lists.scss
View File

@ -156,6 +156,55 @@
}
}
}
&.inner{
@include display-flex();
flex-wrap: wrap;
margin:0 0 REM(30px / 3) 0;
padding-bottom:REM(30px);
.item {
width:50%;
padding:REM(10px) REM(15px);
@include display-flex();
align-items: center;
border-bottom: 1px solid #c2c2c2;
.thumbnail {
width:REM(100px);
height:REM(100px);
margin:0 auto REM(10px);
flex-shrink:0;
}
.item-content {
padding-left:REM(15px);
.item-title {
font-size:REM(15px);
white-space: initial;
}
}
@include display-xs(){
width:100%;
padding:REM(12px / 3) REM(15px/ 3);
@include display-flex();
flex-direction: row;
.thumbnail {
width:REM(120px / 3);
height:REM(80px / 3);
margin:0;
flex-shrink:0;
}
.item-content {
padding-left:REM(30px / 3);
.item-title {
font-size:REM(21px / 3);
white-space: initial;
margin-bottom:0;
}
}
}
}
}
}
&.toons {
@ -196,6 +245,47 @@
}
}
}
&.inner{
.item {
width:50%;
padding:REM(10px) REM(15px);
@include display-flex();
align-items: center;
.thumbnail {
width:REM(100px);
height:REM(100px);
margin:0 auto REM(10px);
flex-shrink:0;
}
.item-content {
padding-left:REM(15px);
.item-title {
font-size:REM(15px);
white-space: initial;
}
}
@include display-xs(){
width:100%;
padding:REM(12px / 3) REM(15px/ 3);
.thumbnail {
width:REM(150px / 3);
height:REM(150px / 3);
margin:0;
flex-shrink:0;
}
.item-content {
padding-left:REM(30px / 3);
.item-title {
font-size:REM(21px / 3);
white-space: initial;
}
}
}
}
}
}
&.shorts {
@ -250,6 +340,56 @@
}
}
}
&.inner{
margin-top:0;
.item {
width:50%;
padding:REM(10px) REM(15px);
@include display-flex();
align-items: center;
.thumbnail {
width:REM(84px);
height:REM(126px);
margin:0;
flex-shrink:0;
}
.item-content {
padding-left:REM(15px);
.item-title {
font-size:REM(15px);
white-space: initial;
margin-bottom:0;
br {
display: none;
}
}
}
@include display-xs(){
width:100%;
padding:REM(12px / 3) REM(15px/ 3);
.thumbnail {
width:REM(84px / 3);
height:REM(126px / 3);
margin:0;
flex-shrink:0;
}
.item-content {
padding-left:REM(30px / 3);
.item-title {
font-size:REM(21px / 3);
white-space: initial;
}
.item-summary {
font-size:REM(18px / 3);
}
}
}
}
}
}
&.clips {
@ -308,6 +448,61 @@
}
}
}
&.inner{
margin-top:0;
.item {
width:50%;
padding:REM(10px) REM(15px);
@include display-flex();
align-items: center;
.thumbnail {
width:REM(120px);
height:REM(80px);
margin:0;
flex-shrink:0;
}
.item-content {
padding-left:REM(15px);
.item-title {
font-size:REM(15px);
white-space: initial;
br {
display: none;
}
}
.item-summary {
font-size:REM(12px);
br {
display: none;
}
}
}
@include display-xs(){
width:100%;
padding:REM(12px / 3) REM(15px/ 3);
.thumbnail {
width:REM(180px / 3);
height:REM(120px / 3);
margin:0;
flex-shrink:0;
}
.item-content {
padding-left:REM(30px / 3);
.item-title {
font-size:REM(21px / 3);
white-space: initial;
}
.item-summary {
font-size:REM(18px / 3);
}
}
}
}
}
}
}

3
src/scss/style.scss
View File

@ -21,5 +21,6 @@
@import "plugins/custom";
// 레이아웃 및 각 페이지 SCSS 파일
@import 'pages/main';
@import "pages/main";
@import "pages/lists";
@import "pages/board-detail";
Write Preview
Loading…
Cancel
Save