Simple Is Best

이번 포스팅은 간단하게 보고 지나가겠습니다. 오늘의 Target 버튼을 클릭하면 '안녕하세요' 가 차례대로 0.5초의 간격을 두고 출력되는 애니메이션을 구현해보도록 하겠습니다. setTimeout 몇 초 후에 실행해주는 자바스크립트의 내장 함수입니다. 첫번째 인자에는 콜백함수 두번째 인자에는 몇 초 후에 실행할 건지에 대한 시간이 들어갑니다. (단위: 밀리초, 1000밀리초 -> 1초) setTimeout(()=>{ // 실행할 코드 }, 밀리초); 메인 코드 HTML 안녕하세요 눌러봐 ▶ 우리는 0.5 초마다 글씨를 출력해야 합니다. 따라서, setTimeout 을 반복문 내에서 동작시킵니다. 500(0.5초) , 1000(1초) , 1500(1.5초), 2000(2초) ..... 등으로 실행시킵니다...

이번 포스팅에서는 Hammer.js를 활용하여 터치 이미지 슬라이드 기능을 구현하는 방법에 대해서 알아보도록 하겠습니다. 우선 본 포스팅에서 목적으로 하는 이미지 슬라이드 터치 기능을 구현하기 위해서 이미지 슬라이더(Carousel) 에 대해서 알아야 합니다. 참고 부탁드립니다. https://daterminal.tistory.com/61 12. [JS/JQuery] Carousel (이미지 슬라이더) 안녕하세요~ 이번 포스팅에서는 Carousel 에 대해서 알아보도록 하겠습니다. Carousel 이란? : '회전목마' 라는 뜻으로 이미지 슬라이더 (버튼을 누르면 다음 사진으로 슬그머니 넘어가는) 를 칭합니 daterminal.tistory.com HTML 해당 HTML 에 대한 구조는 다음 이미지로 설..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

본 포스팅은 간단하게 학습하고 넘어가겠습니다. DOM은 Document Object Model 의 약자입니다. 자바스크립트가 HTML 에 대한 정보들(id, class, name, style)을 Object 자료형으로 정리해서 조작하는 것을 말합니다. ready 이벤트 리스너 ~~~~~~~~~~~~ ~~~~~~~~~~~~~~ ~~~~~~ 나를 조작해보시지! ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~ 결과는 어떻게 될까요? 물론 변경이 안됩니다. 왜냐하면 p태그를 읽기 전이라 p태그에 대한 DOM이 생성되지 않았습니다. 이 말은 즉, HTML은 위에서 부터 순차적으로 읽는데 위에서 이미 조작어를 만났는데 읽어들인 정보에는 #text에 대한 정보가 없습니다. 이를 해결 하기 위해서는 ready 이..

이번 포스팅에서는 자바스크립트에서 기본적으로 내장하고 있는 배열에 대한 메소드를 알아보도록 하겠습니다. .sort() ▶ sort 함수는 배열 내에 있는 요소들을 순차적으로 정렬하는 데에 사용합니다. ▶ sort 함수는 기존에 있는 배열을 아예 정렬시켜서 원래 배열의 근본적인 순서 자체를 변경시켜버립니다. ▶ sort 함수는 문자 자료형 정렬을 기본으로 합니다. 숫자 자료형 정렬하려면 콜백함수를 활용하여 조작해야 합니다. var 배열 = [1,2,3,4,5,20]; 배열.sort(); // [1, 2, 20, 3, 4, 5] console.log(배열); // [1, 2, 20, 3, 4, 5] ▷ sort 함수가 숫자자료형 정렬을 기본으로 한다면 분명 결과는 [1,2,3,4,5,20]; 으로 나와야 할..

지난 포스팅에서는 인터랙티브 폼을 제작함에 있어서 조건문을 통해서 해당 HTML 코드를 변수에 담아 append 하는 것에 대해서 알아보았습니다. 하지만 이런 방식은 하나의 option 이 추가 될 때 마다 하드코딩으로 직접 추가해주어야 하는 불편함이 있습니다. 이를 해결 할 수 있는 방안으로 반복문을 통해서 해결 해 보겠습니다. https://daterminal.tistory.com/67 17. [jQuery] Interactive Form - 하드코딩 ver. 이번 포스팅에서는 사용자가 주어진 Select 중에서 어떤 선택지를 눌렀을 때, 해당 option 에 대한 다른 Select 가 띄워지는 일종의 Animation? UI를 구현해 보도록 하겠습니다. HTML 상품선택 모자 셔츠 바 datermi..

이번 포스팅에서는 사용자가 주어진 Select 중에서 어떤 선택지를 눌렀을 때, 해당 option 에 대한 다른 Select 가 띄워지는 일종의 Animation? UI를 구현해 보도록 하겠습니다. HTML 상품선택 모자 셔츠 바지 사이즈 해당 코드는 Select와 Option 으로 구성되어 있습니다. 현재 상품선택 아래에 size-wrap 으로 구성되어 있는 div 영역은 CSS 상에서 숨김 처리 했습니다. 만약 사용자가 상품 품목을 선택하였다면 그 품목에 해당하는 Size를 띄워줘야 하기 때문입니다. CSS .size-wrap{ display : none; } JQuery 하지만 아래 코드는 Option들을 하드 코딩해야 하는 단점이 존재합니다. ▷ User 가 선택하는 값에 따라 다양한 조건문들을 ..