第5部第2部(ステップ47)-データセット

63761 ワード

1. HTML5 dataset

W 3 Cvalidateのspecをdata-で行います.

dataset Ex)

<div data-id="hika"></div>
<div data-member-id="k123"></div>
</body>
<script>
const a = document.querySelectorAll('div');
console.log(a[0].dataset.id,a[1].dataset.memberId);
<script>

結果:hika k123data-member-idは、dataset.memberIdに変更される.

マイクロデータでデータセットを介してコード全体を変更する

index.html

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="app.css" type="text/css">
</head>
<body data-type="http://schema.org/WebPage">
<h1 data-name="name">CodeSpitz76 - 5</h1>
<nav data-breadcrumb>Home</nav>
<p data-description>
  코드스피츠76 5회차 수업은 CSS 를 쿼리화하여 사용하는 방법을 다룹니다.
</p>
<ul>
  <li data--mainEntity data-type="http://schema.org/CollegeOrUniversity">
    <h2 data-name>HTML5 MicroData</h2>
    <p data-description>마이크로데이터에 대한 개념과 예제</p>
  </li>
  <li data-mainEntity data-type="http://schema.org/CollegeOrUniversity">
    <h2 data-name>HTML5 DataSet</h2>
    <p data-description>데이터셋에 대한 개념과 예제</p>
  </li>
</ul>
<footer>
  <div data-license>MIT</div>
  <div data-publisher>Bsidesoft co.</div>
</footer>
</body>

</html>

app.scss

[data-type$="WebPage"] {
color: #900;
[data-name] { font-size: 20px; padding: 0; margin: 10px 0 }
[data-breadcrumb] { font-size: 11px; margin: 0 10px; color: #234A7F }
[data-description] { font-size: 14px; line-height: 20px; color: #444 }
ul { list-style: none; padding: 0 }
[data-mainEntity] { padding: 0 20px; margin: 10px; border: 1px solid #999; border-radius: 20px }
[data-license] { font-size: 11px; color: #999 }
[data-publisher] { font-size: 12px; font-weight: bold; font-family: sans-serif }
}

[data-type$="CollegeOrUniversity"] {
  [data-name] { font-size: 15px }
  [data-description] { font-size: 12px; line-height: 15px }
}

app.css

[data-type$=WebPage] {
  color: #900;
}
[data-type$=WebPage] [data-name] {
  font-size: 20px;
  padding: 0;
  margin: 10px 0;
}
[data-type$=WebPage] [data-breadcrumb] {
  font-size: 11px;
  margin: 0 10px;
  color: #234A7F;
}
[data-type$=WebPage] [data-description] {
  font-size: 14px;
  line-height: 20px;
  color: #444;
}
[data-type$=WebPage] ul {
  list-style: none;
  padding: 0;
}
[data-type$=WebPage] [data-mainEntity] {
  padding: 0 20px;
  margin: 10px;
  border: 1px solid #999;
  border-radius: 20px;
}
[data-type$=WebPage] [data-license] {
  font-size: 11px;
  color: #999;
}
[data-type$=WebPage] [data-publisher] {
  font-size: 12px;
  font-weight: bold;
  font-family: sans-serif;
}

[data-type$=CollegeOrUniversity] [data-name] {
  font-size: 15px;
}
[data-type$=CollegeOrUniversity] [data-description] {
  font-size: 12px;
  line-height: 15px;
}

/*# sourceMappingURL=app.css.map */

2.表の形状を適用する(儒林のコードを参照)

index.html

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="app.css" type="text/css">
</head>
  <body>
  <h1 data-name>CodeSpitz76</h1>
  <h1 data-name>CodeSpitz76</h1>
  <table>
    <thead>
    <th>번호</th>
    <th>이름</th>
    <th>1강</th>
    <th>2강</th>
    <th>3강</th>
    <th>4강</th>
    <th>개근</th>
    </thead>
    <tr data-id="1">
      <td>1</td>
      <td data-name="이수박">이수박</td>
      <td data-1="on">출석</td>
      <td data-2="on">출석</td>
      <td data-3="on">출석</td>
      <td data-4="on">출석</td>
      <td></td>
    </tr>
    <tr data-id="2">
      <td>2</td>
      <td data-name="김레몬">김레몬</td>
      <td data-1="on">출석</td>
      <td data-2="on">출석</td>
      <td data-3="off">결석</td>
      <td data-4="on">출석</td>
      <td></td>
    </tr>
    <tr data-id="3">
      <td>3</td>
      <td data-name="박오렌">박오렌</td>
      <td data-1="on">출석</td>
      <td data-2="off">결석</td>
      <td data-3="off">결석</td>
      <td data-4="on">출석</td>
      <td></td>
    </tr>
    <tr data-id="4">
      <td>4</td>
      <td data-name="서라임">서라임</td>
      <td data-1="off">결석</td>
      <td data-2="off">결석</td>
      <td data-3="off">결석</td>
      <td data-4="off">결석</td>
      <td></td>
    </tr>
  </table>
  </body>
</html>

app.scss

[data-1="on"],
[data-2="on"],
[data-3="on"],
[data-4="on"] {
  color: green;
}
[data-1="off"],
[data-2="off"],
[data-3="off"],
[data-4="off"] {
  color: red;
}


/*노란색 표시 로직 (scss 문법을 떠올려보기)*/

// 1) on/off/off, off/on/off와 같은 경우
// i와 j를 돌면서 i==j인 경우는 on, 아닌 경우는 off를 ret 빈 문자열인 ret 변수에 더해가면서 결과적으로 ret 문자열에 모든 경우의 수가 담김.
@for $i from 1 through 4 {
  $ret: "";
  @for $j from 1 through 4 {
    @if $j == $i {
      $ret: $ret + "[data-" + $j + '="on"]';
    } @else {
      $ret: $ret + "[data-" + $j + '="off"]';
    }
    $ret: $ret + "+";
  }
  $ret: $ret + "td";
  #{$ret} {
    background: yellow;
  }
}

// 2) on/on/off 같은 경우
@for $i from 1 through 4 {
  $ret: "";
  @for $j from 1 through 4 {
    @if $j == $i {
      $ret: $ret + "[data-" + $j + '="off"]';
    } @else {
      $ret: $ret + "[data-" + $j + '="on"]';
    }
    $ret: $ret + "+";
  }
  $ret: $ret + "td";
  #{$ret} {
    background: yellow;
  }
}

/* 초록색을 표시하는 코드 */
// 출석,출석,출석인 경우 그 옆에 있는 td에 스타일을 주겠다는 것
[data-1="on"] + [data-2="on"] + [data-3="on"] +[data-4="on"] + td {
  background: green;
}

/* 빨간색을 표시하는 코드 */
[data-1="off"] + [data-2="off"] + [data-3="off"] +  [data-4="off"] +td {
  background: red;
}

@for $i from 1 through 3 {
  @for $j from $i+1 through 4 {
    $ret: "";
    @for $k from 1 through 4 {
      @if ($i == $k){
        $ret: $ret + "[data-" + $k + '="on"]';
      }
      @else if ($j == $k){
        $ret: $ret + "[data-" + $k + '="on"]';
      }
      @else{
        $ret: $ret + "[data-" + $k + '="off"]';
      }
      $ret: $ret + "+";
    }
    $ret: $ret + "td";
    #{$ret} {
      background: yellow;
    }
  }
}

対応する結果

儒林の苦悩。

悶える🤔
上のコードでは2)on/on/offなどを直接記述しており,3つの偽数ではなく4,5個にコードを追加するとコードが正常に動作しない.違うのを編むみたい

解決策(4つに基づく)


@for $i from 1 through 3 {
  @for $j from $i+1 through 4 {
    $ret: "";
    @for $k from 1 through 4 {
      @if ($i == $k){
        $ret: $ret + "[data-" + $k + '="on"]';
      }
      @else if ($j == $k){
        $ret: $ret + "[data-" + $k + '="on"]';
      }
      @else{
        $ret: $ret + "[data-" + $k + '="off"]';
      }
      $ret: $ret + "+";
    }
    $ret: $ret + "td";
    #{$ret} {
      background: yellow;
    }
  }
}

その内容はjsであり、以下に示す.


  for(let i = 1; i < 5; i++)
  for(let l = i+1; l < 5; l++) {
    console.log(i,l)
  }

結果から見ると.

このようにすなわち,1,2,3,4の中から2つを選んだ結果である.これをscssとして適用します.
再び上記のように.
基本的な$i、$jが見つかり、$kはパレード時に$iまたは$jに合致する場合はonを使用し、そうでない場合はoffを使用します.

悩み事

どうしたんですか.@for $i from 1 through 3部分はthrougth 4ではなく3ですか?

n/a.理由

app.scss

@for $i from 1 through 5 {
  @for $j from $i+1 through 4 {
    $ret: "";
    $ret: $ret + "[data-" + $i+$j + '="on"]';
    $ret: $ret + "td";
    #{$ret} {
      background: yellow;
    }
  }
}

app.css


[data-12=on] td {
  background: yellow;
}

[data-13=on] td {
  background: yellow;
}

[data-14=on] td {
  background: yellow;
}

[data-23=on] td {
  background: yellow;
}

[data-24=on] td {
  background: yellow;
}

[data-34=on] td {
  background: yellow;
}

[data-45=on] td {
  background: yellow;
}

[data-44=on] td {
  background: yellow;
}

[data-56=on] td {
  background: yellow;
}

[data-55=on] td {
  background: yellow;
}

[data-54=on] td {
  background: yellow;
}

これは不思議な結果だ.

$iが4の場合、$jは5であり、4を通過する
data-45 data-44

$iが5の場合、$jは6で、4
データ-56 data-55 data-54フォーマット

表を整理する

4つの場合はすべて出席し、すべて欠席するのは簡単です.
一度だけ出席するか欠席するかは4 C 1形式の組み合わせです.
2回しか出席しなかったり欠席しなかったりするのは4 C 2形式のグループです.
特に、4 C 2の追加結果は以下の通りである.
jsコードとは異なり、そこに通じる形態であるため、for문의 <とはやや異なる.(高い数から下げることもできます)
scssで組み合わせを追加し続けるのは合理的ではありません.
(jsで複雑な組み合わせを書くにはコードを書く必要があるようです)あるいはjsで書かれたコードをscss関数に変換する方法を学ぶ

リファレンス

テーブルコード

Reference

この問題について(第5部第2部(ステップ47)-データセット), 我々は、より多くの情報をここで見つけました https://velog.io/@khw970421/코드스피츠-css-rendering-5회차-part2-step-47

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

拡張Euclideanアルゴリズム

POSIXスレッドベース