🤓 슬기로운 개발생활 🤓 슬기로운 개발생활

Step 4: Flexbox 자식에게 줄 수 있는 속성들 (item) HTML 문서 작성 1 2 3 CSS 작성 .container { padding-top : 100px; background : beige; height: 100vh; display : flex; } .item { width: 40px; height: 40px; border : 1px solid black; } .item1 { background-color: rgb(247, 114, 114); } .item2 { background-color: rgb(250, 134, 153); } .item3 { background-color: rgb(165, 100, 250); } - order default 값 : 0; 순서 임의로 지정하기 .co..

Step 1: Background flexbox가 있기 전에는 float, position, table을 사용해서 하나하나 배치를 해주었다. 예를 들어 float의 경우는 본문과 사진을 함께 배치할 때 사진의 위치를 left , center, right 으로 조정해주었다. 그리고 본문을 다시 또 나눠서 하나는 오른쪽에 나머지 하나도 float을 사용해 아래에 배치해주었다. .img { float : left } float 의 원래 목적은 텍스트와 이미지를 배치하는 것이었지만, 원래 목적에서 벗어나게 되었고, 코드도 복잡해졌다. flexbox가 등장하게 되면서 float은 원래 목적으로만 사용할 수 있게 되었다. Step 2 : Flexbox Flexbox layout 모듈(Flexbox)은 박스와 아이템..