정리하고 기록하며 성장하는

선택자 1편 본문

프론트/CSS

선택자 1편

개발하는묭이 2021. 12. 21. 22:47

선택자

어떤 html 요소에 스타일을 적용할 것인지에 대한 정보

선택자 {
 속성명: 속성값;
}

 

선택자의 종류

  • 기본 선택자
  • 그룹 선택자

기본 선택자 - 전체 선택자

  • 모든 요소를 선택한다
  • *(애스터리스크)는 html 문서 내의 모든 요소를 의미하는 기호이다
* {
 color: blue;
}

문서 내 모든 요소의 글자 색을 파란 색으로 지정하겠다

 

전체 선택자 실습 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML 문서</title>
    <style>
        * {
            color: red;
        }



    </style>
</head>
<body>
    <h1>제목을 나타낸다</h1>
    <p>문단을 표시한다 가가가</p>
    <p>문단을 표시한다 나나나</p>
    <p>문단을 표시한다 다다다</p>
</body>
</html>

 

기본 선택자 - 태그 선택자

  • 주어진 이름을 가진 요소를 선택한다
  • 유형 선택자 라고도 한다
  • 주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다
p {
  color: blue;
}

 

문서 내 모든 p 태그 요소의 글자 색을 파란 색으로 지정한다

 

태그 선택자 실습 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML 문서</title>
    <style>
      h1 {
          color: red;
      }


    </style>
</head>
<body>
    <h1>제목을 나타낸다</h1>
    <p>문단을 표시한다 가가가</p>
    <p>문단을 표시한다 나나나</p>
    <p>문단을 표시한다 다다다</p>
</body>
</html>

 

기본 선택자 - 클래스 선택자

  • 주어진 class 속성값을 가진 요소를 선택한다
  • 주어진 class 속성값을 가진 요소가 다수일 경우, 해당 요소를 모두 선택한다
  • class 속성은 html 모든 태그에 적용할 수 있는 전역 속성이다
.text {
  color: blue;
}

 

문서 내 class가 text인 모든 요소의 글자 색을 파란 색으로 지정한다

 

클래스 선택자 실습 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML 문서</title>
    <style>
        .text {
            color: green;
        }

    </style>
</head>
<body>
    <h1 class="text">제목을 나타낸다</h1>
    <p>문단을 표시한다 가가가</p>
    <p class="text">문단을 표시한다 나나나</p>
    <p>문단을 표시한다 다다다</p>
</body>
</html>

 

기본 선택자 - 아이디 선택자

  • 주어진 id 속성값을 가진 요소를 선택한다
  • id는 고유한(unique) 식별자 역할을 하는 전역 속성이다
  • 따라서 , id 선택자는 기본적으로 단 하나의 요소를 선택하고 싶을 때 사용한다
#topic {
  color: blue;
}

 

아아디 선택자 실습 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML 문서</title>
    <style>
        .text {
            color: green;
        }
        #gagaga {
            color: orange;
        }

    </style>
</head>
<body>
    <h1 class="text">제목을 나타낸다</h1>
    <p id="gagaga">문단을 표시한다 가가가</p>
    <p class="text">문단을 표시한다 나나나</p>
    <p>문단을 표시한다 다다다</p>
</body>
</html>

 

그룹 선택자

  • 다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용한다
  • 쉼표(,)를 사용하여 선택자를 그룹화 한다
h1 , p , div {
  color: blue;
}

문서 내 모든 h1 , p , div 태그 요소의 글자 색을 파란 색으로 지정한다

 

그룹 선택자 전체 실습 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML 문서</title>
    <style>
        h1 , p {
            color: purple;
        }

    </style>
</head>
<body>
    <h1>제목을 나타낸다</h1>
    <p>문단을 표시한다 가가가</p>
    <p>문단을 표시한다 나나나</p>
    <p>문단을 표시한다 다다다</p>
</body>
</html>

 

선택자가 겹치는 경우

  • 선택자가 겹치는 경우 , 기본적으로 나중에 작성된 스타일이 적용된다

선택자가 겹치는 경우 실습 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML 문서</title>
    <style>
        h1 {
            color: red;
        }

        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>제목을 나타낸다</h1>
    <p>문단을 표시한다 가가가</p>
    <p>문단을 표시한다 나나나</p>
    <p>문단을 표시한다 다다다</p>
</body>
</html>

 

  • 선택자가 다르지만 요소가 겹치는 경우 , 선택자 우선순위에 의해 적용될 스타일이 결정된다

선택자 우선순위

  1. 아이디 선택자
  2. 클래스 선택자
  3. 태그 선택자

선택자 우선순위 실습 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML 문서</title>
    <style>
        .text {
            color: red;
        }

        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1 class="text">제목을 나타낸다</h1>
    <p>문단을 표시한다 가가가</p>
    <p>문단을 표시한다 나나나</p>
    <p>문단을 표시한다 다다다</p>
</body>
</html>

 

클래스 선택자가 태그 선택자 보다 우선순위가 높기 때문에  클래스 선택자에 적용된 스타일 속성이 적용되게 된다

 

내용 정리

  • 선택자는 어떤 요소에 대한 스타일을 정의할 것인지에 대한 정보이다
  • 기본 선택자로는 전체 선택자 , 태그 선택자 , 클래스 선택자 , 아이디 선택자 등이 있다
  • 그룹 선택자는 여러 개의 선택자를 그룹화할 수 있는 선택자 이다
  • 문서 내에 동일한 선택자가 존재하는 경우 ,  뒤에 작성된 된 스타일이 적용된다
  • 서로 다른 선택자가 동일한 요소를 선택한 경우 선택자 우선순위를 고려해야 한다

'프론트 > CSS' 카테고리의 다른 글

박스모델 1편  (0) 2021.12.23
인라인이냐 블록이냐  (1) 2021.12.23
텍스트 관련 속성  (0) 2021.12.22
CSS 기본 문법 및 사용 방법  (0) 2021.12.20
CSS란 무엇인가  (0) 2021.12.20
'프론트/CSS' Related Articles more