2022-04-21 CSS data

홍왕열·2022년 4월 20일
0

CSS

목록 보기
2/6

CSS data

css에서 data는 굳이 id나 class명 말고 내가 원하는 데이터를 추가하고 싶을 때 사용한다.

 <style>
      div {
        width: 200px;
        height: 200px;
        background-color: tomato;
        margin-bottom: 50px;
      }

      div[data-display-name="dream"] {
        background-color: beige;
      }
      /* [data-display-name="dream"] {
        background-color: beige;
      } 원래는 적용할 때 이런 식. 위의 것은 div안에만 있는 data-display-name에 적용하겠다는 뜻*/
    </style>
  </head>
  <body>
    <div data-index="1" data-display-name="dream"></div>
    <!-- 우리만의 필요한 데이터를 추가할 때는 data-원하는 이름
    데이터 속성값을 바꿔서 적용 -->
    <div data-index="2" data-display-name="coding"></div>
    <span data-index="1" data-display-name="dream">sdfsdf</span>
    <script>
      const dream = document.querySelector('div[data-display-name="dream"]'); 
//따옴표 안에 동일한 따옴표를 쓸 수 없기 때문에 쌍따옴표로 바꾼 것
      console.log(dream.dataset);
      // 기본적으로 data로 지정한 것을 불러올 수 있다.
      console.log(dream.dataset.displayName);
      console.log(dream.dataset.index);
    </script>

여기서 잘 보아야할 것은 console창이다

보면 기본적으로 dataset으로 기본적인 이 data의 구조를 볼 수 있다.

잘 기억하자.

부트캠프 끝나서 좀 헤이해진 것 같다.
조금 더 열심히 하자.

부족한 부분 채워가며 앞으로 천천히 나아가자

profile
코딩 일기장

0개의 댓글