본문 바로가기

잡(job)기술33

JQuery Mobile 페이지 연결 JQuery Mobile 을 이용하여, 요소를 data-role="page" 로 지정하면 페이지 컨테이너로 사용하여 페이지 전환을 그 컨테이너 내부에서 이뤄지도록 할 수 있다.head 에는 JQuery mobile 을 사용할 수 있도록 구성을 해준다.JQuery Mobile 1.4.5 로 오면서 data-add-back-btn 속성에 대해서 지원하지 않게 된 건지 예제 코드에서 실행이 되지 않는다.우선은 link 와 script 설정을 다음과 같이 해줬다. 페이지 별로 data-role="page" 속성을 넣어주면, 첫번째 태그의 내용만 나타나게 된다.첫 번째 페이지 헤더 첫 번째 페이지 내용두 번째 내부 페이지 링크세 번째 외부 페이지 링크 첫 번째 페이지 풋터#page2 로 링크된 내용은 같은 페이지.. 2016. 10. 4.
유동형 웹사이트 반응형 웹사이트는 하나의 HTML 파일과 각 장치에 따른 여러개의 CSS 를 이용해서 대응하는 방법을 말한다. 유동형 웹사이트는 CSS 마저도 하나를 이용해서 구축을 하는데, 이렇게 할 수 있는 핵심 내용은 상대적인 크기를 이용하는 즉, % 를 이용한 크기 설정을 이용한다는 것이다.그러나, %로 지정하게 되면 세부적인 크기들은 지정할 수가 없기 때문에 간단한 레이아웃에서만 사용하게 되는 방식이다.width 값을 %을 이용하게 되면 부모의 크기로부터 비율을 얼마로 지정하는가의 의미가 된다. img 요소에 max-width: 100% 을 지정하게 되면 그림 크기가 원래 크기만큼 도달한 후에는 더 이상 커지지 않고, 작아질 경우는 계속 작아진다.max-width: 100%, min-width: 100% 을 함.. 2016. 9. 30.
JQuery 이벤트 JQuery 를 이용해서 이벤트 추가 및 제거, 전파 방지, 커스텀 이벤트 등록 등의 작업을 할 수 있다. 이벤트 처리 시에 cross browsing 문제를 처리해주기 때문에 역시나 MS IE 나 chrome 에서도 잘 동작하도록 구현할 수 있다.JQuery 이벤트는 문서로딩, 마우스, 키보드, 폼, 웹브라우저 등에서 발생하는 것으로 구분할 수 있다. 각 이벤트에 대한 정보는 다음 사이트를 참고 하면 될 것 같다.https://api.jquery.com/category/events/ 이벤트 관련 처리하는 과정은 다음과 같이 정리할 수 있겠다.셀렉터를 이용해 이벤트 처리 요소를 찾는다. 그런 후, 특정 이벤트에 대한 이벤트 핸들러를 등록한다. 이벤트 등록 및 제거 함수는 다음과 같다.on() : 이벤트와.. 2016. 9. 30.
반응형 웹사이트 웹문서는 하나이고 CSS 를 여러 개를 사용해서 핸드폰, 태블릿, PC 상에서 모두 가독성이 좋도록 구성해주는 방식을 말한다. 뭐 내용을 거창한 것 같으나, 지정하는 방법은 간단하다.@media screen and (max-width:767px) {/* 핸드폰 용 CSS */}@media screen and (max-width:959px) and (min-width:768px) {/* 태블릿 용 CSS */}@media screen and (min-width:960px) {/* PC 용 CSS */} 배치의 문제가 더 어려운 작업일 듯 하다. PC 화면 상에서는 주로 메뉴가 상단에 구성이 되어 있는 반면, 태블릿은 좌측에 보이고, 나타났다가 사라졌다가 하는 기능도 들어가는 경우도 많다. 핸드폰 용은 메뉴.. 2016. 9. 29.

티스토리툴바