반응형 마우스 오버4 티스토리 꾸미기 | 본문 이미지에 그림자 및 확대 효과 주기 본문 이미지에 이벤트 효과를 주기.이번에는 본문에 업로드된 이미지에 그림자 효과 및 모서리를 둥글게 만들기, 마우스 오버 시 확대 등 다양한 효과를 넣는 방법에 대해 알아보겠습니다. 참고로 스킨에 따라 세부적인 내역에 차이가 있을 수 있으며, 제 경우는 티스토리 스킨 중에서 "Book Club"을 사용하고 있어 이 글의 설명도 이 스킨을 기준으로 하고 있습니다.📌 본문 이미지 이벤트 내용1. 이미지의 모서리를 둥글게2. 이미지에 그림자 효과3. 이미지에 얇은 테두리4. 이미지에 마우스 오버 시 이미지 확대 효과 CSS코드 적용법본문의 이미지 이벤트 효과는 CSS 코드만 추가하는 간단한 방식입니다CSS코드를 "관리 > 스킨편집 > CSS"로 진입 후 CSS탭 맨 아래 넣어 주기만 하면 됩니다. 1. 'h.. 2024. 10. 2. 티스토리 꾸미기 | 하이퍼링크 CSS코드 모음집 (북쿨럽 스킨) 하이퍼링크의 CSS코드 스타일 모음집. 블로그 본문의 하이퍼링크에 효과를 주는 것은 사용자 경험을 향상시키는 좋은 방법입니다. CSS를 사용하면 하이퍼링크에 다양한 효과를 쉽게 적용할 수 있습니다. 하이퍼링크에 마우스를 올릴 때 색상이나 밑줄 등의 스타일을 변경하며 이를 통해 클릭 가능한 요소를 더 효과적으로 알리고, 피드백을 제공할 수 있습니다. 하이퍼링크의 CSS코드 적용법필요한 하이퍼링크의 CSS코드를 "관리 > 스킨편집 > CSS"로 진입 후 CSS탭 맨 아래 넣어 주기만 하면 됩니다. 📌 자세한 설명은 아래 포스팅을 참고 하시기 바랍니다.2024.09.26-티스토리 꾸미기 | 본문의 하이퍼링크에 마우스오버 효과 만들기 (북쿨럽 스킨) 티스토리 꾸미기 | 본문의 하이퍼링크에 마우스오버 효과 만들.. 2024. 9. 27. 티스토리 꾸미기 | 본문의 하이퍼링크에 마우스오버 효과 만들기 (북쿨럽 스킨) 하이퍼링크에 마우스오버 효과를 만들기. 블로그 본문의 하이퍼링크에 효과를 주는 것은 사용자 경험을 향상시키는 좋은 방법입니다. CSS를 사용하면 하이퍼링크에 다양한 효과를 쉽게 적용할 수 있습니다. 하이퍼링크에 마우스를 올릴 때 색상이나 밑줄 등의 스타일을 변경하며 이를 통해 클릭 가능한 요소를 더 효과적으로 알리고, 피드백을 제공할 수 있습니다.이번에는 많은 분들이 물어보시는 제가 사용하는 하이퍼링크에 대해 알아보겠습니다.제가 사용하는 하이퍼링크는 플러그인의 무지개 링크가 아닌 CSS에 코드를 추가한 방식입니다. CSS코드 적용법작업 방법은 의외로 간단합니다.필요한 하이퍼링크의 CSS코드를 "관리 > 스킨편집 > CSS"로 진입 후 CSS탭 맨 아래 넣어 주기만 하면 됩니다. 1. 'html'탭에서 '.. 2024. 9. 26. 티스토리 I 마우스 오버시 썸네일이 움직이는 애니메이션 효과 만들기 티스토리 I 마우스 오버 시 썸네일이 움직이는 애니메이션 효과 만들기이번에는 썸네일이나 설명글에 마우스를 올리면 애니메이션 효과를 가지고 좌우로 움직이는 CSS코드에 대하여 알아보겠습니다. 목차 먼저 사용자 스킨에 따라 섬네일의 class가 다르기 때문에 움직이고자 하는 썸네일에 오른쪽 마우스 클릭 후 검사를 통해 정확한 위치를 파악하는 것이 좋습니다. 제 스킨의 경우는 북클럽스킨의 '뉴북'이라. list-type-thumbnail. post-item. thum img입니다.여러분들도 정확한 위치를 찾으셨다면, 우선 메모장에 저장해 두세요. A. 애니메이션 효과 CSS코드 만들기썸네일의 위치를 메모장에 저장하셨다면, 애니메이션 코드를 만들어주도록 하겠습니다. 1. '관리자 홈'에서 꾸미기 > 스킨 .. 2023. 3. 21. 이전 1 다음 반응형
