본문 바로가기
학원에서 배운 것/JavaScript

삼일절도 달려야한다니

by 쿠리의일상 2023. 3. 1.

팀 작업이 중간에 다다랐다. 뭔가 한건 많은 것 같은데 막상 까보면 별거 없는 기분이라 조금은 허무하기도 하다.

 

꽤 .. 귀여울지도?

 

오늘은 scss를 활용하여 @each와 @if를 사용해보았다.

이미지를 넣기 위해... 해봤는데 css 코드 몇 줄 줄이자고 이걸 꼭 써야하나 하는 생각이 사라지지 않는다 ㅋㅋㅋ

 

$mainImgName : 'activity' 'cafe' 'food' 'tourist' 'emergency';
@each $el in $mainImgName {
$idx : index($mainImgName, $el);
&:nth-child(#{$idx}) .parts__image {
  $path : '../source/' + $el + 'Main.jpeg';
  background-image: url($path);

  @if ($idx == 1) {
    background-position: 0 -40px;
  } @else if ($idx == 2) {
    background-position: 0 -60px;
  }
}
}

일단은 이렇게 읽어와봤다.. 하드코딩을 줄이고 싶은데 머리 아프다~

 

그래도 얼추 틀이 점점 잡혀가고 있어서 완성된 홈페이지를 보고 싶다!