[CSS] CSS 선택자 종류와 우선순위 (작성중)

CSS 선택자 종류

기본 선택자

전체 선택자 (Universal Selector) : *

HTML문서 내의 모든 요소(태그)를 선택하는 선택자

보통 margin 또는 padding 값 초기화 등 기본값을 설정할 때 사용한다.

사용 시 문서 내의 모든 요소를 읽어야 하기 때문에 페이지 로딩 속도와 관계가 있어 자주 사용하지 않는 편이 좋다.

<!-- 모든 요소들 선택하여 margin=0, padding=0으로 설정 -->
* {
  margin: 0;
  padding: 0;
}

타입 선택자 (Type Selector) : Type

기본 선택자로 태그 이름을 그대로 사용하는 선택자

특정 태그로 마크업된 모든 요소를 선택한다.

<!-- div 태그로 마크업 된 모든 요소의 색깔은 파란색으로 지정 -->
div {
    color: blue;
}

클래스 선택자 (Class Selector) : .Class

.기호에 클래스 이름을 붙여서 사용하며 특정 class 속성값을 사용하는 모든 요소를 선택한다.

.error {
    color: red;
}

<!-- html -->
<p class="error">오류 발생</p>

아이디 선택자(ID Selector) : #ID

특정 ID를 선택하는 선택자

ID는 중복으로 할 수 없기 때문에 유일한 요소를 대상으로 스타일을 적용할 때 사용한다.

#register {
    text-align: center;
}

<!-- html -->
<button id="register">등록</button>

속성 선택자(Attribute Selector) : [속성명]

속성 선택자는 기본적으로 [속성명]의 형태이며 ~=, *=, |=, ^=, $= 들어가는 기호마다 기능이 조금씩 다르다.

[attribute]

해당 속성명인 요소를 선택자로 지정한다.

태그[attribute]의 형식으로 태그와 같이 사용할 수 있다. (태그와 [속성명] 사이에 공백이 있으면 선택자로 지정이 안됨)

[href] {
    color: skyblue;
}

h1[title] {
    color: red;
}

<!-- html -->
<h1 title="title1">제목</h1>
<a href="http://google.com">구글로 이동하기</a>