css 타이틀 애니메이션

css 타이틀 애니메이션

웹사이트나 블로그에서 시선을 끄는 디자인 요소는 방문자의 첫인상을 좌우한다. 특히 제목(header)은 콘텐츠의 시작점이자 가장 눈에 띄는 부분으로, 시각적 효과를 더하면 전달력과 집중도를 높일 수 있다. 

 

이 글에서는 CSS를 활용해 그라데이션 배경과 애니메이션이 적용된 헤더 디자인을 구현하는 방법을 소개하고, 각 스타일 속성이 어떤 역할을 하는지 구체적으로 분석한다. 

 

 

특히 배경이 자연스럽게 흰색으로 사라지는 효과나, 수직·수평 방향의 움직임 등을 통해 동적인 웹 콘텐츠 연출이 가능하다는 점에 주목했다.

 

 

목차

 

0.소스

 

파란 계열 (가로)

초록 계열 (가로)

주황 계열 (가로)

파란 계열 (세로)

초록 계열 (세로)

주황 계열 (세로)

파란 → 흰색 (페이드)

초록 → 흰색 (페이드)

주황 → 흰색 (페이드)

세로로 움직이는 패턴 헤더

 

1. 기본 헤더 공통 스타일 설정

모든 헤더 태그에는 기본적으로 동일한 스타일이 적용되어 있어 시각적인 통일성을 유지한다.

폰트: 'NEXON Lv1 Gothic OTF'로 설정되어 있으며, 웹폰트로 불러온다.

테두리: 둥근 모서리와 함께 흰색 실선(border: 1px solid #fff)을 적용하여 콘텐츠 영역을 분리한다.

글자색: 일반적으로 color: white;로 설정되어 어두운 배경과 대비를 준다.

내부 여백: padding: 10px 20px;으로 좌우 균형 있게 텍스트 공간을 확보한다.

박스 그림자: box-shadow: inset 0 0 5px rgba(53, 86, 129, 0.5);로 내부에 살짝 음영을 주어 입체감을 만든다.

2. 가로 애니메이션 그라데이션 (.blue-gradient 등)

파란, 초록, 주황 계열 그라데이션은 공통적으로 다음과 같은 애니메이션 설정을 갖는다.

background: linear-gradient(270deg, 색1, 색2, 색3, 색1)으로 왼쪽에서 오른쪽으로 부드럽게 색이 흐른다.

background-size: 400% 100%으로 설정하여 그라데이션을 넓게 확장시킨다.

animation: moveGradientX는 좌우로 왕복하는 애니메이션이다.

키프레임(moveGradientX): 0%에서 왼쪽, 100%에서 오른쪽으로 이동하며 alternate로 왕복 반복한다.

3. 세로 애니메이션 그라데이션 (.blue-gradient-vertical 등)

세로 방향으로 애니메이션 되는 헤더는 to bottom 방향의 그라데이션으로 시각적 다양성을 준다.

background: linear-gradient(to bottom, 색1, 색2, 색3, 색1)

background-size: 100% 400%으로 세로 방향 확장

animation: moveGradientY는 상단에서 하단으로 흐르며 alternate로 왕복 애니된다.

4. 흰색으로 페이드되는 그라데이션 (.blue-fade 등)

사용자 배경이 흰색일 때, 그라데이션에 #ffffff을 포함시키면 배경과 자연스럽게 섞이며 흐려지는 느낌을 준다.

background: linear-gradient(270deg, 색1, 색2, #ffffff, 색1)

효과: 점점 밝아지며 시야에서 사라지는 느낌. 배경이 흰색일수록 효과가 자연스럽다.

활용: 헤더, 강조 문구, 섹션 전환용 배경 등에서 사용 시 부드러운 시각 흐름 제공

5. 패턴 배경 애니메이션 (.pattern-vertical)

도트 패턴을 반복하여 세로 방향으로 부드럽게 스크롤시키는 효과다.

background-image: 도트 패턴 PNG를 사용

background-repeat: 반복 설정

animation: scrollPatternY는 배경 위치를 점진적으로 아래로 이동시킨다.

키프레임: background-position: 0 → 100px으로 스크롤 효과 구현

주의: 텍스트 색은 검정(#000) 등 대비를 확보해야 글자가 보인다.

6. SEO 측면 적용 포인트

1) 태그 구조: <h2> → <h3> → <p> 구조는 검색엔진이 콘텐츠를 논리적으로 이해하는 데 유리하다.

2) class명 분리: 색상이나 애니메이션 타입에 따라 class명을 구체화하면 유지관리 및 검색 키워드 대응에 효과적이다.

3) inline style 회피: SEO 최적화를 위해 스타일은 CSS 파일 혹은 head에 정의하고, HTML 구조는 깔끔하게 유지한다.