웹프로그래밍 137

jQuery-선택자1

jQuery의 개요 자바스크립트에서 html 요솔를 선택하기 위해서는 소스가 복잡해지는 문제점이 있었습니다.Css와 같이 스타일을 지정하고 이를 활용하여 jquery에서 작업 요소들에 대해 필요한 동작을 행할 수 있습니다. 기본적인 jQuery 사용방법입니다.Html 에서의 ID지정방식예)그런저런 내용~ CSS의 지정한 ID활용방식예) #test{스타일속성:값;} jQuery의 지정한 ID 활용방식예) $(“#test”) 1. 기본 선택자(basic selector) 1-1 범용(Universal) 선택자 html페이지내 모든 html요소를 선택(head, body, script.. 등등) 1-2. 명시적 선택자특정한 html 태그 요소에 대해서 선택(p, div .. 등등) 1-3. 복수 선택자 htm..

jQuery의 개념 및 기초예제

jQuery 개념잡기 jquery는 dom계층 이용하여 각 요소에 접근이 가능합니다. ※ DOM 계층의 개념을 간략히 설명하자면 html안에 (head, body)body안에 (div, nav, table...)head 안에(title, meta..)이런식으로 한 태그안에 속해있는 태그를 도식화 한것을 DOM이라고 합니다. jQuery의 작동원리 1. jQuery 라이브러리는 Css와 같은 요소를 선택합니다.ex) $("span") 2. jQuery페이지에 잇는 span요소를 모두 요청합니다. 3. DOM에서 span 요소를 반환합니다.\ 4. jQuery가 해당요소에 대해 동작을 수행합니다. 5. DOM의 속성을 변경합니다. 6. 실행결과를 표시합니다. jQuery의 기초문법 1. jQuery 기본선언..

jQuery 설치환경 구성하기

정의 브라우저 호환성이 있는 html속 자바스크립트 라이브러리존 레식에 의해 2006년 뉴욕시 바캠프에서 공식적으로 소개 특징 Css의 선택자(selector)를 그대로 사용가능Cross Browser – 각 브라우저에 다른 처리방법을 나눌 필요 없이 모두 호환가능메소드 체인 – 여러 동작을 한 줄에 나열하여 임시 변수의 사용을 최소화플러그인 아키텍처 – 코드의 중복을 막고, 이미 개발된 플러그인을 재활용할 수 있다. 실습환경 구성하기 구글크롬 다운로드 구글크롬 다운로드↑는 위의 링크를 눌러서 다운받으면 됩니다.다운받고 설치하는것은 생략하겠습니다. jQuery 다운받기jQuery다운받기↑는 위의 링크를 눌러서 다운받으면 됩니다.Download jQuery를 누르면 아래의 화면 나옵니다. Compresse..

JSP-ID 중복체크

joinform.jsp 아이디 idcheck.jsp 는 이미 사용중인 아이디입니다.다른 아이디를 선택하세요. 입력하신 는 사용하실 수 있는 ID입니다. 참조! Opener 메서드는 띄워진 창의 부모창을 제어 할 수 있습니다. 이 opner 메서드는 해당 창이 띄워 졌을때,이를 띄운 부모 페이지에 어떠한 작동을 하려 할때 사용 하게 됩니다. [출처] [JavaScript] Opener|작성자 바보상자

CSS3 애니메이션

CSS3 애니메이션 @KeyframesKeyframes를 이용해 키 프레임을 지정한다 키프레임의 위치는 퍼센트로 지정하며 각 키프레임에서 속성의 값을 지정하면 된다. @keyframes ani/*키프레임을 ani라는 이름으로지정*/{0% {left : 0px; top 0px;}25% { left 100px; top 20px;}50% { left 200px; top 20px;}75% { left 300px; top 20px;}100% { left 400px; top 20px;}} div{animation : 2s ani; /*애니메이션의 지속시간과 프레임 규칙이름 */animation-interation-count:20;/*애니메이션의 반복 횟수*/} 무한반복 애니메이션@-webkit-keyframes b..

CSS 효과 및 필터

CSS는 다양한 효과를 설정할 수 있다. 아래에서 천천히 알아보자 투명도opacity 속성을 이용하면 요소의 투명도를 조절할수 있다. 투명도는 실수 0.0에서 1.0을 사용해서 지정한다.0.0이면 완전히 투명한 것이고 1.0이면 불투명한것이다. img{ opacity:0.4;} 가시성가시성이란 어떤 요소를 보이거나 안 보이게 하는 것이다. 속성으로는 visibility가 사용된다.hidden:요소를 보이지 않게 한다.visible(기본값) : 요소를 보이게 한다. a{ visibility:hidden;} 비슷한 것으로 display:none이 있다. 하지만 display:none;으로 설정하면 화면에서 자리도 차지하지 않고 완전히 제외된다. 따라서 일시적으로 어떤 요소를 보이제 않게 하려면 visibil..

CSS 박스모델 - 경계선

박스모델 경계선 표시 요소 설명 속성 border-style 선의 종류를 설정함 none. dotted dashed solid double groove ridge inset outset 상 하 좌 우 설정가능border-top-style:border-bottom-style:border-left-style:border-right-style: 경계의 폭설정border-width 경계선 색상 설정border-color: 한줄로 경계선 속성 지정border : 3px solid blue; 경계선 곡률 생성하기border-radius:5px; 경계에 그림자 생성하기box-shadow: 가로오프셋 세로오프셋 번지는정도 그림자색;box-shadow: 20px; 10px 5px #abcdef;

HTML의 기본구조와 태그사용방법

HTML의 기본구조 HTML 웹 문서는 크게 머리부, 몸체부로 나눌 수 있다. 소스에서, 머리부임을 알려주는 태그로, 태그의 실행 결과에 변화를 주지 않는다. 단, HTML을 연습해 봅시다^^ br태그를 안쓰면 이렇게됨 br태그를 쓰면 이렇게 한칸 내려가구요^^ 태그 사이에 사용하는 태그 대부분의 태그는 사이에 기록한다. 하지만 태그 사이에 기록하는 , , 자바스크립트는 HTML 문서와 함께 존재하며 정적인 홈페이지를 역동적으로 변화시킨다. 실행 시기에 따라서 태그 사이에 기록하기도 하지만 태그 사이에 정의하는 것이 보편적이다. HTML, CSS를 기초를 공부하고 javascript를 공부하는것이 이해가 빠르다. 참조네이버google인터넷 프로그래밍 입문