728x90 반응형 transform7 비주얼 스튜디오 코드 70_parallax07 화면이 이동하면서 글자들이 나오는 액션 html 마크업 css 편집 #contents css 편집 #header css 편집 #nav css 편집 dot 위치시키기 dot 모양 만들기 **parallax를 사용하지 않아도 링크를 걸면 해당 화면에 페이지로 이동하는 것을 볼 수 있다. @charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } li{ list-style: none; } a{ text-decoration: none; } /* header */ #header{ position: fixed; width: 100%; height: 60px; background-color: rgba(255, 255, 255, 0.3); } #head.. 2023. 7. 10. 비주얼 스튜디오 코드 _ 35 로딩 애니메이션 박스 3개 만들기 #wrap > .container > .box > .clock / p-clock 박스 영역 잡아주기 ● display: inline-block 인라인에는 본인 가지고 있는 여백이 있기 때문에 인라인블록을 해도 옆으로 나열되지 않음 이런 경우에는 float으로 옆으로 나열해준다. ● float을 띄우면 부모가 높이를 잃게 된다. >> 부모에 clearfix 나 overflow: hidden을 적용해준다. 박스를 개별로 수정해주기 .box:nth-child(1){} / .box:nth-child(2){} .... >> 하지만 박스 갯수가 많아지게 되면 각각 수정하기 시간이 오래걸린다. 박스를 짝수, 홀수로 수정해주기 짝수 .box:nth-of-type(2n){} 홀수 .box:nth-of-.. 2023. 6. 16. 비주얼 스튜디오 코드 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. 비주얼 스튜디오 코드 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. 비주얼 스튜디오 코드⑮ 트렌스폼을 이용해서 효과주기_2 외부 css 사용시 html에 css 링크 꼭 걸어주기 * web font사용 시 light, normal, bold 가 다 있는 폰트를 사용해야 다양하게 사용할 수 있다. 박스 만들어주기 section으로 만들어주기 01 rotate : 회전 transform: rotate(45deg) transform: rotateX(45deg) transform: rotateY(45deg) CSS3 Transform rotate(45deg) rotateX(45deg) rotateY(45deg) @charset "utf-8"; *, *::after, *::before{ margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: #f5f3f4; t.. 2023. 6. 7. 비주얼 스튜디오 코드⑭ 피그마이용해서 이미지크기 조절 ㅣ 콘텐츠 모양을 자유롭게 변형하기_2 w1920 h500 layout grid > columns으로 변경 margin: 360으로 설정 줄자켜기 줄자로 가이드라인 넣어주기 alt+드래그+shift: 고정이동 + 복사 그리드 설정하기 사각형 10*10px / 사각형 400*200px 로 가이드라인 그려주기 아래이미지 참고 이미지 크기 설정해주기 file > place image 이미지 선택 export > 다른이름으로 저장 plugins_unsplash 생성 file > plugins > find more plugins > 검색창에 unsplash 검색 > unsplash Run 클릭 unsplash 플러그인을 통해 다양한 이미지를 사용할 수 있다. position 이미지 박스 내려가는 동작 만들기 li안에 img와 span(박스)이 동등하게.. 2023. 6. 5. 이전 1 2 다음 728x90
