CATEGORIES
CSS의 스타일을 적용할때 어떤 요소에 적용할 것인지 결정하는 방법으로 선택자를 사용합니다. 아래는 의사선택자 중 하나인 :not() 선택자의 기능과 사용방법에 대하여 알아보겠습니다.# :not 선택자 알아보기css의 :not 선택자는 이미 지정된 css 스타일에서 특정한 요소를 제외시킬 경우 사용합니다. 일반적으로 선택자는 선택을 하지 않기위해 사용하지만 이 경우는 선택을 하지 않기 위해서 사용합니다. 이 선택자를 알아두면 실제 활용할 부분이 매우 많기 때문에 굉장히 유용합니다. 아래는 가장 기본적인 문법 및 사용방법입니다.선택할 요소:not(제외시킬 요소) { ... }보시는 것과 같이 소괄호안에 원하는 태그를 넣어주면 됩니다. 아래는 간단한 사용 예제입니다.# :not()선택자 예제 소스 보기 예제를
Last Modified : 2018-07-25 13:31:31
가상 선택자, pseudo selector에 대하여 알아봅니다. 이 중에서도 오늘은 ::before 그리고 ::after 선택자는 대하여 알아보겠습니다. ::before 선택자는 다른 선택자의 뒤에 함께 쓰여 원하는 텍스트 및 스타일을 넣거나 지정할 때 사용합니다. ::after의 경우는 반대로 뒤에 추가하는 것이 이 둘의 차이점입니다.# 가상 선택자 ::after 또는 ::before가 쓰이는 경우아래의 경우에 가상 선택자가 사용됩니다.텍스트끼리 서로 구분할 경 특수코드를 변환없이 그대로 보여줄 경우백그라운드 이미지를 해당 문구 앞 또는 뒤에 삽입하는 경우 아래는 간단한 예제입니다.# ::after 및 ::before 사용방법 및 예제간단한 두 가지 예제를 알아봅니다. 먼저 ::before를 사용하여 적용
Last Modified : 2018-07-25 13:31:08제이쿼리(jquery)를 사용해 사용자 속성에 접근해 값을 불러오려면 어떻게 해야할까요? 예를 들어 아래와 같은 속성이 있다고 할 경우...<body><img data-picnum="1" class="pic" src="/test1.jpg" /><img data-picnum="2" class="pic" src="/test2.jpg" /><img data-picnum="3" class="pic" src="/test3.jpg" /></body>위와 같이 사용자 속성인 data-picnum이 존재합니다. 그렇다면 이 값이 1인 요소를 선택하려면 어떻게 해야 할까요?<script type="text/javascript">$("img[data-picnum='1']").css('display','none');</scri
Last Modified : 2015-11-15 23:25:36
제이쿼리 선택자는 매우 편리한데요~ 만약 어떤 엘리먼트를 선택자로 찾았는데 그 다음에 위치한 엘리먼트를 가져오는 방법을 알아볼까합니다.# 제이쿼리를 사용하여 다음 엘리먼트 가져오기제이쿼리는 다음에 위치한 엘리먼트(형제 엘리먼트 중 다음이죠)를 가져올 수 있도록 아래와 같이 두 개의 메소드를 제공합니다.$(element).next(선택자)// 다음 엘리먼트 하나만 반환$(element).nextAll(선택자)// 다음에 위치한 모든 엘리먼트를 배열로 반환위 두 메소드 모두 다음에 엘리먼트를 찾아 가져오는 제이쿼리 메소드입니다. 다만 next()는 다음에 위치한 하나만 가져오고 두 번째 nextAll()은 다음에 위치한 모든 엘리먼트를 가져오는 것이 차이점입니다.! next(), nextAll() 필터링 기능
Last Modified : 2020-04-02 17:00:52CSS3에서 추가된 가상선택자 :target의 사용방법을 알아봅니다.가상선택자 :target은 활성화된 링크 태그에 사용하며 선택된 영역에만 스타일을 부여할 수 있습니다. 간단한 사용방법은 아래처럼 사용됩니다. 그럼 아래 예제소스에서 더 자세하게 알아봅니다.div:target { color: red; }# CSS3 :target 예제보기아래는 예제에 사용된 html, css 코드입니다. 먼저 html 코드를 봐주세요. href 속성의 link를 클릭하면 해당 위치로 이동하면서 css :target에 적용된 스타일이 반영됩니다.<div class="view"> <div id="no1" class="no">div 01</div> <div id="no2" class="no">div 02</div> <div
Last Modified : 2019-08-21 12:03:24
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
씨즐 셀렉터(Sizzle Selector)를 이야기하려면 우선 가장 넓리 쓰이는 자바스크립트 라이브러리 중 하나인 제이쿼리(jQuery)를 빼놓을 수 없겠죠... 이 제이쿼리에서 사용하는 셀렉터가 바로 씨즐 셀렉터(Sizzle Selector)입니다.실제로 jQuery의 소스를 확인해보면 안에 Sizzle Selector가 명시된 부분이 있는데요... jQuery의 가장 강력한 요소가 바로 이 Selector 부분인데 이게 Sizzle Selector라고 합니다.제이쿼리 웹사이트에서 선택자만 사용하길 원할 경우 Sizzle Selector만 따로 다운받아 사용할 수 있으며 실제로 자바스크립트로만 코딩하되 Selector만 가져와서 빌드하는 개발자도 상당히 많다고 합니다... # Sizzle Selector
Last Modified : 2017-09-21 00:01:31
jQuery의 메소드 first()에 대하여 알아봅니다. 제이쿼리 first() 메소드는 어떤 메소드로 어떤 기능을 가지고 있을까요?# jQuery 메소드 first() 알아보기제이쿼리를 사용하는 경우 엘리먼트를 찾은 후 해당 엘리먼트 내부에서 특정한 엘리먼트를 찾아야 하는 경우 몇 가지 메소드가 존재합니다. 이 중에서 first() 메소드는 현재 위치에 해당하는 가장 첫 번째 엘리먼트를 반환합니다. 즉, 가장 가까운 엘리먼트를 선택할 수 있습니다.예를들어 다음과 같이 태그가 존재하는 경우...<div> <p>web</p> <p>is</p> <p>free</p> <p>com</p></div>여기서 p 태그를 제이쿼리로 선택하는 경우 아래와 같이 사용합니다.var ele = $('div p');// p
Last Modified : 2019-08-13 22:56:15
제이쿼리의 선택자 사용시 DOM 엘리먼트에 특수기호 #, ., : 등이 포함된 경우 선택하는 방법으로 escapeSelector()를 사용할 수 있습니다. 간단한 문법은 아래와 같습니다.$.escapeSelector(selector)만약 escapeSelector()를 사용하여 엘리먼트를 선택하는 경우 $를 함께 혼합하여 사용해야합니다. 방법은 아래의 예제를 봐주세요. # 제이쿼리 escapeSelector() 예제보기아래와 같이 특수문자 해시기호(#)를 아이디 값으로 가지는 경우 어떻게 사용하는지 알아봅니다.<div id="#test"></div>기존의 방식이라면 아래와 같이 선택자를 사용합니다.$('##test');하지만 다음과 같이 선택자는 동작하지 않고 에러가 발생합니다.Uncaught Error:
Last Modified : 2019-08-29 10:21:01CSS의 선택자 지정 방법을 알아봅니다. 여기서는 엘리먼트의 속성을 선택하는 경우 사용 가능한 선택자 방법입니다.# CSS 속성을 선택자로 지정하는 방법DOM 엘리먼트, 태그 요소는 여러가지 어트리뷰트, 속성을 가지고 있습니다. 이 값을 가지고 CSS에서 선택하는 방법으로 속성 선택자를 사용하는 방법입니다 키워드는 []를 사용하고 이를 사용하여 해당하는 속성을 가진 요소에만 스타일 지정을 할 수가 있죠. 그럼 아래를 봐주세요.! CSS 속성 선택자 사용방법먼저 간단한 사용방법입니다. 속성선택자를 사용하려면 아래와 같이 중괄호[]를 넣고 그 안에 해당 속성을 넣어주어 사용합니다. id 또는 class외에도 사용자 정의 속성역시 사용이 가능합니다. 참고로 CSS 속성 선택자는 IE 7(인터넷 익스플로러 7)이
Last Modified : 2019-08-12 22:16:14
제이쿼리(jQuery)에서 선택자 결과에 사용 가능한 not() 메소드에 대하여 알아봅니다. 어떻게 그리고 언제 사용할 수 있을까요? # 제이쿼리 not() 메소드 알아보기먼저 엘리먼트를 선택하기 위해서 선택자(selector)를 사용합니다. 이때 $(selector)를 사용하면 원하는 DOM엘리먼트가 선택되는데 여기에 .not() 메소드를 제외하면 어떻게 될까요? 바로 특정 조건이 아닌 태그 요소를 제외할 수 있게됩니다.그렇기 때문에 여러개의 요소가 선택된 경우 원하는 요소만 적용하기 위해서 아닌 조건을 제외할 수 있다는 것이지요. 문법은 아래와 같이 사용합니다.$(selector).not(notSelector)즉 위의 selector가 더하기(Plus) 역할이라면 not()의 notSelector는 빼기
Last Modified : 2019-08-01 08:51:18
CSS 선택자 중 일부 요소에게만 스타일을 적용할 경우 ... 이때 사용가능한 속성이 바로 nth-child() 그리고 nth-of-type() 속성입니다. 그런데 만약 이 속성이 정상적으로 적용이 안된다면?? 이유는 여러가지 있을 수 있겠지만 아무런 문제가 없이 코드 적용이 되었다는 전제하에 다음의 경우를 생각해볼 수 있습니다. 적용할 CSS가 태그 요소외에 스타일이나 아니면 not() 선택자 등의 또 다른 선택자 요소가 포함되었다면 문제가 발생할 수 있습니다.!! nth-child 그리고 nth-of-child 속성은 해당하는 요소가 가지는 타입(클래스, 속성, 다른 선택자)에 영향을 받지 않는다그래서 클래스나 ID에 의하여 분류하는 경우 ... 아니면 :not() 선택자등을 통해 타입을 다르게 설정한다
Last Modified : 2018-08-29 10:03:12LESS에서 pre-processor는 요즘 많이 사용됩니다. CSS를 사용하는데 매우 편리한 기능들을 제공하며 뛰어난 언어처럼 다양한 기능을 제공하죠.아래는 LESS 사용시 가상클래스(pseudo-class) 선택자인 ::before, ::after, ::hover 등을 적용하는 방법에 대하여 알아봅니다. LESS에서 가상선택자 클래스를 적용할 경우 어떻게 할까요?# LESS에서 가상클래스 선택자 적용하기아래는 div 태그 내에 위치한 span 태그에 대하여 가상클래스 선택자를 적용한 예제코드입니다. 보시는 것처럼 앞에 & 기호를 사용하면 간단하게 적용할 수 있습니다. 만약 div 태그 다음에 ::before, ::after를 선언하면 아래처럼 사용합니다.div { width: 100px; height
Last Modified : 2017-09-14 12:42:22제이쿼리 선택자를 사용하여 요소를 찾는 방법 중 특정 텍스트가 특정 속성의 값, 앞 또는 뒤에만 있는 경우 어떻게 찾을 수 있을까요? 아래에서 그 방법을 알아봅니다.제이쿼리 선택자는 매우 쉽게 요소를 찾을 수 있습니다. 만약 아래처럼 class 속성과 값을 가지는 경우 예를들어봅니다.# 제이쿼리 속성 값의 시작 또는 끝과 일치하는 요소찾기아래 세 태그는 각각 다른 class명을 가지고 있습니다.<span class="webis">1</span><span class="webfree">2</span><span class="isfree">3</span>이때 is라는 클래스명을 가지고 있는 요소중 처음 또는 마지막에 일치하는 요소만 찾으려면 어떻게할까요?var myEle = $('span[class^=is]');/
Last Modified : 2017-08-28 10:58:13CSS에서는 선택자로 ::를 기호를 사용해 pseudo 선택자를 지정합니다. 그런데 자바스크립트에서 ::after 또는 ::before와 같은 pseudo를 선택하려면 어떻게 할까요?
Last Modified : 2017-09-21 00:20:02