코드스피츠 css rendering 5회차 part2 (step 47) - dataset

KHW·2021년 7월 28일
js-study
0

js-study

목록 보기
38/39

1. HTML5 dataset

W3C validate 를 통과하기 위한 스펙으로 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 k123

해당 data-member-id는 dataset.memberId로 바뀌게 처리된다.

microdata에서 dataset을 통한 전체코드 수정하기

  • 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
1 3
1 4
2 3
2 4
3 4

이와 같다. 즉, 1,2,3,4중 2개를 뽑은 결과이다. 이를 scss로 적용시키면
다시 위와 같다.

기본적인 $i, $j를 찾고 $k가 순회하면서 $i나 $j와 맞는다면 on으로 적용시키고 아니라면 off로 적용시킨다.

고민거리

왜? @for $i from 1 through 3 부분이 througth 4가아닌 3인걸까?

이유

  • 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가 되면서 through 4로인해
    data-45 data-44
  • $i가 5가 될때 $j가 6이 되면서 through 4로인해
    data-56 data-55 data-54 형태로

table 정리

4개의 경우일때 전부출석, 전부결석은 쉬우나
1번만 출석이나 결석은 4C1 형태의 조합이고
2번만 출석이나 결석은 4C2 형태의 조합이다.
특히, 추가한 4C2 결과는 위와 같고
js코드와 다르게 through는 그곳으로 향하는 형태이므로 for문의 <와는 조금 다르다 본다. (높은수에서 내려가는 것도 가능)

계속 저렇게 scss로 조합을 추가하는 것은 무리가 있다.
(js로 복잡한 조합은 코드를 짜야할듯) 아니면 js짠 코드를 scss로 함수형태로 바꿀수있는 방법을 배워야할듯

참고

table코드

profile
KHW
나의 하루를 가능한 기억하고 즐기고 후회하지말자
이전 포스트

코드스피츠 css rendering 5회차 part1 (step 46) - SCSS , 마이크로데이터

다음 포스트

코드스피츠 css rendering 6회차 (step 48) - display , flexbox

0개의 댓글