김하영

코딩과정: 코드펜 열기 스와이퍼 페이지네이션 커스텀 ... codepen.io [ 숫자대신 단어로 변경 ] index+1이 1부터 나오는 숫자인데 이것을 숫자 대신 단어가 나오도록 변경해야한다. -> 챗gpt 이용해보기 ㄴ 내가 시도한 결과 [ span태그 변경 ] span부분을 수정해줄건데 먼저 개발자 모드를 보면, 페이지네이션의 동그라미 부분이 span태그로 되어있다. 저 span부분을 div로 바꿔준다. 앞의 div를 바꾸면 보통은 닫는태그도 같이 변경이 되지만, 바뀌었는지 항상 확인해준다. 바꿔주고나서 다시 개발자모드를 살펴보면, html을 봤을 때 span태그에서 div로 바뀐 것을 확인할 수 있다. 위 코드를 변경함으로써 html의 태그 자체를 바꿔준다. [ 태그 추가 ] 태그를 추가하려면 일..

코딩과정: 코드펜 이동 스와이퍼 페이지네이션 커스텀 ... codepen.io 마지막으로 끝냈던 스와이퍼 코드를 가지고와서 페이지네이션 커스텀 시작. [ pagination css 가져오기 ] 검사를 눌러서 pagination을 잘 골라 선택하고 pagination의 css를 찾아서 복사해서 가지고온다. 가지고 온 코드는 상단에 적어주고 주석처리 해준다. [ pagination안에 동그라미 코드 가져오기 ] 개발자 모드에서 pagination의 화살표를 누르면 그 안에 있던 동그라미들이 나온다. html에 쓰여있는걸 보면 span태그로 되어있는데 저 태그를 우리가 바꿔줄 수 있다. 이미 업로드 된 상태이기 때문에 바꾸려면 지금 문서상의 html에서는 불가능하고, 스크립트를 사용해서 코드를 강제적으로 바꿔..

코딩과정: 코드펜 이동 반응형 swiper 구조 ... codepen.io [ 반응형 스와이퍼 코드찾기 ] 스와이퍼 홈페이지에 들어가서 API에 들어가면 반응형 스와이퍼를 찾을 수 있다. 약간 화면 크기같은 320, 480, 640 써져있는 코드를 보면 된다. 중괄호 짝을 찾기 어려우면 가운데부터 묶어준다. breakpoints 안으로 들어가있는 코드들을 가지고 가고, 위에 있는 1과 10은 그냥 있는 것이 아닌 항상 이유가 있기 때문에 같이 봐줘야한다. 그리고 중괄호/소괄호 있는 부분은 무시해준다. [ 겹치는 코드 확인 ] 저 부분들을 가져오기전에 우리가 써놓은 코드에는 이미 slidesperview와 spacebetween이 적혀있다. 저기 있는 숫자를 우리가 가져올 코드와 똑같이 변경해야 헷갈리지 ..

코딩과정: 코드펜 이동 스와이퍼 반응형 만들기 ... codepen.io 1. width: 30px 2. min-width: 30px 3. max-width: 30px 위의 3가지가 다 다른 의미를 가진다. 1번 width: 30px은 픽셀이 30개라는 뜻. 2번 min-width: 30px은 최소 30은 유지하라 라는 뜻. 처음엔 부모엘리먼트의 너비를 상속받지만 화면이 줄어들면 픽셀이 줄어들다가 30에 멈추고 더이상 줄지 않는다. 3번 max-width: 30px은 0부터 30까지 값이 유연하게 움직일 수 있고, 30이상으로 넘어가진 않는다는 뜻. 반응형으로 만들려면 고정픽셀이 아닌 %로 크기가 설정되어있어야한다. 이미 고정픽셀로 되어있는데 저 크기를 똑같이 %로 변경하는 건 불가능하다. 이럴때 사용하..

코딩 과정: 코드펜 이동 스와이퍼 버튼 커스텀 4단계 ... codepen.io [ 스와이퍼 아이콘 살펴보기 ] 스와이퍼 버튼 커스텀 3단계 코드로 이어서 진행-. 스와이퍼 버튼을 바꿔줄건데, 그 전에 어떤 코드로 되어있는지, 이미지로 되어있진 않은지 확인하기 위해서 우클릭-> 검사 눌러준다. 이미지가 아닌 after로 되어있다. css를 확인해보니 스와이퍼 라이브러리를 활용해서 아이콘을 바꾼걸 알 수 있다. 스와이퍼가 제공하는 아이콘만 사용해야하는건데 변경하기 위해서 아예 삭제 해줄것이다. [ after:: 삭제 ] 양쪽 화살표에 있는 after를 모두 삭제해주는 방법은? after에 display: none 처리해주면 된다. [ 아이콘 추가 ] 내가 원하는 아이콘이나 이미지를 html에 추가한다. 구..

[ 코딩과정 ] : 코드펜 열기 [ 버튼을 스와이퍼 구조와 겹치게 만들기 ] absolute로 띄우게 되면 좁거나, 공간이 남거나, 넘쳐서 잘리거나 하는 문제점이 발생할 수도 있다. 그래서 수정해가면서 코드를 진행하게 될텐데, 2단계 코드를 가지고와서 수정을 하는 것이 더 어렵고 복잡하기 때문에 1단계 코드를 가지고와서 진행할 것이다. absolute로 띄우는 것이기 때문에 굳이 left-box나 right-box가 필요하지 않다. 버튼을 어디로 옮길 것인가를 먼저 생각해봐야한다. 우리가 원하는 구조는 저런 모습이다. swiper구조 안에 끼워져있어야한다. 그런데 swiper구조 안에 있으면 안되는 이유는 hidden 속성값이 걸려있기 때문에 바깥으로 나가면 다 잘리게된다. 그래서 무조건 containe..

[ 코딩과정 ] : 코드펜 이동 스와이퍼 버튼 커스텀 2단계 ... codepen.io 1단계에서 마무리 된 코드를 이어서 2단계 진행. [ 버튼 구조안으로 넣어주기 ] 버튼을 양옆으로 올려줄 때, 번거로워서 귀찮아서 구조옆에 그냥 놔버리면 비율도 다 망가져버리게 된다. 그렇게 되지 않으려면 우리는 버튼구조를 1080안에, container안에 넣어줘야한다. 완전히 바깥쪽으로 나가는거랑, 구조 안에서 바깥으로 나가는건 완전히 다른것이다. 현재 container바깥쪽에 있는 버튼을 container구조 안으로 넣어주면 된다. 일단 html이 눈에 잘 보여지기 위해서 버튼구조를 바깥으로 빼주고, container안에 왼쪽버튼box, swiper box, 오른쪽버튼box를 각각 만들어줘야한다. 알아보기 쉽게 ..

[ 코딩과정 ] : 코드펜 열기 스와이퍼 버튼 커스텀 1단계 ... codepen.io 데모했던 코드 그대로 가지고와서 사용. 일단 모든 slider에 배경색을 넣어준다. 간격을 줄이기 위해서 자바스크립트를 살펴볼 것이다. 한 페이지에 나오는 slider 갯수 gap값 margin이나 gap으로 여백을 줘도 되긴 하지만 반응형에서는 안먹기 때문에 slidesPerView를 쓸 때는 spaceBetween을 같이 써준다고 기억하자. 화살표 바깥으로 빼기 먼저 원래 들어있는 코드들을 봐야하기 때문에 검사를 눌러서 전체적인 구조(.swiper)의 css를 가져온다. 중요한 점은 over-flow: hidden이 걸려있다는 이다. 그리고 화살표의 구조도 가져온다. after까지 다 가져온다. 구조를 잘 살펴보면..

[ 코딩과정 ] : 코드펜 열기 스와이퍼 마켓컬리 상품 리스트 제작 ... codepen.io 굉장히 다양한 종류의 스와이퍼가 있다. 전체 리스트가 확확 넘어가는 아이들도 있고, 사진 한장 한장씩 넘어가는 아이들도 있고, 화살표가 안에 들어가있는가하면, 아예 밖으로 나와있는 경우도 있다. [ 그리드 1080px인 구조 잡기 ] 이렇게 그리드를 잡아주고 container안에 swiper구조를 끼워넣어주면 된다. [ swiper 구조 끼우기 ] [ 구조 끼워넣었을 때 생기는 문제점 ] 문제점 높이가 이상하게 변화한다. ( 안에 있는 구조들이 다 커짐) 해결 swiper에 직접적으로 높이를 지정해준다. [ 스와이퍼 방향 가로로 변경 ] API에서 Name이 direction인 부분을 찾아 가로버전 복사 후 붙..

[ 코딩과정 ] : 코드펜 열기 스와이퍼 데모 사용해보기 ... codepen.io [ 스와이퍼 데모 사용해보기 ] 아까 사용한 구조에서 list는 다 삭제하고 slide-3까지만 남도록 만들어주고 배경색을 넣어준다. swiper에서 맨 밑으로 내리면 데모가 있는데 데모를 눌러준다. slides per view를 찾아준다. preview를 눌러서 ctrl + u를 누르면 페이지 소스보기가 뜨는데 아래로 내려보면 js에 쓰는 script가 있다. 괄호까지 모두 선택해서 js에 일단 복사해준다. 원래 있던 js를 살펴봤을 때 pagination에 el은 들어있지만 clickable은 없으니 복사해서 밑에 넣어준다. 위에 없는 저 두 식도 복사해서 위에 끼워준다. 식이 실행되려면 밑에 가져왔던 스크립트 식을 ..