초보 개발자

flex를 사용하면 나누고 정렬하는 것은 쉽게 되어지는데 격자형태의 grid는 만들기 힘들다. 따라서 이렇게 구획을 나누기 위해서 grid라는 것이 나오게 되었다. grid역시 flex-box처럼 father 요소에서 display : grid를 해주면 된다. 그리고 grid design은 대부분 father에서 해야한다. father에 grid-template-columns: 20px 30px 40px 50px ; 이렇게 자신이 원하는 column의 수와 px까지 정할 수 있다. 나는 3개의 child를 두고 하였기에 마지막 50px 한칸이 빈채로 남아있다. 250px씩 3칸의 column을 만들고 column-gap과 low-gap을 주면 아래와같이 이쁘게 잘 나오게 된다. 이때 column-gap과..

flex-grow, flex-shink도 children에게 줄 수 있는 옵션이다. flex-shrink flex-wrap옵션을 주지 않으면 우리가 children에게 주었던 width값들이 찌그러지면서 wrapper의 width에 맞추려고 한다. 이 때 flex-shrink를 주면 특정 child를 다른 child보다 더 찌그러지게 할 수 있다. flex-shrink의 기본값은 1이다. flex-shrink를 2로주면 다른 child보다 크키가 2배로 줄어들게 된다. 모든 box가 같은 크기로 찌그러지는 걸 원하지 않을 때 이걸 사용하면 된다. flex-grow flex-grow는 flex-shrink와 같지만 반대로 작용한다. flex-grow의 기본값은 0이다. 이건 줄어들 때는 똑같이 줄어든다. ..

wrap 각 box의 width를 200px로 주었지만 display: flex라고 하면 한 줄에 모든 요소들을 다 집어 넣으려고하는 습성이 있다. 만약 브라우저의 사이즈를 줄이게 되면 어떻게 될까? 어떻게든 브라우저의 width에 집어 넣기 위해 우리가 기존에 주었던 200px을 무시할 수 밖에 없다. 아래의 그림을 보면 83.34px로 줄어든 것을 볼 수 있다. 이를 온전히 유지하기 위해선flex-wrap : wrap을 주면 해결이 된다. default는 flex-wrap : nowrap이다. wrapper에 flex-wrap : wrap을 주면 아래와 같이 최대한 item의 너비를 지켜주고 초과되는 부분은 아래로 내려가게 한다. reverse flex-direction : row-reverse를 주..

flexbox 우리가 div를 여러개 만들고 일정한 간격을 두고 배치시키고 싶다면 display : inline-box로 지정 한 후 하나하나 margin-right를 주어 배치시킨다. 이렇게 어거지로 수동으로 맞추어도 화면이 작아지게되면 바로 깨져버린다. 이러한 문제를 해결하기 위해서 flex box라는 기술이 등장하였다. flexbox의 특징 항상 붙어있는 부모가 자식의 위치를 움직일 수 있다. .box들은 바로 위의 부모가 .wrapper이기에 wrapper의 display:flex가 적용이 된다 . 만약 .box들 위에 새로운 div를 하나 더 감싼다면 이제 이 .box들은 flex영향을 벗어난다. flex-direction ( justify-content, align-items ) flexbox..