-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathuser-select.html
More file actions
65 lines (64 loc) · 3.12 KB
/
Copy pathuser-select.html
File metadata and controls
65 lines (64 loc) · 3.12 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<!-- 문서 타입 선언: HTML5 -->
<html lang="ko">
<!-- 문서 언어: 한국어 -->
<head>
<meta charset="utf-8">
<!-- 문자 인코딩: UTF-8 -->
<title>user-select - 사용자가 텍스트를 선택할 수 있는지 여부를 제어합니다</title>
<!--
[시각 효과] user-select
설명: 사용자가 텍스트를 선택할 수 있는지 여부를 제어합니다
구문: user-select: auto | text | none | contain | all
팁: 버튼, UI 요소에 none을 설정하면 실수 방지. 코드 블록에 all을 설정하면 클릭 한 번으로 전체 복사 가능.
-->
<style>
/* .demos: 데모 카드들을 가로 정렬하는 컨테이너 */
.demos {
display: flex; /* 플렉스 레이아웃 - 자식 가로 배치 */
gap: 12px; /* 카드 사이 12px 간격 */
justify-content: center; /* 가로 중앙 정렬 */
padding: 20px; /* 안쪽 여백 20px */
}
/* .item: 데모 카드 공통 스타일 */
.item {
padding: 16px 12px; /* 위아래 16px, 좌우 12px */
text-align: center; /* 텍스트 가운데 정렬 */
border-radius: 8px; /* 모서리 둥글게 */
font-weight: bold; /* 굵게 */
font-size: 13px; /* 글자 13px */
width: 80px; /* 너비 고정 80px */
border: 2px solid #e2e8f0; /* 연한 회색 테두리 */
}
/* .selectable: 일반 텍스트 선택 허용 카드 */
.selectable {
user-select: text; /* 사용자가 드래그로 텍스트 선택 가능 - 일반 동작 */
background: #dbeafe; /* 연파란 배경 */
color: #1d4ed8; /* 짙은 파랑 글자 */
}
/* .no-select: 선택 차단 카드 (UI 버튼 등에서 실수 방지) */
.no-select {
user-select: none; /* 드래그로 텍스트 선택 방지 - 버튼/UI에 권장 */
background: #fee2e2; /* 연빨강 배경 */
color: #dc2626; /* 짙은 빨강 글자 */
}
/* .all-select: 한 번 클릭으로 전체 선택 카드 */
.all-select {
user-select: all; /* 한 번 클릭으로 전체 텍스트 선택 - 코드/토큰 복사에 유용 */
background: #d1fae5; /* 연두색 배경 */
color: #059669; /* 짙은 초록 글자 */
}
</style>
</head>
<body>
<!-- user-select 값별 카드 데모 -->
<div class="demos">
<div class="item selectable">선택 가능</div>
<!-- text: 일반 텍스트처럼 드래그 선택 가능 -->
<div class="item no-select">선택 불가</div>
<!-- none: 드래그해도 선택 안 됨 -->
<div class="item all-select">전체 선택</div>
<!-- all: 한 번 클릭으로 전체 선택 -->
</div>
</body>
</html>