uiux 34일차

-텍스트 량에 따라 길어지는 디자인

<주의>
absolute 가운데로 옮기는 공식
top:50%;
left:50%;

• flex-shrink-0
  화면이 줄어들었을 때 조정되지 않고 고정이 되면서 스크롤바가 생김. 수축을 안하겠다는 것

• 테일윈드 시트가 없으면 css에 적어주기

codepen

---

-탭 메뉴에 따라 화면이 전체적으로 바뀌는 효과
:텍스트를 누를 때마다 해당화면으로 넘어가며 바탕화면색깔과 바탕 이미지가 달라짐

// 이미지 프리로드 함수

function preloading(imageArray) {
  let n = imageArray.length; //배열의 길이 구하기 배열을 셀 때는 index 0~5
  for (let i = 0; i < n; i++) {
    let img = new Image();
    img.src = imageArray[i];
  }
}

preloading([
  "https://picsum.photos/id/231/1000/1500",
  "https://picsum.photos/id/231/1000/1500",
  "https://picsum.photos/id/231/1000/1500",
  "https://picsum.photos/id/231/1000/1500"
]);
//미리 불러다 놓은 것 좀 더 부드럽게 이미지가 나오게 하기

function Part__showPart(no) {
  $(".part.active").removeClass("active");
  $(".part.part-" + no).addClass("active");
}

배열의 길이를 구함
총 5번 반복(index 생각 0~5)
이미지를 미리 불러다 놓아서 해당페이지로 이동할때 로드하는 시간을 단축하는 것
보다 자연스럽게 이미지가 로드된다.

const newNo = currentNo + 1 > total ? 1 : currentNo + 1; //삼항연산자

출처
동영상: 47분 15초부터 설명 시작

codepen

---

circle progress
채워지는 원 형태? 라이브러리라고 보면 됨

---

호버 했을 때 선 애니메이션 효과

https://codepen.io/atmfacwp-the-bashful/pen/dPbVBpV?editors=1100

• forwards : 애니메이션이 키프레임의 100%에 도달했을 때 마지막 키프레임을 유지합니다.
• 소문자:lowercase
• 대문자:uppercase