본문 바로가기

WEB_TECH

alert대신 jquery mobile의 dialogue를 사용하기 dialogue박스를 이용하면 예쁜 팝업창을 띄울 수 있습니다. function errDialog(message){$("#errMsg").html(message);$.mobile.changePage($("#errAlert"),{transition:"pop",role:"dialog"});return;} Error Message닫기 더보기
iscroll로 carousel구현 carousel은 인디케이터가 달린 멋진 네비게이션 입니다.iscroll로 carousel을 구현할 수 있는데 그 방법은 정말 심플하네요. 1. A robot may not injure a human being or, through inaction, allow a human being to come to harm.2. A robot must obey any orders given to it by human beings, except where such orders would conflict with the First Law.3. A robot must protect its own existence as long as such protection does not conflict with the First .. 더보기
iscroll을 사용하여 모바일웹 내부에 스크롤 만들기 iScroll은 스마트폰에서 화면의 우측에 브라우저 스크롤을 매우 작고 유려하게 표현되도록 만들어진 자바스크립트 라이브러리 입니다. 사용방법은 다음과 같습니다. iScrollPretty row 1Pretty row 2Pretty row 3Pretty row 4Pretty row 5Pretty row 6Pretty row 7Pretty row 8Pretty row 9Pretty row 10Pretty row 11Pretty row 12Pretty row 13Pretty row 14Pretty row 15Pretty row 16Pretty row 17Pretty row 18Pretty row 19Pretty row 20Pretty row 21Pretty row 22Pretty row 23Pretty row .. 더보기
모바일 웹 기본페이지 이것을 기본페이지로 설정해 놓고 사용하면 편리할 것 같습니다. DOCUMENT 더보기
모바일웹 브라우저 주소창 감주기 모바일기기에서 브라우저 상단은 화면크기를 많이 깍아먹는 결과를 가져옵니다.가능하면 주소입력창을 보이지 않게 해 주면 예쁜 페이지가 됩니다.이렇게 만드는 코드는 다음과 같습니다. 태그 사이에 다음의 자바스크립트 코드를 넣어주면 페이지가 로드를 완료했을 때 문서의 최상단이 화면의 처음부분으로 가기때문에 브라우저의 주소창이 사라진것처럼 보입니다. 더보기
모바일웹 meta 태그를 사용한 페이지 크기 제어 모바일 웹의 기본해상도는 각 모바일 기기의 화면크기에 맞게 나와야 하기 때문에 가로 크기를 device-width 속성을 사용합니다.웹페이지의 크기를 제어하는 태그 속성입니다.---------------------------------------------------------------------------------width=device-width 각 모바일 기기의 해상도에 맞춰서 보일 수 있도록 설정initial-scale= 페이지가 보이는 기본 비율을 설정 ( 아이폰은 scale이 1이면 가로 320px에 맞춰집니다.)maximun-scale= 페이지가 보이는 최대 비율minimum-scale= 페이지가 보이는 최소 비율user-scalable= 모바일 기기에서 웹 페이지의 확대 가능 여부 지정-.. 더보기
웹페이지에 네이버지도 표시하는 방법 웹페이지에 네이버지도를 넣을 수 있습니다. https://dev.naver.com/openapi/register 이곳에 가서 지도 API인증키를 발급받아야 합니다. 그다음 아래경로로 가서 예제소스를 퍼옵니다.http://dev.naver.com/openapi/apis/map/javascript_2_0/example 여러가지 예제중 적당한 것을 골라서 퍼옵니다. 그다음 사용하고자 하는 주소의 경도와 위도를 얻어냅니다.지도는 주소로 표시되지 않고 코드에 위도와 경도값을 넣어줘야 합니다. http://openapi.map.naver.com/api/geocode.php?key=4e875208b896d36c2d3d4fd4b695b225&encoding=euc-kr&coord=LatLng&query=서울시 서초구 .. 더보기
css3를 활용하여 모션주기. transition 문법transition property duration timing-function delay; 사용예-webkit-transition: all 2s ease; JavaScript로 사용object.style.transition=“width 2s”; Prefix -o-box-shadow -moz-box-shadow -webkit-box-shadow Prefix 는 표준제정 이후에도 유효 ---------------------------------------------------------------------------Property Description---------------------------------------------------------------------------transition.. 더보기
css3 transform을 사용하여 모양 변형 시키기 transform은 엘리먼트를 변형할 수 있도록 만드는 스타일입니다.webkit계열이나 오페라 파이어폭스는 각Prefix에 맞게 사용하면 됩니다.Prefix -o-box-shadow -moz-box-shadow -webkit-box-shadow Prefix 는 표준제정 이후에도 유효합니다. 문법transform : 메서드() Sample -webkit-transform: rotate(90deg) scale(1.2) skew(2deg); JavaScript로 스타일 넣는 방법 object.style.transform=“rotate(3deg)”; -------------------------------------------------------------------------------Function Des.. 더보기
css3 모서리가 둥근 사각형 만들기 사각형의 모서리를 둥글게 하려면 예전에는 이미지 파일을 사용하였으마 CSS3에서 border-radius 속성값을 지정하는 것만으로도 구현할 수 잇게 되었습니다. 사용방법-webkit-border-radius: 15px; 코드 예를 살펴보죠. 첫번째 박스 두번째 박스 세번째 박스 코드를 실행하면 이런 결과가 나옵니다. 더보기