감성 퍼블리셔 html,css

[javascript] 마우스 우클릭 방지/개발자도구 보기 방지/소스보기/F12보기 방지태그

빅범코딩 — Thu, 20 Apr 2017 22:26:42 +0900

여러분들은 웹사이트/모바일 제작할때 제이쿼리나 CSS 보려고

F12를 통한 개발자 도구함을 통해 소스보기 해보신적 있으신가요?

저는 에이젼시 이전 멀티샵 쇼핑몰에서 근무할때 아주 일상이였습니다.

그때는 이렇다할 스킬과 웹표준에 대한 개념이 잡히기 전이라,

기획쪽에서 경쟁사 사이트에서 괜찮은 제이쿼리나 효과들이 있다면 바로 적용하길 바랬거든요..ㅎㅎ

덕분에 능력치에 버거운 경우도 많았지만

그런 연습기간이 있었기에 약간의 요령도 생겼던 것 같습니다.ㅎㅎ

이번에 단순한 태그 및 자바스크립트는

이런 소스보기를 방지하기 위한 태그입니다. 물론 100% 막지는 못하지만

어느정도의 간섭을 막아주죠~

하단 자바스크립트 소스를 간단하게 연동하여 사용가능합니다.

var ns = (document.layers)?true:false;
var ie = (document.all)?true:false;
if (ns) document.captureEvents(Event.MOUSEDOWN || Event.CLICK);
document.onclick = sourcecodeprotect;
document.onmousedown = sourcecodeprotect;

//********************************************
function sourcecodeprotect(e){
if (ns&&(e.which==3)) return false;
else if (ie&&(window.event.button==2)) alert("Source code protected");
else return true;
}

document.onkeydown = function(){
if (event.keyCode == 123) {

}
}

자바코드로 쉽게 넣을수 있습니다

웹페이지에서 공동으로 사용되는 항목에 넣어주시면 됩니다

자바의 Event.Keycode는 하단의 표를 참조하여 주세요

빨갛게 표기된 부분을 하단 코드를 참조하여 방지를 할 수 있습니다.

간단한 소스다 보니 요긴하게 쓰일듯 싶네요^^

[Mobile] 모바일 화면 미리보기 Daum Troy plug-in

빅범코딩 — Wed, 4 Jan 2017 22:06:22 +0900

[Mobile] 모바일 화면 미리보기 Daum Troy plug-in

안녕하세요. 오랜만에 글 남깁니다.

요새 에이전시에서 퍼블리싱을 하다가 친한형님과 창업을 하게 되어 정신없이 지내고 있네요^^

덕분에 퍼블리싱은 많이는 못하지만 간간히 모바일, 웹사이트 유지보수 개념으로 만지고 있네요..

관련해서 제가 한창 퍼블리싱 할적에 도움이 많이 되었던 사이트 하나를 소개하려고 합니다.

http://troy.labs.daum.net/

이구요. 다음에서 제공하는 모바일별 화면 미리보기 플러그인입니다.

익스플로어 보단,

크롬, 사파리 등으로 확인해보심을 권장합니다.^^

모바일 퍼블리싱을 하고 모바일 종류별로 체크를 하고 싶은데 환경적으로 어려움이 있을때

이 사이트를 이용하여 간략하게 체크할 수 있습니다.

물론 직접 모바일로 보는거와는 100% 일치하지는 않지만,

어느정도의 싱크를 자랑하여 모바일 기종이 한정적일때 여러모로 효과적입니다.

위에 보여지는 왼쪽메뉴를 보시면

각 모바일별 모델이(삼성,LG,애플,구글 등 많은 기기) 있어 클릭 후 해당 기종 선택

테스트하고자 하는 url를 입력하여 보실 수 있습니다.

위의 이미지 보이시죠? 맨 위에 모바일을 가로로 기울였을때의 화면도 연출하여

@media 태그 및 반응형 코딩을 했을때 다양하게 체크할 수 있습니다. 신기방기

기본적인 퍼블리싱은 본인의 모바일로 테스트 후

타기종 모델이 한정적일때는 본 사이트를 참고하여 체크해보시는 것도 좋습니다.

저 역시도 한창에 많은 도움을 받았습니다^^

그럼 간간히 글 쓰도록 하겠습니다.

감사합니다.

디자인 관련 사이트

빅범코딩 — Thu, 6 Aug 2015 13:28:29 +0900

로고 및 심볼관련

http://www.brandsoftheworld.com

http://seeklogo.com

PSD 관련

http://www.freepik.com

일러스트 관련

http://www.freevectors.me/search/love

http://www.fordesigners.com

자바 스크립트 구문목록 javascript

빅범코딩 — Fri, 17 Apr 2015 17:16:51 +0900

자바 스크립트 구문

자바 스크립트 문장들은 다양한 구문으로 작성되어있습니다.
다음은 일부분의 스크립트 동작의 제어를 주는 몇가지 구문에 대한 목록입니다.

키워드	기술
break	스위치 나 루프를 종료
continue	루프 점프 상단에서 시작
debugger	자바 스크립트의 실행 및 호출 (사용 가능한 경우) 디버깅 기능을 중지
do ... while	조건이 true 인 동안, 문 블록을 실행하고 블록을 반복
for	문 블록이 실행되는 마크, 한 조건이 true 인
function	함수를 선언합니다
if ... else	마크 문장 블록은 조건에 따라 실행되는
return	기능을 종료
switch	마크 문장 블록이 다른 경우에 따라 실행되는
try ... catch	문장 블록에 오류 처리를 구현
var	변수를 선언

text 관련 css 스타일 (줄바꿈 및 글자 자르기, 점선표기 등)

빅범코딩 — Thu, 16 Apr 2015 14:48:03 +0900

text 관련 css 스타일 (줄바꿈 및 글자 자르기, 점선표기 등)

white-space:normal;

normal이 기본값, 여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식한다. 지정된 넓이의 끝에서 자동으로줄바꿈한다.

- 코드에서의 원래 텍스트

여수 밤바다 이 조명에 담긴 아름다운 얘기가 있어 네게 들려주고파

white-space:pre;

띄어쓰기는 실제 입력한 칸 수대로, 줄바꿈도 엔터를 친 대로 나온다. 넘어가는 부분에서 강제 줄바꿈은 되지 않는다.

white-space:nowrap;

여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식한다.

넓이를 지정하였어도 자동으로 줄바꿈 되지 않게 강제로 개행을 막아준다.

word-break

텍스트가 들어가는 블럭요소의 넓이에 맞춰 줄바꿈 하는 CSS (강제 줄바꿈 방지, 텍스트길이 제한)

white-break:normal;

normal이 기본값, 단어 단위로 끊어서 줄바꿈 한다 .
(단어 단위로 줄바꿈되어 오른쪽 공간이 꽉차지 않고 비어있는 형태다.)

word-break:break-all;

글자 단위로 줄바꿈 한다. (글자단위로 줄바꿈이 되어 글자가 박스 안에서 가득차는 형태다.)

word-breka:keep-all;

한글일 경우 띄어쓰기 기준으로 줄바꿈 해준다. (ie계열/아시아 언어만 지원,파폭 3.5이상에서는 지원)

text-overflow

텍스트가 overflow 되었을때 어떻게 처리할 것인가를 나타내는 CSS ( overflow 속성이 값을 갖고 있을때 적용가능)

text-overflow:clip;

엘리먼트 테두리에서 글자가 잘리게 된다.

text-overflow:ellipsis;

테두리에 닿을 정도가 되면 자동으로 ....을 넣어준다.

적용시 참고사항

text-overflow:ellipsis는고정된 width값, white-space:nowrap; overflow:hidden 속성이 있어야 적용가능하다.

div{ width:250px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; padding:10px; border:1px solid #e5e5e5; background:#f5f5f5; }

특수문자, 숫자, 영어가 띄어쓰기 없이 나열되었을때, (한글과 표기되는 형식이 다르다.)

기본값을 그대로 쓴다면 지정된 엘리먼트 밖으로 글자가 뚫고 나온다.

1. word-break:break-all 을 사용 하여 자동줄바꿈이 되게 해야 한다.
2. 파폭, 오페라는 이 속성이 적용되지 않기 때문에 word-break:break-word 를 사용하여야 한다.
3. table 안에 td에 적용 할러면 table-layout:fixed;를 사용한다.

출처: http://dolly77.tistory.com/5

네이버 API 지도 활용

빅범코딩 — Tue, 14 Apr 2015 17:51:50 +0900

네이버 API 지도 활용

먼저 하단의 주소에 네이버에서 제공하는 API키를 발급받습니다.

https://developer.naver.com/openapi/register.nhn (API 키 발급받기)

위 페이지로 갔을시 항목중에 '지도 API 부분'에서 적용하고자 하는 사이트URL 로 발급키를 생성합니다.

해당키값 + 노출하고자 하는 주소지를 아래와 같은 형식으로 검색!

http://openapi.map.naver.com/api/geocode.php?key=발급받은키&encoding=euc-kr&coord=LatLng&query=검색주소지

샘플주소 : http://openapi.map.naver.com/api/geocode.php?key=test&encoding=utf-8&coord=tm128&query=경기도성남시정자1동25-1

이와같이 URL를 입력하면 페이지내에는 아래와 같은 내용을 보여줍니다.

내용을 잘 보시면 검색한 주소지를 X값, Y값으로 추출한것이 보여집니다. 이부분을 필히 적어놓아주세요!

해당 좌표로 기본소스부분에 적용하시면 됩니다. (아래소스)

기본적으로 html 본문에 작성하는 태그이다.

head 안에 발급받은 키로 스크립트를 불러온다.

<head>

</head>

<body>

<div id="map">
<script type="text/javascript">
var oPoint = new nhn.api.map.LatLng(37.5675451, 126.9773356); // y값,x값순으로 기재
var defaultLevel = 11; //기본 줌 설정

  //기본
  var oMap = new nhn.api.map.Map(document.getElementById('map'), {
  point : oPoint,
  zoom : defaultLevel,
  enableWheelZoom : true,
  enableDragPan : true,
  enableDblClickZoom : false,
  mapMode : 0,
  activateTrafficMap : false,
  activateBicycleMap : false,
  minMaxLevel : [ 1, 14 ],
  size : new nhn.api.map.Size(800, 480) // 지도 사이즈 가로*세로
  });

  //줌
  var oSlider = new nhn.api.map.ZoomControl();
  oMap.addControl(oSlider);
  oSlider.setPosition({
  top : 10,
  left : 10
  });

  //지도 타입
  var oMapTypeBtn = new nhn.api.map.MapTypeBtn();
  oMap.addControl(oMapTypeBtn);
  oMapTypeBtn.setPosition({
  bottom : 10,
  right : 110
  });

  //실시간 교통
  var trafficButton = new nhn.api.map.TrafficMapBtn();
  trafficButton.setPosition({
  bottom:10,
  right:180
  });

oMap.addControl(trafficButton);

  //마커
  var oSize = new nhn.api.map.Size(28, 37);
  var oOffset = new nhn.api.map.Size(14, 37);
  var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);
  var oPoint = new nhn.api.map.LatLng(37.5675451, 126.9773356);
  var oMarker = new nhn.api.map.Marker(oIcon, { title : '약도 장소' }); //말풍선 부분

oMarker.setPoint(oPoint);
oMap.addOverlay(oMarker);

  var oLabel = new nhn.api.map.MarkerLabel();
  oMap.addOverlay(oLabel);
  oLabel.setVisible(true, oMarker);
  //oLabel.setVisible(true, oMarker);     //마커 표시 설정
</script>

</div>

</body>

이렇게 좌표를 적용하고, 저장을 합니다. (*좌표는 기본맵, 마커부분에 동일 적용합니다.)

적용한 페이지에서 확인을 하시면 아래와 같이 지도부분이 출력이 됩니다.

뚜뚠!! 나름 손이 좀 가는 작업이였습니다...

웹표준 접근성 마크 획득에 있어서 타사이트에서 제공하는 지도API의 웹표준과 어긋난다고 하여 고생이 나름 있었습니다.

요근래 제공하는 지도API에 대해서 규율이 엄격해졌다고 하시네요..ㅠ (저희 입장에서는 타사에서 제공해주는 것을 가져다 쓰는것이라, 많은 어려움이 있죠..제공해주는 업체쪽에 푸쉬를 한다고는 하는데 신속한 보완은 당연히 어렵겠죠..)

들은바에 따르면 구글은 아예 비표준화 되어있고, 다음은 약간에 키보드 접근의 미비함이 있다고 합니다.

담당자분께서 그나마 네이버 API가 가장 접근성에 가깝다고하여 적용방법에 대해서 작성하였습니다.

저와 같은 고충에 힘겨워 하셨다면 조금이라도 도움이 되었으면 하네요

네이버 API 메뉴얼 가이드 : http://developer.naver.com/wiki/pages/JavaScript

기본적인 내용에 대해서만 적용하였으니 해당 메뉴얼 페이지도 확인해서 커스텀하셔도 될 듯합니다!

마우스 관련 jQuery 및 javascript 이벤트 목록 (Mouse event)

빅범코딩 — Fri, 27 Mar 2015 15:53:13 +0900

마우스 관련 jQuery 및 javascript 이벤트 목록 (Mouse event)

내용이 누락된것이 있을 수 있지만, 최대한 모아놓것을 정리한것이다.

제이쿼리를 사용할시 일부 기능에 따라 커스텀 할때 부분적으로 수정을 해야할때가 있다. 이때 조금이라도 도움이 될 수 있도록
Mouse 관련 이벤트 항목을 몇개 정리해보았습니다.

이벤트명	발생내용 및 설명
onmousedown	마우스가 개체 위를 눌렀을 때 발생 목록 참조
onmouseenter	사용자가 마우스포인터로 개체 위에 들어갔을 때 발생 목록 참조
onmouseleave	마우스포인터가 개체의 범위 밖으로 이동하면 발생 목록 참조
onmousemove	마우스가 개체 위에서 이동하였을 때 목록 참조
onmouseout	마우스가 개체 위에서 이탈하였을 때 목록 참조
onmouseover	마우스가 개체 위로 이동하였을 때 목록 참조
onmouseup	마우스가 개체 위 누른 것을 해제하였을 때
onfocus	마우스나 탭에 의한 항해로개체에 초점(포커스)이 주어 졌을 때
onlosecapture	마우스에 의한 캡쳐(capture)가 상실되었을 때 발생

*ex)

$('button').mouseover(function(){

jQuery(".gnbL").mouseenter(function(e){

이와 같은 부분을 일부 수정하여 효과를 달리 할 수 있다.

tabindex의 기능 및 역할 [html,css]

빅범코딩 — Wed, 25 Mar 2015 11:39:09 +0900

웹접근성을 통과하기 위해선 마우스를 사용하지 않고, 키보드 tab키만으로도 모든 객체에 접근이 가능해야만 한다. 이에 tab키에 의한 동작이 순서에 따라 이동되지 않을때, 페이지가 로딩될 시 tabindex를 적용하여 순차적인 이동이 가능하도록 하는 태그이다.

tabindex=”1″

문서 안에서 가장 먼저 초점을 받을 수 있습니다. 그러나 자연스러운 마크업 순서를 거스르기 때문에 주의해서 사용해야 합니다. 검색엔진 사이트에서 검색창에 사용하면 적합하지만(이 대신 autofocus=”autofocus” 속성이 더 적절할 듯 해요) 그 외 적합한 경우는 잘 떠오르지 않는군요.

tabindex=”0″

키보드 초점을 받을 수 없는 div, span과 같은 요소도 초점을 받을 수 있도록 만들어 줍니다. 초점을 받되 초점을 받는 순서는 자연스러운 마크업 순서를 따릅니다.

tabindex=”-1″

키보드 초점을 받을 수 있는 요소도 초점을 받을 수 없도록 만들어 줍니다. 초점을 받을 수 없기 때문에 “-1″ 이외의 다른 음의 정수 값은 사실상 의미가 없습니다.

기본 effect 메소드 종류 [jQuery]

빅범코딩 — Mon, 23 Mar 2015 11:22:03 +0900

jQuery는 그래픽 제작툴에서 제공하는것과 흡사한 도큐먼트의 변화를 표시하기 위한 다양한 애니메이션 효과를 위한 메소드가를 제공한다.

기본 이펙트 메소드

show() : 엘리먼트를 나타나게 한다.

hide() : 엘리먼트를 사라지게 한다.

toggle() : 엘리먼트가 사라졌다 나타나도록 하는 상태를 반복한다.

slideDown() : 해당 엘리먼트의 앞에 원하는 내용을 추가한다.

slideUp() : 엘리먼트의 높이가 서서히 0에 가깝게 줄어가며 사라진다.

slide Toggle() : 해당 엘리먼트의 상태에 따라, 위로 사라지게 하거나 내려서 등장시킨다.

fadeIn() : 엘리먼트의 불투명도를 점점 높여서 엘리먼트가 보이도록 한다.

fadeOut() : 불투명도를 점점 감소하면서 해당 엘리먼트를 서서히 사라지게 한다.

fadeTo() : 대상 엘리먼트를 지정한 투명도 값으로 변경한다.

fadeToggle() : 엘리먼트를 감추거나 나타나기를 반복한다.

animate() : 엘리먼트를 감추거나 나타나기를 반복한다.

어트리뷰트를 다루그 위한 메소드 종류

빅범코딩 — Mon, 23 Mar 2015 10:53:49 +0900

어티리뷰트(Attribute:속성)는 요소에 부가적인 정보를 첨가하고자 할 때 사용하는 것이다.

기본 어트리뷰를 다루기 위한 메소드

attr() : 엘리먼트의 어트리뷰 값을 가져오고, 설정

removeAttr() : 엘리먼트의 어트리뷰 값을 제거

클래스 어트리뷰를 다루기 위한 메소드

addClass() : 엘리먼트의 클래스명으로 스타일을 입힌다.

removeClass() : 엘리먼트에 클래스명으로 스타일을 제거한다.

toggleClass() : 엘리먼트에 해당 클래스가 있으면 제거하고, 없으면 추가한다.

hasClass() : 엘리먼트에 클래스 존재여부를 확인한다,

DOM 대체를 위한 메소드

html() : 엘리먼트의 태그 내부의 HTML 콘텐츠를 얻어온다.

html(Content) : 엘리먼트의 태그 내부의 HTML 콘텐츠를 변경한다,

val() : 폼 엘리먼트에서 value 어트리뷰트 값을 가져온다.

val(Content) : 폼 엘리먼트에서 value 어트리뷰 값을 설정한다.