flex2 [CSS] 웹 프로젝트 7일차! (flexbox froggy) 오늘은 챌린지 쉬는 날~~ 오늘만 푹 쉬기로 했다!!! ...... 였으면 좋겠지만 그래도 간단한 복습이라도 진행하기로 했다!! ㅋㅎㅋㅎㅎㅋ 오늘은 가장 헷갈리는 개념 중 하나인 flex를 쉽고 재밌게 뽀실 수 있는 게임을 해 보기로 했다! 목표는 개구리의 위치를 연잎에 위치하게끔 flex코드를 이용해 문제를 풀어나가면 되는 간단한 게임이다. 총 24stage로 구성되어 있다. ㅋㅎㅋㅎㅎㅋ 그나저나 개구리가 참 귀여운 것 같당 ㅎㅎㅎ flex익히는게 이렇게 귀엽고 재밌을 줄이야~~~ ㅎㅎ 이제 display:flex; justify-content: ; align-items: ; flex-direction: ; 이고 뭐고 다 덤벼~~~~ https://flexboxfroggy.com/#ko Flexbox .. 2021. 7. 12. [CSS] 웹 프로젝트 6일차! (border & padding & flex) 오늘은 2일차 CSS의 box 특징 margin, border, padding 중 border 와 padding에 대해 공부해 보았다. padding) border의 안쪽 공간 = box의 경계 안쪽 padding: 20px; -> padding을 20px 해라 border) margin 과 padding의 경계선 = box의 경계 border: 2px solid black; -> border을 2px의 검은색 실선으로 해라 FLEX ) -> flex는 레이아웃 배치 전용 기능으로 고안되었다. 기존 방식의 inline-block보다 훨씬 편하고 강력하다!! 1 2 3 이런 코드가 있다고 할 때, flex선언은 부모 요소인 body에 하고, body는 flex container라고 한다. 자식 요소인 di.. 2021. 7. 11. 이전 1 다음
