이 글에서는 CSS(Cascading Style Sheet)에서 작성 규칙과 기본 셀렉터에 대해 정리합니다.

CSS: 작성 규칙과 셀렉터

스타일이 인라인, 내부, 외부 어디에 작성되어 있든지 모두 같은 방식으로 작성해야 합니다.

인라인, 내부, 외부 스타일 방식에 대해 알아보러 가기

CSS: 스타일 규칙

CSS

선택자(selector) {
    속성(property): 값(value);
    속성(property): 값(value);
}

CSS

button {
  padding: 8px 12px;
  border-radius: 4px;
  background-color: #333;
  color: #fff;
}

같은 선택자(button)에 대해 여러 속성을 바꾸고 싶으면, 선언 블록 안의 선언을 여러 개 나열하면 되는데 이 때 세미콜론(;) 을 추가하는 것이 좋습니다.

CSS

h1,
h2,
h3 {
  font-family: system-ui, sans-serif;
  font-weight: 600;
}

여러 요소에 같은 스타일을 적용하고 싶으면, 선택자를 쉼표로 나열해서 한 번에 쓸 수 있습니다.

이제 "어떤 요소에 적용할지"를 고르는 셀렉터(Selector)를 정리해보겠습니다.

태그 선택자(Tag Selector): HTML 태그 이름으로 요소를 선택할 때 사용합니다.
CSS
```
p {
  line-height: 1.6;
}
```
ID 선택자(ID Selector): 특정 하나의 요소를 선택할 때 사용합니다.
CSS
```
#header {
  background-color: #f5f5f5;
}
```
클래스 선택자(Class Selector): 여러 요소에 공통 스타일을 재사용할 때 사용합니다.
CSS
```
.primary {
  color: white;
  background-color: #007bff;
}
```
속성 선택자(Attribute Selector): 요소의 속성(attribute) 값에 따라 대상을 선택할 때 사용합니다.
CSS
```
input[type="text"] {
  border: 1px solid #ccc;
}
```
전체 선택자(Universal Selector): * 하나로 문서 안의 모든 요소를 선택할 때 사용합니다.
CSS
```
* {
  box-sizing: border-box;
}
```

!important로 스타일을 덮으면 이후 수정이 매우 어려워진다. 셀렉터 특이도(specificity)를 이해하고 올바른 셀렉터로 해결하는 것이 맞다.

style="" 속성으로 지정한 스타일은 ID 셀렉터보다도 우선한다. CSS 파일에서 아무리 구체적인 셀렉터를 써도 인라인 스타일을 이기지 못한다.