[Daily] css - transform과 position

위치를 동적으로 변경할 때 css 속성 중 transform과 position 중 어떤 것을 선호 하시나요?

transform - 애니메이션이나 동적인 위치 변경이 필요한 경우

• 선호하는 이유 ?
  • 성능이 중요한 상황 (ex: 모바일 환경)
    → 브라우저의 composite 단계에서 실행
    → reflow나 repaint를 유발하지 않아 성능 상 이점이 있다.
• 애니메이션이나 빈번한 위치 변경이 필요할 때
• 다른 요소의 레이아웃에 영향을 주지 않아야 할 때

position - 레이아웃의 구조를 잡거나, 부모를 기준으로 위치를 조정하는 경우

• 정적인 레이아웃 구성 시
• 요소의 위치 변경이 다른 요소의 레이아웃에 영향을 줘야 할 때
• 복잡한 레이아웃 구조에서 요소를 배치할 때
• reflow와 repaint를 유발한다.
  → top, left 등의 속성을 변경하면 브라우저는 주변 요소들의 위치를 다시 계산하는 과정부터 다시 수행
  → 성능 부하를 높힌다.

transform 과 position의 차이점

1. 렌더링 과정의 차이점

• 렌더링 과정

  • Layout(Reflow) : 요소의 크기와 위치 계산 (position 처리 단계)
  • Paint : 색상, 이미지, 테두리 등을 그림
  • Composite: 여러 레이어를 합성 (transform 처리 단계)

• 예시

  • html

    <div class="container">
      <div class="box translate">Translate</div>
      <div class="box position">Position</div>
    </div>

  • css

    .box {
      width: 100px;
      height: 100px;
      background-color: #3498db;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      cursor: pointer;
    }
    
    .translate {
      transition: transform 0.3s ease;
    }
    
    .translate:hover {
      transform: translateY(30px);
    }
    
    .position {
      position: relative;
      transition: top 0.3s ease;
    }
    
    .position:hover {
      top: 30px;
    }

  • translate 박스

    • composition 레이어에서만 변화가 일어난다. → 다른 요소의 레이아웃에 영향을 주지 않는다.

  • position 박스

    • Layout 단계부터 다시 계산이 시작 된다. → 주변 요소의 레이아웃에 영향을 줄 수 있다.

  출처:

• 매일메일 - 위치를 동적으로 변경할 때 css 속성 중 transform과 position 중 어떤 것을 선호 하시나요?
• css transform