분류 전체보기
-
[제이쿼리] jQuery 속성 탐색 선택자(selector)Front/jquery 2020. 3. 27. 17:09
제이쿼리(jQuery) 위치 탐색 선택자(selector) 안녕하세요? 장장스입니다. 탐색 선택자 중 위치 탐색 선택자에 대한 포스팅입니다. 속성 탐색 선택자는 선택한 요소에 속성이 일치하는지 혹은 속성에 내가 원하는 값이 포함되어있는지를 알아 볼수 있는 선택자입니다. 속성 탐색 선택자() 종류 설명 $(["요소 선택[속성]") 선택한 요소 중 지정한 속성이 포함된 요소만 선택합니다. $("요소 선택[속성^=값]") 선택한 요소 중 속성값이 명시한 값으로 시작하는 요소만 선택합니다. $("요소 선택[속성$=값]") 선택한 요소 중 속성값이 명시한 값으로 끝나는 요소만 선택합니다. $("요소 선택[속성*=값]") 선택한 요소 중 속성값이 명시한 값을 포함하는 요소만 선택합니다. $(":type 속성 값")..
-
[제이쿼리] jQuery 위치 탐색 선택자(selector)Front/jquery 2020. 3. 25. 17:13
제이쿼리(jQuery) 위치 탐색 선택자(selector) 안녕하세요? 장장스입니다. 오늘은 탐색 선택자를 포스팅하려고 합니다. 탐색 선택자는 크게 위치 탐색 선택자와 속성 탐색 선택자가 있습니다. 이번 포스팅에서는 위치 탐색 선택자를 다뤄보도록 하겠습니다. 위치 탐색 선택자 종류 설명 $("요소").first() $("요소:first") 전체 요소 중 첫 번째 요소만 선택한다. $("요소").last() $("요소:last") 전체 요소 중 마지막 요소만 선택한다. $("요소:odd") 요소 무리중 짝수 번쨰 요소만 선택한다. $("요소:even") 요소 무리중 홀수 번쨰 요소만 선택한다. $("요소:first-of-type") 요소 무리 중 첫 번째 요소만 선택한다. $("요소:last-of-type..
-
[제이쿼리] jQuery 인접 관계 선택자(selector)Front/jquery 2020. 3. 23. 02:09
제이쿼리(jQuery) 인접 관계 선택자(selector) 안녕하세요? 장장스입니다. 직접 선택자에 이어 인접 관계 선택자를 포스팅하겠습니다. 인접 관계 선택자 종류 사용법 설명 부모 요소 선택자 $("요소 선택").parent() 선택한 부모 요소를 선택합니다. 상위 요소 선자 $("요소 선택").parents() 선택한 요소의 상위 요소를 모두 선택합니다. 가장 가까운 상위 요소 선택자 $("요소 선택").closest("div") 선택한 요소의 상위 요소 중 가장 가까운 만 선택합니다. 하위 요소 선택자 $("요소 선택 하위 요소") 선택한 요소에 지정한 하위 요소를 선택합니다. 자식 요소 선택자 $("요소 선택>자식 요소") 선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택니다. 자식 요소들..
-
[자바] 문자열(String)비교 == 와 equals 차이점JAVA 2020. 3. 22. 21:10
== 와 equals() 차이점 안녕하세요? 장장스입니다. 스프링하다가 문자열 비교가 안되서 곤욕을 치뤘는데(시간낭비 엄청했음).. 잊어버리지 않게 이유를 짧막하게나마 정리하려고 합니다. == == 는 비교 연산자입니다. 숫자나 문자를 비교할 수 있습니다. int num = 10; num == 10; // true 하지만 문자열은 비교할 수 없습니다. String text = "장장스입니다"; text == "장장스입니다";//false equals() 자바에서 문자열은 엄밀하게 말하면 객체입니다. Object 객체를 상속받아 만든 String 객체인 것이지요. 때문에 == 비교연산자를 사용하게 되면 객체의 주소를 비교하게 되는 것입니다. 따라서 문자열을 비교할 때는 equals() 메서드를 사용해야 합..
-
[제이쿼리] jQuery 직접 선택자(selector)Front/jquery 2020. 3. 21. 12:59
jQuery 직접 선택자(selector) 안녕하세요? 장장스입니다. 제이쿼리(jQuery) 존재의 이유인 선택자(selector)에 대해서 포스팅해보려고 합니다. 자바스크립트 제이쿼리 라이브러리에서는 다양한 선택자를 제공합니다. 선택자의 개념을 간단하게 정리하고, 직접 선택자에 대해 자세히 설명하겠습니다. 선택자란? 선택자는 HTML 요소를 선택하여 가져옵니다. 제이쿼리 선택자는 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있습니다. 이때 HTML에 작성한 스타일은 사용자의 동작에 의해 스타일을 변경할 수 없기 때문에 HTML에서 작성한 CSS는 '정적이다'라고 표현합니다. 하지만, 제이쿼리 선택자를 사용하면 '동적'으로 스타일을 적용할 수 있습니다. 선택자를 좀 더 깊이있게 공부하려면 docum..
-
[제이쿼리] 제이쿼리(jQuery) 라이브러리 설치하기Front/jquery 2020. 3. 19. 00:09
제이쿼리 설치하기 안녕하세요? 장장스입니다. 오늘은 자바스크립트하면 빠질 수 없는 제이쿼리 라이브러리 설치방법에 대해서 알아보겠습니다. 제이쿼리란? 제이쿼리(jQuery)는 모딜라 사의 자바스크립트 개발자였던 존 레식(John Resig)이 자바스크립트를 이용해 만든 라이브러리 언어입니다. 즉, 자바스크립트로 만들어진 다양한 함수들의 집합인 것입니다. 왜 사용하는걸까요? 먼저 호환성 문제 입니다. 자바스크립트의 문서 객체 모델 DOM과 이벤트 객체는 호환성이 떨어지는 단점이 존재했습니다. 예를 들어 인접 요소 선택자 중 다음 요소 선택자는 브라우저별로 결과가 달랐던 것이죠. 이를 해결하기 위해 등장한 제이쿼리는 호환성 문제를 해결했습니다. 다음은 편리한 애니메이션 효과 기능 구현입니다. 자바스크립트로 에..
-
[자바스크립트] prototype 이용하여 객체(Object) 생성하기Front/javascript 2020. 3. 17. 20:56
제목prototype 이용하여 객체(Object) 생성하기 안녕하세요? 장장스입니다. 자바스크립트는 객체지향 언어입니다. 보통 학교에서 객체지향 프로그램 언어로 JAVA나 CPP 등을 배우죠?(음.. 저는 그랬네요) 자바스크립트는 앞에 말한 언어와는 조금 다른점이 있습니다. prototype 기반의 자바스크립트 JAVA 혹은 CPP은 클래스(Class)라는 개념이 존재합니다. 그러나 자바스크립트에는 클래스 개념이 없습니다. 대신 프로토타입(prototype) 기반의 객체지향 프로그래밍을 지원합니다. 1. JavaScript의 모든 객체는 '__proto__' 라는 숨겨진 프로퍼티를 갖고 있다. __proto__는 자신의 부모인 프로토타입 객체를 가리킨다. 이러한 링크를 'prototype Link'라고 ..
-
[자바스크립트] 호이스팅과 익명 함수 선언 참조Front/javascript 2020. 3. 15. 19:50
호이스팅과 익명함수 선언 참조에 대해서 알아보자 안녕하세요? 장장스입니다. 오늘은 호이스팅과 익명함수 선언 참조에 대해서 포스팅하겠습니다. 호이스팅? 호이스팅 명사 끌어 올리기; 들어올려 나르기. 쉽게말해, 함수 선언이 코드의 어느 위치에 있던간에 호출문을 사용하면 함수가 호출이 되어 함수가 작동합니다. C, Python을 공부한 사람이라면 고개를 갸우뚱 하실 것 같습니다. 조금 더 설명을 해보겠습니다. 자바스크립트에서는 함수 선언 방법이 2가지가 있습니다. 아래 코드를 봐주세요. function sayHello(){ document.write("안녕하세요?"); } sayHello(); //안녕하세요? sayHello();// 안녕하세요? function sayHello(){ document.write..
-
[자바스크립트] javascript 내장객체Front/javascript 2020. 3. 14. 13:09
자바스크립트(javascript) 브라우저객체 안녕하세요? 장장스입니다. 오늘은 자바스크립트 브라우저 객체에 대해 알아보겠습니다. 브라우저 객체란? 브라우저가 뭘까요? 쉽게 예를들면 구글의 크롬, 마이크로소프트 엣지, 애플의 사파리, 네이버의 웨일, 모질라의 파이어 폭스 등이 있습니다. 이제 브라우저가 무엇인지 한번에 이해가 되시나요? 바로 여러분이 지금 사용하고 있는 브라우저에 내장된 객체를 '브라우저 객체'라고 합니다. Window는 브라우저 객체의 최상위 객체이며, window 객체에는 하위 객체가 포함되어 있습니다. 즉, 계층적 구조로 이루어져 있으며, 이를 브라우저 객체 모델(BOM, Browser Object Model)이라고 합니다. Window 객체 window는 브라우저 객체의 최상위 객..
-
협업툴, 업무생산성을 높이는 방법etc 2020. 3. 10. 00:00
협업툴 정리 안녕하세요? 장장스입니다. 오늘은 협업툴에 대해서 포스팅을 해볼까 합니다. 프로젝트를 하면서 일정관리와 효율성을 높이기 위해 사용되는 것이 바로 협업툴입니다. 어떤 협업툴을 사용하느냐에 따라 생산성 또한 달라지게됩니다. 고전적인 지라나 슬랙에대한 글들은 많으니 저는 조금은 신선한(?) 뉴페이스들을 다뤄보도록 할게요. 잔디(JANDI) ▼잔디 홈페이지 https://www.jandi.com/landing/kr JANDI | Work Better Together JANDI is a group-oriented messaging platform with an integrated suite of collaboration tools that is tailor-made for workplaces in A..