[2023.03.02] 3. CSS 선택자(기본)

 

🔍CSS 선택자에 대해 알아보자

 

CSS를 적용하려면 적용하고 싶은 요소를 선택하고, 요소에 맞게 스타일을 지정해줘야 한다.

여기선 이 요소를 선택하는 CSS 선택자에 대해서 알아보려한다.

 

 

 

전체 선택자

* {
	color: red;
}

• Universal Selector
• head를 포함한 HTML 문서 내의 모든 요소를 선택한다.
• * (별표, 애스터리스크)를 사용하여 선택할 수 있다.

 

 

타입(유형) 선택자

h1 {
	font-weight: bold;
}

p {
	font-style: italic;
}

• Type Selector
• 태그 선택자 또는 요소 선택자 라고도 부르며, 특정 태그를 선택한다.

 

 

아이디 선택자 ( # )

<h1 id="title">Hello World</h1>

#title {
	font-size: 40px;
}

• ID Selector
• id가 선언된 태그를 선택할 수 있다.
• id는 HTML 페이지 내에서 유일해야 하므로 재사용성이 떨어진다.
• 아이디 속성은 JavaScript 또는 해시 링크와 함께 사용되는 경우가 많다.

 

클래스 선택자 ( . )

<p class="desc-text">html css is funny</p>

.desc-text {
	line-height: 1.6rem;
}

• Class Selector
• 클래스 선택자는 아이디 선택자와 다르게 한 페이지에 여러 개가 존재할 수 있어 재사용성이 높다.

id와 class는 숫자로 시작하면 안된다.

하이픈(-), 언더바(_), 문자로만 시작할 수 있다.

하이픈 뒤에 숫자가 붙어도 안되니 주의!

 

 

특성 선택자 ( [ ] )

/* 타입이 button인 요소들을 선택 */
[type="button"]{
	cursor:pointer;
}
/* class가 btn으로 시작하는 요소들을 선택 */
[class^="btn"]{
	color:#ffffff;
	background: red;
}

• 주어진 특성을 가진 모든 요소를 선택한다.

 

그룹 선택자 ( , )

 

/* 같은 스타일을 여러 요소에 적용시킬 때, 콤마를 이용해 한번에 스타일을 지정해 줄 수 있다. */
h1, h2, div, p {
	font-weight: bold;
}

• 중복되는 스타일을 각기 다른 요소에 적용시킬 때, 콤마( , ) 를 이용해 한번에 선택할 수 있다.

복합 선택자

See the Pen Untitled by astinaus (@astinaus) on CodePen.

 

 

자손 선택자(  )

 

section p{
  font-weight:bold;
}

• 자식, 자손 모두를 선택할 수 있다.
• 공백, 띄어쓰기를 통해 구분

 

자식 선택자 ( > )

 

section > p{
  color:purple;
}

 

 

일반 형제 선택자 ( ~ )

 

h1 ~ p{
	text-decoration:underline;
}

 

인접 형제 선택자 ( + )

 

h1 + p{
	background:yellow;
}

 

 

 

 

추천 사이트

 

CSS Diner

CSS Speedrun | Test your CSS Skills