본문 바로가기
자바스크립트(js), css 수정 후 바뀐 내용이 브라우저에 바로 적용 되지 않을 때 HTML 파일에서 JS와 CSS를 import해서 페이지를 작성 할 때 자주 만나는 문제가 있다. JS(자바스크립트) 또는 CSS의 내용을 변경하고 웹서버로 업로드 했는데 바뀐 내용이 바로 적용 되지 않을 때가 있다. JS와 CSS는 브라우저에서 캐쉬를 저장하는데 같은 페이지를 다시 접속 할 때 속도를 빠르게 하는 효과도 있고 트래픽도 절약 할 수 있다. 캐쉬 파일은 로컬(PC 또는 모바일)에 저장 되는 임시 파일이기 때문에 웹서버에 변경 된 새 파일을 업로드 해도 캐쉬 타임이 지나지 않으면 브라우저는 계속 로컬에 저장 된 캐쉬 파일을 읽어 온다. 이럴 때는 import 하는 태그 명령줄에 버전 형태의 변화를 주면 된다. 가장 간단하게 JS 파일을 import 하는 태그 형태다. myjs.js의 내용을 .. 프로그래밍/CSS & JS & Jquery 2019. 9. 17.
로그인 등에 사용하는 input type 속성을 password와 text 간단하게 변경하기(javascsript) 이번에 새로 바뀐 지음빌더 로그인 화면. 과거에는 아이디와 비밀번호를 입력하는 창 앞에 텍스트로 입력칸 설명이 붙었다. 그런데 요즘은 input 입력 창 안에 옅은 색으로 아이디, 비밀번호라는 입력 항목 이름을 넣는다. 이렇게 비밀번호 입력 칸에 포커스가 발생하면 "비밀번호"라는 한글은 사라지고 input의 type 속성은 password로 바뀌게 할 수 있다. 전에는 자바스크립트를 이용해서 type 속성이 text인 것과 password 인 것 두 개를 만들어 놓고 click이나 keypressdown 이벤트가 발생하면 두 개의 input를 바꿔치기 하는 방법을 많이 썼다. 왜냐하면 처음부터 type 속성을 password로 하면 "비밀번호"라는 한글은 "****" 이렇게 보이기 때문이다. 이걸 jQu.. 프로그래밍/CSS & JS & Jquery 2019. 9. 17.
html 레이어 요소(div, span, img 등) 투명도 조절하기 filter:alpha(opacity=80); opacity:0.8; -moz-opacity:0.8; 이 문장은 투명도를 80%로 하겠다는 뜻이다. 내용 이런 레이어가 있을 때 투명도를 조절하고 싶을 때는 흰 배경의 레이어 투명도를 40%로 했기 때문에 희미하게 배경이 투영 된 레이어가 된다. 프로그래밍/CSS & JS & Jquery 2019. 9. 17.
jQuery, 초간단하게 ajax로 프로세스 비동기 요청(서버 호출)하고 싶을 때. $.post() $.post("/ajax.resize.php", { bo_table: "", wr_id: "" }, function(data){ }); 이 예시는 실제로 지음빌더에서 이미지를 리사이징 할 때 사용한 jquery 문장. view.skin.php에서 onload에서 처리 했음. $.post("프로세스 경로", { json 형식의 데이터 }, function(data) { 결과 처리 } 프로세스 경로 : 호출 할 프로그램 경로 json 형식의 데이터 : 프로세스로 넘겨 질 json 형식의 데이터. 생략 가능 결과 처리 : data는 프로세스에서 넘겨 준 결과 값. 프로그램 실행 후에 처리 해야 할 것들을 여기서 처리 프로그래밍/CSS & JS & Jquery 2019. 9. 17.
자바스크립트(javascript)에서 브라우저의 종류와 버전 알아내기 코드는 jQuery이다. browser = (function(){ var a = navigator.userAgent.toLowerCase(); var b,v; if(a.indexOf("safari/") > -1) { b = "safari"; var s = a.indexOf("version/"); var l = a.indexOf(" ", s); v = a.substring(s+8, l); } if(a.indexOf("chrome/") > -1) { b = "chrome"; var ver = /[ \/]([\w.]+)/.exec(a)||[]; v = ver[1]; } if(a.indexOf("firefox/") > -1) { b = "firefox"; var ver = /(?:.*? rv:([\w.]+)|).. 프로그래밍/CSS & JS & Jquery 2019. 9. 17.
ajax로 form 내용을 비동기로 전송하기 // 클라이언트 코드 var fdata = $("#form").serialize(); $.ajax({ type: "POST", url: "process.php?"+fdata, contentType: "application/json; charset=utf-8", dataType:'json' }).success(function(result){ // 성공했을 때 alert(result.d1); }).error(function(result, status, error){ // 에러 처리 }); //-- 서버쪽 코드 header('Cache-Control: no-cache, must-revalidate'); header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); header('Co.. 프로그래밍/CSS & JS & Jquery 2019. 9. 17.
모바일에서 이미지 크기를 div, span, td 등에 폭 맞추기 img { max-width:100%; } * { max-width:100%; } 처음엔 이렇게 했었는데 swipe가 작동 안 한다는 걸 알았습니다. 이것 때문에 한참을 애먹었는데 div를 옆으로 드래그 하면 숨은 영역까지 브라우저를 확장해 크기를 100%로 계속 늘리기 때문에 swipe가 안 되는 거였습니다. 그런데 가끔 큰 이미지를 스마트폰 화면 폭에 맞춰야 할 때가 있는데 디바이스 크기가 제각각이라 이미지를 디바이스 폭에 맞춰 JS로 고정 시키는 방법이 있지만 max-width를 쓰면 간단하게 해결이 됩니다. img를 감싸고 있는 틀에 이미지 폭을 맞춥니다. 이 때는 img 태그의 width, height 속성은 무시하게 됩니다. 반대로 min-width:400px; 이렇게 하면 폭이 400px 미.. 프로그래밍/CSS & JS & Jquery 2019. 9. 17.
viewport를 이용해 모바일 웹(앱)에서 이미지, 텍스트 사이즈를 디바이스 크기에 맞추기 meta name="viewport" : 뷰포트 선언 content="width=device-width" : 콘텐츠를 표현할 넓이 intial-scale=1 : 초기 크기 설정(기본 꽉찬 화면) minimum-scale=1 : 최소 크기 설정 (기본값 : 0.25, 범위 : 0~10.0) maximum-scale=1 : 최대 크기 설정(최대 배율 범위 : 0~10.0) user-scalable=no : 사용자 단말의 확대기능 사용 유무 선언(yes/no) 처음 모바일웹을 작성 할 때 애먹었던 게 폰트와 이미지 사이즈였다. 수많은 모바일 화면 크기를 어떻게 알고 각각의 이미지 사이즈를 변경할까 고민이 컷다. 하지만 viewport를 설정하는 태그 한 줄이면 해결이 가능했다. 보여지고 있는 콘텐츠를 화면에 .. 프로그래밍/CSS & JS & Jquery 2019. 9. 17.

티스토리툴바