Gwni Lab GwniLab

setInterval이란? setInterval() 함수는 정해진 시간 간격으로 인자를 반복 실행하는 함수입니다. 반복문이랑 비슷하다고 할 수 있겠네요. 앞서 활용해본 이미지 슬라이드 예제처럼 몇 초에 한번씩 특정 코드를 반복해서 실행할 수 있습니다. 간단한 예를 들어서 봅시다. function test(){ console.log("javascript"); } setInterval(test, 2000); 이런식으로 "javascript"라는 문자를 2초 마다 반복 실행 시킬 수 있습니다. 함수를 정의하고 그 함수를 인터벌로 실행 시킬 수 있지만 처음부터 인터벌 함수를 작성하는것도 가능합니다. setInterval(() => { console.log("javascript"); }, 2000); 이런 식으로..

setInterval()을 이용한 이미지 슬라이드 - 페이드 효과 //setInteval //slider01 const sliderWrap = document.querySelector(".slider__wrap") const sliderImg = document.querySelector(".slider__img") const slider = document.querySelectorAll(".slider") let currentIndex = 0; //현재 보이는 이미지 let sliderCount = slider.length; //이미지 갯수 setInterval(() => { let nextIndex =(currentIndex + 1) % 5; //1 2 3 4 0 1 2 3 4 0... 5로 나눠서 나..

Splice 배열 메서드 : splice() 배열 요소를 다른 요소로 변경하는 메서드 입니다. 반환하는 값은 배열로 나타납니다. 문법은 splice(자르는 위치, 갯수, 요소1, 요소2,...)로 나타냅니다. 예제로 확인해봅시다. const arr1 = [1,2,3,4,5]; const result = arr1.splice(2); console.log(result); //3,4,5 console.log(arr1); //1,2 해당 result는 3,4,5 가 나왔는데요. arr1은 1,2만 나오도록 변경되었습니다. 문법의 인자값 중 자르는 위치만 설정해주어서 2 번째 위치에서 자르고난 뒤, 별 다른 명령이 없으면 나머지 값을 도출합니다. 순서를 왼쪽에서 오른쪽으로 읽습니다. 자르는 위치가 헷갈리기도 하는..

HTML Canvas 1. canvas는 html문서 내부에 그림을 그릴 수 있는 태그입니다. 우리가 div 태그 안에 이미지를 넣고 편집하듯이 사용한다고 생각하면 편하실거에요. 2. 캔버스를 선언하고 자바스크립트를 통해 그림을 그리고 애니메이션과 이벤트 처리 등을 구현할 수 있습니다. canvas 요소는 웹 페이지에 그래픽을 그려주는 쉽고 강력한 방법을 제공합니다. 이 요소는 그래픽을 위한 컨테이너(container) 역할만을 수행합니다. 따라서 실제로 그래픽을 그리기 위해서는 자바스크립트(JavaScript) 등의 스크립트 언어를 이용해야 합니다. # canvas 사용 방법 1. html 문서에 canvas 태그를 선언한다. 2. canvas 태그에 id 속성을 설정한다. 3. canvas 태그 내부..

const sreachBox = document.querySelectorAll(".search span"); //버튼 const cssList = document.querySelector(".list ul"); //속성 리스트 const cssCount = document.querySelector(".count"); //CSS 속성 갯수 //데이터 출력 const updateList = function(){ //데이터 출력 함수를 변수로 지정해서 재활용 하겠음. let listHTML = ''; //리스트 출력 초기값 설정. cssProperty.forEach((data,index)=>{ //forEach를 이용해서 데이터와 인덱스를 불러옴 listHTML += `${data.num}. ${data.na..

vintage Clothes 브룩스 브라더스 헤링본 자켓 드디어~~~ 지난번 브룩스 브라더스 포스팅에 이어서 글을 쓰게 되었습니다. 저도 브룩스 브라더스 자켓을 가지게 되었다구요!!~ 갸아악 울100% 헤링본 자켓.. 사실 어느 브랜드 이건 상관없이 꼭 한 벌 쯤 가지고 싶었는데요. 그 첫 번째 주자가 브룩스 브라더스가 되어서 얼마나 감동인지 몰라요! 여기서 헤링본이란? ‘청어의 뼈’라는 의미를 가진 헤링본(herringbone)은 팔자능이라고도 불리며 정식으로는 헤링본 트윌이라고 불린다. 헤링본은 물고기의 뼈 모양 혹은 화살의 오늬 같은 모양을 여러 개 짜 맞춘 무늬나 그런 모양이 되도록 짠 옷감을 나타낸다. 헤링본은 홈스펀·도니골 등과 함께 트위드에 속하는데 트위드는 클래식하고 미니멀한 여유로움을 느..

엔티티코드란? HTML 예약 문자나 특수 문자를 쓸 때 사용 합니다. 엔티티 코드를 사용하는 이유는 컴퓨터가 문서를 읽어들일 때 예약문자와 문서내용을 구분하지 못해 생기는 문제를 해결하기 위해서 입니다. 예를 들어 문서 내용에 꺽쇠 괄호(

const searchBox = document.querySelectorAll(".search span"); //조회수 버튼 const cssList = document.querySelector(".list ul"); //속성 리스트 const cssCount = document.querySelector(".count em"); //속성 갯수 //목록 보여주기 let listHTML =''; //HTML에 보여줄 리스트를 전역 변수로 지정. function upDataList(list){ //목록 보여주기 함수. listHTML =''; for(const data of list){ //어디에 있는 목록인지 listHTML += `${data.name} : ${data.desc} ${data.view}`;..