[TIL]20201218

오늘 배운 것)

• CSS Selector
• 레이아웃 나누기
  • 웹 화면의 콘텐츠는 좌->우, 위->아래로 흐른다. 따라서 화면을 먼저 수직으로 분할하고 분할한 영역 안에서 수평으로 분할한다.
  • 처음에 box-sizing:border-box과 body의 margin, padding을 0으로 세팅하고 시작하자
• Flex Box
  • 정렬을 하고 싶을 때는 display: flex를 사용한다.
  • 정렬하고 싶은 요소를 둘러싼 부모 영역에 display:flex 적용
  • justify-content(horizontal 정렬), align-items(vertical 정렬), flex-direction(자식들 가로/세로로 세우기) 속성
  • flex box 자식들에게는 flex 속성을 부여할 수 있다.
    • flex: 0 1 auto; 가 기본 값이다
    • grow(첫 번째 값)로 자식들간의 비중을 정할 수 있다(1:1:1 등..)
    • shrink(두 번째 값)은 변경 시 크기를 예측하기 어려움으로 그냥 1로 두도록 하자
    • base(마지막 값)로 기본 크기를 정할 수 있다.(화면이 줄어들어도 최소 이정도 크기는 되야한다..)
• 목업 사이트: figma.com/

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}