웹퍼블리셔의 팁 창고

jQuery(document).ready(function() {

var zn_hash_url = document.location.toString();

if (zn_hash_url.match('#')) {

jQuery('.tabbable a[data-toggle="tab"][href="#'+zn_hash_url.split('#')[1]+'"]').tab('show');

$('html, body').animate({scrollTop:0}, 'slow');

}

});

Open tabs with anchor links : https://my.hogash.com/documentation/open-tabs-with-anchor-links/

- STR > Biz > Tab 메뉴

- Kallyas Theme

<style type="text/css">

/* IE10과 IE11 : -ms-high-contrast */

@media all and (-ms-high-contrast:none)

{

.BizIcon {padding-top:50px;}

.StrPortfolioTitle {padding-top:120px;}

.StrPortfolioSlider {padding-top:85px;}

/* 메인 슬라이더 링크 버튼(>) 위치 재지정 */

#rev_slider_1_1 > ul > li.tp-revslider-slidesli > div:nth-child(6) > div.tp-loop-wrap > div.tp-mask-wrap {top:-60px;}

}

</style>

STR Main Page IE 전용 CSS (Kallyas Theme) : header.php에 적용

나눔스퀘어

@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');

@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

'Nanum Gothic'

font-weight : 400, 700, 800

'NanumSquare'

font-weight : 300, 400, 700, 800

body, h1, h2, h3, h4, h5, h6, li, p, span, div {font-family:"Montserrat","Nanum Square","NanumSquare", sans-serif !important; letter-spacing:0px !important;}

========================================================================================================

나눔명조

<link href="https://fonts.googleapis.com/css?family=Nanum+Myeongjo:400,700,800&amp;subset=korean" rel="stylesheet">

<style>@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:400,700,800&subset=korean');</style>

font-family: 'NanumMyeongjo', serif;

========================================================================================================

본고딕1

@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

font-family: "Noto Sans KR", sans-serif;

글자 굵기(font-weight)는 100, 300, 400, 500, 700, 900를 지원합니다.

- Referance : https://www.cmsfactory.net/node/20020

본고딕2

<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700" rel="stylesheet">

<style>

@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');

</style>

font-family: 'Noto Sans', sans-serif;

body, h1, h2, h3, h4, h5, h6, li, p, span, div {font-family:"Roboto","Noto Sans KR", sans-serif !important; letter-spacing:0px !important;}

본고딕3

Thin(100)

Light(300)

Regular(400)

Medium(500)

Bold(700)

Bolder(900)

@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

body {font: 24px/30px 'Noto Sans KR', sans-serif;}

.thin {font-weight: 100;}

.light {font-weight: 300;}

.regular {font-weight: 400;}

.medium {font-weight: 500;}

.bold {font-weight: 700;}

.bolder {font-weight: 900;}

<p><span class="thin">반갑습니다.</span></p>

<p><span class="light">반갑습니다.</span></p>

<p><span class="regular">반갑습니다.</span></p>

<p><span class="medium">반갑습니다.</span></p>

<p><span class="bold">반갑습니다.</span></p>

<p><span class="bolder">반갑습니다.</span></p>

- Referance : https://moonspam.github.io/Noto-Sans-Korean-Web-Fonts/

@media only screen and (max-width: 767px) {

.header_container {position:fixed !important; top:0 !important; z-index:5000 !important; background:#fff !important; width:100% !important;}

#site_content {margin-top:65px !important;}

}

Medi-Whale / Folie Theme / Codeless Builder

https://kriesi.at/support/topic/sticky-menu-for-mobile-submenu/

API 삽입 소스

<div id="DaumMap" style="width:1300px; height:600px;"></div>

<div id="DaumMapMain"></div>

<script src="http://dapi.kakao.com/v2/maps/sdk.js?appkey=카카오 개발자사이트 (https://developers.kakao.com)에서 발급받은 키값"></script>

<script>

var mapContainer = document.getElementById('DaumMapMain'), // 지도를 표시할 div 

    mapOption = {

        center: new daum.maps.LatLng(36.39085, 127.40654), // 지도의 중심좌표

        level: 4, // 지도의 확대 레벨

        mapTypeId : daum.maps.MapTypeId.ROADMAP // 지도 종류

    }; 

// 지도를 생성한다 

var map = new daum.maps.Map(mapContainer, mapOption);

// 마우스 휠과 모바일 터치를 이용한 지도 확대, 축소를 막는다

map.setZoomable(false);

// 지도에 마커를 생성하고 표시한다

var marker = new daum.maps.Marker({

    position: new daum.maps.LatLng(36.39085, 127.40654), // 마커의 좌표

    map: map // 마커를 표시할 지도 객체

});

// 마커 위에 표시할 인포윈도우를 생성한다

var infowindow = new daum.maps.InfoWindow({

    content : '<div style="padding:5px; text-align:center; margin:0 auto;">세이프텍리서치</div>' // 인포윈도우에 표시할 내용

});

// 인포윈도우를 지도에 표시한다

infowindow.open(map, marker);

</script>

퍼가기 소스

<!-- * Daum 지도 - 지도퍼가기 -->

<!-- 1. 지도 노드 -->

<div id="daumRoughmapContainer1511238395374" class="root_daum_roughmap root_daum_roughmap_landing"></div>

<!--

2. 설치 스크립트

* 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다.

-->

<script charset="UTF-8" class="daum_roughmap_loader_script" src="http://dmaps.daum.net/map_js_init/roughmapLoader.js"></script>

<!-- 3. 실행 스크립트 -->

<script charset="UTF-8">

new daum.roughmap.Lander({

"timestamp" : "1511238395374",

"key" : "kjms",

"mapWidth" : "1300",

"mapHeight" : "600"

}).render();

</script>

카카오 개발자 센터(Kakao Developers) : https://developers.kakao.com/apps/163263

다음 지도 Web API Wizard : http://apis.map.daum.net/web/

위도,경도로 구글지도 검색하기 : http://umint.tistory.com/1

위치검색, 위성(위도,경도), 고도찾기 - 구글지도 : http://blog.naver.com/PostView.nhn?blogId=fly2husky&logNo=220166727618

HamaSoft Daum Map - 워드프레스 플러그인 : http://www.hamasoft.com/hamas-daum-map/

구글맵에서 위도, 경도 좌표 추출하는 법 : https://guideple.wordpress.com/2013/09/10/구글맵에서-위도-경도-좌표-추출하는-법/

구글맵 - 구글 지도로 위도 경도 찾는 방법 : http://leelsm.tistory.com/45