코딩파인애플

제이쿼리(JQuery) 라이브러리 - slick 슬라이더 활용하기 ※위에 코드 형식에 맞게 삽입만 해도 슬라이더 나옴 제이쿼리(JQuery) 라이브러리 - slick 슬라이더 사용가능 옵션 옵션만 잘 사용해도 시간 안쓰고 쉽게 만들수 있음 외우지 마셈 인터넷에 치면 다 나옴 화면상에 아래와 같이 div 구역이 나오고 좌우로 클릭버튼이 있어 div를 하나씩 넘길 수 있음 이거 못만들면 문제 있는거임 끝!

웹/Javascript 2023. 4. 21. 15:34

Key Code Reference 0 10 20 Caps Lock 30 40 Arrow Down 1 11 21 31 41 2 12 22 32 42 3 13 Enter 23 33 Page Up 43 4 14 24 34 Page Down 44 5 15 25 35 End 45 Insert 6 16 Shift 26 36 Home 46 Delete 7 17 Ctrl 27 Esc 37 Arrow Left 47 8 Backspace 18 Alt 28 38 Arrow Up 48 0 9 Tab 19 Pause/Break 29 39 Arrow Right 49 1 50 2 60 70 f 80 p 90 z 51 3 61 =+ 71 g 81 q 91 Windows 52 4 62 72 h 82 r 92 53 5 63 73 i 8..

웹/Javascript 2023. 4. 18. 09:56

class ReactButton extends React.Component { }; function ReactButton() { }; // 대부분 화살표 방식으로 사용 const ReactButton = () => {}; 리액트 구성방식 3가지 리액트에서 사용할 방식중에 클래식방식, 함수 방식, 애로우 방식이 있습니다. 실무 및 현재 가장 많이 사용되는 방법은 애로우 방식으로 3번째 => 를 이용한 방식을 대부분 채택하고 있습니다. 위의 코드가 실행되게 되면 아래의 오류가 발생하는데 현재는 리액트 18버전으로 업데이트 되어 이전 17버전을 사용할 수 없습니다. Warning: ReactDOM.render is no longer supported in React 18. Use createRoot inste..

웹/React 2023. 2. 19. 16:52

DOM(Document Object Model)과 Document.ready와 Window.onload의 차이에 대해서 알아보도록 하겠습니다. DOM(Document Object Model) DOM(Document Object Model) 즉, 돔이라고 일반적으로 말하며 돔(DOM)은 일반적으로 우리가 쉽게 접하는 인터넷 브라우저 안의 웹 페이지에 대한 인터페이스입니다. 기본적으로 여러 프로그램들이 페이지의 구조 및 이미지, 색상, 그리고 프로그램의 기본적은 틀의 구조를 구성하게 해주며 자신이 원하는 페이지의 구조와 이미지 등을 꾸며주는 CSS 즉, 스타일을 읽고 조작할 수 있도록 API를 제공하고 있습니다. DOM(Document Object Model) 객체를 이용한 웹페이지 생성 과정 웹 브라우저가..

웹/React 2023. 2. 18. 16:16

jQuery를 통해 내가 원하는 영역을 선택하고 선택한 영역안에 직접 작성한 HTML 구문 삽입하기 자바스크립트 영역에서 제이쿼리를 이용하여 selectDivId의 영역을 지정하고 .html()을 통해 내가 직접 작성한 HTML 구문을 삽입할 수 있다. .html()내부에 $('#choseForm') 이라는 id를 가진 html 구문을 삽입할 수 있으며 해당 영역에 .tmpl 이라는 템플릿을 통해 해당 영역에 객체를 전달하여 객체 내부에 들어있는 변수 값들을 {{= }}을 이용해 표현할 수 있다. 갑자기 의문이 드는 점이 생겨났습니다. 자주 보지 못했던 HTML 태그안에 data-변수명이 있었습니다. jQuery data-변수명 속성을 추가하는 data()함수 HTML5는 DOM 객체에 데이터를 저장해두..

웹/Spring 2023. 2. 17. 13:43

자바스크립트(JAVASCRIPT)로 HTML 코드 삽입하기 일반적으로 매번 document.getElementById()를 이용하요 요소를 선택하고 그 요소에 내가 원하는 HTML을 .innerHTML을 이용하여 입력하게 할 수 있습니다. 저도 위의 방식으로 간편하게 만들고 싶을때 innerHTML 방법을 이용합니다. let button = document.createElement('input'); input.innerHTML = 'text'; document.getElementById('selectTagId').appendChild(input); 다음으로 .appendChild() 방식으로 가장 일반적이고 유용하게 쓸 수 있는 함수입니다. document.createElement(' ')를 이용하여 내..

웹/Spring 2023. 2. 17. 10:50