1482
No
css 코드이다
@CHARSET "UTF-8";
.at-icon{
fill:#fff;
border:0
}
.at-icon-wrapper{
display:inline-block;
overflow:hidden
}
a .at-icon-wrapper{
cursor:pointer
}
.at-rounded,.at-rounded-element .at-icon-wrapper{
border-radius:12%
}
.at-circular,.at-circular-element .at-icon-wrapper{
border-radius:50%
}
.addthis_32x32_style .at-icon{
width:2pc;
height:2pc
}
.addthis_24x24_style .at-icon{
width:24px;
height:24px
}
.addthis_20x20_style .at-icon{
width:20px;
height:20px
}
.addthis_16x16_style .at-icon{
width:1pc;
height:1pc
}
#at16lb{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1001;
background-color:#000;
opacity:.001
}
#at_complete,#at_error,#at_share,#at_success{
position:static!important
}
.at15dn{
display:none
}
#at15s,#at16p,#at16p form input,#at16p label,#at16p textarea,#at_share .at_item{
font-family:arial,helvetica,tahoma,verdana,sans-serif!important;
font-size:9pt!important;
outline-style:none;
outline-width:0;
line-height:1em
}
* html #at15s.mmborder{
position:absolute!important
}
#at15s.mmborder{
position:fixed!important;
width:250px!important
}
#at15s{
background:url(data:image/png;
base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABtJREFUeNpiZGBgaGAgAjAxEAlGFVJHIUCAAQDcngCUgqGMqwAAAABJRU5ErkJggg==);
float:none;
line-height:1em;
margin:0;
overflow:visible;
padding:5px;
text-align:left;
position:absolute
}
#at15s a,#at15s span{
outline:0;
direction:ltr;
text-transform:none
}
#at15s .at-label{
margin-left:5px
}
#at15s .at-icon-wrapper{
width:1pc;
height:1pc;
vertical-align:middle
}
#at15s .at-icon{
width:1pc;
height:1pc
}
.at4-icon{
display:inline-block;
background-repeat:no-repeat;
background-position:top left;
margin:0;
overflow:hidden;
cursor:pointer
}
.addthis_16x16_style .at4-icon,.addthis_default_style .at4-icon,.at4-icon,.at-16x16{
width:1pc;
height:1pc;
line-height:1pc;
background-size:1pc!important
}
.addthis_32x32_style .at4-icon,.at-32x32{
width:2pc;
height:2pc;
line-height:2pc;
background-size:2pc!important
}
.addthis_24x24_style .at4-icon,.at-24x24{
width:24px;
height:24px;
line-height:24px;
background-size:24px!important
}
.addthis_20x20_style .at4-icon,.at-20x20{
width:20px;
height:20px;
line-height:20px;
background-size:20px!important
}
.at4-icon.circular,.circular .at4-icon,.circular.aticon{
border-radius:50%
}
.at4-icon.rounded,.rounded .at4-icon{
border-radius:4px
}
.at4-icon-left{
float:left
}
#at15s .at4-icon{
text-indent:20px;
padding:0;
overflow:visible;
white-space:nowrap;
background-size:1pc;
width:1pc;
height:1pc;
background-position:top left;
display:inline-block;
line-height:1pc
}
.addthis_vertical_style .at4-icon,.at4-follow-container .at4-icon{
margin-right:5px
}
html>body #at15s{
width:250px!important
}
#at15s.atm{
background:none!important;
padding:0!important;
width:10pc!important
}
#at15s_inner{
background:#fff;
border:1px solid #fff;
margin:0
}
#at15s_head{
position:relative;
background:#f2f2f2;
padding:4px;
cursor:default;
border-bottom:1px solid #e5e5e5
}
.at15s_head_success{
background:#cafd99!important;
border-bottom:1px solid #a9d582!important
}
.at15s_head_success a,.at15s_head_success span{
color:#000!important;
text-decoration:none
}
#at15s_brand,#at15sptx,#at16_brand{
position:absolute
}
#at15s_brand{
top:4px;
right:4px
}
.at15s_brandx{
right:20px!important
}
a#at15sptx{
top:4px;
right:4px;
text-decoration:none;
color:#4c4c4c;
font-weight:700
}
#at15sptx:hover{
text-decoration:underline
}
#at16_brand{
top:5px;
right:30px;
cursor:default
}
#at_hover{
padding:4px
}
#at_hover .at_item,#at_share .at_item{
background:#fff!important;
float:left!important;
color:#4c4c4c!important
}
#at_share .at_item .at-icon-wrapper{
margin-right:5px
}
#at_hover .at_bold{
font-weight:700;
color:#000!important
}
#at_hover .at_item{
width:7pc!important;
padding:2px 3px!important;
margin:1px;
text-decoration:none!important
}
#at_hover .at_item.athov,#at_hover .at_item:focus,#at_hover .at_item:hover{
margin:0!important
}
#at_hover .at_item.athov,#at_hover .at_item:focus,#at_hover .at_item:hover,#at_share .at_item.athov,#at_share .at_item:hover{
background:#f2f2f2!important;
border:1px solid #e5e5e5;
color:#000!important;
text-decoration:none
}
.ipad #at_hover .at_item:focus{
background:#fff!important;
border:1px solid #fff
}
.at15t{
display:block!important;
height:1pc!important;
line-height:1pc!important;
padding-left:20px!important;
background-position:0 0;
text-align:left
}
.addthis_button,.at15t{
cursor:pointer
}
.addthis_toolbox a.at300b,.addthis_toolbox a.at300m{
width:auto
}
.addthis_toolbox a{
margin-bottom:5px;
line-height:initial
}
.addthis_toolbox.addthis_vertical_style{
width:200px
}
.addthis_button_facebook_like .fb_iframe_widget{
line-height:100%
}
.addthis_button_facebook_like iframe.fb_iframe_widget_lift{
max-width:none
}
.addthis_toolbox a.addthis_button_counter,.addthis_toolbox a.addthis_button_facebook_like,.addthis_toolbox a.addthis_button_facebook_send,.addthis_toolbox a.addthis_button_facebook_share,.addthis_toolbox a.addthis_button_foursquare,.addthis_toolbox a.addthis_button_google_plusone,.addthis_toolbox a.addthis_button_linkedin_counter,.addthis_toolbox a.addthis_button_pinterest_pinit,.addthis_toolbox a.addthis_button_stumbleupon_badge,.addthis_toolbox a.addthis_button_tweet{
display:inline-block
}
.at-share-tbx-element .google_plusone_iframe_widget>span>div{
vertical-align:top!important
}
.addthis_toolbox span.addthis_follow_label{
display:none
}
.addthis_toolbox.addthis_vertical_style span.addthis_follow_label{
display:block;
white-space:nowrap
}
.addthis_toolbox.addthis_vertical_style a{
display:block
}
.addthis_toolbox.addthis_vertical_style.addthis_32x32_style a{
line-height:2pc;
height:2pc
}
.addthis_toolbox.addthis_vertical_style .at300bs{
margin-right:4px;
float:left
}
.addthis_toolbox.addthis_20x20_style span{
line-height:20px
}
.addthis_toolbox.addthis_32x32_style span{
line-height:2pc
}
.addthis_toolbox.addthis_pill_combo_style .addthis_button_compact .at15t_compact,.addthis_toolbox.addthis_pill_combo_style a{
float:left
}
.addthis_toolbox.addthis_pill_combo_style a.addthis_button_tweet{
margin-top:-2px
}
.addthis_toolbox.addthis_pill_combo_style .addthis_button_compact .at15t_compact{
margin-right:4px
}
.addthis_default_style .addthis_separator{
margin:0 5px;
display:inline
}
div.atclear{
clear:both
}
.addthis_default_style .addthis_separator,.addthis_default_style .at4-icon,.addthis_default_style .at300b,.addthis_default_style .at300bo,.addthis_default_style .at300bs,.addthis_default_style .at300m{
float:left
}
.at300b img,.at300bo img{
border:0
}
a.at300b .at4-icon,a.at300m .at4-icon{
display:block
}
.addthis_default_style .at300b,.addthis_default_style .at300bo,.addthis_default_style .at300m{
padding:0 2px
}
.at300b,.at300bo,.at300bs,.at300m{
cursor:pointer
}
.addthis_button_facebook_like.at300b:hover,.addthis_button_facebook_like.at300bs:hover,.addthis_button_facebook_send.at300b:hover,.addthis_button_facebook_send.at300bs:hover{
opacity:1
}
.addthis_20x20_style .at15t,.addthis_20x20_style .at300bs{
overflow:hidden;
display:block;
height:20px!important;
width:20px!important;
line-height:20px!important
}
.addthis_32x32_style .at15t,.addthis_32x32_style .at300bs{
overflow:hidden;
display:block;
height:2pc!important;
width:2pc!important;
line-height:2pc!important
}
.at300bs{
overflow:hidden;
display:block;
background-position:0 0;
height:1pc;
width:1pc;
line-height:1pc!important
}
.addthis_default_style .at15t_compact,.addthis_default_style .at15t_expanded{
margin-right:4px
}
#at_share .at_item{
width:123px!important;
padding:4px;
margin-right:2px;
border:1px solid #fff
}
#at16p{
background:url(data:image/png;
base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABtJREFUeNpiZGBgaGAgAjAxEAlGFVJHIUCAAQDcngCUgqGMqwAAAABJRU5ErkJggg==);
z-index:10000001;
position:absolute;
top:50%;
left:50%;
width:300px;
padding:10px;
margin:0 auto;
margin-top:-185px;
margin-left:-155px;
font-family:arial,helvetica,tahoma,verdana,sans-serif;
font-size:9pt;
color:#5e5e5e
}
#at_share{
margin:0;
padding:0
}
#at16pt{
position:relative;
background:#f2f2f2;
height:13px;
padding:5px 10px
}
#at16pt a,#at16pt h4{
font-weight:700
}
#at16pt h4{
display:inline;
margin:0;
padding:0;
font-size:9pt;
color:#4c4c4c;
cursor:default
}
#at16pt a{
position:absolute;
top:5px;
right:10px;
color:#4c4c4c;
text-decoration:none;
padding:2px
}
#at15sptx:focus,#at16pt a:focus{
outline:thin dotted
}
#at15s #at16pf a{
top:1px
}
#_atssh{
width:1px!important;
height:1px!important;
border:0!important
}
.atm{
width:10pc!important;
padding:0;
margin:0;
line-height:9pt;
letter-spacing:normal;
font-family:arial,helvetica,tahoma,verdana,sans-serif;
font-size:9pt;
color:#444;
background:url(data:image/png;
base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABtJREFUeNpiZGBgaGAgAjAxEAlGFVJHIUCAAQDcngCUgqGMqwAAAABJRU5ErkJggg==);
padding:4px
}
.atm-f{
text-align:right;
border-top:1px solid #ddd;
padding:5px 8px
}
.atm-i{
background:#fff;
border:1px solid #d5d6d6;
padding:0;
margin:0;
box-shadow:1px 1px 5px rgba(0,0,0,.15)
}
.atm-s{
margin:0!important;
padding:0!important
}
.atm-s a:focus{
border:transparent;
outline:0;
transition:none
}
#at_hover.atm-s a,.atm-s a{
display:block;
text-decoration:none;
padding:4px 10px;
color:#235dab!important;
font-weight:400;
font-style:normal;
transition:none
}
#at_hover.atm-s .at_bold{
color:#235dab!important
}
#at_hover.atm-s a:hover,.atm-s a:hover{
background:#2095f0;
text-decoration:none;
color:#fff!important
}
#at_hover.atm-s .at_bold{
font-weight:700
}
#at_hover.atm-s a:hover .at_bold{
color:#fff!important
}
.atm-s a .at-label{
vertical-align:middle;
margin-left:5px;
direction:ltr
}
.at_PinItButton{
display:block;
width:40px;
height:20px;
padding:0;
margin:0;
background-image:url(//s7.addthis.com/static/t00/pinit00.png);
background-repeat:no-repeat
}
.at_PinItButton:hover{
background-position:0 -20px
}
.addthis_toolbox .addthis_button_pinterest_pinit{
position:relative
}
.at-share-tbx-element .fb_iframe_widget span{
vertical-align:baseline!important
}
#at16pf{
height:auto;
text-align:right;
padding:4px 8px
}
.at-privacy-info{
position:absolute;
left:7px;
bottom:7px;
cursor:pointer;
text-decoration:none;
font-family:helvetica,arial,sans-serif;
font-size:10px;
line-height:9pt;
letter-spacing:.2px;
color:#666
}
.at-privacy-info:hover{
color:#000
}
.body .wsb-social-share .wsb-social-share-button-vert{
padding-top:0;
padding-bottom:0
}
.body .wsb-social-share.addthis_counter_style .addthis_button_tweet.wsb-social-share-button{
padding-top:40px
}
.body .wsb-social-share.addthis_counter_style .addthis_button_google_plusone.wsb-social-share-button{
padding-top:0
}
.body .wsb-social-share.addthis_counter_style .addthis_button_facebook_like.wsb-social-share-button{
padding-top:21px
}
@media print{
#at4-follow,#at4-share,#at4-thankyou,#at4-whatsnext,#at4m-mobile,#at15s,.at4,.at4-recommended{
display:none!important
}
}
@media screen and (max-width:400px){
.at4win{
width:100%
}
}
@media screen and (max-height:700px) and (max-width:400px){
.at4-thankyou-inner .at4-recommended-container{
height:122px;
overflow:hidden
}
.at4-thankyou-inner .at4-recommended .at4-recommended-item:first-child{
border-bottom:1px solid #c5c5c5
}
}
.at-share-tbx-element{
position:relative;
margin:0;
color:#fff;
font-size:0
}
.at-share-tbx-element,.at-share-tbx-element .at-share-btn{
font-family:helvetica neue,helvetica,arial,sans-serif;
padding:0;
line-height:0
}
.at-share-tbx-element .at-share-btn{
cursor:pointer;
margin:0 5px 5px 0;
display:inline-block;
overflow:hidden;
border:0;
text-decoration:none;
text-transform:none;
background-color:transparent;
color:inherit;
transition:all .2s ease-in-out
}
.at-share-tbx-element .at-share-btn:focus,.at-share-tbx-element .at-share-btn:hover{
transform:translateY(-4px);
outline-offset:-1px;
color:inherit
}
.at-share-tbx-element .at-share-btn::-moz-focus-inner{
border:0;
padding:0
}
.at-share-tbx-element .at-share-btn.at-share-btn.at-svc-compact:hover{
transform:none
}
.at-share-tbx-element .at-icon-wrapper{
vertical-align:middle
}
.at-share-tbx-element .at4-share-count,.at-share-tbx-element .at-label{
margin:0 7.5px 0 2.5px;
text-decoration:none;
vertical-align:middle;
display:inline-block;
background:none;
height:0;
font-size:inherit;
line-height:inherit;
color:inherit
}
.at-share-tbx-element.at-mobile .at4-share-count,.at-share-tbx-element.at-mobile .at-label{
display:none
}
.at-share-tbx-element .at_native_button{
vertical-align:middle
}
.at-share-tbx-element .addthis_counter.addthis_bubble_style{
margin:0 2px;
vertical-align:middle;
display:inline-block
}
.at-share-tbx-element .fb_iframe_widget{
display:block
}
.at-share-tbx-element.at-share-tbx-native .at300b{
vertical-align:middle
}
.at-style-responsive .at-share-btn{
padding:5px
}
.at-style-jumbo{
display:table
}
.at-style-jumbo .at4-spacer{
height:1px;
display:block;
visibility:hidden;
opacity:0
}
.at-style-jumbo .at4-count-container{
display:table-cell;
text-align:center;
min-width:200px;
vertical-align:middle;
border-right:1px solid #ccc;
padding-right:20px
}
.at-style-jumbo .at4-count{
font-size:60px;
line-height:60px;
font-weight:700
}
.at-style-jumbo .at4-count-title{
position:relative;
font-size:18px;
line-height:18px;
bottom:2px
}
.at-style-jumbo .at-share-btn-elements{
display:table-cell;
vertical-align:middle;
padding-left:20px
}
.at_flat_counter{
cursor:pointer;
font-family:helvetica,arial,sans-serif;
font-weight:700;
text-transform:uppercase;
display:inline-block;
position:relative;
vertical-align:top;
height:auto;
margin:0 5px;
padding:0 6px;
left:-1px;
background:#ebebeb;
color:#32363b;
transition:all .2s ease
}
.at_flat_counter:after{
top:30%;
left:-4px;
content:"";
position:absolute;
border-width:5px 8px 5px 0;
border-style:solid;
border-color:transparent #ebebeb transparent transparent;
display:block;
width:0;
height:0;
transform:translateY(360deg)
}
.at_flat_counter:hover{
background:#e1e2e2
}
html
각종 sns 에서 아이콘을 받어서 화면에 처리되는 코드이다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <div id="atstbx" class="at-share-tbx-element addthis-smartlayers addthis-animated at4-show" aria-labelledby="at-36503272-9b1a-4b88-88d0-4f48bd4553c2" role="region"> <span id="at-36503272-9b1a-4b88-88d0-4f48bd4553c2" class="at4-visually-hidden">AddThis Sharing Buttons</span> <div class="at-share-btn-elements"> <a role="button" tabindex="1" class="at-icon-wrapper at-share-btn at-svc-facebook" style="background-color: rgb(59, 89, 152); border-radius: 0%;" onclick="facebook_share()"><span class="at4-visually-hidden" >Share to Facebook</span> <span class="at-icon-wrapper" style="line-height: 32px; height: 32px; width: 32px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" version="1.1" role="img" aria-labelledby="at-svg-facebook-1" style="width: 32px; height: 32px;" class="at-icon at-icon-facebook"> <title id="at-svg-facebook-1">Facebook</title><g> <path d="M22 5.16c-.406-.054-1.806-.16-3.43-.16-3.4 0-5.733 1.825-5.733 5.17v2.882H9v3.913h3.837V27h4.604V16.965h3.823l.587-3.913h-4.41v-2.5c0-1.123.347-1.903 2.198-1.903H22V5.16z" fill-rule="evenodd"></path></g></svg></span></a><a role="button" tabindex="1" class="at-icon-wrapper at-share-btn at-svc-google_plusone_share" style="background-color: rgb(220, 78, 65); border-radius: 0%;" onclick="googole_share()"><span class="at4-visually-hidden" >Share to Google+</span><span class="at-icon-wrapper" style="line-height: 32px; height: 32px; width: 32px;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" version="1.1" role="img" aria-labelledby="at-svg-google_plusone_share-2" style="width: 32px; height: 32px;" class="at-icon at-icon-google_plusone_share"> <title id="at-svg-google_plusone_share-2">Google+</title><g> <path d="M12 15v2.4h3.97c-.16 1.03-1.2 3.02-3.97 3.02-2.39 0-4.34-1.98-4.34-4.42s1.95-4.42 4.34-4.42c1.36 0 2.27.58 2.79 1.08l1.9-1.83C15.47 9.69 13.89 9 12 9c-3.87 0-7 3.13-7 7s3.13 7 7 7c4.04 0 6.72-2.84 6.72-6.84 0-.46-.05-.81-.11-1.16H12zm15 0h-2v-2h-2v2h-2v2h2v2h2v-2h2v-2z" fill-rule="evenodd"></path></g></svg></span></a><a role="button" tabindex="1" class="at-icon-wrapper at-share-btn at-svc-twitter" style="background-color: rgb(29, 161, 242); border-radius: 0%;" onclick="twitter_share()"><span class="at4-visually-hidden">Share to Twitter</span><span class="at-icon-wrapper" style="line-height: 32px; height: 32px; width: 32px;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" version="1.1" role="img" aria-labelledby="at-svg-twitter-3" style="width: 32px; height: 32px;" class="at-icon at-icon-twitter"> <title id="at-svg-twitter-3">Twitter</title><g> <path d="M27.996 10.116c-.81.36-1.68.602-2.592.71a4.526 4.526 0 0 0 1.984-2.496 9.037 9.037 0 0 1-2.866 1.095 4.513 4.513 0 0 0-7.69 4.116 12.81 12.81 0 0 1-9.3-4.715 4.49 4.49 0 0 0-.612 2.27 4.51 4.51 0 0 0 2.008 3.755 4.495 4.495 0 0 1-2.044-.564v.057a4.515 4.515 0 0 0 3.62 4.425 4.52 4.52 0 0 1-2.04.077 4.517 4.517 0 0 0 4.217 3.134 9.055 9.055 0 0 1-5.604 1.93A9.18 9.18 0 0 1 6 23.85a12.773 12.773 0 0 0 6.918 2.027c8.3 0 12.84-6.876 12.84-12.84 0-.195-.005-.39-.014-.583a9.172 9.172 0 0 0 2.252-2.336" fill-rule="evenodd"></path></g></svg></span></a><a role="button" tabindex="1" class="at-icon-wrapper at-share-btn at-svc-kakao" style="background-color: rgb(250, 185, 0); border-radius: 0%;" onclick="kakaostory_share()"><span class="at4-visually-hidden">Share to Kakao</span><span class="at-icon-wrapper" style="line-height: 32px; height: 32px; width: 32px;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" version="1.1" role="img" aria-labelledby="at-svg-kakao-4" style="width: 32px; height: 32px;" class="at-icon at-icon-kakao"> <title id="at-svg-kakao-4">Kakao</title><g> <path d="M20.826 6h-9.652C10.524 6 10 6.51 10 7.138v9.336c0 .63.525 1.14 1.174 1.14h4.45c-.03 1.11-.507 2.318-1.196 3.39-.775 1.207-2.426 2.543-2.44 2.555-.13.12-.226.26-.23.456 0 .15.08.263.167.385l3.104 3.395s.15.154.274.183c.14.033.3.037.41-.045 5.374-4.032 6.15-9.085 6.285-11.82V7.137C22 6.508 21.475 6 20.826 6" fill-rule="evenodd"></path></g></svg></span></a><a role="button" tabindex="1" class="at-icon-wrapper at-share-btn at-svc-lineme" style="background-color: rgb(0, 195, 0); border-radius: 0%;" onclick="line_share()"><span class="at4-visually-hidden" >Share to LINE</span><span class="at-icon-wrapper" style="line-height: 32px; height: 32px; width: 32px;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" version="1.1" role="img" aria-labelledby="at-svg-lineme-5" class="at-icon at-icon-lineme" style="width: 32px; height: 32px;"> <title id="at-svg-lineme-5">LINE</title><g> <path d="M27 14.926C27 10.006 22.065 6 16 6S5 10.005 5 14.926c0 4.413 3.913 8.11 9.2 8.808.358.077.845.236.968.542.112.278.073.713.036.995l-.157.942c-.048.28-.22 1.088.953.593 1.174-.494 6.334-3.73 8.642-6.386C26.236 18.67 27 16.896 27 14.925zm-4.247-.41a.577.577 0 0 1 0 1.153h-1.61v1.03h1.61a.578.578 0 0 1 0 1.155h-2.186a.578.578 0 0 1-.577-.577v-4.37c0-.32.26-.578.577-.578h2.186a.578.578 0 0 1 0 1.153h-1.61v1.033h1.61zm-3.537 2.762a.575.575 0 0 1-.578.577.58.58 0 0 1-.46-.23l-2.24-3.05v2.703a.577.577 0 0 1-1.154 0v-4.37a.577.577 0 0 1 1.038-.347l2.24 3.05v-2.703a.578.578 0 0 1 1.154 0v4.37zm-5.26 0a.577.577 0 0 1-1.154 0v-4.37a.577.577 0 0 1 1.153 0v4.37zm-2.262.577H9.508a.577.577 0 0 1-.576-.577v-4.37a.577.577 0 0 1 1.153 0V16.7h1.61a.577.577 0 0 1 0 1.155z" fill-rule="evenodd"></path></g></svg></span></a><a role="button" tabindex="1" class="at-icon-wrapper at-share-btn at-svc-linkedin" style="background-color: rgb(0, 119, 181); border-radius: 0%;" onclick="linked_share()" ><span class="at4-visually-hidden">Share to LinkedIn</span><span class="at-icon-wrapper" style="line-height: 32px; height: 32px; width: 32px;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" version="1.1" role="img" aria-labelledby="at-svg-linkedin-6" style="width: 32px; height: 32px;" class="at-icon at-icon-linkedin"> <title id="at-svg-linkedin-6">LinkedIn</title><g> <path d="M26 25.963h-4.185v-6.55c0-1.56-.027-3.57-2.175-3.57-2.18 0-2.51 1.7-2.51 3.46v6.66h-4.182V12.495h4.012v1.84h.058c.558-1.058 1.924-2.174 3.96-2.174 4.24 0 5.022 2.79 5.022 6.417v7.386zM8.23 10.655a2.426 2.426 0 0 1 0-4.855 2.427 2.427 0 0 1 0 4.855zm-2.098 1.84h4.19v13.468h-4.19V12.495z" fill-rule="evenodd"></path></g></svg></span></a><a role="button" tabindex="1" class="at-icon-wrapper at-share-btn at-svc-tumblr" style="background-color: rgb(55, 69, 92); border-radius: 0%;" onclick="tumblr_share()"><span class="at4-visually-hidden">Share to Tumblr</span><span class="at-icon-wrapper" style="line-height: 32px; height: 32px; width: 32px;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" version="1.1" role="img" aria-labelledby="at-svg-tumblr-7" style="width: 32px; height: 32px;" class="at-icon at-icon-tumblr"> <title id="at-svg-tumblr-7">Tumblr</title><g> <path d="M19.59 22.176c-.392.186-1.14.348-1.695.362-1.682.045-2.008-1.18-2.022-2.07V13.93h4.218v-3.18H15.89V5.403h-3.076c-.05 0-.138.044-.15.157-.18 1.636-.947 4.51-4.133 5.66v2.71h2.124v6.862c0 2.35 1.733 5.688 6.308 5.61 1.544-.028 3.258-.674 3.637-1.23l-1.01-2.996" fill-rule="evenodd"></path></g></svg></span></a><a role="button" tabindex="1" class="at-icon-wrapper at-share-btn at-svc-reddit" style="background-color: rgb(255, 87, 0); border-radius: 0%;" onclick="reddit_share()"><span class="at4-visually-hidden">Share to Reddit</span><span class="at-icon-wrapper" style="line-height: 32px; height: 32px; width: 32px;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" version="1.1" role="img" aria-labelledby="at-svg-reddit-8" class="at-icon at-icon-reddit" style="width: 32px; height: 32px;"> <title id="at-svg-reddit-8">Reddit</title><g> <path d="M27 15.5a2.452 2.452 0 0 1-1.338 2.21c.098.38.147.777.147 1.19 0 1.283-.437 2.47-1.308 3.563-.872 1.092-2.06 1.955-3.567 2.588-1.506.634-3.143.95-4.91.95-1.768 0-3.403-.316-4.905-.95-1.502-.632-2.69-1.495-3.56-2.587-.872-1.092-1.308-2.28-1.308-3.562 0-.388.045-.777.135-1.166a2.47 2.47 0 0 1-1.006-.912c-.253-.4-.38-.842-.38-1.322 0-.678.237-1.26.712-1.744a2.334 2.334 0 0 1 1.73-.726c.697 0 1.29.26 1.78.782 1.785-1.258 3.893-1.928 6.324-2.01l1.424-6.467a.42.42 0 0 1 .184-.26.4.4 0 0 1 .32-.063l4.53 1.006c.147-.306.368-.553.662-.74a1.78 1.78 0 0 1 .97-.278c.508 0 .94.18 1.302.54.36.36.54.796.54 1.31 0 .512-.18.95-.54 1.315-.36.364-.794.546-1.302.546-.507 0-.94-.18-1.295-.54a1.793 1.793 0 0 1-.533-1.308l-4.1-.92-1.277 5.86c2.455.074 4.58.736 6.37 1.985a2.315 2.315 0 0 1 1.757-.757c.68 0 1.256.242 1.73.726.476.484.713 1.066.713 1.744zm-16.868 2.47c0 .513.178.95.534 1.315.356.365.787.547 1.295.547.508 0 .942-.182 1.302-.547.36-.364.54-.802.54-1.315 0-.513-.18-.95-.54-1.31-.36-.36-.794-.54-1.3-.54-.5 0-.93.183-1.29.547a1.79 1.79 0 0 0-.54 1.303zm9.944 4.406c.09-.09.135-.2.135-.323a.444.444 0 0 0-.44-.447c-.124 0-.23.042-.32.124-.336.348-.83.605-1.486.77a7.99 7.99 0 0 1-1.964.248 7.99 7.99 0 0 1-1.964-.248c-.655-.165-1.15-.422-1.486-.77a.456.456 0 0 0-.32-.124.414.414 0 0 0-.306.124.41.41 0 0 0-.135.317.45.45 0 0 0 .134.33c.352.355.837.636 1.455.843.617.207 1.118.33 1.503.366a11.6 11.6 0 0 0 1.117.056c.36 0 .733-.02 1.117-.056.385-.037.886-.16 1.504-.366.62-.207 1.104-.488 1.456-.844zm-.037-2.544c.507 0 .938-.182 1.294-.547.356-.364.534-.802.534-1.315 0-.505-.18-.94-.54-1.303a1.75 1.75 0 0 0-1.29-.546c-.506 0-.94.18-1.3.54-.36.36-.54.797-.54 1.31s.18.95.54 1.315c.36.365.794.547 1.3.547z" fill-rule="evenodd"></path></g></svg></span></a> <a role="button" tabindex="1" class="at-icon-wrapper at-share-btn at-svc-digg" style="background-color: rgb(34, 30, 30); border-radius: 0%;" onclick="digg_share()"><span class="at4-visually-hidden">Share to Digg</span><span class="at-icon-wrapper" style="line-height: 32px; height: 32px; width: 32px;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" version="1.1" role="img" aria-labelledby="at-svg-digg-9" class="at-icon at-icon-digg" style="width: 32px; height: 32px;"> <title id="at-svg-digg-9">Digg</title><g> <path d="M8.523 10h2.19v10.558H5v-7.486h3.523V10zm0 8.796v-3.963h-1.32v3.963h1.32zm5.273-5.724v7.486h-2.2v-7.486h2.2zm0-3.072v2.19h-2.2V10h2.2zm.88 3.072h5.726V23.19h-5.725v-1.75H18.2v-.882h-3.523v-7.486zm3.524 5.724v-3.963h-1.32v3.963h1.32zm3.082-5.724h5.714V23.19h-5.714v-1.75h3.513v-.882h-3.513v-7.486zm3.513 5.724v-3.963h-1.322v3.963h1.322z" fill-rule="evenodd"></path></g></svg></span></a> <a role="button" tabindex="1" class="at-icon-wrapper at-share-btn at-svc-digg" style="background-color: ; border-radius: 0%;" onclick="band_share()"><span class="at4-visually-hidden">Share to Digg</span><span class="at-icon-wrapper" style="line-height: 32px; height: 32px; width: 32px;"> <img src="//developers.band.us/img/share/button/ko/30x30.png" width="30" height="30" alt="밴드공유"> </span></a> </div> </div>
실질 적으로 적용할 자바스크립트 코드이다.
페이스북같은 경우는 내용을 삽하기 위해서는 api 코드가 있어야 하지만 facebook_share2() 방법
facebook_share() 방법으로는 타이틀 만 내보내 진다.
<script type="text/javascript">
//SNS 등 sharer 처리
var subLink="/main/cop/bbs/betterFreeBoardGetView.do?idx=${board.idx }";
var href="https://www.betterfuture.go.kr";
//개발서버
href="http://betterfuture.nitroeye.com";
function unescapeXml(str){
str = str.replaceAll("&", "&");
str = str.replaceAll("<", "<");
str = str.replaceAll(">", ">");
str = str.replaceAll("'", "'");
str = str.replaceAll(""", "\"");
str = str.replaceAll("'", "'");
return str;
}
function twitter_share(){
var text = "${board.board_title }";
var url = href+subLink;
var snsUrl = "http://twitter.com/home?status="+encodeURIComponent(text)+" "+ url;
var popup = window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
popup.focus();
}
function facebook_share(){
var text = "${board.board_title }";
var url = href+subLink;
var image =href+ "/libs/front/images/common/logo.png";
var summary = "${cleanContent}";
var summary ="";
var snsUrl = "http://www.facebook.com/sharer.php?s="+encodeURIComponent(summary)+"&u="+encodeURIComponent(url)+"&t="+encodeURIComponent(text)+"&i="+encodeURIComponent(image)+"&summary="+encodeURIComponent(summary);
var popup= window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
popup.focus();
}
function facebook_share2(){
var url = location.href;
var g_title = document.title;
FB.ui(
{
method: 'share',
href: url
}, function(response){});
}
window.fbAsyncInit = function() {
FB.init({
appId : '598147207229916',
xfbml : true,
version : 'v3.0'
});
FB.AppEvents.logPageView();
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function kakaostory_share(){
var title = "${board.board_title }";
title = title.substring(0,100);
//title = unescapeXml(title);
// title = title.replace(/\&(amp;)?/ig, ""); // 카스인경우 & 등록시 글자 짤림
var url =href+ "/main/cop/bbs/betterFreeBoardGetView.do?idx=${board.idx }";
var snsUrl = "https://story.kakao.com/share?url="+encodeURIComponent(url);
var popup= window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
popup.focus();
}
function googole_share(){
var title = "${board.board_title }";
var url = href+subLink;
var snsUrl = "https://plus.google.com/share?t="+encodeURIComponent(title)+"&url="+encodeURIComponent(url);
var popup= window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
popup.focus();
}
function line_share(){
var title = "${board.board_title }";
var url = href+subLink;
var description=$("#contents").text();
var snsUrl = "https://social-plugins.line.me/lineit/share?title="+encodeURIComponent(title)+"&url="+encodeURIComponent(url)+"&lng=ko&from=line_scheme";
var popup= window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
popup.focus();
}
function linked_share(){
var title = "${board.board_title }";
var url = href+subLink;
// var summary=unescapeXml($("#contents").text());
var snsUrl = "https://www.linkedin.com/shareArticle?title="+encodeURIComponent(title)+"&url="+encodeURIComponent(url)+"&lng=ko&mini=true";
var popup= window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
popup.focus();
}
function tumblr_share(){
var title = "${board.board_title }";
var url = href+subLink;
// var summary=unescapeXml($("#contents").text());
var snsUrl = "https://www.tumblr.com/widgets/share/tool?title="+encodeURIComponent(title)+"&canonicalUrl="+encodeURIComponent(url);
var popup= window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
popup.focus();
}
function reddit_share(){
var title = "${board.board_title }";
var url = href+subLink;
// var summary=unescapeXml($("#contents").text());
var snsUrl = "https://www.reddit.com/submit?v=300&source=tbx-300&lng=ko&title="+encodeURIComponent(title)+"&url="+encodeURIComponent(url);
var popup= window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
popup.focus();
}
function digg_share(){
var title = "${board.board_title }";
var url = href+subLink;
var snsUrl = "http://digg.com/submit?partner=addthis&title="+encodeURIComponent(title)+"&url="+encodeURIComponent(url);
var popup= window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
popup.focus();
}
function band_share(){
var title = "${board.board_title }";
var url = href+subLink;
var snsUrl = "http://www.band.us/plugin/share?body="+encodeURIComponent(title)+"&route="+encodeURIComponent(url);
var popup= window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
popup.focus();
}
</script>
저출 산 개발 시 사용한
betterFreeBoardGetView.jsp
소스 코드 내용이다.
<%@page import="com.etri.saml2.ecp.Response"%>
<%@page import="nitroeye.potal.cop.bbs.service.BetterfutureBoardVO"%>
<%@page import="nitroeye.potal.utl.fcc.service.PageBetterMakerAndSearch"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="nitroeye.com.cmm.security.Token"%>
<%@ include file="/WEB-INF/jsp/potal/main/inc/meta.jsp"%>
<%@ page import="nitroeye.com.cmm.service.CmmProperties"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%!
private String cleanXSS(String value) {
//You'll need to remove the spaces from the html entities below
value = value.replaceAll("<", "").replaceAll(">", "");
value = value.replaceAll("\\(", "").replaceAll("\\)", "");
value = value.replaceAll("'", "");
value = value.replaceAll("eval\\((.*)\\)", "");
value = value.replaceAll("[\\\"\\\'][\\s]*javascript:(.*)[\\\"\\\']", "\"\"");
value = value.replaceAll("script", "");
value=value.replaceAll("funE","");
value=value.replaceAll("\\|","");
value=value.replaceAll("|", "");
value=value.replaceAll("br/", "");
value=value.replaceAll("\\‘", "");
value=value.replaceAll("\\’", "");
value=value.substring(0, 30);
return value;
}
%>
<%
BetterfutureBoardVO vo =(BetterfutureBoardVO)request.getAttribute("board");
String cleanContent =cleanXSS(vo.getBoard_contents());
request.setAttribute("cleanContent", cleanContent);
%>
<meta property="og:image" content="http://betterfuture.go.kr/libs/common/images/favicon.png" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<!-- script type="text/javascript" src="<c:url value='/html/nitroeye/cmm/utl/htmlarea/WebEditor.js'/>" ></script-->
<script type="text/javascript" src="<c:url value='/commons/cmm/js/MultiFile.min.js'/>"></script>
<script type="text/javascript" src="<c:url value="/validator.do"/>"></script>
<!-- 네이버 에디터 -->
<!--
<script type="text/javascript" src="/commons/cmm/editor/js/HuskyEZCreator.js" charset="UTF-8"></script>
<script type="text/javascript" src="/commons/cmm/editor/js/jindo.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/commons/cmm/editor/photo_uploader/plugin/hp_SE2M_AttachQuickPhoto.js" charset="UTF-8"></script>
-->
<!-- 20180105 CK 에디터 변경 -->
<script type="text/javascript" src="/commons/ckeditor/ckeditor.js" charset="UTF-8"></script>
<validator:javascript formName="board" staticJavascript="false" xhtml="true" cdata="false" />
<c:if test="${anonymous == 'true'}">
<c:set var="prefix" value="/anonymous" />
</c:if>
${anonymous}
<style>
.pop-layer .pop-container {
padding: 20px 25px;
}
.pop-layer p.ctxt {
color: #666;
line-height: 25px;
}
.pop-layer .btn-r {
width: 100%;
margin: 10px 0 20px;
padding-top: 10px;
border-top: 1px solid #DDD;
text-align: right;
}
.pop-layer {
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 410px;
height: auto;
background-color: #fff;
border: 5px solid #3571B5;
z-index: 99999999999;
}
.dim-layer {
display: none;
position: fixed;
_position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999999999;
}
.dim-layer .dimBg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .5;
filter: alpha(opacity=50);
}
.dim-layer .pop-layer {
display: block;
}
a.btn-layerClose {
display: inline-block;
height: 25px;
padding: 0 14px 0;
border: 1px solid #304a8a;
background-color: #3f5a9d;
font-size: 13px;
color: #fff;
line-height: 25px;
text-decoration:none;
}
a.btn-layerClose:hover {
border: 1px solid #091940;
background-color: #1f326a;
color: #fff;
}
#phoneli {
background-color: #f5f5f7;
background-image: url(/libs/common/images/certification_phone.png);
background-position: 50% 32%;
background-repeat: no-repeat;
height: 200px;
width: 50%;
text-align:center;
margin-top:20px;
}
#phoneli p {
bottom: -122px;
color: #222222;
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
position: relative;
text-align: center;
width: 100%;
}
#phoneli p > a {
background-color: #2c5191;
color: #fff;
display: block;
font-size: 13px;
font-weight: bold;
height: 30px;
line-height: 26px;
margin: 0 auto;
text-align: center;
width: 80px;
}
#layer_cont_div__{
width:10%%;
}
.title{
background:#1465b4;
background:linear-gradient(to right, #1465b4 0%,#00b4b4 100%);
background:-moz-linear-gradient(left, #1465b4 0%, #00b4b4 100%);
background:-webkit-linear-gradient(left, #1465b4 0%,#00b4b4 100%);
color:#fff;
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1465b4', endColorstr='#00b4b4',GradientType=1 );
font-size:24px;
font-weight:bold;
height:48px;
padding-top:12px;
text-indent:20px;
}
#phoneAuthA{
text-decoration:none;
}
.article{
border-bottom: 1px solid #d2dce6;
border-top: 1px solid #d2dce6;
margin-bottom: 30px;
overflow: auto;
padding: 0 20px 0px 20px;
width: calc(100% - 40px);
}
.article .left{
text-align: left;
}
.article a{
text-decoration:none;
color:#666;
}
.article .right{
text-align:right;
}
ul.article li{
border-right: 1px solid #d2dce6;
float: left;
padding: 0 10px 0 10px;
width: calc(50% - 22px);
}
</style>
<!-- 자유토론방 전용 CSS -->
<link rel="stylesheet" href="/libs/common/css/global.css">
<link rel="stylesheet" href="/libs/common/css/sns.css">
</head>
<body id="depth${sessionScope.menuNo}" class="depth-type1"><!-- 아이디는 각 대메뉴에 숫자부여, 클래스는 -->
<c:import url="/PageLink.do?link=potal/main/inc/IncBlank" />
<c:import url="${conText}/sym/mms/MainMenuHead.do?flag=MAIN" />
<div class="sub-bg-top type1">
<div class="sub-bg-top__in">
</div>
</div>
<div class="sub-page-container wrap float-wrap">
<div class="sub-page-container__wrap float_wrap">
<c:import url="${conText}/sym/mms/MainMenuLeft.do" />
<!-- sub-contents -->
<section class="sub-contents">
<c:import url="${conText}/sym/mms/MainSubject.do" />
<!-- 2018-06-07 저출산고령사회위원회 변경 -->
<div class="content-primary">
<!-- 타이틀 -->
<div class="common-title">
<h3>자유토론방</h3>
</div>
<!-- ++++++++++++++++++++++++++++++++ content start ++++++++++++++++++++++++++++++++++ -->
<!-- 타이틀 -->
<div class="common-cont">
<!-- 서브내용 -->
<div class="asset">
<strong>저출산고령사회위원회는 토론의 장을 통해</strong><br>
<strong>제시된 여러분의 다양한 의견을 참고하여 정책에 반영토록 노력하겠습니다.</strong>
</div>
<div class="bbs-view-wrap" style="margin-bottom:20px;">
<div class="bbs-view-top-info">
${fn:substring(board.user_name,0,1)}** | ${ fn:replace(fn:substring(board.reg_date, 0, 10), '-' , '.' ) }
| 조회 ${board.bCount }
<div class="addthis_sharing_toolbox"
style="float:right;"
data-url='<c:url value="/main/cop/bbs/betterFreeBoardGetView.do?idx=${board.idx }" />'
data-title="${board.board_title }" style="clear: both">
<c:import url="/libs/snsIcon.jsp" />
<script type="text/javascript">
//SNS 등 sharer 처리
var subLink="/main/cop/bbs/betterFreeBoardGetView.do?idx=${board.idx }";
var href="https://www.betterfuture.go.kr";
//개발서버
href="http://betterfuture.nitroeye.com";
function unescapeXml(str){
str = str.replaceAll("&", "&");
str = str.replaceAll("<", "<");
str = str.replaceAll(">", ">");
str = str.replaceAll("'", "'");
str = str.replaceAll(""", "\"");
str = str.replaceAll("'", "'");
return str;
}
function twitter_share(){
var text = "${board.board_title }";
var url = href+subLink;
var snsUrl = "http://twitter.com/home?status="+encodeURIComponent(text)+" "+ url;
var popup = window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
popup.focus();
}
function facebook_share(){
var text = "${board.board_title }";
var url = href+subLink;
var image =href+ "/libs/front/images/common/logo.png";
var summary = "${cleanContent}";
var summary ="";
var snsUrl = "http://www.facebook.com/sharer.php?s="+encodeURIComponent(summary)+"&u="+encodeURIComponent(url)+"&t="+encodeURIComponent(text)+"&i="+encodeURIComponent(image)+"&summary="+encodeURIComponent(summary);
var popup= window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
popup.focus();
}
function facebook_share2(){
var url = location.href;
var g_title = document.title;
FB.ui(
{
method: 'share',
href: url
}, function(response){});
}
window.fbAsyncInit = function() {
FB.init({
appId : '598147207229916',
xfbml : true,
version : 'v3.0'
});
FB.AppEvents.logPageView();
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function kakaostory_share(){
var title = "${board.board_title }";
title = title.substring(0,100);
//title = unescapeXml(title);
// title = title.replace(/\&(amp;)?/ig, ""); // 카스인경우 & 등록시 글자 짤림
var url =href+ "/main/cop/bbs/betterFreeBoardGetView.do?idx=${board.idx }";
var snsUrl = "https://story.kakao.com/share?url="+encodeURIComponent(url);
var popup= window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
popup.focus();
}
function googole_share(){
var title = "${board.board_title }";
var url = href+subLink;
var snsUrl = "https://plus.google.com/share?t="+encodeURIComponent(title)+"&url="+encodeURIComponent(url);
var popup= window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
popup.focus();
}
function line_share(){
var title = "${board.board_title }";
var url = href+subLink;
var description=$("#contents").text();
var snsUrl = "https://social-plugins.line.me/lineit/share?title="+encodeURIComponent(title)+"&url="+encodeURIComponent(url)+"&lng=ko&from=line_scheme";
var popup= window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
popup.focus();
}
function linked_share(){
var title = "${board.board_title }";
var url = href+subLink;
// var summary=unescapeXml($("#contents").text());
var snsUrl = "https://www.linkedin.com/shareArticle?title="+encodeURIComponent(title)+"&url="+encodeURIComponent(url)+"&lng=ko&mini=true";
var popup= window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
popup.focus();
}
function tumblr_share(){
var title = "${board.board_title }";
var url = href+subLink;
// var summary=unescapeXml($("#contents").text());
var snsUrl = "https://www.tumblr.com/widgets/share/tool?title="+encodeURIComponent(title)+"&canonicalUrl="+encodeURIComponent(url);
var popup= window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
popup.focus();
}
function reddit_share(){
var title = "${board.board_title }";
var url = href+subLink;
// var summary=unescapeXml($("#contents").text());
var snsUrl = "https://www.reddit.com/submit?v=300&source=tbx-300&lng=ko&title="+encodeURIComponent(title)+"&url="+encodeURIComponent(url);
var popup= window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
popup.focus();
}
function digg_share(){
var title = "${board.board_title }";
var url = href+subLink;
var snsUrl = "http://digg.com/submit?partner=addthis&title="+encodeURIComponent(title)+"&url="+encodeURIComponent(url);
var popup= window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
popup.focus();
}
function band_share(){
var title = "${board.board_title }";
var url = href+subLink;
var snsUrl = "http://www.band.us/plugin/share?body="+encodeURIComponent(title)+"&route="+encodeURIComponent(url);
var popup= window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
popup.focus();
}
</script>
</div>
</div>
<div>
<!-- 파일 -->
<c:if test="${board.files >0 }" >
<c:import url="${conText}/cop/bbs/selectFileList2.do?r_idx=${board.idx }" />
</c:if>
</div>
<h4>${board.board_title }</h4>
<div style="word-break:break-all;word-spacing: 3px;" id="contents">
${board.board_contents }
</div>
</div>
<div class="cmmt-list-wrap">
<h4>
<img src="/libs/common/images/balloons.jpg" alt=""> 전체댓글 <strong>2</strong>
</h4>
<ul class="float_wrap">
<li>
<div class="cmmt-list-item">
<span><img src="/libs/common/images/pinkman.jpg" alt=""> 임** | 2018.05.23 22:06:50</span>
<p class="item1">5월 11일 정책 제안에 나름 심혈을 기울인 제안을 했음에도 불구하고 그 어떤 문자나 답변이 없군요.</p>
</div>
</li>
<li>
<div class="cmmt-list-item">
<span><img src="/libs/common/images/pinkman.jpg" alt=""> 임** | 2018.05.23 22:06:50</span>
<p class="item1">5월 11일 정책 제안에 나름 심혈을 기울인 제안을 했음에도 불구하고 그 어떤 문자나 답변이 없군요.</p>
</div>
</li>
</ul>
</div>
<!-- 페이징 시작-->
<!-- <div class='paging'>
<span class="left_b">
<a href="#" title="최신"><<</a>
<a href="#" title="다음"><</a>
</span>
<strong>1</strong>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<span class="right_b">
<a href="#" title="이전">></a>
<a href="#" title="처음">>></a>
</span>
</div> -->
<!-- 페이징 끝 -->
<div class="cmmt-write-box">
<!-- 인증되지 않은 사용자 -->
<c:choose>
<c:when test="${empty sessionScope.hpUserVO}">
<input type="hidden" name="boardidx" value="${board.idx }" />
<input type="hidden" name="board_title" value="${board.board_title }" />
<%
if (request.getAttribute("TOKEN_KEY") == null) Token.set(request);
%>
<input type="hidden" name="TOKEN_KEY" value="<%=request.getAttribute("TOKEN_KEY")%>" />
<textarea name="board_contents" cols="30" rows="5" class="in_textarea" placeholder="댓글을 입력해주세요." id="reContents"
<c:if test="${ empty sessionScope.hpUserVO }">
onclick="hpUserCheck()"
</c:if> ></textarea>
<a class="submit-btn" href="javascript:void(0)" onclick="hpUserCheck()">등록</a>
</c:when>
<c:otherwise>
<form action="" method="post" id="replyForm">
<input type="hidden" name="boardidx" value="${board.idx }" />
<input type="hidden" name="board_title" value="${board.board_title }" />
<%
if (request.getAttribute("TOKEN_KEY") == null) Token.set(request);
%>
<input type="hidden" name="TOKEN_KEY" value="<%=request.getAttribute("TOKEN_KEY")%>" />
<textarea name="board_contents" cols="30" rows="5" class="in_textarea" placeholder="댓글을 입력해주세요." id="reContents"
<c:if test="${ empty sessionScope.hpUserVO }">
onclick="hpUserCheck()"
</c:if> ></textarea>
<a class="submit-btn" href="javascript:void(0)" onclick="replyRegistAction()">등록</a>
</form>
</c:otherwise>
</c:choose>
</div>
<p class="align_center" style="margin-bottom:20px;">
<a href="#" class="list-go-btn" onclick="javascript:history.back()">이전화면</a>
<a href="#" class="list-go-btn" onclick="javascript:goSubMenuPage('040000','040300')">목록</a>
</p>
<ul class="article">
<c:if test="${not empty board.preTitle }">
<li class="left">
<a href="javascript:void(0)" onclick="nextAction(${board.preIdx})" >
<dl>
<dt name=""><a href="javascript:void(0)" onclick="nextAction(${board.preIdx})" >${board.preTitle }</a></dt>
<dd style="margin-top:15px;">< 이전글</dd>
</dl>
</a>
</li>
</c:if>
<c:if test="${not empty board.nextTitle }">
<li class="right">
<a href="javascript:void(0)" onclick="nextAction(${board.nextIdx})" >
<dl>
<dt name=""><a href="javascript:void(0)" onclick="nextAction(${board.nextIdx})">${board.nextTitle}</a></dt>
<dd style="margin-top:15px;">다음글 ></dd>
</dl>
</a>
</li>
</c:if>
</ul>
<form method="post" action="${conText}/cop/bbs/betterFreeBoardGetView.do" name="nextForm">
<input type="hidden" name="idx" id="nextFrmIdx">
</form>
<script>
function nextAction(idx){
$("#nextFrmIdx").val(idx);
document.nextForm.submit();
}
</script>
</div><!--//common-cont -->
<!--// 180528 -->
<!-- ++++++++++++++++++++++++++++++++ content end ++++++++++++++++++++++++++++++++++ -->
</div><!--//cont-in -->
</section>
</div>
</div>
<script>
$(document).ready(function(){
replyList();
});
function hpUserCheck(){
layer_popup("#layer2");
}
function replyRegistAction(){
var reContents=$("#reContents").val();
if(reContents==""){
alert("내용을 입력해 주세요.");
return;
}
var serialize=$("#replyForm").serialize();
$.ajax({
url:"/main/cop/bbs/freeBoardReplyInsertAction.do",
type:"post",
data:serialize,
dataType:"html",
success:function(result){
if($.trim(result)=="success"){
$("#reContents").val("");
replyList();
}else{
location.reload();
}
},
error:function(result){
alert("전송 오류 입니다.");
location.reload();
}
});
}
function replyList(){
var boardidx='${board.idx}';
$.ajax({
url:"<c:url value='/main/cop/bbs/betterReplyBoardList.do'/>",
type:"post",
data:{boardidx:boardidx},
dataType:"html",
success:function(result){
$(".cmmt-list-wrap").html(result);
},
error:function(result){
alert("전송 오류 입니다.");
}
});
}
//페이징 클릭시
function pagingBetterFuture(page){
$("#page").val(page);
$("#frmIdx").val('${board.idx}');
$("#frmBoardIdx").val('${board.idx}');
//alert('${board.idx}');
var serialize=$("#frm5").serialize();
//console.log(serialize);
$.ajax({
url:"<c:url value='${conText}/cop/bbs/betterReplyBoardList.do'/>",
type:"post",
data:serialize,
dataType:"html",
success:function(result){
$(".cmmt-list-wrap").html(result);
},
error:function(result){
alert("전송 오류 입니다.");
}
});
}
</script>
<script>
$(document).ready(function(){
$('#btnexample1').click(function(){
var $href = $(this).attr('href');
layer_popup($href);
});
$("#btnexample2").click(function(){
var $href = $(this).attr('href');
layer_popup($href);
});
$("#btnexample3").click(function(){
var $href = $(this).attr('href');
layer_popup($href);
});
});
function layer_popup(el){
var $el = $(el); //레이어의 id를 $el 변수에 저장
var isDim = $el.prev().hasClass('dimBg'); //dimmed 레이어를 감지하기 위한 boolean 변수
isDim ? $('.dim-layer').fadeIn() : $el.fadeIn();
var $elWidth = ~~($el.outerWidth()),
$elHeight = ~~($el.outerHeight()),
docWidth = $(document).width(),
docHeight = $(document).height();
// 화면의 중앙에 레이어를 띄운다.
if ($elHeight < docHeight || $elWidth < docWidth) {
$el.css({
marginTop: -$elHeight /2,
marginLeft: -$elWidth/2
})
} else {
$el.css({top: 0, left: 0});
}
$el.find('a.btn-layerClose').click(function(){
isDim ? $('.dim-layer').fadeOut() : $el.fadeOut(); // 닫기 버튼을 클릭하면 레이어가 닫힌다.
return false;
});
$('.layer .dimBg').click(function(){
$('.dim-layer').fadeOut();
return false;
});
}
</script>
<!-- 팝업 레이어 -->
<div class="dim-layer">
<div class="dimBg"></div>
<div id="layer2" class="pop-layer">
<div class="pop-container">
<div class="pop-conts">
<!--content //-->
<div class="layer_cont" id="layer_cont_div__" style="display:inline-b
댓글 ( 5)
댓글 남기기