Bible, Lee, Data
Faith, software, data, and everyday life.
EngineeringAll posts
[Git] GitHub Pages: Portfolio Hosting
🍁Portfolio Hosting템플릿 다운로드https://bootstrapmade.com/demo/Append/ Append Bootstrap Template Demo bootstrapmade.com https://html5up.net/ HTML5 UPResponsive HTML5 and CSS3 site templates designed by @ajlkn and released under the Creative Commons license.html5up.net내가 원하는 포트폴리오를 만든다.또는 템플릿을 사용하여 포트폴리오를 구성한다. 포트폴리오 폴더 생성포트폴리오 폴더를 생성한다. 깃허브 리포지토리 생성깃허브에서 포트폴리오 리포지토리를 생성한다. 깃허브 clone$ git clone https:..
[jQuery] Effect Function: 전용 / 범용 이벤트 함수
🍁전용 함수와 범용 함수전용 이벤트 함수객체.이벤트함수(콜백함수)$('#btn1').click(function() { alert();});위 코드는 클릭 이벤트만을 처리하는 함수이다.이렇게 하나의 이벤트만을 처리하는 함수를 전용 이벤트 함수라고 한다. 범용 이벤트 함수객체.on(이벤트명, 콜백함수)$('#btn2').on('click', function() { alert();})on은 범용 함수로, 이벤트명을 입력해야 한다.이벤트명에 따라서 다양한 이벤트를 처리하는 함수를 범용 이벤트 함수라고 한다.반대로 객체의 이벤트를 해제할 때에는 off 함수를 사용한다. 🍁Effect Function1. hide(time), show(time), toggle(time)2. fadeOut(time), ..
[jQuery] jQuery() 함수
🍁jQuery() 함수jQuery() 함수는 CSS 선택자 또는 다른 표현을 사용해서 태그를 검색한다. 기본 코드 jQuery() 함수 상자1 상자2 상자3 상자4 상자5 Array.from()//forEach > new Array()에서 동작//list.forEach(box => box.style.color = 'yellow'); //HTMLCollection (유사 배열)Array.from(list).forEach(box => box.style.color = 'tomato');자바스크립트는 구조상 진짜 배열이 없다고 했다. 하지만 new Array()로 만들어진 것을 진짜 배열로 취급한다.위에서 선언한 list는 배열이 아닌 HTMLCol..
[jQuery] jQuery의 시작: JavaScript와 jQuery 연결
🍁 jQueryjQuery란?jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.jQuery는 경량화된 JavaSc..
[JavaScript] Arrow Function (Lambda)
🍁Arrow Function 자바스크립트의 화살표 함수(Arrow Function)는 자바에서의 람다라고 생각하면 된다. 자바에서 람다는 익명 객체의 추상 메서드를 표현하는 기술이었다면, 자바스크립트의 화살표 함수는 익명 함수를 표현하는 기술이다. 자바스크립트의 함수는 객체에 종속되지 않아도 사용할 수 있으므로 자바보다 좀 더 간단하게 사용한다. [Java] 람다식 (Lambda Expression) 💡람다식 람다식 (Lambda Expression)은 기존에 하던 작업을 편리하고 간결하게 만들어주는 기술로, 함수형 프로그래밍 개념을 자바에 도입한 것이다. 주로 컬렉션 조작을 위해 스트림(Stream)과 함께 isaac-christian.tistory.com 람다에 대해서는 위 글을 참고한다. 1. 함수..
[JavaScript] Constructor Function (생성자 함수)
🍁Constructor Function 객체와 멤버 변수 생성 const obj = new Object(); const obj = {}; 첫 번째 방법 const o1 = new Object(); //첫 번째 방법 o1.name = 'Isaac'; o1.hello = function() { console.log('hello'); }; 첫 번째 방법으로는 name 멤버 변수와 hello 멤버 메서드를 위와 같이 만든다. 두 번째 방법 const o2 = {}; //두 번째 방법 o2.name = 'Sopia'; o2.hello = function() { console.log('hello'); } 두 번째 방법은 '{}' 만으로 객체를 만들어서 간편하다 보니 의존도가 높다. 첫 번째든 두 번째든 name이라..
[JavaScript] CSS 조작: transtion 구현
🍁transition 구현 타이머를 사용해 CSS에서 transition을 구현한 것처럼 자바스크립트에서도 비슷한 효과를 줄 수 있다. 자바스크립트는 제어를 할 수 있다는 점에서 CSS의 transiton과 차이가 있다. [CSS] transition (전환) 🍁transition transition은 객체의 속성(상태) 값이 변화되는 과정을 시간 순서대로 보여주는 애니메이션 속성이다. 이 작업은 본래 JavaScript에서나 할 수 있는 것이었다. 하지만 지금은 CSS에서 간단하 isaac-christian.tistory.com [CSS] animation (애니메이션) 🍁animation CSS 객체의 움직임을 단순하게 표현할 때에는 transition을 사용한다. animation은 그보다 더 나아..
[JavaScript] CSS 조작: style property, class
🍁CSS 조작 자바스크립트로 CSS를 조작하는 방법에는 직접적인 방법과 간접적인 방법이 있다. 모든 태그는 인라인 스타일 시트의 style 속성을 제공하며, 자바스크립트에서도 이러한 style 프로퍼티를 제공한다. style 프로퍼티로 CSS를 조작하는 직접적인 방법과 class로 CSS를 조작하는 간접적인 방법이 있다. style 프로퍼티로 조작 기본 코드 CSS 상자 BOM에서 구현 btn1.addEventListener('click', function() { box1.style = 'color: cornflowerblue'; }) btn1.addEventListener('click', function() { box1.style = 'color: cornflowerblue; font-size: 2re..
