TIL 86

AWS 배포를 진행 중이다.

 

현재는 http로만 배포에 성공했으나, https로도 배포하기 위해서는 도메인을 구입해야 했다. 가비아 사이트를 통해 원하는 도메인을 구입했다. 원하는 도메인은 이미 사용 중이어서, 괜찮은 도메인 이름을 조원들과 투표를 통해 선발했다. 뒤에 .com이 붙느냐, .kr이 붙느냐, co.kr이 붙느냐 등 위에 붙는 내용에 따라서 비용이 천차만별이었다. 우리는 .com으로 도메인을 구입하기로도 결정했고, 투표를 통해 선발된 도메인을 구입했다.

1년으로 계약해서 1년 동안 구입한 도메인을 사용할 수 있다.

---

오늘은 리액트 프론트를 구현하다가 cursor 속성에 대해 배웠다. 내용을 정리해보자.

 

cursor 속성은 사용자가 웹 페이지에서 마우스를 특정 요소 위에 올렸을 때 표시되는 커서의 모양을 제어하는 CSS 속성이다. 커서는 사용자와 웹 페이지 간의 상호작용을 직관적으로 나타내는 중요한 역할을 하며, 요소에 대해 어떤 작업이 가능한지 시각적으로 안내해준다.

1. 기본적인 cursor 값들

커서 속성에는 여러 가지 값이 있으며, 각 값은 특정 상황에 맞게 커서 모양을 변경한다. 아래는 자주 사용되는 커서 값들이다.

• auto
  • 기본값이다. 웹 브라우저가 해당 요소에 적합한 커서 모양을 자동으로 결정한다.
  • 예 : 텍스트 입력란 위에서는 I-beam(세로 선)이 표시된다.
• default
  • 기본 커서이다. 보통 화살표 모양의 커서가 표시되며, 일반적인 영역에 사용된다.
  • 예 : 페이지의 빈 공간이나 일반적인 버튼 위에서 사용된다.
• pointer
  • 클릭 가능한 요소 위에 사용된다. 보통 손가락 모양의 커서로 나타난다.
  • 예 : 버튼, 링크, 클릭 가능한 영역에서 사용된다.
• not-allowed
  • 해당 요소를 클릭할 수 없거나 활성화할 수 없음을 나타낸다. 보통 금지된 기호(대각선 선이 그어진 원) 모양으로 나타난다.
  • 예 : 비활성화된 버튼이나 링크에 사용된다.
• wait
  • 사용자가 대기해야 하는 상황에서 사용된다. 보통 시계 아이콘(또는 원형 회전 마크)이 표시된다.
  • 예 : 데이터를 로딩 중일 때 사용된다.
• help
  • 도움말을 제공하는 요소에 사용된다. 보통 물음표 아이콘이 표시된다.
  • 예 : 도움말 버튼에 사용된다.
• text
  • 텍스트를 선택할 수 있는 곳에 사용된다. 보통 I-beam(세로 선) 모양이 나타난다.
  • 예 : 텍스트 입력란, 텍스트 영역 위에서 사용된다.
• crosshair
  • 십자선 모양의 커서이다. 주로 그래픽 디자인에서 사용된다.
  • 예 : 이미지 편집, 그래픽 툴에서 사용된다.
• move
  • 요소를 이동할 수 있음을 나타내는 커서이다. 일반적으로 4개의 화살표가 표시된다.
  • 예 : 드래그 앤 드롭 기능을 사용할 때 사용된다.
• grab / grabbing
  • grab : 드래그할 수 있는 요소에서 커서가 손 모양으로 나타난다.
  • grabbing : 요소를 끌고 있을 때 커서 모양이 바뀐다.
  • 예 : 드래그 가능한 이미지나 요소에서 사용된다.

2. 사용 예시

각각의 cursor 속성은 특정 상호작용에 맞게 스타일을 적용할 수 있다. 예를 들어, 사용자가 클릭할 수 없는 버튼이나 영역에 not-allowed를 적용하고, 클릭 가능한 링크나 버튼에 pointer를 적용할 수 있다.

/* 일반적인 버튼 */
button {
  cursor: pointer; /* 클릭 가능한 요소에서 손 모양 커서 */
}

/* 비활성화된 버튼 */
button[disabled] {
  cursor: not-allowed; /* 클릭할 수 없다는 표시 */
}

/* 텍스트 입력 필드 */
input[type="text"] {
  cursor: text; /* 텍스트를 입력할 수 있다는 표시 */
}

/* 로딩 중 */
div.loading {
  cursor: wait; /* 대기 중 상태 */
}

3. 커서 스타일을 변경하는 이유

• 사용자 경험 향상 : 커서를 변경함으로써 사용자가 해당 요소에 대해 어떤 작업을 할 수 있는지 직관적으로 알 수 있다. 예를 들어, 사용자가 링크나 버튼을 클릭할 수 있다는 것을 명확하게 인지할 수 있다.
• 인터랙티브 요소 강조 : 드래그 앤 드롭, 클릭할 수 있는 버튼, 또는 마우스를 올렸을 때 변하는 요소들에 대해 보다 직관적인 반응을 제공할 수 있다.

4. 기타 사용법

• URL을 이용한 커서 : 커서 이미지 파일을 지정할 수도 있다. 예를 들어, 특정 이미지 파일을 커서로 사용할 수 있다.

.custom-cursor {
  cursor: url('custom-cursor.png'), auto;
}

• 기타 예시 : 마우스 커서 모양을 상황에 맞게 동적으로 제어할 수 있다. 예를 들어, 사용자가 마우스를 올렸을 때 커서를 pointer로 바꾸고, 다시 빠져나가면 기본 커서로 돌아가게 할 수 있다.

5. 다른 커서 값들

• cell : 셀을 나타내는 커서로, 테이블의 셀이나 데이터를 선택할 때 사용된다.
• vertical-text : 수직 텍스트 입력란에 사용된다.
• all-scroll : 요소가 모든 방향으로 스크롤될 수 있음을 나타낸다.