퍼블리싱 아카이브

See the Pen Untitled by breeghty (@breeghty) on CodePen. sort : 문자를 정렬하는 메소드다. 숫자로 정렬하려면 위 예제와 같은 식을 적용해야 숫자 정렬이 가능하다. : 기존의 배열을 변형하는 메소드다. filter : 기존 배열의 값을 일정한 값을 기준으로 필터링 하여 새로운 배열을 반환한다. :기존의 배열을 변형하지 않는다. map : 기존의 배열 값을 한번에 변형시킬 수 있는 메소드다. : 데이터를 한꺼번에 변형시켜 보여줄 때 사용하면 편리하다.

더보기

데이터의 url과 get, post 통신방식 기재시 서버에서 데이터를 읽어오거나 원하는 데이터를 보낼 수 있다. -get 데이터를 받아서 읽고 싶을 때 -post 데이터를 보내고 싶을 때 이 경우, 매번 브라우저의 새로고침이 필요하다. ajax 기능을 이용하면 데이터를 주고 받을 때 브라우저를 새로고침하지 않을 수 있다. => 새로고침 없이 get, post 요청하는 기능이다. jQuery로 url에 get, post 요청하는 방법 jquery //ajax get $.get('https://~~') .done(function(data){ //성공시 console.log(data); //서버에서 받아온 데이터는 == data }).fail(function(){ //실패시 console.log("실패"); ..

See the Pen Untitled by breeghty (@breeghty) on CodePen. https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML insertAdjacentHTML은 (position, text)으로 이뤄진다. position은 beforebegin, afterbegin, beforeend, afterend만 사용가능하다. 예시는 아래를 참고. Element.insertAdjacentHTML() - Web API | MDN insertAdjacentHTML() 메서드는 HTML or XML 같은 특정 텍스트를 파싱하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가 한다. 이미 사용중인 el..

로직 - 이미지는 총 세개를 사용한다. - 이미지를 가로로 배열하고 각각 100vw 를 차지하게 한다. (총 300vw) - overflow: hidden을 해 주어 화면 밖으로 넘치는 이미지는 가린다. - 버튼을 누를 때마다 transform: translateX(-100vw)이런식으로 이미지 크기만큼 이동시킨다. - 이전버튼과 다음버튼의 경우 현재상태를 기억해야 하므로, num이라는 변수를 생성해 해당 이미지에 부여된 번호를 할당한다. num==1일 경우, 다음버튼을 누르면 2번 슬라이드 버튼을 누른것과 같은 동작이 실행되어야 함. Prev 1 2 3 Next

상품 목록에서 '모자'를 선택할 경우 사이즈 옵션이 나타나지 않다가, '셔츠'를 선택할 경우 사이즈 옵션이 나타나는 기능 구현하기. 상품선택 모자 셔츠 95 100

Card title 가격 : 70000 주문하기 Card title 가격 :70000 주문하기 Card title 가격 :70000 주문하기

로직 1. navbar의 시작 상태 CSS를 디자인한다. 2. on class가 붙었을 때 CSS를 디자인한다. 3. window.scrollY >0 일 때, on 클래스를 붙인다. 4. window.scrollY = 0 일 때, on 클래스를 뗀다. javascript+css .navbar{ position:fixed; top:0; left:0; z-index:5; width: 100%; height: 80px; transition: all 1s ease; } .navbar.on{ height: 50px; transition: all 1s ease; } .navbar-brand{ font-size: 30px; transition: all 1s ease; } .navbar-brand.on{ font-si..

window.addEventListener('scroll',function(){ //스크롤 할 때마다 이벤트 실행 console.log(window.scrollY); //유저가 스크롤 바를 얼마나 내렸는지 표시 // console.log(window.pageYOffset);(호환성 보완) console.log(window.scrollX); //가로스크롤 표시 window.scrollTo(0,100); //강제스크롤(window.scrollTo(x,y)) 해당 위치로 window.scrollBy(0,100); //현재 위치에서 y축으로 100px 스크롤 하기.(현위치 기준 이동) }); jquery $(window).on('scroll',function(){ $(window).scrollTop(); //현..

버튼 로그인하세요 전송 닫기