[💻] 실습 - earth

📖 Overview

사이트명: earth
작업 기간: 3.5일 소요
라이브러리: swiper, jQuery
유형: 반응형, 클론 코딩
참여도: 100%

📌 svg 마스킹

mask-image를 이용해야한다.
background-image처럼 url을 이용해야한다.

id연결

<mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
</mask>

  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);

먼저 필요한건 <defs></defs>이다
defs란??

definitions 정의
그래픽 오브젝트들은 어디서든 참조될 수 있지만, 엘리먼트 안의 이러한 오브젝트들을 정의하는 것은 그 svg 컨텐츠의 이해를 높이고, 문서의 전반적인 접근에 유익하다.

쉽게말해
나중에 참조할 그래픽 요소 같은 것들을 담아놓는 공간.

https://nyjchoi.tistory.com/15

✏ 사용법

1. <mask> <mask/>에 id를 지정하자.
   • <mask id="mask_a">

2.<g></g> 안 스타일에 mask: url(#mask_a); id값을 연결하자.

📌 columns

다단(multi-column) 레이아웃

columns: 2;
column-gap: 48px;

그리드 영역 설정
https://sorto.me/docs/Web/CSS/grid-template-areas
https://velog.io/@forest0501/CSS-Grid-Grid-Template-Areas%EC%99%80-Grid-Row-Grid-Column

grid-area로 이름설정
grid-template-areas로 순서

처음 알고있는대로 columns을 줬지만 전혀 원하는 칸만큼 나오지 않았다.
검색 결과 grid-column-end가 필요함!!

grid-column-end: span 9;란 숫자만큼 라인을 확장하는(+) 개념 9칸을 한칸으로 친다는뜻

grid 참고

---

오답

1. 

애니메이션 시작시 저부분이 제일 마지막에 실행되어야하는데 시작부터 나와있음
-> animation-fill-mode를 이용해서 해결

• animation-fill-mode란
  애니메이션이 끝난 후의 상태를 설정합니다.

• 속성 -> both
  애니메이션이의 앞 뒤 결과를 조합하여 설정합니다.

  
  

2. 

호버시 자꾸 다음꺼가 바뀌고 덜컹거리는 문제가 생김

$('.swiper-pagination-bullet').hover(function() {
        $( this ).trigger( "click" );
     });

스와이퍼 루프기능이 들어간다면 $( this ).trigger( "click" );이 기능을 사용 할 수 없다.

✍ slide2.slideToLoop()를 사용해야한다.

호버했을때 루프되라는 뜻
내가 숫자 2를 넣으면 어디를 호버해도 2번째로 간다.

slide2.slideToLoop($(this).index())

그렇기 때문에 호버하려는 this의 길이(index)로 가라 하면 된다.

3. 

호버햇을때 나온 자식들에게 마우스 호버를 할 수 없는 일 이 발생;;

→ 부모에 호버를 한다고 써줘야하고 부모가로 길이를 주면 안됐다

왜냐 저 부분에 가지도 않았는데 나타났다 사라졌다 하기때문에

위치를 오른쪽에서 시작하게 하고 width: 0;를 이용해서 해결!