[💻] 실습 - 맥북

📖 Overview

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

👀 Check-point

• 반응형시 오류가 없는가
• 공통 클래스명으로 컨트롤하기 쉽게 작업했는가
• 스크롤에 대한 이벤트처리

---

공통 클래스를 주로 쓰는 mac

공통으로 꾸밀때는 영역에 가서 좌표를 잡는게 좋다.

📌 favicon 추출법

1. 페이지 소스에서 favicon검색 후 추출
   

2. 절대주소 추출

• 가끔 페이지 소스에서 나오지 않는 경우가 있다.
  https://주소/favicon.ico를 사용해주면 된다.

📌 비디오 태그 쓰는법

[ video 태그 ] HTML5로 동영상 넣는 방법. 이 글 하나면 모든 고민 끝!

<video autoplay muted class="video">
    <source src="https://www.apple.com/105/media/us/macbook-air-m1/2022/648bb92f-0bb4-452c-bfbc-2898641b22f5/anim/hero/large.mp4" type="video/mp4">
</video>

• muted - 음소거
• autoplay - 자동재생
• type - video

• 비디오는 현재 내 화면에서만 재생 되니까 제이쿼리 안걸어줘도 된다!
• 현재 내가 보고있는 화면에 도달해야지만 플레이 되는 성질인 애다!

반응형시 br이 필요할때 display:none , block처리해주면된다.

📌 Animation

✏ 순서

div {
    animation: rgy 5s ease-in 1s infinite alternate forwards paused;
}

순서헷갈리지 말기
name > duration > timing-function > delay > count > direction > fill-mode > play-state

애니메이션 이름 > 재생 시간(실행 속도) > 속도 곡선 타입 > 딜레이 시간 > 반복 횟수 >  진행 방향 > 종료 후 위치 > 실행or정지

✏ background-clip

제이쿼리를 사용하지 않고 글자가 채워질수 있다!

내가 주려는 글자에 animation,text-fill-color,background-clip 필수!

text-fill-color - 기존 텍스트 색

background-clip - 사용하려는 요소의 색을 어디에 두려는지

.content.battery .headline{
    animation: battery 1.5s linear forwards;

    background: linear-gradient(to top, #4cd265 50%, #fff 50%);
    background-size: auto 200%;
    -webkit-background-clip: text;
    background-clip: text;
    /* text-fill-color: transparent; */
    -webkit-text-fill-color: transparent; /*투명*/
}

📌 공통 클래스

안다르에서도 공통 클래스를 이용하여 쉽게 컨트롤을 연습했지만 내가 사용을 잘 안함 + 너무 많은 공통 클래스로 인해 헷갈리게 되었다.

80* headline-super
56* headline-medium

32* desc-super
28* desc-large
19* desc-medium

21* title-normal 

-어렵게 생각하지 않기-

1. 자주 쓰이는 폰트 사이즈를 적어보고 자주쓰이는 애들한테 클래스 이름을 추가해 준다.
2. 중복되는 font-weight, line-height도 같이 적어준다

.headline-super{
    font-size: 80px;
    line-height: 1.15;
    font-weight: 700;
}

🤔 → 왜 변수 (var)로 안쓰고 클래스로 주나요??

클래스가 좀 더 간편하고 각각 계속 줘야하는게 많은데 var는 css까지 가서 줘야한다.(가내 수공업)

📌 공통 css - gap을 안주고 쓰는방법

✏ 선택자

.section .content-wrapper > * + *{margin-top: 24px;}

→ .section .content-wrapper의 직계자식중 전체애들중에 첫번째 요소빼고 전체애들한테 {margin-top: 24px;} 을 준다.

근데 왜 .content-wrapper안에 .content로 잡지 않고 *선택자를 썼을까?

→ .content-wrapper안에는 .content가 아닌 다른요소도 있기때문에

• 선택자 설명이 이해안된다면?
  

꼭 알아야하는 선택자

:not(선택자)

.content.gpu > *:not(.video-area){z-index: 1;}

내가 선택하려는 .content.gpu에 인접한 전체 애들중에 .video-area빼고(아닌애들은) 다 z-index: 1 줘라

📌 flex만이 가능한 비율계산!

컨텐츠들의 등분을 묶어줄때 col-2,col-3등으로 나눠준다.

.grid-box .col-8{width: 80%;} 절반보다 살짝 큰 비율은 80% 
.grid-box .col-6{width: 60%;} 절반은 60%
.grid-box .col-4{width: 40%;} 절반보다 살짝 큰작은 비율은 40%

🤔 왜 이런 퍼센트가 나왔을까?

→ 기존 애플 mac에선 그리드로 12등분을 해놨다.
난 flex로 사용했음으로 그 비율을 맞추기 위해 전체가 120%라고 생각 하고 알아서 계산해준다!

💡 주의할점 - 120%는 실질적으로 사용할 수 없는 %이다. 80%+40%가 120%여도 flex는 총 합이 100%라고 생각한다.

flex: 1은 반으로 나눠 준다는게 아니라 1대1 로 만들어준다.

📌 애니메이션 시작,멈춤

animation-play-state: paused; → 멈춤

animation-play-state: running; → 시작

✏ animation steps(1)

스크롤시 이미지가 부드럽게 바뀌게 해야함

처음에는 gsap를 써서 작업했으나 스크롤시 순식간에 사라지는 오류 발생

이런식 X

.to('.content.security .img-area',{
        'animation-delay': -72
    },'a')

각 이미지의 좌표를 애니메이션으로 만들어두고 스크롤을 끝냈을때의 애니메이션 딜레이를 gsap에 넣어준다.

gsap 트리거에 scrub(부드럽게) 필수

animation: unlock 6s steps(1) forwards; 
animation-duration: 72s; 
animation-iteration-count: initial; /*무한반복 */
animation-play-state: paused;
animation-delay: 0s; /*처음 시작잉니까*/

여기서 가장 중요한 포인트는 steps(1) 각 하나씩 이동하는 것 같음 이걸 사용하면 부드럽게 연결된다.
애니메이션을 연속적인 전환이 아니라 끊을 수 있는애다.

---

오답✍(◔◡◔)✧

✏ backdrop-filter

요소 뒤 영역에 흐림이나 색상 시프트 등 그래픽 효과를 적용할 수 있는 속성

✏ 반응형일때

모바일에서만 보이는애들은 따로 클래스를 주는게 좋다.

ex) mobile-visible, mobile-show….

✏ alt에 설명이 없다면, 제공되는 이미지가 아니라 그냥 디자인이다

• 난 의미있는 이미지라 생각하여 ‘런닝하는 사람이미지’등등으로 표현하였으나
  → 그럴필요없었음!
• 설명이 필요없으면 alt에 쓰지 않아도 된다.
  → 왜냐! 리더기에 읽히지 말아야하니까
• background-img로 해도 무관하다!

✏ background로만 이미지를 꾸미고 싶을때 마크업

<figure class="img-area"></figure>

• 😎 figure가 뭔지 혹시나 기억안난다면???
  의미없는애!!!
  

장점 → 모바일영역, 반응형할때 이미지 교체가 쉽다!

🤔 mac background이미지 사이즈가 반응형마다 다 달라요

→ 그 사이즈마다 최적의 화질에 맞게 제작되어있기 때문에!!!
반응형에 따른 이미지 변경하기

✏ 레이아웃

grid를 사용했다면 쉽게 레이아웃을 맞출수 있지만 flex를 이용했다면 높이를 맞춰주고 빈칸을 만들어 주면 된다.

마찬가지로 flex를 이용했을시 한줄마다 하나씩 묶어버리자!

• 총5개의 영역으로 만들어 줘야한다
• 5개로 잡아야 맞는거임 → 반응형일때는 disply-block이면 되는거임