본문 바로가기

WEB CODING/OPEN SOURCE16

웹 페이지 소스 보기 차단 웹 페이지 소스 보기 차단 기능에 대한 설명 일단은 웹 페이지의 소스 보기를 차단해주는 스크립트이다. 먼저 알아두어야 할 것은 웹 페이지의 소스 보기를 완벽하게 차단하는 것은 불가능하다. 웹 페이지의 소스 보기는 차단을 해도 다른 방식으로 확인이 가능하다. 아래 소스는 기본적으로 숨기는 기능이지 웹 페이지의 소스를 완벽하게 차단하는 것은 아니다. JS 개발자 도구 창 오픈 단축키 F12 키를 차단하는 스크립트이다. // f12 block $(document).ready(function(){ $(document).bind('keydown',function(e){ if ( e.keyCode == 123 /* F12 */) { e.preventDefault(); e.returnValue = false; } }); }); 개발자 도구 창.. 2020. 8. 29.
웹사이트 파비콘(favicon) 만드는 방법 웹사이트 파비콘(favicon) 만드는 방법 파비콘( favicon )이란? 웹브라우저 상단 탭에 웹사이트의 이름 옆 아이콘을 파비콘이라고 한다. 대부분 해당 웹사이트의 로고를 파비콘으로 나타낸다. 파비콘( favicon )을 만드는 방법 파비콘을 만드는 방법을 검색하면 대부분 어느 사이트에 가서 이미지 파일 형식을 .ico로 변환 시켜야 한다는 내용들이 대부분이지만 굳이 .ico 파일로 변환하지 않고 .png파일로 작업해서 적용시켜도 된다. - 파비콘 작업 사이즈는 가로 : 16px / 세로 : 16px 가로, 세로 각각 16픽셀로 만들어서 디자인 작업을 한다. - 디자인 작업이 완료 되면 해당 폴더에 업로드 한 후, HTML 파일 head 태그에 아래 소스를 삽입한다. 2020. 8. 11.
엣지 브라우저에서 IP에 링크 안 걸리게 하는 방법 엣지 브라우저에서 IP에 링크 안 걸리게 하는 방법 엣지 브라우저에서 아래와 같은 현상이 나올 경우 해결하는 방법이다. - 엣지 브라우저에서 IP주소에 파란색 및 줄이 나오는 현상 - 엣지 브라우저에서 숫자에 판란색 밑줄로 링크가 걸리는 현상 해결 방법 1. 메타태그에 소스를 추가해주는 방법 000.000.000.000 2. 태그 속성에 소스를 추가해주는 방법 000.000.000.000 2020. 8. 10.
CSS로 텍스트의 배경 색상만 투명하게 하기 CSS로 텍스트의 배경 색상만 투명하게 하기 기능에 대한 설명 텍스트 태그가 있는 부모 태그의 배경 색상을 투명하게 하면 하위 태그에 있는 글자 색상도 같이 투명하게 된다. 아래 방법은 글자 색상의 투명도는 그대로인 상태로 배경 색상만 투명하게 하고 싶을 때 쓰는 CSS이다. HTML Title CSS .bg-image { background: #000; width: 100%; height: 500px; position: relative; } p { color: #fff; font-size: 30px; padding: 50px; width: 200px; background: rgba(255, 255, 255, 0.3); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%.. 2020. 8. 9.
사이드 버튼 클릭시 레이아웃이 튀어나오는 기능 사이드 버튼 클릭시 레이아웃이 튀어나오는 기능 기능에 대한 설명 사이드에 붙어 있는 버튼을 클릭하면 레이아웃이 옆으로 튀어나오게 하는 기능이다. 사이드에 레이아웃을 감추고 보여지게 하는데 유용하게 쓰인다. HTML 버튼 레이아웃 CSS #slide-btn { position: fixed; right: 0; top: 75px; } #box { background: black; height: 82px; margin-right: -101px; transition: margin 0.2s ease-out; position: relative; width: 182px; } #box.active { margin-right: -3px; transition: margin 0.2s ease-out; } #btn { background: white; color: blac.. 2020. 8. 9.
숫자 카운트 기능 오픈소스 숫자 카운트 기능 오픈소스 기능에 대한 설명 - 숫자 카운트 기능이 있는 오픈소스이다. CountUp.js https://inorganik.github.io/countUp.js/ CountUp.js //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// CountUp.js C inorganik.github.io 2020. 8. 8.
마우스 오른쪽 버튼 클릭하면 메뉴가 나오는 오픈소스 ContextMenu 마우스 오른쪽 버튼 클릭하면 메뉴가 나오는 오픈소스 ContextMenu 기능에 대한 설명 - 마우스 오른쪽 클릭하면 메뉴가 나오는 오픈소스이다. jquery ContextMenu swisnl.github.io/jQuery-contextMenu/demo.html jQuery contextMenu (2.x) Find jQuery contextMenu (2.x) on GitHub. swisnl.github.io 2020. 8. 6.
라디오 버튼의 탭 메뉴 기능 라디오 버튼의 탭 메뉴 기능 기능에 대한 설명 - 탭 메뉴 기능이 되는 라디오 버튼이다. HTML contents 01 contents 02 contents 01 contents 02 JS 2020. 8. 5.
콘텐츠에 내용 없을 때 쓰기 좋은 텍스트 소스 콘텐츠에 내용 없을 때 쓰기 좋은 텍스트 소스 기능에 대한 설명 - 콘텐츠의 내용이 없을 때 내용을 임시로 채워 넣기 위해서 쓰이는 텍스트 소스이다. Lipsum www.lipsum.com/ Lorem Ipsum - All the facts - Lipsum generator What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type spec www.lipsum.com 2020. 8. 4.