align-items 썸네일형 리스트형 [CSS] flex-direction 속성을 게임으로 배우는 방법 안녕하세요 저번 시간에 이어서 Flexbox Froggy를 진행해보겠습니다. 8단계부터는 flex-derection 속성을 이용한 문제입니다. 그럼 시작해 볼까요? flex-direction은 저도 처음 접하는 스타일 속성인데 이것은 요소들의 정렬 방향을 정해준다 합니다. 8단계를 먼저 살펴볼까요? 연꽃이 오른쪽에 있어서 오른쪽으로 방향을 정해주면 될 것 같네요! 지금 개구리들이 왼쪽으로 정렬되어 있기 때문에 오른쪽으로 정렬 방향을 바꾸어 주면 될 것 같습니다. 이때 사용하는 것이 flex-direction:row-reverse; 개구리들이 쏙 들어가네요 이제 9단계입니다. 9단계는 아래로 정렬해주면 되겠네요. 위에서 아래로 정렬해주는 flex-direction:column; 을 사용해주고 클리어했습니다.. 더보기 [CSS] align-items 속성을 게임으로 배워보자 전 포스팅에 이어서 Flexbox Froggy 게임을 진행해보도록 하겠습니다. jusify-content 속성은 가로선(좌우)을 기준으로 정렬했다면 align-items 속성은 세로선(상하)을 기준으로 정렬해주는 스타일인 것 같습니다. 5단계는 개구리들을 바닥쪽으로 정렬해 주어야겠네요. align-items:flex-end; 를 써줍니다. 연꽃이 가운데에 있네요. 가운데로 슝 align-items:center를 적용하였지만 세로상의 가운데로만 이동하였습니다. 가로상으로도 가운데로 이동하려면 justify-content의 힘이 필요할 것 같네요. justify-content:center를 적어주니 연꽃에 도착합니다. 이젠 들어가야될 코드가 바로 떠오르지 않나요? 게임을 하니까 금방 외워지네요! 아래로 정렬.. 더보기 이전 1 다음
