Data Attribute

 href나 type과 같은 의미가 있는 속성은 아니지만, 해당 요소에 대하여 부가적인 정보를 추가하고 그 부가적인 정보를 통해 그 요소를 지정할 수 있어야 할 때 Data Attribute를 사용한다.

 

기본 사용법

 HTML

<div data-index="1" data-display-name="seung"></div>
<div data-index="2" data-display-name="jun"></div>
<span data-index="1" data-display-name="seung">abcdefu</span>

 추가하고자 하는 데이터 속성은 이처럼 단순히 data- 이후 원하는 데이터 이름을 정해주면 된다.  

 

 CSS

:root {
  --background-color: tomato;
  --margin-bottom: 50px;
}

div {
  width: 200px;
  height: 200px;
  background: var(--background-color);
  margin-bottom: var(--margin-bottom);
}

[data-display-name="seung"] {
  background-color: black;
}

span[data-display-name="seung"] {
  background-color: green;
}

 CSS에서는 위와 같이 []안에 원하는 데이터 속성을 작성하여 해당 요소를 선택할 수 있다.

 

 JavaScript

const seung = document.querySelector("div[data-display-name='seung'"); // 큰 따옴표로 DOM을 선택했다면 값인 seung은 작은 따옴표로 둘러쌓여야 한다.
console.log(seung.dataset); // 출력시 data-가 빠지고 index, displayName(camelCase로 변환됨)이 key값으로 들어간 것을 확인할 수 있다.
console.log(seung.dataset["index"]); // Braket Notation
console.log(seung.dataset.displayName); // Dot Notation

 

 

 dataset으로 해당 요소의 데이터 속성들을 출력해보면 data-가 빠지고 나머지 이름이 key값으로 변하여 객체로 저장된 것을 확인할 수 있다.

 

 이러한 데이터는 민감한 정보를 담고 있을 수 있기 때문에 검사(F12)를 했을 때 안 보이게 할 수도 있어야 한다.

 

 

 

 Data Attribute MDN : https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes

'프로그래밍 > HTML' 카테고리의 다른 글

Emmet  (0) 2022.03.06
Semantic Markup, 시멘틱 구조  (0) 2021.11.07

 Emmet

 Emmet은 조금 더 적은 손길을 거쳐 효율적으로 HTML 코드를 작성하게 해주는 플러그인이다. 따고 Extension에서 설치하지 않아도 요즘 vscode에는 기본적으로 내장되어 있다. 윈도우에서는 기본적으로 tab키를 사용한다.

 

 이러한 Emmet은 대량의, 그리고 반복적인 HTML 코드를 작성할 때 좀 더 빠르게 작성할 수 있도록 도와준다.

 

 

 HTML 파일을 만든 후 !만 친 다음에 tab키를 누르면 밑의 코드가 알아서 만들어진다.

<!-- ! -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

 

    <!-- div -->
    <div></div>

    <!-- .class -->
    <div class="class"></div>

    <!-- .id -->
    <div class="id"></div>

    <!-- div>ul>li -->
    <div>
        <ul>
            <li></li>
        </ul>
    </div>

    <!-- div>ul+ol -->
    <div>
        <ul></ul>
        <ol></ol>
    </div>

    <!-- div>ol>li*3 -->
    <div>
        <ol>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>

    <!-- div>ul>li^ol -->
    <div>
        <ul>
            <li></li>
        </ul>
        <ol></ol>
    </div>

    <!-- div>ul>li^^span -->
    <div>
        <ul>
            <li></li>
        </ul>
    </div>
    <span></span>

    <!-- div>(header>ul>(li>a)*2)+(footer>p) -->
    <div>
        <header>
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </header>
        <footer>
            <p></p>
        </footer>
    </div>

    <!-- p{hello} -->
    <p>hello</p>

    <!-- p.class${item$}*3 -->
    <p class="class1">item1</p>
    <p class="class2">item2</p>
    <p class="class3">item3</p>

    <!-- p>lorem -->
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita fugit tempore atque unde! Repudiandae perspiciatis magnam voluptas? Quisquam ipsum, quaerat distinctio est veritatis voluptatum quae omnis illo culpa illum expedita!</p>

    <!-- p>lorem3 -->
    <p>Lorem, ipsum dolor.</p>

 단순히 div, .class, #id와 같이 입력한 후 tab키를 눌러서 간단하게 태그를 만들 수 있다. 그리고 >와 +를 통해 부모자식형제 구조를 형성할 수 있고 *를 통해 반복되는 태그를 여러 개 형성할 수도 있다. ^를 통해서는 한 단계 위의 부모로 올라간다. ()을 통해 묶어서 태그를 형성할 수도 있다.

 

 {}로는 text로 어떤 것이 올지 적어줄 수 있고 $를 통해서 반복적인 숫자를 적어줄 수도 있다. 그리고 더미용 텍스트가 필요할 때는 lorem을 사용하면 되고 뒤에 숫자를 붙여서 더미용 텍스트의 단어를 조절할 수 있다.

'프로그래밍 > HTML' 카테고리의 다른 글

Data Attribute  (0) 2022.03.07
Semantic Markup, 시멘틱 구조  (0) 2021.11.07

 Semantic 구조란?

semantic : 의미의, 의미론의, 의미론적인

시멘틱 구조란, HTML 문서에서 의미 있는 구조에 의미가 맞는 태그를 사용하는 것을 말한다.

HTML5 시멘틱 구조

시멘틱 구조에서는 위와 같이 웹 페이지에서 가장 윗부분에 올만한 내용들, 이를테면 웹사이트 로고나 로그인 폼 등을 배치할 때 header 태그를 사용하고 header 답게 맨 위에 배치하게 된다. 문서에서 메뉴를 나타낼 때는 nav 태그를 사용할 것이고 여기에 목차나 리스트, 링크 등이 배치된다.

 

이렇듯 의미 있는 구조에 맞는 의미 있는 태그들을 사용하여 HTML 문서를 구성하는 것을 시멘틱 구조라 한다.

Naver 메인 화면을 보면 대략적으로 우리는 어디가 header이고 어디가 nav인지 감으로 알 수 있다. 하지만 컴퓨터라는 기계는 인간이 아니기 때문에 대략적으로 파악이 불가능하다. 구성 요소들이 그저 div 태그로 이루어져 있다면 효율적으로 데이터를 추출하기 어렵다는 것이다. 하지만 시멘틱 구조로 이루어져 있다면 각 정보들이 분류되어 데이터 추출이 용이해진다.

 

Tag Description
header 맨 윗부분으로 사이트 로고, 로그인, 언어 선택 등이 위치한다.
nav 문서에서 방향을 지시하는 곳으로 메뉴, 리스트 등이 위치한다.
aside 본문과 관련 없는 배너 광고 등이 위치한다.
section 여러 중심 내용을 감싸는 공간 ex) 네이버 뉴스에서 연예 섹션 혹은 스포츠 섹션 등등
article 직접적인 내용이 들어가는 곳으로 뉴스 기사 본문 내용 등이 위치한다.
footer 가장 밑 부분으로 주소, 연락처, 저작권 등의 내용이 위치한다.

시멘틱 태그는 모두 div 태그와 같은 기능을 수행한다. 하지만 검색 엔진이 웹 페이지를 파악하거나, 기계적인 동작이 더해질 때 시멘틱 구조로 이루어져 있다면 더욱 쉽게 이해하고 용이하게 이루어진다.

 

시멘틱 이전의 HTML 구조

    <div id="wrap">
      <div id="header">
        <h1>HTML</h1>
      </div>
      <div class="section">
        <div id="article">
          <h2>컨텐츠 1의 제목</h2>
          <p>컨텐츠 1의 내용</p>
        </div>
        <div id="article2">
          <h2>컨텐츠 2의 제목</h2>
          <p>컨텐츠 2의 내용</p>
        </div>
      </div>
      <div id="footer">
        <span>저작권, 연락처, 주소</span>
      </div>
    </div>

 

시멘틱 구조의 HTML

    <div id="wrap">
      <header>
        <h1>나는 제목</h1>
      </header>
      <nav>
        <ol>
          <li><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a></li>
          <li><a href="#">Menu 3</a></li>
        </ol>
      </nav>
      <section>
        <article>
          <h2>컨텐츠 1의 제목</h2>
          <p>컨텐츠 1의 내용</p>
        </article>
        <article>
          <h2>컨텐츠 2의 제목</h2>
          <p>컨텐츠 2의 내용</p>
        </article>
      </section>
      <footer><address>경기도 평택시</address></footer>
    </div>

위에서 표현한 것처럼, <div id="header">라고 표현하는 것보다 <header>로 헤더를 장식하는 것이 직관적이고 효율적이며 의미론적이다.

 

시멘틱 구조를 사용하는 것은 검색 엔진이 파악하는 데에 도움을 줄 뿐만 아니라 개발자들이 코드의 구조를 파악할 때 보다 용이하게 파악할 수 있다.

 

 

 

참고 출처 : https://snusang.tistory.com/4

참고 출처 : https://m.blog.naver.com/won_1020/221718728799

 

'프로그래밍 > HTML' 카테고리의 다른 글

Data Attribute  (0) 2022.03.07
Emmet  (0) 2022.03.06

+ Recent posts

티스토리툴바