혼자 적어보는 노트

✅ 오늘의 학습 📌 CSS 심화 (1) - float - position - 쌓임맥락 - flex float 요소가 원래의 흐름으로부터 빠져나와서 텍스트와 인라인 요소와 함께 배치할 수 있게 해주는 속성이다. - 자식 요소에 float를 사용하면 부모요소의 높이가 사라져버린다. * float가 끝났음을 알려주기 위해 해제(clear) 시켜주어야 한다. - float 속성을 부여하면 자동으로 block 요소로 변경된다. float 해제 방법 - 부모에 overflow 속성 사용 overflow: hidden; - 마지막 자식 요소에 clear속성 적용 .container .item:nth-child(4){ clear: left; } - 부모요소에 clearfix 적용 * 가장 적합한 방식 .clearfix..

flex box css를 처음 접했을 때 div의 레이아웃 구조를 잡을 때 float를 자주 사용하곤 했다. 사실 float는 이미지 및 box요소를 텍스트와 함께 배치할 때 자연스럽게 어우러 질 수 있도록 만들어진 속성이였지만 box를 정렬할 때 별다른 대안이 없어서 어쩔수 없이 사용하긴 했다. 이후에 flex box가 생기고 나서 좀 더 편하게 레이아웃을 구성할 수 있게 되었다. flexbox는 레이아웃을 유연하게 짤 수 있는 박스 모델이다 반응형 레이아웃을 만들기에도 적합하며 코드를 유지보수하기도 편하다. flex를 이용한 정렬의 중요 키워드는 주축(main axis)와 교차축(cross axis)이다. flexbox의 속성들 [flex contianer 속성] :display: flex;를 한 대..