![[HTML] 전역 속성](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbippZL%2FbtqBowJ8WRR%2F0k4VZDt9MbqMRodqC1I18K%2Fimg.png)
전역속성(Global Attributes) 모든 HTML 요소에서 사용가능한 속성
속성 class : 요소의 별칭(여러 개 중복 가능) *CSS/JS에서의 요소선택기
속성 id : 문서에서 고유한 식별자 *CSS/JS에서의 요소선택기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Elements</title>
<style>
.section{
width: 100px;
color: red;
background: blue;
}
#section{
height: 200px;
position: relative;
}
</style>
</head>
<body>
<div class="section"></div><!--중복 가능-->
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div id="section"></div><!--중복 불가능-->
<div id="section"></div>
<script>
const section = document.querySelector('.section');//class 값 검색
const sectionId = document.getElementById('section');//id 값 검색
</script>
</body>
</html>
속성 style : 요소에 적용할 CSS 인라인 방식 선언
속성 title : 요소의 설명 지정(마우스 올렸을 때 작게 뜬다) 굉장히 많이 사용된다
속성 lang : 요소의 언어 지정(한 사이트에서 lang 속성은 html에서 하나만 선언하는게 일반적)
속성 data-* : 사용자 정의 데이터 속성 지정. JS에서 이용할 수 있는 데이터를 HTML에 저장하는 용도
<h1 style="color:red; background:blue;">스타일</h1>
<h2 title="이 부분은 제목2입니다!">제목2</h2>
<a href="https://google.com" title="GOOGLE.com">Google</a>
<div title="DIV 태그입니다.">DIV</div>
<div id="me" data-my-name="Yujinss" data-my-age="851">Yujinss</div>
<script>
const me = document.getElementById('me');
console.log(me.dataset.myName);
console.log(me.dataset.myAge);
</script>
속성 draggable : 요소가 Drag and Drop API 사용여부 (auto: false)
속성 hidden : 요소 숨김! 숨긴 요소 동작 가능함.
<form id="hidden-form" action="/form-action" >
<!--숨겨진 양식들!-->
<input type="text" name="id" value="Yujinss" hidden>
</form>
<button form="hidden-form" type="submit">전송</button><!--숨겨진 양식들을 전송-->
속성 tabindex : Tab 키로 요소 포커스를 탐색할 순서 지정 (기본값 tabindex="0")
대화형 콘텐츠에는 기본적으로 순차적으로 탭 순서가 지정 됨.
비 대화형 콘텐츠에 0을 지정해 tab 이동 가능하게 만들 수 있다.
-1을 지정해 포커스 가능하지만 탭 순서에서 제외시킬 수 있다.
*HTML 문서가 순차적으로 탐색하는 것이 추천 되므로 1이상 양수 값은 사용 지양(1~ 큰 숫자 순서로 탐색)
<input type="text" value="1(2)" tabindex="2">
<input type="text" value="2">
<input type="text" value="3(1)" tabindex="1">
<input type="text" value="4">
<input type="text" value="5(3)" tabindex="3">
<br><br>
<input type="text" value="1">
<input type="text" value="2">
<div tabindex="0">2.5</div>
<input type="text" value="3">
<input type="text" value="4" tabindex="-1">
<input type="text" value="5">
'Web > HTML5' 카테고리의 다른 글
| [HTML] 특수기호 출력 (0) | 2020.01.21 |
|---|---|
| [HTML] 양식 (0) | 2020.01.17 |
| [HTML] 표 콘텐츠 (0) | 2020.01.17 |
| [HTML] 스크립트 (0) | 2020.01.17 |
| [HTML] 내장 콘텐츠 (0) | 2020.01.16 |