본문 바로가기

✨ Front-end67

[JavaScript] 상품 리스트 만들어보기 Bootstrap을 이용해 상품을 만들어 버튼을 눌리면 하나 하나씩 볼 수 있도록 만들어보았다. HTML HTML 삽입 미리보기할 수 없는 소스 CSS HTML 삽입 미리보기할 수 없는 소스 JS HTML 삽입 미리보기할 수 없는 소스 먼저 tab-button을 다 찾아준다. 이 상태에선 아무거나 눌러도 코드가 실행된다. 그래서 바로 뒤에 .eq(0) 을 추가해준다. 이것은 querySelectorALL('.tab-button')[0] 이거랑 비슷하다. 이 코드를 반복문을 돌려서 풀려고 했으나, 제대로 작동하지 않아서 그냥 어떻게 쓰는지만 알아두었다. 아직까지 js를 쓰는게 많이 불편하다... See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen. 2023. 2. 20.
[JavaScript] jQuery 이용해서 이미지 슬라이드 만들기 (캐러셀) HTML HTML 삽입 미리보기할 수 없는 소스 CSS HTML 삽입 미리보기할 수 없는 소스 JS HTML 삽입 미리보기할 수 없는 소스 jQuery를 이용해서 if 대신 while을 넣어보았다. 그러자 갑자기 무한로딩에 걸려 어쩔수 없이 while을 쓰지 못해 코드가 굉장히 길어졌는데, 해결 방법에 대해 더 연구해보아야겠다. See the Pen Untitled by park (@johong) on CodePen. 2023. 2. 19.
[JavaScript] 타이머 예제 setInterval, clearInterval, timeOut Timeout 함수 setTimeout 은 ~초후 코드를 실행하는 것이다. 즉, 일정 시간이 지난 후 함수가 한번 실행 된다. clearTimeout은 setTimeout 함수를 취소한다. Interval 함수 setInterval 은 매 일정시간마다 함수가 계속 실행 된다. clearInterval 은 setInterval 함수에 의해 실행된 반복 작업을 종료한다. 코드의 예는 이렇다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 5초가 지나면 알람박스를 사라지는 기능을 만들어보았다. HTML HTML 삽입 미리보기할 수 없는 소스 CSS HTML 삽입 미리보기할 수 없는 소스 JS HTML 삽입 미리보기할 수 없는 소스 See the Pen Untitled by pa.. 2023. 2. 19.
[JavaScript] if문으로 HTML 배경 Dark, White모드 만들기 이번에는 자바스크립트를 이용해서 모드 변경을 해보았다. HTML HTML 삽입 미리보기할 수 없는 소스 CSS HTML 삽입 미리보기할 수 없는 소스 2023. 2. 19.