CodeGym/행동/Frontend SELF KO/떠다니는 요소들

떠다니는 요소들

사용 가능

7.1 float 속성

floatclear 속성을 사용한 떠다니는 요소들은 웹 디자인에서 복잡한 레이아웃을 만드는 초기 방법 중 하나였어. 요즘은 Flexbox나 Grid 같은 현대적인 방법들이 더 많이 쓰이지만, floatclear의 사용법을 아는 건 여전히 중요해.

float 속성

float 속성은 요소를 왼쪽이나 오른쪽으로 "떠다니게" 하고, 텍스트나 다른 요소들이 그것을 감싸도록 해. 컬럼 레이아웃이나 이미지 주변에 텍스트를 배치할 때 특히 유용하지.

문법:

.element {
  float: left; /* 또는 right */
}

float 속성의 값:

  • left: 요소가 왼쪽으로 떠다니고, 뒤따르는 요소들이 오른쪽에서 감싸준다
  • right: 요소가 오른쪽으로 떠다니고, 뒤따르는 요소들이 왼쪽에서 감싸준다
  • none: 기본값, 요소가 떠다니지 않음
  • inherit: 부모 요소로부터 값을 상속

float 사용 예제:

CSS
.float-left {
  float: left;
  width: 200px;
  height: 200px;
  background-color: lightblue;
}

.float-right {
  float: right;
  width: 200px;
  height: 200px;
  background-color: lightgreen;
}

.content {
  background-color: lightgrey;
  padding: 10px;
}
HTML
<div class="float-left">Left Float</div>
<div class="float-right">Right Float</div>
<div class="content">
  <p>This is some content that will wrap around the floated elements. The left floated element will be placed to the left, and the right floated element will be placed to the right.</p>
</div>

7.2 clear 속성

clear 속성은 떠다니는 요소들 주변의 동작을 제어해. 특정 방향에서 떠다니는 요소들이 요소를 감싸지 못하도록 할 수 있어.

문법:

.element {
  clear: left; /* 또는 right */
}

clear 속성의 값:

  • left: 요소는 왼쪽에서 감싸지 않음
  • right: 요소는 오른쪽에서 감싸지 않음
  • both: 요소는 어느 쪽에서도 감싸지 않음
  • none: 기본값, 요소가 양쪽에서 감싸짐

clear 사용 예제:

CSS
.float-left {
  float: left;
  width: 200px;
  height: 200px;
  background-color: lightblue;
}

.float-right {
  float: right;
  width: 200px;
  height: 200px;
  background-color: lightgreen;
}

.clear {
  clear: both;
  background-color: lightcoral;
  padding: 10px;
}

.content {
  background-color: lightgrey;
  padding: 10px;
}
HTML
<div class="float-left">Left Float</div>
<div class="float-right">Right Float</div>
<div class="clear">Cleared Element</div>
<div class="content">
  <p>This content will not wrap around the floated elements because of the cleared element above.</p>
</div>

"clearfix" 기법의 예제:

CSS
.container::after {
  content: "";
  display: table;
  clear: both;
}
HTML
<div class="container">
  <div class="sidebar">Sidebar Content</div>
  <div class="main">Main Content</div>
</div>

7.3 float 사용의 장단점

장점

  1. 쉬운 사용법:
    • float를 사용하여 간단한 레이아웃을 쉽게 만들 수 있어
  2. 폭넓은 브라우저 지원:
    • float는 모든 현대적인 브라우저에서 지원되고, 옛날 버전에서도 지원돼
  3. 레이아웃의 유연성:
    • 이미지를 텍스트로 감싸는 것부터 다중 행 레이아웃까지 다양한 레이아웃을 만들 수 있어

단점

  1. 복잡한 레이아웃 관리의 어려움:
    • float는 복잡한 레이아웃을 만들 때 특히 수직 정렬이 필요할 때 문제를 일으킬 수 있어
  2. 부모 요소의 높이 문제:
    • 모든 자식 요소가 떠다니면 부모 요소가 "축소"될 수 있어. 이를 해결하기 위해 clearfix 같은 기법이 필요해
  3. 구식 방법:
    • Flexbox와 Grid 같은 현대적 방법들이 더 강력하고 유연한 레이아웃 방법을 제공해줘

float와 clear를 사용한 레이아웃 만들기 예제

floatclear를 사용하여 두 개의 컬럼 레이아웃을 만드는 방법이야.

이 예제에서는 사이드바(.sidebar)와 메인 콘텐츠(.main)를 가진 두 개의 컬럼 레이아웃을 만들어. .sidebar.main 요소는 왼쪽으로 떠다니고, clear: both;가 있는 .footer 요소는 감싸는 것을 방지해.

CSS
.container {
  width: 100%;
}

.sidebar {
  float: left;
  width: 25%;
  background-color: lightblue;
  padding: 10px;
}

.main {
  float: left;
  width: 75%;
  background-color: lightgreen;
  padding: 10px;
}

.footer {
  clear: both;
  background-color: lightcoral;
  padding: 10px;
  text-align: center;
}
HTML
<div class="container">
  <div class="sidebar">Sidebar Content</div>
  <div class="main">Main Content</div>
  <div class="footer">Footer Content</div>
</div>

floatclear는 여전히 웹 개발자들의 도구 상자에서 중요한 도구야, 비록 더 현대적인 방법들이 나오긴 했지만. 그것들에 대한 이해는 오래된 프로젝트를 지원하고 업데이트하는 데 도움이 되고, 간단한 레이아웃을 만드는 데에도 여전히 유용해. Flexbox와 Grid 같은 현대적인 방법들이 복잡하고 반응형인 레이아웃을 만드는 데 더 선호되긴 하지만, floatclear에 대한 지식은 여전히 유효해.

1
과제
Frontend SELF KO,  레벨 22레슨 1
잠금
플로팅 요소 생성
플로팅 요소 생성
1
과제
Frontend SELF KO,  레벨 22레슨 1
잠금
속성 clear의 적용
속성 clear의 적용
코멘트
  • 인기
  • 신규
  • 이전
코멘트를 남기려면 로그인 해야 합니다
이 페이지에는 아직 코멘트가 없습니다