[CSS] 선택자 - 기본 선택자

CSS 기본 선택자

 

 

CSS의 선택자(Selector)는 html에서 쓰인 코드에 영향을 준다.

여기서는 선택자 중에서도 기본 선택자에 대해 알아보겠다.

 

기본 선택자	표현식
전체 선택자	*
요소 유형 선택자	선택하길 원하는 노드 이름 (div, input 등)
클래스 선택자	.
ID 선택자	#
특성 선택자	[attr]

 

 

전체 선택자

 * {
    color: red;
  }

html 내에 존재하는 모든 태그에 영향을 준다.

 

유형 선택자

  div {
    color: red;
  }
  
  input {
    color: red;
  }

html에서 해당 태그를 갖는 모든 요소를 선택한다.

 

 

클래스 선택자

<!-- html -->
<div class="div1">빨간색문장</div>
<input type="text" class="input1">파란색인풋</input>

  .div1 {
    color: red;
  }
  
  .input1 {
    color: blue;
  }

html에서 해당 클래스 이름을 갖는 모든 요소를 선택한다.

.(쩜)으로 표시한다.

 

 

ID 선택자

<!-- html -->
<div id="div1">빨간색문장</div>
<input type="text" id="input1">파란색인풋</input>

  #div1 {
    color: red;
  }
  
  #input1 {
    color: blue;
  }

html에서 해당 ID를 갖는 모든 요소를 선택한다.

#(샾)으로 표시한다.

 

 

특성 선택자

<!-- html -->
<input type="text">
<img src="#" alt="이미지의 설명">

/* type이 text인 input에 적용한다. */
input[type="text"] {
    border-color: red;
  }
  
/* alt 속성을 갖는 img태그에 적용한다. */  
  img[alt] {
    border: 1px solid blue;
  }

클래스, ID에 따른 선택이 아닌, 특성에 따라 선택하는 선택자이다.

태그를 먼저 적고 대괄호 안에 적용할 타입을 적는다.

 

기본 선택자들의 좀 더 다양한 예시는 아래에서 확인이 가능하다.

한글로 되어있고 어렵지 않으니 한번씩 보는 것을 추천한다.

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors

CSS 선택자 - CSS: Cascading Style Sheets | MDN

 

 

 

끝

---

CSS 그룹선택자 링크 : https://imcoding.tistory.com/46

 

[CSS] 선택자 - 그룹 선택자 사용법