CSS flexbox 와 개구리게임(FLEXBOX FROGGY)

seyong·2021년 11월 7일
0

Flexbox Froggy란 ?

  • CSS코드 게임으로 Flexbox의 속성을 요구한대로 입력하면 다음 단계로 넘어갈 수 있는 게임

  • Flexbox의 속성을 실습하며 익히기 좋다

  • 🐸 FLEXBOX FROGGY 체험하기!

Flex(flex box)의 개념

일반적으로 웹 페이지의 레이아웃은 CSS의 display, float, position 등과 같은 속성을 사용해 구현합니다. 하지만 이 속성을 사용하면 구현 방법이 복잡하고 레이아웃을 표현하는 데 많은 한계가 있습니다.
구현이 어려운 레이아웃을 간단하게 구현할 수 있게 CSS3에 추가된 레이아웃 방식이 flexbox입니다. flexbox를 사용하면 요소의 크기와 순서를 유연하게 배치할 수 있습니다.

  • flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다. flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수 있다. 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다.

flex box의 구성

  • flexbox는 복수의 자식 요소인 flex item과 그 상위 부모 요소인 flex container로 구성된다.

flexbox를 만드는 방법은 간단하다. 정렬하려는 요소의 부모 요소에 다음과 같이 display: flex 속성을 선언하면 된다.

.flex_container {
  display: flex;
}

display: flex 속성이 적용된 요소는 flex container가 되고, flex container의 자식 요소는 flex item이 된다. flex container와 flex item은 부모 요소와 자식 요소를 한 세트로 사용하는 ul과 li를 생각하면 쉽게 이해할 수 있다.

flex item은 주축(main axis)에 따라 정렬된다. 주축의 방향은 flex container의 flex-direction 속성으로 결정한다. flex-direction 속성을 따로 지정하지 않으면 기본값인 row가 적용된다. 속성값 row는 주축의 방향을 왼쪽에서 오른쪽 방향으로 흐르게 한다. flex-direction 속성의 또 다른 속성값인 column은 주축의 방향을 위에서 아래 방향으로 흐르게 한다.

부모 요소와 자식 요소에 정의하는 속성 구분

flexbox에서 사용하는 속성은 부모 요소인 flex container에 정의하는 속성과 자식 요소인 flex item에 정의하는 속성으로 나누어진다. 전체적인 정렬이나 흐름에 관련된 속성은 flex container에 정의하고, 자식 요소의 크기나 순서에 관련된 속성은 flex item에 정의한다. 이를 분리해 적용하는 것이 중요하다.

- flex container 속성

- flex item 속성

flexbox 지원 범위(브라우저 호환성)

IE는 9버전 이하는 지원을 하지 않으며, 10,11에서도 버그가 존재한다.
Firefox는 27버전 이하에서는 버그가 존재한다.
Crome은 20버전 이하에서, Safar 6버전 이하에서 버그가 존재하고있다.

반면,대부분의 모바일 웹에서는 지원을 잘해주고 있다. 서비스가 어떤 브라우저까지 지원하는지에 따라 적절하게 사용하면 될 것 같다!

Can I use 사이트의 'flex' 검색 결과


처음에 css - flex 에 대해서 배울때 정말 많이 헷갈리고 대충 어떤 느낌인지는
감이 오는데 머릿속에서 구체적으로 그려지지가 않았다.
MDN 과 w3school 등등 사이트에서 기본개념을 정독하여도 부족한 느낌 이였다.
그러던 중 FLEXBOX FROGGY 라는 재미있는 게임을 알게되었고
게임을 24단계까지 모두 클리어 하면서 점점 머릿속에서 그려지는 느낌이 확 들었다!
이 게임을 하고나서 다시한번 flex 에 대한 여러 글들을 읽어보니 확실하게 어떤것인지 알수있게 되었다 :D

.Reference
https://flexboxfroggy.com/#ko
https://developer.mozilla.org/ko/docs/Web/CSS/flex
https://velog.io/@sukong/WEB-Flexbox-Froggy-%ED%92%80%EC%9D%B4#-flexbox-froggy%EB%9E%80-
https://d2.naver.com/helloworld/8540176

profile
# 불편함을 편리함으로 바꾸고싶은 주니어 Back-end 개발자

0개의 댓글