css transform + visibility

transform: 요소의 스케일을 적용하거나 이동 시킬 때 사용

• translate(), scale(), rotate()
• transform 자리를 옮겼다고 하더라도, 자기의 원래 위치와 사이즈를 기억하고 있어서 다른 요소에 영향을 미치지 않음
  • translate(x, y): 요소를 원하는 방향으로 위치시킬 때 사용
• scale(n): 자기 사이즈를 줄이고 키울때 사용한다
  • ex) scale(2): 자기 원래 사이즈보다 2배로 커짐. scale(0.5): 자기 사이즈 절반으로 줄어듬
  • scale(x,y): x는 자기의 width만큼, y는 height 만큼 배율이 적용
• rotate(Ndeg): 어떤 요소의 각도를 돌려줄때 사용한다
• 사용 예제:

.box {
  ...
  transform: translate(100px, 100px);
  /* x, y축에 관해서만 이동을 원하는 경우 */
  /* transform: translateX(40px); */
  /* transform: translateY(40px); */
  /* 자기 자신을 기준으로 %를 줄 수도 있음 */
  /* transform: translate(100%, 100%); */
  /* x축은 절반, y축은 3배로 커짐 */
  transform: scale(0.5, 3);
  /* 90도 만큼 회전 */
  transform: rotate(45deg);
}

visibility: 보여줄꺼냐 vs 안보여줄꺼냐

• 사용할 수 있는 값: visibile, hidden
  • visibile: 보여주기
  • hidden: 안 보여주기
• visibility: hidden; vs display: none;
  • visibility: hidden; = 화면상에서만 보여주지 않는 것임. 즉, 없애는 것이 아님
  • display: none; = 해당 블럭 자체를 없앰