탐구하는 취르미

반응형으로 이미지맵을 생성하는 방법을 공유하겠습니다. 적응형 이미지맵 처리적응형으로 이미지맵을 생성하는 방법은 이전 포스팅 참고하시면 되겠습니다. [HTML] Image Map, 이미지맵으로 이미지에 링크 거는 방법이미지맵(Image Map)으로 이미지에 링크를 거는 방법에 대해서 알아봅시다. 요즘에는 잘 쓰이지 않는 방법이긴 하지만 디엠(Direct Mail)/뉴스레터(News Letter) 등을 제작할 때 알아두면 꽤 유용합니다. dev-chim.tistory.com 반응형으로 이미지맵을 처리해 주는 깃헙 사이트 - jQuery-rwdImageMaps 아래 링크를 참조하셔서 소스 코드를 다운로드하시길 바랍니다. GitHub - stowball/jQuery-rwdImageMaps: Responsive ..

이미지맵(Image Map)으로 이미지에 링크를 거는 방법에 대해서 알아봅시다. 요즘에는 잘 쓰이지 않는 방법이긴 하지만 디엠(Direct Mail)/뉴스레터(News Letter) 등을 제작할 때 알아두면 꽤 유용합니다. 기본적인 사용 방법usemap 값과 map name의 값을 매칭시켜 주는 것이 중요하다. 도형의 유형으로는 rect(직사각형), circle(원형), poly(다각형), default(전체 영역)이 있다. 유형에 따라 사용 방법이 조금씩 다르니 아래의 글을 참조하도록 하자. 1. rect(직사각형) 2. circle(원형) 3. poly(다각형)coords : 좌표값의 시작점을 기준으로 시계방향으로 좌표값을 설정해 주면 된다. 한 이미지에 여러 개의 링크 거는 방법map 태그 안에 여..

https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 홈페이지 구축할 때, 자주 사용하는 UI 중 하나다 현업에서 slide, slider, carousel, swiper로 불린다 슬라이더 중에 가장 유명한 Swiper 모듈을 설치해 보자 1. swiper 설치하기 npm i swiper package.json에 설치된 swiper 모듈 2. 기본적인 html 뼈대는 swiper 공식 홈페이지 문서에서 그대로..

Vite에서 모듈들 간단하게 설치해서 사용하기, gsap 편입니다. https://greensock.com/gsap/ GSAP Timeline Tip: Understanding the Position Parameter The secret to building gorgeous sequences with precise timing is understanding the super-flexible "position" parameter which controls the placement of your tweens, labels, callbacks, pauses, and even neste greensock.com GSAP는 화려한 애니메이션을 옵션만 숙지한다면, 보다 쉽게 애니메이션을 구현할 수 있는 좋은 모듈입..

프로젝트 생성 초기 폴더 구조 Vite로 프로젝트 생성 시, 초기 폴더 구조입니다 1. SASS를 설치하기 npm i sass -D package.json 파일에 sass가 설치되어 있는 것을 확인할 수 있다 SCSS로 스타일을 작성할 것이므로, 필요 없는 css파일 삭제하고 scss 파일 추가하기 style.css style.scss touch style.scss 3. 필요 없는 파일들 삭제하고 main.js에 추가한 style.scss를 가져오기(import) javascript.svg counter.js public/vite.svg 4. 스타일 초기화를 위해 reset.scss를 추가하면서, 일부 폴더 구조를 변경했다 스타일 파일은 한 곳에 묶어두는 것이 좋다 main.js에 style.scss 경..

간단하게 Vite로 프로젝트 생성하는 방법에 대해서 알아보겠습니다. https://vitejs-kr.github.io/guide/ Vite Vite, 차세대 프런트엔드 개발 툴 vitejs-kr.github.io 선행 작업으로 node.js가 설치되어 있어야 합니다. 터미널을 오픈하세요. 1. npm으로 Vite 설치하기 npm create vite@latest Project name: 진행하고자 하는 프로젝트 폴더명 입력하기 ✔️ 각각의 옵션은 프로젝트 성향에 맞게 선택하기 Select a framework: Vanilla Select a variant: JavaScript cd 생성한_프로젝트_폴더명 npm install npm run dev #서버 띄우기 잠시 서버 종료 ctrl + c #서버 종료..