[CSS] Selector(선택자) 정리

1. 기본 선택자

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

HTML 내의 모든 요소에 *을 활용하여 동일한 스타일을 적용.

*{/* CSS 코드 */}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>universal.html</title>
  <style>
      *{
          color:blueviolet;
          background-color: aqua;
      }
  </style>
</head>
<body>
  <h1>universal selector - 전체 선택자</h1>
  <p>모든 요소에 동일한 스타일을 적용</p>
  <div>
      <label>모든 요소를 선택함</label>
  </div>
</body>
</html>

1-2. Type Selector(태그 선택자 / 요소 선택자)

HTML의 특정 요소를 지정하여 스타일 적용 가능.

태그명{/* CSS 코드 */}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>type.html</title>
  <style>
      h1{
          color: aqua;
      }
      p{
          color: brown;
      }
  </style>
</head>
<body>
  <h1>type selector - 요소 선택자</h1>
  <p>특정 요소에 스타일을 적용</p>
</body>
</html>

1-3. Class Selector(클래스 선택자)

특정 클래스를 통해 HTML 내의 요소를 지정하여 스타일 적용 가능.

class 이름 앞에 .을 붙여주어야 함!

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>class.html</title>
  <style>
      .choice{
          color: aquamarine;
          font-size: 1em; /* px : 픽셀, % : 배율, em : 해당 요소의 부모 요소 폰트크기에 배율을 넣음(해당 코드의 경우, h1, p의 부모가 body이니 body의 기본 폰트 크기에 배율을 가함)*/
      }
  </style>
</head>
<body>
  <h1 class="choice">class selector - 클래스 선택자</h1>
  <p>특정 클래스가 지정된 요소에 스타일을 적용</p>
  <p class="choice">특정 클래스가 지정된 요소에 스타일을 적용</p>
</body>
</html>

1-4. ID Selector(아이디 선택자)

특정 ID를 통해 HTML 내의 요소를 지정하여 스타일 적용 가능.(ID는 해당 문서 안에서 유일해야 함)

ID 이름 앞에 #을 붙여주어야 함.

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>id.html</title>
  <style>
      #only{
          font-weight: bold;
          color: aqua;
          background: yellow;
          text-decoration:underline;
      }
  </style>
</head>
<body>
  <h1>id selector - 아이디 선택자</h1>
  <p id="only">특정 아이디가 지정된 요소에 스타일을 적용시킬 수 있음</p> 
  <p>이 때 하나의 문서에는 중복된 아이디가 존재해서는 안됨</p>
</body>
</html>

1-5. Attribute Selector(속성 선택자)

요소의 속성 혹은 속성 값을 통해 HTML 내의 요소를 지정하여 스타일 적용 가능.

속성 앞뒤로 대괄호[ ] 를 붙여주어야 함.

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>attribute.html</title>
  <style>
      [title]{
          text-decoration:line-through;
          color: palevioletred;
      }
  </style>
</head>
<body>
  <h1>attribute selector - 속성 선택자</h1>
  <p title="속성 선택자에 대한 상세 설명">요소에 정의된 속성 명이나 속성 값으로 요소를 선택하여 스타일 적용
  </p>
</body>
</html>

+. 문자열 속성 선택자

특정한 문자열과 태그의 속성 값이 일치하는 요소 지정.

[속성~=문자열] /* 속성값에 해당 문자열이 포함되어 있으면 선택 (단어기준) */
[속성|=문자열] /* 속성값이 해당 문자열과 같거나 문자열-(하이픈)으로 시작하면 선택 */
[속성^=문자열] /* 속성값이 해당 문자열로 시작하면 선택 */
[속성$=문자열] /* 속성값이 해당 문자열로 끝나면 선택 */
[속성*=문자열] /* 속성값에 해당 문자열이 포함되면 선택 (전체값 기준) */