총 15개의 일치하는 문서를 찾았습니다.
jquery[jQuery] 제이쿼리 선택자 escapeSelector() 알아보기
제이쿼리의 선택자 사용시 DOM 엘리먼트에 특수기호 #, ., : 등이 포함된 경우 선택하는 방법으로 escapeSelector()를 사용할 수 있습니다. 간단한 문법은 아래와 같습니다.$.escapeSelector(selector)만약 escapeSelector()를 사용하여 엘리먼트를 선택하는 경우 $를 함께 혼합하여 사용해야합니다. 방법은 아래의 예제를 봐주세요. # 제이쿼리 escapeSelector() 예제보기아래와 같이 특수문자 해시기호(#)를 아이디 값으로 가지는 경우 어떻게 사용하는지 알아봅니다.<div id="#test">...
Last Modified : 2019-08-29 10:21:01
Created : 2019-08-25 15:06:15
jqueryjQuery 선택자 first() 메소드 알아보기
jQuery의 메소드 first()에 대하여 알아봅니다. 제이쿼리 first() 메소드는 어떤 메소드로 어떤 기능을 가지고 있을까요?# jQuery 메소드 first() 알아보기제이쿼리를 사용하는 경우 엘리먼트를 찾은 후 해당 엘리먼트 내부에서 특정한 엘리먼트를 찾아야 하는 경우 몇 가지 메소드가 존재합니다. 이 중에서 first() 메소드는 현재 위치에 해당하는 가장 첫 번째 엘리먼트를 반환합니다. 즉, 가장 가까운 엘리먼트를 선택할 수 있습니다.예를들어 다음과 같이 태그가 존재하는 경우...<div> <p>web</p>&...
Last Modified : 2019-08-13 22:56:15
Created : 2019-08-08 11:08:18
jquery제이쿼리 다음 엘리먼트 찾기 next() nextAll()
제이쿼리 선택자는 매우 편리한데요~ 만약 어떤 엘리먼트를 선택자로 찾았는데 그 다음에 위치한 엘리먼트를 가져오는 방법을 알아볼까합니다.# 제이쿼리를 사용하여 다음 엘리먼트 가져오기제이쿼리는 다음에 위치한 엘리먼트(형제 엘리먼트 중 다음이죠)를 가져올 수 있도록 아래와 같이 두 개의 메소드를 제공합니다.$(element).next(선택자)// 다음 엘리먼트 하나만 반환$(element).nextAll(선택자)// 다음에 위치한 모든 엘리먼트를 배열로 반환위 두 메소드 모두 다음에 엘리먼트를 찾아 가져오는 제이쿼리 메소드입니다...
Last Modified : 2020-04-02 17:00:52
Created : 2019-07-21 17:03:02
js제이쿼리 not() 메소드 알아보기
제이쿼리(jQuery)에서 선택자 결과에 사용 가능한 not() 메소드에 대하여 알아봅니다. 어떻게 그리고 언제 사용할 수 있을까요? # 제이쿼리 not() 메소드 알아보기먼저 엘리먼트를 선택하기 위해서 선택자(selector)를 사용합니다. 이때 $(selector)를 사용하면 원하는 DOM엘리먼트가 선택되는데 여기에 .not() 메소드를 제외하면 어떻게 될까요? 바로 특정 조건이 아닌 태그 요소를 제외할 수 있게됩니다.그렇기 때문에 여러개의 요소가 선택된 경우 원하는 요소만 적용하기 위해서 아닌 조건을 제외할 수 있다는 것이지요. 문법은 아래와...
Last Modified : 2019-08-01 08:51:18
Created : 2019-07-06 09:58:11- jquery
제이쿼리 - 속성 값 시작 또는 끝과 일치하는 텍스트만 찾기
제이쿼리 선택자를 사용하여 요소를 찾는 방법 중 특정 텍스트가 특정 속성의 값, 앞 또는 뒤에만 있는 경우 어떻게 찾을 수 있을까요? 아래에서 그 방법을 알아봅니다.제이쿼리 선택자는 매우 쉽게 요소를 찾을 수 있습니다. 만약 아래처럼 class 속성과 값을 가지는 경우 예를들어봅니다.# 제이쿼리 속성 값의 시작 또는 끝과 일치하는 요소찾기아래 세 태그는 각각 다른 class명을 가지고 있습니다.<span class="webis">1</span><span class="webfree">2</span><span class="...
Last Modified : 2017-08-28 10:58:13
Created : 2017-08-28 05:32:09 - css
CSS3 가상선택자 :target 알아보기
CSS3에서 추가된 가상선택자 :target의 사용방법을 알아봅니다.가상선택자 :target은 활성화된 링크 태그에 사용하며 선택된 영역에만 스타일을 부여할 수 있습니다. 간단한 사용방법은 아래처럼 사용됩니다. 그럼 아래 예제소스에서 더 자세하게 알아봅니다.div:target { color: red; }# CSS3 :target 예제보기아래는 예제에 사용된 html, css 코드입니다. 먼저 html 코드를 봐주세요. href 속성의 link를 클릭하면 해당 위치로 이동하면서 css :target에 적용된 스타일이 반영됩니다.<div class="view">...
Last Modified : 2019-08-21 12:03:24
Created : 2017-08-28 02:30:48 - webdevetc
LESS에서 ::after 및 ::before 그리고 :hover 사용하는 방법
LESS에서 pre-processor는 요즘 많이 사용됩니다. CSS를 사용하는데 매우 편리한 기능들을 제공하며 뛰어난 언어처럼 다양한 기능을 제공하죠.아래는 LESS 사용시 가상클래스(pseudo-class) 선택자인 ::before, ::after, ::hover 등을 적용하는 방법에 대하여 알아봅니다. LESS에서 가상선택자 클래스를 적용할 경우 어떻게 할까요?# LESS에서 가상클래스 선택자 적용하기아래는 div 태그 내에 위치한 span 태그에 대하여 가상클래스 선택자를 적용한 예제코드입니다. 보시는 것처럼 앞에 & 기호를 사용하면 간단하게 적용할 수...
Last Modified : 2017-09-14 12:42:22
Created : 2017-08-21 09:45:00 - etc
자바스크립트에서 pseudo 요소를 선택하는 방법은?
CSS에서는 선택자로 ::를 기호를 사용해 pseudo 선택자를 지정합니다. 그런데 자바스크립트에서 ::after 또는 ::before와 같은 pseudo를 선택하려면 어떻게 할까요?...
Last Modified : 2017-09-21 00:20:02
Created : 2017-03-21 17:21:05 
css[CSS] 클래스 또는 not 선택자등과 함께 nth-of-type 또는 nth-child 속성 적용 안될 경우
CSS 선택자 중 일부 요소에게만 스타일을 적용할 경우 ... 이때 사용가능한 속성이 바로 nth-child() 그리고 nth-of-type() 속성입니다. 그런데 만약 이 속성이 정상적으로 적용이 안된다면?? 이유는 여러가지 있을 수 있겠지만 아무런 문제가 없이 코드 적용이 되었다는 전제하에 다음의 경우를 생각해볼 수 있습니다. 적용할 CSS가 태그 요소외에 스타일이나 아니면 not() 선택자 등의 또 다른 선택자 요소가 포함되었다면 문제가 발생할 수 있습니다.!! nth-child 그리고 nth-of-child 속성은 해당하는 요소가 가...
Last Modified : 2018-08-29 10:03:12
Created : 2016-01-27 23:01:57
css[CSS] nth-of-type() 그리고 nth-last-of-type() 선택자 알아보기
CSS의 선택자 :nth-of-type() 그리고 :nth-last-of-type()에 대하여 자세히 알아봅니다.위 두 가지 CSS는 모두 선택자 속성입니다. 특정 엘리먼트 요소를 선택할 때 사용하며 사실 많이 사용되는 선택자 속성은 아닙니다. (nth-child, first-child, last-child 등이 많이 사용됨)하지만 정해진 순서에 따라 규칙적으로 스타일을 적용하는 경우 nth-of-type()을 사용하면 매우 쉽고 빠르게 스타일을 정의할 수 있습니다. 왜냐하면 nth-of-type()은 부모를 기준으로 하지 않고 자신이 속한 형제 ...
Last Modified : 2019-11-11 11:54:27
Created : 2015-12-30 17:21:53