너와 나의 개발 고리

[CSS] CSS 기본 선택자 사용 본문

CSS _HTML_JavaScript/CSS

[CSS] CSS 기본 선택자 사용

Oli-Viaaaa 2023. 7. 21. 15:17

기본 선택자를 간단하게 표로 정리하면 아래와 같다

전체선택자 *{ }
태그선택자 태그{ }
아이디선택자 #id{ }
클래스선택자 .class{ }
기본속성선택자 [속성]{/* CSS 코드 */}
[속성=값]{/* CSS 코드 */}

 

1. 전체 선택자

전체 선택자는 HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법으로 * 기호를 사용해 표시한다 

형식)
	*{/* CSS 코드 */}

 

전체 선택자로 모든 요소의 텍스트를 파란색으로 지정하려면 다음과 같이 작성할 수 있다

<head>
<style>
 *{
    color:blue;
  }
</style>
</head>
<body>
	<h1>전체 선택자</h1>
    <p>전체 선택자는 모든 요소를 한 번에 선택할 수 있습니다.</p>
</body>

위의 코드를 실행하면 아래와 같이 나온다.

 

결과를 보면 단순히 h1, p 태그만 선택되었다고 생각할 수 있는데 전체 선택자는 h1, p, 태그를 비롯해

html, head, title, style, body 태그 등 모든 요소가 선택되어 있다

 

 

2. 태그 선택자

HTML 태그명으로 선택자를 지정하는 방법이다. 태그 선택자는 지정된 태그명과 일치하는 모든 요소를 한 번에 선택한다.

형식)
	태그명{/* CSS 코드 */}

 

예시로 아래의 코드를 확인해 볼 수 있다

<head>
    <meta charset="UTF-8" />
    <style>
      p{
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>태그 선택자</h1>
    <p>태그 선택자는 태그명과 일치하는 태그를 모두 선택한다.</p>
    <p>따라서 모든 p 태그의 텍스트 색상은 파란색이 된다.</p>
  </body>

결과를 보면 p 태그 안의 색상만 변경되는 걸 볼 수 있다.

 

 

3. 아이디 선택자

HTML 태그에서 사용할 수 있는 id 속성값을 이용해 선택자를 지정하는 방법이다.

이때 속성값 앞에는 # 기호를 붙여 구분한다.

형식)
	#id 속성값{/* CSS 코드 */}

 

id 속성값이 title 인 요소에 텍스트 색상을 초록색으로 지정하고 싶다면 아래와 같이 지정할 수 있다

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      #title{
        color: green;
      }
    </style>
  </head>
  <body>
    <h1 id="title">아이디 선택자</h1>
    <p>아이디 선택자는 id 속성값을 이용해 선택자를 지정하는 방법이다.</p>
  </body>
</html>

 

 

4. 클래스 선택자

HTML 태그에서 사용할 수 있는 Class 속성값을 이용해 선택자를 지정하는 방법이다.

이때 속성값 앞에 . 기호를 붙인다

형식)
    .class속성값{/* CSS 코드 */}

 

많이 사용하는 방법으로 class 속성은 id 속성과 다르게 속성값을 중복해서 사용할 수 있어 하나의 클래스 스타일을 잘 정의하면 여러 곳에서 사용할 수 있다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      .red{
        color:red;
      }
      .blue{
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1 class="red">클래스 선택자</h1>
    <p class="blue">Class 속성값으로 선택자를 지정한다.</p>
    <p class="blue">Class 속성은 id 속성과 다르게 속성값을 중복해서 사용할 수 있다.</p>
  </body>
</html>

 

 

5. 기본 속성 선택자

HTML 태그에서 사용할 수 있는 속성과 값을 사용해 선택자를 지정하는 방법이다.

형식)
    [속성]{/* CSS 코드 */}
    [속성=값]{/* CSS 코드 */}

 

예시)

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      a[href]{
        color: red;
        display: block;
      }
    </style>
  </head>
  <body>
    <a href="#">기본 a 태그</a>
    <a href="#" target="_blank">새 창으로 열리는 a 태그</a>
  </body>
</html>

 

위의 코드는 a 태그에 href 속성이 사용된 요소만을 선택해 텍스트 색상을 빨간색으로 지정한다.

또한, 속성과 속성값까지 정확하게 일치하는 요소에 스타일을 적용하고 싶다면 아래와 같이 속성과 값을 함께 명시하면 된다

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      a[target="_blank"]{
          color:red;
          display:block;
      }
  </style>
  </head>
  <body>
    <a href="#dd">기본 a 태그</a>
    <a href="#" target="_blank">새 창으로 열리는 a 태그</a>
  </body>
</html>

 

클래스 선택자나 아이디 선택자도 각각 Class 속성과 id 속성으로 선택자를 지정하므로 넓은 범위에서는 속성 선택자에 포함된다. 

[class="red"]{} /* 기본 속성 선택자 방법으로 class 속성값이 red인 요소 선택 */
[id="title]{} /* 기본 속성 선택자 방법으로 id 속성값이 title인 요소 선택 */

 

속성 선택자는 다른 선택자와 함께 사용할 수 있다.

아이디, 태그, 클래스 선택자와 함께 사용할 수도 있고, 단독으로 사용할 수도 있다.

 

 

꼭 태그 선택자가 아닌 아이디나 클래스 선택자도 가능하다

 

 

아래와 같은 코드는 href 속성만 있으면 종류를 가리지 않고 모두 선택한다

 

 

 

 

6. 문자열 속성 선택자

태그가 가진 속성값이 특정한 문자열과 일치하는 요소를 선택자로 지정하는 방법으로

기본 언이는 기본 속성 선택자와 비슷하지만 선택 방법이 조금 다른데 기본 속성 선택자와 다르게 많이 사용되지는 않는다.

형식 설명
[속성~=문자열] 속성값에 문자열이 포함되어 있으면 선택한다(단어 기준)
[속성:=문자열] 속성값이 문자열과 같거나 문자열-(하이픈)으로 시작하면 선택한다
[속성^=문자열] 속성값이 문자열로 시작하면 선택한다
[속성$=문자열] 속성값이 문자열로 끝나면 선택한다
[속성*=문자열] 속성값이 문자열이 포함되면 선택한다(전체 값 기준)

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

[CSS] CSS 가상 클래스 선택자 사용  (0) 2023.07.24
[CSS] CSS 가상 요소 선택자 사용(::before, ::after)  (0) 2023.07.21
[CSS] CSS 조합 선택자 사용  (0) 2023.07.21
[CSS] CSS 적용하기  (0) 2023.07.20
[CSS] CSS 문법 살펴보기  (0) 2023.07.20
'CSS _HTML_JavaScript/CSS' Related Articles more