[CSS] 스타일 시트 선택자(Selector) 개념 및 사용법 종류

코딩하는흑구
웹 개발/CSS
2019. 4. 20. 00:01

CSS 문법

- 선택자 {속성명 : 값;}

selector{attribute: value;}

- 선택자 {속성명 : 값; 속성명 : 값; 속성명 : 값;....}

- 선택자 {

속성명 : 값;

속성명 : 값;....

}

선택자

- 태그를 검색하는 도구

- 태그를 선택자를 통해 검색하면 찾은 태그의 속성과 값을 적용한다.

- 태그를 찾는다 -> 속성(서식)을 선택(정한다.) -> 정해진 속성의 값을 적용

- 1개 검색 or 여러개 검색 -> 속성을 일괄 적용한다.(루프)

CSS선택자 종류

1. 태그선택자

- 태그명을 그대로 사용해서 원하는 태그를 검색한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
/* <h1>태그를 찾자 */
      h1{
          color:red;
      }
/* <div>태그를 찾자 */      
      div{
          color:blue;
      }
/* <div>태그를 찾자 */
     p{
         color : green;
     }      
     input{
         color : tomato;
     }
     textarea{color:cornflowerblue;}
     body{
         color : skyblue;
     }
</style>
cs

2. id선택자

- 태그에 명시된 id속성을 검색하는 선택자

- 태그명#아이디

- 아이디는 유일해야 한다.

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
<style>
h1#title1 {
    color: red;
}
p#content1{
    color :orange
} 
 
</style>
<body>
    <!-- ex03_selector.htm -->
 
    <h1 id="title1">자기소개</h1>
    <p class="content">자기소개</p>
 
    <hr>
 
    <h1>회사소개</h1>
    <p>회사소개회</p>
 
    <hr>
    <ul>
        <li>강아지</li>
        <li id="cat">괭이</li>
        <li>병아리</li>
        <li class = "pet1">송아지</li>
        <li class = "pet2">망아지</li>
    </ul>
 
</body>
cs

3. class 선택자

- 태그에 명시된 class 속성을 검색하는 선택자

- 태그명.클래스

- 클래스는 중복 가능하다.

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
35
36
<style>
p.content {
    color: orange;
}
li#cat{
    color:orange;
}
    
li.pet1{
    color:blue;        
}
li.pet2{
    color:blue;
}
</style>
<body>
    <!-- ex03_selector.htm -->
 
    <h1 id="title1">자기소개</h1>
    <p class="content">자기소개</p>
 
    <hr>
 
    <h1>회사소개</h1>
    <p>회사소개회</p>
 
    <hr>
    <ul>
        <li>강아지</li>
        <li id="cat">괭이</li>
        <li>병아리</li>
        <li class = "pet1">송아지</li>
        <li class = "pet2">망아지</li>
    </ul>
 
</body>
cs

태그선택자 + 아이디선택자 + 클래스선택자 => 3개의 조합으로 나머지 선택자가 만들어진다.

4. 자손 선택자, Descendant Selector

- 친자식 + 손자 + 증손자 + 고손자 +...+ 자손

5. 자식 선택자, Child Selector

- 친자식

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
<style>    
/* 
    자손 선택자 
     - 부모선택자 (공백) 자손선택자{  } 
*/
/* 
    div b{color:orange; }
    p b{color:blue}
*/
/*
    자식선택자 
    -부모선택자 > 자식선택자 { }
*/
    div > span > b {color:blue;}
    ul#list2 > li{color:blue;}
    
    
    /* 테이블예제 */
    
    table#tbl1 >tbody > tr > td{color:blue;} /* 승리 */
    table#tbl1 td{color:red;}
</style>
 
Colored by Color Scripter
cs

7. 형제 선택자, Sibling Selector

- 선택자 ~선택자

- 자손 선택자 유사

- 내 위의 형제를 조건으로

8. 인접 형제 선택자, Adjacent Sibling Selector

- 선택자+선택자

- 자식선택자 유사

- 바로 위의 형제를 조건으로

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>    
    p ~ p{color:red;} /*형제 선택자*/
    div+span{color:blue;} /*인접 선택자*/
</style>
<body>
    <p>p</p>
    <div>div</div>
    <span>span</span>
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <div>div</div>
    <p>p</p>
    <span>span</span>
    <p>p</p>
    
</body>        Colored by Color Scripter
cs

저작자표시

'웹 개발 > CSS' 카테고리의 다른 글

[CSS] Position 속성(static, absolute. relative, fixed) (1)	2019.05.01
[CSS] display 속성(none, block, inline, inline-block), hover (0)	2019.04.28
[CSS] overflow 속성 알아보기 (2)	2019.04.24
[CSS] 수치표현 (pt,px,em,%,rem,ex,mm,cm,pc, in) (0)	2019.04.21
CSS의 개념 및 특징, 사용법 (0)	2019.03.30

코딩하는 흑구