📁 올리브영 온라인몰 👉 사이트명 : 올리브영 온라인몰 👉 작업기간 : PC버전 7일, 모바일 1.5일 👉 사용언어 : HTML5, CSS3, Jquery, JSON 👉 라이브러리 : Swiper 👉 분류 : PC 적응형, Mobile 적응형 웹사이트 👉 URL : PC > https://codenablog.github.io/Oliveyoung-pc/ Mobile > https://codenablog.github.io/Oliveyoung-mo/ ✨ POINT ✔️ Fetch 비동기 통신을 활용해 JSON 파일의 정보 불러오기 ✔️ Filter로 원하는 값의 데이터를 분류 ✔️ 3단 카테고리 구성 ✔️ 다른상품 추천, 다른 키워드 더보기 버튼 클릭시 새로운 정보 불러오기 ✔️ Swiper 커스텀 - 내장 ..

📁 엔터프라이즈 블록체인 👉 사이트명 : 엔터프라이즈 블록체인 👉 작업기간 : 6일 👉 사용언어 : HTML5, CSS3, JQuery 👉 라이브러리 : GSAP, Swiper 👉 분류 : PC 세미 반응형 웹사이트 👉 URL : https://codenablog.github.io/Enterprise-Blockchain/ ✨POINT ✔️ 모션의 분석과 이해 ✔️ GSAP + ScrollTriger를 활용한 애니메리션 구현 ✔️ Video Background로 사용 ✔️ Top 버튼 위치 변화 ✔️ 한 방향으로 계속 흘러가는 텍스트 베너 💡 구조 살펴보기 1. 전체 태그를 wrapper로 감싸주기 세미 반응형이지만 PC만 지원하도록 만들었기 때문에, 최소너비를 1300픽셀로 잡아주었다. 이때, 컨텐츠의 ..

📁 다우오피스 👉 사이트명 : 다우오피스 👉 작업기간 : 6일 👉 사용언어 : HTML5, CSS3, JQuery 👉 라이브러리 : GSAP, Swiper 👉 분류 : PC 세미 반응형 웹사이트 👉 URL : ✨ POINT ✔️ 모션의 분석과 이해 ✔️ GSAP + ScrollTriger를 활용한 애니메리션 구현 ✔️ Video Background로 사용 ✔️ Top 버튼 위치 변화 ✔️ 💡 구조 살펴보기

📁네이버 커리어👉 사이트명 : 네이버커리어👉 작업기간 : 3일 👉 사용언어 : HTML5, CSS3, JQuery👉 라이브러리 : Swiper👉 분류 : 반응형 웹사이트👉 URL : https://codenablog.github.io/Naver-careers/✨POINT✔️ Medis query 반응형✔️ label 사용과 custum✔️ swiper 활용과 custum 💡 개선한 점1. 태블릿 크기 반응형 보완기존 NAVER Careers는 1230px 이하로 가로 스크롤이 생기는 현상이 있어 사이즈를 개선했다.전체적으로 body에 min-width값이 있어서 빼주었고,  메인 섹션 영상이 화면을 벗어나 over-flow:hidden;을 주어 간단하게 해결했다!! 개선 (전) : 화면 크..

📁 서울시청 👉 사이트명 : 서울시청 👉 작업기간 : 3일 👉 사용언어 : HTML5, CSS3, JQuery 👉 라이브러리 : Swiper 👉 분류 : 적응형 PC, 클론코딩 👉 URL : https://codenablog.github.io/Seoul-cityhall/ ✨POINT ✔️ 시멘틱웹에 유의하며 작성 ✔️ swiper custum 💡 레이아웃 서울시청 사이트는 class: common-inner로 전체 width값만 잡아주었다. 그리고 section마다 다른 inner값을 사용하기 때문에 섹션들의 묶음은 inner1 ,inner2…등으로 클래스 명을 주었다. 위 이미지 처럼 3개의 section의 위 아래에 padding값을 넣어주어야 할때를 위해 section을 묶어주는 inner를 또 하..