profile
예비 개발자의 공부기록장
post-thumbnail

PG 공부

PG(Payment Gateway)는 신용카드사와 가맹점 계약을 체결하는 것이 곤란한 중소 쇼핑몰을 대신해 카드사와 대표 가맹점 계약을 맺고 신용카드 결제 및 지불을 대행한 뒤 하부 쇼핑몰에서 수수료를 받는 업체다.VAN은 신용카드사와 오프라인 매장을 이어주는 중간다리

2022년 4월 22일
·
0개의 댓글

PG

5/2관심기업 등록갤럭시아머니트리(주)효성 계열사 전자결제(PG) 영업 & 영업 관리 담당자 모집 바로가기채용시 마감페이레터(주)개발, 영업, 운영, 기획부문 모집 바로가기다날 결제사업 운영지원 부문 신입/경력사원 모집 바로가기

2022년 4월 22일
·
0개의 댓글
post-thumbnail

로그인 구현하기

프롬프트(prompt) 대화상자를 이용해 간이 로그인 창을 구현해보세요.사용자가 "Admin"를 입력하면 비밀번호를 물어보는 프롬프트 대화상자를 띄워주세요. 이때 아무런 입력도 하지 않거나 Esc를 누르면 "취소되었습니다."라는 메시지를 보여주세요. 틀린 비밀번호를 입

2022년 4월 6일
·
0개의 댓글
post-thumbnail

스크롤 위치에 따라 변하는 애니메이션

깨끗한 HTML 파일에 jQuery와 CSS 파일 하나를 첨부해준 후이미지 3개를 다음과 같이 배치합니다.겁나 긴 배경에 카드를 세로로 3개 배치했고, position : sticky를 이용해서 스크롤시 화면에 고정되게 만들었습니다. 스크롤시 opacity가 점점 줄어

2022년 3월 31일
·
0개의 댓글

브라우저의 로컬 스토리지

크롬 개발자도구의 Application 탭 들어가보면 구경가능합니다. Local Storage / Session Storage (key : value 형태로 문자, 숫자 데이터 저장가능)Indexed DB (크고 많은 구조화된 데이터를 DB처럼 저장가능, 문법더러움)C

2022년 3월 31일
·
0개의 댓글

버튼누르면 가격순/문자역순으로 정렬, 가격 이하 정렬

이렇게 .sort 뒤에 붙이는건 맞는데콜백함수 안의 식이 좀 달라져야할 것 같습니다. 왜냐면 products는 { }, { }, { } 이렇게 생겼습니다.그래서 a, b는 지금 { }, { } 이건데 object 두개를 a - b 이렇게 빼봤자 음수나 양수가 나오지

2022년 3월 30일
·
0개의 댓글

Ajax : 상품 더보기 버튼 만들기

버튼하나 만들고 그거 누르면 상품을 더 가져와봅시다.https://codingapple1.github.io/js/more1.json 여기로 GET요청하면 상품 3개 데이터를 보내줍니다.버튼누르면 상품데이터 가져와서 콘솔창에 출력해보십시오.html에 버튼하나 만

2022년 3월 30일
·
0개의 댓글

Select 인풋/자바스크립트로 html 생성하는 법

Select 선택하면 다른 select 나오게 하기 셔츠 선택시 사이즈 나오게 하기

2022년 3월 30일
·
0개의 댓글

데이터바인딩

데이터바인딩 하기

2022년 3월 29일
·
0개의 댓글

모달창 배경을 누르면 닫히는 기능

▲ 모달창 HTML은 대충 이런 식으로 코드가 짜여있고모달창 오픈할 때 show-modal 클래스명을 넣어서 오픈했다면 그럼 검은 배경 눌렀을 때 모달창이 잘 닫힙니다. 근데 이상한 점이 하나 있습니다.검은배경 뿐만 아니라 흰배경, input, 글자 등 모달창 내부의

2022년 3월 29일
·
0개의 댓글
post-thumbnail

탭기능

탭의 0번 버튼 누르면 무슨 일이 일어나야합니까?버튼0 누르면 버튼0에 orange 클래스명 부착박스0에 show 클래스명 부착이러면 끝인 것 같은데 근데 그것만 짜면... ▲ 버튼0 눌렀을 때 이렇게 보일 것 같군요 그래서 기존에 붙어있던 orange, show

2022년 3월 29일
·
0개의 댓글
post-thumbnail

스크롤바

스크롤바를 조작하면 scroll 이벤트가 발생합니다.그래서 scroll 이벤트리스너를 전체 페이지에 달면전체 페이지를 스크롤할 때마다 원하는 코드를 실행할 수 있습니다.진짜 스크롤바 만질 때 마다 '안녕' 출력되나 봅시다. 참고로 window는 그냥 전체 페이지를 의미

2022년 3월 29일
·
0개의 댓글

네비게이션 바

\*\* css 에 show라는 style이 block으로 되어있음.

2022년 3월 29일
·
0개의 댓글
post-thumbnail

캐러셀 (이미지 슬라이드) 만들기

슬라이드되는 UI들을 캐러셀이라고 합니다.one-way 애니메이션들어간 UI 만드는 법은애니메이션 시작 전 화면 만들기애니메이션 종료 후 화면 만들기언제 종료화면으로 변할지 JS 코드짜기transition 추가하기 ▲ 사진 3개를 가로로 길게 배치해놔야하지않을까요?그리

2022년 3월 29일
·
0개의 댓글

정규식으로 이메일형식 검증해보기

abcdef라는 문자에 abc라는 단어가 있는지 검사해보도록 합시다. /abc/.test('abcdef')/정규식/.test(정규식으로 검사해볼문자) 쓰면 됩니다.진짜 들어있으면 true를 남기고 없으면 false를 남겨줍니다. 기호를 이용해서 문자 범위를 지정할

2022년 3월 29일
·
0개의 댓글

js 타이머

ex) 5초 후 div 제거위처럼 쓰면 1초 마다 콘솔창에 '안녕'이 뜹니다.

2022년 3월 29일
·
0개의 댓글

jQuery

주의할 점은 jQuery 스크립트가 자바스크립트의 스크립트 태그보다 위에 위치해야 한다는 것이다. 자바스크립트의 코드 내에서 jQuery를 사용하므로 만약 jQuery가 로딩되지 않은 상태에서 자바스크립트를 불러온다면 자바스크립트의 코드가 제대로 작동하지 않는다. 방법

2022년 3월 28일
·
0개의 댓글
post-thumbnail

js

document.getElementById('???').???='???';ex) 폰트 색상을 바꿀때document.getElementById('hello').style.color = 'green';작명 할 땐 띄어쓰기 X자바스크립트는 html 조작하는 언어라고 했습니다

2022년 3월 28일
·
0개의 댓글
post-thumbnail

Sass, Scss / variables / @mixin / @function

많은 걸 일일히 바꾸지 않고 변수를 만들어서 변경가능자주쓰는 코드 집합.위 예제는 300px 넘어갈경우 말줄임표로 표현되게 짜놓은 것을 mixin에 저장해 놓은 후,p 태그에 저장한 mixin을 불러왔다.코드를 일일히 복사하지 않고 사용할 수 있다.

2022년 3월 16일
·
0개의 댓글
post-thumbnail

CSS 더 잘 활용하기

box-sizing을 먼저 설정하는 것이 좋다.이유는 내가 설정한 가로세로 길이 값이 패딩 보더 마진 등을 수정함으로써 달라지게 되는데, box-sizing를 먼저 설정하게 된다면 이 길이 내에서 조절되기때문에 수정하더라도 내가 정한 크기에 벗어나지 않기때문이다.ex)

2022년 3월 15일
·
0개의 댓글