💛카부커넥션💛 : emotions를 이용한 배경/푸터/레이아웃 컴포넌트 만들기

자바 Duke를 만든 것이다 잘만들었다고 생각함

오늘은 오프라인날..판교너무멀다...

 

기본 노랑 : #FFF496
기본 찐브라운 : #715F00
기본 연브라운 : #D3CBA1

 

---

🌟움직이는 배경 만들기

그냥 피그마에서 익스포트해서 갖다 쓰려고 했는데

세호오빠가 동그라미 움직이는 배경 말하길래 멋있을 것 같아서 그걸로 결정

 

 

'@emotion/styled' 에서 styled 함수 사용 (styled API)

'@emotion/react'에서 keyframes 함수 사용

 

const float = keyframes`
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-300px) translateX(300px); }
`;

 

keyframes로 애니메이션 정의

• 0%, 100%에서 원은 제자리(translateY(0) translateX(0))에 있고, 50%에서 translateY(-300px) translateX(300px)으로 움직

 

const Circle = styled.div`
  position: absolute;
  width: 1500px;
  height: 1000px;
  background-image: radial-gradient(circle, #FFF496 0%, rgba(255, 244, 150, 0) 50%);
  border-radius: 50%;
  animation: ${float} ${props => props.duration}s infinite ease-in-out;
  left: ${props => props.x}%;
  top: ${props => props.y}%;
`;

원 스타일 정의

• styled.div는 HTML의 div 요소를 스타일링하는 Emotion의 styled 함수 (Circle은 스타일이 적용된 React 컴포넌트가 됨)
• background-image: radial-gradient는 원의 중심에서 바깥으로 갈수록 색이 투명해지는 그라데이션을 적용
• left와 animation, top은 props에 따라 설정

 

 

---

🌟 layout 만들기

모든 화면에 공통적으로 적용될, 헤더+푸터 +배경 + 사이 컴포넌트 가운데 정렬 layout 컴포넌트를 만든다

 

styled.main 

main HTML 요소 기반

---

+

아니 부모 컴포넌트가 없는데?? 못 찾겠어서 100vw로 변경 주리언니짱

1. width: 100%:
   • 100%는 부모 요소의 너비를 기준으로 설정
   • 부모 요소의 너비가 어떤 이유로 제한되어 있거나, 마진, 패딩, 보더 등이 추가되어 있으면 이 값을 기준으로 100%가 계산
   • 따라서 부모 요소에 마진이나 패딩이 설정되어 있으면, 실제로 너비가 화면 전체를 차지하지 않을 수 있음
2. width: 100vw:
   • 100vw는 뷰포트(Viewport) 너비의 100%를 의미합니다.
   • vw는 "viewport width"의 약자로, 뷰포트(화면)의 전체 너비를 기준으로 합니다.
   • 100vw는 부모 요소와 상관없이 항상 화면 전체 너비를 차지하게 됨

+

가운데 정렬

flex-direction: column; // 세로 방향으로 정렬

z-index: 0; // 배경보다 앞에 위치

 

 

+

자동으로 upstream 설정

현재 작업 중인 브랜치에 대해 원격 저장소에 연결된 브랜치를 매번 설정하는 것이 번거롭다면, 

git config를 사용하여 새로운 브랜치를 원격 저장소와 자동으로 연결되도록 설정할 수 있음

git config --global push.autoSetupRemote true

 

 

+

jsx

• jsx는 JavaScript 확장 문법
• JavaScript안에서 HTML 사용 가능

---

이욥

---

그리고...

https://exam.toeic.co.kr/result/reportCombi.php

콘솔에

getReportCombiScoreAjax("TOE_521", "", "")

치면 성적 미리 볼 수 있다!

nlog이가 알려줌

 

ㅎ

큭큭,..,.

sqld는 성공한다