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 관련 기본기가 부족하다고 생각해 공부하게 되었다.
Ghost