<CSS 기초> 15. Transform & Visibility

 

1. Transform

* 이동

 - 이 속성은 앞서 잠깐 다루었던 속성이다. 말그대로 요소의 형태를 변형시킬 때 사용한다. 그러나 다른요소에 영향을 주지 않는다. translate()로 x, y 값을 입력하여 자기 사이즈 기준으로 이동이 가능하다. 

 

 

  transform : translateX(50%);

 

 : 위와 같이 x에만 적용도 가능하다.

 - 이 때 transform은 기본적으로 기준점을 가운데로 위치시키지만 이를 변경할 수도 있다.

 

 transform-oringin : left top;

  : 위를 작성하면 기준점이 박스의 왼쪽 위 모서리가 될 것이다. 이는 %나 px로도 작성가능하다. left top은 0% 0%와 같은 의미이며 right top은 100% 100%와 같은 의미이다.

 

* 크기

 - scale()을 이용해서 자신 크기를 배율로 조정이 가능하다. 0.5 를 입력하면 절반의 크기가 되며, 2를 입력하면 2배가된다. 물론 scale(x,y) 와같이 각각의 배율도 조정가능하다.

 

* 회전

 - rotate()를 이용하여 각도를 조정할 수 있다. 이 때 반드시 degree를 명시해야하는데 이는 rotate(90deg) 와 같이 입력해야한다.

 

* 비틀기

 - skew() 안에 각도를 넣으면 그 각도 만큼 비트는 것도 가능하다. skewY()에 각도를 넣으면 y축으로 비틀게 된다.

 

 

 - 우리는 앱솔루트를 사용하여 이동하는 것도 배웠지만 transform은 다른요소에 영향을 주지 않는 것 외에도 장점을 가진다. 트랜스폼은 GPU를 이용한 하드웨어 가속을 이용하므로 훨씬 성능이 뛰어나다.

2. Visibility

 visibility 속성으로 요소를 보일지 안보일지를 결정가능하다. 이 때 당연히 visible은 기본값으로써 그냥 그대로 보이는 것이다. 그러나 hidden이라는 값을 주면 숨겨지게된다. 그러나 위치에 그대로 있으므로 다른 요소의 위치에 영향을 주지않는다. 마치 투명해진 것과 같다.

 

※ display : none; 은 아예 box타입을 삭제하는 것이므로 없어지는 것과 같다. 즉 다른 요소가 그 위치에 들어갈 수 있다.

 

3. Overflow

 visibility에 이어서 overflow도 참고로 알아보자. 이는 요소안의 자손요소들이 넘칠 때 어떻게 처리할 것인지에 대한 속성이다. 

 

  overflow : auto;

 

 위와 같이 적용가능하다. 이 때 입력할 수 있는 값은 visible, auto, scroll, hidden 이 있다. visible은 당연히 기본 값인데 넘치는 요소도 그냥 보여주는 것이다. auto는 scroll과 같은데 넘치는 요소를 가리고 스크롤로 표시할 수 있게 하는 것이다. hidden은 넘치는 요소를 그냥 표시하지 않는다.

 

 

 

 

---

 

참고

 

이 글은 구름에듀와 인프런에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.

모든 내용과 코드 및 이미지는 직접 재구성하였습니다.

 

 

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

인터랙티브 웹 개발 제대로 시작하기 - 인프런