CSS 선택기

반응형

img

CSS 선택기는 CSS 규칙 집합의 구성 요소이며 스타일 지정하려는 웹 페이지의 내용을 선택하기 위해 구현됩니다. CSS 선택기는 클래스, 유형, 속성, ID 등을 기준으로 HTML의 요소를 선택합니다.

선택자는 다른 스타일에 지정하는 이름입니다.
스타일을 작성할 때 크기, 색상 등을 기준으로 각 선택기의 작동 방식을 정의합니다.

다음은 CSS용 셀렉터의 몇 가지 기본적인 유형이다.

• CSS 클래스 선택기
• CSS ID 선택기
• CSS 범용 선택기
• CSS 요소 선택기.

 

클래스 선택기

CSS 클래스 선택기는 특정 클래스 특성에 따라 스타일을 지정할 요소를 선택합니다. 클래스 이름 뒤에 점 기호 " . "가 붙습니다.

.nameOfClass {
      CSS Declarations
}

이것은 CSS의 클래스 선택자에 대한 일반적인 구문입니다.
아래는 그것이 어떻게 적용되는지 보여주는 예시입니다.

.container {
      width: 360px;
      height: 420px;
      background: rgba(216, 190, 190, 0.6);
      color: #fff;
      position: center;
      top: 150px ;
      border-radius: 15px;
      box-shadow: 0px 11px 35px 2px rgba(0,0,0,0.8);
      margin:auto;
      position: relative;    
}

 

ID 선택기

CSS ID 선택기는 특정 ID 속성에 따라 스타일을 지정할 요소를 선택합니다. 각 ID는 한 페이지에 고유하기 때문에 두 개 이상의 요소에 동일한 ID를 사용할 수 있지만 일반적인 규칙에 어긋나 하나의 요소만 첨부됩니다. ID 선택기는 해시 기호 " # " 뒤에 ID 이름이 붙어서 사용됩니다.

.nameOfID {
      CSS Declarations
}

이것은 CSS에서 ID 선택기에 대한 일반적인 구문입니다.
아래는 로그인 양식을 적용한 ID 선택기의 예입니다.

#login-form {
      background-color: #FFFFFF;
      height: 400px;
      width: 400px;
      margin: 7em auto;
      border-radius: 1.5em;
      box-shadow: 0px 11px 35px 2px rgba(0,0,0,0.8)
}

 

범용 선택기

CSS 범용 선택기는 페이지의 모든 요소를 선택하는 데 사용됩니다. 별표 기호 " * "와 함께 사용됩니다.

* {
      css declarations;
}

이것은 범용 선택기의 일반적인 구문이며, 이 경우 페이지의 모든 요소를 가리킵니다.

div * {
       font-family: sans-serif;
}

 

여기서 div 태그 내의 모든 요소를 선택하고 글꼴을 sans-serif로 설정합니다.

요소 선택기

요소 선택기는 HTML 요소를 이름으로 선택합니다.

element {
      CSS Declarations
}