본문 바로가기
반응형

css2

CSS cursor 속성 적용 방법 우리가 웹페이지를 다루다 보면 특정 위치에 마우스가 위치하였을 때 마우스 커서 모양이 바뀌는 것이고 있고, 이미지가 커지거나 사라지는 등의 효과가 적용이 될 때가 있다. 이러한 차이가 cursor와 hover의 차이이다. cursor란? 마우스의 커서의 스타일을 지정하는 데 사용된다. 즉, 마우스 커서 모양을 바꾸는 것이다. 이러한 속성을 이용하여 특정 요소에 마우스를 가져다 놓았을 때 마우스 커서의 모양이 변경되도록 한다. hover란? 가상 클래스로 요소가 마우스로 위치시킬 때의 상태를 지정한다. 예를 들어, 요소에 마우스를 올리면 배경색이 노란색으로 변경되는 효과가 있다. hover는 주로 애니메이션 효과가 함께 쓰여서 특정 위치에 마우스를 올려놓았을 경우 생동감 있게 스타일을 지정하며, 이러한 h.. 2024. 1. 19.
CSS 화면 배치 position 속성 position이란? CSS에서 position 속성은 화면상에서 요소를 배치하는 방법을 지정한다. static, absolute, relative, fixed, inherit 5가지의 속성값을 가지며 지금부터 이 5가지 속성값에 대해 살펴보도록 하겠다. ❗특이사항❗ 이 속성은 자식 요소에게 대물림되지 않는다는 점이 있다. 1.static position (정적 위치) 지정 방식 : 기본값으로, 전적으로 페이지의 흐름을 따르며 top, bottom, left, right, z-index 속성의 영향을 받지 않는다. 즉, top,bottom,left 등 방향을 설정하지 않는다. 1️⃣ CSS 코드 {position : static; } 2️⃣결과 2. relative position(상대 위치) 지정 방식.. 2024. 1. 5.
반응형