공통적으로 사용하는 속성(Global Attributes)
- accesskey : 문서의 요소에 단축키 설정
- class : 문서의 요소를 식별. 스타일시트 선택자(CSS의 셀렉터)
- dir : HTML문서의 요소 안에 있는 텍스트의 방향을 설정
- id : 요소의 유일한 식별. 스타일시트 선택자
- lang : 요소 내용의 언어를 지정
- style : 요소에 대한 인라인 스타일을 지정
- tabindex : 탭 순서에서의 위치를 지정
- title : 해당 element 의 제목
+ HTML 5 추가 속성
- contenteditable : 편집 가능한 영역임을 표시하는 속성
- data-* : HTML 안에 속성처럼 데이터를 저장하거나 추가
- draggable : 지정된 요소를 드래그 할 수 있게 한다. 웹 브라우저 외부로까지 드래그가 가능하다.
- dropzone : 드래그된 데이터를 드롭할 때 복사, 이동, 링크
- hidden : CSS를 사용하지 않고도 HTML 내에서 요소를 숨길 수가 있다.
ex06 >>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
border: 3px solid gray;
width: 500px;
height: 100px;
}
</style>
</head>
<body>
<h3>공통 속성</h3>
<p>노랑 상자에 마우스를 올려 보세요...</p>
<div title="안녕.." style="width: 300px; height: 50px; background: yellow;"></div>
<hr>
<!-- contenteditable : 내용을 입력할 수 있는지의 여부를 지정하며 입력된 내용의 제어는 자바스크립트로 -->
<p class="box" contenteditable="true"></p>
<hr>
<p>data-* : 개발자가 임의의 속성을 html 요소에 추가할 때 사용 </p>
<ul>
<li data-subject="java">자바</li>
<li data-subject="spring">스프링</li>
<li data-subject="oracle">오라클</li>
</ul>
<hr>
<p> draggable : 지정된 요소의 드래그 가능 여부를 지정</p>
<div class="box" draggable="true">드래그 예제</div>
</body>
</html>
'쌍용강북교육센터 > 9월' 카테고리의 다른 글
| 0913_HTML : 레이아웃 관련 태그 (1) (1) | 2021.09.14 |
|---|---|
| 0913_HTML : 기본 태그(5) formatting 관련 태그 (0) | 2021.09.14 |
| 0913_HTML : 기본 태그(3) 블럭요소와 인라인 요소 (1) | 2021.09.14 |
| 0913_HTML : 기본 태그 (2) (1) | 2021.09.14 |
| 0913_HTML : 기본 태그(1) (1) | 2021.09.14 |