오늘 목표
- 수업 전 7시 기상 후 운동(O)
- 수업 내용 모르는 거 및 공부내용 정리(O)
- 에어비엔비 반응형 퍼블리싱 해보기(O)
공부 내용
position: absolute
absolute되면 inline-block처럼 변한다?
position: absolute가 적용되면 해당 요소는 문서 흐름에서 빠지고 위치가 지정된 부모 요소를 기준으로 위치하게 된다. 또한 크기를 가질 수 있는 요소로 바뀌고
display:inline-block으로 강제로 변하는 것은 아니지만 크기를 가지고 정렬되기 때문에 그렇게 보이는 것이다.
z-index는 -1 쓰는 것보단 다른것들을 올려주는게 좋다
이 요소가 마우스 클릭도 안 되고, 다른 요소 뒤에 숨어서 보이지 않는 경우가 자주 발생하기 떄문에 다른 요소를 높여주는 것이 좋다.
왜 absolute 주면 위로 올라가는가?
position: absolute를 주면 해당 요소는 새로운 쌓임 컨텍스트(stack context) 안에 들어간다. 즉 Dom 순서를 기반으로해 z-index가 자동계산된다.
Dom 순서를 기반으로 나중에 나오는 요소가 더 위로 올라가게 된다!
순서를 조정하고 싶으면 z-index를 설정해주자!!
overflow: hidden + hover 시 위치 이동
1.간단하고 직관적
.container {
overflow: hidden;
}
.item {
transition: transform 0.3s;
}
.item:hover {
transform: translateY(-10px);
}- 코드가 간결하다
- JS를 사용하지 않아도 가능
- 레이아웃도 안정적이다.
2. 퍼포먼스가 좋고 렌더링 비용 감소
transform, opacity 같은 속성은 GPU 가속이 적용돼서,
부드럽고 렌더링 비용도 적다.(브라우저 입장에선 layout 다시 계산 안 해도 됨)
그래서 translate, scale, rotate 같은 걸 overflow: hidden과 조합해서 쓰는 건 애니메이션 성능면에서도 굿!
Object-fit 사용해 이미지 사용
본래의 이미지는 width와 height를 지정하여 width와 height를 조정한다 둘 중 하나만 지정할 경우 본래 이미지의 비율에 맞게 조정이 된다.
Object-fit :fill (기본값)
본래의 이미지 크기와 다르게 width와 height값을 지정하게 되면 본래의 이미지의 비율과 다르면 위아래 혹은 양옆으로 당긴 것 처럼 모양이 나오는 경우가 있다. 그러한 경우는 Object-fit을 설정해 주지 않아 지정된 width와 height를 채우기 위해 Object-fit:fill이 적용이 되서 그렇다 보통 사용되지 않는다.
Object-fit : cover
cover를 사용하게되면 비율을 지키는 대신 이미지의 일부가 짤릴 수 있습니다.
이 옵션은 유용한 경우가 상당히 많지만 특히 이나 미리보기 그리고 이미지를 포함하고 있는 카드나 여러 이미지로 이루어진 그리드를 만들 때 많이 사용된다. 이러한 UI는 보통 클릭하거나 호버 하면 이미지 전체를 보여지게 하는 효과를 줄 수 있음.
Object-fit : contain
object-fit:contain을 사용하면 이미지 전체를 짤림없이 보여줄 수는 있지만 주어진 영역을 꽉 채우는 것은 포기해야 합니다.특히 이미지 안에 짤리면 안 되는 중요한 텍스트가 있는 경우에 유용하게 쓸 수 있습니다.
실습 페이지 완성
실습과정 중 알게된 것
디자이너가 프로토타입을 제공하면, 먼저 해당 페이지에서 사용될 주요 기능을 요약하고, 이를 바탕으로 사용자 관점에서의 흐름(UX 플로우)을 시뮬레이션 하는게 좋다.
예를 들어, 입력 폼이 있다면 사용자가 어떤 순서로 입력할지, 어디서 헷갈릴 수 있을지를 미리 예측하고,focus 처리, 유효성 검사, 에러 메시지, 탭 이동 등 사용자 경험을 고려한 기능을 설계합니다.
스크롤 이벤트
// 무한 스크롤 구현
function ProductList() {
const [products, setProducts] = useState([]);
const [page, setPage] = useState(1);
const handleScroll = (e) => {
const { scrollTop, clientHeight, scrollHeight } = e.currentTarget;
if (scrollHeight - scrollTop === clientHeight) {
// 스크롤이 맨 아래에 도달했을 때
setPage(prevPage => prevPage + 1);
loadMoreProducts(page + 1);
}
};
return (
<div
className="products-container"
onScroll={handleScroll}
style={{ height: '500px', overflow: 'auto' }}
>
{products.map(product => (
<ProductCard key={product.id} product={product} />
))}
{isLoading && <div className="loading">로딩 중...</div>}
</div>
);
}
scrollTop: 현재 스크롤 위치
clientHeight: 보이는 영역 높이
scrollHeight: 전체 스크롤 가능한 높이
