241105 / branch명 바꾸기, 디자이너가 없으면 유료 이미지를 사용하자(adobe stock), 벡터 vs png 파일 차이, 3일 간의 날씨 값 넣기
Weather Claus 프로젝트 | TIL
오늘 할 일
내일, 모레 날씨 값 넣기날씨카드 UI 수정하기 (날씨카드 한정 영어폰트 변경 ?
branch명 바꾸기
- 먼저 로컬에서 1차로 변경
(체크아웃된 브랜치에서)
git branch -m 새로운 브랜치명- 원격저장소 2차 변경
1. 이름 수정한 브랜치 푸시
git push origin -u 새로운 브랜치명
2. 이름 변경 전 브랜치 삭제
git push origin --delete 이름 변경 전 브랜치명그럼 끝 - !
우리도 디자이너 주세요
ㅠㅠㅠㅠㅠㅠ
옷 이미지 찾다가 엄청 엄청 마음에 드는 것을 찾았는데
어도비 스톡 https://stock.adobe.com/kr/
에서 구매 가능하고, 무료 체험판 1개월 가능하길래 바로 가입했다
(20개 플랜 크레딧 제공이라 20장까지 다운 가능)
최근에 포샵 무료 체험 사용해서 안 되는 거 아닌가 싶어 식겁했는데 너무 행복해 !
진짜 귀여운 이미지 발견했어 완전 딱이야 바로 이거에요. 이거라구.
바로 요 이미지
https://stock.adobe.com/381574385?clickref=1011lzRTPY8N&mv=affiliate&mv2=pz&as_camptype=search-sponsored&as_channel=affiliate&as_source=partnerize&as_campaign=cheezy
작가님 최고에요. 최고. 짱. 너무 귀엽고 몽글몽글해
오마이 우리 사이트도 귀여워질 수 있어
진짜 수많은 무료 이미지 사이트를 들락날락하고 서치하고 절망하고
수집하고 했는데 요렇게나 귀여운 옷 이미지를 발견하다니 행복감 맥스
벡터 vs png 파일
화면에 이미지를 띄우는 용도로는 벡터 이미지(SVG)를 추천합니다.
그 이유는 다음과 같습니다:
확장성: 벡터 이미지는 해상도에 구애받지 않아서 크기를 조절해도 품질 저하가 없습니다. 따라서 다양한 화면 크기에서도 선명하게 표시됩니다.
파일 크기: 벡터 파일은 일반적으로 PNG 파일보다 더 작은 파일 크기를 가집니다. 특히 복잡한 이미지를 다룰 때 이점이 큽니다.
애니메이션 및 인터랙션: SVG는 CSS와 JavaScript를 사용하여 애니메이션을 추가하거나 상호작용할 수 있어 더욱 동적인 콘텐츠를 만들 수 있습니다.
투명 배경 지원: PNG와 마찬가지로 투명 배경을 지원하여 다양한 배경색에 잘 어울립니다.
단, 만약 이미지에 복잡한 색상이나 그라디언트가 많다면, PNG가 더 나은 결과를 줄 수 있습니다. 하지만 단순한 그래픽, 아이콘, 로고 등은 벡터 이미지를 사용하는 것이 더 효과적입니다.
벡터로 이미지를 다운 받으려고 했는데
다운받으니 파일 형식이 ai(어도비 일러스트레이터?)라서 안 열려서
그냥 익숙한 png 형식을 사용하기로 했다
백 번 말하지만 너무 아름다워 ㅠ 최고
오늘의 교훈 : 디자이너가 없으면 유료 이미지를 이용하자
-> 이미지 작업
다운받은 파일에서 필요한 이미지만 잘라낸 후 배경 제거 > 기존 이미지 파일 교체
+ 옷 이미지 차이
 |  |
|---|---|
| 변경 전 | 변경 후 |
map - ul / li
const textList = clothesTextOption.map((text, index) => (
<li key={index}>{text}</li>
));
return (
<ClothesCard>
<ul>{textList}</ul>
map 메서드와 ul / li 태그 같이 사용할 때.
ㄴ 수정된 날씨 카드 부분
Today 라벨 이미지? 도 넣고 싶고 옷 추천 박스 부분도 바꾸고 싶음
(바깥 margin을 없애고 싶음-일이 복잡해짐)
내일, 모레 날씨 값 넣기
생각보다 너무 간단하고 금방 끝나버렸다.. 호잇
// 오늘, 내일, 모레 3일 간의 날씨 (시간은 정오)
const listNumber = [1, 9, 17];
{listNumber.map((number, index) => (
<motion.div key={index} variants={childVars}>
<WeatherCP listNumber={number} />
</motion.div>
))}날씨 데이터값 리스트에서 필요한 부분의 순번만 넣어주는 것으로 해결
약간 허무하다 ㅋㅋㅋ
뭔가 엄청 어렵게 생각했는데, 아니였던 걸로.
기특하다 나 자신 👏👏
* 문제 발생
날씨별로 박스 크기가 들쑥날쑥함
오늘 이미지 작업하는 것 때문에 집중력이 미쳤었다...... 와우
매일 이렇게 공부했으면 엄청났을 듯... ^^
