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

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

작성일 18-08-13 10:38

페이지 정보

작성자디벨로드 조회 2,652회 댓글 0건

본문

CSS의 선택자(Selector)

선택자 { 속성:값 }

h2 { color:red; }
여기서 선택자는 h2가 되겠죠
속성이 어디에 적용되는지 표시한다고 해서 '선택자'라고 합니다.!!

전체 선택자 (Universal Selector)

모든 요소에 스타일을 적용할 때 전체선택자를 사용합니다.
별표(*)를 사용합니다.
* {
    margin:0;
    padding:0;
}
여기서 선택자는 h2가 되겠죠
속성이 어디에 적용되는지 표시한다고 해서 '선택자'라고 합니다.!!

태그 선택자 (Tag Selector)

특정 태그에 스타일을 적용할 때 사용합니다.
p {
    font-size:12px;
    font-family:"돋움";
}
P 태그 내부에 있는 텍스트에 글꼴 사이즈를 12px, 글꼴 모양을 돋움으로 적용하라는 의미 입니다.

클래스 선택자 (Class Selector)

특정부분에 스타일을 적용할 때 사용합니다.
클래스 이름 앞에 마침표(.)를 붙여서 사용합니다. <style> .deveroad { color:red; } </style> <p class="deveroad">class명이 deveroad인 p태그입니다.</p> <p>class명이 없는 p태그입니다.</p> <h2 class="deveroad">class명이 deveroad인 h2태그입니다.</h2> 클래스명이 deveroad인 태그들만 빨간색글씨가 적용됩니다.
적용결과:
class명이 deveroad인 p태그입니다.
class명이 없는 p태그입니다.
class명이 deveroad인 p태그입니다.

아이디 선택자 (Id Selector)

특정 부분에 스타일을 적용할 때 사용하는데 클래스 선택자와 달리 문서 안에서 한번만 적용 됩니다.
아이디 이름 앞에 샵(#)을 붙여서 사용합니다. <style> #deveroad { color:red; } </style> <p id="deveroad">id값이 deveroad인 p태그입니다.</p> <p>id값이 없는 p태그입니다.</p> ID값이 deveroad인 태그들만 빨간색글씨가 적용됩니다.
적용결과:
id값이 deveroad인 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를 줄일수가 있답니다.
중복되는 CSS가 줄어든다는 것은 페이지의 용량도 줄어들고 사이트 속도가 조금이라도 빨라질수도 있습니다.
그렇기에 반드시 알고 넘어가야합니다.
또한 jQuery에서도 마찬가지로 거의 비슷하게 선택자를 사용하기 때문에 더욱 잘 알아야겠죠?

추천0

댓글목록

등록된 댓글이 없습니다.

Road to Deveropment
Road to Deveropment
상단으로