yoon's Devlog

부트스트랩이란, 웹페이지 디자인을 지원하기 위해 개발된 CSS와 JavaScript 라이브러리를 조합하여 만들어진 프레임워크이다. 부트스트랩을 활용하면 쉽고 빠르게 코드 복사로 완성도 있는 웹 디자인을 할 수 있다. 사용 방법을 살펴보자. 1. html 파일 만들기 2. 부트스트랩 홈페이지 접속 https://getbootstrap.com/docs/5.1/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. getb..

setInterval() 메서드는 일정시간을 주기로 반복 작업을 하기 위한 메서드이다. setTimeout()과 다른점은, setTimeout은 일정 시간이 지났을 때 한번만 호출하지만, setInterval은 일정 시간마다 해당 함수를 반복 호출한다는 점이다. setInverval의 사용법은 다음과 같다. setInverval(function(){},delay) //(호출할 함수, 지연시간) 예제를 살펴보자. 다음 예제는 setInterval()을 활용하여 버튼 클릭 시 1초마다 숫자가 증가하도록 구현한 예제이다. 일정시간 주기로 반복 작업하기 숫자 세기 0

setTimeout은 일정 시간을 지연시켜 어떤 작업을 수행하기 위한 메서드이다. 사용법은 다음과 같다. setTimeout(function(){}, delay) //(호출할 함수, 지연시간) 지연시간 단위는 1/1000초이다. 다음 예제는 setTimeout을 활용하여 5초 이후에 알림창을 띄우는 예제이다. 일정시간 지연 시켜서 어떤 작업 수행하기 5초 이후에 알림띄우기

1. 자바스크립트에서 문자열을 만드는 3가지 방법 1. ' ' 활용 2. " " 활용 3. ` ` 활용 1, 2번은 다른 언어를 다루며 알고 있던 부분이지만 3번 backtick에 대해서는 이번에 알게 되었다. backtick을 사용하면 개행문자를 넣은 것처럼 문자열을 출력할 수 있다. 예제를 살펴보자. 예제 javascript에서 문자열을 만드는 세가지 방법 결과1 1, 2번에서는 불가하지만 backtick 사용 시 개행문자를 넣은 효과를 줄 수 있음을 확인할 수 있다. 2. JavaScript에서 문자열을 이어붙이는 두가지 방법 자바스크립트에서 문자열을 이어붙이는 방법에는 다음의 두가지 방법이 있다. 1. 연결연산자 '+' 사용 2. ${변수명} 사용 2번의 사용법은 다음과 같다. let info2 ..

이전 게시물에서 insertAdjacentElement, insertAdjacentHTML과 append를 비교하며 간략하게 사용법에 대해 알아보았다. 정확한 사용법을 알아보기 위해 공식 문서를 살펴보자. https://developer.mozilla.org/en-US/docs/Web/API/Element/append Element.append() - Web APIs | MDN The Element.append() method inserts a set of Node objects or DOMString objects after the last child of the Element. DOMString objects are inserted as equivalent Text nodes. developer.mo..

본 포스팅의 핵심은 insertAdjacentHTML, insertAdjacentElement, append의 매개변수를 정확히 알고 사용법을 구별하는 것이다. insertAdjacentHTML() 메서드는 HTML 같은 특정 텍스트를 파싱하고, 특정 위치에 원하는 HTML요소를 추가한다. 사용법은 다음과 같다. element.insertAdjacentHTML(position,text); position에는 앞서 배운 다음의 것들만 사용 가능하다. beforebegin (element의 부모가 존재해야 함) afterbegin beforeend afterend (element의 부모가 존재해야 함) 아래 예제는 append, insertAdjacentElement, insertAdjacentHTML의 활..

innerHTML은 HTML의 요소로 삽입하는 방법 중 하나이다. 다음 예제를 살펴보자. 예제 innerText vs innerHTML hello 추가하기 결과 코드를 뜯어 살펴보자. 1) innerText와 innerHTML의 비교 //대입한 문자열을 html 형식으로 해석해서 자식 요소로 두기 document.querySelector("#one").innerText = "daum"; //HTML 속성으로 들어감 document.querySelector("#two").innerHTML = "daum"; 이 부분에서의 결과물은 다음과 같다. 보다시피 innerText로 한 것은 문자열로, innerHTML로 한 것은 링크로 나타나는 모습이다. 여기서, innerHTML로 하면 "

앞의 게시물에서 다뤘던 CSS 부분을 보도록 하겠다. 이전 예제 제거할 p 요소를 클릭하세요. p 요소 추가하기 p1 p2 p3 p4 p5 여기서 주의깊게 볼 부분은 이 부분이다. 위 예제의 결과는 다음과 같다. 우선 커서부터 살펴보자. 1. cursor 그동안 예제를 풀며 click에 대한 이벤트 리스너를 많이 활용했었는데 커서 변경을 한번도 하지 않았었다. 하지만 실제 웹페이지에서는 클릭 위치를 커서 변경을 통해 많이 보여준다. 위 에제에서 커서 모양이 손가락 모양으로 바뀐 것을 볼 수 있다. 따라서 cursor: pointer 가 위 모양의 커서로 만들어줌을 확인할 수 있다. 다양한 커서 모양과 활용은 이곳에서 확인하면 좋을 것 같다. http://www.homejjang.com/09/cursor...