플로트(Float) 레이아웃

플로트는 주로 페이지 레이아웃을 위해 사용됩니다. float 속성은 요소의 부유 방향을 정의하며, 모든 HTML 요소에 적용 가능합니다. 플로트 요소는 인라인 요소여도 블록 레벨 박스를 생성합니다.

비대체 요소에 플로트를 적용할 때는 명시적 너비를 지정해야 합니다. 공간이 부족하면 요소는 다음 줄로 이동합니다.

플로트의 부작용

부모 컨테이너 높이 축소(콜랩스) 현상이 발생할 수 있습니다:

<div class="container">
  <div class="float-box yellow"></div>
  <div class="float-box blue"></div>
</div>

<style>
.float-box {
  width: 150px;
  height: 150px;
  float: left;
}
.yellow { background-color: #FFD700; }
.blue { background-color: #00FFFF; }
</style>

플로트 문제 해결 방법

1. 추가 빈 요소 사용 (비권장)
2. clear 속성 적용:

   .clear-element { clear: both; }

3. 범용 해결책 (clearfix):

   .clearfix::after {
     content: '';
     display: block;
     clear: both;
   }

포지셔닝(Positioning)

• 정적(static): 기본 위치
• 상대(relative): 원본 위치 기준 이동
• 절대(absolute): 위치 지정된 부모 기준
• 고정(fixed): 뷰포트 기준 고정

포지셔닝 구현 예시

/* 상대 위치 */
.relative-box {
  position: relative;
  left: 40px;
  top: 40px;
}

/* 절대 위치 */
.absolute-box {
  position: absolute;
  right: 30px;
  bottom: 30px;
}

/* 고정 위치 */
.fixed-box {
  position: fixed;
  top: 20px;
  right: 20px;
}

문서 흐름과 레이아웃

다음 속성들은 문서 흐름에서 요소를 제거합니다:

• 플로트(float)
• 절대 위치(absolute)
• 고정 위치(fixed)

상대 위치(relative)는 문서 흐름을 유지합니다.

오버플로우 제어

내용이 컨테이너를 초과할 때 overflow 속성으로 제어:

.overflow-box {
  overflow: hidden; /* 숨김 */
  overflow: auto;   /* 스크롤 자동 생성 */
}

원형 아바타 구현

.avatar {
  width: 180px;
  height: 180px;
  border: 2px solid #aaa;
  border-radius: 50%;
  overflow: hidden;
}
.avatar img {
  width: 100%;
}

z-index와 투명도

z-index는 3D 축 정렬을 제어합니다. 값이 클수록 앞쪽에 배치됩니다.

.modal {
  position: fixed;
  z-index: 100;
}
.overlay {
  position: fixed;
  z-index: 50;
  background: rgba(0,0,0,0.5);
}

opacity 속성은 요소 전체의 투명도를 제어하며, rgba()는 배경색만 투명하게 합니다.