[css] CSS clear를 사용하여 다중 컬럼 레이아웃을 만드는 방법은?

26 Dec 2023

여러 컬럼이 있는 경우, 하나의 요소가 왼쪽이나 오른쪽으로부터 얼마만큼 떨어져야 하는지 정의할 수 있습니다.

아래는 clear 속성을 사용하여 다중 컬럼 레이아웃을 만드는 예시입니다.

.column {
   float: left;
   width: 30%;
   margin: 1%;
   background-color: #f2f2f2;
}

.clear {
   clear: both;
}