시각적으로 매력적인 웹 레이아웃 제작

소개

이 랩에서는 CSS 프로그래밍의 기본 사항을 살펴보고 시각적으로 매력적인 웹 페이지를 만드는 방법을 배웁니다. 일련의 연습과 과제를 통해 CSS 선택자 (selector), 속성 (property), 값 (value) 에 대한 실질적인 경험을 쌓고 HTML 요소를 스타일링하는 데 능숙해질 것입니다. 이 랩이 끝나면 아름답고 반응형 웹 레이아웃을 만들 수 있는 기술과 지식을 갖추게 될 것입니다.

등각 투영 카드 (Isometric Card)

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

등각 투영 카드 (isometric card) 를 만들려면 box-shadow와 함께 transform을 사용하여 rotateX() 및 rotateZ()를 사용하십시오. 또한 사용자가 카드를 마우스로 가리킬 때 카드를 애니메이션하고 들어올리는 효과를 만들기 위해 transition을 추가할 수 있습니다.

다음은 코드 스니펫 (code snippet) 예시입니다.

<div class="isometric-card"></div>

.isometric-card {
  margin: 0 auto;
  transform: rotateX(51deg) rotateZ(43deg);
  transform-style: preserve-3d;
  background-color: #fcfcfc;
  will-change: transform;
  width: 240px;
  height: 320px;
  border-radius: 2rem;
  box-shadow:
    1px 1px 0 1px #f9f9fb,
    -1px 0 28px 0 rgba(34, 33, 81, 0.01),
    28px 28px 28px 0 rgba(34, 33, 81, 0.25);
  transition:
    transform 0.4s ease-in-out,
    box-shadow 0.3s ease-in-out;
}

.isometric-card:hover {
  transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
  box-shadow:
    1px 1px 0 1px #f9f9fb,
    -1px 0 28px 0 rgba(34, 33, 81, 0.01),
    54px 54px 28px -10px rgba(34, 33, 81, 0.15);
}

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

요약

축하합니다! 등각 투영 카드 (Isometric Card) 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.