어떤 태그에도 다 사용할 수 있는 속성을 알아보자
1. class와 id
<!-- 클래스는 별명 아이디는 이름 -->
<!-- 아이디는 고유해야한다. -->
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div id="section"></div>2. style
<h1 style="color: red; background: blue;">반가워</h1>
3. title
<h2 title="이 부분은 제목2입니다.">제목2</h2>
<a href="https://sso-feeling.tistory.com/manage/posts/" title="내 블로그다"> 내블로그 </a>
4. lang
<html lang="en">보통은 html 부분에서 언어를 지정해준다.
5. data-*
사용자 정의 데이터 속성을 지정.
HTML에 JavaScript에서 이용할 수 있는 데이터(정보)를 저장하는 용도로 사용.
data- 하고 *에 아무거나 쓸 수 있음
자바스크립트에서 활용을 할 수 있음
html에서 데이터를 보관하고 있다가 js에서 활용한다.
<div id="me" data-my-name="java" data-my-age="1111">자바칩 프라푸치노</div>
<script>
const me= document.getElementById('me');
//java가 나옴
console.log(me.dataset.myName);
//1111이 나옴
console.log(me.dataset.myAge);
</script>
6. draggable
HTML Global draggable Attribute (w3schools.com)
HTML Global draggable Attribute
HTML draggable Attribute Example A draggable paragraph:
This is a draggable paragraph.
Try it Yourself » Definition and Usage The draggable attribute specifies whether an element is draggable or not. Tip: Links and images are dragg
www.w3schools.com
7. hidden
<form id="hidden-form" action="/form-action" hidden>
<!-- 숨겨진 양식들.. -->
<input type="text" name="id" value="javachip">
</form>
<button form="hidden-form" type="submit">전송</button>hidden속성을 부여하면 양식이 보여지지 않음
이미 정해놓은 양식이 있음
8. tabindex
tab키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 지정
대화형 콘텐츠는 기본적으로 순서가 지정됨
콘텐츠 카테고리 - 웹 개발자 안내서 | MDN (mozilla.org)
콘텐츠 카테고리 - 웹 개발자 안내서 | MDN
콘텐츠 카테고리 모든 HTML 요소는 특성을 공유하는 요소끼리 묶는 콘텐츠 카테고리 한 가지 이상에 속합니다. 콘텐츠 카테고리는 느슨한 관계로 서로 간에 어떤 관계를 형성하지는 않지만, 카
developer.mozilla.org
비대화형 콘텐츠에서는 tabindex로 지정을 해주면 된다.
'WEB > html,CSS' 카테고리의 다른 글
| [html] 특수기호- 띄워쓰기 출력하기/ 꺽쇠 출력하기 (0) | 2021.04.15 |
|---|---|
| [html] 절대경로와 상대경로(수정필요) (0) | 2021.04.15 |
| [html] select/ option 태그/ 선택할 수 있는 선택지 만들기/ datalist태그/ 자동완성 기능 (0) | 2021.04.13 |
| [html][css] css 스타일 초기화하는법/ reset css cdn (0) | 2021.04.08 |
| [html] form 태그 속성/ action method autocomplete novalidate target (0) | 2021.04.08 |