Main 299

JQuery 활용

class 가 toolbar이면 이미 세팅된 JQuery에 의해 toolbar의 디자인이 입혀진다. head부분의 스크립트는 가져다 쓰면 되고, 이 부분만 있으면 기본은 해결 된다. JQuery에서는 아이디 앞에 항상 #이 붙는다. 으로 링크를 걸어주면 로 자동으로 화면 전환을 해준다. class명에 button back로 설정해 놓으면 자동으로 back버튼이 생성되고, 링크는 #으로 한다. class에 button flip은 좌우로 돌면서 화면이 전환된다. li에 class ='arrow'를 주게 되면 오른쪽에 화살표가 붙는다. --------------------------------------------------------------------------------------------------..

IT 관련/Html5 2011.10.13

JQuery에 대하여

JQuery라 해서 자바스크립트에서 사용하는 SQL Query인줄 알았다. 하지만 아니었다. ㅠ.ㅠ 향상된 페이지를 위한 플러그 인 (JQTouch) - 자바스크립트 라이브러리라 보면 된다. JQuery의 장점 - 복잡하게 사용하던 함수를 쉽게 사용할 수 있다. [자 그럼 비교해 보자] ------------------------------------------------------------------------------------ function sayHello() { document.getElementById('foo').innerHTML = 'hi there'; } click me ----------------------------------------------------------------..

IT 관련/Html5 2011.10.13

아이폰 브라우저에 CSS적용해 보기

[스타일 적용전 주의사항] content에 들어간 설정은 손으로 확장 및 축소를 막는 태그이다. width는 장비의 가로사이즈에 맞게 적용하는 뜻이다. [스타일 적용시] media 엘리먼트의 위의 값을 넣어서 아이폰(레티나용) 사이즈로 맞춘다. [자 이제 작성해 보자] --------------------------------------------------------------------------- 아이폰에 스타일시트 적용해보기 Introduce Myself About Jobs Hobby IT, MAC, iphone Soccer Travel About http://corearoot.tistory.com/ 운영자, 웹마스터, 개발자 여기는 나머지 소개글입니다 이미지 올리기 ----------------..

IT 관련/Html5 2011.10.08

CSS 적용 방법

/* 일반적인 태그의 적용 */ /* 콤마(,)를 사용하여 복수 적용 */ h1,h2 { color :#ff0000; } /* class를 주어서 지정한 것만 지정 .(점)을 사용함 */ .note { color : #00ffff; } /* 아이디에 적용 #(샵)을 사용함 */ #para { color : #f000f0; } /* 태그안에 또다른 태그에만 적용시 태그를 두번 사용하여 사용함 */ h2 strong { color : #0000ff; } How to Move Sod Up 10 Stories Without The Apartment Manager Finding Out Check the Elevator Before Beginning paragraph test paragraph test ------..

IT 관련/Html5 2011.10.08

JavaScript와 CSS의 만남 2 (객체의 이동)

1. 자바스크립트를 이용하여 div를 이동하는 스크립트를 작성해 보자 -------------------------------- ---------------------------------- #div1 { background-color :#00f; color:#fff; width:100px; height:100px; position:absolute; left : 0px; top : 0px; } var x = 0; var y = 0; function moveLeft() { x -= 20; var obj = document.getElementById('div1'); obj.style.left = x + 'px'; // px는 스타일시트 단 } function moveRight() { x += 20; var ..

IT 관련/Html5 2011.10.08

JavaScript와 CSS의 만남1 (객체의 색상 변경)

[li태그를 추출하여 글자색을 변경함] Introduction there are number of reasons 두번째 단락 I can found every where number2 number3 ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- 자바스크립트에의 getElementsByTagName을 이용하여, 해당 태그를 배열로 가져오고 색을 변경함

IT 관련/Html5 2011.10.07

Java Script의 객체지향

일반적인 객체를 생성할때, function을 사용하여 일반 객체를 만들듯이 만들면 된다. function car(name, price) { this.carname = name; this.carprice = price; } sonata = new car('sonata', '비싸다'); sonata.name; // 바로 값을 찍는다. sonata.price = '별로 안비쌈'; // 바로 값을 세팅할 수 있다. 일반적인 class와 다르게 private과 public의 개념이 존재하지 않아 바로 생성하여, 바로 값을 넣고, 바로 쓸 수 있다. [자바스크립트에서 클래스의 메소드 구현 방법] [클래스명.prototype.메소드명 = function()] 클래스를 상속받아서 상속받은 클래스에 새로운 추가 기능을 ..

IT 관련/Html5 2011.10.07

Java Script 객체 찾기 및 이벤트 부여 방법

자바 스크립트 상의 객체 지정 방법 document - html페이지를 뜻한다. form - 문서상의 폼 (현재 할당된 이름 : someForm) button - 폼 내에 등록된 버튼 (현재 할당된 이름 : btn) 1. 직접 지정 방식 (dom0) - 이름을 지정하여 내려간다 document.someForm.btn 2. getElementsByName 함수를 이용하는 방식 document.getElementsByName('btn')[0] (주의) getElementsByName 함수를 이용할 경우, 배열방식으로 가져오기 때문에 반드시 [0] - 배열의 순서를 지정해야 한다. 3. getElementsById함수를 이용하는 방식 document.getElementById('bbb') 4. 객체별로 찾아 ..

IT 관련/Html5 2011.10.01
반응형