본문 바로가기

프로그래밍64

[CSS] position(static, relative, absolute, fixed, sticky) position static 기본값, 일반적인 순서(왼쪽에서 오른쪽, 위에서 아래)로 요소를 배치한다. top, bottom, right, left, z-index의 영향을 받지 않는다. relative static과 마찬가지로 일반적인 순서에 따라 요소를 배치하지만, top, bottom, left, right, z-index 속성으로 요소의 위치를 조정할 수 있다. top, bottom, left, right 속성은 각각의 방향을 기준으로 태그 안쪽 방향으로 이동하게 된다. 예) top: 5px은 화면의 위(top)에서 안쪽으로(화면 가운데쪽으로) 5px만큼 이동한다. 요소를 더 위쪽으로(바깥쪽으로) 이동시키고 싶다면 -5px을 주면 된다. left: 10px은 화면 왼쪽에서 안쪽으로(가운데쪽으로) .. 2021. 4. 9.
[CSS] z-index z-index CSS의 z-index는 지정한 요소와 그 요소의 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정한다. z-index는 하나의 정수값(음수, 양수 모두 가능)을 가질 수 있으며, 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮는다. 예를 들어 -1과 4의 값을 가진 요소가 있을 경우, 4를 가진 요소가 더 위에 위치한다. 즉, 화면에서 4가 -1을 덮고,(cover) 더 위에 보이게 된다. ※ 주의: z-index는 position 속성이 설정된 엘리먼트에 대해서만 의미를 갖는다. 기본 렌더링 레이어는 0이며, 값을 지정하지 않을 경우 기본 렌더링 레이어(레이어 0)에 렌더링된다. 만약 몇개의 엘리먼트들이 같은 z-index 속성 값을 가지거나,(같은 렌더링 레이어에 위치.. 2021. 4. 9.
[CSS] background-repeat background-repeat background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat; background-repeat: space; background-repeat: round; background-repeat: no-repeat; repeat : 요소의 배경 영역을 채울 때까지 이미지를 반복한다. 마지막 반복 이미지가 넘칠 경우 잘라낸다. 기본값. repeat-x : x축 방향으로 이미지를 반복한다.(수평) repeat-y : y축 방향으로 이미지를 반복한다.(수직) no-repeat : 반복없이 이미지를 한 번만 보여준다. space : 잘리지 않을 만큼 이미지를 반복한다. 제일 처음과 마지막 반복 이미.. 2021. 4. 9.
[CSS] hover 시 이미지 커지게 하기 www.w3schools.com/howto/howto_css_zoom_hover.asp How To Zoom on Hover with CSS How TO - Zoom on Hover Learn how to zoom/scale an element on hover with CSS. Zoom on Hover Hover over the green box: How To Zoom on Hover Example 2021. 4. 9.
[React] Intersection Observer API 사용한 Infinite Scroll 만들기(without React Hook) 한번에 데이터를 모두 불러오는 것이 아닌, 화면을 스크롤할 때마다 데이터를 추가로 불러오는 Intinite Scroll을 구현해 보았다. Infinite Scroll 구현 방법 scroll event: 스크롤이 끝까지 내려가는 경우 데이터 추가로 불러오도록 구현하는 방법 throttle 등을 추가로 구현해 최적화 할 필요가 있음 Intersection Observer API 사용 찾아보니 Intersection Observer API를 활용한 예제가 많고 편리한 듯 하여 Intersection Observer를 사용하기로 했다. 일부 브라우저에서는 Intersection Observer 지원이 안 된다고 하지만, Explorer 외에는 거의 지원이 되는 것 같다. Explorer는 MS에서도 지원을 종료.. 2021. 4. 8.

티스토리툴바