TIL-5/18

choichoichoi·2023년 5월 18일
0

내일배움캠프

목록 보기
4/36

내일배움캠프 4일차

어제 alert기능과 db데이터가 입력이 안되었는지 알게 되었다.
정말 어이없게도 어제 코딩을 하다가 head부분에 제이퀄을 불러오는 스크립트를 지워버린것...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

바로 이 아이가 html에 빠져있었다. 이런걸로 튜터님에게 질문을 해서 얼마나 죄송하고 부끄러운지... 그래도 튜터님이 친절이 알려주셨다! 정말 감사합니다!

오늘은 어제 적지못했던 새로 배운 기능에 대해 설명하려고한다.
바로 hover css기능이다. 웹개발 종합반을 들었을 때 부트스크랩에서 버튼의 코트를 가져왔던적이 있엇는데 그 때 버튼에 hover기능이 있었다.
hover는 사용자가 마우스 커서를 해당 오브젝트에 올리면 화면에서 살짝 뜬것처럼 보려주게 하는 css이다. 이 기능은 텍스트, 버튼, 이미지 등에 적용할 수 있는다. 하지만 이 css에는 특이점이 하나있는데 바로 브라우저 호환성이다. 크롬, 오페라, 사파리, 파이어 폭스 등등의 브라우저에서 사용할때 transform이 들어간 코드(각 브라우저의 형식에 알맞는)를 작성해야한다.
나는 운이 좋게 위의 3개의 브라우저 코드를 올려놓으신 블로그를 발견하여 쉽게 적용할 수 있었다.

img:hover {
  transform: scale(값입력);
  -webkit-transform: scale(값입력);
            /* 크롬 */
  -moz-transform: scale(값입력);
            /* 파이어폭스 */
  -o-transform: scale(값입력);
            /* 오페라 */
           
        }

이런식으로 사용하면 된다.

0개의 댓글