section 마다 강의를 들으며 필기 후 복습차 실습 진행
[0] HEAD ( 22/03/24 )
- reset.css CDN 추가
- Open Graph와 twitter card 추가
[1] HEADER ( 22/03/24 ~ 22/03/31 )
HTML 기본 구성
header div.inner a.logo > img div.sub-menu ul.menu li > a div.search input span.material-icons ul.main-menu li.item div.item__name div.item__contents div.contents__menu ul.inner li > h4 > ul > li div.contents__texture div.inner h4 > p div.badges div.badge > img
기본 요구 사항
- Header는 뷰포트에 위치 고정.
- 서브/메인메뉴의 콘텐츠에 마우스가 hover 되었을때 커서는 포인터, 글씨색 변경 되도록.
- 검색 input은 focus 되어 있지 않을 때는 작은 상태로 유지.
- 검색 input이 focus 되었을 때 검색 아이콘 fade out.
- 메인 메뉴는 탭 메뉴 형식으로 콘텐츠가 hover 되었을때만 보이도록.
- 각 메인 메뉴 탭마다 다른 내용들이 보이도록.
- 뱃지 부분은 스크롤을 내림에 따라 fade out 되었다가 올리면 다시 fade in 되도록.
What I Learn
- 동작하지 않는 링크를 만들고 싶을때는
href = "#"혹은href = "javascript:void(0)"- 특정 조건에 따라 fade out이 되거나 fade in 되는 경우에는
opacity를 사용- JS에서 특정 요소의 속성의 값을 바꾸고 싶을때는
요소.setAttribute('속성', '값')- Focus 상태일때 함수 실행
요소.addEventListener('focus', 함수)- Focus 상태가 해제 되었을때 함수 실행
요소.addEventListener('blur', 함수)- Lodash 라이브러리 -
throttle
_.throttle(함수, 시간(ms) )
---> 일정 시간마다 함수를 실행하여 불필요한 리퀘스트를 줄임.- GSAP (애니메이션 라이브러리)
gsap.to(적용할 요소, 지속시간, 애니메이션 옵션{객체데이터})- JS에서 스타일 바꾸기 - C의 스타일 속성 중 A의 값을 B로
C.style.A = 'B'- 스크롤을 할 때 window의 scrollY의 값이 변한다.
- 화면 내에 스크롤 이벤트 발생 시 함수 실행
window.addEventListener('scroll', 함수)
[2] SECTION - VISUAL ( 22/04/01 ~ 22/04/04)
HTML 기본 구성
section.visual div.inner div.title.fade-in img a.btn.btn--brown div.fade-in img.cup1.image img.cup1.text div.fade-in img.cup2.image img.cup2.text div.fade-in img.spoon
기본 요구 사항
- 새로고침 시 제품 이미지들이 순차적으로 나타나도록.
- 자세히 보기 버튼을 hover 시 색이 서서히 변하도록.
문제가 있었던 부분
- section.visual 안에 있는 div.inner에 margin-top을 줬는데 header까지 같이 내려감.
원인과 해결
- header 부분에 top의 값이 주어지지 않아서 같이 움직인 것으로 보여서 값을 부여하여 해결.
What I Learn
- 여러 요소들을 순차적으로 애니메이션을 적용하고 싶을 때는
.forEach()와gsap.to()의delay기능을 이용하여 구현.
[3] SECTION - Notice ( 22/04/08 ~ 22/04/21 )
HTML 기본 구성
section.notice div.notice-line div.bg-left div.bg-right div.inner div.inner__left h2 div.swiper div.swiper-wrapper div.swiper-slide a div.add-circle a.material-icons div.inner__right h2 div.toggle-promotion div.material-icons div.promotion div.swiper div.swiper-wrapper div.swiper-slide img a.btn div.swiper-pagination div.swiper-prev span.material-icons div.swiper-next span.material-icons
1) Notice-line
기본 요구 사항
- 왼쪽 부분과 오른쪽 부분이 6:4 비율로 색이 다르도록.
- 왼쪽 부분에 공지사항 내용 부분이 자동 수직 슬라이드 되도록.
- 오른쪽 부분의 toggle-promotion 부분을 클릭할 때 아래 promotion 부분이 숨겨지고 표시되도록.
문제가 있었던 부분
- 위 visual의 fade animation 부분과 공지사항의 슬라이드 부분이 작동하지 않음.
원인과 해결
- 처음에는 공지사항의 css 또한 살짝 이상해져 있기에 공지사항 부분의 문제 인줄 알았으나 후에 visual 부분의 문제인 것을 인식.
- 한참 찾았는데, 오타 하나 발견... 오타 수정 후 정상 작동 확인.
What I Learn
- 항상 오타 주의...! 또한 JS가 제대로 작동하지 않는다면 어느부분부터 오류가 나는지 작성한 JS 파일에서 오류 시작점을 찾을 것.
- 슬라이드 작성 시 슬라이드 라이브러리 Swiper를 이용.
- Swiper 이용 시 기본 구조를 꼭 지킬 것.
div.swiper > div.swiper-wrapper > div.swiper-slide * n- 때에 따라서는 옵션으로
pagination이나navigation기능도 사용 가능.- JS 작성 시에는
new Swiper('선택자', {옵션});
옵션으로는loop나autoplay나direction등 사용 가능.
2) Promotion
기본 요구 사항
- 자동 플레이 되는 수평 슬라이드를 뷰포트의 크기에 상관없이 가운데 고정되도록 작성.
- 슬라이드는 한번에 3개가 보이고 현재 활성화된 슬라이드가 가운데 오도록.
- 활성화된 슬라이드를 제외한 나머지 두개는 투명도 부여.
- 사용자가 제어 가능한 Pagination 기능을 작성.
- 활성화된 슬라이드 양옆으로 navigation을 작성.
- 자세히 보기 버튼과 navigation 버튼을 hover 시 색이 서서히 변하도록.
- Notice-line의 toggle-promotion이 작동하도록 기능 연결.
What I Learn
- Swiper의 기본 방향이
horizontal이므로 따로 설정하지 않아도 됨.- CSS 작성 중 수치는
calc()함수를 이용해서 나타낼수도 있다.- Swiper의 Pagination 사용시
swiper-pagination클래스를 가진 요소는 자동으로position이absolute로 설정 된다.- Swiper의 JS 작성 중 사용가능한 옵션으로는
slidesPerView// 한번에 보여줄 슬라이드 갯수
spaceBetween// 슬라이드 사이 여백
centeredSlides// 값이true일 경우 활성화된 슬라이드를 가운데에 표시- Swiper의 옵션 중 pagination의 옵션으로는
el// pagination이 들어갈 요소의 선택자를 값으로 갖음.
clickable//true일 경우 pagination 부분에 사용자가 직접 클릭하여 제어 가능.- Swiper가 작동할 때 활성화된 슬라이드에
.swiper-slide-active클래스가 추가됨.- Swiper의 Pagination을 이용할때 설정한 요소에
.swiper-pagination-bullet이라는 클래스가, 현재 활성화된 bullet에는.swiper-pagination-bullet-active라는 클래스가 추가됨.- JS 작성 중 !는 값을 반대로 만든다.
let A = true// true
A = !A// false
[4] SECTION - Rewards ( 22/04/22 )
HTML 기본 구성
section.rewards div.bg-left div.bg-right div.inner div.btn-group div.btn.sign-up.btn--reverse div.btn.sign-in div.btn.gift기본 요구 사항
- rewards의 로고는 왼쪽으로, 회원가입/로그인/e-gift 버튼은 오른쪽에 배치
- 회원가입의 버튼만 반전 색으로 표시
[5] SECTION - Youtube ( 22/04/23 ~ 22/05/13 )
HTML 기본 구성
section.youtube div.youtube__area div#player div.youtube__cover div.inner img.floating.floating1 img.floating.floating2 img.floating.floating3
기본 요구 사항
- 영상은 반복재생, 자동재생, 뮤트 상태
- 영상 위에 커버 이미지 설정
- 3개의 floating 이미지들이 랜덤한 범위 만큼 위아래로 흔들리도록.
- overflow 되어서 floating3 이미지의 절반이 보이지 않기에 다음 section에서 보이도록 배치한다.
What I Learn
- 16 : 9 비율로 표시 하려면,
부모 요소에width를 부여하고
자식요소에padding-top : 56.25%;width : 100%height : 0gsap.to의 옵션
yoyo// 부메랑 같이 반대로 똑같이
repeat:-1// 계속 반복
ease// 설정한 easing 함수와 같은 움직임- 랜덤 범위 함수
function random(min, max) { return parseFloat((Math.random() * (max - min) + min).toFixed(2)) // `.toFixed()`를 통해 반환된 문자 데이터를, // `parseFloat()`을 통해 소수점을 가지는 숫자 데이터로 변환 }
[6] SECTION - Season Product ( 22/04/23 ~ )
HTML 기본 구성
section.season-product img.floating.floating3 img.product div.text-group img.title img.desc div.more a.btn
기본 요구 사항
- 왼쪽에 제품 사진, 오른쪽에는 제품 설명 이미지와 상세페이지로 이어지는 버튼.
[7] SECTION - Reserve Coffee ( 22/04/23 ~ )
HTML 기본 구성
section.reserve-coffee div.inner img.reserve-logo div.text-group img.desc div.more a.btn.btn--gold img.product
기본 요구 사항
- 왼쪽에 로고, 가운데에는 제품 설명 이미지와 상세페이지로 이어지는 버튼, 오른쪽에는 제품 사진.
[8] SECTION - Pick Your Favorite ( 22/04/23 ~ )
HTML 기본 구성
section.pick-your-favorite div.inner div.text-group img.title img.desc div.more a.btn.btn--white
기본 요구 사항
- 배경은 뷰포트에 fix 되도록.
- 왼편에 위에서부터 title, desc, 상세페이지로 이어지는 버튼.
코딩을 배우는 비전공자 코린이!