[css] CSS clear를 사용하여 화면에 보이는 콘텐츠와 숨겨진 콘텐츠를 정렬하는 방법은?

26 Dec 2023

.visible-content {
  float: left;
  width: 50%;
}

.hidden-content {
  clear: left;
}

clear: left; 속성은 띄워진 왼쪽이나 양쪽에 있는 요소들을 그 아래로 내려서 배치하도록 지시합니다. 위 예제에서 hidden-content는 visible-content 옆에 나타나지 않고 그 아래에 배치됩니다.

clear 속성을 사용하여 숨겨진 콘텐츠를 보여지는 콘텐츠 아래에 위치시키는 방법은 이와 같습니다.

추가적인 내용은 다음 링크를 참고하세요: MDN Web Docs - clear