본문 바로가기

프로그래밍/HTML & CSS4

[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.

티스토리툴바