CSS의 선택자_첫번째 | 태그를 선택해서 CSS 입히기

안녕하세요 웹아이입니다.

CSS의 선택자(Selector)

선택자 { 속성:값 }

h2 { color:red; }

여기서 선택자는 h2가 되겠죠

속성이 어디에 적용되는지 표시한다고 해서 '선택자'라고 합니다.!!

전체 선택자 (Universal Selector)

모든 요소에 스타일을 적용할 때 전체선택자를 사용합니다.

별표(*)를 사용합니다.

* {
    margin:0;
    padding:0;
}

태그 선택자 (Tag Selector)

특정 태그에 스타일을 적용할 때 사용합니다.

p {
    font-size:12px;
    font-family:"돋움";
}

P 태그 내부에 있는 텍스트에

글꼴 사이즈를 12px, 글꼴 모양을 돋움으로 적용하라는 의미 입니다.

클래스 선택자 (Class Selector)

특정부분에 스타일을 적용할 때 사용합니다.

클래스 이름 앞에 마침표(.)를 붙여서 사용합니다.

<style>
.webi { 
    color:red; 
}
</style>

<p class="webi">class명이 webi인 p태그입니다.</p>
<p>class명이 없는 p태그입니다.</p>
<h2 class="webi">class명이 webi인 h2태그입니다.</h2>

클래스명이 webi인 태그들만 빨간색글씨가 적용됩니다.

class명이 webi인 p태그입니다.

class명이 없는 p태그입니다.

class명이 webi인 p태그입니다.

아이디 선택자 (Id Selector)

특정 부분에 스타일을 적용할 때 사용하는데

클래스 선택자와 달리 문서 안에서 한번만 적용 됩니다.

아이디 이름 앞에 샵(#)을 붙여서 사용합니다.

<style>
#webi {
    color:red;
}
</style>

<p id="webi">id값이 webi인 p태그입니다.</p>
<p>id값이 없는 p태그입니다.</p>

id값이 webi인 p태그입니다.

id값이 없는 p태그입니다.

하위 선택자 (Descendant Selector)

하위 요소에 적용할 때 사용합니다.

'상위요소 한칸띄고 하위요소'로 표현합니다.

<style>
section p {
    color:blue;
}
</style>

<section>
    <p>section태그 안에 있는 p태그</p>
    <p>section태그 안에 있는 p태그</p>
</section>
<p>section태그 밖에 있는 p태그</p>

SECTION 태그 안에 있는 모드 DIV 태그의 글자에 파란색을 적용합니다.

section태그 안에 있는 p태그

section태그 안에 있는 p태그

section태그 밖에 있는 p태그

자식 선택자 (Child Selector)

바로 아래의 하위 요소의 적용할 때 사용합니다.

하위 선택자는 내부의 모든 요소에 적용되지만,

자식 선택자는 바로 아래의 자식 에게만 적용 됩니다.

부등호(>) 로 표시합니다.

<style>
section > p {
    color:blue;
}
</style>

<section>
    <p>section태그 바로 아래에 있는 p태그</p>
    <p>section태그 바로 아래에 있는 p태그</p>
    <div>
        <p>section태그 아래 div태그 아래 있는 p태그</p>
    </div>
</section>

SECTION 태그 바로 아래 하위 요소인 P태그에만 적용됩니다.

section태그 바로 아래에 있는 p태그

section태그 바로 아래에 있는 p태그

section태그 아래 div태그 아래 있는 p태그

인접형태 선택자 (Adjacent Selector)

형제중에 첫번째 동생요소에 스타일을 적용할 때 사용합니다.

더하기(+) 기호로 표시합니다.

<style>
h1 + P {
    text-decoration:underline;
}
</style>

<h1>h1태그입니다.</h1>
<p>h1태그 다음에 나오는 p태그입니다.</p>
<p>h1태그 다음에 나오는 두번째 p태그입니다.</p>

H1 태그 다음에 나오는 P 태그 중 첫번째 P 태그에만 밑줄을 적용해줍니다. 

h1태그입니다.

h1태그 다음에 나오는 p태그입니다.

h1태그 다음에 나오는 두번째 p태그입니다.

형제 선택자 (Sibling Selector)

모든 형제 요소에 스타일을 적용할 때 사용합니다.

틸드(~)로 표시합니다.

<style>
h1 ~ p {
    text-decoration:underline;
}
</style>

<h1>h1태그입니다.</h1>
<p>h1태그 다음에 나오는 첫번째 p태그입니다.</p>
<p>h1태그 다음에 나오는 두번째 p태그입니다.</p>
<p>h1태그 다음에 나오는 세번째 p태그입니다.</p>

H1 태그의 형제에 밑줄을 적용합니다.(H1 태그는 제외합니다.)

h1태그입니다.

h1태그 다음에 나오는 첫번째 p태그입니다.

h1태그 다음에 나오는 두번째 p태그입니다.

h1태그 다음에 나오는 세번째 p태그입니다.

그룹 선택자 (Group Selector)

여러 선택자에 같은 속성을 적용해야할 때 사용합니다.

콤마(,)로 표시합니다.

<style>
p, h1, h3 {
    color:red;
}
</style>

<p>p태그입니다.</p>
<h1>h1태그입니다.</h1>
<h2>h2태그입니다.</h2>
<h3>h3태그입니다.</h3>

P 태그, H1 태그, H3 태그에 빨간색을 적용합니다.

p태그입니다.

h1태그입니다.

h2태그입니다.

h3태그입니다.

CSS의 다양한 선택자의 대해서 알아보았습니다.

선택자만 잘 알고 있어도 CSS를 사용하기가 수월해지고

중복되는 CSS를 줄일수가 있답니다.

그렇기에 반드시 알고 넘어가야합니다.

또한 jQuery에서도 마찬가지로 거의 비슷하게 선택자를 사용하기 때문에 더욱 잘 알아야겠죠?