본문 바로가기
Frontend/CSS

[CSS] 선택자 1 (기본, 그룹 선택자)

by Rayched 2023. 3. 24.
목차
1. 선택자
① 선택자의 정의
② 기본 선택자 (전체, 태그, Class, ID)
 (1). 전체 선택자 (Universal Selector)
 (2). 태그 선택자 (Type Selector)
 (3). Class 선택자 (Class Selector)
 (4). ID 선택자 (ID Selector)
③ 그룹 선택자
2. 마치며

1. 선택자 (Selector)

① 선택자의 정의

 - 웹 페이지의 HTML 요소를 대상으로, CSS 스타일을 지정하려고 할 때 사용된다.

   (이번 장에서는 CSS 스타일을 지정하는 선택자 중 '전체', '태그', 'class', 'id', '그룹'

    다섯 가지만 다루고, 나머지 선택자들은 추후에 다루도록 하겠다.)

 - 선택자에 의해 선택된 요소들은 '선택자의 주체'로 지정된다.

[index.html]
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>선택자 예제</title>
    <link href="/style.css" rel="stylesheet"/>
    <!-- style을 외부 스타일시트 파일로 정의했기 때문에
        <link> 태그를 통해서 해당 스타일시트 파일을 HTML 문서가 참조할 수 있게한다.
    -->
  </head>

  <body>
    <h4>선택자(Selector)</h4>
    <p>선택자는 HTML 문서의 요소에 CSS 스타일을 지정하려고 할 때 사용된다.</p>
    <!-- 
      p 요소 CSS 스타일 지정하기
      글자색 => 빨간색 (color: red;)
    -->
  </body>
</html>​

 

[style.css]
 
/* CSS 선택자 사용 예시 
   - 아래의 선택자는 '태그 선택자(유형 선택자)'로
     태그 선택자의 정의는 바로 다음장에서 다룬다. */
p {
  color: red;
}

/* 
  p => CSS 선택자
       선언부 앞에 입력된 모든 것이 CSS 선택자이다.
  {*} => 선언부, CSS 속성을 여기에 작성한다.
  color => CSS 속성 명, HTML 문서의 특정 요소의 텍스트 색상을 지정하는 속성
  red => CSS 속성 값, 입력한 값을 지정한 요소에 적용한다.
*/

② 기본 선택자 (전체, 태그, Class, ID)

(1). 전체 선택자 (Universal Selector)

 - HTML 문서 내의 모든 요소를 선택하는 선택자

 - '*' 로 표시한다.

 - 모든 요소에 같은 CSS 속성을 적용하고, 그러한 특성상 웹 페이지의 로딩 속도가 느려질 수 있다.

[index.html]
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>선택자 예제</title>
    <link href="/style.css" rel="stylesheet"/>
  </head>

  <body>
    <h3>전체 선택자 예시</h3>
    <p>오늘의 커피는 무엇인가요?</p>
    <p>=> 스타벅스 콜드브루 Venti</p>
  </body>
</html>

[style.css]
 
* {
  color: blue;
}
/* 전체 선택자
 - HTML 문서의 모든 요소에 공통된 CSS 스타일을 적용한다.
 */

HTML 문서의 모든 요소의 글자색이 파란색으로 지정된 것을 확인 가능

(2). 태그 선택자 (Type Selector)

 - 'p', 'h1', 'a'처럼 HTML 문서의 요소를 직접적으로 선택하는 선택자 (유형 선택자)

    HTML 문서에서 요소가 중복될 경우, 해당 요소를 전부 선택한다.

   예) p 요소가 2개 이상이고, p 태그의 CSS 스타일을 지정했다면 

         HTML 문서의 p 요소 전부, p 태그를 지정한 CSS 스타일이 적용된다.

[index.html]
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>선택자 예제</title>
    <link href="/style.css" rel="stylesheet"/>
  </head>

  <body>
    <h3>제목</h3>
    <hr/><br/>
    <p>태그선택자란?</p>
    <p>=> HTML 문서의 요소를 직접적으로 선택하는 선택자입니다.</p>
  </body>
</html>

[style.css]
 
h3 {
  background-color: cornflowerblue;
  color: white;
}

p {
  color: darkblue;
}

HTML의 h3, p 요소에 CSS 스타일이 적용된 것을 확인할 수 있다.

(3). Class 선택자 (Class Selector)

 - HTML 문서에서 주어진 Class 속성 값을 가진 요소를 선택하는 선택자

 - 선택하려는 Class 속성 값 앞에 '.'(마침표)를 붙여서 작성한다.

    마침표 앞에 HTML 요소의 이름을 추가하면, CSS 스타일 적용을 해당 태그에만 적용할 수 있다.

[index.html]
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>선택자 예제</title>
    <link href="/style.css" rel="stylesheet"/>
  </head>

  <body>
    <h3 class="text">제목 1</h3>
    <p class="text">문단 1</p>

    <h3 class="text2">제목 2</h3>
    <p class="text2">문단 2</p>
    <p class="text2">문단 3</p>
  </body>
</html>


[style.css]

/*Class 선택자 예시
 - 특정 class 속성 값을 가진 요소에 CSS 스타일 적용
 - 특정 태그, class 속성값을 가진 요소에 CSS 스타일 적용
*/

.text {
	color: red;
}

p.text2 {
	color: blue;
}

CSS 스타일 적용 범위를 P 태그, "text2"라는 class 속성값을 가진 요소로 한정시켰을 때

h3 요소가 "text2"라는 Class 속성값을 가지고 있어도 CSS 스타일이 적용되지 않는 것을 확인할 수 있다.

(4). ID 선택자 (ID Selector)

 - HTML 문서에서 주어진 id 속성 값을 가진 요소를 선택하는 선택자

   (id == 고유 식별자 역할을 하는 전역속성)

 - HTML에서 id 속성 값은 중복을 허용하지 않기 때문에, CSS 스타일을 한 번만 적용하려고 할 때 사용된다.

 - 선택하려는 id 속성 값 앞에 '#'을 붙여서 작성한다.

[index.html]
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>선택자 예제</title>
    <link href="/style.css" rel="stylesheet"/>
  </head>

  <body>
    <p id="sample">문단입니다.</p>
    <p>문단입니다.</p>
  </body>
</html>


[style.css]

/* id 선택자 예시 */

#sample {
  color: yellow;
  background-color: black;
}

'sample'이라는 id 속성 값을 가진 요소에만 CSS 스타일이 적용된 것을 확인할 수 있다.

③ 그룹 선택자 (Grouping Selector)

 - 앞에서 언급한 태그, Class, ID 선택자 등 다양한 선택자 요소에

    공통된 스타일을 적용하려고 할 때 사용하는 선택자

 - ', (쉼표)'를 통해서 다양한 선택자를 그룹화해서 사용한다.

[index.html]
 
<!-- 그룹 선택자 예시 -->

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet"/>
</head>

<body>
  <div id="title">
    <h3 class="title">CSS 선택자</h3>
    <p class="body">
      그룹 선택자를 통해서 다양한 선택자 요소에<br/>
      공통된 스타일을 적용해보자.
    </p>
  </div>
  <hr/><br/>
  <div>
    <h3 class="title">제목</h3>
    <p class="body">문단1</p>
  </div>
  <h3>제목 2</h3>
  <p>문단 2</p>
</body>
</html>

[style.css]
 
/* 그룹 선택자 예시 */

.title, h3 {
  background-color: cornflowerblue;
  font-size: bold;
  color: white;
}

.body, p {
  font-size: bold;
  color: darkblue;
}

 

2. 마치며

업데이트 내역
2023.03.24 - 선택자 정의,  전체 선택자 작성 완료 (15:20)
2023.03.27 - 선택자 내용 업로드 완료 (14:35)

 

 

저작자표시 동일조건

'Frontend > CSS' 카테고리의 다른 글

[CSS] position 속성  (0) 2023.08.09
[CSS] 박스 모델 (Box Model)  (0) 2023.04.05
[CSS] CSS 개요 (CSS 정의, 기본 문법)  (0) 2023.03.20

관련글

티스토리툴바