목차

CSS Selectors

  • description : CSS Selectors
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-03-04


Source of the article


CSS Selectors

CSS 선택자는 디자인하려는 HTML 요소를 선택합니다.

CSS 선택자는 5개의 카테고리로 구분할 수 있습니다.

  1. 단순 선택자 (Simple Selectors) : 이름, id, class 기반 HTML 요소들을 선택합니다.
  2. 연결자 선택자 (Combinator selectors) : 요소들 사이의 특정 관계에 기반한 요소들을 선택합니다.
  3. 의사 클래스 선택자 (Pseudo-class selectors) : 특정 상태에 기반한 요소들을 선택합니다.
  4. 의사 요소 선택자 (Pseudo-elements selectors) : 요소의 일부분을 선택하고 디자인합니다.
  5. 속성 선택자 (Attribute selectors) : 속성 또는 속성 값에 기반한 요소들을 선택합니다.


CSS 요소 선택자 (element Selector)

요소 선택자는 요소 이름에 기반하여 HTML 요소들을 선택합니다.

p {
   text-align: center;
   color: red;


CSS 아이디 선택자 (id Selector)

id 선택자는 특정 요소를 선택하기 위해 HTML 요소의 id 속성을 사용합니다.
요소의 id는 페이지 내에서 고유하므로, id 선택자는 하나의 고유한 요소를 선택하기 위해 사용됩니다.
특정 id를 지닌 요소를 선택하기 위해, 해시 (hash, 우물 정자(#))를 쓰고, 요소의 id 이름을 기재합니다.

#para1 {
   text-align: center;
   color: red;
}


CSS 클래스 선택자 (Class Selector)

class 선택자는 특정 class 속성을 가진 HTML 요소들을 선택합니다.
특정 class룰 가진 요소들을 선택하기 위해, 마침표 (., period, 피어리어드)를 쓰고, class 이름을 기재합니다.

.center {
   text-align: center;
   color: red;


특정 HTML 요소들만 class에 영향을 받도록 명시할 수 있습니다.

기본형

p.center {
   text-align: center;
   color: red;
}


예제

<html>
<head>
<style>
p.center {
   text-align: center;
   color: red;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>   // 이 HTML 요소만이 영향을 받습니다.

</body>
</html>


HTML 요쇼들이 하나 이상의 class도 참조할 수 있습니다.

기본형

   <p class="center large">This paragraph refers to two classes</p>

상기 예제에서 <p>태그의 요소들은 class=“center”와 class=“large”에 따라서 디자인됩니다.

예제

<html>
<head>
<style>
p.center {
   text-align: center;
   color: red;
}

p.large {
   font-size: 300%;
}
<style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>

</body>
</html>

CSS 전체 선택자 (Universal Selector)


* {
   text-align: center;
   color: blue;
}


CSS 그룹 선택자 (Grouping Selector)

그룹 선택자는 동일한 스타일 정의를 가지고 있는 모든 HTML 요소들을 선택합니다.
하기의 예제는 h1, h2, 그리고 p 요소는 동일한 스타일 정의를 가지고 있습니다. 

h1 {
   text-align: center;
   color: red;
}

h2 {
   text-align: center;
   color: red;
}

P {
   text-align: center;
   color: red;
}


선택자들을 그룹으로 묶어서 코드를 최소화하는 것이 더 좋습니다.
선택자들을 그룹으로 묶기 위하여, 쉼표 (, comma)를 사용하여 각각의 선택자들을 하기의 예제처럼 구별합니다.

h1, h2, p {
   text-align: center;
   color: red;
}


CSS 단순 선택자 (Simple Selectors)

Selector Example Example description
#id #firstname id=“firstname”을 가진 요소를 선택합니다.
.class .intro class=“intro”를 가진 모든 요소들을 선택합니다.
element.class p.intro class=“intro”를 가진 <p>요소들만을 선택합니다.
* * 모든 요소들을 선택합니다.
element p 모든 <p>요소들을 선택합니다.
element, element div, p 모든 <div>요소들과 모든 <p>요소들을 선택합니다.
, , ,