실제로 캐스캐이딩 스타일 시트(CSS)는 처음 도입된 이후 상당한 발전을 거듭해 왔습니다. 이 언어는 계속해서 진화하고 확장되어 이전에는 달성할 수 없었던 다양한 효과를 구현할 수 있게 되었습니다.
CSS의 괄목할 만한 발전은 기능의 진화 및 향상으로, 웹 콘텐츠의 스타일을 더욱 강력하게 지정할 수 있는 기능이 크게 향상되었습니다.
타자기 효과란 무엇인가요?
타자기 효과는 텍스트를 애니메이션하는 혁신적인 방법으로, 콘텐츠가 점진적으로 드러나면서 마치 빈티지 수동 타자기로 문자를 입력하는 것처럼 보이게 하는 것입니다. 이 시각적 표현은 컴퓨터가 보편화되지 않았고 명령줄 인터페이스가 디지털 영역에서 최고로 군림하던 전성기 시절의 향수를 불러일으킵니다.
텍스트가 서서히 드러나면서 기대감과 수수께끼를 불러일으키고, 관객이 진화하는 내러티브에 집중할 수 있도록 유도합니다.
CSS steps() 함수의 작동 원리
CSS 함수는 정적 스타일링의 한계를 뛰어넘는 향상된 수준의 다용도성을 제공합니다. steps() 함수는 CSS 애니메이션에서 널리 활용되는 요소입니다. 이 기능은 애니메이션에 매끄러운 전환이 아닌 분할되고 불연속적인 모양을 부여합니다.
“steps()” 함수는 애니메이션의 타이밍 메커니즘 역할을 하며, 작동을 위해 두 개의 매개 변수를 사용합니다. 첫 번째 매개변수는 완료에 필요한 총 단계 수를 결정하고 두 번째 매개변수는 각 단계의 개별 동작 특성을 정의합니다. “steps()” 함수의 구조적 표현은 다음과 같습니다:
animation-timing-function: steps(n, direction)
앞서 언급한 코드 블록은 두 개의 인수, 특히 n과 방향을 받아들이는 steps() 함수로 구성됩니다. 방향 변수는 ‘시작’ 또는 ‘끝’을 나타낼 수 있습니다.
애니메이션의 초기 단계가 시작과 동시에 즉시 시작되도록 하려면 애니메이션의 방향을 시작 쪽으로 설정하는 것이 중요합니다. 반대로 애니메이션의 방향을 정점을 향하도록 설정하면 애니메이션이 종료된 후 마지막 단계가 실행되어야 합니다. “steps()” 함수의 유용성은 다음 HTML 코드를 통해 확인할 수 있습니다:
<div class="container">
<div></div>
</div>
확실히!다음은 React 애플리케이션용 자바스크립트에서 CSS 애니메이션을 사용해 부모 컨테이너 안에 있는 자식 엘리먼트에 애니메이션을 적용하는 방법의 예시입니다: “`jsx ‘glamor’에서 { css }를 가져옵니다; const Container = css` display: flex; `; const ChildElement = css` 불투명도: 0; 전환 속성: 모두; transition-duration: 1s; 전환-타이밍-함수: easy-in-out; `; 내보내기 기본 함수 애니메이션() { return (
.container {
background-color: blue;
}
div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
으로 CSS 스타일을 작성합니다. 앞서 언급한 코드는 @keyframes 지시문을 사용하여 “movebox”라는 제목의 애니메이션을 생성합니다. 이후 해당 애니메이션이 자식 요소에 추가되어 디스플레이 표면에서 영구적으로 끊김 없이 연속적으로 이동합니다.
Blender에서 고르지 않거나 끊기는 애니메이션을 만들려면 단계 수를 작은 값으로 설정한 steps() 함수를 사용하여 일련의 개별 키프레임을 부드럽게 전환하지 않고 시뮬레이션할 수 있습니다. 이렇게 하면 스톱 모션 애니메이션 기법을 연상시키는 고르지 않거나 불연속적인 움직임이 생성됩니다.
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
animation-timing-function: steps(10, end);
}
애니메이션 GIF에 제공된 시각적 표현을 보면, 매개변수 할당값 10과 함께 steps() 함수를 사용하면 자식 div가 매끄러운 전환이 아닌 점진적인 애니메이션을 표시한다는 것을 알 수 있습니다. 특히 지정된 매개변수의 수치를 높이면 애니메이션 내에서 더욱 세련되고 유연한 동작이 생성됩니다.
예시에서 방향을 지정할 때 방향 파라미터를 통해 특정 값을 지정합니다. 하지만 방향을 생략할 경우 브라우저는 기본 설정인 “끝”을 방향으로 사용합니다.
타자기 효과 만들기
이제 실제 데모를 만들어서 steps() 함수에 대해 배운 지식을 적용해 보겠습니다. 시작하려면 적절한 제목의 새 디렉터리를 만듭니다. 이 디렉터리 내에 구조적 표현을 위한 index.htm 문서와 시각적 장식을 위한 style.css 파일을 포함합니다.
앞서 언급한 기능을 “index.html” 파일에 통합하려면 후속 콘텐츠의 기초가 되는 서문 또는 템플릿을 포함해야 합니다.이는 “index.html” 파일의 헤드 섹션에 다음 상용구 코드를 추가하면 됩니다: “`php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="text">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Reiciendis, tempore!
</div>
</div>
</body>
</html>
앞서 언급한 코드 조각은 기본 HTML 웹페이지를 구성하는 데 필요한 구조적 요소를 나타냅니다. 포함 요소의 범위 내에는 디지털 인터페이스의 시각적 모양을 시뮬레이션하기 위한 일련의 외부 문자를 포함하는 추가 구분이 있습니다.
텍스트 애니메이션
컨테이너 요소의 크기를 내부 콘텐츠 크기와 관련하여 조정하여 CSS 파일의 스타일 속성을 수정하면 웹 페이지에 표시되는 정보를 효과적으로 보여주는 시각적으로 매력적인 레이아웃을 만들 수 있습니다.
.container{
width: fit-content;
}
“@keyframes” 지시문을 활용하면 애니메이션이 지속되는 동안 애니메이션의 진화를 제어하는 조작을 설정할 수 있습니다. 처음에는 프로세스가 시작될 때 “너비” 속성에 “0%”의 값을 지정합니다. 그 후 진행이 완료되면 “너비” 속성에 “100%” 설정을 할당하여 요소가 완전히 확장 또는 축소되도록 합니다.
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
사용자가 타이핑 애니메이션을 시작할 때까지 콘텐츠를 숨기려면 관련 HTML 요소에 특정 CSS 속성을 적용해야 합니다. 먼저 클래스 속성에 “text” 클래스가 추가된 요소를 식별합니다. 그런 다음 식별된 요소의 “오버플로” 속성을 “숨김”으로 수정합니다. 이렇게 하면 타이핑 애니메이션이 시작되지 않는 한 텍스트가 가려진 상태로 유지됩니다. 그런 다음 동일한 요소의 공백 속성을 “nowrap”으로 조정하여 개행 문자가 나타나지 않도록 합니다. 가독성을 높이려면 텍스트에 단일 간격 글꼴 스타일을 지정합니다. 마지막으로 시각적 효과를 위해 텍스트 오른쪽에 초록색 경계를 삽입합니다.
이 테두리 효과를 구현하면 커서가 있는 것처럼 보이게 됩니다. 이를 위해서는 테두리에 원하는 글꼴 크기를 설정하고 애니메이션 속성을 적용하여 텍스트와 같은 움직임을 만들어야 합니다. 마지막으로, ‘애니메이션 타이밍 함수’ 내에 ‘단계’ 기능을 통합하는 것은 의도한 시각적 결과를 얻는 데 매우 중요합니다.
.text {
overflow: hidden;
white-space: nowrap;
font-family: "Courier New", Courier, monospace;
border-right: solid 10px green;
font-size: 23px;
animation: type-text forwards 4s;
animation-timing-function: steps(40);
}
웹 브라우저 환경에서 코드를 실행하면 다음과 같은 시각적 표시가 나타나야 합니다:
보다 확장된 키보드 시각 효과를 얻으려면 애니메이션의 지속 시간과 `steps()` 함수 내에 설명된 순차적 동작의 특정 수를 모두 수정할 수 있습니다.
커서에 생명 불어넣기
웹 페이지에서 타자기 효과를 에뮬레이트하기 위한 마지막 작업이 진행 중이며, 깜박이는 커서라는 요소만 남았습니다. 커서 역할을 하는 오른쪽으로 움직이는 테두리를 추가하여 커서 구현을 이미 완료했습니다. 모양을 더욱 향상시키기 위해 `@keyframes` CSS 규칙을 활용하여 애니메이션을 적용할 수 있습니다.
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
개인화된 애니메이션을 만든 후에는 텍스트 클래스 내의 ‘애니메이션’ 속성에 애니메이션의 이름을 지정하고 시간 범위를 0.6초로 설정하는 것이 중요합니다.
.text{
/* Other style rules*/
animation: type-text forwards 4s,
cursor-blink .6s infinite;
}
실제로 제공된 코드를 실행하면 활성 텍스트 필드 내에서 간헐적으로 움직이는 애니메이션 커서를 관찰할 수 있습니다.
CSS 함수의 힘
CSS 함수의 활용은 웹 개발의 실행 방식을 크게 변화시켜 개발자에게 광범위한 기능을 제공합니다. 적응력이 뛰어난 이러한 함수는 이전에는 더 복잡한 프로그래밍 언어로 제한되었던 반응형 스타일과 상호 작용을 쉽게 구현할 수 있게 해줍니다.
캐스케이딩 스타일 시트(CSS)의 발전으로 다양한 시각 효과와 동적 기능이 가능해져 웹 디자인의 지평이 크게 넓어졌습니다. 정확한 계산을 위한 계산() 함수, 생생한 배경을 위한 선형 그라데이션(), 매혹적인 애니메이션을 위한 번역() 등의 기능이 도입되면서 개발자는 시각적으로 눈에 띄고 몰입감 있는 사용자 인터랙션을 만들 수 있게 되었습니다.