아 오늘 금요일인 줄 아 오늘 금요일인 줄

▶ tabindex 속성 Tab키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 숫자로 지정. 대화형 콘텐츠(Interactive Content)는 기본적으로 코드 순서대로 탭 순서가 지정됨. - 대화형 콘텐츠? 사용자와의 상호작용을 위해 특별하게 설계된 요소. ex) , , ... - 대화형 콘텐츠: developer.mozilla.org/ko/docs/Web/Guide/HTML/Content_categories#%EB%8C%80%ED%99%94%ED%98%95_%EC%BD%98%ED%85%90%EC%B8%A0 비대화형 콘텐츠에도 tabindex="0"을 지정하면 대화형 콘텐츠와 같이 탭 순서를 사용할 수 있음. tabindex="-1"을 통해 포커스는 가능하지만 탭 순서에서 제외 가능. - 탭 이동..

▶ draggable 속성 요소가 Drag and Drop API를 사용 가능한지 여부를 지정. drag해서 drop할 수 있는 명령 체계를 활용할 수 있는지 없는지 설정. 작성하지 않는 경우 true/false가 아니라 기본값이 auto로 지정됨. - auto는 드래그 가능 여부를 브라우저가 판단하는 것. ▶ hidden 속성 요소를 숨김 - hidden 속성을 통해 화면상에는 입력창이 나타나지 않지만 전송 버튼 클릭 후의 결과 화면에서 URL을 보면 에 지정된 값이 전송된 것을 확인할 수 있음. - hidden 속성을 통해 특정 부분을 숨길 수는 있지만 숨겨진 부분의 HTML 내용은 동작할 수 있는 부분임.

▶ data-* 사용자 정의 데이터 속성을 지정. 일반적으로 JavaScript에서 이용할 수 있는 데이터(정보)를 HTML에 저장하는 용도로 사용. - HTML에서 보관하고 있다가 자스에서 필요할 때 활용 가능. data-*에서 data- 이후 * 부분에는 원하는 명칭을 지정할 수 있음.

▶ lang 속성 language의 약어. 요소의 언어(ISO 639-1)를 지정. - ISO 639-1 코드 목록: ko.wikipedia.org/wiki/ISO_639-1_%EC%BD%94%EB%93%9C_%EB%AA%A9%EB%A1%9D 전역 속성이므로 어느 태그에서든 사용할 수는 있지만 대부분의 경우 에 사용. - 에서만 사용 가능한 것도 아닌데 그렇게 하는 이유는 일반적으로 사용되는 사이트들은 설정되는 언어가 하나기 때문. - 최상위 루트에 lang 속성을 지정해 주면 그 내부에서 일일이 지정해 줄 필요가 없기 때문에. 다른 부분에서는 되도록 반복적이게 사용하지 않는 것을 권장함. 다른 언어가 나온다면 해당 언어가 무엇인지 브라우저에 알려 주는 것도 좋은 방법.

▶ title 속성 요소의 정보(설명)를 지정. 지정된 설명/정보는 마우스 오버 시 tip으로 표시됨.

▶ style 속성 요소에 적용할 CSS를 선언. - CSS의 Inline 작성 방식에 해당. 띄어쓰기를 이용해 선택자라는 개념 없이 CSS를 적용할 수 있는 방식.

※ 전역 속성(Global Attributes)이란? 모든 HTML 요소에서 공통적으로 사용 가능한 속성을 의미. ▶ class 요소의 별칭을 지정. 공백으로 구분하여 여러 개 부여할 수 있음. CSS 혹은 JavaScript의 요소 선택기(CSS 선택자나 GetElementsByClassName, QuerySelectorAll 같은)를 통해서 요소를 선택하거나 접근. 동일한 명칭이 여러 태그에 여러 번 들어가도 상관 없음. 중복 사용 가능. ▶ id 문서에서 고유한 식별자(idenifier, ID)를 정의. CSS 혹은 JavaScript의 요소 선택기(CSS 선택자나 GetElementsByClassName, QuerySelectorAll 같은)를 통해서 요소를 선택하거나 접근. 고유한 이름을 짓는 ..