뇌 채우기 공간

[html] 전역속성 - class/id/style/title/lang/data-/draggable/hidden/tabindex 본문

WEB/html,CSS

[html] 전역속성 - class/id/style/title/lang/data-/draggable/hidden/tabindex

자바칩 프라푸치노 2021. 4. 13. 10:49

어떤 태그에도 다 사용할 수 있는 속성을 알아보자

 

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로 지정을 해주면 된다.

 

728x90
저작자표시 비영리 변경금지 (새창열림)

'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
'WEB/html,CSS' Related Articles more