CSS 마스터: 반응형 웹 디자인 | 인터랙티브 컴포넌트 제작

소개

이 랩에서는 CSS 속성과 선택자를 적용하여 시각적으로 매력적이고 반응형 웹 페이지를 만드는 방법을 배웁니다. Flexbox, grid, transitions, 그리고 animations 을 포함한 최신 CSS 기능에 대한 실질적인 경험을 얻게 될 것입니다. 이 랩을 마치면 CSS 를 사용하여 동적 레이아웃, 대화형 컴포넌트 및 매력적인 사용자 경험을 만들 수 있게 됩니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

카드 이동 (Shifting Card)

index.html과 style.css는 이미 VM 에 제공되어 있습니다.

마우스를 올렸을 때 이동하는 카드를 만들려면 다음 단계를 따르세요:

이동 효과를 허용하기 위해 .container 요소에 적절한 perspective를 설정합니다.
.card 요소의 transform 속성에 대한 transition을 추가합니다.
Document.querySelector()를 사용하여 .card 요소를 선택하고 mousemove 및 mouseout 이벤트에 대한 이벤트 리스너를 추가합니다.
Element.getBoundingClientRect()를 사용하여 .card 요소의 x, y, width, 그리고 height를 가져옵니다.
x 및 y 축에 대해 -1과 1 사이의 값으로 상대적인 거리를 계산하고 transform 속성을 통해 적용합니다.

다음은 카드를 위한 샘플 HTML 및 CSS 코드입니다:

<div class="container">
  <div class="shifting-card">
    <div class="content">
      <h3>Card</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti
        repellat, consequuntur doloribus voluptate esse iure?
      </p>
    </div>
  </div>
</div>

.container {
  display: flex;
  padding: 24px;
  justify-content: center;
  align-items: center;
  background: #f3f1fe;
  perspective: 1000px;
}

.shifting-card {
  width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  margin: 0.5rem;
  transition: transform 0.2s ease-out;
  box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.1);
}

.shifting-card .content {
  text-align: center;
  margin: 2rem;
  line-height: 1.5;
  color: #101010;
}

다음은 호버 효과를 추가하는 JavaScript 코드입니다:

const card = document.querySelector(".shifting-card");
const { x, y, width, height } = card.getBoundingClientRect();
const cx = x + width / 2;
const cy = y + height / 2;

const handleMove = (e) => {
  const { pageX, pageY } = e;
  const dx = (cx - pageX) / (width / 2);
  const dy = (cy - pageY) / (height / 2);
  e.target.style.transform = `rotateX(${10 * dy * -1}deg) rotateY(${
    10 * dx
  }deg)`;
};

const handleOut = (e) => {
  e.target.style.transform = "initial";
};

card.addEventListener("mousemove", handleMove);
card.addEventListener("mouseout", handleOut);

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! Shifting Card 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.

CSS 를 활용한 반응형 웹 디자인

소개

카드 이동 (Shifting Card)

요약