본문 바로가기

WEB CODING52

웹 페이지 소스 보기 차단 웹 페이지 소스 보기 차단 기능에 대한 설명 일단은 웹 페이지의 소스 보기를 차단해주는 스크립트이다. 먼저 알아두어야 할 것은 웹 페이지의 소스 보기를 완벽하게 차단하는 것은 불가능하다. 웹 페이지의 소스 보기는 차단을 해도 다른 방식으로 확인이 가능하다. 아래 소스는 기본적으로 숨기는 기능이지 웹 페이지의 소스를 완벽하게 차단하는 것은 아니다. 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.
:nth-child / :nth-last-child / :first-child / :last-child :nth-child / :nth-last-child / :first-child / :last-child :nth-child 사용방법 5번째에 있는 태그에 CSS를 주는 방법 1 2 3 4 5 6 7 8 9 10 11 5번째에 위치해 있는 태그들에게 CSS를 주는 방법 1 2 3 4 5 6 7 8 9 10 11 5번째에 위치해 있는 태그들에게 -1을 주었을 때 CSS를 주는 방법( 4번째 위치해 있는 태그들이 선택된다. ) 1 2 3 4 5 6 7 8 9 10 11 :nth-last-child 시용방법 뒤에서 부터 시작해서 7번째에 위치해 있는 태그에 CSS를 주는 방법 1 2 3 4 5 6 7 8 9 10 11 뒤에서 부터 시작해서 7번째에 위치해 있는 태그들에게 CSS를 주는 방법 1 2 3 4 5 6 7 8 9 10 11 뒤에서부터 시작해서 7번째에 위치해 있는 태그들에게 -1을 주었을 때 CSS를 주.. 2020. 8. 17.
아톰 에디터(Atom Editor) 작업환경 설정 아톰 에디터(Atom Editor) 작업환경 설정 아톰 에디터의 작업환경을 간단하게 설정해보자. 1. File > Setting을 클릭한다. 2. Editor를 클릭하고 아래 이미지 처럼 체크를 해줍니다. 3. 아톰 에디터에서 세로로 줄이 있는 것을 삭제해주려면 Setting > wrap-guide의 Disable 버튼을 클릭합니다. 4. 필요한 Packages를 설치할 수 있습니다. 이것을 설치하면 오른쪽에 소스 코드의 미니맵을 볼 수가 있습니다. 아래 이미지 참조 2020. 8. 16.
웹사이트 파비콘(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.
텍스트 편집기(Text Editor) 텍스트 편집기(Text Editor) 텍스트 편집기( Text Editor )란? 단어의 자동완성 기능 외에 코딩 작업을 수월하게 할 수 있도록 다양한 기능들이 있는 Editor입니다. 텍스트 편집기( Text Editor )는 여러가지가 있습니다. 종류가 다양한 만큼 각각의 장단점들이 있어서 어느 것을 딱 좋다고 말할 수 없습니다. 자신에게 맞는 편집기를 선택해서 쓰면 됩니다. 1. 에디트플러스( EditPlus ) 에디트플러스는 편리한 단축키가 많고 좋은 기능들이 많습니다. 하지만 30일 체험판으로 사용이 가능하며, 기간이 끝나면 프로그램을 처음 열때마다 체험판 기간이 만료되었다는 팝업이 나옵니다. 그럴때마다 팝업을 안보이는 구석에 드래그로 끌어다 넣기가 귀찮습니다. 그래도 작업할 때는 편리하기 때문에 처음 웹코딩을 시작하는 분들에게 추.. 2020. 8. 7.