KARIU의 IT 블로그

Flexbox Froggy 소개 CSS에서 유용하게 사용할 수 있는 Flexbox! 이를 게임으로 더욱 재미있게 배울 수 있습니다. Flexbox Froggy라는 게임 사이트인데요. flexbox를 사용하여 개구리들을 옮기는 게임입니다. 물론 무료구요. 한국어로도 이용이 가능하며 설명 또한 자세하게 적혀있어 flexbox를 공부할 때 도움이 많이 되는 사이트입니다. 아래에 링크를 남겨 놨으니 한 번 방문하셔서 즐겨보시길 바랍니다. https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 총 24단계로 구성 되어있습니다. 정답도 같이 남기니 필요하신 분들은 참고해주시면 감사하겠습니다. Flexb..

CSS의 Flexbox를 공부하다보면 align-items, align-self, align-content 등 align에 관련된 속성이 많이 있어서 헷갈리는 경우가 있습니다. 이 글을 다 읽으면 아마 명확하게 이들의 차이점을 알 수 있게 될 겁니다. 먼저, align에 대한 속성은 교차축(기본적으로 세로방향)에 대한 위치를 설정해줍니다. align-items align-items는 교차축에 위치한 모든 요소들의 위치를 정해줍니다. Tips) items 이므로 모든 아이템들을 움직여준다라고 알아두시면 편합니다. align-self align-self는 교차축에 위치한 모든 요소들의 위치를 지정해주는 것이 아닌 특정 요소의 위치만 지정해줄 수 있습니다. Tips) self이므로 혼자, 즉 자기만 움직일 수..

목차 Flexbox란? Flexbox 사용법 Flexbox의 방향축 메인 축 설정 (flex-direction) justify-content의 속성 align-items의 속성 align-self flex의 줄바꿈 설정 (wrap, nowrap, wrap-reverse) 위 아래 줄 사이의 공간 조절(align-content) 특정 요소의 크기만 바꾸고 싶어. (flex-grow, flex-shrink) 1. Flexbox란? 플렉스박스(Flexbox)는 유동적으로 각 요소들을 배치하는 기법입니다. 예를 들어, 각 사용자들마다 화면 크기가 다른 전자기기를 이용하여 웹사이트를 보게 될텐데 각 화면에 맞는 배치를 일일이 계산할 필요 없이 Flexbox를 이용하여 손쉽게 구성할 수 있습니다. 또한 Flexbo..