CSS : Flexbox

Container에 적용되는 대표적인 속성

• display
  콘텐츠의 표시 방법을 정하는 태그 flexbox를 이용하기 위해선
  display 태그의 속성을 flex로 변경해야 한다
• flex-direction
  콘텐츠의 정렬 방향을 정하는 태그 기본값은 row이며
  뒤에 row-reverse를 붙이면 반대로 정렬된다.
  기본적으로 main axis는 수평, cross axis는 수직이다

column으로 변경시 위에서 아래로 정렬되며
마찬가지로 column-reverse를 붙이면 반대로 정렬된다

또한, column으로 변경 시 main axis(수직)와 cross axis(수평)가 뒤바뀐다

• flex-warp
  브라우저의 크기에 따라
  콘텐츠를 정렬하는 태그 기본속성은 nowarp

warp으로 변경 시 브라우저가 작아지면 콘텐츠를 아래로 넘긴다
flex-direction과 마찬가지로 reverse를 사용할 수 있다.

• flex-flow
  위 두 태그를 동시에 적용시키는 태그로 border와 비슷하다
  [에시]

  ```css
  .container {
  flex-flow: column warp;
  }
  ```

• justifty-content
  item의 배치를 정하는 속성, 기본 속성은 flex-start
  순서는flex-direction를 기준으로 배치하며
  flex-end를 입력하면 아이템의 순서를 유지하되 끝에서부터 배치한다
  이 태그는 main axis를 기준으로 배치하는 태그이다

이 외에도 center, space-around, space-evenly등의 속성이 있다.

여러 브라우저와 호환성이 좋지 못함 MDN

• align-items
  아이템의 크기에 상관없이 정렬할 수 있는 속성
  가장 유용한 속성은 baseline이 있으며 이것을 사용하면
  콘텐츠의 크기에 상관없이 균등한 위치로 정렬할 수 있다
• align-content
justifty-conten와 동일한 태그의 사용이 가능하다
  이 태그는 cross axis를 기준으로 배치하는 태그이다

여러 브라우저와 호환성이 좋지 못함 MDN

Item에 적용되는 대표적인 속성

• order
  아이템 배치의 순서를 정하는 속성으로
  숫자를 입력해 순서를 정할 수 있다
• flex-grow
  아이템의 크기를 정하는 속성
  정해진 만큼 브라우저를 차지한다
  숫자를 입력해 크기를 정할 수 있다
• flex-shrink
  아이템이 줄어드는 크기비율을 정하는 속성
  브라우저의 크기가 작아질 때
  정해진 비율만큼 더 많이 줄어든다
  숫자를 입력해 비율을 정할 수 있다
• flex-basis
  아이템의 크기비율을 정하는 속성
  브라우저의 크기가 변경 되어도 비율이 유지된다
  기본값은 auto이며 백분율로 입력한다
• flex
  위 3가지 태그를 동시에 적용시키는 태그로
  flex-flow, border와 비슷하다
• align-self
justifty-content, align-content와 같이
  아이템의 배치를 정하는 속성으로
  위 두개와 같은 속성을 사용한다

flexbox 작성 시 주의 사항

1. 자식 요소에는 어떤 것도 적지 말것
   부모 요소에 flexbox를 적용하면 자식 요소는 부모 요소를 따라온다.
   다만 자식 요소의 items를 정렬할때는 flexbox를 적용한다.
2. flex-direction 사용 시 주축 변경 유의
   값을 column으로 변경 시 위에서 셜명한 것과 같이 주축이 변경된다.
   주축이 변경되면 justify-content가 수직, align-items가 수평으로 정렬된다.

FLexbox 사용 연습은 아래 링크

Flexbox Froggy 게임

반응형 웹 개발

Media Queries를 사용해 모바일, 태블릿, 데스크탑에 따라 웹사이트의 콘텐츠를 유동적으로 보여주는 방법

최근엔 데스크탑, 태블릿, 모바일의 기준을 나누는 Break Point가 없지만
굳이 따지자면 아래와 같다

• 데스크탑
  1024px~
• 태블릿
  768px ~ 1024px
• 모바일
  320px ~ 480px

Media Queries의 문법

@media screen and (min-width: 800px) {
	.container {
		width: 50%;
	}
}

screen 이외에도 print, all속성도 사용이 가능하다
and 이외에도 not, only, ,(comma) 속성도 사용이 가능하다

내가 많이 햇갈리는 것이 max-width, min-width인데
max-width는 ~보다 작으면
min-width는 ~보다 크면
으로 알아두고있다.

orientation: landscape;속성을 사용해 디바이스의 가로모드일 때만
적용되는 옵션도 작성할 수 있다.(portrait;는 세로모드)

Media Queries에 대한 자세한 설명은 아래 링크로
MDN 미디어 쿼리 초보자 가이드
MDN 미디어 쿼리 사용하기 (주요기능 확인 가능)