자바스크립트16 [PROGRAMMING] 프로그래밍 (Programming) - 이미지 변환(Image Transform) 01 코드 · HTML, CSS(SCSS), 자바스크립트(Javascript) 기능 · 마우스 커서 움직임에 따라 이미지를 좌,우 또는 상,하 이미지 회전 효과 1. HTML & CSS 1) 코드 뷰 · figure#target 데이터 "data-rt-type" 은 좌,우 또는 상,하 회전 결정 ( x | y ) #example > .content[name="example"] { height: 100vh; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; -moz-box-align: cente.. 2021. 10. 17. [PROGRAMMING] 프로그래밍 (Programming) - 이미지 색상 추출(Image color picaker) 코드 · HTML, CSS(SCSS), 자바스크립트(Javascript) 기능 · 이미지 파일에서 색상 데이터를 추출 (Image Color Picaker) 1. HTML & CSS 1) 코드 뷰 #main-body #example > .content { width: 100%; height: 100vh; padding: 0 20px; max-width: 1280px; } #main-body #example > .content > #del-upload { background-color: rgba(0, 0, 0, 0.25); width: 227px; max-width: 227px; height: 350px; max-height: 350px; display: block; padding: 20px; left: .. 2021. 10. 9. [PROGRAMMING] 프로그래밍 (Programming) - 이미지(Image) 돋보기(Magnifier-glass) 코드 · HTML, CSS(SCSS). 자바스크립트(Javascript) 기능 · 마우스 커서를 따라 부분 확대, 돋보기(Magnifier-glass) 효과 1. HTML & CSS 1) 코드 뷰 Image : Magnifying-Glass /* #main-body #magnifier-glass > .content */ .wrap { width: 100%; text-align: center; padding: 2rem 0; } .wrap > .ct-img { max-width: 100%; position: relative; display: inline-block; border: 1px solid RGB(0, 0, 0, 0.1); overflow: hidden; } /* 자식 노드(child) 사이즈가 큰 .. 2021. 10. 2. [PROGRAMMING] 프로그래밍 (Programming) - 이미지(Image) 줌인(Zoom-In) 코드 · HTML, CSS(SCSS). 자바스크립트(Javascript) 기능 · 마우스 커서를 따라 이미지를 확대 (Zoom-In) 1. HTML & CSS 1) 코드 뷰 Image : Zoom-In /* #main-body #magnifier-glass > .content */ .wrap { width: 100%; text-align: center; padding: 2rem 0; } .wrap > .ct-img { max-width: 100%; position: relative; display: inline-block; border: 1px solid RGB(0, 0, 0, 0.1); overflow: hidden; } .wrap > .ct-img.scrollbar { /* 자식 노드(child) 사.. 2021. 10. 2. 이전 1 2 다음 반응형
