[HTML/CSS] Chapter11. 반응선택자와 상태선택자 CSS

오늘은 CSS 반응선택자와 상태선택자에 관한 포스팅을 올리겠습니다.

선택자의 이름에서 느낄수 있겠지만

반응선택자란? 말 그대로 반응을 일으키는 선택자!!

-> 우리가 마우스를 버튼이나 기타 태그에 마우스를 올려놓으면 색상이 변한다거나 글자가 작아진다거나 등의 이벤트가 있죠!!

이러한 효과를 내는것이 반응선택자라고 할수있습니다.

상태선택자란? 말 그대로 상태와 관련있는 선택자!!

-> 태그중 속성을 비활성화하면 색상이 회색이 되기도 하고 그 태그에 포커스가 잡혔을때 테두리가 바뀌는등 이러한 효과를 내는것이 상태 선택자입니다.

# 반응선택자 예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
    <style>
        ul > li{
            font-size: 30px;
            width:300px;
            margin:0 auto;        
        }
        
        li:hover{
            color:red;
        }
    </style>
</head>
 
<body>
<!-- 반응선택자 -->
    <div>
        <ul>
            <li> menu1</li>
            <li> menu2</li>                                        
            <li> menu3</li>
            <li> menu4</li>
            <li> menu5</li>    
        </ul>
    </div>
</body>
</html>
 
 
Colored by Color Scripter
cs

style 태그안에 보시면 ul>li 자손 선택자와 li:hover 선택자가 있네요

li:hover의 경우 li 태그에 마우스가 오버되면 이벤트가 적용됩니다.

# 반응선택자 결과

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

# 상태선택자 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
    <style>
        input:focus{
            padding:20px;
            border:3px solid red;        
        }
        
        input:disabled{
            color:red;
        }
        
    </style>
</head>
 
<body>
<!-- 상태선택자 -->
    
    <div>
        <form>
            이름: <input type="text" name="uname"></br></br>
            아이디: <input type="text" name="uid"></br></br>
            비밀번호:<input type="password" name="upw" disabled="disabled" value="111"></br>    
        </form>
    </div>
    
    
</body>
</html>
 
 
Colored by Color Scripter
cs

상태선택자는 태그의 상태를 나타내는 선택자입니다.

input:focus는 input 태그에 포커스가 잡히게 되면 상태를 나타내는 역할을 하며

input:disabled는 input 태그가 비활성화 되었을때의 상태를 처리합니다.

# 상태선택자 결과

저작자표시

'프로그래밍 강의 > HTML 과 CSS' 카테고리의 다른 글

[HTML/CSS] Chapter10. 동위선택자 CSS (0)	2018.09.15
[HTML/CSS] Chapter9. 후손 및 자손 선택자 CSS (0)	2018.09.15
[HTML/CSS] Chapter8. 속성 선택자를 사용한 CSS (0)	2018.09.15
[HTML/CSS] Chapter7. id(#) , class(.) 을 이용한 CSS (0)	2018.09.15
[HTML/CSS] Chapter6. 블록요소와 라인요소 (0)	2018.09.14

Sw.Dev