이 글은 노마드코더 - AI 기초 탄탄 클럽 시리즈의 4번째 기록입니다. (총 4개)

노마드코더에서 수강 가능한 풀스택 웹 기초를 6주만에 훑는 챌린지. 해당 강의: 코코아톡 클론코딩 #6는 Music Player를 만드는 것

챌린지 조건

  • Font Awesome을 사용하세요.
  • 포기하지 말고 최선을 다해주세요!

-webkit-line-clamp

.music-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 2줄까지 보이기 */
  overflow: hidden;
  text-overflow: ellipsis; /* 이것만 쓰면 한 줄만 처리 */
}

position: relative

아티스트 이름이 이미지 위로 살짝 올라와 있거나 버튼들이 공중에 떠 있는 효과를 위해 음수 값(-50px)을 활용함.

font-display: swap

  • 사용자에게 빈 화면을 보여주지 않기 위해 커스텀 폰트를 불러올 때 font-display: swap;을 넣어 폰트 파일의 용량이 커서 로딩이 늦어질 경우 폰트가 다운로드되기 전까지는 시스템 폰트로 먼저 내용을 보여주고, 다운로드가 끝나면 자연스럽게 교체하기.

Series: 노마드코더 - AI 기초 탄탄 클럽