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 속성 값 유지
      • widthflex-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
profile
코더가 말고 개발자가 되고싶은...

0개의 댓글