<aside> 💡

SVG Animation제작 및 HTML MarkUp 및 CSS 스타일링(9.30)

</aside>

visual영역_인터렉티브 모션 : SVG Animation제작

SVG 애니메이션을 제작하는 과정에서 ID 선택자를 활용하여 CSS 스타일링을 적용했습니다

주요 개념

• stroke-dasharray: SVG 선의 전체 길이를 설정하여 대시 스타일의 선을 만드는 데 사용됩니다. 이 속성을 통해 선의 길이를 시각적으로 조절할 수 있다
• stroke-dashoffset: 선의 시작 위치를 설정하여 애니메이션이 진행되는 동안 선이 그려지는 듯한 효과를 연출한다

애니메이션 예제

• animation: ani1 2s linear 2s forwards;: 이 코드는 ani1이라는 애니메이션을 설정하며, 2초 동안 선을 그리는 효과를 부여한다
• @keyframes ani1: 애니메이션의 단계를 정의하여 시작 시 선이 보이지 않다가 점점 나타나는 효과를 생성한다.

주요 깨달음

CSS를 이용한 SVG 애니메이션은 웹 페이지에 시각적 효과를 추가하여 사용자 경험을 향상시키는 데 큰 도움이 된다 다양한 속성을 조합하여 복잡한 애니메이션을 쉽게 구현할 수 있음을 깨달았다

SVG 코드 내 ID를 활용한 CSS 스타일링 기법

.visual.motion #svgAni01 {
  stroke-dasharray: 1699;
  stroke-dashoffset: 1699;
  animation: ani1 2s linear 2s forwards;
}

.visual.motion #svgAni02 {
  stroke-dasharray: 678;
  stroke-dashoffset: 678;
  animation: ani2 .5s linear .1s forwards;
}

@keyframes ani1 {
  0% { stroke-dashoffset: 1699; }
  100% { stroke-dashoffset: 0; }
}

@keyframes ani2 {
  0% { stroke-dashoffset: 678; }
  100% { stroke-dashoffset: 0; }
}

con01영역_레이아웃 : HTML MarkUp과 CSS스타일링

HTML 마크업과 CSS 스타일링을 통해 레이아웃을 구성했습니다

주요 요소

• HTML 구조: <section class="con01">로 시작하여 비디오와 제목을 포함하는 구조를 만들었다
• CSS 스타일링: .con01 클래스는 전체 영역의 크기와 배치 방식(상대적 위치) 등을 설정하였다

스타일링 세부 사항

• width: 100vw; height: 100vh;: 화면 전체를 차지하도록 설정하였다