전체 글
-
인터렉티브 폼 (input,change이벤트, HTML동적생성, forEach반복문)JAVASCRIPT 2022. 2. 11. 17:05
폼의 기본 형태를 만들어보자. 상품선택 바지 셔츠 사이즈선택 95 100 105 쇼핑몰과 같은 곳에서 어떤 것을 선택하면 사이즈가 나오게 끔 하는 UI이다. 사이즈선택 div박스는 평소엔 안보여야 하므로 .size-select { display: none; } 먼저 display: none을 준다. 이제 자바스크립트로 select 인풋에서 셔츠라는 값이 선택되면 밑에 사이즈 선택 UI를 보여주게 짜야하는데 이럴때 쓰는 input이벤트 change이벤트가 있다. change이벤트는 select가 바뀔 때, input태그는 안에 값을 입력하고 focus를 잃을 때 발동된다. input이벤트는 select가 바뀔 때, input태그는 안에 하나하나 값이 입력될 때 마다 발동된다. $('#option1').on..
-
array와 object 자료형, 데이터바인딩JAVASCRIPT 2022. 2. 10. 15:51
어레이(array) var 어레이 = [ 'BMW', 520 ]; 보통 변수에 담아서 사용하며 ,대괄호 안에 자료를 집어넣고, 자료들을 콤마로 구분한다. 사용할 땐 console.log(어레이[1]); 이렇게 대괄호 안에 숫자를 넣어서 몇 번째 자료를 사용할건지 정한다. (0부터 시작) 오브젝트(object) var 오브젝트 = { brand : 'BMW', model : 520 }; 중괄호 안에 집어넣고, key : value 형태로 자료의 이름을 붙여 값과 저장해서 사용한다. 사용할 땐 console.log(오브젝트.brand); //또는 오브젝트.['brand'] 이렇게 .사용할key이름을 붙여 사용한다. 만약, 어레이와 오브젝트가 섞이면 var 자료 = [ { brand : 'BMW' }, { m..
-
이벤트 버블링 응용과 dataset 으로 탭기능 만들기JAVASCRIPT 2022. 2. 10. 14:51
저번에 사용한 html, css를 계속해서 이용해보자 Products Information Shipping 상품설명입니다. Product 상품정보입니다. Info 배송정보입니다. Shipping 여기서 이벤트 버블링을 써보면 ul태그에 이벤트리스너 하나만 달면 버블링현상 때문에 어떤 버튼을 누르던 버튼1->list 버튼2->list 이런 식으로 클릭이 된다. 코드를 짜보면 $('.list').on('click', function(e) { if ( e.target == document.querySelectorAll('.tab-button')[0] ){ 탭열기(0) }; if ( e.target == document.querySelectorAll('.tab-button')[1] ){ 탭열기(1) }; if ..
-
이벤트버블링, 이벤트함수JAVASCRIPT 2022. 2. 10. 14:20
이벤트버블링이란 이벤트가 발생하면 해당 요소의 상위요소까지 이벤트가 모두 실행되는 현상을 뜻한다. 예를 들면, 모달창 내용 이런 검정색 배경안에 흰색 배경이 있고, 그 안에 모달창 내용이 있을 때, 검정색 배경을 누르면 모달창이 꺼지게 코드를 짰다. $('.black-background').click(function(){ $('.black-background').hide() }); 하지만 실행해보면 흰색배경을 눌러도 모달창 내용을 눌러도 다 닫히는 버그가 생긴다. 이런걸 이벤트 버블링때문에 생기는 현상이라고 한다. 이유는 흰색배경을 눌러도 상위요소인 검정배경까지 눌리기 때문이다. 먼저, 이벤트 함수에 대해 알고 해결해보자. e.target; //실제 클릭한 요소 e.currentTarget; //지금 e..
-
Tab기능 만들기JAVASCRIPT 2022. 2. 10. 14:00
tab기능을 만들기전에 UI를 인강에서 먼저 만들어주셔서 기능개발만 해보자 Products Information Shipping 상품설명입니다. Product 상품정보입니다. Info 배송정보입니다. Shipping HTML을 간단히 설명하면 container안에 list들 상단 버튼들과 버튼을 누르면 나올 tab-content들을 div박스로 하나씩 만들어 놓았다. ul.list { list-style-type: none; margin: 0; padding: 0; border-bottom: 1px solid #ccc; } ul.list::after { content: ''; display: block; clear: both; } .tab-button { display: block; padding: 10..
-
스크롤 애니메이션JAVASCRIPT 2022. 2. 9. 16:36
자바스크립트로 스크롤시 변하는 애니메이션을 만들 수 있다. 기본적인 UI는 navbar을 만들어 놓고 css로 class를 미리 만들고 스크롤시 미리 만들어놓은 클래스를 부착하는 식으로 만들 수 있다. $(window).on('scroll',function(){ $('.nav-menu').addClass('nav-black'); }); $(window)라는 우리가 보는 화면을 scroll이라는 이벤트로 조정할 수 있다. 셀렉터에 미리 만들어놓은 nav-black이라는 클래스를 스크롤을 내리면 붙여주세요 할 수 있다. 어느정도 스크롤을 내리면 뭐하게 해주세요를 원할 수 있다. 이럴땐 먼저, 스크롤 높이를 측정해야 한다. $(window).scrollTop() 이렇게 써주면 스크롤이 위에서부터 얼마나 내려갔..
-
캐러셀(Carousel) 이미지슬라이드 만들기JAVASCRIPT 2022. 2. 9. 15:25
⟨ ⟩ 이런 식으로, 전체 컨테이너에 overflow: hidden 을 주고 슬라이드에 사용할 이미지를 HTML에 넣던, css에 배경으로 넣든 넣어서 슬라이드container엔 300vw라는 뷰포트의 300%를 주고 개별 슬라이드box엔 100vw를 주고 float로 가로배치하면 이렇게 되며, overflow에 의해 나머지 2개가 화면에서 보이지 않게 된다. 앞으로 뒤로 버튼을 만든 후, position: absolute를 이용해 right: 0; left: 0;을 각각 주어 양옆에 배치시킨다. .slide-box { width: 100vw; height: 600px; float: left; } .img1 { background-image: url(/img/product1-1.jpg); backgrou..
-
정규식JAVASCRIPT 2022. 2. 9. 14:26
정규식이란 문자를 검사하고 싶을 때 사용하는 식이다. 대표적으로 이메일이나 비밀번호를 입력할 때 몇 자리 이상 혹은 대문자 소문자 이렇게 문자들을 검사할 때 사용한다. 문자를 검사할 때 includes를 사용할 수 있는데, 'abc'.includes('a') 위 처럼, 사용하면 abc에 a라는 글자가 있냐 true, false로 알 수 있다. 하지만, 한글이 들어있나 영어가 들어있나 이렇게 구체적인 검사는 할 수 없다. 따라서 test란 함수와 정규식을 사용해서 검사한다. 기본적으로 정규식은 /abc/ 이렇게 슬래시 기호를 사용한다. 그리곤 test라는 함수로 이 문장에 abc라는 단어가 있나요 하고 물어볼 수 있다. /abc/.test('abcdef') 이렇게 사용하면 abcdef라는 문장에 abc가 ..