WEB LAB
    HTML/CSS 4.5 · 4부. 반응형과 움직임

    전환과 변형

    값이 바뀌는 과정을 잇고, 요소를 옮기고 키웁니다.

    예상 학습 시간 16분 예제를 고치면 화면이 그대로 다시 그려집니다 난이도 초급
    개념 설명

    값이 바뀌는 과정을 보이게

    2.3 에서 :hover 로 색을 바꿨습니다. 그때 색은 즉시 바뀝니다. transition 은 그 사이를 이어 부드럽게 변하게 합니다.

    transform 은 요소를 옮기고 키우고 돌립니다. 둘을 함께 쓰면 자바스크립트 없이 화면이 반응합니다.

    최소 예제 · 편집 가능

    transition

    미리보기의 단추에 마우스를 올려 보십시오. 

    <p><button class="btn">부드럽게 바뀝니다</button></p>
<p><button class="btn plain">즉시 바뀝니다</button></p>
    .btn {
  background: #ece7fb;
  border: 1px solid #d9cff7;
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;

  /* 무엇을 · 얼마 동안 · 어떤 흐름으로 */
  transition: background 0.2s ease;
}

.btn:hover { background: #6e56cf; color: #fff; }

/* 이 단추만 전환을 뺍니다 */
.plain { transition: none; }
    자리값
    무엇을속성 이름. all 도 되지만 이름을 적는 편이 낫습니다.
    얼마 동안0.2s·200ms. 0.15~0.3초가 적당합니다.
    어떤 흐름ease(기본)·linear·ease-out

    여럿을 쉼표로 적을 수 있습니다 — transition: background 0.2s, transform 0.2s;

    최소 예제 · 편집 가능

    transform

    <div class="row">
  <div class="box up">떠오름</div>
  <div class="box big">커짐</div>
  <div class="box spin">돌아감</div>
</div>
<p class="note">마우스를 올려 보십시오</p>
    .row { display: flex; gap: 12px; padding: 20px 0; }

.box {
  background: #ece7fb;
  padding: 18px;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

.up:hover   { transform: translateY(-6px); }
.big:hover  { transform: scale(1.1); }
.spin:hover { transform: rotate(5deg); }

.note { color: #686c78; font-size: 13px; }
    함수하는 일
    translateX/Y옮깁니다. 음수면 왼쪽·위로 갑니다.
    scale키우거나 줄입니다. 1 이 원래 크기입니다.
    rotate돌립니다. 단위는 deg 입니다.

    여러 개를 빈칸으로 이어 적습니다 — transform: translateY(-4px) scale(1.05); 차례가 결과에 영향을 줍니다.

    상세 사용법

    transform 을 쓰는 까닭

    자리를 옮기는 데는 margin 이나 top 도 있습니다. 그런데도 transform 을 쓰는 까닭이 있습니다.

    margin·toptransform
    주변 요소밀려납니다.움직이지 않습니다.
    화면 다시 계산배치를 다시 잽니다.다시 재지 않습니다.
    부드러움끊길 수 있습니다.부드럽습니다.

    움직이는 것은 transform 과 opacity 로 하십시오. 이 둘은 배치를 다시 재지 않아 느려지지 않습니다.

    상세 사용법

    초점에도 함께 겁니다

    :hover 만 두면 키보드로 다니는 사람에게는 아무 변화가 없습니다. :focus-visible 을 함께 적으십시오.

    style.css 
    .btn:hover,
.btn:focus-visible {
  background: var(--brand);
  transform: translateY(-2px);
}
    흔한 실수

    세 가지

    • transition 을 :hover 안에 적습니다. 마우스를 올릴 때만 부드럽고 뗄 때는 즉시 돌아옵니다. 평소 규칙에 적으십시오.
    • transition: all 로 둡니다. 뜻하지 않은 속성까지 따라 변해 화면이 굼떠집니다. 바꿀 속성을 이름으로 적으십시오.
    • 움직임을 margin 으로 만듭니다. 주변 요소가 함께 밀립니다. transform 을 사용하십시오.
    실습 문제

    직접 해보기

    1. 떠오르는 카드 난이도 중

    카드에 마우스를 올리면 4px 떠오르고 그림자가 짙어지게 하십시오. 키보드로 초점이 가도 같아야 합니다.

    위로 옮기는 것은 translateY 에 음수입니다. 전환은 평소 규칙에 적습니다.
    .card { box-shadow: 0 1px 3px rgb(0 0 0 / 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover, .card:focus-visible { transform: translateY(-4px); box-shadow: 0 6px 16px rgb(0 0 0 / 0.15); }
    요약

    정리

    • transition 은 평소 규칙에 적습니다. 0.15~0.3초가 적당합니다.
    • transform 은 주변 요소를 밀지 않습니다.
    • 움직임은 transform 과 opacity 로 만듭니다.
    • :hover 에는 :focus-visible 을 함께 적습니다.