제이쿼리 선택자를 사용하여 요소를 찾는 방법 중 특정 텍스트가 특정 속성의 값, 앞 또는 뒤에만 있는 경우 어떻게 찾을 수 있을까요? 아래에서 그 방법을 알아봅니다.제이쿼리 선택자는 매우 쉽게 요소를 찾을 수 있습니다. 만약 아래처럼 class 속성과 값을 가지는 경우 예를들어봅니다.# 제이쿼리 속성 값의 시작 또는 끝과 일치하는 요소찾기아래 세 태그는 각각 다른 class명을 가지고 있습니다.<span class="webis">1</span><span class="webfree">2</span><span class="isfree">3</span>이때 is라는 클래스명을 가지고 있는 요소중 처음 또는 마지막에 일치하는 요소만 찾으려면 어떻게할까요?var myEle = $('span[class^=is]');// 세번째 요소만 반환위 코드를 수행하면 is로 시작하는 class 속성값을 가진 요소만 반환합니다.var myEle = $('span[class$=is]');// 첫번째 요소만
2017-08-28 05:32:09CSS3에서 추가된 가상선택자 :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 id="no3" class="no">div 03</div></div><nav> <a href="#no1"><button>1</button></a> <a href="#no2"><
2017-08-28 02:30:48LESS에서 pre-processor는 요즘 많이 사용됩니다. CSS를 사용하는데 매우 편리한 기능들을 제공하며 뛰어난 언어처럼 다양한 기능을 제공하죠.아래는 LESS 사용시 가상클래스(pseudo-class) 선택자인 ::before, ::after, ::hover 등을 적용하는 방법에 대하여 알아봅니다. LESS에서 가상선택자 클래스를 적용할 경우 어떻게 할까요?# LESS에서 가상클래스 선택자 적용하기아래는 div 태그 내에 위치한 span 태그에 대하여 가상클래스 선택자를 적용한 예제코드입니다. 보시는 것처럼 앞에 & 기호를 사용하면 간단하게 적용할 수 있습니다. 만약 div 태그 다음에 ::before, ::after를 선언하면 아래처럼 사용합니다.div { width: 100px; height: 100px; border 1px solid; &:before { content: "before"; } &:after { content: 'after'; }}
2017-08-21 09:45:00CSS에서는 선택자로 ::를 기호를 사용해 pseudo 선택자를 지정합니다. 그런데 자바스크립트에서 ::after 또는 ::before와 같은 pseudo를 선택하려면 어떻게 할까요?
2017-03-21 17:21:05CSS 선택자 중 일부 요소에게만 스타일을 적용할 경우 ... 이때 사용가능한 속성이 바로 nth-child() 그리고 nth-of-type() 속성입니다. 그런데 만약 이 속성이 정상적으로 적용이 안된다면?? 이유는 여러가지 있을 수 있겠지만 아무런 문제가 없이 코드 적용이 되었다는 전제하에 다음의 경우를 생각해볼 수 있습니다. 적용할 CSS가 태그 요소외에 스타일이나 아니면 not() 선택자 등의 또 다른 선택자 요소가 포함되었다면 문제가 발생할 수 있습니다.!! nth-child 그리고 nth-of-child 속성은 해당하는 요소가 가지는 타입(클래스, 속성, 다른 선택자)에 영향을 받지 않는다그래서 클래스나 ID에 의하여 분류하는 경우 ... 아니면 :not() 선택자등을 통해 타입을 다르게 설정한다고 해도 이것이 정상적으로 동작하지 않는다는 점입니다...그럼 아래의 예제를 통해 실제로 어떤 현상이 나타나는지 더 자세히 알아보겠습니다.<div> <p class="yes">
2016-01-27 23:01:57CSS를 사용하는 pseudo 선택자 속성으로 둘 다 CSS3에 해당합니다. 가장 많이 사용되는 선택자를 꼽으라면 nth-child, first-child, last-child가 있지 않을까 생각됩니다. 하지만 nth-of-type()을 제 경우 사용하는 일이 더 많은데요... 그 이유는 nth-of-type()의 경우 부모로부터 몇번째인가를 따지는 것이 아니라 선택된 요소에서 몇번째 해당하는가를 기준으로 하기 때문에 적용할 일이 더 많은 것 같습니다. 물론 모두 많이 사용되지만요 ~그럼 아래는 이 두 선택자에 대하여 좀 더 자세히 알아보도록 하겠습니다. 이 둘은 어떤 차이점이 있고 어떻게 사용해야 할까요?# :nth-of-type() 알아보기nth-of-type()은 아래와 같이 사용합니다.div:nth-of-type(3) { color: red; }매우 간단한 예를 들었구요... 설명하자면 div태그를 가진 3번째 요소의 텍스트 색을 red로 변경하는 것입니다. 간단하게 예를들어
2015-12-30 17:21:53CSS의 스타일을 적용할때 어떤 요소에 적용할 것인지 결정하는 방법으로 선택자를 사용합니다. 아래는 의사선택자 중 하나인 :not() 선택자의 기능과 사용방법에 대하여 알아보겠습니다.# :not 선택자 알아보기css의 :not 선택자는 이미 지정된 css 스타일에서 특정한 요소를 제외시킬 경우 사용합니다. 일반적으로 선택자는 선택을 하지 않기위해 사용하지만 이 경우는 선택을 하지 않기 위해서 사용합니다. 이 선택자를 알아두면 실제 활용할 부분이 매우 많기 때문에 굉장히 유용합니다. 아래는 가장 기본적인 문법 및 사용방법입니다.선택할 요소:not(제외시킬 요소) { ... }보시는 것과 같이 소괄호안에 원하는 태그를 넣어주면 됩니다. 아래는 간단한 사용 예제입니다.# :not()선택자 예제 소스 보기 예제를 사용하여 자세히 알아봅니다. 아래 예제는 disabled 클래스명을 가지고 있는 경우 폰트를 회색으로 변경하는 코드 예제입니다.@ not.html<div> <p>working
2015-11-13 00:37:00제이쿼리(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');</script>위와같이 중괄호를 이용하여 쉽게 사용자 속성에 접근이 가능합니다. 이 방법은 CSS의 사용자 속성 접근 방법과 동일합니다.
2015-01-23 17:24:15가상 선택자, pseudo selector에 대하여 알아봅니다. 이 중에서도 오늘은 ::before 그리고 ::after 선택자는 대하여 알아보겠습니다. ::before 선택자는 다른 선택자의 뒤에 함께 쓰여 원하는 텍스트 및 스타일을 넣거나 지정할 때 사용합니다. ::after의 경우는 반대로 뒤에 추가하는 것이 이 둘의 차이점입니다.# 가상 선택자 ::after 또는 ::before가 쓰이는 경우아래의 경우에 가상 선택자가 사용됩니다.텍스트끼리 서로 구분할 경 특수코드를 변환없이 그대로 보여줄 경우백그라운드 이미지를 해당 문구 앞 또는 뒤에 삽입하는 경우 아래는 간단한 예제입니다.# ::after 및 ::before 사용방법 및 예제간단한 두 가지 예제를 알아봅니다. 먼저 ::before를 사용하여 적용된 모든 엘리먼트의 앞에 '-' 기호를 추가합니다. - CSS 코드.test::before { content: '-';} - HTML 코드 <span>web</span><span
2014-09-26 23:44:25씨즐 셀렉터(Sizzle Selector)를 이야기하려면 우선 가장 넓리 쓰이는 자바스크립트 라이브러리 중 하나인 제이쿼리(jQuery)를 빼놓을 수 없겠죠... 이 제이쿼리에서 사용하는 셀렉터가 바로 씨즐 셀렉터(Sizzle Selector)입니다.실제로 jQuery의 소스를 확인해보면 안에 Sizzle Selector가 명시된 부분이 있는데요... jQuery의 가장 강력한 요소가 바로 이 Selector 부분인데 이게 Sizzle Selector라고 합니다.제이쿼리 웹사이트에서 선택자만 사용하길 원할 경우 Sizzle Selector만 따로 다운받아 사용할 수 있으며 실제로 자바스크립트로만 코딩하되 Selector만 가져와서 빌드하는 개발자도 상당히 많다고 합니다... # Sizzle Selector 선택자 엔진의 특징, 선택자 방법 보기가장 큰 특징으로 다음 문법의 사용입니다.# 샵 기호를 사용해 아이디명 선택 가능. 구둣점기호를 사용해 클래스명 선택 가능> 또는 < 부등호
2014-06-28 09:19:10CSS의 선택자 중 하나인 속성 선택자를 사용하면 해당하는 속성을 가진 요소에만 스타일 지정을 할 수가 있습니다. 그럼 아래를 봐주세요.[ 1 ] 속성 선택자 사용방법먼저 간단한 사용방법입니다. 속성선택자를 사용하려면 아래와 같이 중괄호[]를 넣고 그 안에 해당 속성을 넣어주어 사용합니다. id 또는 class외에도 사용자 정의 속성역시 사용이 가능합니다. 참고로 CSS 속성 선택자는 IE 7(인터넷 익스플로러 7)이상의 버전에서 지원합니다.a[속성이름="속성값"] { 스타일 값 }[ 2 ] 속성 선택자 사용 예제보기<a href="webisfree.com">위의 href 속성을 선택하기 위해 아래의 방법을 사용합니다.<style> a[href] { color:red; } // href 속성이 있는 모든 요소에 스타일 지정 a[href="webisfree.com"] { color:red; } // href 속성 값이 webisfree.com인 요소에 지정</style><a
2014-01-14 14:30:59
