CSS 중급

Atomic CSS 방법론

클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성하는 기법

레이아웃 리셋

기본 스타일링 제거하는 CSS 코드

*{ 
 box-sizing: border-box\
}

body{
	margin: 0;
    padding: 0;
}   

flexbox 사용방법

• 방향: flex-direction
  • row(기본값)
  • column
• 얼마나 늘릴 것인가: flex-grow
• 얼마만큼의 크기를 갖는가: flex-basis
• 수평 정렬: justify-content
• 수직 정렬: align-items

flexbox로 레이아웃 구성

박스를 유연하게 늘리거나 줄여서 레이아웃 구성

• 부모 박스에 display:flex 적용해 자식 박스의 방향과 크기 결정
  • 부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치됨
• display: flex는 부모 요소에 적용. 자식 요소에는 flex 속성 값 적용(flex: 0 1 auto: flex 속성의 기본값)
• flex 속성에 적용되는 세 가지 값의 종류 => flex: grow shrink basis
  • grow: 부모 박스의 가로 길이 중 남은 빈 영역만큼 늘어남
  • shrink: flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방
  • basis: 늘어나거나 줄이들기 전 가지는 기본 크기. fiex-grow 값이 0인 경우에만 flex-basis 속성 값 유지

    • width와 flex-basis를 동시에 적용할 경우 flex-basis가 우선

• 콘텐츠가 많아 자식 박스가 넘치는 경우 width가 정확하지 않을 수 있다.
• 콘텐츠가 많아 자식 박스가 넘치는 경우 width 대신 max-width를 쓸 수 있다.

정렬방법

• flex-direction 속성에 의해 메인 축이 결정
  • flex-direction의 기본값인 row상태일 때 메인 축은 가로축
  • 크로스 축은 메인 축과 수직을 이루는 방향
• justify-content(메인 축 기준) align-items(크로스 축 기준)으로 정렬
  • justify-content: 수평 정렬 => flex-start flex-end center space-between
  • align-items: 수직 정렬 => flex-start flex-end center stretch