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문으로 코드를 간결하게 짜볼 수 있을 거라고 생각했는데 생각보다 어려워서 일단 하드코딩으로라도 제출하겠습니다..ㅠㅠ