Multi Developer SuHo

CSS 선택자의 종류와 개념 본문

html5+CSS3

CSS 선택자의 종류와 개념

Dreaming Developer Student 2024. 2. 20. 18:48
SMALL

안녕하세요~ 이번에는 CSS 에서 선택자(Selector)에 대해 알아보겠습니다.  선택자(Selector)란? 스타일을 적용하려는 HTML 요소를 선택하는 역할을 의미하고,   선택자(Selector)는 다양한 종류가 있습니다.  몇가지만 간단하게 설명해드리겠습니다. 
글을 작성하기전 모든 내용은 다음과 같은 강의플랫폼을 활용하여 작성하였습니다.
https://www.inflearn.com/course/html-css-%EA%B8%B0%EC%B4%88-%EB%AC%B8%EB%B2%95-%EC%98%AC%EC%9D%B8%EC%9B%90

 

[지금 무료] HTML5 & CSS3 기초 문법 올인원 강의 - 인프런

도서 HTML5 독학백서 & CSS3 독학백서 저자 직강! 이론은 짧게 핵심만! 모던 HTML과 CSS에 입문하기 위해 꼭 알아야 하는 핵심 문법 엑기스만 정리했습니다., 핵심을 컴팩트하게! 빠르게 해치우는 HTML/

www.inflearn.com

 

선택자(Selector) 종류 

1.  전체 선택자  - 전체 선택자는 문서 내의 모든 요소를 선택하는 선택자입니다. 전체 선택자는 별표 (*)로 표시됩니다. 

다음은 전체 선택자를 활용한 소스코드입니다.

전체 선택자는 CSS 초기화(reset)에서 주로 사용됩니다.

CSS 초기화란 -  웹 브라우저마다 다르게 적용되는 기본 스타일을 초기화하여 일관된 스타일을 적용하기 위한 기법을 말합니다.

※  주의 :  전체 선택자는 조심해서 사용해야 합니다. 모든 요소에 동일한 스타일을 적용하므로, 의도치 않은 스타일 변경이 발생할 수 있습니다. 


HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>안녕하세요~</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, excepturi? Non, itaque. Atque explicabo alias saepe dolores sint! Earum a odio dolores eveniet provident ut sequi, impedit sed perferendis repellendus.
    repellendus doloribus rem nostrum commodi aliquam sunt minus quia!
    Quidem numqumn incidunt soluta dolor autem, veritatis officiis 
    consequuntur enim illo magni inventore.
  </p>
</body>
</html>



CSS 코드

* {
     color: rgb(63, 64, 60);
     background-color: rgb(250, 141, 8);
}

 


실행화면



2.  요소 선택자 -  HTML 요소의 이름을 사용하여 해당 요소를 선택합니다.

다음은 <p> 문단 태그가 사용된 요소들을 선택하여 스타일을 지정한 소스코드입니다.



HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>안녕하세요 요소 선택자 실습</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, excepturi? Non, itaque. Atque explicabo alias saepe dolores sint! Earum a odio dolores eveniet provident ut sequi, impedit sed perferendis repellendus.
    repellendus doloribus rem nostrum commodi aliquam sunt minus quia!
    Quidem numqumn incidunt soluta dolor autem, veritatis officiis 
    consequuntur enim illo magni inventore.
  </p>
</body>
</html>



 

CSS 코드

p {
    color:rgba(11, 11, 11, 0.942);
    background-color: rgb(80, 199, 217);
}


실행화면




3. 아이디 선택자 - 아이디를 사용하여 해당 아이디를 가진 요소를 선택합니다. 아이디 이름 앞에는 샾(#)이 붙습니다.

※  주의 :  아이디 선택자는 아이디를 가진 요소만 스타일이 적용됩니다.


HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="title">안녕하세요!</h1>
  <h1>안녕하세요~</h1>
  <h1>안녕하세요~</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, excepturi? Non, itaque. Atque explicabo alias saepe dolores sint! Earum a odio dolores eveniet provident ut sequi, impedit sed perferendis repellendus.
    repellendus doloribus rem nostrum commodi aliquam sunt minus quia!
    Quidem numqumn incidunt soluta dolor autem, veritatis officiis 
    consequuntur enim illo magni inventore.
  </p>
</body>
</html>



CSS 코드

#title {
    color:slategrey;
    background-color: aqua;
}





4. 클래스 선택자 -  클래스 선택자는 특정 클래스 속성이 부여된 HTML 요소에 스타일을 적용할 때 사용합니다. 클래스 선택자는 점(.)으로 시작하며, 그 뒤에 클래스 이름이 옵니다.

다음은 클래스 선택자를 활용한 소스코드 입니다.
HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>안녕하세요 선택자 실습</h1></br>
  <h1 class="yellow">클래스 선택자</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, excepturi? Non, itaque. Atque explicabo alias saepe dolores sint! Earum a odio dolores eveniet provident ut sequi, impedit sed perferendis repellendus.
    repellendus doloribus rem nostrum commodi aliquam sunt minus quia!
    Quidem numqumn incidunt soluta dolor autem, veritatis officiis 
    consequuntur enim illo magni inventore.
  </p>
</body>
</html>


CSS 코드

.yellow {
    color:burlywood;
    background-color: chartreuse;
}

 

이상으로 CSS 선택자에 대해 알아보았습니다. 감사합니다. 피드백부분이나, 댓글 달아주시면 감사하겠습니다~

 

LIST
저작자표시 (새창열림)

'html5+CSS3' 카테고리의 다른 글

CSS 링크(link), 리스트 스타일(list-style)  (0) 2024.02.24
CSS 텍스트와 폰트 스타일  (2) 2024.02.23
HTML에 스타일을 적용하는 방법 인라인(In-line), 익스터널(External), 인터널(Internal)  (0) 2024.02.19
CSS3가 웹 사이트에 미치는 영향, 주요 기능과 사용하는 이유  (0) 2024.02.11
HTML 시맨틱 태그,(Semantic Tag), 의미론적 태그  (1) 2024.02.10
'html5+CSS3' Related Articles more