코딩병원

Frontend/jQuery

[Jquery] show(), hide() - 요소 표시하거나 숨기는 방법

hide() 메소드 - 선택한 요소를 순간적으로 사라지게 합니다. show() 메소드 - 선택한 요소를 나타나게 합니다. .hide() 메소드를 통해 숨겨진 요소는 CSS의 속성값이 none으로 설정됩니다. 그래서, 요소가 보이지 않게 됩니다. 아래 예제를 통하여 자세히 살펴보도록 하겠습니다. 요소의 표시와 숨김 요소 표시하기! 요소 숨기기! CSS의 display 속성값이 none으로 설정되기 때문에 웹 페이지의 레이아웃에서 아예 사라져 버려요! 이 단락을 숨기거나 나타나게 할 거에요! 출력 결과 'showBtn' 이라는 id를 가진 button을 클릭하면 'text'라는 id를 가진 태그가 보여지고, 'hideBtn' 이라는 id를 가진 button을 클릭하면 'text'라는 id를 가진 태그가 숨겨..

2020. 4. 12.

Frontend/jQuery

[Jquery] event - 이벤트 핸들러

이벤트(event) 웹 페이지는 사용자와 정말 많은 상호작용(소통)을 하게 됩니다. 사용자는 마우스로 요소를 클릭하거나, 움직이거나, 글을 쓰는 등 수많은 종류의 동작을 수행합니다. 위에서 예를 든 사용자 동작들이 모두 이벤트를 발생시키는 것입니다. 즉, 이벤트가 발생했다는 것은 웹 페이지에서 동작이 발생하여, 웹 페이지가 그 사실을 알려주는 것을 의미합니다. 이벤트 핸들러(event handler) 웹 페이지에서는 수많은 이벤트가 쉬지 않고 계속해서 발생합니다. 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)라는 함수를 작성하여 연결하고 처리해야 합니다. 이벤트 핸들러가 연결된 특정 요소에서 지정한 타입의 이벤트가 발생하면, 웹 페이지는 연결된 이벤트 핸들러를 실행합니다. 아래 예제..

2020. 4. 12.

Frontend/jQuery

[Jquery] parent(), parents() - 상위 요소 가져오는 방법

이번 글에는 부모의 요소를 탐색하는 방법과 관련하여 글을 올려보도록 하겠습니다. 아래의 메소드들은 부모 요소와 관련된 메소드들입니다. 1. .parent() 2. .parents() .parent() 메소드 선택한 요소의 부모(parent) 요소를 선택하는 메소드입니다. 이때 선택자를 인수로 전달하고, 전달받은 선택자(인수)에 해당하는 부모 요소만 선택도 가능합니다. 예제를 통하여 자세히 다루어 보도록 하겠습니다. 아래 코드는 button을 클릭하면 의 부모인 의 css가 빨간색 테두리로 변경되는 예제입니다. .parent() 메소드 div 요소 ul 요소 li 요소 li 요소 p 요소 (기준) span 요소 li 요소 p 요소의 부모 요소 출력 결과 $()에 선택자를 인수로 받고, 그 인수에 대한 부모..

2020. 4. 12.

Frontend/jQuery

[Jquery] clone() - 요소 복사하는 방법

이번 글에는 요소를 복사하는 방법에 대하여 알아보도록 하겠습니다. clone() 메소드 - 선택한 요소를 복사하여 새로운 요소를 생성이 가능합니다. 예제를 통하여 자세히 살펴보도록 하겠습니다. 아래 코드는 을 클릭하면 'firstItem' 이라는 id를 가진 태그를 복사하고 추가하는 예제입니다. .clone() 메소드 첫 번째 아이템이에요! 두 번째 아이템이에요! 세 번째 아이템이에요! 아이템 복사 출력 결과 정상적으로 화면에 나온 것을 확인할 수 있습니다.

2020. 4. 11.

Frontend/jQuery

[Jquery] $() - 제이쿼리 문법

제이쿼리 문법 $(선택자).함수(); 달러($) 기호는 제이쿼리 자체를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자라고 생각하시면 됩니다. 선택자를 이용하여 원하는 HTML 요소를 선택하고, 함수를 정의하여 선택된 요소에 원하는 동작을 설정합니다. 이해하기 쉽게 예제를 통하여 다시 한 번 확인해보겠습니다. 아래 코드는 태그를 클릭하면 태그의 글자크기가 100px로 바뀌는 예제입니다. $(function() { $("p").on("click", function() { $("body").css("fontSize", "100px"); }) }) $() 함수의 인수로는 HTML 태그 뿐만 아니라, CSS 선택자도 가능하여 특정 HTML 요소를 선택할 수 있습니다. 이러한 $() 함수를 통해 생성된 요소를..

2020. 4. 9.

Frontend/jQuery

[Jquery] 적용 방법

Jquery 적용 방법 Jquery는 자바스크립트 라이브러리이므로, 제이쿼리 파일은 자바스크립트 파일(js 파일) 형식의 형태로 존재합니다. 따라서 제이쿼리를 사용하기 위해서는 제이쿼리 파일을 먼저 웹 페이지에 로드(load)해야 합니다. 웹 페이지에서 제이쿼리 파일을 로드하는 방법은 2가지로 다음과 같습니다. 1. 제이쿼리 파일을 다운받아 로드하는 방법 2. CDN을 이용하여 로드하는 방법 제이쿼리 파일을 다운받아 로드하는 방법 최신 버전의 제이쿼리 파일은 아래 링크에서 다운받을 수 있습니다. Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The..

2020. 3. 18.

Frontend/Javascript

[JavaScript] 객체란?

객체(Object)란?- 실생활에서 우리가 인식할 수 있는 사물이라고 생각하시면 됩니다.- 이 부분에서 이해가 잘 안되셔도 아래 글들을 읽어보시면 객체가 무엇인지 완벽하게 이해하실 수 있으실 겁니다. 프로퍼티(property)- dog.name = "하얀"- dog.color = "베이지"- dog.age = 13- dog.address = "주엽" 메소드(Method)- dog.cry()- dog.act()- dog.eat()자바스크립트 객체객체란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합입니다.프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드(method)라고 합니다.또한, 자바스크립트의 기본 타입은(data type)은 객체(obj..

2020. 3. 17.

Frontend/Javascript

[JavaScript] 희소 배열이란?

희소 배열- 배열 안에 요소의 위치가 연속적이지 않은 배열을 의미합니다.- 배열의 length 값보다 배열 요소의 개수가 언제나 적습니다.const arr = new Array(); // 빈 배열 객체를 생성arr[99] = "Java Script";// 배열 arr의 100번째 위치에 문자열을 삽입함.document.write("배열의 길이 : " + arr.length)// 100번째 요소를 삽입했기 때문에 배열의 길이는 100으로 늘어남. 비슷한 예제로 희소 행렬을 예로 들을 수 있습니다. 희소행렬희소행렬은 행렬의 값이 대부분 0인 경우를 가리키는 표현이다.[1] 그와 반대되는 표현으로는 밀집행렬(dense matrix), 조밀행렬이 사용된다. 개념적으로 희소성은 시스템들이 약하게 연결된 것에 해당..

2020. 3. 16.

Frontend/Javascript

[JavaScript] 자바스크립트 적용하는 방법

자바스크립트를 적용하는 방법HTML 문서에 자바스크립트 코드를 적용하는 방법은 다음과 같은 방법이 있습니다. 1. 내부 자바스크립트 코드로 적용2. 외부 자바스크립트 코드로 적용내부 자바스크립트 코드자바스크립트 코드는 head 태그 내의 자바스크립트자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!현재 날짜와 시간 표시하기! 다음 예제는 HTML 문서의 태그에 자바스크립트 코드를 삽입한 예제입니다.head 태그 내의 자바스크립트자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!현재 날짜와 시간 표시하기!출력 결과외부 자바스크립트 파일- 자바스크립트 코드는 HTML 문서의 내부뿐만 아니라 외부 파일로 생성하여 삽입할 수도 있습니다. 외부에 작성된 자바스크립..

2020. 3. 14.