TIL(20210630) - Flexbox, 레이아웃 리셋

🎁 Daily

• CSS 셀렉터 학습
• HTML로 레이아웃 만들기(Flexbox사용)

🤔 Learned

• 자손 선택자와 자식 선택자의 차이
  자손 선택자는 자식, 손자 그리고 이후의 모든 후손을 선택하는 선택자
  자식 선택자는 특정 요소의 직계 자식만 선택하는 선택자(손자, 후손 포함하지 않음)
• 레이아웃 리셋

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

• flexbox
  부모 박스 요소에 display: flex 를 적용해, 자식 박스의 방향과 크기를 결정
  부모 박스에 flex-direction 속성을 적용하여 수직, 수평 분할 방향을 설정할 수 있음. <row(기본값), column>
  자식 박스 요소에 flex: <grow> <shrink> <basis> 를 설정하면 크기를 늘리거나 줄일 수 있음.
  설정하지 않으면 기본 값이 적용됨 flex: 0 1 auto;

🌈 Tomorrow

• javascript 스코프, 클로저 학습
• 남는 시간 분배 잘해서 알차게 쓰기