css 알아보기 - 선택자 : 전체선택자 * 와 타입선택자, class와 id

 

 

 

 

선택자란, 스타일을 적용하려는 HTML 요소를 고르기 위한 방법입니다.

 

 

 

 

선택자의 종류

1. 전체 선택자

2. 타입 선택자

3. 속성 선택자

4. 가상 클래스 선택자

5. 가상 요소 선택자

 

 

 

 

전체 선택자 *

전체 선택자 ( * ) 는 모든 html 태그에 적용되는 선택자입니다.

해당 선택자 내의 선언 블록들은 모든 html 태그에 적용됩니다.

 

따라서 전체 선택자는 html 태그의 기본 스타일을 지정해주는데 사용하며,

다른 css를 덮어쓰지 않기 위해 가장 맨 위에 작성합니다.

 

 

 

 

타입 선택자

태그의 타입을 대상으로 하는 선택자입니다.

태그 선택자 라고도 합니다.

대표적으로 클래스 선택자와 id 선택자가 존재합니다.

 

 

 

class 와 id

둘 다 html 태그를 지정하는데 사용하는 속성입니다.

차이점이라면, class는 다수의 태그를 지정하는데 사용하지만, id는 단일 태그를 지정하는데 사용합니다.

따라서 class가 같은 태그는 존재해도, id가 같은 태그는 존재하면 안됩니다.

 

예시 코드

<div>
    <ul id="unorder_list"> 
        this is list
    	<li class="ul_list" id="list_1"> list1 </li>
        <li class="ul_list" id="list_2"> list2 </li>
        <li class="ul_list" id="list_3"> list3 </li>
        <li class="ul_list" id="list_4"> list4 </li>
    </ul>
</div>

 

 

 

 

클래스 선택자와 id 선택자

클래스 선택자는 지정된 클래스를 가진 태그를 대상으로 하는 선택자이고,

id 선택자는 지정된 아이디를 가진 태그를 대상으로 하는 선택자입니다.

클래스 선택자는 .{클래스 명} 으로 지정하고

아이디 선택자는 #{아이디} 로 지정합니다.

또한 클래스 선택자와 아이디 선택자는 중첩이 되며, 중복된 속성은 아이디 선택자로 덮어씌워집니다.

 

예시 코드

#unorder_list{
    font-size: 24px;
    color: yellow;
    background-color: black;
}

.ul_list{
    font-size: 18px;
    color: white;
    background-color: black;
}

#list_1{
	font-weight: bolder;
}

 

 

위의 css와 html 을 결합시키면 아래의 결과가 나옵니다.

this is list
• list1
• list2
• list3
• list4

 

unorder_list 라는 id 를 타겟으로 한 css로 인해 머릿글의

글자 크기가 24px가 되고, 글자색이 노란색이 되었으며, 배경색 또한 검정색이 되었습니다.

 

ul_list 라는 클래스를 타겟으로 한 css로 인해서 하위 리스트들의

글자크기가 18px가 되고 글자색이 흰색이 되었으며, 배경색이 검정색이 되었고,

그 중 id가 list_1인 리스트는 굵은 글씨 처리되었습니다.