선택은 수년 전에 컴퓨터 사용자가 형성 한 습관입니다. 웹에서는 다양한 이유로 콘텐츠를 선택합니다. 어쩌면 텍스트를 복사하여 어딘가에 인용하고 싶거나 어쩌면 대처는 일부 사용자가 더 쉽게 읽을 수 있도록 습관입니다. 모바일의 경우 콘텐츠 선택이 어려우며 성가신 일입니다. 모바일에서 콘텐츠를 선택하고 싶지 않습니다. 기분이 좋지 않습니다!
https://ishadeed.com/article/selection-in-css/
이 기사에서는 의사 클래스 :: selection 및 user-select를 포함하여 CSS 선택에 대한 모든 것을 다룰 것입니다. 이 기사의 목표는 모든 기술과 조화를 이루고 사용 시기와 장소를 알려주는 것입니다.
MDN (Mozilla Developer Network)에 따르면 :
::selection CSS 의사 요소는 사용자가 강조 표시 한 문서 부분에 스타일을 적용합니다 (예 : 텍스트를 마우스로 클릭하고 드래그하는 등).
::selection pseudo-class를 사용하려면 다음을 수행하면 됩니다.
p::selection {
color: #fff;
background-color: #000;
}
::selection에 지원되는 속성
::selection에서는 color, background 및 text-shadow 속성 만 지원됩니다.
맞춤 선택
사용자 정의 선택 효과를 원하면 어떻게 합니까? 예를 들어, 선택 높이를 제어하고 사용자 정의 배경이 있습니까? 아래 그림을 참조하십시오.
가능하지만 조금 까다롭습니다. 수행 방법에 대한 설명은 다음과 같습니다
이제 텍스트를 선택하면 의사 요소가 텍스트의 50%를 세로로 덮습니다. 이것은 우리가 필요한 효과를 모방합니다.
p {
position: relative;
color: #fff;
}
p:after {
content: attr(data-content);
position: absolute;
color: #000;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #fff;
}
p::selection {
background: rgba(76, 125, 225, 0.18);
}크레딧은 StackOverflow 에서 이 질문으로 이동합니다.
다른 옵션으로 위의 내용을 조정하고 대신 CSS 그라디언트를 사용했습니다. 여기서 요점은 높이가 50 %이고 배경을 반복하지 않는 흰색 그라디언트를 사용하는 것입니다.
h1:after {
content: attr(data-content);
position: absolute;
color: #000;
top: 0;
left: 0;
width: 100%;
background: linear-gradient(#fff, #fff) top/100% 50% no-repeat;
}시각적 설명은 아래 그림을 참조하십시오.
더 명확 해지기를 바랍니다! CodePen 데모를 참조하십시오.
선택 애니메이션
이전 데모에서 작업하면서 선택에 애니메이션을 적용 할 수 있습니까? 예를 들어, 텍스트를 선택하고 마우스를 가리 키지 않으면 높이는 50 %이고 마우스를 가리킬 때 높이를 80 %로 늘릴 수 있습니다.
p {
transition: background 0.3s ease-out;
}
p:hover:after {
background-size: 100% 80%;
}여러 줄 문자
불행히도 위의 솔루션은 여러 줄로 된 텍스트에서는 작동하지 않습니다. 제대로 작동하려면 JavaScript를 사용하여 각 단어를 인라인 요소 (예 : <span>)로 묶어야 합니다. 각 단어가 <span> 요소에 있으면 의사 요소가 각 단어에 추가 되어야 하며 동일한 기술을 사용할 수 있습니다.
<span> 요소에 각 단어를 배치하려면 아래 스크립트를 참조하십시오.
let paragraph = document.querySelector(".text");
const words = paragraph.textContent.split(" ");
paragraph.innerHTML = "";
words.forEach(function (word) {
let wordItem = document.createElement("span");
wordItem.setAttribute("data-word", word);
wordItem.innerHTML = word + " ";
paragraph.appendChild(wordItem);
});이제 각 <span> 요소의 스타일을 지정한 다음 각 요소에 의사 요소를 추가해야 합니다.
span {
position: relative;
font-size: 1.25rem;
line-height: 1.4;
}
span::after {
content: attr(data-word);
position: absolute;
left: 0;
right: 0;
top: -0.28em;
height: 75%;
padding-top: 0.14em;
background: #fff;
pointer-events: none;
}
span::selection {
background: rgba(#4C7DE1, 0.18);
}이 솔루션은 작동하지만 모든 텍스트에서 작동하지는 않습니다. 예를 들어 아래 텍스트에는 쉼표, 숫자, 전체 대문자가 있습니다. 선택이 모든 단어에서 일치하지는 않습니다.
여러 줄 선택 스타일을 갖는 것은 해킹 적이며 웹 사이트에서 전 세계적으로 사용해서는 안됩니다. 한 단락에만 사용 된 경우에는 괜찮을 것입니다.
https://codepen.io/shadeed/pen/c6d187eadc8251fcce7a8f85506a9ee3?editors=1100
::selection과 text-shadow로 창의력 얻기
텍스트 섀도우는 사용자 정의 선택에 지원되는 속성 중 하나이므로 여러 텍스트 섀도
긴 그림자 선택
p::selection {
color: #444444;
background: #ffffff;
text-shadow: 1px 0px 1px #cccccc, 0px 1px 1px #eeeeee, 2px 1px 1px #cccccc, 1px 2px 1px #eeeeee, 3px 2px 1px #cccccc, 2px 3px 1px #eeeeee, 4px 3px 1px #cccccc, 3px 4px 1px #eeeeee, 5px 4px 1px #cccccc, 4px 5px 1px #eeeeee, 6px 5px 1px #cccccc, 5px 6px 1px #eeeeee, 7px 6px 1px #cccccc;
}개요 텍스트 선택
CSS 트릭에 대한 이 기사에 따라 텍스트 그림자를 사용하여 텍스트 개요를 시뮬레이션 할 수 있습니다.
p::selection {
color: #fff;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}Blur Selection
또 다른 흥미로운 효과는 선택시 텍스트를 흐리게 하는 것입니다. 색상을 투명하게 만들면 텍스트 그림자가 그대로 유지되고 흐림 효과를 모방합니다.
p::selection {
color: transparent;
text-shadow: 0 0 3px #fff;
}더 많은 사례를 제시 할 수 있을 것입니다. 가능성은 텍스트 그림자로 끝이 없습니다.
텍스트 그림자 및 성능
성능이 저하 될 수 있으므로 무거운 텍스트 그림자 스타일을 사용하지 않는 것이 좋습니다. 나는 당신을 위해 성능 문제를 일으키려고 했습니다 : D 아래를 참조하십시오 :
https://ishadeed.com/assets/selection-css/text-shadow-performance.mp4
그 네온 효과는 매우 무겁습니다. 텍스트를 선택하는 동안 선택한 시간과 선택한 스타일이 나타나는 시간 사이에 지연이 있습니다. 또한 상단과 왼쪽의 글리치에 주목하십시오. 텍스트 그림자를 주의해서 사용하십시오.
양식 요소가 선택 되었습니까?
짧은 대답은 그렇습니다. 나에게 페이지를 선택하는 것이 이상하다는 것을 알았고 입력 내부의 내용이 선택되었음을 알았습니다. 아래 그림을 참조하십시오.
예를 들어, 버튼 텍스트를 선택할 수 있습니다. user-select 섹션에서 양식 요소를 선택할 수 있는지 여부를 논의 할 것입니다.
https://codepen.io/shadeed/pen/40ddda73c073f3cf9162023d6a314838
그러나 여기서 멈추지 않습니다. 선택은 단순히 텍스트를 선택하는 것 이상입니다. 다음 섹션에서는 user-select CSS 속성과 그 이점을 얻는 방법에 대해 설명합니다.
user-select 속성 파기
user-select 속성은 사용자가 특정 텍스트를 선택할 수 있는지 여부를 제공합니다. 일부 유스 케이스에서 텍스트 선택을 사용하지 않는 것이 유용 할 수 있으며, 이는 사용자가 원하지 않는 인접 컨텐츠를 선택하지 않도록 하는 데 유용합니다. (CSS 사양에서 인접한 단어를 빌렸습니다).
이 속성의 가능한 값은 다음과 같습니다.
none, auto, text, contain, all
사용 사례
텍스트와 아이콘
요소에 아이콘이 심볼 또는 글꼴 아이콘 인 경우 텍스트 내에서 선택됩니다. 이것은 실용적이지 않으며 전혀 유용하지 않습니다. 다음을 고려하세요:
<button>Our Services<span aria-hidden="true">▼</span></button>선택하면 다음과 같습니다.
전혀 필요하지 않습니다. 화면 판독기에 노출되지 않도록 aria-hidden 속성이 있습니다. 우리는 이것을 사용할 수 있습니다 :
button span[aria-hidden="true"] {
user-select: none;
}이렇게 하면 아이콘이 선택되는 것을 방지하고 동시에 aria-hidden 속성과 연결됩니다. 따라서 선택해서는 안되는 것은 스크린 리더에 노출되어서는 안됩니다.
Checkbox Input
성가신 것으로 생각되는 일반적인 것은 실수로 체크 박스의 레이블을 클릭하는 동안 실수로 선택하는 것입니다. 아래 그림을 참조하십시오.
<label> 요소에 다음을 추가하면 이 문제를 해결할 수 있습니다.
label {
user-select: none;
}Select All Text
사용자 선택에 대한 흥미로운 가치는 모두입니다. 부모 요소에 적용되면 한 번의 클릭으로 그 안에 포함 된 모든 텍스트가 선택됩니다. 이것은 관련이 있는 컨텐츠에 유용 할 수 있으며 함께 선택해야 합니다. 예를 들어, 코드 스니펫을 선택하십시오.
.embed-code {
user-select: all;
}Web Apps
웹 애플리케이션은 실제 애플리케이션처럼 느껴야 합니다. 컴퓨터 응용 프로그램의 단추 텍스트를 선택할 수 있습니까? 아니요, 못해요 웹에서는 HTML 및 CSS를 통해 만들어진 경우에도 실제 앱처럼 느껴지는 것을 반영하는 것이 중요합니다.
야생에서 몇 가지 예를 들어 봅시다.
Slack
슬랙은 라벨과 입력을 선택할 수 있습니다. 그러나 버튼의 내용은 선택할 수 없습니다.
그리고 여기 모달 제목을 선택하겠습니다.
흥미로운 것은 채팅 날짜를 선택할 수 없다는 것입니다.
앱에서 텍스트를 선택하는 것이 이상하다고 느낍니다. 슬랙에는 사용자가 선택하는 장소가 있습니다. 없음이 사용되었지만 예상보다 적습니다. 사용자로서 모달 제목을 복사하면 아무런 이점이 없습니다.
Notion
나는 Notion을 더 좋아합니다. 텍스트를 선택할 수 있는 웹 사이트가 아니라 실제 앱처럼 느껴집니다.
위의 그림에서 텍스트를 선택할 수 없습니다.
선택을 전체적으로 비활성화 하지 마십시오
텍스트 선택을 전체적으로 비활성화 하는 것은 좋지 않습니다. 사용하는 경우 선택이 유용하지 않은 특정 요소에 적용하십시오. 아래와 같은 유틸리티 클래스를 만들 수 있습니다.
.disable-selection {
-webkit-user-select:text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;
}일반적인 어두운 패턴
사용자가 기사에서 컨텐츠를 선택하려고 할 때 경고를 표시하는 UX 패턴이 있습니다. 이것은 성가 시며 사용자가 자신이 통제되고 있다고 느끼게 합니다. 아래 그림과 같습니다.
Selection For Mobile
사용자가 텍스트를 선택할 때 나타나는 속성 표시기를 비활성화 하는 iOS Safari 용 속성이 있습니다. 나는 그것을 시도했지만 아무것도 하지 않았다.
p {
-webkit-touch-callout: none;
}Wikipedia의 문제를 보여주는 실제 예를 포함하려고 했습니다. 텍스트를 복사하고 아이콘 (들)을 함께 복사했습니다. 이것은 성가신 일입니다. 아래 그림을 참조하십시오.
"listen"에 대처하는 대신 사user-select: none을 추가하는 것이 좋습니다. 선택하지 않으면 텍스트와 함께 복사되지 않습니다.
등록된 댓글이 없습니다.
