[Fornt] 선택자와 요소 : 기본적인 이해

 

개발자로 일을 하니까 프론트엔드와 백엔드의 경계가 없는 것 같습니다.

"난 서버 코드만 만질거야!" , "난 화면단 만 구성하고 말거야!" 하는 이야기는 옛날 이야기 이며 현재는 이런말 하는 것이 얼마나 어리석었는지 알게되었습니다.

 

 

CSS에서 선택자로 요소를 가져오고 jQuery로도 선택자를 가져오게 됩니다.

그래서 이것을 헷갈리지 않고 바로 찾을 수 있게 작성하게 되었으며 검색하여 온 독자들도 여기서 모든 정보를 얻었으면 좋겠습니다.

 

출처 : 심슨

선택자

 

아이디 선택자 ( # )

 

HTML에서 <태그 id="아이디 이름">..</태그> 이런 식으로 작성 되어있을 때 해당 요소를 가져올 수 있습니다.

CSS, jQuery로 해당 요소를 선택하는 법은 같습니다.

 

 

jQuery

<script>
    let element = $('#yourElementId')
</script>

CSS

<style>
    #yourElementId {
        background-color : #fff;
    }
</style>

 

 

 

 

 

클래스 선택자 ( . )

 

HTML에서 <태그 class="클래스 이름">..</태그> 이런 식으로 작성 되어있을 때 해당 요소를 가져올 수 있습니다.

CSS, jQuery로 해당 요소를 선택하는 법은 같습니다.

클래스는 여러 요소에 붙힐 수 있으므로 만약 이 선택자로 인해 요소를 가져오게 된다면 무조건 배열 형식으로 가져오게 됩니다.

 

 

jQuery

<script>
    $('.yourElementClass')
    // 또는
    $('태그.yourElementClass')
</script>

CSS

<style>
    .yourElementClass {
        background-color : #fff;
    }
    태그.yourElementClass {
        color : blue;
    }
</style>

 

 

 

 

 

속성 선택자 ( [ ] )

 

HTML에서 요소 내에 작성되어 있는 속성을 이용해서 선택하는 방법입니다.

선택자 뒤에 []를 이용해서 속성과 속성 값을 제시해서 선택하는 방법입니다.

CSS, jQuery로 해당 요소를 선택하는 법은 같습니다.

HTML 내에 이렇게 있다고 가정하자
<div class="div-class" name="name1">div1</div>
<div class="div-class" name="name2">div2</div>
<div class="div-class" name="name3 name1">div3</div>
<div class="class-div" name="name4">div4</div>

 

 

jQuery

<script>
    $('div[name=name1]')	// 모든 div태그 중에서 name속성값이 name1과 "일치"하는 요소를 선택
    
    $('div[name~=name1]')	// 모든 div태그 중에서 name속성 값에 name1이 "포함"되어 있는 요소를 선택
    
    $('div[class|=div]')    // 모든 div태그 중에서 class속성값이 div로 "시작"하는 요소 (-앞에 한 단어로써)

    $('div[name^=na]')	    //  모든 div중에서 name 속성값이 na로 "시작"되는 요소
    
    $('div[class$=ss]')	    // 모든 div태그 중에서 class 속성값이 ss로 "끝"나는 요소

    $('div[class*=i]')	    // 모든 div태그 중에서 class속성값에 i가 "포함" 되어 있는 요소. 
</script>

CSS

<style>	
    /* 모든 div태그 중에서 name속성값이 name1과 "일치"하는 요소를 선택 */
    div[name=name1] {/*생략*/}

    /* 모든 div태그 중에서 name속성 값에 name1이 "포함"되어 있는 요소를 선택. */
    div[name~=name1] {/*생략*/}

    /* 모든 div태그 중에서 class속성값이 div로 "시작"하는 요소 (-앞에 한 단어로써)*/
    div[class|=div] {/*생략*/}

    /* 모든 div중에서 name 속성값이 na로 "시작"되는 요소 */
    div[name^=na] {/*생략*/}

    /* 모든 div태그 중에서 class 속성값이 ss로 "끝"나는 요소 */
    div[class$=ss] {/*생략*/}

    /* 모든 div태그 중에서 class속성값에 i가 "포함" 되어 있는 요소. */
    div[class*=i] {/*생략*/}
</style>

 

 

 

 

가상 클래스 선택자 ( : )

 

HTML에서 특별한 상태를 선택하는 예약어입니다.

 

관련 반응	상태	설명
하이퍼링크 관련	:link	하이퍼 링크 요소를 선택한다
	:visited	사용자가 방문한 링크를 선택한다.
마우스 관련	:active	사용자에 의해 활성화된 요소를 선택한다.
	:hover	마우스 커서가 위치한 요소를 선택한다. + (가능한 속성값에 cursor : pointer; 를 넣어주자)
	:focus	초점을 가진 요소를 선택한다.
콘텐츠 삽입	:before	선택된 요소의 앞에 지정한 콘텐츠를 삽입한다.
	:after	선택된 요소의 뒤에 지정한 콘텐츠를 삽입한다.
초점 관련	:enable	활성화 되어있는 요소를 선택한다.
	:disabled	비활성화 되어있는 요소들 선택한다.

 

 

예시

<style>
	a:active {
		background-color : red;
	}
	/* ↑ 설명 : 링크를 마우스로 눌렀을 경우 색상을 레드로 변경해라  */
    
	.btn:hover {
		color : blue; 
	}
	/* ↑ 설명 : 클래스명이 btn 인것에 마우스가 올라가면 색상을 블루로 바꿔라  */
</style>

 

 

 

 

 

이외 선택자

 

동위 선택자 (+, ~등)

• 동위 관계 즉, 같은 레벨에 있는 요소 뒤에 위치한 특정 요소를 선택할 때 사용한다.
• a와 b는 아이디 선택자, 클래스선택자 태그로 가져온 선택자로 생각하시면 됩니다.
• a요소 뒤에 있는 b요소를 "하나만" 선택하기
  css 예시) a+b { }
  jQuery 예시) $('a+b')
• a요소 뒤에 있는 "모든" b요소를 다 선택하기
  css 예시) a~b { }
  jQuery 예시) $('a~b')

 

 

부정 선택자( :not )

• 해당 요소만 제외해서 적용할 때
• ul 태그 아래 li 태그의 클래스가 fail이 있는 요소만 제외하겠다
  css 예시) ul li:not(.fail) {}
  jQuery 예시) $('ul li:not(.fail)')

 

 

감사합니다.