이 랩에서는 참가자들이 CSS3 트랜지션의 강력한 세계를 탐험하며, 타이밍 함수와 트랜지션 속성을 사용하여 부드럽고 역동적인 시각 효과를 만드는 방법을 배웁니다. 이 랩은 기본적인 HTML 및 CSS 프로젝트 설정부터 고급 트랜지션 애니메이션 실험까지, CSS 트랜지션을 구현하고 조작하는 방법을 이해하는 데 대한 포괄적이고 실질적인 접근 방식을 제공합니다.
참가자들은 HTML 및 CSS 파일로 프로젝트 구조를 생성하는 것으로 시작하여, 호버 효과 적용, 트랜지션 구문 이해, 다양한 타이밍 함수 탐색을 점진적으로 배우게 됩니다. 실습을 통해 학습자들은 요소 변환 제어, 대화형 사용자 인터페이스 생성, 그리고 CSS3 트랜지션 기술을 사용하여 웹 디자인에 정교한 시각적 상호 작용을 추가하는 기술을 습득하게 됩니다.
이 단계에서는 CSS3 트랜지션을 탐구하기 위해 기본적인 HTML 및 CSS 프로젝트를 설정합니다. 간단한 프로젝트 구조를 만들고 트랜지션 효과를 준비하기 위해 초기 스타일링을 추가합니다.
먼저, 프로젝트 디렉토리로 이동합니다:
cd ~/projectCSS 트랜지션 프로젝트를 위한 새 디렉토리를 생성합니다:
mkdir css-transitions
cd css-transitions이제 WebIDE 를 사용하여 프로젝트 파일을 생성해 보겠습니다. index.html 파일을 생성합니다:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS3 Transitions</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="box">Hover Me</div>
</div>
</body>
</html>다음으로, 몇 가지 기본 스타일링이 포함된 styles.css 파일을 생성합니다:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
.box {
width: 200px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
cursor: pointer;
}파일이 올바르게 생성되었는지 확인해 보겠습니다:
ls예시 출력:
index.html styles.css이 설정은 CSS 트랜지션 프로젝트를 위한 기본적인 기반을 제공합니다. 다양한 트랜지션 효과를 시연하는 데 사용할 div 가 있는 간단한 HTML 구조를 만들었습니다. CSS 는 요소가 시각적으로 매력적이고 페이지 중앙에 위치하도록 초기 스타일링을 제공합니다.
이 단계에서는 요소에 마우스를 올렸을 때 기본 CSS 트랜지션 효과를 만드는 방법을 배웁니다. CSS 트랜지션을 사용하면 지정된 기간 동안 속성 값을 부드럽게 변경할 수 있습니다.
WebIDE 에서 styles.css 파일을 열고 .box 클래스를 수정하여 호버 트랜지션을 추가합니다:
.box {
width: 200px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
cursor: pointer;
/* Add transition property */
transition: background-color 0.5s ease;
}
.box:hover {
background-color: #2980b9;
}트랜지션 속성을 자세히 살펴보겠습니다:
transition: background-color 0.5s ease;
background-color: 트랜지션할 속성0.5s: 트랜지션 지속 시간 (0.5 초)ease: 타이밍 함수 (부드러운 시작과 종료)이제 효과를 더 흥미롭게 만들기 위해 스케일 트랜지션을 추가해 보겠습니다:
.box {
width: 200px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
cursor: pointer;
/* Multiple transition properties */
transition:
background-color 0.5s ease,
transform 0.3s ease;
}
.box:hover {
background-color: #2980b9;
transform: scale(1.1);
}파일을 저장하고 웹 브라우저에서 index.html을 엽니다. 상자에 마우스를 올리면 다음을 볼 수 있습니다:
보게 될 내용의 예:
이 단계에서는 CSS 트랜지션 속성을 더 자세히 살펴보고, 더 복잡하고 정밀한 트랜지션을 만들기 위한 전체 구문에 대해 배웁니다.
styles.css 파일을 업데이트하여 다양한 트랜지션 속성을 탐색합니다:
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 20px;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
display: flex;
justify-content: center;
align-items: center;
color: white;
cursor: pointer;
/* Full transition syntax */
transition-property: background-color, transform, border-radius;
transition-duration: 0.5s, 0.3s, 0.4s;
transition-timing-function: ease-in-out, linear, ease;
transition-delay: 0s, 0.1s, 0s;
}
.box:hover {
background-color: #2980b9;
transform: scale(1.2) rotate(15deg);
border-radius: 50%;
}트랜지션 속성을 자세히 살펴보겠습니다:
transition-property: 트랜지션할 CSS 속성을 지정합니다.
all을 사용할 수 있습니다.transition-duration: 트랜지션이 걸리는 시간을 설정합니다.
transition-timing-function: 트랜지션의 속도 곡선을 제어합니다.
linear: 일정한 속도ease-in: 느리게 시작하여 가속ease-out: 빠르게 시작하여 감속ease-in-out: 느리게 시작하고 종료transition-delay: 트랜지션이 시작되기 전에 지연을 추가합니다.
또는, 단축 속성 transition을 사용할 수 있습니다:
.box {
transition:
background-color 0.5s ease-in-out,
transform 0.3s linear 0.1s,
border-radius 0.4s ease;
}시연을 위해 여러 상자를 포함하도록 index.html을 업데이트합니다:
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>상자에 마우스를 올리면 다음을 볼 수 있습니다:
이 단계에서는 트랜지션의 속도와 가속도를 제어하는 다양한 CSS 타이밍 함수를 탐구합니다. 타이밍 함수는 트랜지션 동안 중간 값을 계산하는 방법을 정의합니다.
index.html을 업데이트하여 다양한 타이밍 함수를 시연하기 위해 여러 상자를 포함합니다:
<body>
<div class="container">
<div class="box linear">Linear</div>
<div class="box ease">Ease</div>
<div class="box ease-in">Ease In</div>
<div class="box ease-out">Ease Out</div>
<div class="box ease-in-out">Ease In-Out</div>
</div>
</body>styles.css를 수정하여 다양한 타이밍 함수를 보여줍니다:
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 20px;
flex-wrap: wrap;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
/* Linear Timing Function */
.linear {
transition: transform 2s linear;
}
.linear:hover {
transform: translateX(200px);
}
/* Ease (default) Timing Function */
.ease {
transition: transform 2s ease;
}
.ease:hover {
transform: translateX(200px);
}
/* Ease-In Timing Function */
.ease-in {
transition: transform 2s ease-in;
}
.ease-in:hover {
transform: translateX(200px);
}
/* Ease-Out Timing Function */
.ease-out {
transition: transform 2s ease-out;
}
.ease-out:hover {
transform: translateX(200px);
}
/* Ease-In-Out Timing Function */
.ease-in-out {
transition: transform 2s ease-in-out;
}
.ease-in-out:hover {
transform: translateX(200px);
}타이밍 함수 특징:
linear: 시작부터 끝까지 일정한 속도ease: 느리게 시작, 빠르게 중간, 느리게 종료 (기본값)ease-in: 느리게 시작하여 끝으로 갈수록 가속ease-out: 빠르게 시작하여 끝으로 갈수록 감속ease-in-out: 느리게 시작하고 종료, 중간은 더 빠름더 정밀한 제어를 위해 사용자 정의 cubic-bezier 함수를 사용할 수도 있습니다:
.custom-timing {
transition: transform 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}각 상자에 마우스를 올리면 타이밍 함수에 따라 다른 움직임 패턴을 관찰할 수 있습니다.
이 단계에서는 여러 속성을 결합하고 고급 CSS 트랜지션 기술을 시연하는 더 복잡한 트랜지션 애니메이션을 만듭니다.
index.html을 업데이트하여 더 상호 작용적인 요소를 포함합니다:
<body>
<div class="container">
<div class="card">
<div class="card-front">Hover Me</div>
<div class="card-back">Advanced Transition!</div>
</div>
</div>
</body>styles.css를 수정하여 고급 트랜지션을 사용하여 뒤집히는 카드를 만듭니다:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.card {
width: 300px;
height: 200px;
position: relative;
perspective: 1000px;
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
transition:
transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
background-color 0.5s ease,
box-shadow 0.5s ease;
}
.card-front {
background-color: #3498db;
color: white;
transform: rotateY(0deg);
}
.card-back {
background-color: #2ecc71;
color: white;
transform: rotateY(180deg);
}
.card:hover .card-front {
transform: rotateY(180deg);
background-color: #2980b9;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.card:hover .card-back {
transform: rotateY(0deg);
background-color: #27ae60;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}주요 고급 트랜지션 기술:
rotateY를 사용한 3D 회전perspectivebackface-visibility애니메이션 시연:
카드를 마우스로 가리키면:
이 랩에서는 참가자들이 대화형 디자인 기술에 초점을 맞춘 포괄적인 웹 프로젝트를 구축하여 동적 CSS3 트랜지션을 만드는 방법을 배웁니다. 랩은 구조화된 HTML 및 CSS 환경을 설정하는 것으로 시작하여 배경색, 테두리 반경 및 flexbox 레이아웃과 같은 기본 속성으로 스타일링된 중앙 div 요소를 사용하여 기본적인 프로젝트를 만듭니다.
학습 과정은 호버 효과 구현, 트랜지션 속성 및 구문 탐구, 부드럽고 매력적인 애니메이션을 만들기 위한 다양한 타이밍 함수 실험을 통해 진행됩니다. CSS 트랜지션 프로젝트를 체계적으로 개발함으로써 참가자들은 요소 속성 조작, 트랜지션 메커니즘 이해, 미묘하고 반응적인 디자인 기술을 통해 사용자 경험을 향상시키는 시각적으로 매력적인 웹 상호 작용을 만드는 실질적인 기술을 습득합니다.
