티스토리 뷰

Programming/HTML&CSS

[HTML5/CSS3] CSS 선택자 #4 - 반응/상태/구조 선택자

Lkt_Programmer 2019. 3. 28. 12:54
반응형

안녕하세요. CSS 선택자 강의 4 번째 포스팅입니다. 오늘 포스팅 할 내용은 반응/상태/구조 선택자가 되겠습니다. 다른 선택자 공부를 하고 싶으면 아래 다른 포스팅을 참고해주세요.


CSS 선택자 공부하러 가기!


[HTML5/CSS3] 선택자(Selector)를 통해 CSS를 적용해보자 #1

[HTML5/CSS3] 선택자를 통해 CSS를 적용해보자 #2 #혼합 선택자 #속성 선택자

 [HTML5/CSS3] CSS 선택자 #3 - 하위 선택자 / 자식 선택자 / 등위 선택자



   1. 반응 선택자


반응 선택자는 웹 페이지를 보는 사용자가 마우스로 특정한 행동을 취했을 때 CSS 속성을 지정 할 수 있는 선택자를 의미합니다. 반응 선택자의 유형에 대해서는 아래 표를 참조해주세요.


유형 

해석 

 h1:hover

h1 태그에 마우스를 올려놓으면 선택 

a : active 

a 태그에 마우스를 클릭하면 선택 

 a : visited

link를 클릭하여 방문하였을 때 선택 


위 표에서 특정 태그로 유형을 정의하였는데 다른 태그로도 사용이 가능합니다. 정의 된 태그에 대한 어떤 행동을 취했을 때 속성을 정의하는 것이므로 오해 없으시길 바랍니다. 아래 샘플예제를 살펴 보겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS 선택자</title>
    <style>
        h1:hover {color : red; font-size : 50px;}
        #daum:active {color : blue; font-size : 50px;}
        #naver:visited {color : green; font-size : 50px;}
    </style>
</head>
<body>
    <h1>Hello!!</h1>
    <a id = "daum" href = "http://www.daum.net">다음</a> <br />    
    <a id = "naver" href = "http://www.naver.com">네이버</a> <br />    
</body>
</html>
cs


▼ h1:hover : <h1> 태그에 마우스를 올렸을 때 CSS 속성을 지정합니다. <body> 태그에서 사용 된 <h1>태그는 Hello가 있고 Hello 글자 위에 마우스를 올리면 글자크기가 커지면서 Color가 붉은색으로 변경 되는 것을 확인 할 수 있습니다.


▼ #daum:active : id 속성값이 daum인 요소를 클릭 하였을 때 CSS를 적용하도록 합니다. 클리하는 시점에 다음 글자의 CSS 속성이 변경 되는 것을 확인 하실 수 있습니다.


▼ #naver:visited : id 속성값이 naver인 요소에 해당하는 링크를 방문 하였을 때 CSS 속성이 지정됩니다.


   2. 상태 선택자


상태 선택자는 보통 <form>태그에서 input 태그의 특정한 상태에 대해 CSS 속성을 지정 할 때 사용이 됩니다. 대표적인 상태 속성은 아래 표를 참조해주세요.


유형 

해석 

input:focus 

focus가 된 input 태그를 선택

 input:enabled

입력이 가능한 input 태그를 선택 

 input :disable

입력이 불가능한 input 태그를 선택 


enabled와 disable은 해당 영역을 사용 할 수 있느냐와 없느냐의 차이입니다. 예로 input 태그의 type이 text일 경우 해당 영역의 TextBox에 입력이 가능하면 enabled 상태이며 입력이 불가능하면 disable 상태라고 보시면 됩니다. 그럼 아래 샘플 예제를 살펴 보겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS 선택자</title>
    <style>
        input:focus { border : 2px solid red;}
        input:enabled {color : green}
        input:disabled{color : red}
    </style>
</head>
<body>
    <form>
        아이디 : <input type = "text" name = "uid"/> <br />
        비밀번호 : <input type = "password" name = "pwd"/> <br />
        닉네임 : <input type = "text" name = "uname" value = "123456" disabled = "disabled" /> <br />
    </form>
</body>
</html>
cs


▼ input:focus의 경우 TextBox를 클릭하여 입력이 가능한 상태를 Focused 상태로 봅니다. <input>태그가 Focused 상태라면 CSS 속성을 지정하는데 border 값을 지정하고 있습니다. input:enabled는 앞서 설명한대로 입력이 가능한 <input>태그에 속성을 지정합니다.


▼ input:disable의 경우 반대로 입력이 불가능한 상태의 <input>태그에 속성을 부여합니다. 위 결과에서 닉네임에 해당하는 영역에 해당합니다.




  3. 구조 선택자


구조 선택자는 구조에 따라 특정한 위치에 속하는 태그를 선택할 수 있는 태그입니다.

말이 어려운데 일단 아래 표를 참조해주세요.


 유형

해석 

 nth-child(수열)

 수열에 따라 위치하는 태그 선택 

last-child

마지막 요소를 선택 

first-child 

첫 번째 요소를 선택 


태그선택자와 혼합선택자 그리고 지금 배우고 있는 구조 선택자를 이용하면 다음과 같은 선택자를 만들어 낼 수 있습니다. 


ul li:nth-child(2n+1) 


<ul>태그의 하위 요소 중 <li>태그를 선택합니다. 만약 <ul>태그의 하위 요소 중 <li> 태그가 6개가 있다면 6개의 <li>태그가 선택이 됩니다. 그런데 뒤에 구조 선택자가 추가로 붙어있는데 ()안에 n의 경우 0부터 시작하여 대입을 해보면 결과값이 1, 3, 5가 됩니다. 즉 처음부터 풀이하면 <ul>태그의 하위 요소 중 <li>태그들을 선택하는데 위치가 1,3,5에 있는 <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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #menu {width : 200px; height : 200px;}
        ol li:nth-child(2n+1) {background-color : red}
        ol li:nth-child(2n) {background-color : yellow}        
    </style>
</head>
<body>
    <div id ="menu">
        <ol>
            <li>Menu1</li>
            <li>Menu1</li>
            <li>Menu1</li>
            <li>Menu1</li>
            <li>Menu1</li>
            <li>Menu1</li>
        </ol>
    </div>
</body>
</html>
cs

▼ ol li:nth-child(2n+1)의 경우 <ol>의 하위 태그 중에서 1,3,5 번째 태그를 선택하여 배경색을 red로 지정하라는 의미입니다. ol li:nth-child(2n) 역시 0부터 대입을 해보면 0, 2, 4, 6 번째의 태그를 선택하여 배경색을 노란색으로 지정하라는 의미입니다.

반응형
저작자표시 비영리

'Programming > HTML&CSS' 카테고리의 다른 글

[HTML5/CSS3] CSS 속성 강좌 #2 - margin과 padding의 차이  (0) 2019.03.31
[HTML5/CSS3] CSS 속성 강좌 #1 - display/opacity/visibility  (0) 2019.03.29
[HTML5/CSS3] CSS 선택자 #3 - 하위 선택자 / 자식 선택자 / 등위 선택자  (0) 2019.03.27
[HTML5/CSS3] 선택자를 통해 CSS를 적용해보자 #2 #혼합 선택자 #속성 선택자  (0) 2019.03.26
[HTML5/CSS3] 선택자(Selector)를 통해 CSS를 적용해보자 #1  (0) 2019.03.25