$$config title: 배수연의 wiken keywords: - IT - 웹 모작, PO $$ # CONTACT ME
* 이름 : 배수연 * 번호 : 010-7424-9951 * 이메일 : qotndus9951@gmail.com * [포트폴리오](https://baesuyeon9951.github.io/suyeon_portfolio/) # 포트폴리오 아트메이트 완성 * [ARTMATE](https://baesuyeon9951.github.io/artmate_project/)
* [프로세스 페이지](https://baesuyeon9951.github.io/artmate_process/)
# 웹 모작 완성 * [온드림 소사이어티 웹모작 완성](https://baesuyeon9951.github.io/ondreamsociety_project/)
* [스타벅스 웹 모작 완성](https://baesuyeon9951.github.io/starbucks_project/)
* [카카오뱅크 웹 모작 완성](https://baesuyeon9951.github.io/kakaobank_230906/)
* [제주맥주 웹 모작 완성](https://baesuyeon9951.github.io/jeju_beer_project_23_08_25/)
# 포트폴리오 아트메이트 진행 * [포트폴리오-1 PC 와이어프레임](https://codepen.io/Baesuyeon9951/pen/dyayOeK) * [포트폴리오-1 MOBILE 와이어프레임](https://codepen.io/Baesuyeon9951/pen/eYxzmZz) * [기본세팅](https://codepen.io/Baesuyeon9951/pen/RwvaPLa) *** * [메인배너 스와이퍼](https://codepen.io/Baesuyeon9951/pen/zYeNOgW) * [메인배너 반응형 수정](https://codepen.io/Baesuyeon9951/pen/gOqgJqy) * [pc+모바일 합침](https://codepen.io/Baesuyeon9951/pen/abXJZBG) *** * [팝업창 구현](https://codepen.io/Baesuyeon9951/pen/RwvLxwB)
* [PC 탑바 구현](https://codepen.io/Baesuyeon9951/pen/yLZyJRP)
* [PC 탑바+메인 배너](https://codepen.io/Baesuyeon9951/pen/poGyJWV)
* [메인배너+탑바 반응형 수정](https://codepen.io/Baesuyeon9951/pen/VwgpaBx)
* [PC 검색 섹션 구현](https://codepen.io/Baesuyeon9951/pen/ExraNGX)
* [PC 인기 전시회 섹션 구현](https://codepen.io/Baesuyeon9951/pen/eYxNzzg)
* [PC 어떤 전시를 찾고있나요? 섹션 구현](https://codepen.io/Baesuyeon9951/pen/ExrVKWx)
* [PC 전시중인 작가 섹션 구현](https://codepen.io/Baesuyeon9951/pen/dyaYRGZ)
* [PC 이달의 아트메이트 PICK 구현](https://codepen.io/Baesuyeon9951/pen/NWoGBRm)
* [PC 아트메이트 구독하기 구현](https://codepen.io/Baesuyeon9951/pen/jOdEVXE)
* [PC 바텀바 구현](https://codepen.io/Baesuyeon9951/pen/qBgNZKG)
* [PC 합침](https://codepen.io/Baesuyeon9951/pen/wvNWGYd)
*** * [mobile 탑바 구현](https://codepen.io/Baesuyeon9951/pen/NWoGBjV)
* [mobile 메뉴 구현](https://codepen.io/Baesuyeon9951/pen/wvNGaLy)
* [mobile 메인배너 구현](https://codepen.io/Baesuyeon9951/pen/VwgjzKQ)
* [mobile 검색 섹션 구현](https://codepen.io/Baesuyeon9951/pen/vYbKVZo)
* [mobile 인기전시회 섹션 구현](https://codepen.io/Baesuyeon9951/pen/JjxKmwV)
* [mobile 전시중인 작가 섹션 구현](https://codepen.io/Baesuyeon9951/pen/QWYEJxZ) *
* [mobile 이달의 아트메이트 PICK 구현](https://codepen.io/Baesuyeon9951/pen/YzBVqoL)
* [mobile 11월 추천 전시회 섹션 구현](https://codepen.io/Baesuyeon9951/pen/ZEwpyQM)
* [mobile 아트메이트 구독하기 구현](https://codepen.io/Baesuyeon9951/pen/xxMgKaW)
* [아트메이트 전시회 서브페이지](https://codepen.io/Baesuyeon9951/pen/vYbJoEV) # 스타벅스 웹 모작 완성 홈페이지 * [스타벅스 웹 모작 완성](https://baesuyeon9951.github.io/starbucks_project/) # 스타벅스 반응형 웹 모작 과정 * [스타벅스 홈페이지](https://www.starbucks.co.kr/) *** * [기본세팅](https://codepen.io/Baesuyeon9951/pen/LYMaVvy) *** * [탑바 구현](https://codepen.io/Baesuyeon9951/pen/MWZxwdW) -[모바일 메뉴 구현](https://codepen.io/Baesuyeon9951/pen/VwqOBVM)
* [메인 탑 배너 구현](https://codepen.io/Baesuyeon9951/pen/LYMappj)
* [notice-line 배너 구현](https://codepen.io/Baesuyeon9951/pen/ZEVZMGB)
* [리워드 배너 구현](https://codepen.io/Baesuyeon9951/pen/yLGwgZV)
* [가을 원두 배너 구현](https://codepen.io/Baesuyeon9951/pen/bGOJNwV)
* [리저브 배너 구현](https://codepen.io/Baesuyeon9951/pen/ZEVPKgY)
* [Favorite 배너 구현](https://codepen.io/Baesuyeon9951/pen/RwEdZRz)
* [리저브 매거진 배너 구현](https://codepen.io/Baesuyeon9951/pen/RwEONEN)
* [스토어 배너 구현](https://codepen.io/Baesuyeon9951/pen/RwEOPGR)
* [footer 구현](https://codepen.io/Baesuyeon9951/pen/JjwwgKV)
* [스타벅스 합침](https://codepen.io/Baesuyeon9951/pen/oNJrEQK) # 온드림 소사이어티 웹 모작 완성 홈페이지 * [온드림 소사이어티 웹모작 완성](https://baesuyeon9951.github.io/ondreamsociety_project/) # 온드림 소사이어티 웹 모작 과정 * [온드림 소사이어티 웹사이트](https://www.ondreamsociety.org/main) --- * [온드림 탑바](https://codepen.io/Baesuyeon9951/pen/vYPXpOb?editors=1100)
* [온드림 메인섹션](https://codepen.io/Baesuyeon9951/pen/WNmrexB?editors=1010)
* [온드림 중간섹션](https://codepen.io/Baesuyeon9951/pen/dyrowyX)
* [온드림 푸터](https://codepen.io/Baesuyeon9951/pen/zYbKbWo?editors=1100)
* [온드림 스크롤트리거](https://codepen.io/Baesuyeon9951/pen/bGZdXjQ?editors=1010)
* [온드림 메인합침](https://codepen.io/Baesuyeon9951/pen/rNRxBqy?editors=1100)
* [온드림 모바일메뉴](https://codepen.io/Baesuyeon9951/pen/VwRKOvw?editors=1011) # 카카오뱅크 웹 모작 완성 홈페이지 * [카카오뱅크 웹 모작 완성 ](https://baesuyeon9951.github.io/kakaobank_230906/) # 카카오 뱅크 웹 모작 과정 * [카카오뱅크 홈페이지](https://kakaobank.com/) *** 1. [탑바 구현](https://codepen.io/Baesuyeon9951/pen/dywMWMm)
2. [3차메뉴까지 구현](https://codepen.io/Baesuyeon9951/pen/VwqeqBr)   - [3차메뉴 텍스트 완료](https://codepen.io/Baesuyeon9951/pen/XWoXGXP)
3. [섹션이미지](https://codepen.io/Baesuyeon9951/pen/PoXZLpG)   - [섹션이미지 텍스트 완료](https://codepen.io/Baesuyeon9951/pen/abPNJgp)
4. [배너박스 레이아웃 구현](https://codepen.io/Baesuyeon9951/pen/bGOpWdy)   - [배너박스 1 이미지,텍스트 구현](https://codepen.io/Baesuyeon9951/pen/NWeNgqb)   - [배너박스 세부조정](https://codepen.io/Baesuyeon9951/pen/PoXNjdW)   - [배너박스 이미지 애니메이션 ](https://codepen.io/Baesuyeon9951/pen/xxmVNKg)   - [애니메이션 속도감조절](https://codepen.io/Baesuyeon9951/pen/eYbZamJ)   --[cubic-bezier](https://cubic-bezier.com/)
5. [대출박스 달 만들기](https://codepen.io/Baesuyeon9951/pen/YzdWXjJ)   - [대출박스 별 만들기](https://codepen.io/Baesuyeon9951/pen/mdaEMer)   - [대출박스 텍스트 완성](https://codepen.io/Baesuyeon9951/pen/eYbBLyj)
6. [체크박스 텍스트,버튼](https://codepen.io/Baesuyeon9951/pen/GRPqvdM)   - [체크박스 이미지 슬라이더 연습](https://codepen.io/Baesuyeon9951/pen/ExGgRwy?editors=1100)
7. [슬릭 슬라이더](https://codepen.io/Baesuyeon9951/pen/WNLGEjX)   - [슬릭 슬라이더 좌우버튼](https://codepen.io/Baesuyeon9951/pen/vYvXJdK)   - [체크박스 슬릭 슬라이더 합치기](https://codepen.io/Baesuyeon9951/pen/yLGaojR)
8. [IT기술박스 텍스트](https://codepen.io/Baesuyeon9951/pen/yLGaERy)   - [IT기술박스 끝](https://codepen.io/Baesuyeon9951/pen/yLGaWbd)
9. [푸터 끝](https://codepen.io/Baesuyeon9951/pen/mdarZBg)
10. [전체 합치기](https://codepen.io/Baesuyeon9951/pen/xxmgbJB)

배수연의 포트폴리오