원하는 요소의 선택, Selectors

CSS에서 선택자(Selector)란 스타일을 적용할 HTML 요소를 지정하는 패턴이다.
선택자 { 속성: 값; } 형태로 사용하며, 어떤 요소를 대상으로 할지를 결정하는 것이 선택자의 역할이다.

*는 문서 내 모든 요소를 선택한다. 주로 CSS 초기화(reset)에 사용된다.


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

HTML 태그 이름을 그대로 사용하는 선택자이다.


h1 {
  font-size: 2rem;
}

.클래스명 형태로 사용한다.
하나의 클래스는 여러 요소에 적용할 수 있고, 하나의 요소에 여러 클래스를 지정할 수도 있다.


.box {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#아이디명 형태로 사용한다. 문서 내에서 고유한 요소 하나를 가리킨다.


#header {
  position: fixed;
  top: 0;
  width: 100%;
}

HTML 요소의 속성(attribute)을 기준으로 선택하는 방법이다.


/* href 속성이 존재하는 a 태그 */
a[href] {
  text-decoration: underline;
}
 
/* href가 "https"로 시작하는 a 태그 */
a[href^="https"] {
  color: green;
}

특정 요소의 모든 하위 요소를 선택한다.


/* nav 안에 있는 모든 a 태그 */
nav a {
  color: white;
}

바로 아래 직계 자식 요소만 선택한다.


/* ul의 직계 자식인 li만 선택 */
ul > li {
  list-style: none;
}

같은 부모를 가진 바로 다음 형제 요소 하나를 선택한다.


/* h2 바로 다음에 오는 p 하나만 선택 */
h2 + p {
  font-size: 1.1rem;
  color: #555;
}

같은 부모를 가진 이후의 모든 형제 요소를 선택한다.


/* h2 이후에 오는 모든 p를 선택 */
h2 ~ p {
  margin-left: 1rem;
}

요소의 특정 상태를 선택하는 선택자이다.
: 한 개를 사용한다.


/* 마우스를 올렸을 때 */
button:hover {
  background-color: #006be6;
}

HTML에 실제로 존재하지 않는 가상의 요소를 생성해 스타일을 적용한다.
:: 두 개를 사용한다.


/* 요소 앞에 콘텐츠 삽입 — content 속성 필수 */
.badge::before {
  content: ' ';
}

여러 선택자에 동일한 스타일을 적용할 때 ,로 묶어 작성한다.


h1, h2 {
  font-family: 'Pretendard', sans-serif;
  color: #222;
}