[CSS] 주요 선택자

Day37. 230621

주요 선택자

선택자?

스타일 속성을 적용하는 요소.

 

전체 선택자

*{속성:속성 값; 속성:속성 값; ...}

스타일을 모든 요소에 적용할 때 사용한다.

모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용한다. 전체선택자로는 *를 사용한다.

또한 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용한다.

 

 

태그 선택자

태그{스타일}

특정 태그가 쓰인 모든 요소에 스타일을 적용한다.

 

p{
  fomt-size:14px;
}

-> 모든 p의 문단에 글자크기 12px 스타일이 적용된다.

 

 

클래스 선택자

.클래스명{스타일}

특정 부분에만 스타일을 적용할 때 사용하는 것.

태그 대신 클래스 이름을 사용한다.

 

<style>
 .bluetext{
 		color:blue;
 }
</style>

<h2 class="bluetext"성격우형>
<p>MBTI<br>
<p class="bluetext">16가지 성격 유형 검사

 

 

id 선택자

#아이디명{스타일}

웹 문서 안의 특정 부분에 스타일을 지정할 떄 사용한다.

클래스 선택자와 비슷하지만 id선택자는 딱 한번만 쓸 수 있다.

 

<style>
 #container{
      width:600px
      padding:15px;
 }
</style>

<div id="container">
  <h1>회사 소개</h1>

 

 

그룹 선택자-둘 이상 요소에 같은 스타일을 적용

여러 선택자에 같은 스타일이 사용되는 경우에 쉼표로 구분해

여러 선택자를 나열한 후 스타일은 한번만 정의한다.

h1{
  text-align:center;
}
h2{
  text-align:center;
}

위의 소스를 그룹 선택자를 사용해 아래 소스처럼 한꺼번에 정의 할 수 있다.

h1,h2{
  text-align:center;
}