W3C validate 를 통과하기 위한 스펙으로
data-
를 통해 진행한다.
<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
로 바뀌게 처리된다.
<!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>
[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 }
}
[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 */
<!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>
[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개로 늘어나면 코드가 제대로 동작하지 않는다. 다르게 짜야할 것 같다.
@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인걸까?
@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;
}
}
}
[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 형태로
4개의 경우일때 전부출석, 전부결석은 쉬우나
1번만 출석이나 결석은 4C1 형태의 조합이고
2번만 출석이나 결석은 4C2 형태의 조합이다.
특히, 추가한 4C2 결과는 위와 같고
js코드와 다르게 through는 그곳으로 향하는 형태이므로for문의 <
와는 조금 다르다 본다. (높은수에서 내려가는 것도 가능)
계속 저렇게 scss로 조합을 추가하는 것은 무리가 있다.
(js로 복잡한 조합은 코드를 짜야할듯) 아니면 js짠 코드를 scss로 함수형태로 바꿀수있는 방법을 배워야할듯