simp7 (박정현)

TL;DR CSS - 1

Thu, 01 Dec 2022 23:50:45 +0900

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