03.CSS선택자(기본속성선택자(이름할당),후손자손선택자,동위선택자,반응선택자,상태선택자)

 

 

기본속성선택자 (이름으로 할당)

■ 기본 선택자 뒤에 [](대괄호)를 사용하여 속성과 속성값을 사용하여 서택하는 기법
■ 형식 : 선택자[속성=속성값]{CSS설정내용;}

<style>
        div[name=name2] {
            color: indigo;
            background-color: khaki;
        }
    </style>
    <div name="name1">div name1영역</div>
    <div name="name2">div name2영역</div>
    <p name="name2">p name1영역</p>
    <!-- div name1 과 p는 먹히지 않음     -->

div name1영역

div name2영역

p name1영역

 

후손자손 선택자

■ 후손 선택자 : 조상 하위의 모든 요소
■ 자식 선택자 : 부모 하위의 단일 하위 요소

    <style>
        #test1 h4 {
            /* 관련 하위 후손들 다 먹힘*/
            background-color: rgb(196, 245, 146);
            color: black;
        }
        
        #test1>h4 {
            /*바로 밑 후손만 먹힘*/
            background-color: rgb(143, 236, 255);
            color: black;
        }
        
        #test1>#test2>p {
            background-color: rgb(245, 222, 146);
            color: black;
        }
        
        .class1 .class2 {
            /*부모자식*/
            background-color: rgb(248, 175, 222);
            color: black;
        }
    </style>

    <div id="test1">
        <h4>자손 영역1</h4>
        <h4>자손 영역2</h4>
        <h2>아무것도 아닌 영역</h2>

        <div id="test2">
            <h4>자손 영역3</h4>
            <h3>아무것도 아닌 영역</h3>
            <p>자손의 자손의 p영역</p>
            <div>아무것도 아닌 영역</div>
        </div>
    </div>
    <hr><br>

    <div class="class1">
        클래스 1 영역입니다
        <div class="class2"> class2영역입니다.</div>
        <div>일반 div영역입니다</div>
    </div>
    <div class="class2">class2 영역입니다.</div>
    <hr><br>

자손 영역1

자손 영역2

아무것도 아닌 영역

자손 영역3

아무것도 아닌 영역

자손의 자손의 p영역

아무것도 아닌 영역

---

클래스 1 영역입니다

class2영역입니다.

일반 div영역입니다

class2 영역입니다.

---

 

동위선택자 (참고)

■ 동위 관계에서 뒤에 위치한 태그를 선택
■ 바로 뒤의 요소 선택 : 선택자a + 선택자b { 설정내용; }
■ 뒤에 있는 모든 요소 선택 : 선택자a ~ 선택자b { 설정내용; }

    <style>
        #div-test1+div {
            background-color: purple;
        }
        /* #div-test3~div {
            background-color: blue;
        } */
        
        #div-test1+div+div {
            background-color: yellow;
        }
    </style>

    <div id="div-test1">div test1</div>
    <div id="div-test2">div test2</div>
    <div id="div-test3">div test3</div>
    <div id="div-test4">div test4</div>
    <div id="div-test5">div test5</div>
    <div id="div-test6">div test6</div>

div test1

div test2

div test3

div test4

div test5

div test6

 

반응선택자

-사용자의 움직임에 따라 발생한 이벤트에 반응하는 선택자
-active : 사용자가 특정 태그를 클릭하였을때 발생
-hover : 마우스가 특정 태그에 떠 있는 경우

    <style>
        #active-test,
        #hover-test {
            background-color: lavender;
            width: 300px;
            height: 100px;
        }
        
        #active-test:active {
            /* active 상태정의 */
            background-color: yellow;
        }
        
        #hover-test:hover {
            /* hover 상태정의 */
            background-color: green;
            width: 320px;
            height: 110px;
            transition: all 500ms;
        }
    </style>
    <div id="active-test">active테스트</div>
    <div id="hover-test">hover테스트</div>
    <hr><br>

active테스트

hover테스트

---

 

상태선택자

■입력 양식의 상태에 따라 변하는 선택자
■ 체크 상태의 input 태그 선택 - input태그:checked { 설정내용; }

    <style>
        /* 속성 선택자 ver */
        
        input[type='checkbox']:checked {
            width: 50px;
            height: 50px;
            transition: 100ms all;
        }
        
        #u_id:focus,
        #u_pw:focus {
            background-color: red;
            transition: 100ms all;
        }
        
        .userInputClass:focus {
            background-color: red;
            transition: 100ms all;
        }
        
        option:disabled {
            background-color: black;
            color: white;
            transition: 100ms all;
        }
        
        option:enabled {
            background-color: yellow;
            transition: 100ms all;
        }
    </style>
    <div>checkbox</div>
    <input type="checkbox" id="apple" name="fruits" value="사과">사과
    <input type="checkbox" id="banana" name="fruits" value="바나나">바나나
    <input type="checkbox" id="orange" name="fruits" value="오렌지">오렌지
    <br><br><br><br><br><br><br><br><br><br><br>

    <h4>input text</h4>
    아이디 : <input type="text" id="u_id">
    <br>비밀번호 : <input type="text" id="u_pw">
    <br>이름 : <input type="text" class="userInputClass">
    <br>

    <h4>select</h4>
    <select>
        <option value="10">10대</option>
        <option value="20">20대</option>
        <option value="30">30대</option>
        <option value="40" disabled>40대</option>
    </select>

checkbox

사과 바나나 오렌지

input text

아이디 :
비밀번호 :
이름 :

select

10대 20대 30대 40대

 

 

---

"본 인터넷 사이트 내의 모든 이미지, 문구, 콘텐츠, 내용 등에 대한 저작권은 76beny에게 있습니다.

이를 무단으로 도용, 복사, 전재, 재배포, 2차 변형 등을 할 경우

민, 형사상 법적 조치 등 저작권법에 의거하여 처벌 받을 수 있습니다."