CSS 방지 텍스트 선택
CSS에는 요소를 수정하는 데 사용할 수 있는 속성이 많이 있습니다. 여기서 수정이라는 단어는 요소의 스타일을 지정하거나 요소의 다양한 컨트롤을 제공하거나 제거하는 것을 의미합니다.
CSS user-select 속성을 사용하여 텍스트 선택 방지
웹 페이지를 디자인할 때 일반적으로 단락, 표의 데이터, 양식의 레이블 등의 텍스트를 추가합니다. 해당 텍스트가 웹 페이지에 표시되면 이를 보는 사람들은 텍스트를 선택하고 다양한 활동을 위해 복사할 수 있습니다. .
예를 들어, 웹 페이지를 방문하는 사람은 이 페이지에서 일부 텍스트를 선택하고 복사하여 사용할 수 있습니다. 그러나 일부 웹 페이지 소유자는 이를 선호하지 않습니다. 이를 방지하기 위해 텍스트 선택을 차단할 수 있습니다.
CSS는 user-select 속성인 텍스트 선택을 방지하는 속성을 제공합니다. 이 속성을 사용하여 사용자가 텍스트를 선택하지 못하도록 할 수 있습니다.
그러나 우리는 모두 다른 종류의 웹 브라우저를 사용합니다. 다른 유형의 웹 브라우저를 사용하는 경우 이 속성을 사용하는 방식을 변경해야 합니다.
아래에서는 다양한 웹 브라우저에서 user-select 속성을 사용하는 방법을 보여줍니다.
통사론:
-webkit-user-select: none; /*Standard method. Can be used in Safari*/
-moz-user-select: none; /*Standard method. Can be used in Firefox*/
-ms-user-select: none; /*Standard method. Can be used in Internet Explorer or Edge*/
user-select: none; /*Standard method. Can be used in Google Chrome*/
첫 번째 방법은 기본 브라우저가 Safari이기 때문에 iOS 및 Mac 사용자를 위한 것입니다. Firefox 사용자는 두 번째 방법을, Internet Explorer 또는 Edge를 사용하는 사용자는 세 번째 방법을 사용할 수 있습니다.
구글 크롬을 브라우저로 사용하시는 분들은 네 번째 방법을 사용하시면 됩니다.
위 구문에는 user-select 속성 값에 지정할 수 있는 몇 가지 옵션이 있습니다.
| 옵션 | 설명 |
|---|---|
auto |
auto 값은 user-select 속성이 사용하는 기본값입니다. 브라우저에서 허용하는 경우 텍스트를 선택할 수 있습니다. |
none |
이 옵션을 사용하면 사용자는 텍스트를 선택할 수 없습니다. 즉, 텍스트 선택을 방지하고 있습니다. |
text |
이를 사용하여 사용자가 텍스트를 선택할 수 있도록 할 수 있습니다. |
all |
이 옵션을 통해 더블 클릭이 아닌 한 번의 클릭으로 텍스트를 선택할 수 있습니다. |
이 기사에서는 사용자가 텍스트를 선택하지 못하도록 하는 user-select 속성의 none 옵션에 대해 설명합니다.
텍스트에 user-select: none 추가
이 개념을 쉽게 이해하기 위해 다음과 같이 간단한 텍스트를 웹 페이지에 추가해 보겠습니다.
<div>
<p class="unselect">This is a text</p>
</div>
텍스트에 스타일 추가
더 나은 보기를 위해 이 텍스트에 몇 가지 CSS 스타일을 추가해 보겠습니다.
.unselect{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 30px;
color: navy;
padding-left: 10px;
}
여기서는 텍스트에 글꼴, 글꼴 크기 및 패딩을 지정했습니다. 다음과 같아야 하며 텍스트를 선택할 수 있습니다.
보시다시피 평소와 같이 텍스트를 선택할 수 있습니다.
none 값을 사용하여 user-select 속성을 추가합니다.
스타일을 추가한 후 user-select 속성을 설정하여 텍스트 선택을 방지할 수 있습니다. 아래와 같이 속성 값으로 none을 사용합니다.
.unselect{
user-select: none;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 30px;
color: navy;
padding-left: 10px;
}
<div>
<p class="unselect">This is a text</p>
</div>
보시다시피 이제 텍스트를 선택할 수 없습니다.
그러나 위의 코드는 Google Chrome 웹 브라우저를 사용할 때만 작동합니다. 위의 코드를 수정하여 다른 웹 브라우저에서 사용할 수 있습니다.
.unselect{
user-select: none; /*Standard method. Can use in Google Chrome*/
-webkit-user-select: none; /*Standard method. Can use in Safari*/
-moz-user-select: none; /*Standard method. Can use in Firefox*/
-ms-user-select: none; /*Standard method. Can use in Internet Explorer or Edge*/
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 30px;
color: navy;
padding-left: 10px;
}
<div>
<p class="unselect">This is a text</p>
</div>
테이블의 텍스트에 user-select 속성 추가
이제 이 속성을 사용해 볼 테이블을 만들어 보겠습니다. 우리가 만들 테이블에는 이름과 성이라는 두 개의 열과 관련 데이터를 포함하는 두 개의 행이 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="Styles.css">
<title>HTML prevent text selection</title>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Jamie</td>
<td>Anderson</td>
</tr>
</table>
</body>
</html>
보시다시피 테이블을 만들었지만 스타일이 없습니다. CSS를 사용하여 테이블의 스타일을 지정해 보겠습니다.
table {
background-color: rgb(243, 150, 253);
font-family: arial, sans-serif;
border-collapse: collapse;
width: auto;
}
td, th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="Styles.css">
<title>HTML prevent text selection</title>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Jamie</td>
<td>Anderson</td>
</tr>
</table>
</body>
</html>
결과에 표시된 대로 테이블의 스타일을 지정했습니다. 또한 테이블 내부의 텍스트를 선택할 수 있으므로 비활성화해 보겠습니다.
이전 예에서와 같이 user-select 속성을 테이블에 추가할 수 있습니다. 전체 표에 추가하거나 선택한 셀에만 추가할 수 있습니다.
테이블 헤더에 대해서만 user-select 속성을 추가합니다. 동일한 CSS 코드에 아래 코드 청크를 추가할 수 있습니다.
th{
user-select: none; /*Standard method. Can use in Google Chrome*/
-webkit-user-select: none; /*Standard method. Can use in Safari*/
-moz-user-select: none; /*Standard method. Can use in Firefox*/
-ms-user-select: none; /*Standard method. Can use in Internet Explorer or Edge*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="Styles.css">
<title>HTML prevent text selection</title>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Jamie</td>
<td>Anderson</td>
</tr>
</table>
</body>
</html>
코드를 실행하면 아래와 같은 결과를 얻을 수 있습니다.
보시다시피 헤더의 텍스트만 선택할 수 없습니다.
결론
이 기사에서는 텍스트 선택 방지와 CSS의 user-select 속성이 이를 달성하는 데 어떻게 도움이 되는지에 대해 논의했습니다. 우리가 배운 것처럼 다양한 웹 브라우저에서 이 속성을 사용하는 다양한 방법이 있습니다.
텍스트 선택 방지의 기본 사항을 명확히 하기 위해 두 가지 예를 들었습니다. 다른 방법이 있지만 CSS는 이를 수행하는 간단한 방법을 제공합니다.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.