# locomotive-scroll? 뷰포트 요소를 검출 및 시차효과를 사용한 부드러운 커스텀스크롤 플러그인. 단, 사용성·접근성 및 성능 문제를 일으킬 수 있음. # 사용하기 1-1. NPM node.js를 사용하여 locomotive-scoll을 다운받는 방법. 콘솔창에 다음의 설치 명령어를 입력하면 다운로드 됨. npm install locomotive-scroll 1-2. github locomotive-scroll의 git에서 직접 다운받는 방법. https://github.com/locomotivemtl/locomotive-scroll/tree/master/dist GitHub - locomotivemtl/locomotive-scroll: 🛤 Detection of elements in vie..

#smooth scrollbar? 크로스브라우징이 가능한, 스크롤바를 사용자가 정의할 수 있는 JS 플러그인. #사용하기 1-1. NPM Node.js를 사용하여 smooth scrollbar를 다운로드 하는 방법. 콘솔창에 다음의 설치 명령어를 입력하면 node_modules라는 파일이 생성되며 그 안에 다운로드 됨. npm install smooth-scrollbar 1-2. github smooth-scrollbar의 git에서 직접 다운로드 하는 방법. https://github.com/idiotWu/smooth-scrollbar/tree/develop/dist GitHub - idiotWu/smooth-scrollbar: Customizable, Extendable, and High-Perfor..

jQuery Cookie를 사용하여 하루만 혹은 기간을 정하여 모달창을 띄울 수 있다. jQuery를 기본으로 깔고 있기 때문에 jQuery와 jQuery Cookie를 불러온다. 파일을 다운받아 연결해도 되고, CDN으로 연결해도 된다. (CDN으로 연결) 파일 다운을 원할 시 https://plugins.jquery.com/cookie/ 에서 다운 받으면 된다. HTML 오늘 하루 보지 않기 닫기 오늘 하루 보지 않기 닫기 원하는 모달창을 마크업 한다. 구현하고자 하는 기능 모달창은 총 2개 페이지 첫 화면에 고정되며 body가 스크롤이 되는 일반 모달창 모달창도 body에 고정되어 body가 스크롤 될 때 같이 스크롤됨 (위치고정x) 하나는 클릭했을 때 원하는 링크의 새 페이지를 띄우고, 나머지 하..

탭 메뉴나 페이지 번호 등을 클릭했을 때 클릭한 요소만 css를 변경(.active 추가)하는 js HTML 1 2 3 4 5 css #container > .tab {color:#333;} #container > .tab.active {color:#fff; background:#333; border-radius:50%;} JS const tabContainer = document.getElementById("container"); let tab = tabContainer.getElementsByClassName("tab"); for(let i = 0; i < tab.length; i++){ let current = document.getElementsByClassName("active"); curren..

input태그의 radio 타입을 이용하여 탭 메뉴 만들기 HTML Short Medium Long Short Section Praesent nonummy mi in odio. Nullam accumsan lorem in dui. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nullam accumsan lorem in dui. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Medium Section Praesent nonummy mi in odio. Nullam accumsan lorem in dui. Vestibulum turpis se..

1. Font * font-style : 폰트 형태 등을 지정 (이탤릭 등) * font-variant : 대문자↔소문자 * font-weight : 폰트 굵기 * font-size : 폰트 크기 * line-height : 폰트 높이값 * font-family : 폰트 글꼴 .p { font-style: normal; font-variant: normal; font-weight: normal; font-size: inherit; line-height: normal; font-family: inherit; } p {normal normal normal inherit/normal inherit} - 폰트사이즈와 line-height를 같이 쓸 때는 / 를 넣어줌 2. Background * backgrou..