선택 태그에 대한 HTML 읽기 전용
-
<select readonly>속성 -
<select disabled>속성을 사용하여 HTML의select태그에 대한readonly속성을 에뮬레이션합니다. -
pointer-events: none속성을 사용하여 HTML의select태그에 대한readonly속성을 에뮬레이트합니다. - 결론
HTML(Hyper Text Markup Language)은 웹사이트 형식 지정에 널리 사용됩니다. 또한 CSS(Cascading Style Sheets)는 형식이 지정된 웹 사이트의 스타일을 지정하는 데 사용할 수 있습니다.
다음은 HTML 및 CSS에서 사용자 및 커서의 동작을 제어하는 데 사용되는 일부 특성입니다.
<select readonly> 속성
<select>는 키보드, 마우스 또는 터치 스크린에서 사용자 입력을 얻기 위해 가장 일반적으로 사용되는 HTML 태그입니다. 일반적으로 <select>를 사용하면 사용자가 하나 이상의 옵션을 선택할 수 있는 반면 <select readonly>를 사용하면 값을 변경하지 않고 표시만 할 수 있습니다.
readonly 속성은 입력 요소가 편집 불가능하고 읽기 전용임을 지정합니다. 또한 텍스트, URL, 전화번호, 이메일, 비밀번호, 날짜, 월, 주, 시간 및 숫자는 읽기 전용에 대해 지원되는 형식입니다.
통사론:
<select readonly>
그러나 <select readonly>는 이미 사용되지 않으므로 요즘 HTML에서 유효하지 않습니다. 대신 disabled 속성을 사용할 수 있습니다.
<select disabled> 속성을 사용하여 HTML의 select 태그에 대한 readonly 속성을 에뮬레이션합니다.
disabled 속성은 드롭다운 목록이 비활성화되도록 지정하는 데 사용되는 부울 속성입니다. 비활성화를 사용하면 요소를 클릭할 수 없고 사용할 수 없으며 사용자가 제어할 수 없습니다.
또한 입력 필드가 해당 없음으로 표시되고 사용할 수 없습니다.
통사론:
<select disabled>
더 명확한 아이디어를 얻기 위해 드롭다운 목록을 만들어 예를 들어 이 구문을 자세히 살펴보겠습니다.
예제 코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML disabled Attribute</title>
</head>
<body style="text-align: center;">
<h1 style = "color: brown;"> HTML Select Disabled Attribute </h1><br>
<p style="color: black; font-size: large"> What is your Home Country? </p>
<p style="color: grey"> (Selection of choice is disabled) </p>
<select disabled>
<option value="Sri Lanka">Sri Lanka</option>
<option value="India">India</option>
<option value="Turkey">Turkey</option>
</select>
</body>
</html>
먼저 HTML 비활성화 속성이라는 제목으로 메타 문자 집합을 정의하여 HTML 파일을 열고 <head>를 닫은 후 콘텐츠를 중앙에 유지하도록 스타일이 지정된 모든 요소로 <body>를 열었습니다.
그런 다음 제목의 이름을 <h1> 및 갈색으로 HTML Select Disabled Attribute로 정의했습니다. <br>을 사용하여 제목 뒤에 줄 바꿈이 있습니다.
그런 다음 “고향이 어디입니까?“라는 질문을 정의했습니다. <p>를 사용하고 큰 글꼴 크기와 검정색을 사용합니다. 그런 다음 회색으로 문구(Selection of choice is disabled)를 정의했습니다.
그런 다음 <선택 비활성화>를 사용하여 드롭다운 목록을 비활성화합니다. <select disabled>로 비활성화된 경우에도 일부 값을 Sri Lanka, Turkey 및 India로 정의했습니다.
HTML 파일의 끝에서 사용된 모든 태그가 결과적으로 닫힙니다.
출력에 따르면 비활성화된 드롭다운 목록은 회색이며 사용자가 제어할 수 없습니다. 사용자는 드롭다운 목록에서 옵션을 클릭하거나 선택할 수 없습니다. 이것이 <선택 비활성화> 기능이 작동하는 방식입니다.
readonly와 disabled의 차이점은 readonly를 사용하면 사용자가 제공한 입력을 볼 수 있는 반면 disabled는 사용자에게 클릭할 수 없는 요소를 제공한다는 것입니다.
pointer-events: none 속성을 사용하여 HTML의 select 태그에 대한 readonly 속성을 에뮬레이트합니다.
pointer-events는 <select readonly> 대신 사용할 수 있는 또 다른 방법입니다. readonly조차도 pointer-events 속성과 함께 none을 사용할 때 최소한 사용자가 볼 수 있도록 지원합니다. 사용자의 화살표 클릭 이벤트를 비활성화합니다.
전반적으로 pointer-events 속성은 마우스 이벤트에 대한 응답, 호버링, 클릭 등과 같은 활동을 관리하여 커서의 반응을 제어합니다. none 속성이 있는 pointer-events는 모든 클릭을 방지하고 요소에 대한 커서의 동작을 제어합니다.
통사론:
pointer-events: none;
소셜 미디어의 두 링크를 사용하는 예를 통해 포인터 이벤트가 없음 속성과 함께 작동하는 방식을 정의해 보겠습니다. 이 예에서는 HTML 및 CSS 파일을 만들었습니다.
HTML 코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Using none in Pointer Events</title>
</head>
<body>
<p> Social Media </p>
<ul>
<li><a href="https://www.facebook.com">Facebook</a></li>
<li><a href="https://www.whatsapp.com">Whatsapp</a></li>
</ul>
</body>
</html>
위의 HTML 코드에 이어 먼저 <head>를 연 후 문서 유형을 HTML과 메타 문자 집합으로 정의했습니다. 또한 href를 사용하여 style.css 파일을 연결하고 제목을 포인터 이벤트에서 사용하지 않음으로 정의했습니다.
<head>를 닫은 후 <body>를 열고 Facebook 및 Whatsapp이라는 두 개의 목록 항목과 함께 Social Media라는 정렬되지 않은 목록을 관련 링크와 함께 생성했습니다.
style.css 코드:
p{
font-size: 40px;
color: blue;
}
li{
font-size: 20px;
color: brown;
}
a[href="https://www.whatsapp.com"]{
pointer-events: none;
}
먼저 styles.css에서 소셜 미디어 단락을 40px 크기의 파란색으로 표시하도록 정의했습니다. 또한 항목 목록은 글꼴 크기가 20px인 갈색입니다.
none 속성이 있는 pointer-events는 차이를 확인하기 위해 하나의 소셜 미디어 링크에 적용됩니다.
위 출력에서 볼 수 있듯이 커서를 Facebook으로 이동하면 손 모양이 표시됩니다. 그러나 커서를 Whatsapp으로 이동하면 화살표 기호로만 남습니다.
이 예제를 통해 pointer-event: none 기능에 대한 아이디어를 얻었기를 바랍니다.
결론
전반적으로 위 내용 전반에 걸쳐 입력 요소에 대한 사용자 액세스를 제한하고 이를 선택하고 지적하는 방법에 대해 논의했습니다. 다른 많은 방법이 있지만 몇 가지만 설명했습니다.
<select readonly>를 사용하는 것조차 HTML5에서 이미 사용되지 않는 방법입니다. 이를 사용하는 대신 위에서 언급한 기술을 사용하여 유사한 출력을 얻을 수 있습니다.
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.