본문 바로가기

티스토리 꾸미기 | 홈 프로모션 이미지 및 본문 상단 글 제목에 물결 효과 만들기

by Galam. 2025. 3. 5.

물결 효과 만들기

 
 
 

홈 프로모션 및 본문 상단에 물결 효과 만들기

오늘은 '홈 프로모션 이미지 및 본문 상단 글 제목에 물결 효과 만들기'에 대해 이야기해보려고 합니다. 이 효과는 웹 서핑 중, 홈 화면과 본문 글 제목에 물결 효과를 사용하는 웹사이트를 보고, 여기저기 검색하여 꾸며본 코드입니다.

 

비록 사용 중인 스킨이 다를 수 있지만, 흡사한 효과를 보여줄 수 있습니다.

📌 알림 

웹서핑을 하다 보면 제가 만든 코드, 태그 속성, 그리고 오탈자까지 그대로 가져가 본인 작성한 글인 것처럼 사용하는 경우가 있습니다. 코드를 가져가는 것까지는 막을 수 없지만, 제 자료를 사용해 관련된 포스팅을 할 때는 출처를 꼭 밝혀 주시기 바랍니다.

그 외 개인적인 사용은 자유롭게 하시면 됩니다.

 [📌 코드 수정 시 주의사항은 아래 '더보기'를 참고하세요.]

더보기

1. 스킨 저장.

스킨을 변경하기 전에 가장 먼저 해야 할 일은 현재 사용 중인 스킨을 백업하는 것입니다. 스킨 변경 후 문제가 발생하면 변경 전 스킨으로 돌아가야 하기 때문에 백업이 필요합니다.

스킨을 백업하려면, 블로그 관리자 > 꾸미기 > 스킨 변경을 클릭합니다. 상단에 사용 중인 스킨을 확인할 수 있으며, [보관]을 클릭하면 됩니다.

코드 수정 주의사항

 

2. [Ctrl] + [F]를 사용할 때.

먼저 코드 탭의 빈 곳을 클릭한 후 [Ctrl] + [F]를 사용하여 검색할 코드를 입력해야 합니다.

코드 수정 주의사항
코드 수정 주의사항
728x90

 

홈 프로모션 이미지 물결효과 만들기

 

홈 프로모션 이미지 물결효과 미리보기

 

홈 프로모션 이미지 물결효과 HTML 편집

1) '관리자 홈'에서 [꾸미기] > [스킨 편집] > [html 편집] > [HTML] 탭으로 이동합니다.

물결 효과 만들기

 

2) HTML 탭에서 [Ctrl] + [F]를 이용해 <div class="main-slider">를 검색합니다.

<div class="main-slider">

 

3) <div class="main-slider"> 태그 아래에 [Enter]를 이용해 한 두 칸을 띄어 준 후 아래의 HTML 코드를 복사 하여 넣어줍니다.

<!-- 물결 -->
<svg class="hero-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28 " preserveAspectRatio="none"><defs>
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path></defs>
<g class="wave1"><use xlink:href="#wave-path" x="50" y="3" fill="rgba(32,32,32, .1)"></use></g>
<g class="wave2"><use xlink:href="#wave-path" x="50" y="0" fill="rgba(32,32,32, .2)"></use></g>
<g class="wave3"><use xlink:href="#wave-path" x="50" y="9" fill="#202020"></use></g></svg>
<!-- 물결 END -->

 

4) 코드를 입력 후 [적용]을 클릭하여 '저장'합니다.

물결 효과 만들기

 

홈 프로모션 이미지 물결효과 CSS 추가

1) [HTML] 옆 [CSS] 탭으로 이동합니다.

물결 효과 만들기

 

2) 아래의 코드를 복사한 후 [CSS] 탭의 하단에 한 두 칸을 띄어 준 후 붙여 넣어주세요.

물결 효과 만들기

.hero-waves {
	/*웨이브*/
	display: block;
	width: 100%;
	height: 60px;
	position: absolute;
	right: 0;
	top: 270px; /* 물결 높이 위치 */
	z-index: 10;
}
@media screen and (min-width: 344px) {
  .hero-waves {
    height: 70px; /* 특정 화면 크기 이상에서만 높이를 70px로 재정의 */
  }
}
.wave1 use {
	fill: rgba(253, 253, 255, 0.2);
	-webkit-animation: move-forever1 10s linear infinite;
	animation: move-forever1 10s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.wave2 use {
	fill: rgba(253, 253, 255, 0.5);
	-webkit-animation: move-forever2 8s linear infinite;
	animation: move-forever2 8s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.wave3 use {
	fill: rgb(253, 253, 255, 1);
	-webkit-animation: move-forever3 6s linear infinite;
	animation: move-forever3 6s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.dark .wave1 use {
	fill: rgba(49, 52, 60, 0.3);
	-webkit-animation: move-forever1 10s linear infinite;
	animation: move-forever1 10s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.dark .wave2 use {
	fill: rgba(49, 52, 60, 0.5);
	-webkit-animation: move-forever2 8s linear infinite;
	animation: move-forever2 8s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.dark .wave3 use {
	fill: rgba(49, 52, 60, 1);
	-webkit-animation: move-forever3 6s linear infinite;
	animation: move-forever3 6s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
@media screen and (min-width: 344px) {
  .hero-waves {
    height: 70px; /* 특정 화면 크기 이상에서만 높이를 70px로 재정의 */
  }
}
.wave1 use {
	fill: rgba(253, 253, 255, 0.2);
	-webkit-animation: move-forever1 10s linear infinite;
	animation: move-forever1 10s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.wave2 use {
	fill: rgba(253, 253, 255, 0.5);
	-webkit-animation: move-forever2 8s linear infinite;
	animation: move-forever2 8s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.wave3 use {
	fill: rgb(253, 253, 255, 1);
	-webkit-animation: move-forever3 6s linear infinite;
	animation: move-forever3 6s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.dark .wave1 use {
	fill: rgba(49, 52, 60, 0.3);
	-webkit-animation: move-forever1 10s linear infinite;
	animation: move-forever1 10s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.dark .wave2 use {
	fill: rgba(49, 52, 60, 0.5);
	-webkit-animation: move-forever2 8s linear infinite;
	animation: move-forever2 8s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.dark .wave3 use {
	fill: rgba(49, 52, 60, 1);
	-webkit-animation: move-forever3 6s linear infinite;
	animation: move-forever3 6s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
@-webkit-keyframes move-forever1 {
	0% {
		transform: translate(85px, 0%);
	}
	100% {
		transform: translate(-90px, 0%);
	}
}
@keyframes move-forever1 {
	0% {
		transform: translate(85px, 0%);
	}
	100% {
		transform: translate(-90px, 0%);
	}
}
@-webkit-keyframes move-forever2 {
	0% {
		transform: translate(-90px, 0%);
	}
	100% {
		transform: translate(85px, 0%);
	}
}
@keyframes move-forever2 {
	0% {
		transform: translate(-90px, 0%);
	}
	100% {
		transform: translate(85px, 0%);
	}
}
@-webkit-keyframes move-forever3 {
	0% {
		transform: translate(-90px, 0%);
	}
	100% {
		transform: translate(85px, 0%);
	}
}
@keyframes move-forever3 {
	0% {
		transform: translate(-90px, 0%);
	}
	100% {
		transform: translate(85px, 0%);
	}
}
/* 물결 END */

 

3) 미리보기로 물결의 위치를 확인 후 [적용]을 눌러 '저장'합니다.

물결의 위치(높이)는 .hero-waves {의 top: 270px;에서 수정하면 됩니다.

물결 효과 만들기

 

본문 상단 글 제목 물결효과 만들기. 

'본문 상단 글 제목 물결효과'는 '홈 프로모션 이미지 물결효과'와 동일한 코드를 사용하며, HTML 코드를 넣어주는 위치만 다릅니다. 그러므로 두 곳 모두에 물결 효과를 적용할 수 없습니다.

다만, 두 곳 모두에 적용하거나 여러 위치에 적용하려면 코드들의 [class] 값을 변경하면 적용이 가능합니다.

 

본문 상단 글 제목 물결효과 미리보기

 

본문 상단 글 제목 물결효과 HTML 편집

1) '관리자 홈'에서 [꾸미기] > [스킨 편집] > [html 편집] > [HTML] 탭으로 이동합니다.

물결 효과 만들기

 

2) HTML 탭에서 [Ctrl] + [F]를 이용해 <s_permalink_article_rep>를 검색합니다.

<s_permalink_article_rep>

 

3) 두번째 <s_permalink_article_rep> 코드 아래 <div class="inner">를 찾아줍니다.

물결 효과 만들기

 

4) <div class="inner"> 코드 윗쪽에  [Enter]를 이용해 한 두 칸을 띄어 준 후 아래 HTML 코드를 복사하여 넣어줍니다.

<!-- 물결 -->
<svg class="hero-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28 " preserveAspectRatio="none"><defs>
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path></defs>
<g class="wave1"><use xlink:href="#wave-path" x="50" y="3" fill="rgba(32,32,32, .1)"></use></g>
<g class="wave2"><use xlink:href="#wave-path" x="50" y="0" fill="rgba(32,32,32, .2)"></use></g>
<g class="wave3"><use xlink:href="#wave-path" x="50" y="9" fill="#202020"></use></g></svg>
<!-- 물결 END -->

 

5) 코드를 입력 후 [적용]을 클릭하여 '저장'합니다.

물결 효과 만들기

 

본문 상단 글 제목 물결효과 CSS 추가

1) [HTML] 옆 [CSS] 탭으로 이동합니다.

물결 효과 만들기

 

2) 아래의 코드를 복사한 후 [CSS] 탭의 하단에 한 두 칸을 띄어 준 후 붙여 넣어주세요.

물결 효과 만들기

.hero-waves {
	/*웨이브*/
	display: block;
	width: 100%;
	height: 60px;
	position: absolute;
	right: 0;
	top: 270px; /* 물결 높이 위치 */
	z-index: 10;
}
@media screen and (min-width: 344px) {
  .hero-waves {
    height: 70px; /* 특정 화면 크기 이상에서만 높이를 70px로 재정의 */
  }
}
.wave1 use {
	fill: rgba(253, 253, 255, 0.2);
	-webkit-animation: move-forever1 10s linear infinite;
	animation: move-forever1 10s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.wave2 use {
	fill: rgba(253, 253, 255, 0.5);
	-webkit-animation: move-forever2 8s linear infinite;
	animation: move-forever2 8s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.wave3 use {
	fill: rgb(253, 253, 255, 1);
	-webkit-animation: move-forever3 6s linear infinite;
	animation: move-forever3 6s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.dark .wave1 use {
	fill: rgba(49, 52, 60, 0.3);
	-webkit-animation: move-forever1 10s linear infinite;
	animation: move-forever1 10s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.dark .wave2 use {
	fill: rgba(49, 52, 60, 0.5);
	-webkit-animation: move-forever2 8s linear infinite;
	animation: move-forever2 8s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.dark .wave3 use {
	fill: rgba(49, 52, 60, 1);
	-webkit-animation: move-forever3 6s linear infinite;
	animation: move-forever3 6s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
@media screen and (min-width: 344px) {
  .hero-waves {
    height: 70px; /* 특정 화면 크기 이상에서만 높이를 70px로 재정의 */
  }
}
.wave1 use {
	fill: rgba(253, 253, 255, 0.2);
	-webkit-animation: move-forever1 10s linear infinite;
	animation: move-forever1 10s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.wave2 use {
	fill: rgba(253, 253, 255, 0.5);
	-webkit-animation: move-forever2 8s linear infinite;
	animation: move-forever2 8s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.wave3 use {
	fill: rgb(253, 253, 255, 1);
	-webkit-animation: move-forever3 6s linear infinite;
	animation: move-forever3 6s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.dark .wave1 use {
	fill: rgba(49, 52, 60, 0.3);
	-webkit-animation: move-forever1 10s linear infinite;
	animation: move-forever1 10s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.dark .wave2 use {
	fill: rgba(49, 52, 60, 0.5);
	-webkit-animation: move-forever2 8s linear infinite;
	animation: move-forever2 8s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.dark .wave3 use {
	fill: rgba(49, 52, 60, 1);
	-webkit-animation: move-forever3 6s linear infinite;
	animation: move-forever3 6s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
@-webkit-keyframes move-forever1 {
	0% {
		transform: translate(85px, 0%);
	}
	100% {
		transform: translate(-90px, 0%);
	}
}
@keyframes move-forever1 {
	0% {
		transform: translate(85px, 0%);
	}
	100% {
		transform: translate(-90px, 0%);
	}
}
@-webkit-keyframes move-forever2 {
	0% {
		transform: translate(-90px, 0%);
	}
	100% {
		transform: translate(85px, 0%);
	}
}
@keyframes move-forever2 {
	0% {
		transform: translate(-90px, 0%);
	}
	100% {
		transform: translate(85px, 0%);
	}
}
@-webkit-keyframes move-forever3 {
	0% {
		transform: translate(-90px, 0%);
	}
	100% {
		transform: translate(85px, 0%);
	}
}
@keyframes move-forever3 {
	0% {
		transform: translate(-90px, 0%);
	}
	100% {
		transform: translate(85px, 0%);
	}
}
/* 물결 END */

 

3) 미리보기로 물결의 위치를 확인 후 [적용]을 눌러 '저장'합니다.

물결의 위치(높이)는 .hero-waves {의 top: 270px;에서 수정하면 됩니다.

물결 효과 만들기

728x90

 

마무리

이렇게 간단하게 물결 효과에 대해 알아보았습니다.

참고한 블로그와 스킨이 달라 적용 효과는 다소 차이가 있을 수 있지만, 북클럽 스킨에서도 유사한 효과를 보여줄 수 있습니다. 적용할 위치를 잘 선택해서 적용해 보시기 바랍니다.

 

관련글 바로가기

'▸티스토리 이야기/티스토리 꾸미기' 카테고리의 글 목록

 

'▸티스토리 이야기/티스토리 꾸미기' 카테고리의 글 목록

우리들의 일상 속 소소한 이야기를 나누고 티스토리 꾸미기 등도 함께 하는 공간이 되기를 바랍니다.

galam.tistory.com

마감로고

"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받습니다"

 
반응형
저작자표시 비영리 변경금지

• 관련글 바로가기

top

티스토리툴바