FlowerBombs

기본셀렉터(selector) 본문

HTML&CSS/CSS

기본셀렉터(selector)

CitronLemon 2019. 3. 15. 17:22


기본 셀렉터


종류 

표현방법 

의미 

태그 이름 

selector {

...CSS 본문 ...} 

특정 태그를 가리킨다. HTML내에 동일 태그가 존재할 경우 모든 태그 요소를 일괄 처리한다. 

클래스

.hello{~~} 

.selector {

...CSS본문..} 

 셀렉터 이름 앞에 점(.)을 붙여 표시하고 HTMl태그의 class 속성에 점을 제외한 이름을 명시하여 지정한다. 태그의 종류를 가리지 않고 여러 요소에 복수 지정이 가능하다. (재사용 목적)

이 경우 selector의 이름은 자유롭게 지정한다.

 id

#selector {

...CSS본문..} 

셀렉터 이름 앞에 (#)을 붙여 표시하고 HTML태그의 id속성에 샵(#)을 제외한 이름을 명시하여 지정한다. Id속성의 값은 HTML페이지 내에서 중복 사용될 수 없다.(고유특성 명시)

이 경우 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
    <!--스타일시트-->
    <style type="text/css">
        /** 태그 셀렉터 */
        h2 {
            color: #00ff00;
        }
    
        /** 클랙스 셀렉터 - HTML태그의 class 속성과 연결된다. */
        .heyclass{
            color: #754154;
        }
    
        /** 아이디 셀렉터 - HTML태그의 id속성과 연결된다. */
        #heyid {
            color: #27A5A5;
        }
        /** 조합형 - 두 조건이 충족하는 경우만 적용된다. */
        h2.heyclass {
            color: #008000;
        }
    </style>
</head>
<body>
    <div>
        <h1>CSS 셀렉터</h1>
        <p>
            셀렉터래
        </p>
 
        <h2>태그 셀렉터</h2>
 
        <h2 class="heyclass">클래스 셀렉터</h2>
        <p class="heyclass">서로 다른 여러 개의 요소에 적용</p>
 
        <h2 id="heyid">아이디 셀렉터</h2>
        <p class="heyclass">태그+아이디, 태그+클래스 형식으로 조합 가능</p>
    </div>
    
</body>
cs




<결과>




복수지정셀렉터





저작자표시 비영리 변경금지

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

CSS와 SELECTOR  (0) 2019.03.15
'HTML&CSS/CSS' Related Articles more
Comments