전체 글
[jQuery] 문서 객체 메소드 정의 및 예제코드
메서드명 설명 addClass() 문서 객체의 클래스 속성을 추가함 removeClass() 문서 객체의 클래스 속성을 제거함 attr() 속성과 관련된 기능을 수행 removeAttr() 객체의 속성을 제거 css() 스타일과 관련된 기능을 수행 html() 문서 객체 내부의 html 태그와 관련된 기능을 수행 text() 문서 객체 내부의 text(문자열)에 관련된 모든 기능을 수행 remove() 특정 문서 객체를 제거 empty() 특정 문서 객체의 자식을 모두 제거 clone() 문서 객체를 복사 $(a).prepend(b) b를 a의 앞에 추가 $(a).append(b) b를 a의 뒤에 추가 $(a).after(b) b를 a의 뒤에 추가 $(a).before(b) b를 a의 앞에 추가 예제 코..
[jQuery] 간단한 예제를 통해 getter, setter 이해하기
예제 코드 입력: 버튼 getter id='demo'인 text창에 입력후 button을 누르게 되면 text창에 입력한 value를 가져온다. setter id='demo'인 text창의 값을 "hi nice to meet you"로 set 결과 입력: 버튼
[jQuery] .click 함수 사용 (JavaScript onclick()와 차이점)
예제 코드 button 구현 차이점 Java Script 버튼 JQuery 버튼 결과 button 구현 차이점 Java Script 버튼 JQuery 버튼
[jQuery] jQuery란 무엇일까? ( jQuery사용방법, JavaScript 와 jQuery 차이점 )
jQuery? 제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리! 제이쿼리를 사용함으로써 자바스크립트를 손쉽게 활용할 수 있으며, 자바스크립트와 비교했을 때 같은 기능을 하는 코드여도 제이쿼리로 코딩한 코드가 짧고 단순한 코드로도 웹페이지에 다양한 효과나 연출을 적용할 수 있다. 엘리먼트를 선택하는 강력한 방법 선택된 엘리먼트들을 자바스크립트보다 효율적으로 제어할 수 있는 다양한 수단을 제공 라이브러리? (library) 자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들 jQuery 사용법 1. html 태그 안에 밑에 소스를 추가한다. 소스를 추가해주면 된다. jQuery 기본 문법 $(선택자). 동작 함수(); 달러($) 기호는 제이쿼리를 의미..
[CSS] header 영역 / main 영역 / footer 영역 (div 태그를 이용해서 나눠보기)
예제코드 header 영역 main 영역 box 1 box 2 footer 영역 결과 header 영역 main 영역 box 1 box 2 footer 영역
[CSS] div 태그를 이용해서 프레임 나누기
예제 코드 red yellow blue green black pink 태그를 사용해서 공간을 맞춰준다음, float : left로 왼쪽부터 붙여준다. 결과 red yellow blue green black pink
[CSS] 링크 꾸미기 (link 속성/ a:link, a:visited, a:hover, a:active)
link 속성 :link 방문하지 않은 링크 :visited 이미 방문한 링크 :hover 링크에 마우스 포인트럴 올려 놓았을때 (mouseover) :active 링크를 클릭하는 순간 보여지는 속성 코드
[CSS] CSS text 속성 (color, text-align, text-transform, direction...)
text 속성 속성 설명 color 텍스트의 색상을 지정 direction 텍스트가 쓰이는 방향을 설정 letter-spacing 텍스트 내에서 문자 사이의 간격을 설정함 word-spacing 텍스트 내에서 단어 사이의 간격을 설정함 text-indent 단락의 첫 줄을 들여쓰기할지 안 할지를 설정 text-align 텍스트의 위치를 설정 text-decoration 텍스트에 효과를 설정 (밑줄, 윗줄, 가운데줄) text-shadow 텍스트에 그림자 효과를 설정 text-transform 글자를 대문자 또는 소문자로 바꾸는 설정 예제코드 [class=p1] Hello World1 [class=p2] Hello World2 [class=p3] Hello World3 [class=p4] Hello Wor..
[CSS] CSS란? CCS기초, CSS적용하는 방법 (inline, internal, external)
CSS? ( Cascading Style Sheet ) HTML, XHTML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어. 즉, HTML로 문서가 단순히 집을 만드는 과정이라면, CSS는 HTML 문서의 인테리어, 페인팅하는 작업이라고 생각하면 된다. 문자의 컬러, 종류, 형태 지정, 배경화면 설정, 이미지 지정, 테두리 넣기 등등.. 각종 tag에 이미지 형태 라인 형태로 설정 p tag p 태그 입니다 id=p1 h3 태그 입니다 id=p1 p 태그 입니다 class=cls h3 태그입니다 class=cls p tag p 태그 입니다 id=p1 h3 태그 입니다 id=p1 p 태그 입니다 class=cls h3 태그입니다 class=cls CSS 적용하는 방법 태그명 접근 "태그..
![[JavaScript] JavaScript JSON Parsing ( new XMLHttpRequest() )](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FBvsTY%2Fbtq6Ty3yI6S%2FunYYYryUlLbOJZ4te5tYK0%2Fimg.png)
[JavaScript] JavaScript JSON Parsing ( new XMLHttpRequest() )
예제코드 1 json의 경우 xml과는 다르게 단순하게 .(dot)을 통해서 접근이 가능하다. options의 경우처럼 여러개의 value가 있는 경우 배열의 인덱스를 통해서 접근이 가능하다. 예제코드 2 번호제목(title)저자(author)가격(price) book.json [ { "title":"자바의 정석", "author":"남궁성", "price":30000 }, { "title":"모던 자바스크립트 Deep Dive", "author":"이응모", "price":45000 }, { "title":"하루 10분 SQL", "author":"한상일", "price":24000 }, { "title":"지쳤거나 좋아하는 게 없거나", "author":"강한별", "price":13500 }, { ..