프론트엔드/웹 기능 구현9 [ 웹 기능 구현 ] offsetTop을 사용하여 scroll움직임 표현하기 window 객체의 scroll() 메서드와 offsetTop()에 대해 알아보았다. 자바스크립트에서 window 객체는 브라우저 창을 가리킨다.window.scroll() 메서드는 브라우저의 스크롤을 특정 위치로 이동시킨다. 이 메서드는 두 가지 방법으로 호출할 수 있다. 1. window.scroll(x좌표, y좌표) 2. window.scroll(options객체) - key와 value로 구성된 객체를 전달한다. 2번으로 이번 프로젝트를 만들어보았다. scroll() 메서드를 사용하면!스크롤바를 이동하지 않아도 키보드를 위아래 누르지 않아도 페이지의 스크롤을 이동시킬 수 있다. HTML요소 중에 offsetTop()을 활용하면!요소의 윗면 경계가 최상위 요소의 윗.. 2022. 9. 30. [ 웹 기능 구현 ] Date()를 사용하여 디지털 시계 만들어보기 프로젝트 설명 Date()를 사용하여 현재 시간을 출력하고 GO를 누를 경우 시간이 가고 STOP을 누를 경우 시간이 멈추게 해 보았다. 결과물 코드 index.html GO STOP style.css html, body { margin: 0; /* 웹에는 기본적으로 margin이 있어 margin을 초기화해주었다. */ } .container { text-align: center; /* container 안에 있는 요소들은 중간으로 배치해준다. */ } .clock { width: 200px; /* 가로 길이를 200px로 줄이지 않으면 박스가 화면을 꽉 채운다 */ margin: 30px auto; border: 2px solid black; border-radius: 10px; } button { .. 2022. 9. 28. [ 웹 기능 구현] Hover me 효과 넣기 목표 마우스를 text위로 올릴때 hover 효과 나타나게 하기 html 1 2 3 4 5 6 7 8 9 10 11 12 13 Hover Me Hover Me Colored by Color Scripter cs html 파일은 간단하게 태그로 Hover me를 만들어 주었습니다. css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 h1::before { transform: scaleX(0); /* resizes an element along the x-axis (horizontally) */ transform-ori.. 2022. 3. 19. [ 웹 기능 구현 ] 백엔드 없이 HTML 문의 양식에서 이메일 보내는 방법 2 앞전에는 Formsubmit으로 백엔드 없이 이메일 보내는 방법을 알려드렸습니다. 백엔드 없이 HTML 문의 양식에서 이메일 보내는 방법 1 [ 웹 기능 구현 ] 백엔드 없이 HTML 문의 양식에서 이메일 보내는 방법 1 포트폴리오를 만들다 보면 연락처 부분이 필요하게 됩니다. 이때 백엔드 없이 HTML안에서 만든 form으로 당신에게 이메일을 보낼 수 있는 두 가지 방법이 있습니다. 1. FormSubmit을 사용하기 2. Get form codesign.tistory.com Formsubmit은 이미 지정된 이메일을 다른 웹사이트에서 이메일과 연결시키려 아니까 안돼서 오늘은 다른 방법을 써봤습니다. Getform Getform 역시 무료로 사용 가능합니다. 다만, 한 달에 50개의 제출만 받습니다. .. 2022. 3. 3. [ 웹 기능 구현 ] Getform에서 연락받을 때 이메일 알림 설정 방법 백엔드 없이 HTML 문의 양식에서 이메일 보내는 방법 2에서 getform을 사용하여 백엔드 없이 HTML 문서 양식에서 무료로 이메일 보내는 기능을 만들어 보았습니다. 오늘은 연락이 보내졌을 때 내 이메일로 알림이 오게끔 설정을 해 보겠습니다. STEP 1 홈 페이지에서 "Account"를 눌러주세요. Getform STEP 2 이메일 알림을 받고 싶은 프로젝트를 선택해주세요. STEP 3 "Automation"을 눌러주세요. STEP 4 "Send an email notification"을 눌러주세요. STEP 5 알림을 받을 이메일을 적어 주세요. EXTRA 메일이 보내지고 나서 "Thank you" form도 추가할 수 있습니다. 2022. 3. 2. [ 웹 기능 구현 ] 백엔드 없이 HTML 문의 양식에서 이메일 보내는 방법 1 포트폴리오를 만들다 보면 연락처 부분이 필요하게 됩니다. 이때 백엔드 없이 HTML안에서 만든 form으로 당신에게 이메일을 보낼 수 있는 두 가지 방법이 있습니다. 1. FormSubmit을 사용하기 2. Get form을 사용하기 https://formsubmit.co/ FormSubmit | Easy to use form backend - form endpoints for your HTML forms FormSubmit is a form backend, API and email service for HTML forms. It sends your site's form submission directly into your inbox without a need for any backend code or .. 2022. 2. 28. [ 웹 기능 구현 ] Boxicons 사용해서 무료 아이콘 사용 방법 웹 개발을 하다 보면 메뉴 바가 접혔을 때 사용할 아이콘 또는 무언가를 넘길 때 사용할 화살표 아이콘 등 아이콘을 사용할 일들이 생깁니다. 많은 사이트들이 무료로 아이콘을 제공해줍니다. 오늘은 그중 Boxicons를 사용해 봅시다. Boxicons Boxicons : Premium web friendly icons for free Boxicons is a free collection of carefully crafted open source icons. Each icon is designed on a 24px grid with the material guidelines boxicons.com STEP 1 위에 제공된 링크로 들어가서 "Usage"를 눌러주세요. STEP 2 왼쪽에 "Import the C.. 2022. 2. 27. [ 웹 기능 구현 ] Swiper Demos 사용법 - 슬라이드 만들기 Swiper Demos란? Swiper Demos를 사용해서 마우스로 쉽게 슬라이드 가능한 스와이프를 만들 수 있다. 데모 보기 STEP 1 홈페이지로 들어가서 "Get Started"를 선택합니다. Swiper Demos 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 STEP 2 Swiper Demos를 사용할 수 있는 방법에 두 가지가 있습니다. 1. CDN을 링크로 slider 삽입하여 사용하기 2. Swiper Demos에서 .js .. 2022. 2. 26. [웹 기능 구현 ] 웹 사이트 배포하는 방법 Netlify 내가 만든 프로젝트, 포트폴리오 등을 깃에서 쉽게 그리고 무료로 웹 사이트로 배포할 수 있는 방법! Netlify의 장점 1. Github와 연동을 함으로써 이미 깃에 올려진 코드로 웹 사이트를 만들 수 있다. 2. 코드에 수정을 하더라도 깃에만 올려주면 Netlify는 자동으로 웹사이트를 업데이트한다. 3. 무료로 웹사이트를 배포할 수 있다. netlify Netlify: Develop & deploy the best web experiences in record time A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much m.. 2022. 2. 25. 이전 1 다음 728x90
