유연한 박스 모델(Flexible Box Model) HTML 태그들은 기본적으로 BOX 모델이 적용되며 세로로 적층하게 된다. 이를 가로로 배치하기 위해서 가장 널리 사용되는 방법이 float 속성을 이용해서 요소를 띄워주고 clear 속성으로 마무리하는게 일반적인데 부모 컨테이너의 생각과 달리 자식이 배치를 결정하기 때문에 억지스럽고 코드도 복잡해진다. CSS3에서는 flex라는 새로운 display 설정값이 나와서 가로 배치를 한결 손쉽게 처리할 수 있게 되었다. flex container적용하기 먼저 부모 요소에서 진행하느 설정에 대해 알아보자. flex는 display 속성의 값으로 상위 컨테이너가 자식을 어떻게 배치할 지 설정한다. 사용 가능한 값으로는 flex 또는 inline-flex가 있..

일반적으로 화면을 구성할 때는 를 이용한다. block 타입 요소인 는 기본적으로 한 줄을 차지하며 세로 방향으로 쌓인다. box1 box2 box3 필요에 따라 요소를 가로 방향으로 배치하기 위해서는 float 속성을 사용한다. float을 사용하면 해당 요소를 붕~ 띄우게 되고 float 되지 않은 요소 위로 배치된다. 다음은 box1의 float 속성을 left로 처리한 결과이다. float된 요소인 box1이 떠오르면서 box2 위로 표시된다. box2를 다시 오른쪽으로 float 시키면 box3만 밑으로 들어가게 된다. #box1 { float: left; background: skyblue; width: 20%; } #box2 { float: right; background: lime; wid..