728x90

19

스크롤 내릴 때 애니매이션 효과 넣기 자바스크립트

https://kevink1113.tistory.com/entry/%EC%8A%A4%ED%81%AC%EB%A1%A4%EC%97%90-%EB%94%B0%EB%9D%BC-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%ED%9A%A8%EA%B3%BC-%EC%A0%81%EC%9A%A9%ED%95%B4%EC%A3%BC%EB%8A%94-%EA%B0%84%EB%8B%A8-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-AOS 스크롤에 따라 애니메이션 효과 적용해주는 간단 라이브러리: AOS 1. AOS(Animate On Scroll) 라이브러리 소개 가끔 웹서핑을 하다 보면 스크롤 위치에 따라 글자, 사진 등의 컨텐츠가 나타나는 효과가 적용된 ..

DataTables그리드 데이터테이블 그리드 라이브러리

Grid 라이브러리-Datatables 사용법/예제 https://saintsilver.github.io/datatables-ex/ DataTables Examples saintsilver.github.io DEMO : https://saintsilver.github.io/datatables-ex/ 기본 사용 공식홈페이지에 들어가시면 메인페이지에 등장합니다. 윗 스크린샷에서 설명이 생략된 #myTable 은 아래와 같은 구조로 만드시면 되고, 서버사이드로 데이터를 처리하여 데이터테이블을 만들 시 를 선언하시고 실제로 값을 넣으시면 됩니다. 저는 ajax로 처리할 예정이라서 만 사용했습니다. 공식홈페이지에선 데이터가 100,000건 이상이면 서버사이드로 처리하라고 권장하고 있습니다. 컬럼1 컬럼2 컬럼3 ..

자바스크립트 무료 그리드 라이브러리 정보

https://sshbug.tistory.com/973 [Javascript] 무료 그리드 라이브러리 정보 - SlickGrid : 대용량 데이터에 적합 https://github.com/6pac/SlickGrid GitHub - 6pac/SlickGrid: A lightning fast JavaScript grid/spreadsheet A lightning fast JavaScript grid/spreadsheet. Contribute to 6pac/SlickGrid development by creating an accoun sshbug.tistory.com - ToastUi Grid https://ui.toast.com/tui-grid TOAST UI :: Make Your Web Delicious..

HTML <option> 태그

정의 및 특징 태그는 옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)에서 사용되는 하나의 옵션을 정의할 때 사용합니다. 이러한 요소는 요소나 요소 내부에만 위치할 수 있습니다. 요소는 아무런 속성도 명시하지 않은 채 사용할 수 있지만, 서버로 제출되는 값을 명시하는 value 속성은 명시하는 것이 일반적입니다. 만약 옵션의 개수가 많다면, 요소를 사용하여 관련된 옵션들을 좀 더 보기 좋게 서로 묶어 줄 수 있습니다. (정의 및 특징 태그의 value 속성은 해당 옵션이 선택될 때 서버로 제출되는 값을 명시합니다. 태그와 태그 사이의 텍스트는 단지 브라우저가 드롭다운 리스트에 표시할 내용이며, value 속성값은 폼을 제출할 때 서버로 보내지는 값입니다. 만약 value 속성이 명시되지 ..

웹/CSS,HTML 2023.08.01

[제이쿼리]$(document).ready(function(){});

jQuery를 사용한 모든 웹페이지는 다음 코드로 시작합니다. $(document).ready()는 문서가 준비되면 매개변수로 넣은 콜백 함수를 실행하라는 의미입니다. jQuery 이벤트 메서드 중 하나입니다. 이 메서드는 비슷한 기능을 수행합니다. 고전 이벤트 모델은 한 번에 하나의 이벤트만 연결할 수 있습니다. 반면에 jQuery의 이벤트 메서드는 표준 이벤트 모델이나 인터넷 익스플로러 이벤트 모델과 마찬가지로 이벤트로 여러개의 함수를 연결할 수 있습니다. 아래의 예제는 실행하게되면 문서가 준비되는 순간 경고창 세 개가 연달아 표시됩니다. $(document).ready() 메서드는 굉장히 많이 사용되므로 jQuery에서는 간단하게 사용할 수 있는 형태를 제공합니다. jQuery - $(documen..

querySelector(), querySelectorAll()

보통 HTML요소를 선택한다면 주로 jquery라이브러리를 사용해서 $("")를 사용하여 선택하는 경우가 많습니다. 이번 포스팅에서는 jquery를 사용하지 않고 자바스크립트에서 HTML요소를 선택할 때 사용하는 함수 querySelector(), querySelectorAll()에 대해서 알아보겠습니다. querySelector() - HTML의 요소를 선택할 때 사용하며 Id, Name, Class, HTML태그 등 다양한 요소들을 선택할 수 있습니다. - 이름이 같을 경우 최상단의 요소를 선택합니다. - 요소를 선택하여 Value를 변경하거나 Style을 변경하는 등 다양한 동작들을 수행할 수 있습니다. - 사용 예제 1. HTML요소 선택(id, class, name) 및 value입력 결과 화면..

css 활용한 반응형 웹

반응형 웹 menu1 menu2 menu3 menu4 menu5 반응형 웹은 미디어쿼리를 사용하여 스타일링 합니다. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus qui ducimus dignissimos quisquam, error quos hic quis, o dit molestias, vitae ex pariatur. Laborum commodi, asperiores officia optio sapiente nesciunt amet. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde laborum doloremque, fuga necessitatibus ra..

웹/CSS,HTML 2022.12.25

부트스트랩(BootStrap) 그리드시스템(grid), 콤포넌트(component), 자바스크립트(JavaScripts)

CSS · 부트스트랩 (bootstrapk.com) 반응형웹 확인 가능 ↓ CSS · 부트스트랩 에 약간의 패딩과 수평 구분선이 있는 기본 스타일의 .table 클래스를 추가하세요. 그건 매우 불필요해 보이지만, 캘린더와 날짜선택기 같은 플러그인들을 위해 테이블이 널리 사용되는 것을 감 bootstrapk.com 콤포넌트 · 부트스트랩 (bootstrapk.com) 콤포넌트 · 부트스트랩 Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam..

728x90