이번 장에서 배운 내용은 아래와 같습니다.

• CSS
  • CSS란?
    • Cascading Style Sheets의 약자로써 스타일링을 위한 언어
    • 하나의 스타일이 여러 개의 엘리먼트에 적용될 수 있고, 하나의 엘리먼트에도 여러 개의 스타일이 적용될 수 있음
  • 선택자 (selector)
    • 스타일을 어떤 엘리먼트에 적용할지 선택하게 해주는 것
    • 엘리먼트 선택자
      • HTML 태그의 이름으로 엘리먼트를 선택
    • ID 선택자
      • 엘리먼트의 id속성으로 엘리먼트를 선택
      • 샵(#) 뒤에 아이디를 넣어 사용
    • 클래스 선택자
      • 엘리먼트의 클래스 속성으로 엘리먼트를 선택
      • 점(.) 뒤에 클래스명을 넣어서 사용
    • 전체 선택자
      • 전체 엘리먼트에 적용하기 위한 선택자
      • 한국에서는 흔히 별표라고 부르는 Asterisk(*)를 사용
    • 그룹 선택자
      • 여러 가지 선택자를 그룹으로 묶어 하나의 스타일을 적용하기 위해 사용하는 선택자
      • 각 선택자를 콤마(,)로 구분하여 적용
    • 엘리먼트의 상태와 관련된 선택자
      • 엘리먼트의 다양한 상태에 따라 스타일을 적용하기 위한 선택자
      • :hover, :active, :focus, :checked, :first-child, :last-child
  • CSS 문법과 선택자
    • 선택자와 스타일로 구성됨
    • 선택자를 먼저 쓰고 이후에 적용할 스타일을 중괄호 안에 세미콜론(;)으로 구분하여 하나씩 기술
    • 각 스타일은 CSS 속성과 값으로 이뤄진 키값 쌍이며, CSS 속성의 이름과 값을 콜론(:)으로 구분
  • 레이아웃과 관련된 속성
    • 레이아웃은 화면에 엘리먼트들을 어떻게 배치할 것인지를 의미
    • display: 엘리먼트를 어떻게 표시할지 그 방법에 관한 속성
    • visibility: 엘리먼트를 화면에 보여주거나 감추기 위한 속성
    • position: 엘리먼트를 어떻게 위치시킬 것인지 정의하기 위한 속성
    • width/height: 가로/세로 길이를 정의하기 위한 속성
    • min-width/min-height: 최소 가로/세로 길이를 정의하기 위한 속성
    • max-width/max-height: 최대 가로/세로 길이를 정의하기 위한 속성
  • 플렉스박스
    • 기존 CSS의 레이아웃 사용의 불편한 부분을 개선하기 위해 등장
    • 플렉스 컨테이너와 플렉스 아이템으로 구성되며, 컨테이너는 여러 개의 아이템을 포함
    • 컨테이너의 플렉스와 관련된 CSS 속성은 아이템들을 어떤 방향과 어떤 순서로 배치할 것인지를 정의
    • flex-direction: 아이템들이 어떤 방향으로 배치될 것인지를 지정하기 위한 속성
      • main axis: flex-direction으로 지정된 방향으로 향하는 축
      • cross axis: main axis를 가로지르는 방향으로 향하는 축
    • align-items
      • 컨테이너 내에서 아이템을 어떻게 정렬할 것인지를 결정하기 위한 속성
      • cross axis를 기준으로 함
    • justify-content
      • 컨테이너 내에서 아이템들을 어떻게 나란히 맞출 것인지를 결정하기 위한 속성
      • main axis를 기준으로 함
  • 폰트와 관련된 속성
    • font-family
      • 어떤 글꼴을 사용할 것인지를 결정하는 속성
      • 지정한 글꼴을 찾지 못했을 경우를 대비해서 사용할 글꼴을 순서대로 지정해줘야 함
    • font-size: 글꼴의 크기와 관련된 속성
    • font-weight: 글꼴의 두께와 관련된 속성
    • font-style: 글꼴의 스타일을 지정하기 위한 속성
  • 많이 사용하는 기타 속성
    • background-color: 엘리먼트의 배경색을 지정하기 위한 속성
    • border: 엘리먼트에 테두리를 넣기 위한 속성
• styled-components
  • CSS 문법을 그대로 사용하면서 결과물을 스타일링된 컴포넌트 형태로 만들어주는 오픈소스 라이브러리
  • 컴포넌트 개념을 사용하기 때문에 리액트와 궁합이 잘 맞음
  • 태그드 템플릿 리터럴을 사용하여 구성 요소의 스타일을 지정

웹 애플리케이션을 개발하기 위해서는 CSS는 필수적으로 잘 알고 있어야 하기 때문에 속성을 잊어버릴 때마다 찾아가면서 반복적으로 학습하기 바랍니다.