TL;DR CSS - 1

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

이 글이 도움이 되었나요?

0 minutes ago
작성된 댓글이 없습니다. 첫 댓글을 달아보세요!
    댓글을 작성하려면 로그인이 필요합니다.