[HTML] 공통 속성(Global Attributes) / data-* / contenteditable
by mini_min[HTML]
공통 속성(Global Attributes) / data-* / contenteditable
✔️ 공통 속성 : HTML 5 추가 속성
📓 contenteditable : 편집 가능한 영역임을 표시하는 속성이다 (true 나 false 값 줌)
✨ 일반적으로 편집 못하는 <p> 요소도 contenteditable 속성을 지정하면 편집 가능한 요소가 된다.
📓 data-*: HTML 안에 속성처럼 데이터를 저장하거나 추가한다. 특정 데이터를 DOM 요소에 저장해두기 위함이 목적!
📓 draggable : 지정된 요소를 드래그 할 수 있게 한다. 웹 브라우저 외부로까지 드래그 가능하다.
📓 hidden : CSS를 사용하지 않고도 HTML 내에서 요소를 숨길 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
border: 3px dotted gray;
width: 500px;
height: 100px;
overflow: auto;
}
.box2 {
border: 3px solid blue;
width: 450px;
padding: 25px;
text-align: center;
font-weight: 700;
}
</style>
</head>
<body>
<h3>공통 속성</h3>
<p>상자에 마우스를 올려 보세요</p>
<div title="안녕.." style="width: 300px; height: 100px; background: yellow;"></div>
<hr>
<!-- contenteditable : 내용 입력 여부 지정. 자바스크립트로 제어 -->
<div class="box" contenteditable="true"></div>
<hr>
<p> data-* : 개발자가 임의의 속성을 html 요소에 추가 필요로할 때 속성만들기 </p>
<ul>
<li data-subject="java">자바</li>
<li data-subject="spring">스프링</li>
<li data-subject="oracle">오라클</li>
</ul>
<hr>
<!-- draggable : 요소의 드래그 가능 여부 지정 -->
<div class="box2" draggable="true">드래그 예제</div>
</body>
</html>💡 title : 마우스를 올려놨을 때 뜨는 메시지
💡 contenteditable 을 줘서, 두번째 박스는 편집이 가능해졌다.
'HTML' 카테고리의 다른 글
| [HTML] <a> 태그는 인라인 태그라 display 줘야 width 가능 (0) | 2022.09.08 |
|---|---|
| [HTML] 주요 formatting 태그 / <b> / <em> / <i> / <pre> / <sub> / <sup> (0) | 2022.09.06 |
| [HTML] Block-level element / inline element / 특수문자 (0) | 2022.09.06 |
| [HTML] <body> / <h x> / <p> / <br> / <hr> 태그 (0) | 2022.09.06 |
| [HTML] 기본 태그 - http-equiv / <!DOCTYPE> / <html> / <head> / <title> / <meta> (0) | 2022.09.06 |
블로그의 정보
개발자 미니민의 개발로그
mini_min