본문 바로가기

HTML39

PHP - console.log를 php 코드에서 사용하기 크롬에서 PHP 디버깅 하기 안녕하세요. 고코더입니다. 자바스크립트에서 흔히 쓰는 console.log는 좋은 기능 입니다. 브라우저에 있는 개발자 툴을 이용해 디버깅을 가능하게 하여서 좀 더 빠르고 쉽게 개발을 가능하게 해줍니다. 그런데 스크립트 언어에 자격으로 가능한 이 방식을 간단한 소스로서버 언어에서 사용이 가능합니다. 방식은 아마 모든 언어가 해당 방식처럼 개발하면 사용이 가능합니다. 우선 저는 PHP 버전을 만들어 봤습니다. 말은 거창하지만 그냥 데이터를 받아 스크립트 언어에 담는 거 뿐입니다. ▼ 소스는 아래와 같다. 자바스크립트 console.log로 데이터를 보내 확인 가능하게 하는 원리 입니다. ▼생각보다 유용하고 쓸만하다. 추천 컨텐츠 console.log - 개발자도구 콘솔 창에 안.. 2017. 11. 6.
jQuery | Plugin - select 박스 검색 가능하게 검색 가능한 select 박스 셀렉트 박스의 옵션이 많아지면 스크롤 길이도 어마 어마 하고 불편합니다.오름순으로 정렬 하여 데이터를 나열하면 되지만.우리의 클라이언트들은 참을성이 많지가 않습니다. 그래서 오늘은 아주 쓸만한 컴포넌트를 준비했습니다.select2 라는 jquery 플러그인이다.아래 홈페이지에서 자세한 정보를 찾아보자.https://select2.org/ 하지만 익스프레스하게 알려드리기 위해아주 기초적이고 간단하게 코딩을 해보았습니다. ▼우선 아래처럼select2.css , select2.js를 참조 시키자 그리고 jquery는 기본12cs ▼참고로 jquery 참조 URL은 외웁시다.1cs http://code.jquery.com/jquery.min.jshttp://code.jquery.c.. 2017. 11. 2.
Javascript - 아이폰,안드로이드 기기 체크 자바스크립트로 아이폰 체크하기 이젠 아이폰 점유율이 절반 가까운 이 시점에윈도우와 안드로이드만을 두고 개발하는 시대가 끝난거 같습니다. 간단한 예로 어플도 아이폰과 안드로이드 두개를 만들어놓고접속하는 기기단말을 보고 분기하여 안드로이드일땐 플레이 스토어 어플로아이폰일땐 아이툰즈 어플로 링크를 보내줘야 할것 입니다. 그래서 오늘은 이 체크하는 방법을 아래처럼 다뤄봤다. navigator : 브라우저 전반에 걸친 정보를 제공하는 객체이다.platform : 브라우저를 실행하는 플랫폼 (기기) 가 무엇인지 말해준다. 아래처럼 아주 간단하게 코딩이 완성 되었습니다.그밖에도 navigator 객체를 이용하여 클라이언트의 접속 환경을 알아낼 수 있습니다. var UserAgent = navigator.platfor.. 2017. 11. 2.
JavaScript - select 박스의 option value, text 가져오기 셀렉트 박스의 옵션 값과 텍스트 값 가져오기 셀렉트 박스를 다룰 때 간단하지만 자주 찾고 자주 까먹는 방법입니다. options[target.selectedIndex].text : 셀렉트 박스 옵션 사이에 있는 텍스트 값을 가져온다options[target.selectedIndex].value : 셀렉트 박스 value 의 값을 가져온다. ▼ 아래처럼 하면은 셀렉트박스의 text 값과 value 값을 가져오는 방법이 됩니다. A B C var target = document.getElementById("selectBox"); alert('선택된 옵션 text 값=' + target.options[target.selectedIndex].text); // 옵션 text 값 alert('선택된 옵션 value.. 2017. 8. 31.
IDE - 홈에디터플러스 설치하기 Home Edit Plus 설치하기 만능 에디터 에디터플러스 설치를 해보겠습니다. IDE가 너무 많이 발전해서 사실주력으로 개발툴로 쓰기는 부족하죠. 코드 어시스전트가 없는게 가장 큰 단점이긴 한데심플한 기능 만큼 가볍게 문서를 열고 닫고 보기에는 최고의 툴인것은 확실 합니다.아무리 큰 소스 파일을 열어도 절대 버벅이지 않는 엄청난 성능 최고죠.결론은 메모장 대용으로 쓰기에도 최고이니 개발자라면 그냥 설치해 둡시다!! 우선 아래 URL로 접속합니다.https://www.editplus.com/kr/ ▼ 그리고 최신버전으로 다운로드 ▼ 자 넥스트입니다. ▼ 언어는 당연히 한글로.. ▼ 기본설정 그대로 설치해주세요. ▼ 이전에 쓰던 INI파일을 불러 올수 있습니다. ▼ 그리고 각자 평가하기나 구매후 완료를 .. 2017. 7. 13.
Bootstrap | 강의 | 04 - 부트스트랩으로 이미지를 다루어 보자. / caption을 달아보자. 1. 부트스트랩으로 이미지를 다루어 보자 - 초보 개발자들에게는 어렵게 CSS와 HTML 조합으로 홈페이지 디자인을 만들어도 이미지 다루기 어려웠던 기억이 있을 것입니다. - 부트스트랩은 이 이미지 마저 쉽게 다룰수 있도록 각종 방법을 만들어 놓았습니다. - 이번 시간에는 가볍게 이미지를 다뤄 보겠습니다. 2. 우선 이미지를 노출 시켜보자 1. 이미지를 아래처럼 추가시켜 보자 - 위치는 게시판에 맨위다. - div 안에 img 태그로 이미지를 첨부해보자. - 이미지는 이걸 다운 (무료이미지) ▼ 위치는 게시판에 맨위다. 이름 나이 주소 지브이 26 상수동 하이리 26 태릉입구 래부기 26 망원동 글쓰기 1 2 3 ▼이런 웹에서 확인해보니 엉망이다. 반응형 웹에서 이미지만 반응하지 않고 있습니다.멋진 이미.. 2017. 7. 9.
CSS - 엑셀 다운로드 출력시 셀서식 지정 엑셀 다운로드 출력시 셀서식 지정 안녕하세요 고코더 입니다. HTML을 작성하고 이를 엑셀로 다운로드 받을 수 있습니다.프로그램 개발시 만들어야 하는 대표적 기본 기능 입니다. 자주 마주치는 문제는 셀서식에 "01" 데이터를 숫자로 넣으면 "1"로 표현하여 노출 됩니다. ▼엑셀에서도 설서식 설정 없이 "01"을 입력하면 "1"로 기록 됩니다.그래서 그런지 HTML로 엑셀 다운로드 기능으로 언어에서 엑셀을 다운받으면01를 1로 노출 됩니다. 이럴땐 HTML에 style에 서식을 설정하면 해결 가능합니다. ▼대표적으로 실무에서 많이 쓰는형식만 우선 예제로 만들어 봤다.숫자형식 문자형식 소수점 형식날짜형식 아까처럼 "01"이 정상적으로 보일려면 문자형식으로 지정하면 해결 됩니다. 이외에 다양한 형식은 ->ht.. 2017. 7. 5.
HTML - 프레임(frame)으로 홈페이지 구동하기 예제 프레임(frame)으로 홈페이지 구동하기 이유가 어찌 됐든 frame 안에사이트를 구동하여 서비스 하게될 계기가 있습니다.URL 갖다 쓰는 구조라던가 템플릿 구조라든지 아래 HTML에 SRC 속성에 사이트 주소를 주면깜쪽 그 페이지에 있던 사이트 마냥 홈페이지가 구동 될 것입니다. ▼ 아래 소스를 실행해보자123456789101112 Colored by Color Scriptercs ▼결과 화면HTML 페이지에 지금 보는 제 블로그포스트가 빈틈없이 노출되고 있는게 보입니다. 2017. 7. 5.
호스트 - host 파일 변경 후 즉시 적용 안될 때 호스트 변경 후 즉시 적용 안될 때 ▼원도우 검색해서 cmd 로 검색 ▼CMD 창에서 ipconfig /flushdns 해당 명령어를 실행해주면 즉시 적용 된다. 그래도 안될 경우에는 (크롬기준)▼크롬을 열고 아래 사이트 주소를 URL 입력창에 치고 들어가보자 chrome://net-internals/#dns ▼DNS 에서 clear host cache를 클릭 하면 된다. 그래도 안되는 경우가 있다면 위에 방법을 선행 후 크롬 시크릿 모드로 접속해서 사용해보자 마무리 호스트가 헷갈리면 착오 개발이 많아지니꼭 flush 하는 습관을 기르도록 하세요 2017. 7. 4.