코드스피츠 2강 과제

shield.html

<div class="background">
  <div class="shield">
    ★
  </div>
</div>

shield.scss

$background-height: 350;
$shield-size: $background-height / 3;
$line-collection: ( (blur: 0, color: rgba(170, 0, 32, 1)), (blur: 0, color: white), (blur: 0, color: rgba(170, 0, 32, 1)) );
$line-count: length($line-collection);
$line-width: 25;
$box-shadows: '';


@function getUnit($number){
  @if($number == 0) {
    @return 0;
  }
  @return $number + px;
}
  
@for $i from 1 through $line-count {
   $offset: $line-width * $i;
   $line: nth($line-collection, $i);
   $box-shadows: $box-shadows + ' ' + '0' + ' ' + '0'+ ' ' + map-get($line, 'blur') + ' ' + ' ' + getUnit( $offset) + ' ' + map-get($line, 'color') + ',';
}

$box-shadows: $box-shadows + ' 0 0 20px ' + ($line-width * ($line-count + 0.5) + px) + ' rgba(170, 0, 32, 0.5)';

.background {
  position: relative;
  background: #fff;
  text-align: center;
  height: $background-height + px;
  box-shadow: 0 0 3px 1px rgba(0,0,0, 0.5);
}

.shield {
  /*포지션 오프셋을 이용한 가운데 정렬 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  border-radius: 50%;
  background: navy;
  color: white;
  box-sizing: border-box;
  width: $shield-size + px;
  height: $shield-size + px;
  line-height: $shield-size + px;
  font-size: $shield-size * 1.08 + px;
  padding-top: $shield-size * 0.07 + px;
  box-shadow: #{$box-shadows};
}

https://jsfiddle.net/soonpyo/yn5Lzwe8/

jsfiddle link 입니다. 감사합니다.

1. div 구조를 잘 지켰는가 : 5
2. box shadow를 이용했는가 : 5

10/10 => 100점 입니다.