<aside> 💡

Mission

<aside> 📢

그라데이션 배경 까먹지 마세요

</aside>

image.png

0. 아이콘 다운 받기

card-hover.zip

1. 공통 컴포넌트 제작 - Button.jsx

src/components/Button.jsx
  1. 아이콘을 교체할 수 있어야 해요
<Button>
	<img src="$.svg" />
</Button>
  1. 스크린리더기를 위한 접근성 텍스트를 작성해주세요

image.png

<Button>
	<img src="$.svg" />
	<span>다운로드 버튼</span>
</Button>
// 글씨는 보이지 않지만, 스크린 리더기는
// 이 글자를 읽을 수 있어요

2. 공통 컴포넌트 제작 - Avatar.jsx

image.png

<Avatar name="Jakub Flis" src="" />

예시 코드 HTML (주석달며 이해하기)

// 카드 컨테이너: 전체 카드를 감싸는 최상위 요소
<div class="card">
  // 카드 이미지: 배경 이미지로 사용될 사진
  <img src="<https://images.unsplash.com/photo-1614622686704-f24cdef196a0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2NjM3ODJ8MHwxfHNlYXJjaHwyfHxyZWR8ZW58MHx8fHwxNzI5NzQzMTMyfDA&ixlib=rb-4.0.3&q=80&w=1080>" alt="">
  // 텍스트 래퍼: 호버 시 나타나는 오버레이 요소
  <div class="text-wrap">
    // 버튼 래퍼: 상단 우측에 위치한 버튼들을 감싸는 요소
    <div class="button-wrap">
      <button>1</button>
      <button>2</button>
    </div>
    // 아바타 래퍼: 하단에 위치한 프로필 정보를 감싸는 요소
    <div class="avatar-wrap">
      <div>이예린</div>
      <button>3</button>
    </div>
  </div>
</div>

예시 코드 CSS (주석달며 이해하기)

// 카드 컨테이너: 상대적 위치로 설정하고 정사각형 형태로 만듭니다
.card {
  position: relative;
  width: 300px;
  aspect-ratio: 1/1;
}

// 카드 이미지: 컨테이너를 꽉 채우고 비율을 유지하며 잘립니다
.card img {
  width:  100%;
  height: 100%;
  object-fit: cover;
}

// 호버 시 텍스트 래퍼 표시: 마우스를 올리면 텍스트 래퍼가 나타납니다
.card:hover .text-wrap {
  opacity: 1;
}

// 텍스트 래퍼 (호버 시 나타나는 오버레이): 카드 위에 겹쳐지는 반투명 레이어입니다
.text-wrap {
  opacity: 0;
  transition: opacity 0.1s;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(180deg,rgba(0,0,0,.34) 0,rgba(0,0,0,.338) 3.5%,rgba(0,0,0,.324) 7%,rgba(0,0,0,.306) 10.35%,rgba(0,0,0,.285) 13.85%,rgba(0,0,0,.262) 17.35%,rgba(0,0,0,.237) 20.85%,rgba(0,0,0,.213) 24.35%,rgba(0,0,0,.188) 27.85%,rgba(0,0,0,.165) 31.35%,rgba(0,0,0,.144) 34.85%,rgba(0,0,0,.126) 38.35%,rgba(0,0,0,.112) 41.85%,rgba(0,0,0,.103) 45.35%,rgba(0,0,0,.1) 48.85%,rgba(0,0,0,.103) 52.35%,rgba(0,0,0,.112) 55.85%,rgba(0,0,0,.126) 59.35%,rgba(0,0,0,.144) 62.85%,rgba(0,0,0,.165) 66.35%,rgba(0,0,0,.188) 69.85%,rgba(0,0,0,.213) 73.35%,rgba(0,0,0,.237) 76.85%,rgba(0,0,0,.262) 80.35%,rgba(0,0,0,.285) 83.85%,rgba(0,0,0,.306) 87.35%,rgba(0,0,0,.324) 90.85%,rgba(0,0,0,.338) 94.35%,rgba(0,0,0,.347) 97.85%,rgba(0,0,0,.35));
  z-index: 1;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

// 버튼 래퍼 (상단 우측 버튼들): 버튼들을 오른쪽 정렬하고 간격을 줍니다
.button-wrap {
 display: flex;
 justify-content: flex-end;
 gap: 8px; 
}

// 아바타 래퍼 (하단 프로필 영역): 임시로 분홍색 배경을 설정합니다
.avatar-wrap {
  background: pink;
}

https://codepen.io/fjw1010/pen/jOgarzp - 버튼위치, 호버 연습

https://codepen.io/bcgycrog-the-animator/pen/vYoWXar - sticky 연습

Fork와 Rebase 작업 해결 과정

Fork를 통해 작업하다 브랜치 간 불일치가 발생했을 때 Rebase를 활용한 해결 과정은 다음과 같습니다:

  1. Fork한 저장소에서 작업 브랜치 확인
git branch
  1. 원본 저장소를 원격 저장소로 추가 (이미 추가되어 있다면 생략)
git remote add upstream [원본 저장소 URL]
  1. 원본 저장소의 최신 변경사항 가져오기
git fetch upstream
  1. 작업 브랜치로 이동
git checkout [작업 브랜치 이름]
  1. 원본 저장소의 최신 변경사항을 현재 브랜치에 리베이스
git rebase upstream/main