정보/블로그 운영팁

티스토리 이미지 확대, 그림자 강조 효과 적용

아미넴 2021. 1. 16.

마우스를 이미지에 가져다 댈 경우 이미지를 강조해 보려고 합니다.

좀 더 생동감 있는 블로그를 원하신다면 적용해 보세요.

 

이번 내용은 크게 어렵지 않아서 간단히 설명하고 결과를 보겠습니다.

 

목차

     

    CSS 작성

    관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다.

     

    html 편집을 클릭합니다.

     

    그리고 CSS 탭으로 이동하여 작업을 해 보겠습니다.

     

    다음 코드를 작성합니다. 어느 위치든 상관없습니다.

    img:hover {
    	transform: scale(1.03);
    	box-shadow: 0.2em 0.15em 0.3em #999;
    	transition: all 0.1s linear;
    }

    이미지에 마우스를 가져다 대면 크기를 약간 확대하고 그림자 효과를 적절히 주었습니다. 원하시는 만큼 조절하시면 됩니다. 부드럽게 보이도록 애니메이션 효과도 주었습니다.

     

     

    결과 보기

    다음과 같이 마우스를 가져다 대면 이미지가 약간 확대 되면서 그림자가 생기게 됩니다.

     

    영상으로도 확인해 보겠습니다.

     

    리스트의 썸네일 이미지에 적용된 화면입니다.

     

    본문의 이미지에 적용된 화면입니다.

     

    댓글의 프로필 이미지에 적용된 화면입니다.

     

    유용하게 사용하시기 바랍니다.

    감사합니다.

     

     

    반응형

    댓글10

    • ( ˃ᴗ˂ ) 2021.04.04 13:29 신고

      선생님 블로그 보고 코딩1도 모르는 일반인이 검색하는 시간 줄이고 블로그 잘 꾸미고 있습니다 감사합니다. ㅠㅠ
      답글

    • ( ˃ᴗ˂ ) 2021.04.04 13:31 신고

      그리고 선생님, 밑줄긋기를 사용하면, 밑줄이 글자에 너무 딱붙어있는데, 이거는 글자랑 아주살짝 간격을 두게끔은 못하나요? 그리고 밑줄의 색깔은 못바꾸는건가요?
      답글

      • 아미넴 2021.04.04 13:43 신고

        변경을 원하시는 부분에 다음과 같이 코드를 추가하시면 됩니다.

        간격을 좀 더 띄우는 css 코드
        text-underline-position: under;

        컬러 속성 바꾸는 css 코드
        text-decoration-color: red;

    • ( ˃ᴗ˂ ) 2021.04.04 14:35 신고

      작성한 글에서 원하는 문구의 HTML로 넣어야하는건가요?
      답글

      • 아미넴 2021.04.04 15:17 신고

        css탭에서 원하시는 class, id 또는 tag 부분에 추가하시면 됩니다.

        예를 들어 a 태그에 마우스 커서를 가져다 댔을 경우 적용하고 싶으시면

        a:hover {
        text-underline-position: under;
        text-decoration-color: red;
        }

        와 같이 하시면 되는데 css에 대한 이해가 어느정도 필요한 부분이므로 공부를 좀 하시는 편이 나을 거예요 ㅎ

    • ( ˃ᴗ˂ ) 2021.04.04 16:31 신고

      잘 적용 되었습니다. 감사합니다!
      답글

    • 빈봉이 2021.08.27 08:26 신고

      안녕하세요 미넴님
      예전부터 글 너무 잘 보고있습니다.
      최근에 글을 작성하고 서치콘솔에서 검색해보니 '모바일 친화적이지 않음'으로 뜨길래
      모바일로 제 글을 들어가봤더니 PC버전과 똑같이 나와서 글자가 엄청 작게 나오더라고요..
      이 부분은 혹시 어떻게 수정하는지 알 수 있을가요??
      답글

    💲 추천 글