개발

한달 내 할거

블로그 수정

  • github, linkedin 등등 추가
  • 댓글 기능 추가

java 코테 준비



여기중에서 github, linkedin 등등 아이콘 추가 작업을 하려고 함.

_includes 폴더에 social-icons.html 파일을 만들고

<a href="[your-instagram-url]" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="[your-github-url]" target="_blank"><i class="fab fa-github"></i></a>
<a href="[your-linkedin-url]" target="_blank"><i class="fab fa-linkedin"></i></a>
<a href="mailto:[your-email]"><i class="fas fa-envelope"></i></a>

추가후 저장.

image-20241017183740377

잘 작동하긴 하는데 너무 아이콘이 작고 디자인도 별로다. 디자인 뭐 해볼까 하다가 3D 애니메이션을 추가해보았다.

/* 3D 효과를 위한 추가 스타일 */
.social-icon::before,
.social-icon::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.social-icon::before {
  transform: translateZ(-1px);
  opacity: 0.5;
}

.social-icon::after {
  transform: translateZ(1px);
}

.social-icon:hover::before {
  transform: translateZ(-10px);
  opacity: 0;
}

.social-icon:hover::after {
  transform: translateZ(10px);
}

/* 아이콘 뒷면 스타일 */
.social-icon i {
  backface-visibility: hidden;
}

.social-icon:hover i {
  transform: rotateY(180deg);
}

이러면 마우스를 갖다대면 아이콘이 휘리릭 거린다.


아니면 직접 삽입도 가능하다.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red">
    <animate attributeName="r" values="40;20;40" dur="2s" repeatCount="indefinite"/>
  </circle>
</svg>

위와 같은 코드를 작성하면 바로 아래처럼 나온다. 생각보다 잘 나오넹.