선택자의 개념
선택자란 내가 css를 통해 html의 요소들을 꾸며 줄려고 하면 html의 어느 부분을 어떻게 꾸며 줄까 라는 생각을 하게 될텐데, 여기서 '어느 부분'을 선택을 할 때 사용되는 여러가지 방식이 있는데 이것이 선택자(selector)다.
선택자의 종류
1. 모든 요소 선택자 - *{ }
css에서 *{ }를 사용하면 괄호 안에 입력한 css코드가 html파일의 모든
부분에 적용이 된다는 의미이다.예를 들어 html파일에 들어있는 모든 요소의
글자색을 빨간색으로 하고 싶다면 다음과 같이 입력해주면 된다.
* {
color: red;
}2.태그 선택자 - 태그 이름 { }
태그 선택자는 특정 태그를 지정해서 css를 적용 해주고 싶을때 사용한다.
예를 들어 p태그에만 brown 색을 넣어 주고 싶다면 다음과 같이 입력해 주면 된다.
p {
color: brown;
}
추가설명
태그 선잭자는 모든 요소 선택자(*{ }) 보다 우선한다.예를 들면
모든 요소 선택자를 통해 모든 요소의 글씨색을 red로 바꾸었 더라도 태그 선택자로
p태그 요소의 글씨 색을 brown으로 지정 하였다면 p태그 요소의 글씨 색은 brwon이 되는 것이다.
3. class 선택자 - .클래스이름 { }
class선택자는 내가 특정 class를 가지고 있는 것들에만 css효과를 주고 싶을때 사용한다. css에서 어떤 class를 불러올 때에는 .(마침표)를 이용한다.
.velog {
color: blue;
}
위와 같이 입력을 하면 velog라는 class를 가진 것들에 글씨 색을 blue로 바꿔준다. class선택자는 태그 선택자 보다 우선한다.
추가설명
class선택자는 다른 선택자에 이어붙일 수 있다. class끼리도 이어 붙일 수 있고 태그 선택자에 class선택자를 이어 붙일 수도 있다.예를 들어 p태그 선택자에 velog라는 class를 붙인다면 p태그 중에서 velog라는 class를 가진 것들에만 css효과를 준다는 것이다. 아래와 같이 쓰일 수 있다.
p.velog {
color: yellow;
}
이 경우 그냥 단독으로 쓰인 class선택자 우선하게 되는데 그 이유는
선택자는 구체적일 수록 우선순위가 높기 때문이다.
4. id선택자 - #id이름 { }
id선택자도 있는데 id선택자는 class선택자보다 우선 한다. id선택자는 #을 통해 선택해준다. 예를들어 id="front" 를 속성으로 가진 것들에 css를 통해 글자색을 puple로 해주고 싶다면 아래와 같이 사용할 수 있다.
#front {
color: puple;
}
그리고 id는 class와 달리 페이지에서 딱 하나만 존재 한다는 것을 잊지 말자
5.그룹 선택자
그룹 선택자는 위의 선택자들을 함께 사용하고 싶을때 ,로 구분하여 함께 사용해 주는 것을 의미한다. 예를들어 p태그 ,class="velog" , id="front" 이 셋을 가진 것들에 동시에
css를 통해 글자 색을 green으로 바꾸고 싶다면 콤마로 구분하여 다음과 같이 사용할 수 있다.
p, .velog, #front {
color: green;
}
