CSS - 요소 변형하기 (transform)

---

 

CSS 요소 변형하기 (transform)

 

 * scale 

- 요소의 크기를 조절할 수 있다. 
- 기본적으로 자신의 가운데를 중심으로 크기가 변경된다. 
- transform-origin을 통해 기준점을 변경할 수 있다. 
- scale(1.5)는 1.5배만큼 커진다는 의미! 
- x축, y축 별도로 크기를 지정할 수 있다.

.transform-scale{
  transform:scale(1.5 1.0);
  transform-origin: 50px 50px;
}

 

 

 

 * rotate 

- 요소를 회전시킬 수 있다. 
- 180eg 각도, 혹은 transform:rotate(0.5turn)과 같은 형태로 사용할 수 있다. 
- 기본적으로 자신의 가운데를 중심으로 회전된다. 
- transform-origin을 통해 기준점을 변경할 수 있다. 

.transform-rotate {
	transform: rotate(90deg);
}

 

 

 

 * translate 

- 자신의 위치에서 x, y축으로 이동시킬 수 있다. 
- 기준점은 왼쪽 상단이다. 
- 음수값도 지정할 수 있다. 

p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 값을 조절하여 모달창을 만들 수 있다 */

 

 

 

 * skew 

- 요소를 왜곡시키는 속성이다. 
- 각도 단위를 사용한다. 

.transform-skew{
  transform:skew(30deg, 20deg);
}

 

 

 

 

 

🤔  translate vs position 
웹페이지 렌더링과 관련이 있다. 
- 정적인 사이트에서 요소의 위치를 단순 배치하는 것은 position을 사용해도 된다.

- 애니메이션이나 동적으로 요소의 위치를 이동해야 하는 경우 transform 속성을 사용하는 것이 성능에 좋다.

 

 

---

 

웹페이지 렌더링 

- 브라우저가 html을 그리는 과정 

 

1. 파싱 

• html 파일을 DOM으로 변환(파싱)한다.
• 오타 혹은 잘못된 문법을 사용했을 경우에는 예외처리 한다. 
• <link>, <img>와 같은 태그를 만나면 리소스를 다운로드합니다.
• <script> 태그를 만나면 DOM 파싱을 중단하고 자바스크립트를 해석한다. 

2. 스타일 계산 

• CSS도 파싱 하여 CSSOM으로 변환한다.
• CSSOM 정보를 통해 DOM 노드에 대한 스타일을 결정한다. 

 

3. 레이아웃 

•  DOM과 CSSOM 정보를 토대로 레이아웃 트리(렌더 트리)를 생성한다.
• DOM과 계산된 스타일을 따라가며 요소의 크기나 좌표 같은 정보를 담은 레이아웃 트리를 생성한다. 
• 화면에 표현되는 정보만 트리에 담기게 된다. (display:none은 담지 않고, 화면에 보이는 가상요소는 트리에 담긴다.)

 

4. 페인트 

• 레이아웃 트리(렌더트리)가 생성되면 이 트리를 따라 페인트 기록이 생성된다.
• 페인트 기록에는 요소를 렌더링 하는 순서가 저장된다. 
• 지금까지의 정보를 바탕으로 한 페이지를 여러 개의 레이어로 나눈 뒤 그 위에 텍스트, 색, 이미지, 보더, 그림자 등 모든 시각적 부분을 그리는 작업이 진행된다. 

 

5. 컴포지팅 

• 각각의 레이어를 스크린에 픽셀로 표현하고(레스터링) 나누었던 레이어들을 합성하여 페이지를 그린다. 

 

 

---

 

 

🤔 reflow vs repaint

- 브라우저는 html 구조상의 변화 혹은 스타일의 변화가 있을 때 reflow, repaint라는 과정을 거치게 된다.
- 브라우저의 각 단계별 렌더링 과정들은 반드시 전 단계의 데이터가 필요하다.
※ 만약 전 단계에 변화가 일어나면 다음 단계에 모두 영향을 미친다.

 

 

 

 reflow 

- 레이아웃(너비, 높이) 변경 시 영향받는 모든 노드(자식, 부모)의 수치를 다시 계산하여 렌더 트리를 재성성하는 작업이다.

※ 렌더 트리 : 브라우저가 html을 분석하여 트리형태의 구조로 재해석한 것이다.

 

 

 repaint 

- reflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 작업이다.
- 수치와 상관없는 스타일 변경 시에는 reflow 과정을 생략한 repaint 작업만 수행한다.

 

 

 

✏ 만약 css를 통해 레이아웃이 바뀌는 애니메이션을 구현할 경우 브라우저는 매 프레임마다 reflow, repaint 과정을 수행해야 한다. 때문에 reflow, repaint 현상은 브라우저에 상당한 부담이 된다.

이때 브라우저의 부담을 덜기 위해서 GPU(graphic processing unit)를 이용한 그래픽 가속능력을 사용할 수 있는데 이러한 능력을 지원하는 CSS 속성이 바로 transform이다!

 

 

 

---

 

 

 

 

 

 

 

 

 

잘못된 정보에 대한 피드백은 언제든지 환영입니다!