본문 바로가기
728x90
반응형

전체 글302

비주얼 스튜디오 코드 32 _ 베지에곡선 사용하기 ● cubic-bezier https://cubic-bezier.com/#.17,.67,.83,.67 cubic-bezier.com cubic-bezier.com 베지에 곡선을 이용해서 이벤트 속도를 조절할 수가 있다. 선 화면 중앙에 보내기 애니메이션 주기 ●animation : bar 2s ease-in-out infinite; bar : 애니메이션 이름 2s : 수행시간 ease-in-out : 수행시간 동안 빠르기를 조절해주는 명령어 infinite : 수행할 갯수 ( 무한정) ● @keyframes : 움직이는 값을 줄때 사용한다. 선이 제자리에서 움직인다. 0%에서 bar 높이값이 0, 회전 0 에서 시작 25%에서 진행속도 대신에 베지에 곡선을 이용해서 속도를 조절할 수 있다. ● cubic.. 2023. 6. 14.
비주얼 스튜디오 코드 31_ 상하 / 좌우 슬라이드 배너 01 상하 슬라이드 html > 골격 만들어주기 css> reset 하기 css 에 .container / 클래스 태그 style 넣어주기 ● 변수 지정 : const / let 으로 이름 지정가능 ●setInterval: 일정시간 간격으로 애니메이션을 반복할 수 있다. 이미지 상하로 이동하는 슬라이드 @charset "utf-8"; /* reset */ *{ margin: 0; padding: 0; box-sizing: border-box; color: #222; } li{ list-style: none; } a{ color: #222; text-decoration: none; } img{ display: block; } .clearfix::before, .clearfix::after{ content:.. 2023. 6. 14.
비주얼 스튜디오 코드 30 _ 마우스오버 효과 ⑤ 원근감을 이용한 회전효과 html 골격만들기 >css figure라는 공통된 태그를 넣어주면 명령어를 줄여서 쓸수 있다. ● perspective : 투시점 , 부모에게 적용해야함 left 가 기준점(relative)이고 figcaption 수정하기 figcaption에 translateZ를 추가해서 이미지와 피그캡션을 z축으로 띄어준다. left 이미지 효과주기 .front , .back 에 transform-style 넣어준다, ● transform-style : preserve-3d > 3d로 사용하겠다. 아래에 #wrap .left .front{} 하나 더 만들어준다. transform: rotateY / 시간값 / backface-visibility: hidden 적용 #wrap .left:ho.. 2023. 6. 14.
비주얼 스튜디오 코드 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.. 2023. 6. 14.
비주얼 스튜디오 코드 28_ 상하 슬라이드 배너 만들기 html 골격만들기 ul에 class="list" li에 class="list_img" 클래스 지정해주기 css 스타일 넣어주기 - 제이쿼리 스니펫 body에 붙여넣기 - 변수- 이름지정해주기 // 배너 이미지슬라이드 const banner = $(".banner"); const list = $(".banner > .list"); const listImg = $(".banner > .list > .list_img") // setInterval(function(){},3000); // 3초마다 function(){}를 불러와서 실행시키라는 명령어 -애니메이션 넣어주기 // setInterval(function(){},3000); // 3초마다 function(){}를 불러와서 실행시키라는 명령어 setIn.. 2023. 6. 13.
비주얼 스튜디오 코드 27_ 태그 명령 줄여서 쓰기 , 반응형 ● 코드 정렬 : ctrl+a > ctrl + k f ● > : 바로 밑에 있는 태그를 지정할 때 사용 ex: #wrap > div 태그 명령어 줄여서 쓰는 방법 html mosue hover 마우스 오버효과 앞면입니다. mosue hover 마우스 오버효과 뒷면입니다. mouse hover_상하회전 마우스 오버효과 앞면입니다. mouse hover_상하회전 마우스 오버효과 뒷면입니다. css @charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } img{ display: block; } body{ height: 100vh; background-color: #0f2027; } #wrap{ height: 100vh; /* 정렬할 때 세로.. 2023. 6. 13.
728x90

티스토리툴바