우리가 웹페이지를 다루다 보면
특정 위치에 마우스가 위치하였을 때
마우스 커서 모양이 바뀌는 것이고 있고,
이미지가 커지거나 사라지는 등의 효과가 적용이 될 때가 있다.
이러한 차이가 cursor와 hover의 차이이다.
cursor란?
마우스의 커서의 스타일을 지정하는 데 사용된다.
즉, 마우스 커서 모양을 바꾸는 것이다.
이러한 속성을 이용하여 특정 요소에 마우스를 가져다 놓았을 때
마우스 커서의 모양이 변경되도록 한다.
hover란?
가상 클래스로 요소가 마우스로 위치시킬 때의 상태를 지정한다.
예를 들어, 요소에 마우스를 올리면
배경색이 노란색으로 변경되는 효과가 있다.
hover는 주로 애니메이션 효과가 함께 쓰여서
특정 위치에 마우스를 올려놓았을 경우 생동감 있게 스타일을 지정하며,
이러한 hover효과와 cursor 효과를 같이 쓰이기도 한다.
두 속성 모두 어렵지 않은 내용이니
오늘 포스팅을 통해 개념을 익히도록 하자!!😎😎
cursor 속성
cursor는 사용되는 것에 따라 여러가지로 나타낼 수 있다.
예를 들어 링크를 나타낼 때는 포인터로 커서를 변경하기도 하고
크기를 조정할 때는 화살표 모양으로 변경하기도 한다.
여러 가지 속성 중 자주 쓰이는 속성에 대해서만 리뷰를 하도록 하겠다.
1. 기본적인 마우스 커서 스타일
: 대부분의 웹페이지에서는 주로 기본적인 커서 스타일을 사용한다.
대게 화살표 형태로, 일반적인 상호작용을 나타낸다.
| 속성값 | 예 | 설명 |
| auto |  |
기본값으로 텍스트에 마우스 커서가 위치하면 화살표에서 (사진) 모양으로 변경됨 |
| default |  |
일반적인 화살표로 auto값과 다르게 텍스트에 마우스가 위치해도 변경되지 않고 기본 화살표를 유지한다. |
| none | 커서가 보이지 않음 |
💻CSS코드
body {
cursor : auto:
cursor : defalt;
cursor : none;
}
2. 포인트 커서 스타일
: 링크나 클릭 가능한 요소에 사용자의 주의를 끌기 위해
포인터 형태의 커서를 사용하는 것이 흔하다.
| 속성값 | 예 | 설명 |
| pointer |  |
대부분 링크를 나타내는 포인터로, 일반적으로는 가리키는 손의 이미지를 사용된다. |
| wait |  |
프로그램이 사용 중이어서 대기중이라는 뜻으로 모래시계나 원형프로그래스 이미지로 나타낸다. |
💻CSS코드
a {
cursor : pointer;
cursor : wait;
}
3. 특정 영역에 대한 커서 변경
: 드래그 앤 드롭 등 특정 영역에만 커서 스타일을 변경하여서
사용자가 특정위치에서 드래그를 해도 되는지 등의 정보를 전달하게끔 한다.
| 속성값 | 예 | 설명 |
| move |  |
뭔가를 움직인다는 뜻으로 드래그가 가능하다는 것을 의미한다. |
| not-allowed |  |
현재 위치에서 아무작업도 할 수 없다는 것을 의미한다. |
4. 사용자 정의 커서 (custom cursor 적용하기)
: svg나 png 등의 이미지 파일을 사용하여
사용자가 새롭게 정의한 cursor를 적용한다.
url() 함수를 이용하여 이미지의 경로를 정의한다.
이미지는 상대경로/절대경로로 지정할 수 있다.
{ cursor : url('') 2 2 ,auto;}
로 표기되며 x, y좌표(2 2)를 지정할 수도 있고
커스텀커서를 불러오지 못했을 경우 뒤에 지정한 커서(auto)로 정의된다.
❗주의❗
이미지의 크기가 너무 큰 경우
custom cursor가 제대로 cursor로 인식되지 않아 불러오지를 못한다.
따라서 vscode에서 크기를 조정하거나
그림판과 같은 도구를 이용하여 크기를 조정해야 한다.
💻HTML 코드
<body>
<div>이미지 커서 만들기</div>
</body>
💻CSS코드
div {
/* 텍스트 가운데 정렬*/
display: flex;
align-items: center;
justify-content: center;
background: yellow;
width: 200px;
height: 200px;
/* 커스텀 마우스 적용 , 이미지를 불러오지 못했을 경우 auto 마우스 적용*/
cursor: url('../image/panda.png'), auto;
}
💻결과
hover 속성
: 사용자가 마우스를 특정 요소 위로 옮겼을 때
그 요소에 적용되는 가상 클래스
기본적인 사용법은 아래와 같다.
selector:hover{
/* 스타일 적용 */
}
여기서 selector는 호버 상태일 때 스타일을 변경하고자 하는 HTML의 요소이다.
앞선 HTML 예제에서 마우스를 올려놓았을 경우 배경색과 글자색을 변경하도록 하려면 다음과 같다.
💻CSS코드
div:hover{
background: green;
color: white;
}
💻결과
hover 속성은 다양한 스타일링 요소에 적용될 수 있으며, 웹 페이지를 더 동적이고 흥미롭게 만들어준다.
이러한 hover속성과 cursor속성을 이용하여 동적이고 완성도 높은 웹페이지를 구성할 때까지
오늘도 열심히 해보아야겠다!!!!!
그럼 이만~~
📝지난 포스팅 리뷰하기
1월 14일이 마지막 포스팅이었다니 더 부지런히 해서 1일 1 포스팅을 하는 날까지 파이팅!!!
grid layout은 컨테이너 적용 속성과 아이템적용 속성으로 나뉜다.
지난 포스팅에서는 아이템 적용 속성에 대해 다뤄보았는데,
아이템 적용 속성에는 크게 grid-column, grid-row, justify-self, align-self로 나뉜다.
(사실 아이템을 배치하는 방법에 따라 또 나뉘게 된다.😥😥)
1️⃣gird-column / gird-row (grid-column-start/end의 단축속성)
: 컨테이너의 줄 번호를 이용해 아이템을 배치하는 속성이다.
보통 몇 번째 줄부터 몇 번째 줄까지 병합할 것인가로 정의된다.
2️⃣justify-self(가로) / align-self(세로)
: 선택된 grid 아이템 1개만 가로/세로 방향으로 정렬한다.
'Study with Yedol > CSS' 카테고리의 다른 글
| CSS transition 적용 방법 | transform과 차이 (0) | 2024.02.03 |
|---|---|
| CSS transform 속성 적용 방법 (0) | 2024.01.24 |
| CSS Grid Layout 아이템 적용 속성 (0) | 2024.01.14 |
| CSS Grid layout 컨테이너 속성 (0) | 2024.01.12 |
| CSS Flex레이아웃 item 적용 속성 (0) | 2024.01.08 |
