Last active
June 21, 2018 03:43
-
-
Save Duckuism/654bd463f485649700481d5950137ee9 to your computer and use it in GitHub Desktop.
코드스피츠 75-5회차 과제
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>Document</title> | |
<link rel="stylesheet" href="css/test.css"> | |
</head> | |
<body> | |
<h1 data-name>CodeSpitz72 - member</h1> | |
<table> | |
<thead> | |
<th>번호</th> | |
<th>이름</th> | |
<th>1강</th> | |
<th>2강</th> | |
<th>3강</th> | |
<th>4강</th> | |
<th>5강</th> | |
<th>6강</th> | |
<th>개근</th> | |
</thead> | |
<tr data-id="1"> | |
<td>1</td> | |
<td data-name="james">james</td> | |
<td data-1="on">출석</td> | |
<td data-2="on">출석</td> | |
<td data-3="on">출석</td> | |
<td data-4="on">출석</td> | |
<td data-5="on">출석</td> | |
<td data-6="on">출석</td> | |
<td></td> | |
</tr> | |
<tr data-id="36"> | |
<td>36</td> | |
<td data-name="angelina">angelina</td> | |
<td data-1="on">출석</td> | |
<td data-2="on">출석</td> | |
<td data-3="on">출석</td> | |
<td data-4="off">결석</td> | |
<td data-5="on">출석</td> | |
<td data-6="on">출석</td> | |
<td></td> | |
</tr> | |
<tr data-id="22"> | |
<td>22</td> | |
<td data-name="tony">tony</td> | |
<td data-1="on">출석</td> | |
<td data-2="off">결석</td> | |
<td data-3="on">출석</td> | |
<td data-4="off">결석</td> | |
<td data-5="on">출석</td> | |
<td data-6="on">출석</td> | |
<td></td> | |
</tr> | |
<tr data-id="22"> | |
<td>22</td> | |
<td data-name="tony">tony</td> | |
<td data-1="on">출석</td> | |
<td data-2="off">결석</td> | |
<td data-3="on">출석</td> | |
<td data-4="off">결석</td> | |
<td data-5="off">결석</td> | |
<td data-6="on">출석</td> | |
<td></td> | |
</tr> | |
<tr data-id="22"> | |
<td>22</td> | |
<td data-name="tony">tony</td> | |
<td data-1="off">결석</td> | |
<td data-2="off">결석</td> | |
<td data-3="on">출석</td> | |
<td data-4="off">결석</td> | |
<td data-5="on">출석</td> | |
<td data-6="off">결석</td> | |
<td></td> | |
</tr> | |
<tr data-id="22"> | |
<td>22</td> | |
<td data-name="tony">tony</td> | |
<td data-1="off">결석</td> | |
<td data-2="off">결석</td> | |
<td data-3="off">결석</td> | |
<td data-4="off">결석</td> | |
<td data-5="on">출석</td> | |
<td data-6="off">결석</td> | |
<td></td> | |
</tr> | |
<tr data-id="7"> | |
<td>7</td> | |
<td data-name="lisa">lisa</td> | |
<td data-1="off">결석</td> | |
<td data-2="off">결석</td> | |
<td data-3="off">결석</td> | |
<td data-4="off">결석</td> | |
<td data-5="off">결석</td> | |
<td data-6="off">결석</td> | |
<td></td> | |
</tr> | |
</table> | |
<footer> | |
<div data-license>MIT</div> | |
<div data-publisher>Bsidesoft co.</div> | |
</footer> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[data-1="on"], | |
[data-2="on"], | |
[data-3="on"], | |
[data-4="on"], | |
[data-5="on"], | |
[data-6="on"] { | |
color: white; | |
background: green | |
} | |
[data-1="off"], | |
[data-2="off"], | |
[data-3="off"], | |
[data-4="off"], | |
[data-5="off"], | |
[data-6="off"] { | |
color: white; | |
background: red | |
} | |
[data-1="on"], | |
[data-2="on"], | |
[data-3="on"], | |
[data-4="on"], | |
[data-5="on"], | |
[data-6="on"]+td { | |
background: green | |
} | |
[data-1="off"], | |
[data-2="off"], | |
[data-3="off"], | |
[data-4="off"], | |
[data-5="off"], | |
[data-6="off"]+td { | |
background: red | |
} | |
// 결석이 한 번, 두 번일 때 | |
$cnt: 1; | |
@for $i from 1 through 6 { | |
$ret: ""; | |
@for $j from 1 through 6 { | |
@if $i==$j or $cnt==$j { | |
$ret: $ret + '[data-' + $j + '="off"]'; | |
} | |
@else { | |
$ret: $ret + '[data-' + $j + '="on"]'; | |
} | |
$ret: $ret+'+'; | |
} | |
#{$ret+'td'} { | |
background: yellow | |
} | |
; | |
} | |
$cnt: $cnt+1; | |
@for $i from 1 through 6 { | |
$ret: ""; | |
@for $j from 1 through 6 { | |
@if $i+1==$j or ($cnt==$j) { | |
$ret: $ret + '[data-' + $j + '="off"]'; | |
} | |
@else { | |
$ret: $ret + '[data-' + $j + '="on"]'; | |
} | |
$ret: $ret+'+'; | |
} | |
#{$ret+'td'} { | |
background: yellow | |
} | |
; | |
} | |
$cnt: $cnt+1; | |
@for $i from 1 through 6 { | |
$ret: ""; | |
@for $j from 1 through 6 { | |
@if $i+2==$j or ($cnt==$j) { | |
$ret: $ret + '[data-' + $j + '="off"]'; | |
} | |
@else { | |
$ret: $ret + '[data-' + $j + '="on"]'; | |
} | |
$ret: $ret+'+'; | |
} | |
#{$ret+'td'} { | |
background: yellow | |
} | |
; | |
} | |
$cnt: $cnt+1; | |
@for $i from 1 through 6 { | |
$ret: ""; | |
@for $j from 1 through 6 { | |
@if $i+3==$j or ($cnt==$j) { | |
$ret: $ret + '[data-' + $j + '="off"]'; | |
} | |
@else { | |
$ret: $ret + '[data-' + $j + '="on"]'; | |
} | |
$ret: $ret+'+'; | |
} | |
#{$ret+'td'} { | |
background: yellow | |
} | |
; | |
} | |
$cnt: $cnt+1; | |
@for $i from 1 through 6 { | |
$ret: ""; | |
@for $j from 1 through 6 { | |
@if $i+4==$j or ($cnt==$j) { | |
$ret: $ret + '[data-' + $j + '="off"]'; | |
} | |
@else { | |
$ret: $ret + '[data-' + $j + '="on"]'; | |
} | |
$ret: $ret+'+'; | |
} | |
#{$ret+'td'} { | |
background: yellow | |
} | |
; | |
} | |
//결석 세 번일때 | |
$start: 1; | |
$end: 2; | |
@for $i from 1 through 6 { | |
$ret: ""; | |
@for $j from 1 through 6 { | |
@if $i==$j { | |
$ret: $ret + '[data-' + $j + '="off"]'; | |
} | |
@else if $j>=$start and $j<=$end { | |
$ret: $ret + '[data-' + $j + '="off"]'; | |
} | |
@else { | |
$ret: $ret + '[data-' + $j + '="on"]'; | |
} | |
$ret: $ret+'+'; | |
} | |
#{$ret+'td'} { | |
background: yellow | |
} | |
; | |
} | |
$start: $start+1; | |
$end: $end+1; | |
@for $i from 1 through 6 { | |
$ret: ""; | |
@for $j from 1 through 6 { | |
@if $i==$j { | |
$ret: $ret + '[data-' + $j + '="off"]'; | |
} | |
@else if $j>=$start and $j<=$end { | |
$ret: $ret + '[data-' + $j + '="off"]'; | |
} | |
@else { | |
$ret: $ret + '[data-' + $j + '="on"]'; | |
} | |
$ret: $ret+'+'; | |
} | |
#{$ret+'td'} { | |
background: yellow | |
} | |
; | |
} | |
$start: $start+1; | |
$end: $end+1; | |
@for $i from 1 through 6 { | |
$ret: ""; | |
@for $j from 1 through 6 { | |
@if $i==$j { | |
$ret: $ret + '[data-' + $j + '="off"]'; | |
} | |
@else if $j>=$start and $j<=$end { | |
$ret: $ret + '[data-' + $j + '="off"]'; | |
} | |
@else { | |
$ret: $ret + '[data-' + $j + '="on"]'; | |
} | |
$ret: $ret+'+'; | |
} | |
#{$ret+'td'} { | |
background: yellow | |
} | |
; | |
} | |
$start: $start+1; | |
$end: $end+1; | |
@for $i from 1 through 6 { | |
$ret: ""; | |
@for $j from 1 through 6 { | |
@if $i==$j { | |
$ret: $ret + '[data-' + $j + '="off"]'; | |
} | |
@else if $j>=$start and $j<=$end { | |
$ret: $ret + '[data-' + $j + '="off"]'; | |
} | |
@else { | |
$ret: $ret + '[data-' + $j + '="on"]'; | |
} | |
$ret: $ret+'+'; | |
} | |
#{$ret+'td'} { | |
background: yellow | |
} | |
; | |
} | |
//결석 네 번, 다섯 번일 때 | |
$cnt: 1; | |
@for $i from 1 through 6 { | |
$ret: ""; | |
@for $j from 1 through 6 { | |
@if $i==$j or $cnt==$j { | |
$ret: $ret + '[data-' + $j + '="on"]'; | |
} | |
@else { | |
$ret: $ret + '[data-' + $j + '="off"]'; | |
} | |
$ret: $ret+'+'; | |
} | |
#{$ret+'td'} { | |
background: yellow | |
} | |
; | |
} | |
$cnt: $cnt+1; | |
@for $i from 1 through 6 { | |
$ret: ""; | |
@for $j from 1 through 6 { | |
@if $i+1==$j or ($cnt==$j) { | |
$ret: $ret + '[data-' + $j + '="on"]'; | |
} | |
@else { | |
$ret: $ret + '[data-' + $j + '="off"]'; | |
} | |
$ret: $ret+'+'; | |
} | |
#{$ret+'td'} { | |
background: yellow | |
} | |
; | |
} | |
$cnt: $cnt+1; | |
@for $i from 1 through 6 { | |
$ret: ""; | |
@for $j from 1 through 6 { | |
@if $i+2==$j or ($cnt==$j) { | |
$ret: $ret + '[data-' + $j + '="on"]'; | |
} | |
@else { | |
$ret: $ret + '[data-' + $j + '="off"]'; | |
} | |
$ret: $ret+'+'; | |
} | |
#{$ret+'td'} { | |
background: yellow | |
} | |
; | |
} | |
$cnt: $cnt+1; | |
@for $i from 1 through 6 { | |
$ret: ""; | |
@for $j from 1 through 6 { | |
@if $i+3==$j or ($cnt==$j) { | |
$ret: $ret + '[data-' + $j + '="on"]'; | |
} | |
@else { | |
$ret: $ret + '[data-' + $j + '="off"]'; | |
} | |
$ret: $ret+'+'; | |
} | |
#{$ret+'td'} { | |
background: yellow | |
} | |
; | |
} | |
$cnt: $cnt+1; | |
@for $i from 1 through 6 { | |
$ret: ""; | |
@for $j from 1 through 6 { | |
@if $i+4==$j or ($cnt==$j) { | |
$ret: $ret + '[data-' + $j + '="on"]'; | |
} | |
@else { | |
$ret: $ret + '[data-' + $j + '="off"]'; | |
} | |
$ret: $ret+'+'; | |
} | |
#{$ret+'td'} { | |
background: yellow | |
} | |
; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3중 for문으로 코드를 간결하게 짜볼 수 있을 거라고 생각했는데 생각보다 어려워서 일단 하드코딩으로라도 제출하겠습니다..ㅠㅠ