[CSS] 1-2. CSS 선택자 ②(기본 속성 선택자, 자식 선택자, 후손 선택자, 반응 선택자, 상태 선택자, 동위 선택자 & 실습문제)

1. 기본 속성 선택자

- 태그에 작성된 특정 속성을 선택하는 선택자

(id, class도 선택가능하지만 보통 아이디는 #, 클래스는 . 을 사용함)

 

[작성법]

선택자[속성명="속성값"] {css코드}

 

(참고)

① 선택자 부분은 생략이 가능

☞ 특정속성을 가진 모든 요소 선택

② 속성값 양쪽에 쌍따옴표를 추가해야한다.

☞ 홀따옴표(' ')로 사용하거나, 생략도 가능함

 

 

▶ link 태그

: 외부 css 파일과 연결하는 태그

<link href="resources/css/selector2.css" rel="stylesheet">

=> rel="" 이 파일이 stylesheet 파일이라는 것을 알리기 위해 작성해야한다!

=> 이것을 작성안하면 css파일의 style 적용이 안됨

 

 

■  selctor2.css 파일

/* 
    CSS 파일
    파일 전체가 <style>태그 내부라고 생각하면 됨
*/

/* 기본 속성 선택자 */
/* 모든 div태그들 중 name 속성의 속성값이 name-1인 요소들 */
div[name="name-1"]{background-color: orange;}


/* 모든 태그들 중 name 속성의 속성값이 name-2인 요소들 */
*[name="name-2"]{background-color: blue;} /* * 생략가능 */
/* => p태그의 name-2 속성인 것도 모두 blue로 background-color 가 적용된 것을 확인 */


p[name='name-1']{background-color: green;}

 

■ html파일 내의 body 태그

    <!-- div[name=name-$]{div$}*4 -->
    <div name="name-1">div1</div>
    <div name="name-1">div2</div>
    <div name="name-2">div3</div>
    <div name="name-2">div4</div>

    <p name="name-1">p1</p>
    <p name="name-1">p2</p>
    <p name="name-2">p3</p>
    <p name="name-2">p4</p>

=> p 태그의 name-2 속성인 것도 모두 background-color가 적용됨.

=> p[name='name-1]{background-color: green;} 

p태그의 name-1 속성만 적용된 것을 확인

 

 

---

2. 자식 선택자(>)

: 지정된 요소 바로 하위에 존재하는 요소를 선택하는 선택자

 

[작성법]

선택자1>선택자2{css코드}

 

- 선택지1: 부모요소 선택

- 선택지2: 자식요소 선택

 

※ 선택자에서는 띄어쓰기도 하나의 기능이 있음. (선택자1>선택자2) 그래서 띄어쓰기는 되도록 하지않는 것이 관례이다.

 

 

■  selctor2.css 파일

#parent-ul>li {background-color: orange;}

#parent-ul>li>span {background-color: red;}

=> parent-ul의 자식 중 li태그들만 배경색을 지정한다

=> parent-ul의 자식 중 li태그들 중에서 span 태그들만 배경색을 지정한다.

 

 

■ html파일 내의 body 태그

    <ul id="parent-ul"> 부모
        <li>자식1</li>
        <li>
            <span>자식2</span>
        </li>
        <li>자식3</li>
        <li>
            <span>자식4</span>
        </li>
    </ul>

 

---

3. 후손 선택자( )   // ( ) 공백

- 지정된 요소의 모든 하위에 존재하는 요소를 선택하는 선택자

- 자식 : 1단계 아래

  후손 : n단계 아래 모두

 

[작성법]

선택자1 선택자2 {css코드}

 

선택자1 : 부모 요소 선택자

선택자2 : 후손 요소 선택자

 

 

■  selctor2.css 파일

#test-div{
    border : 2px solid black;
}


/* test-div 아래에 있는 모든 p태그 */
#test-div p{
    background-color: yellowgreen;
}

 

■ html파일 내의 body 태그

    <div id="test-div">
        <p>test-div의 자식 요소입니다</p>
        <p>test-div의 자식 요소입니다</p>

        <div>
            <p>나는 누구?</p>
        </div>
    </div>

=> 모든 p태그에 background-color : yellowgreen이 설정된 것을 확인할 수 있음

 

 

---

4. 반응 선택자

- 사용자의 움직임에 반응하여 스타일이 달라지는 선택자(클릭 유지, 마우스 오버 등...)

- 요소를 클릭하는 경우(:active)

- 요소에 마우스가 올라가는 경우(:hover)

  (hover란? 마우스를 올리고 내릴 때를 의미)

 

 

 

■  selctor2.css 파일( 클릭하고 있을 때만 반응하는 :active)

#active-test:active{    /* #active-test : active (띄어쓰기 포함) => 작동 안됨 */
    background-color: yellow;
}

 

■  selctor2.css 파일( 마우스를 올렸을 때 반응하는 :hover)

#hover-test:hover{
    background-color: hotpink;
    width : 230px;
    height : 230px;

    /* 스타일 변화 시간 지정 */
    /* transition-duration: 0.5s;   마우스를 갖다댔을때 천천히 크기가 증가함 */
}

 

=> 마우스를 갖다대면 천천히 크기가 증가하는 것을 볼수 있지만,

=> 하지만... 마우스를 떼면 다시 빠르게 크기가 감소함 
=> 모든 요소의 변화를 천천히 하려면...? 

 

=> 아래와 같이 #hover-test를 따로 만들어 이와 같이 지정해주어야 함

 

 

■  selctor2.css 파일( 마우스를 올렸을 때 반응하는 :hover)  => 모든 요소의 변화를 천천히 하는 코드

#hover-test{
    transition-duration: 0.5s;
}

☞ 요소가 변화를 일으키면 0.5초간 천천히 변해라

☞  마우스를 올라갔다 내려갔을 때 천천히 변하는 것을 볼 수 있음

 

 

■ html파일 내의 body 태그

    <div class="div-cls" id="active-test">:active 테스트</div>
    <div class="div-cls" id="hover-test">:hover 테스트</div>

 

 

 

 

---

5. 상태 선택자

- 입력 양식(input, textarea 등)의 상태에 따라 선택되는 선택자

 

:focus  → 요소에 초첨이 맞춰져있을 때

:checked → 체크된 요소를 선택할 때 사용

 

:enabled / :disabled → 요소가 사용가능한/사용불가능한 상태일 때

 

1) :focus

■  selctor2.css 파일

#focus-test:focus{
    background-color: springgreen;
}

 

■ html파일 내의 body 태그

    <input type="text" id="focus-test">

 

 

2) :checked

■  selctor2.css 파일

input/*[type=checkbox]*/[name=fruits]:checked{
    width: 30px;
    height: 30px;
}

 

=> radio나 checkbox는 크기를 제외한 스타일이 적용되지 않는다!

 

 

■ html파일 내의 body 태그

    <label for="apple"></label>사과<input type="checkbox" name="fruits" id=""><br>
    <label for="daechu"></label>대추<input type="checkbox" name="fruits" id=""><br>
    <label for="grape"></label>포도<input type="checkbox" name="fruits" id=""><br>

=> name 속성이 fruits 인 것은 check를 할때 크기가 커지도록 설정하였음

 

 

 

 

3) :enabled / :disabled

: input은 enabled가 기본값으로 들어가기 때문에 보통 모두 enabled 값이 들어간다. 하지만, disabled 값을 주게 되면 변경하지 못하게 된다.

 

 

■  selctor2.css 파일

#test-div2>input:enabled{
    background-color: lightgreen;
}

#test-div2>input:disabled{
    background-color: lightcoral;
}

 

☞ test-div2에서 input 태그들 중에서 enabled들은 lightgreen으로, disabled들은 lightcoral로 변경

 

 

■ html파일 내의 body 태그

    <div id="test-div2">
        사용 가능 : <input type="text" enabled> <br>  <!-- enabled가 기본값임 -->
        사용 불가능 : <input type="text" value="변경하면 안되는 값" disabled>  
    </div>

 

☞ 사용가능은 값을 입력할 수 있도록 되어있지만, 값을 넣지 못하도록 막혀있다.

 

 

---

6. 동위 선택자

: 동위 관계(동등한 위치 == 형제 관계)에서 뒤(다음)에 위치한 요소를 선택하는 선택자

 

ex)

P

H1
H1

 

① P 바로 뒤(다음)에 있는 H1 요소를 하나를 선택(+)

    P선택자+H1선택자

② P 뒤에 있는 모든 H1 요소를 선택시 ( ~ 틸드(Tilde))

    P 선택자~H1선택자{css코드}

 

 

■  selctor2.css 파일(A 바로 뒤에 있는 B 요소 선택(+)

#div1+div{background-color: olive;}  /* 2번 div요소가 바뀜 */

 

■  selctor2.css 파일(A 바로 뒤에 있는 모든 B요소 선택(~)

#div3~div{background-color: chocolate;}

 

 

■ html파일 내의 body 태그

    <div id="div1">1번 입니다</div>

    <div>2번 입니다</div>

    <div id="div3">3번 입니다</div>
    <div id="div4">4번 입니다</div>

    <p>관련 없는 태그입니다.</p>
    
    <div id="div5">5번 입니다</div>

 

☞ p태그는 관련 없는 태그이므로 아무런 효과가 없는 것을 확인할 수 있음.

☞ div1번 태그 바로 뒤인 2번 태그가 배경색이 olive로 바뀌었음

☞ div3번 태그 뒤 모든 태그가(p태그 제외) 배겨색이 chocolate로 바뀌었음

 

 

 

7. checkbox모양 바꾸기(실습 문제)

[준비물] - 동위 선택자(+) - 상태 선택자(:checked) - input type="checkbox" - lable 태그(for 속성) - 체크박스 이미지

 

■  selctor2.css 파일

#check1+label{
    width: 30px;
    height: 30px;

    display: inline-block;

    cursor: pointer;
    
    border: 1px soild black;
}


#check1:checked+label{
    background-image: url(../image/iconsample.png);
    background-repeat: no-repeat;   /* 배경이미지 반복하지 않는다*/
    background-size: cover;   /* 배경이미지 지정한 요소를 다 덮도록 배경이미지를 확대/축소 */
}

#check1{
    /* checkbox를 안보이게 함 */
    display: none;
}

 

☞ #check1+label{}

label의 for속성은 " 라벨과 결합될 요소의 id 속성값"이다.

id가 check1 바로 뒤 요소인 label에 크기증가(width: 30px, height: 30px...)와 cursor 속성(해당 태그 위에 위치하는 마우스 커서의 모양을 손가락모양으로 변경), 검은색 테두리로 변경하라.

 

☞ #check1:checked+label{}

id가 check1인것을 check를 하게되면 다음 요소인 label에는 배경이미지(url(../image/...))를 표시한다.

 

☞ #check1{}

checkbox를 안보이게한다.

 

 

■ html파일 내의 body 태그

    <input type="checkbox" id="check1">
    <label for="check1"></label>

 

=> 처음에는 빈화면이지만 클릭하게되면 이와 같은 이미지가 출력됨.

 

=> 다시 한번 클릭하게 되면 다시 이미지가 사라지고 빈화면이 출력됨