CSS 위치 속성: 요소 배치의 모든 것

 

CSS 위치 속성: 요소 배치의 모든 것

CSS의 위치 속성은 웹 페이지에서 요소들의 위치를 정확하게 조절하여 다양한 레이아웃을 구현하는 데 사용됩니다.

1. position 속성

• 기본값: static (문서 흐름대로 배치)
• 종류:
  • relative: 요소의 원래 위치를 기준으로 상대적으로 이동
  • absolute: 부모 요소 또는 전체 문서를 기준으로 절대적인 위치에 배치
  • fixed: 브라우저 창에 고정
  • sticky: 특정 영역에 도달하면 fixed처럼 고정, 그 외에는 static처럼 이동

예제:

CSS

 

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

.absolute-box {
  position: absolute; /* 절대 위치 */
  top: 0;
  right: 0;
}

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

2. z-index 속성

• 용도: 겹쳐진 요소들의 순서를 정함
• 값: 숫자 (값이 클수록 위에 표시)
• 주의: position 속성이 relative, absolute, fixed 중 하나여야 적용됨

예제:

CSS

 

.box1 {
  position: absolute;
  z-index: 2;
}

.box2 {
  position: absolute;
  z-index: 1;
}

3. float 속성

• 용도: 요소를 왼쪽 또는 오른쪽으로 띄워서 배치
• 값: left, right
• 주의: float 속성이 적용된 요소는 문서 흐름에서 벗어나므로, clear 속성을 사용하여 다음 요소의 위치를 조절해야 함

예제:

CSS

 

.image {
  float: left;
}

4. clear 속성

• 용도: float 속성이 적용된 요소의 영향에서 벗어나기 위해 사용
• 값: left, right, both

예제:

CSS

 

.text {
  clear: both;
}

각 속성의 활용 예시

• position: 팝업, 메뉴, 고정 헤더 구현
• z-index: 레이어드 효과, 툴팁 구현
• float: 텍스트 주변에 이미지 배치, 갤러리 레이아웃 구현
• clear: float 요소 아래에 다른 요소 배치

요약

• position: 요소의 기본 위치를 설정
• z-index: 겹쳐진 요소들의 순서를 정함
• float: 요소를 왼쪽 또는 오른쪽으로 띄워서 배치
• clear: float 요소의 영향에서 벗어나기 위해 사용

주의:

• 각 속성은 다른 속성과 함께 사용하여 다양한 레이아웃을 만들 수 있습니다.
• float 속성을 사용할 때는 clear 속성을 함께 사용하여 문서 흐름을 제어해야 합니다.
• z-index 속성은 position 속성이 relative, absolute, fixed 중 하나일 때만 적용됩니다.