본문 바로가기
728x90

분류 전체보기465

AOS(Animate on scroll library) 보호되어 있는 글 입니다. 2023. 8. 9.
PARALLAX_SCROLLING 원페이지_사이트_with_패럴랙스_스크롤링 ※ 중요) 원페이지_사이트_with_패럴랙스_스크롤링_구현 원 페이지 사이트는 하나의 사이트를 한 화면에 담는 사이트입니다. 원 페이지 사이트는 필요한 내용이 한 페이지 안에 다들어 있어야 합니다. 그래서 전체 콘텐츠의 양이 많지 않을 때 적합한 레이아웃입니다. parallax-scroll 플러그인은 배경 이미지를 조금만 움직여 패럴랙스 스크롤링 효과를 만드는 플러그인 입니다. 이때, 페럴렉스(Parallax)란? 영어 단어로 "시차" 를 뜻합니다. 시간차에 따라 모션을 다르게 줌으로써 움직이는 모션효과를 주는 것이며, 패럴랙스 스크롤링 효과는 스크롤의 움직임에 따라 콘텐츠가 반응하여 시간차 움직임을 보이는 효과를 말합니다. 이 효과는 마우스 스크롤 위치에 따라.. 2023. 8. 7.
CAROUSEL Carousel bxSlider 활용 1) Carousel_bxSLIDER ※ 회전하는 UI 표현 Carousel(캐러셀) Carousel(캐러셀)은 "회전 목마"라는 의미를 갖고 있으며, 여러 내용을 회전하면서 보여주고 마지막 내용 다음에는 다시 첫 번째 내용으로 내용을 보여줍니다. 한 공간에서 여러 내용을 번갈아 보여주기 때문에 한정된 공간에서 최대한 많은 내용을 보여줄 경우 활용합니다. 1. bxSlider 플러그인 활용 Carousel(캐러셀) 구현 https://bxslider.com/ 1) 앞서 웹사이트에서 bxSlider zip 파일을 다운로드 받습니다. 그리고, dist폴더에 있는 css파일과 js 파일을 다음과 같이 연결해 줍니다. 물론, jQuery 파일도 연결해 줍니다. [다음] 2023. 8. 7.
주소 API 연동 1) Daum Postcode Service User Guide_우편번호찾기_기능구현시_웹서버구동필요함 https://postcode.map.daum.net/guide#usage Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net 예제1) 팝업을 이용하여 도로명 주소와 지번주소 모두 보여주기 code 복사 body에 코드 붙여넣기 예제2) ! : not != : 같지 않다면 //패스워드 확인용 자바 스크립트 소스 코딩 function passwordChk(){ var password01 = document.getEleme.. 2023. 8. 4.
LANDING PAGE 구현 ※ Full Screen Landing Page 구현 1. Full Screen Landing Page 구현 : 이미지 파일 용량 줄이기(최적화) landing page 구현시 용량은 적은 이미지를 활용한다! Front-End 웹 Landing Page 구현 시 이미지 파일의 용량이 크면 자칫, 웹사이트 구동에 시간이 걸릴 수 있습니다. 그렇기 때문에, 다음과 같은 이미지 파일 용량을 줄여주는 최적화 웹 사이트를 활용하는 것도 필요합니다. [이미지 파일 용량 줄여주는 최적화 웹사이트 : TinyPNG – Compress WebP, PNG and JPEG images intelligently] https://tinypng.com/ [실습 확인] test.JPG(약 1.8MB) 파일의 용량을 TinyPNG .. 2023. 8. 4.
[JAVASCRIPT] AJAX _2 ajax 통신활용 1. HTML 데이터 data.html 파일 새로만들기 id result 안에 html 형식이 들어온다. 프론트 웹에서는 .txt 파일은 문자열을 로우데이터로 불러오고 , 이번에는 html 형식을읽어오는 것이다. 검사창에서 HTML데이터 클릭하면 KBS URL 이 없다가 나타난다. 문자열 데이터 HTML 데이터 data2.html KBS 한국방송공사 2. XML 데이터 xml은 대소문자를 구분한다. xml은 태그(묶어주는 태그, 기준)가 꼭 있어야한다. 웹으로 되어있고 형식이 자유롭다 url: "data3.xml" 와 같은 이름으로 data3.xml 파일을 새로 만든다. append : 기존에 데이터에 추가된다. 문자열 데이터 HTML 데이터 XML 데이터 문자열1-1 문자열1-2 문자.. 2023. 8. 3.
728x90
반응형

티스토리툴바