애니메이션과 전환

소개

애견 애호가들을 위한 가상 안식처인 "Pet's House"의 번잡한 세상에서, 창의적인 웹 디자이너 Taylor 는 웹사이트에 생기를 불어넣는 여정을 시작합니다.

이 랩에서는 CSS 애니메이션과 전환을 사용하여 사용자 경험을 향상시켜 사이트를 유익하고, 매력적이며, 역동적으로 만듭니다. Taylor 는 정적인 요소를 방문객을 사로잡는 대화형 기능으로 변환하여, 펫 케어의 디지털 영역에서 기억에 남는 여정으로 안내하는 것을 목표로 합니다.

Pseudo Element (가상 요소)

Pet 페이지의 탐색 모음에서 탐색 항목 위에 마우스를 올리면 해당 탐색 항목에 밑줄이 나타납니다.

이 효과가 어떻게 구현되는지, 표시 및 숨김에 대해 생각해 봐야 할까요?

CSS 의 ::after 가상 요소는 개발자가 선택한 요소의 내용 뒤에 추가 콘텐츠 또는 장식을 삽입할 수 있도록 하는 강력한 도구입니다. 이 방법은 장식 요소 추가, 명확한 레이아웃 분리 생성, 또는 HTML 구조를 수정하지 않고 콘텐츠 삽입과 같은 다양한 디자인 및 레이아웃 작업에 사용할 수 있습니다. 다음은 CSS ::after 가상 요소를 사용하는 방법에 대한 튜토리얼입니다.

::after는 요소의 내용 끝에 추가 콘텐츠를 삽입할 수 있는 가상 요소입니다. 이 콘텐츠는 기본적으로 인라인 요소입니다.

selector::after {
  /* CSS properties */
}

content 속성을 사용하여 삽입할 콘텐츠를 지정합니다. 이는 텍스트, 이미지 또는 기타 CSS 속성이 될 수 있습니다.

예를 들어, <p> 요소 뒤에 빨간색 하트를 추가합니다.

다음 CSS 를 추가하여 ::after를 사용하여 밑줄 효과를 구현할 수 있습니다.

.navigation li::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: black;
}

현재는 너비가 0 이므로 페이지에서 아무것도 변경되지 않았습니다. 다음으로, :hover를 사용하여 요소 위에 마우스를 올렸을 때 너비를 100% 로 변경하여 밑줄 효과를 얻을 것입니다.

Pseudo Class (가상 클래스)

CSS :hover 가상 클래스 선택자는 마우스 포인터가 위에 있는 요소를 선택하는 데 사용됩니다. 이를 통해 개발자는 색상, 크기 변경 또는 애니메이션 추가와 같은 사용자 상호 작용에 대한 시각적 피드백을 제공하여 사용자 경험을 향상시킬 수 있습니다.

selector:hover {
  /* CSS properties */
}

예를 들어, 마우스 포인터가 <button> 요소 위에 있을 때 색상을 변경하려면 다음 CSS 를 사용할 수 있습니다.

이제 :hover를 사용하는 방법을 알았으므로 style.css에 다음을 추가할 수 있습니다.

.navigation li:hover::after {
  width: 100%;
}

지금까지 마우스가 탐색 항목에 밑줄 효과를 나타내는 것을 달성했지만, 주의 깊은 학생들은 효과의 출현이 더 부드러운 선의 효과, 즉 아래로 미끄러지는 선의 효과임을 알 수 있습니다. 이것이 다른 CSS 속성을 소개하는 이유입니다.

Transition (트랜지션)

CSS 전환을 사용하면 Flash 애니메이션이나 JavaScript 를 사용하지 않고도 한 스타일에서 다른 스타일로 변경할 때 효과를 추가할 수 있습니다. 전환의 지속 시간과 타이밍 함수를 통해 전환이 발생하는 방식을 지정할 수 있습니다.

CSS transition 속성은 네 가지 전환 관련 속성의 축약형입니다.

• transition-property: 전환 효과가 적용될 CSS 속성의 이름을 지정합니다.
• transition-duration: 전환의 지속 시간을 정의합니다.
• transition-timing-function: 전환이 지속 시간 동안 어떻게 진행될지 설명합니다.
• transition-delay: 전환이 시작되기 전의 지연 시간을 지정합니다.

예를 들어, 다음 CSS 코드는 요소의 배경색을 아쿠아에서 rgb(145, 255, 0) 으로 1 초 동안 변경하는 전환 효과를 정의합니다.

이제 transition을 사용하는 방법을 알았으므로 style.css에 다음을 추가할 수 있습니다.

.navigation li::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: black;
  transition: width 0.3s ease;
}

Opacity (투명도)

Display Area 의 이미지 위로 마우스를 가져가면 이미지의 투명도가 증가하고 그 아래에 텍스트가 나타납니다.

CSS opacity 속성은 요소의 불투명도 수준을 설정하는 데 사용됩니다. 이 속성을 사용하면 요소와 해당 자식 요소의 투명도를 제어하여 요소를 완전히 투명하게, 완전히 불투명하게 또는 그 사이의 모든 불투명도 수준으로 만들 수 있습니다. 불투명도 값은 0 (완전 투명) 에서 1 (완전 불투명) 까지입니다. 이 속성은 페이딩 효과를 만들거나, 대화형 요소를 강조하거나, 깊이감을 가진 인터페이스를 디자인하는 데 매우 유용합니다.

selector {
  opacity: value; /* Values range from 0 (completely transparent) to 1 (completely opaque) */
}

이제 opacity를 사용하는 방법을 알았으므로 style.css에 다음을 추가할 수 있습니다.

.service figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  opacity: 0;
}
.service figure:hover img {
  opacity: 0.5;
}
.service figure:hover figcaption {
  opacity: 1;
}

투명도 증가 효과가 달성되었습니다. 다음으로, 상호 작용에 약간의 부드러움을 추가합니다.

Transform (변환)

CSS Transform 속성을 사용하면 요소를 회전, 크기 조정, 기울이기 또는 이동하여 페이지 레이아웃에 영향을 주지 않고 요소의 모양과 위치를 변경할 수 있습니다. 이는 동적 시각 효과와 복잡한 애니메이션을 만드는 강력한 도구입니다.

Transform 속성은 다음 함수를 포함합니다.

• rotate(): 요소를 회전시키며, 매개변수는 회전 각도입니다 (예: 45 도 회전의 경우 rotate(45deg)).
• scale(): 요소를 크기 조정하며, 매개변수는 크기 조정 비율입니다 (예: 크기를 두 배로 늘리려면 scale(2)).
• translate(): 요소를 이동시키며, 매개변수는 X 축과 Y 축을 따라 이동할 거리입니다 (예: 오른쪽으로 50px, 아래로 100px 이동하려면 translate(50px, 100px)).
• skew(): 요소를 기울이며, 매개변수는 X 축과 Y 축을 따라 기울이는 각도입니다 (예: X 축을 따라 30 도, Y 축을 따라 20 도 기울이려면 skew(30deg, 20deg)).

예를 들어, <p> 요소를 x 축에서 오른쪽으로 100 픽셀 이동합니다.

이제 transform을 사용하는 방법을 알았으므로 style.css에 다음을 추가할 수 있습니다.

.service figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
}
.service figure:hover figcaption {
  opacity: 1;
  transform: translateY(0%);
}

Z-Index (z-index)

CSS z-index 속성은 페이지에서 요소의 수직 스택 순서를 제어합니다. 요소가 겹칠 때 z-index 는 어떤 요소가 맨 위에 나타나야 하는지 결정합니다. 이는 위치가 지정된 요소, 즉 position 속성 값이 relative, absolute, fixed 또는 sticky 인 요소에만 적용할 수 있습니다. z-index 의 값은 양수, 음수 또는 0 일 수 있으며, 값이 높을수록 요소가 값이 낮은 요소 위에 배치됩니다.

selector {
  position: relative | absolute | fixed | sticky;
  z-index: number;
}

예를 들어, 두 개의 겹치는 요소가 있다고 가정하면 z-index를 사용하여 어떤 요소가 맨 위에 나타나는지 제어할 수 있습니다.

이제 z-index를 사용하는 방법을 알았으므로 style.css에 다음을 추가할 수 있습니다.

header {
  position: fixed;
  display: flex;
  flex-direction: row;
  background-color: rgb(233, 174, 87);
  width: 100%;
  max-height: max-content;
  min-height: 1em;
  padding-top: 1%;
  padding-bottom: 1%;
  text-transform: uppercase;
  z-index: 1;
}

Keyframe 애니메이션 구현

사이트에 들어갈 때 환영 페이지에 페이드 인 (fade-in) 애니메이션이 있습니다.

CSS 애니메이션은 개발자가 JavaScript 를 사용하지 않고 웹 페이지 요소에 대한 애니메이션 효과를 만들 수 있도록 하는 강력한 도구입니다. CSS 애니메이션을 사용하면 요소가 한 스타일 상태에서 다른 스타일 상태로 전환되는 일련의 애니메이션을 정의할 수 있습니다.

CSS 애니메이션은 주로 두 가지 주요 부분에 의존합니다: @keyframes 규칙과 animation 속성.

• @keyframes 규칙: 애니메이션 시퀀스의 키프레임을 정의합니다. 각 키프레임은 특정 시점의 애니메이션 스타일을 설명합니다.
• animation 속성: 정의된 @keyframes를 선택기에 적용하고 애니메이션의 지속 시간, 지연 시간, 반복 횟수 등을 설정합니다.

예를 들어:

이제 애니메이션을 사용하는 방법을 알았으므로 style.css에 다음을 추가할 수 있습니다.

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
  margin: auto;
  padding: 0 20px;
  animation: fade-in;
  animation-duration: 8s;
}
.box-feature .cover-image {
  animation: fade-in;
  animation-duration: 5s;
}

요약

이 랩에서 Taylor 는 "Pet's House" 웹사이트에 CSS 애니메이션과 전환을 성공적으로 적용하여 생동감 있고 상호 작용적인 사용자 경험을 만들었습니다. 정적 페이지에서 동적 상호 작용으로의 여정은 웹사이트 탐색 및 참여를 향상시키는 데 있어 미묘한 시각적 단서의 강력함을 보여줍니다. 애니메이션과 전환을 통해 Taylor 는 "Pet's House"의 디지털 공간을 모든 방문자에게 더욱 매력적이고 기억에 남도록 만들었습니다.