CSS 레이아웃 기술 - 부동, 지우기 및 레거시 레이아웃: 올드 스쿨 쿨

✨
이 기사는 내 웹사이트에서 볼 수 있는 더 큰 시리즈의 일부입니다. CSS 101: 시리즈에 대해 자세히 알아보려면 여기를 클릭하세요. 완전 무료입니다!

과거의 폭발에 오신 것을 환영합니다! Flexbox와 Grid가 현대 웹 디자인의 슈퍼히어로처럼 휩쓸기 전에는 float와 Clear가 CSS 세계를 지배하던 시절이 있었습니다. 웹 디자인 초보자라면 "도대체 플로트(float)와 클리어(clear)가 무엇이며, 내가 왜 신경써야 합니까?"라고 궁금해하실 것입니다. 자, 이제 CSS 역사를 통해 향수를 불러일으키는 여행을 떠나려고 합니다.

스포일러: 오늘 사용할 수 있는 멋진 트릭을 찾을 수 있습니다!

수레: 독창적인 레이아웃 사기꾼

Float가 CSS 세계의 반항적인 십대라고 상상해 보세요. 항상 선을 벗어나 약간의 혼란을 야기합니다. 플로트(Float)는 원래 이미지 주위에 텍스트를 배치하기 위해 설계되었지만 영리한 개발자들은 플로트를 사용하여 레이아웃을 만들 수도 있다는 것을 금방 깨달았습니다.

img {
    float: left;
    margin-right: 15px;
}

위 예에서는 float: left; 이미지를 왼쪽으로 "떠다니게" 하여 텍스트가 이미지 주위를 둘러쌀 수 있도록 합니다. Floats는 Flexbox와 Grid가 등장하기 전에 다중 열 레이아웃을 만드는 데 널리 사용되었습니다. 그러나 주의해서 사용하지 않으면 약간 까다로울 수 있고 레이아웃 문제를 일으키기 쉽습니다.

클리어: 평화유지군

플로트는 약간 반항적이었을지 모르지만 클리어는 평화 유지군이었습니다. 명확한 속성은 혼란이 야기할 수 있는 문제를 해결하기 위해 개입하는 중재자와 같습니다. 부동 소수점을 사용하는 경우 요소가 겹치거나 예상대로 작동하지 않는 경우에는 Clear가 도움이 될 수 있습니다.

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

위 CSS로 Clearfix 클래스를 추가하면 플로팅된 요소가 상위 컨테이너 내에 포함되도록 할 수 있습니다. 이는 요소가 깊은 곳으로 떠내려가는 것처럼 보이는 성가신 레이아웃 결함을 방지하는 멋진 방법입니다.

레거시 레이아웃 기법: 복고풍의 부활

Flexbox와 Grid가 주목을 받기 전에 CSS에는 몇 가지 트릭이 더 있었습니다. 다음은 몇 가지 고전적인 레이아웃 기술을 살펴보겠습니다.

• Inline-Block: 가로 레이아웃을 만드는 간단한 방법입니다. 표시할 요소를 inline-block;으로 설정하면 부동 소수점 없이 나란히 정렬할 수 있습니다.

.box {
    display: inline-block;
    width: 30%;
    margin-right: 2%;
}

• 테이블 레이아웃: 그렇습니다. 테이블은 단지 표 형식의 데이터만을 위한 것이 아닙니다! display: table;, display: table-row; 및 display: table-cell;을 사용할 수 있습니다. 그리드와 같은 레이아웃을 생성합니다.

.container {
    display: table;
    width: 100%;
}

.item {
    display: table-cell;
    width: 33%;
}

이러한 방법은 현대 레이아웃 기술에 의해 대부분 가려졌지만 여전히 웹 디자인의 진화를 엿볼 수 있습니다.

현대적 응용: 오래된 것과 새로운 것의 혼합

그렇다면 플로트와 클리어가 현대 웹 디자인의 세계에서 여전히 자리를 잡을 수 있을까요? 전적으로! Flexbox와 Grid는 이제 레이아웃 생성을 위한 도구이지만, 단순 레이아웃이나 레거시 코드 작업과 같은 특정 시나리오에서는 부동 소수점 및 지우기가 여전히 유용할 수 있습니다.

예를 들어 텍스트 줄바꿈을 위해 또는 소수의 요소를 간단한 방법으로 정렬하려는 경우 부동 소수점을 사용할 수 있습니다. 하지만 복잡하고 반응성이 뛰어난 레이아웃의 경우 Flexbox와 Grid가 가장 좋습니다.

마무리

플로트, 클리어 및 기타 레거시 레이아웃 기술은 과거의 유물처럼 보일 수 있지만 CSS의 풍부한 역사의 일부입니다. 이를 이해하면 견고한 기초가 제공되며 최신 레이아웃 시스템의 힘을 이해하는 데 도움이 됩니다. 또한 이러한 전통적인 방법을 알아두면 오래된 프로젝트나 기발한 디자인 과제(또는 두려운 인터뷰 라운드)를 처리할 때 유용할 수 있습니다.

즐거운 코딩하세요!

✨
쉿! 읽은 내용이 마음에 들었다면 여기를 클릭하여 CSS 101: The Series를 확인하세요. 완전 무료입니다!

위 내용은 CSS 레이아웃 기술 - 부동, 지우기 및 레거시 레이아웃: 올드 스쿨 쿨의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!