# TL;DR CSS - 1

- Author: @simp7
- Published: 2022-12-01
- Updated: 2022-12-01
- Source: http://blex.me/@simp7/tldr-css-1
- Tags: css, 선택자, 결합자, tldr

---

## CSS 적용 방법, 선택자, 결합자

#### CSS 적용 세가지 방법

- 태그 내 인라인으로 삽입
- html 파일의 style 태그 내에서 선언
- css 파일을 html과 분리해서 연결(권장), 이 때 <link rel={"stylesheet"} href={[CSS 파일 주소]} /> 필요

#### 선택자

- html 요소 선택자: 해당 html의 요소 전체 선택

```
h1 {
    ...
}
```

- class 선택자: class의 속성값으로 해당 선택자를 가진 요소 선택

```
.title {
    ...
}
```

- id 선택자: id의 속성값으로 해당 선택자를 가진 요소 선택

```
#passwordInput {
    ...
}
```

- 속성 선택자: 해당 속성(혹은 속성-속성값 쌍)을 가진 요소 전체 선택

```
[font-family] {
    ...
}
[color="red"] {
    ...
}
```

#### 결합자

여러 선택자간의 조합을 이용한 조건을 만족시킬 경우 조합

- 후손 결합자: 부모 내의 모든 자식 및 후손에 적용 (자식 => 1단계 밑, 후손 => 2단계 이상 밑)

```
a b {
    ...
}
```

- 자식 결합자: 부모 내의 자식에 적용.

```
a > b {
  ...
}
```

- 인접 형제 결합자: 바로 다음 요소일 경우 적용

```
a + b {
  ...
}
```

- 일반 형제 결합자: 이후 요소일 경우 적용

```
a ~ b {
  ...
}
```

#### Commentary

React Native를 먼저 작업하다가 CSS 관련 기본기가 부족하다고 생각해 공부하게 되었다.

#### Reference

- [Maximilian Schwarzmüller, CSS 완벽 가이드, Udemy 2022.8](https://https://www.udemy.com/course/css-flexbox-grid-sass/#instructor-1)
- [DaleSeo, CSS 결합자, 2021.8.14](https://www.daleseo.com/css-combinators/)
- [TCP School, 선택자](http://www.tcpschool.com/css/css_selector_basic)