본문 바로가기

WEB_TECH

브라우저 사이즈만큼 이미지 늘어나게 만들기 브라우저의 다큐먼트 사이즈만큼 이미지를 늘어나게 만들 수 있습니다.어떠한 해상도에도 대응이 되니까은은하게 배경으로 깔아주면 효과가 아주 좋겠죠. 다음 코드를 실행시켜 봅시다. 200X200사이즈의 이미지를 불러왔는데 브라우저를 잡아당기면 아래 그림처럼 비율에 상관없이 화면에 꽉차는 것을 볼 수 있습니다. 더보기
웹페이지에서 이미지가 없는 곳을 메우는데 유용한 방법 아직 디자인이 완성되지 못해웹페이지에서 이미지가 없는 곳을 메우는데 유용한 방법유용한 방법입니다.이 사이트에서 모든 이미지를 생성해서 뿌려줍니다. http://placehold.it 사이트 이름도 재미있네요. 사용방법은 이렇게 쓰면 됩니다. 만일 이렇게 웹페이지에 넣으면 이런 결과가 나옵니다. 더보기
[jQuery] 8. HTML Set 이전에 HTML 페이지에서 값을 가져오는 방법을 배웠습니다.같은 메서드를 사용해서 메서드내에 파라메터값을 넣으면 HTML 페이지의 값을 변경할 수 있습니다. 1. text("텍스트")2. html("태그가포함된내용")3. val("폼필드값")4. attr("바꿀속성값") [예제1] 값을 대체하는 예제 This is a paragraph.This is another paragraph.Input field: Set TextSet HTMLSet Value [예제2] 콜백을 사용 This is a bold paragraph.This is another bold paragraph.Show Old/New TextShow Old/New HTML [예제3] 속성을 바꾸는 예제 W3Schools.comChange hre.. 더보기
[jQuery] 7. HTML Get jQuery는 HTML엘리먼트와 속성들을 변화시키고 다룰 수 있는 파워풀한 메서드를 가지고 있습니다.즉 DOM을 jQuery를 사용하여 쉽게 조작할 수 있습니다. DOM이란?DOM은 HTML과 XML 문서에 액세스하기 위한 표준을 정의하는 W3C 문서 객체 모델입니다.W3C Document Object Model (DOM)은 프로그램과 스크립트를 동적으로 실행하고 문서내의 컨텐츠와, 구조, 스타일을 업데이트 할 수 있도록 하는 플랫폼이자 언어중립적인 인터페이스입니다. 컨텐츠 얻기 Get Contents DOM 조작을 위한 세 가지 간단하지만 유용한 방법은 다음과 같습니다.1. text() : 설정하거나 반환 선택된 요소의 텍스트 내용2. html() : (HTML 태그를 포함) 선택된 요소의 내용을 설정.. 더보기
[jQuery] 6. jQuery method chaining jQuery는 체인액션을 사용할 수 잇습니다.체인액션은 한라인에서 동일한 엘리먼트에 대하여 여러메서드를 실행하는 방법입니다. jQuery method chaining 지금까지 우리는 한번에 한문장씩 사용해 왔습니다.그러나 동일한 엘리먼트에 여러 jQuery명령을 체인이라는 기술을 사용하여 실행할 수 있습니다. tip. 다큐먼트에서 동일한 요소를 두번이상 찾을 필요가 없습니다. [예제1] jQuery is fun!!Click me $("#p1").css("color","red").slideUp(2000).slideDown(2000); 이 체인이 너무 길어서 가독성이 안좋게 느껴질 때는 $("#p1").css("color","red"). slideUp(2000). slideDown(2000); 이렇게 줄바꿈.. 더보기
[jQuery] 5. jQuery 이펙트 와우 정말 기대하고 고대하던 강좌입니다.이번강좌에서 다룰 예제는 아래와 같습니다. Hide, Show, Toggle, Slide, Fade, Animate jQuery 에서 엘리먼트를 숨기고 보이기 jQuery를 사용하면 HTML엘리먼트들을 숨기고 보여줄 수 있습니다.hide() and show() 메서드를 쓰면 됩니다.아래 예제를 실행해 보겠습니다. If you click on the "Hide" button, I will disappear.HideShow hide() and show() 는 두개의 파라메터를 사용할 수도 있습니다. speed와 callback입니다.문법은 다음과 같습니다. $(selector).hide(speed,callback)$(selector).show(speed,callback.. 더보기
[jQuery] 4. jQuery이벤트 이벤트란 무엇인가요?웹페이지가 응답할 수 있는 모든 사용자의 행동을 이벤트라 합니다.이벤트는 무언가가 일어나는 정확한 순간을 말합니다.예를 들면 엘리먼트 위에 마우스를 이동한다던가라디오버튼을 클릭하기엘리먼트를 클릭하기 등등 DOM 이벤트는 다음과 같은 것이 있습니다. jQuery 이벤트 함수 jQuery 이벤트 핸들링 메서드는 jQuery 내에 있는 코어함수들입니다.이벤트 핸들러는 무언가가 HTML에서 발생할때 호출되는 메서드들입니다. 만일 태그를 클릭했을경우에 이벤트가 발생하게 하려면 다음과 같이 사용할 수 있겠죠.$("p").click();그러나 이것만으로는 동작하지 않습니다.이벤트가 발생했을 때 처리하려면 이런식으로 이벤트에 함수를 전달해야 합니다.$("P").click(function(){ //여.. 더보기
[jQuery] 3. jQuery 셀렉터 jQuery 셀렉터는 HTML 엘리먼트를 그룹또는 단독으로 다룰수 있게 만듭니다.이것을 잘 다룰줄 알아야 다음 것을 할 수 있습니다.열심히 몸에 배도록 합시다. jQuery 셀렉터 우리는 이전 글에서 HTML 엘리먼트를 선택하는 몇가지 예를 살펴 보았었죠.그것은 jQuery로 개발자가 원하는 엘리먼트를 정확히 선택하는 키포인트입니다.jQuery 셀렉터는 엘리먼트명, 속성명, 또는 다른 방법으로 그룹 또는 단독 HTML엘리먼트들을 선택할 수 있게 해 줍니다. [참고] HTML DOM에 이런 내용이 있습니다."Selectors는 DOM엘리먼트를 그룹 또는 싱글노드로 다룰수 있도록 합니다. " jQuery 엘리먼트 셀렉터jQuery 엘리먼트 셀렉터는 태그이름을 기반으로 엘리먼트를 선택하는 선택자입니다.만일 이.. 더보기
[jQuery] 2. jQuery 문법 jQuery 문법 jQuery 문법은 HTML elements를 선택하고 액션을 주는 형태로 만들어져 있습니다.처음 보면 좀 이상한 자바스크립트 문법에 당황할 수도 있겠지만 몇번 사용해 보면 매우 직관적이고 편리하다는 것을 알 수 있습니다. 기본형태 : $(selector).action() - $는 jQuery라는 단어를 대체합니다. 즉 $로 줄여서 쓸 수 있습니다.- selector는 HTML elements를 찾습니다. - action은 elements를 수행합니다. 메서드의 형태로 되어 있습니다. 예)$(this).hide() --> 현재 element를 숨깁니다.$("p").hide() --> 모든 를 숨깁니다.$("p.test").hide() --> 모든 를 숨깁니다.$("#test").hide.. 더보기
[jQuery] 1. jQuery 시작하기 jQuery 1. jQuery 시작하기 w3school에 올라와 있는 내용을 번역하면서 공부한 내용입니다. jQuery를 시작하기 전에 알아야 하는 것들- html- css- javascript 위의 주제를 먼저 공부해야 합니다. jQuery란 무엇인가? jQuery는 자바스크립트 함수의 모음입니다.자바스크립트 프레임워크라고도 하지요. jQuery는 최고의 자바스크립트 라이브러리로서 가볍고 단순합니다. jQuery라이브러리는 다음의 것들을 담고 있습니다. • HTML element selections• HTML element manipulation• CSS manipulation• HTML event functions• JavaScript Effects and animations• HTML DOM tra.. 더보기

티스토리툴바