CSS선택자에 대해서 배워보았습니다. 이전에 생활코딩 영상으로 CSS에 대해서 배운 적이 있었는데
이번에는 더 다양한 기능들을 배우게 되었습니다.
목차를 봤는데 CSS선택자의 종류가 정말 많이 있네요.

[CSS 선택자]

[주요 선택자]

• Type selector : 선택자로 들어간 이름을 가진 모든 요소 선택.
  보통 css 상단부에 작성. 가장 처음 적용되는 셀렉터. 선택자로 HTML의 요소가 들어감.

  주의) 해당 요소가 들어간 모든 내용에 효과 적용. 특정요소를 선택할 때 사용 금지.
  특정 요소나 그 그룹을 선택하기 위한 게 아니라 하나의 전체 웹페이지에서 일관적으로 적용해야 되는 요소가 있을 때.

• ID selector : (맨 앞글자로 '.'을 붙임.) ID특성에 따른 요소 선택. 오직 한 요소에만 쓰는 이름. 중복X ( 비유) 이름표 ).
• Class selector : (맨 앞글자로 '#'을 붙임) 주어진 class특성을 가진 모든 요소 선택중복 가능. 두 개 이상의 이름 사용 가능(스페이스로 구분)

/* --- 사용 예시 --- */

/* type selector */
h2 {
  color: purple;
}

/* ID selector */
#welcome-title {
  color : green;
}

/* Class selector */
.blue {
  color : blue;
}
.red {
  color : red;
}

[속성 선택자]

• (선택자) [(속성)] : 해당 선택자와 해당 속성을 가진 요소 선택.
• (선택자) [(속성)=(값)] : 해당 속성과 그에 들어간 값이 정확히 일치하는 요소 선택.

  [(속성)=(값)] 의 형태로 사용하는 이유
  : 선택자를 좀 더 세부적으로 선택하기 위해. 같은 속성이라도 값이 다르면 전혀 다른 결과물이 나오는 경우가 있습니다.
  ( ex) type 속성 : text, submit, reset 값 모두 결과물이 다름. )

• (선택자) [(속성)^=(값)] : 해당 값으로 시작하는 요소 선택.
• (선택자) [(속성)$=(값)] : 해당 값으로 끝나는 요소 선택.
• (선택자) [(속성)*=(값)] : 해당 값이 적어도 하나 포함되는 요소 선택.

-- 사용 예시 --

/* -- CSS 파일 -- */

/*
Attribute selector
  (속성 선택자)
*/

/* 1. [attr] */
a[target] {
  color:hotpink;
}

/* 2. [attr=value] */
a[href="https://ex.org"] {
  color: indigo;
}

input[type="submit"] {
  background-color: green;
}

/* 3. [attr^=value] */
a[href="https://ex.c"] {
  color: red;
}

/* 4. [attr$=value] */
a[href$=".com"] {
  color: silver;
}

/* 5. [attr*=value] */
a[href*="ex"] {
  color: sienna;
}

<!-- HTML 파일 -->
  <ul>
    <li>
      <a href="http://ex.com" target="_blink">
        Example Link (com/http)
      </a>
    </li>
    <li>
      <a href="http://ex.org" target="_blink">
        Example Link (org/http)
      </a>
    </li>
    <li>
      <a href="https://ex.com">
        Example Link (com/https)
      </a>
    </li>
    <li>
      <a href="https://ex.org">
        Example Link (org/https)
      </a>
    </li>
  </ul>