가카리의 공부방

1. 리스트뷰 li 는 리스트 ul unordered 리스트 ol은 ordered 리스트 2. 스플릿 버튼 리스트 3. 리스트 디바이더 4. 카운트 버블 5. 썸네일 리스트 6. 아이콘 리스트 7. 컨텐트 형식 적용하기 8. 인셋 스타일 9. 검색 필터 적용 리스트 15-01.html DOCTYPE html> 15-01 리스트 뷰 연결된 리스트 일련번호를 가진 리스트 중첩 리스트 스플릿 버튼 리스트 리스트 디바이더 카운트 버블 썸네일 리스트 아이콘 리스트 리스트 형식 적용 인셋 스타일 검색 필터 적용 © 2014 T academy 출력 화면 15-02.html DOCTYPE html> 15-02 연결된 리스트 Home item #1 item #2 item #3 item #4 item #5 © 2014 T..

1. 단일 페이지와 다중 페이지에서 페이지 전환 14-01.html DOCTYPE html> 14-01 첫 번째 페이지 헤더 첫 번째 페이지 내용 두 번째 (내부)페이지 전환 세 번째 (외부)페이지 전환 첫 번째 페이지 풋터 두 번째 페이지 헤더 두 번째 (내부)페이지 내용 두 번째 페이지 풋터 14-02.html DOCTYPE html> 14-02 이 내용은 jQuery Mobile에 의해 DOM에 추가되지 않습니다. 세 번째 (외부)페이지 헤더 세 번째 (외부)페이지 내용 세번째 (외부)페이지 풋터 출력 화면 2. 페이지 전환 애니메이션 14-03.html DOCTYPE html> 14-03 첫 번째 페이지 헤더 첫 번째 페이지 내용 두 번째 페이지 전환 첫 번째 페이지 풋터 두 번째 페이지 헤더 두..

1. 기본 효과 13-01.html DOCTYPE html> 13-01 div.card { background:#ece023; width:30px; height:40px; margin:2px; float:left; line-height: 2; text-align: center; font-weight: bold; display: none; } $(document).ready(function() { $("#show").click(function () { $("div.card").first().show("fast", function showCard() { $(this).next("div.card").show("fast", showCard);//재귀호출함 //this는 first요소임 처음에 }); }); $(..

질문"http://jquerymobile.com/demos/1.2.1/docs/buttons/buttons-icons.html"처럼 data-icon을 시도해보려고 했는데 안되요.제 코드는 다음과 같구요. Button 헬프좀요 ㅠㅠ 답변맨앞에 아래와 같이 다셔야됩니다.그리고 jQuery Mobile 코드는 다음과 같이 해야되요 Button 출처 : http://stackoverflow.com/questions/16940980/data-icons-not-displaying

1. 셀렉터 1) 별표 : 모든 노드 2) h3 : h3이라는 태그를 찾아라 3) .content : class ‘content’ 를 접근할때 4) #message : id가 message인 노드를 찾아라 5) div, .header, #menu : div태그와 header 클래스와 menu라는 id를 가지고 있는 노드를 찾아서 접근하자 2. 계층 셀렉터 1) div중에 id가 lectures인 자손 li 태그들을 의미(그 자식의 자식들은 자손) 2) div 밑에 자식 p를 의미 (바로 밑을 의미) 3) 아이디가 first인 다음 형제를 의미 (단수) 4) 아이디가 second인 다음 형제들을 의미 (복수) 3. 속성 셀렉터 -대괄호 안에 기술하는게 특징 1) div 태그에 id가 lectures인 li..

* 각 스타일에 대한 예제이다. border-style:dotted border-style:solid border-style:double border-style:groove border-style:ridge border-style:inset border-style:outset * 보더의 넓이에 대한 예제이다. border-style과 같이 쓰지 않으면 아무런 효과가 없다. border-style:solid;border-width:5px border-style:solid;border-width:thin border-style:solid;border-width:memium border-style:solid;border-width:thick * 보더의 색에 대한 예제이다. border-style과 같이 쓰지 ..

1. jQuery와 jQuery Mobile 자바스크립트 개발시 크로스 브라우징 문제 등을 쉽게 해결하는 기법을 jQuery 프레임워크에서 제공함. jQuery 2.x 는 인터넷 익스플로러 6,7,8은 지원을 안함 그래서 jQuery 1.x버젼으로 해봄 다음의 jquery.com과 jquerymobile.com 파일을 다운 받는다. 앱타나 스튜디오로 돌아가서 아래와 같이 js 폴더를 만들고 jquery.mobile-1.4.5.css 파일 jquery.mobile-1.4.5.js 파일 jquery-1.11.2.js 를 놓는다. 그리고 코드로 돌아가서 아래 link와 script 소스를 추가해준다. DOCTYPE html> 08-01 //우리 코드는 여기에 그리고 jquery 코드를 쉽게 짜기위한 앱타나 스..

실습 2: 가위 바위 보 게임 만들기 프로젝트명 : exercise02 파일명: index.html, rockscissorspaper.js (외부 스크립트) 요구사항 1. 사용자는 가위, 바위, 보 버튼을 눌러 게임을 진행합니다. 2. index.html은rockscissorspaper.js를 외부 스크립트로 참조합니다. 3. index.html은 game, result의 id를 가진 div 요소를 가집니다. 4. Game의 id를 가진 div 요소는 btnScissors, btnRock, btnPaper의 id를 가진 button 요소를 자식요소로 가집니다. 5. DOM 이벤트는 크로스 브라우징 문제가 있으므로 모든 이벤트와 관련된 함수를 만들 때는 크로스 브라우징 문제를 반드시 해결해야 합니다. 6...

1. 웹브라우저와 자바스크립트 실행환경 2. 웹브라우저 객체 위를 DOM(Document object model)이라고 함 위와 같이 document 객체로 이용해서 접근 가능 3. HTML DOM DOM 트리로 구성하면 오른쪽처럼 구성할 수 있음 위 메소드는 많이 사용한다. 08-01.html DOCTYPE html> 08-01 // 주어진 노드 객체의 모든 자식노드 중 노드타입이 엘리먼트인 노드의 이름을 출력합니다. function printTags(node) { var tags = ''; // 노드타입이 엘리먼트인지를 검사합니다. if (node.nodeType == Node.ELEMENT_NODE) { // nodeName 프로퍼티에 저장되어 있는 노드의 이름을 tags 변수에 저장합니다. tag..

1. 객체 생성 과정 2. 프로토타입 체인과 프로토타입 멤버 상속 Function 객체의 주요 멤버 06-01.html DOCTYPE html> 06-01 // 프로토타입 체인과 프로토타입 멤버 상속 // Car 생성자 함수의 프로토타입 객체는 new 연산자와 Object 생성자 함수 호출을 통해 생성된 객체이며, // 프로토타입 객체에 constuctor 프로퍼티는 자동으로 Car 생성자 함수를 참조합니다. var Car = function(){}; Car.prototype = { startEngine : function(){ document.writeln('시동을 겁니다... '); }, accelerate : function(){ document.writeln('속도를 올립니다... '); }, d..