본문 바로가기

분류 전체보기73

무한 스크롤 페이지 생성 react-infinite-scroll-component react-infinite-scroll-component 무한으로 페이지를 스크롤 할때, 필요한 라이브러리이다. 다음 그림은 해당 라이브러리의 무한 스크롤 예제 실행모습이다. 스크롤을 내리면, div가 추가되는데, 무한으로 스크롤을 해준다. 해당 소스의 링크 : https://codesandbox.io/s/yk7637p62z?file=/src/index.js yk7637p62z - CodeSandbox yk7637p62z by ankeetmaini using react, react-dom, react-infinite-scroll-component, react-scripts codesandbox.io InfiniteScroll 의 주요 props loader : loading 동안 보여질 내용 hasMor.. 2021. 12. 17.
FullPage 전체화면 스크롤 사이트 링크 : https://alvarotrigo.com/fullPage/ (참고 : 요즘은 FullPage 형식보다 자유로운 스크롤 + 애니메이션이 대세입니다. ) 그리고 스크린 사이즈에 따라 CSS 반응형으로 짜는게 가장 어렵습니다. (투입 시간대비 가성비가 안좋음) FullPage.js - https://github.com/alvarotrigo/fullpage.js GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple - GitHub -.. 2021. 7. 25.
2d 차트 그리기 (with javascript) 2D 차트를 javascript를 이용하여 그려보자. HTML , js 파일에 다음 내용을 기재하면 맨 아래 결과물을 얻을수 있다. var ctx = document.getElementById('myChart').getContext('2d'); var chart = new Chart(ctx, { //차트설정 type: 'line', //차트데이터 data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: '주간 판매량', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [5, 10, 5, 2,.. 2021. 7. 25.
modal (모달창 만들기) 버튼을 클릭하면 모달창이 나타나고 , 모달창 내 버튼을 클릭하면 닫힙니다. See the Pen modal by ziziziczic (@ziziziczic) on CodePen. 2021. 1. 27.
글자색과 배경색의 명암비 4.5! 이때 참고할만한 사이트~ 글자색과 배경색의 명암비는 최소 4.5 (큰 글자의 경우 3) 이상~!! Contrast-Finder는 웹 접근성 기준에 적합하도록 명암이 충분히 대비되는 색의 조합을 찾아줍니다. app.contrast-finder.org/?lang=ko Contrast Finder, 웹 접근성 기준(WCAG)에 적합하도록 명암이 충분히 대비되는 색의 조합 검색 Contrast-Finder는 웹 접근성 기준(WCAG)에 적합하도록 명암이 충분히 대비되는 색의 조합을 찾아줍니다. 그래서 색의 명암비와 관련된 웹 접근성(a11y) 테스트를 충족시키는 데 도움을 드립니다. Contras app.contrast-finder.org 2021. 1. 23.
미디어 쿼리를 지원하지 않는 브라우저에 대응하려면? respond.js 사용하기 반응형 웹은 기본적으로 데스크탑을 비롯해 태블릿, 모바일 등 다양한 기기에 대응할 수 있어야 합니다. 그런데 아직까지 국내 사용자가 많은 인터넷 익스플로러 브라우저의 6~8버전에서는 반응형 웹이 동작하지 않습니다. 인터넷 익스플로러 6~8버전을 비롯해 미디어 쿼리를 지원하지 않는 브라우저에서도 반응형 웹이 동작하도록 설계하려면 respond.js 자바스크립트 라이브러리를 다운로드해서 링크하면 됩니다. github 링크 : github.com/scottjehl/respond scottjehl/Respond A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more) - scottjehl/Respond git.. 2021. 1. 23.
미리캔버스) 무료 디자인 툴 www.miricanvas.com/ 미리캔버스 저작권 걱정 없는 완전 무료 디자인툴 미리캔버스 www.miricanvas.com 다양한 디자인 템플릿을 무료로 제공해주어 초보도 간편하게 디자인을 할수 있어요. 명함부터 PPT, 웹디자인, 배너 디자인, 상세페이지, 유투브등 다양한 디자인을 손쉽게 하실수 있습니다. 2021. 1. 18.
statcounter.com )한국에서 가장 많이 사용하는 브라우저는? gs.statcounter.com/ StatCounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share Tracks the Usage Share of Search Engines, Browsers and Operating Systems including Mobile from over 10 billion monthly page views. gs.statcounter.com 위 사이트를 이용하여 한국에서 가장 많이 사용되는 브라우저를 확인해 보았습니다. 크롬이 가장 많이 이용되네요. 이용률 : 51.66 %입니다. 이 사이트에서는 한국에서 사용되는 스크린 해상도 통계도 볼수 있는 등, 웹사이트를 제작할 때 고려할 만한 통계정보들을.. 2021. 1. 18.
box-shadow로 입체감있는 구 만들기 box-shadow의 값을 조절하여 입체감 있는 구를 만들어 보았습니다. See the Pen box-shodow attribute by ziziziczic (@ziziziczic) on CodePen. box-shadow : x값 y값 blur값 그림자두께 색상 ; box-shadow 안에 inset 값은 내부 그림자를 셋팅하기 위함입니다. 그림자를 여러개 사용하길 원할 경우 , 쉼표를 찍고 , 값을 반복해서 사용하면 됩니다. 예시 : box-shadow : x값 y값 blur값 그림자두께 색상 , x값 y값 blur값 그림자두께 색상 , x값 y값 blur값 그림자두께 색상 ; // 3개의 그림자가 생성됨. 2021. 1. 7.
현재 국내 도시 날씨 알아보기 (jquery) 본 예제는 다음 동영상을 참고하여 작성되었습니다. 출처 : youtu.be/ccTAedW2KPg See the Pen seoul weather by ziziziczic (@ziziziczic) on CodePen. 본 예제는 날씨 정보를 json 형식으로 실시간으로 받습니다. 날씨 정보를 얻는데 필요한 정보는 도시코드와 개인 key값입니다. 이를 조합하여 접속 url이 만들어집니다. (개인 key는 회원 가입으로 얻을수 있으며, 도시코드는 사이트에 나와있습니다.) json 파일에서 날씨 정보의 일부만 발췌하여 보여줍니다. 2021. 1. 4.

티스토리툴바