✍🏻 CSS

• Reset css : 브라우저마다 기본값이 있기때문에 초기값을 리셋 시켜놓고 작업을 한다.
• Atomic CSS : 클래스 이름과 구현을 1:1로 일치시켜 CSS를 작성하는 기법
  (아래의 VS구조는 이 방법으로 만들었다)
• VS Code의 구조
  

Flex

display: flex ❗️부모 요소에 적용

• 부모 박스의 자식 요소를 왼쪽부터 차례대로 배치

Flex 요소의 방향 지정(flex-direction)

• row(default) : 가로, 행
• column : 세로, 열

Flex 속성의 하위 속성

• grow(팽창 지수), shrink(수축 지수), basis(기본 크기)
• grow(팽창 지수) : 속성에 적용하는 값은 비율을 의미
• shrink(수축 지수) : width,basis 속성에 따른 비율(grow와 shrink는 함께 사용하지 않는 것이 좋다)
• basis(기본 크기) : grow나 shrink에 영향을 받기 전 크기

justify-content(수평 정렬)

• flex-start : 컨텐츠가 왼쪽에 붙어서 정렬
• flex-end : 컨텐츠가 오른쪽에 붙어서 정렬
• center : 가로 기준으로 가운데 정렬
• space : 컨텐츠 간의 간격
  • space-around : 각 컨텐츠의 간격
  • space-evenly : 컨텐츠와 컨텐츠 간의 간격
  • space-between : 화면의 왼쪽과 오른쪽 공백이 없이 정렬

align-items(수직 정렬)

• flex-start : 컨텐츠가 위에서 아래로 정렬
• flex-end : 컨텐츠가 아래에서 위로 정렬
• center : 세로 기준으로 가운데 정렬