개발기록

지난번 개구리박스로 플렉스를 공부하다가, 해본 그리드 게임.. 플렉스보다 어려워서 다 못깼다 ㅠ^ㅠ 게임하면서 그리드를 익혀야겠다.. https://codepip.com/games/grid-garden/#ko

개구리박스를 하면서 헷갈렸던 flex를 정리해보았다! ___________________________________ display:flex 아이템들을 균일하게 가로로 정렬해줌 justify-content //flex요소들을 '가로선'상에서 정렬한다. : flex-start // 처음으로 정렬 : flex-end //끝으로 정렬 : center //가운데로 정렬 : space-between //아이템들을 균일하게 끝으로 정렬 : space-around //아이템들을 균일하게 가운데로 정렬 : space-evenly align-items //flex요소들을 '세로선'상으로 정렬한다. : flex-start : flex-end : center : baseline : stretch flex-direction ..

https://flexboxfroggy.com/ Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 플렉스를 공부할 수 있는 게임이다. 공부 안해본 것도 있어서 재미있게 공부할 수있다 추천!

DOM & CSS Critical rendering path css-새로 안것 will-change : opacity /*변경될 것이라고 브라우저에 말해 업데이트 될 때 한 요소만 변경 될 수 있도록 하여 브라우저가 새로운 레이어에 자동으로 추가할 수 있도록 함(너무 많이 쓰면 안됨 브라우저가 쓸데없는 레이어를 만들기 때문)*/ css Triggers layout - 처음부터 render tree를 계산하여 다시 paint ->composite를 계산해야함 paint - 작은 레이어든 큰 레이어든 페인트를 다시 준비해야함/메모리에 부담이 감 -layout을 묶는 행위 ,레이어를 나누어 각각 디자인을 하여 수정이 용이하게 함 composite - 이미 그려져 있는 레이어를 움직이거나 변형만 하면 됨/미리 ..

중간에 padding: 20px 0 이렇게 말고 flex로 가운데 위치시키는 방법 배고프다 밥먹자 [css] .wrapper{ height: 121px;/*세로 값을 줘야함*/ position: relative; display: flex; align-items: center; } .wrapper .letter{ /*left값이나 right값 주면 양 옆으로 이동함*/ position: absolute; top: 50%; transform: translatey(-50%); }