2021/11/23

CSS

• 기본 스타일링 제거 css 예시

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

• 부모 박스 요소에 display: flex → 자식 요소들은 가로로 왼쪽부터 배치됨.
• flex-direction → default : row(가로) / column 속성을 사용할 경우 세로
• flex 속성
  • default : flex: 0 1 auto;
  • 의미 : flex: grow shrink basis
  • flex-grow 속성으로 비율을 변경하는 경우 flex-shrink 속성은 기본값인 1로 두어도 무방하다.
• 컨텐츠 정렬 방법
  • axis → main, cross로 구분
  • flex-direction: row인 경우 / main axis → 가로, cross axis → 세로
  • fiex-direction: column인 경우 / main axis → 세로, cross axis → 가로'
  • justify-content → main axis를 기준으로 정렬
  • align-items → cross axis를 기준으로 정렬
• id와 class를 목적에 맞게 사용하기
  • id : 고유한 이름을 붙일 때 / 중복을 허용하지 않음.
  • class : 반복되는 유형을 유형별로 구분할 때