속성

속성에 대해서는 HTML 개요에서 간략하게 다루었습니다. 이제 자세히 살펴볼 차례입니다.

속성은 HTML을 매우 강력하게 만드는 요소입니다. 속성은 여는 태그에 표시되는 공백으로 구분된 이름과 이름/값 쌍으로, 요소에 관한 정보와 기능을 제공합니다.

HTML 요소에 라벨이 지정된 시작 태그, 속성 및 닫는 태그

속성은 요소의 동작, 링크 및 기능을 정의합니다. 일부 속성은 전역적으로 사용되므로 모든 요소의 여는 태그 내에 표시될 수 있습니다. 일부 속성은 여러 요소에 적용되지만 모든 요소에 적용되지 않는 반면, 다른 속성은 요소에 따라 다르며 단일 요소에만 관련됩니다. HTML에서는 부울 속성을 제외한 모든 속성과 어느 정도 열거된 속성에 값이 필요합니다.

속성 값에 공백이나 특수문자가 포함되어 있으면 값을 따옴표로 묶어야 합니다. 따라서 가독성을 높이려면 항상 따옴표를 사용하는 것이 좋습니다.

HTML은 대소문자를 구분하지 않지만 일부 속성 값은 대소문자를 구분합니다. HTML 사양에 포함된 값은 대소문자를 구분하지 않습니다. 클래스 및 ID 이름과 같이 정의된 문자열 값은 대소문자를 구분합니다. HTML에서 속성 값이 대소문자를 구분하는 경우 CSS 및 JavaScript에서 속성 선택기의 일부로 사용될 때 대소문자를 구분합니다. 그 외의 경우에는 대소문자를 구분하지 않습니다.

<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">

<!-- the id attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">

부울 속성

불리언 속성이 있는 경우 항상 true입니다. 불리언 속성에는 autofocus, inert, checked, disabled, required, reversed, allowfullscreen, default, loop, autoplay, controls, muted, readonly, multiple,, selected가 포함됩니다. 이러한 속성 중 하나 이상이 존재하면 해당 요소는 사용 중지, 필수, 읽기 전용 등으로 표시됩니다. 존재하지 않으면 그렇지 않습니다.

불리언 값은 생략하거나, 빈 문자열로 설정하거나, 속성의 이름일 수 있습니다. 하지만 값을 실제로 true 문자열로 설정할 필요는 없습니다. true, false, 😀를 포함한 모든 값이 유효하지 않은 경우 true로 확인됩니다.

다음 세 태그는 동일합니다.

<input required>
<input required="">
<input required="required">

속성 값이 false인 경우 속성을 생략합니다. 속성이 true인 경우 속성을 포함하지만 값은 제공하지 않습니다. 예를 들어 required="required"은 HTML에서 유효한 값이 아니지만 required가 불리언이므로 잘못된 값은 true로 확인됩니다. 그러나 잘못된 열거된 속성이 반드시 누락된 값과 동일한 값으로 결정되는 것은 아니므로 어떤 속성이 불리언인지 열거된 속성인지 기억하는 것보다 값을 생략하는 습관이 들고 잠재적으로 잘못된 값을 제공하는 것이 더 쉽습니다.

true와 false 간에 전환할 때는 값을 전환하는 대신 JavaScript를 사용하여 속성을 완전히 추가하고 삭제합니다.

const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");

SVG와 같은 XML 언어에서는 모든 속성에 부울 속성을 비롯한 값을 포함해야 합니다.

열거형 속성

열거형 속성은 불리언 속성과 혼동되기도 합니다. 사전 정의된 유효한 값 집합이 제한되어 있는 HTML 속성입니다. 부울 속성과 마찬가지로 속성이 있지만 값이 누락된 경우 기본값이 있습니다. 예를 들어 <style contenteditable>을 포함하면 기본값은 <style contenteditable="true">입니다.

하지만 불리언 속성과 달리 속성을 생략한다고 해서 거짓인 것은 아닙니다. 누락된 값이 있는 현재 속성이 반드시 참인 것은 아닙니다. 잘못된 값의 기본값은 null 문자열과 반드시 동일하지는 않습니다. 예시를 계속 진행하면 contenteditable가 누락되거나 잘못된 경우 inherit가 기본값이 되고, 명시적으로 false로 설정할 수 있습니다.

기본값은 속성에 따라 다릅니다. 불리언 값과 달리 속성이 있으면 자동으로 'true'가 되지 않습니다. <style contenteditable="false">를 포함하면 요소를 수정할 수 없습니다. 값이 유효하지 않거나(예: <style contenteditable="😀">) 또는 놀랍게도 <style contenteditable="contenteditable">인 경우 값은 유효하지 않으며 기본값은 inherit입니다.

열거된 속성이 있는 대부분의 경우 누락된 값과 잘못된 값은 동일합니다. 예를 들어 <input>의 type 속성이 누락되거나 있지만 값이 없거나 잘못된 값이 있는 경우 기본값은 text입니다. 이는 흔한 일이지만 규칙은 아닙니다. 따라서 어떤 속성이 부울인지 열거된 속성인지 아는 것이 중요합니다. 가능한 경우 값을 생략하여 잘못 지정되지 않도록 값을 생략하고 필요에 따라 값을 조회합니다.

전역 속성

전역 속성은 <head>의 요소를 포함하여 모든 HTML 요소에 설정할 수 있는 속성입니다. 30개 이상의 전역 속성이 있습니다. 이론적으로는 모두 HTML 요소에 추가할 수 있지만 일부 전역 속성은 일부 요소에 설정되었을 때 아무런 영향을 미치지 않습니다. 예를 들어 <meta>에 hidden를 메타 콘텐츠로 설정하는 것은 표시되지 않습니다.

id

전역 속성 id는 요소의 고유 식별자를 정의하는 데 사용됩니다. 다음과 같이 다양한 용도로 사용됩니다. - 링크의 프래그먼트 식별자 대상. - 스크립팅을 위한 요소 식별. - 양식 요소를 라벨과 연결. - 보조 기술에 대한 라벨 또는 설명 제공 - CSS에서 (구체성이 높고 속성 선택기로) 스타일을 타겟팅합니다.

id 값은 공백이 없는 문자열입니다. 문서에 공백이 있으면 문서가 중단되지 않지만 HTML, CSS, JS에서 이스케이프 문자를 사용하여 id를 타겟팅해야 합니다. 다른 모든 문자는 유효합니다. id 값은 😀 또는 .class일 수 있지만 좋은 방법은 아닙니다. 현재와 미래의 사용자가 더 쉽게 프로그래밍할 수 있도록 id의 첫 문자를 문자로 만들고 ASCII 문자, 숫자, _, -만 사용합니다. id 값은 대소문자를 구분하므로 id 이름 지정 규칙을 만든 다음 이 규칙을 따르는 것이 좋습니다.

id는 문서별로 고유해야 합니다. id가 두 번 이상 사용되더라도 페이지의 레이아웃은 손상되지 않지만 자바스크립트, 링크, 요소 상호작용은 예상대로 작동하지 않을 수 있습니다.

탐색 메뉴에는 4개의 링크가 있습니다. 나중에 링크 요소에 대해 다루겠지만, 지금은 링크가 HTTP 기반 URL로 제한되지 않으며, 현재 문서 (또는 다른 문서)의 페이지 섹션에 대한 프래그먼트 식별자일 수 있습니다.

머신러닝 워크숍 사이트의 페이지 헤더 탐색 메뉴에 4개의 링크가 있습니다.

href 속성은 링크를 활성화하면 사용자를 안내하는 하이퍼링크를 제공합니다. URL에 해시 표시 (#) 뒤에 문자열이 오는 경우 해당 문자열은 프래그먼트 식별자입니다. 이 문자열이 웹페이지에 있는 요소의 id과 일치하면 프래그먼트는 해당 요소의 앵커 또는 북마크입니다. 브라우저는 앵커가 정의된 지점까지 스크롤합니다.

이 4개의 링크는 id 속성으로 식별되는 페이지의 4개 섹션으로 연결됩니다. 사용자가 탐색 메뉴에 있는 링크 4개 중 하나를 클릭하면 프래그먼트 식별자에 의해 연결된 요소(일치하는 ID에서 #를 뺀 요소)가 스크롤하여 표시됩니다.

머신러닝 워크숍의 <main> 콘텐츠는 ID가 포함된 4개의 섹션으로 구성되어 있습니다. 사이트 방문자가 <nav>의 링크 중 하나를 클릭하면 프래그먼트 식별자가 있는 섹션이 스크롤하여 표시됩니다. 마크업은 다음과 유사합니다.

<section id="reg">
  <h2>Machine Learning Workshop Tickets</h2>
</section>

<section id="about">
  <h2>What you'll learn</h2>
</section>

<section id="teachers">
  <h2>Your Instructors</h2>
  <h3>Hal 9000 <span>&amp;</span> EVE</h3>
</section>

<section id="feedback">
  <h2>What it's like to learn good and do other stuff good too</h2>
</section>

<nav> 링크의 프래그먼트 식별자를 비교해 보면 각각 <main>에 있는 <section>의 id와 일치합니다. 브라우저에서 무료로 '페이지 상단' 링크를 제공합니다. href="#top"를 설정하거나 대소문자를 구분하지 않거나 단순히 href="#"을 설정하면 사용자가 페이지 상단으로 스크롤됩니다.

href의 해시 표시 구분자는 프래그먼트 식별자의 일부가 아닙니다. 프래그먼트 식별자는 항상 URL의 마지막 부분이며 서버로 전송되지 않습니다.

CSS 선택 도구

CSS에서는 #feedback와 같은 ID 선택기를 사용하거나 특정성을 낮추기 위해 대소문자를 구분하는 속성 선택기 [id="feedback"]를 사용하여 각 섹션을 타겟팅할 수 있습니다.

스크립트 작성

MLW.com에는 마우스 사용자만을 위한 이스터 에그가 있습니다. 조명 스위치를 클릭하면 페이지가 켜지거나 꺼집니다.

조명 스위치 이미지의 마크업은 다음과 같습니다. html <img src="svg/switch2.svg" id="switch" alt="light switch" class="light" /> id 속성은 getElementById() 메서드의 매개변수로, # 접두사를 사용해 querySelector() 및 querySelectorAll() 메서드의 매개변수의 일부로 사용할 수 있습니다.

const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");

한 가지 JavaScript 함수는 id 속성별로 요소를 타겟팅하는 이 기능을 활용합니다.

<script>
  /* switch is a reserved word in js, so we us onoff instead */
  const onoff = document.getElementById('switch');
  onoff.addEventListener('click', function(){
    document.body.classList.toggle('black');
  });
</script>

<label>

HTML <label> 요소에는 연결된 양식 컨트롤의 id를 값으로 사용하는 for 속성이 있습니다. 모든 양식 컨트롤에 id를 포함하고 각각을 라벨의 for 속성과 페어링하여 명시적 라벨을 만들면 모든 양식 컨트롤에 연결된 라벨이 있습니다.

각 라벨은 정확히 하나의 양식 컨트롤과 연결될 수 있지만 양식 컨트롤에는 두 개 이상의 연결된 라벨이 있을 수 있습니다.

양식 컨트롤이 <label> 열기 태그와 닫는 태그 사이에 중첩되어 있으면 for 속성과 id 속성이 필요하지 않습니다. 이를 '암시적' 라벨이라고 합니다. 라벨은 모든 사용자에게 각 양식 컨트롤의 용도를 알려줍니다.

<label>
  Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.

for와 id가 연결되어 있으면 보조 기술 사용자가 정보를 사용할 수 있습니다. 또한 라벨의 아무 곳이나 클릭하면 연결된 요소에 포커스가 있어 컨트롤의 클릭 영역이 확장됩니다. 이 기능은 기민성 문제가 있는 사용자에게 유용할 뿐만 아니라 마우스의 정확도가 떨어지는 데 도움이 될 뿐만 아니라, 라디오 버튼보다 넓은 손가락을 사용하는 모든 휴대기기 사용자에게도 도움이 됩니다.

이 코드 예에서 가짜 퀴즈의 다섯 번째 가짜 질문은 단일 선택 객관식 질문입니다. 각 양식 컨트롤에는 명시적 라벨이 있으며 각 라벨에는 고유한 id가 있습니다. 실수로 ID가 중복되는 것을 방지하기 위해 ID 값은 질문 번호와 값의 조합입니다.

라디오 버튼을 포함할 때는 라벨이 라디오 버튼의 값을 설명하므로 <fieldset>에 같은 이름의 모든 버튼이 포함됩니다. <legend>는 전체 세트의 라벨 또는 질문입니다.

기타 접근성 사용

접근성 및 사용성 측면에서 id를 사용하는 것은 라벨에만 국한되지 않습니다. 텍스트 소개에서 <section>는 <h2>의 id를 <section>의 aria-labelledby 값으로 참조해 액세스 가능한 이름을 제공하여 리전 랜드마크로 변환되었습니다.

<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

접근성을 보장하는 데 사용할 수 있는 aria-* 상태와 속성은 50개가 넘습니다. aria-labelledby, aria-describedby, aria-details, aria-owns은 공백으로 구분된 id 참조 목록을 값으로 사용합니다. 현재 포커스가 지정된 하위 요소를 식별하는 aria-activedescendant는 포커스가 있는 단일 요소 (한 번에 하나의 요소에만 포커스를 둘 수 있음)의 단일 id 참조를 값으로 사용합니다.

class

class 속성은 CSS(및 자바스크립트)가 포함된 요소를 타겟팅하는 추가적인 방법을 제공하지만, 프레임워크 및 구성요소 라이브러리에서 사용할 수는 있지만 HTML에서 다른 용도는 없습니다. 클래스 속성은 공백으로 구분된 요소 클래스 목록을 값으로 사용합니다.

의미 있는 체계적인 구조를 만들면 게재위치와 기능을 기반으로 엘리먼트를 타겟팅할 수 있습니다. 사운드 구조를 통해 하위 요소 선택기, 관계형 선택기, 속성 선택기를 사용할 수 있습니다. 이 섹션 전체에서 속성에 관해 알아보면서 동일한 속성 또는 속성 값을 가진 요소의 스타일을 지정하는 방법을 고려하세요. 클래스 속성을 사용해서는 안 된다는 것이 아니라, 대부분의 개발자가 그럴 필요가 없다는 사실을 모르는 경우가 많습니다.

지금까지 MLW는 클래스를 사용하지 않았습니다. 하나의 클래스 이름 없이 사이트를 시작할 수 있나요? 그럼 보겠습니다.

style

style 속성을 사용하면 속성이 설정된 단일 요소에 적용되는 스타일인 인라인 스타일을 적용할 수 있습니다. style 속성은 해당 값으로 CSS 속성 값 쌍을 사용합니다. 값의 문법은 CSS 스타일 블록의 콘텐츠와 동일합니다. 즉, CSS에서와 마찬가지로 속성 다음에 콜론이 이어지며, 각 선언의 끝에는 세미콜론이 값 뒤에 옵니다.

스타일은 속성이 설정된 요소에만 적용되며, 중첩된 요소나 <style> 블록 또는 스타일시트에서 다른 스타일 선언으로 재정의되지 않은 경우 하위 요소가 상속된 속성 값을 상속합니다. 이 값은 해당 요소에만 적용된 단일 스타일 블록의 콘텐츠와 동일하게 구성되므로 생성된 콘텐츠, 키프레임 애니메이션을 만들거나 다른 @ 규칙을 적용하는 데는 사용할 수 없습니다.

style는 실제로 전역 속성이지만 사용하지 않는 것이 좋습니다. 대신 별도의 파일에 스타일을 정의하세요. 즉, style 속성은 개발 중에 테스트 목적과 같이 빠르게 스타일을 지정할 수 있도록 유용하게 사용할 수 있습니다. 그런 다음 '솔루션' 스타일을 선택하여 연결된 CSS 파일에 고정합니다.

tabindex

tabindex 속성을 모든 요소에 추가하여 포커스를 받도록 사용 설정할 수 있습니다. tabindex 값은 탭을 탭 순서에 추가할지, 그리고 선택적으로 기본이 아닌 탭 순서에 추가할지 정의합니다.

tabindex 속성은 정수를 값으로 사용합니다. 음수 값(규칙적으로 -1 사용)을 사용하면 요소가 포커스를 받을 수 있습니다(예: JavaScript를 통함). 하지만 요소를 탭 시퀀스에 추가하지는 않습니다. tabindex 값이 0이면 탭을 통해 요소를 포커스 가능하게 만들고 소스 코드 순서에 따라 페이지의 기본 탭 순서에 추가됩니다. 값이 1 이상인 경우 요소가 우선순위가 지정된 포커스 시퀀스에 배치되므로 권장되지 않습니다.

이 페이지에는 <button> 역할을 하는 <share-action> 맞춤 요소를 사용하는 공유 기능이 있습니다. 맞춤 요소를 키보드 기본 탭 순서에 추가할 수 있도록 tabindex가 0으로 포함됩니다.

<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

button의 role는 스크린 리더 사용자에게 이 요소가 버튼처럼 작동해야 한다고 알립니다. JavaScript는 클릭 및 keydown 이벤트를 모두 처리하고 Enter 및 스페이스바 키 누름을 처리하는 등 버튼 기능의 약속을 유지하는 데 사용됩니다.

양식 컨트롤, 링크, 버튼, 콘텐츠 수정 가능 요소는 포커스를 받을 수 있습니다. 키보드 사용자가 탭 키를 누르면 마치 tabindex="0"가 설정된 것처럼 포커스 가능한 다음 요소로 포커스가 이동합니다. 다른 요소는 기본적으로 포커스를 맞출 수 없습니다. 이러한 요소에 tabindex 속성을 추가하면 다른 방법으로는 포커스를 받을 수 없을 때도 포커스를 받을 수 있습니다.

문서에 tabindex이 1 이상인 요소가 포함된 경우 해당 요소는 별도의 탭 시퀀스에 포함됩니다. 코드펜에서 볼 수 있듯이, 탭이 가장 낮은 값부터 가장 높은 값까지 별도의 순서로 시작되며, 그 전에 정규 시퀀스의 소스 순서로 진행됩니다.

탭 순서를 변경하면 사용자 환경이 크게 저하될 수 있습니다. 이로 인해 콘텐츠를 탐색하는 데 키보드와 스크린 리더 등 보조 기술에 의존하기가 어려워집니다. 또한 개발자가 관리하고 유지하기 어려운 일입니다. 초점이 중요합니다. 전체 모듈이 포커스와 포커스 순서를 논의합니다.

role

role 속성은 whatWG HMTL 사양이 아닌 ARIA 사양의 일부입니다. role 속성은 콘텐츠에 시맨틱 의미를 제공하여 스크린 리더가 사이트 사용자에게 객체의 예상되는 사용자 상호작용을 알릴 수 있도록 하는 데 사용할 수 있습니다.

콤보 상자, 메뉴 바, 탭 목록, 트리그리드 등 몇 가지 일반적인 UI 위젯에는 해당하는 네이티브 HTML이 없습니다. 예를 들어 탭으로 구분된 디자인 패턴을 만들 때 tab, tablist, tabpanel 역할을 사용할 수 있습니다. 사용자 인터페이스를 실제로 볼 수 있는 사람은 위젯을 탐색하고 연결된 탭을 클릭하여 다양한 패널을 표시하는 방법을 경험을 통해 배웠습니다. 버튼 그룹을 사용하여 다양한 패널을 표시할 때 tab 역할을 <button role="tab">에 포함하면 스크린 리더 사용자가 일반적인 버튼 같은 기능을 구현하는 대신 현재 포커스가 있는 <button>가 관련 패널을 뷰로 전환할 수 있음을 알 수 있습니다.

role 속성은 브라우저 동작을 변경하거나 키보드 또는 포인터 기기 상호작용을 변경하지 않습니다. role="button"를 <span>에 추가해도 <button>로 변환되지 않습니다. 따라서 시맨틱 HTML 요소를 원래 용도에 맞게 사용하는 것이 좋습니다. 그러나 올바른 요소를 사용할 수 없는 경우 role 속성을 사용하면 비시맨틱 요소가 시맨틱 요소의 역할에 맞게 재구성되었을 때 스크린 리더 사용자에게 이를 알릴 수 있습니다.

contenteditable

contenteditable 속성이 true로 설정된 요소는 수정 가능하고 포커스 가능하며 tabindex="0"가 설정된 것처럼 탭 순서에 추가됩니다. Contenteditable은 true 및 false 값을 지원하는 열거형 속성이며 속성이 없거나 잘못된 값이 있는 경우 기본값은 inherit입니다.

다음 세 개의 여는 태그는 동일합니다.

<style contenteditable>
<style contenteditable="">
<style contenteditable="true">

<style contenteditable="false">를 포함하면 요소를 수정할 수 없습니다(예: <textarea>처럼 기본적으로 수정 가능하지 않은 경우). 값이 유효하지 않은 경우(예: <style contenteditable="😀"> 또는 <style contenteditable="contenteditable">) 기본값은 inherit입니다.

상태 간에 전환하려면 HTMLElement.isContentEditable 읽기 전용 속성의 값을 쿼리합니다.

const editor = document.getElementById("myElement");
if(editor.contentEditable) {
  editor.setAttribute("contenteditable", "false");
} else {
  editor.setAttribute("contenteditable", "");
}

또는 editor.contentEditable를 true, false 또는 inherit로 설정하여 이 속성을 지정할 수 있습니다.

전역 속성은 <style> 요소를 비롯한 모든 요소에 적용할 수 있습니다. 속성과 약간의 CSS를 사용하여 라이브 CSS 편집기를 만들 수 있습니다.

<style contenteditable>
style {
  color: inherit;
  display:block;
  border: 1px solid;
  font: inherit;
  font-family: monospace;
  padding:1em;
  border-radius: 1em;
  white-space: pre;
}
</style>

style의 color을 inherit가 아닌 값으로 변경해 보세요. 그런 다음 style를 p 선택기로 변경해 보세요. 표시 속성을 삭제하지 마세요. 삭제하면 스타일 블록이 사라집니다.

커스텀 속성

지금까지 HTML 전역 속성의 표면에 대해서만 살펴보았습니다. 하나 또는 제한된 요소 집합에만 적용되는 속성이 훨씬 더 많이 있습니다. 수백 개의 속성이 정의되어 있어도 사양에 없는 속성이 필요할 수 있습니다. HTML이 다뤄집니다.

data- 접두사를 추가하여 원하는 맞춤 속성을 만들 수 있습니다. data-로 시작하고 그 뒤에 xml로 시작하지 않고 콜론 (:)이 포함되지 않은 일련의 소문자가 오는 모든 속성의 이름을 지정할 수 있습니다.

data로 시작하지 않는 지원되지 않는 속성을 만드는 경우 HTML이 허용되고 손상되지 않지만, xml로 맞춤 속성을 시작하거나 :를 포함하는 경우에도 data-로 시작하는 유효한 맞춤 속성을 만들면 여러 가지 이점이 있습니다. 맞춤 데이터 속성을 사용하면 실수로 기존 속성 이름을 사용하지 않는다는 것을 알 수 있습니다. 맞춤 데이터 속성은 미래에도 활용 가능합니다.

브라우저는 특정 data- 접두사 속성의 기본 동작을 구현하지 않지만 커스텀 속성을 반복할 수 있는 기본 제공 데이터 세트 API가 있습니다. 맞춤 속성은 자바스크립트를 통해 애플리케이션별 정보를 효과적으로 전달할 수 있는 좋은 방법입니다. data-name 형식으로 요소에 맞춤 속성을 추가하고 해당 요소에서 dataset[name]를 사용하여 DOM을 통해 이러한 속성에 액세스합니다.

<blockquote data-machine-learning="workshop"
  data-first-name="Blendan" data-last-name="Smooth"
  data-formerly="Margarita Maker" data-aspiring="Load Balancer"
  data-year-graduated="2022">
  HAL and EVE could teach a fan to blow hot air.
</blockquote>

전체 속성 이름을 사용하는 getAttribute()를 사용하거나 더 간단한 dataset 속성을 활용할 수 있습니다.

el.dataset[machineLearning]; // workshop
e.dataset.machineLearning; // workshop

dataset 속성은 각 요소의 data- 속성에 대한 DOMStringMap 객체를 반환합니다. <blockquote>에는 여러 커스텀 속성이 있습니다. 데이터 세트 속성이 있으면 이름과 값에 액세스하기 위해 커스텀 속성이 무엇인지 알 필요가 없습니다.

for (let key in el.dataset) {
  customObject[key] = el.dataset[key];
}

이 문서의 속성은 전역적이므로 모든 HTML 요소에 적용할 수 있습니다 (모든 HTML 요소에 영향을 미치지는 않음). 다음에는 다루지 않은 소개 이미지의 두 속성(target 및 href)과 링크를 자세히 살펴보면서 기타 요소별 속성 몇 가지를 살펴보겠습니다.

학습 내용 확인하기

속성에 관한 지식을 테스트합니다.

id는 문서 내에서 고유해야 합니다.

거짓
다시 시도해 보세요.
참
정답입니다.

올바른 형식의 맞춤 속성을 선택합니다.

data-birthday
정확함
birthday
다시 시도해 보세요.
data:birthday
다시 시도