728x90
반응형

이미지회전효과 2

비주얼 스튜디오 코드 29 _ 마우스오버 효과 복습

html 골격만들기 클래스에 이름을 공통으로 쓰기 위해서는 클래스에 이름을 2개로 사용해줌 figure 태그로 이미지 앞면, 뒷면의 태그를 넣어준다. css에서 효과는 똑같으니까 effect이름으로 스타일을 넣어준다. ● >표시는 바로밑에 자식에게 사용해야한다. figure 피그캡션 수정하기 _효과주기 left / right 각각 front,back 효과를 주어야한다. hover 시 효과 넣어주기 > html 왼쪽이미지 앞면 왼쪽이미지 뒷면 오른쪽이미지 앞면 오른쪽이미지 뒷면 > css @charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } img{ display: block; } body{ height: 100vh; backgroun..

비주얼 스튜디오 코드 26 _ 마우스오버 효과④

이미지 회전 효과 html 골격 만들어주기 #wrap .effect ho1 > figure > img = figcaption > h3 = p .effect ho2 > figure > img = figcaption > h3 = p css reset 넣어주기 이미지 사이즈 100% 로 넣어주고 ho1 사이즈와 마진 넣어주기 이미지 양면으로 합쳐주기 피그캡션과 p 태그 수정 ho1- front , back 한번에 style 넣어주기 .front > figure 로 변경하면 한번에 스타일을 적용할 수 있다. 이미지 front 앞면 돌려주기 이미지 back 뒷면 돌려주기 ●backface-visibility : hidden; 뒷면 가려주기 html mosue hover 마우스 오버효과 앞면입니다. mosue ho..

728x90
반응형